wip

Author: chrisj

src/layer/segmentation/index.ts

@@ -123,8 +123,11 @@ import type { vec3, vec4 } from "#src/util/geom.js";
 import {
   parseArray,
   parseUint64,
+  verifyArray,
   verifyFiniteNonNegativeFloat,
+  verifyObject,
   verifyObjectAsMap,
+  verifyObjectProperty,
   verifyOptionalObjectProperty,
   verifyString,
 } from "#src/util/json.js";
@@ -139,6 +142,18 @@ import { ShaderControlState } from "#src/webgl/shader_ui_controls.js";
 
 const MAX_LAYER_BAR_UI_INDICATOR_COLORS = 6;
 
+export interface SegmentPropertyColor {
+  type: "tag" | "numeric";
+  property: string;
+  map?: Map<string, string>; // TODO is there a color type?
+  options?: {
+    min?: number;
+    max?: number;
+    minColor?: string;
+    maxColor?: string;
+  }
+}
+
 export class SegmentationUserLayerGroupState
   extends RefCounted
   implements SegmentationGroupState
@@ -302,9 +317,69 @@ export class SegmentationUserLayerColorGroupState
   specificationChanged = new Signal();
   constructor(public layer: SegmentationUserLayer) {
     super();
+
+
+    this.segmentPropertyColorsMap = this.registerDisposer(makeCachedDerivedWatchableValue(
+          (segmentPropertyMap, segmentPropertyColors) => {
+            console.log('update segmentPropertyColorsMap');
+            segmentPropertyColors;
+            const map = new Uint64Map();
+            if (!segmentPropertyMap) {
+              return map;
+            }
+
+            const { tags: tagsProperty } = segmentPropertyMap;
+
+            console.log("tags", segmentPropertyMap.tags);
+
+            for (const propertyColor of segmentPropertyColors) {
+              if (propertyColor.type === "tag" && tagsProperty) {
+                const { tags, values } = tagsProperty;
+
+                // const colors =  todo performance, cache colors as bigints
+
+                const bigIntColors = new Map<string, bigint>();
+                for (const [tag, colorString] of propertyColor.map!.entries()) {
+                  const color = parseRGBColorSpecification(colorString);
+                  bigIntColors.set(tag, BigInt(packColor(color)));
+                  console.log("tag color", tag, colorString, color);
+                }
+
+                for (const [index, id] of (segmentPropertyMap.segmentPropertyMap.inlineProperties?.ids || []).entries()) {
+                  if (map.has(id)) continue; // priority first color match
+                  const tagIndices = values[index];
+                  const segmentTags = new Set(
+                      tagIndices.split("").map((x) => tags[x.charCodeAt(0)]),
+                  );
+
+                  for (const [tag, color] of bigIntColors.entries()) {
+                    if (segmentTags.has(tag)) {
+                      map.set(id, color);
+                      break;
+                    }
+                  }
+                }
+              } else if (propertyColor.type === "numeric") {
+                console.log("propety:", propertyColor.property);
+              }
+
+              /*
+              "type": "numeric",
+              "property": "Nvx",
+              */
+            }
+            console.log('map', map.size);
+            return map;
+          },
+          [this.layer.displayState.originalSegmentationGroupState.segmentPropertyMap,
+          this.segmentPropertyColors],
+        ));
+
     const { specificationChanged } = this;
     this.segmentColorHash.changed.add(specificationChanged.dispatch);
     this.segmentStatedColors.changed.add(specificationChanged.dispatch);
+    this.segmentPropertyColors.changed.add(specificationChanged.dispatch);
+    this.segmentPropertyColorsMap.changed.add(specificationChanged.dispatch);
     this.tempSegmentStatedColors2d.changed.add(specificationChanged.dispatch);
     this.segmentDefaultColor.changed.add(specificationChanged.dispatch);
     this.tempSegmentDefaultColor2d.changed.add(specificationChanged.dispatch);
@@ -330,39 +405,103 @@ export class SegmentationUserLayerColorGroupState
           parseRGBColorSpecification(String(x)),
         );
         for (const [idStr, colorVec] of result) {
+          console.log("stated color", idStr, colorVec);
           const id = parseUint64(idStr);
           const color = BigInt(packColor(colorVec));
           this.segmentStatedColors.set(id, color);
         }
       },
     );
+
+    verifyOptionalObjectProperty(
+      specification,
+      json_keys.SEGMENT_PROPERTY_COLORS_JSON_KEY,
+      (value) => {
+        const segmentPropertyColors = verifyArray(value);
+        for (const propertyColor of segmentPropertyColors) {
+          verifyObject(propertyColor);
+          const type = verifyObjectProperty(
+            propertyColor,
+            "type",
+            verifyString,
+          );
+          const property = verifyObjectProperty(
+            propertyColor,
+            "property",
+            verifyString,
+          );
+          const map = verifyObjectProperty(
+            propertyColor,
+            json_keys.MAP_JSON_KEY,
+            (x) => {
+              verifyObject(x);
+              const res = new Map<string, string>();
+              for (const [tag, value] of Object.entries(x)) {
+                const color = verifyString(value);
+                res.set(tag, color);
+              }
+              return res;
+            },
+          );
+
+          if (type !== "tag") throw new Error(`unsupported type: ${type}`);
+
+          this.segmentPropertyColors.value.push({
+            type,
+            property,
+            map,
+          });
+        }
+        this.segmentPropertyColors.changed.dispatch();
+      },
+    );
   }
 
   toJSON() {
     const x: any = {};
     x[json_keys.COLOR_SEED_JSON_KEY] = this.segmentColorHash.toJSON();
     x[json_keys.SEGMENT_DEFAULT_COLOR_JSON_KEY] =
       this.segmentDefaultColor.toJSON();
-    const { segmentStatedColors } = this;
+    const { segmentStatedColors, segmentPropertyColors: {value: segmentPropertyColors} } = this;
     if (segmentStatedColors.size > 0) {
       const j: any = (x[json_keys.SEGMENT_STATED_COLORS_JSON_KEY] = {});
       for (const [key, value] of segmentStatedColors) {
         j[key.toString()] = serializeColor(unpackRGB(Number(value)));
       }
     }
+    if (segmentPropertyColors.length > 0) {
+      const j: any[] = (x[json_keys.SEGMENT_PROPERTY_COLORS_JSON_KEY] = []);
+      for (const propertyColor of segmentPropertyColors) {
+        const p: any = {};
+        p["type"] = propertyColor.type;
+        p["property"] = propertyColor.property;
+        if (propertyColor.type === "tag") {
+          const map: any = (p[json_keys.MAP_JSON_KEY] = {});
+          for (const [key, value] of propertyColor.map!.entries()) {
+            map[key.toString()] = value;
+          }
+        } else {
+          // TODO numeric
+        }
+        j.push(p);
+      }
+    }
     return x;
   }
 
   assignFrom(other: SegmentationUserLayerColorGroupState) {
     this.segmentColorHash.value = other.segmentColorHash.value;
     this.segmentStatedColors.assignFrom(other.segmentStatedColors);
+    this.segmentPropertyColors.value = other.segmentPropertyColors.value;
     this.tempSegmentStatedColors2d.assignFrom(other.tempSegmentStatedColors2d);
     this.segmentDefaultColor.value = other.segmentDefaultColor.value;
     this.highlightColor.value = other.highlightColor.value;
   }
 
   segmentColorHash = SegmentColorHash.getDefault();
   segmentStatedColors = this.registerDisposer(new Uint64Map());
+  segmentPropertyColors = new WatchableValue<SegmentPropertyColor[]>([]);
+  segmentPropertyColorsMap: WatchableValueInterface<Uint64Map>;
   tempSegmentStatedColors2d = this.registerDisposer(new Uint64Map());
   segmentDefaultColor = new TrackableOptionalRGB();
   tempSegmentDefaultColor2d = new WatchableValue<vec3 | vec4 | undefined>(
@@ -494,6 +633,18 @@ class SegmentationUserLayerDisplayState implements SegmentationDisplayState {
         (group) => group.segmentStatedColors,
       ),
     );
+    this.segmentPropertyColors = this.layer.registerDisposer(
+      new IndirectTrackableValue(
+        this.segmentationColorGroupState,
+        (group) => group.segmentPropertyColors,
+      ),
+    );
+    this.segmentPropertyColorsMap = this.layer.registerDisposer(
+      new IndirectTrackableValue(
+        this.segmentationColorGroupState,
+        (group) => group.segmentPropertyColorsMap,
+      ),
+    );
     this.tempSegmentStatedColors2d = this.layer.registerDisposer(
       new IndirectTrackableValue(
         this.segmentationColorGroupState,
@@ -576,6 +727,8 @@ class SegmentationUserLayerDisplayState implements SegmentationDisplayState {
   segmentColorHash: TrackableValueInterface<number>;
   segmentStatedColors: WatchableValueInterface<Uint64Map>;
   tempSegmentStatedColors2d: WatchableValueInterface<Uint64Map>;
+  segmentPropertyColors: WatchableValueInterface<SegmentPropertyColor[]>;
+  segmentPropertyColorsMap: WatchableValueInterface<Uint64Map>;
   segmentDefaultColor: WatchableValueInterface<vec3 | undefined>;
   tempSegmentDefaultColor2d: WatchableValueInterface<vec3 | vec4 | undefined>;
   highlightColor: WatchableValueInterface<vec4 | undefined>;

src/layer/segmentation/json_keys.ts

@@ -12,6 +12,8 @@ export const SEGMENTS_JSON_KEY = "segments";
 export const EQUIVALENCES_JSON_KEY = "equivalences";
 export const COLOR_SEED_JSON_KEY = "colorSeed";
 export const SEGMENT_STATED_COLORS_JSON_KEY = "segmentColors";
+export const SEGMENT_PROPERTY_COLORS_JSON_KEY = "segmentPropertyColors";
+export const MAP_JSON_KEY = "map";
 export const MESH_RENDER_SCALE_JSON_KEY = "meshRenderScale";
 export const CROSS_SECTION_RENDER_SCALE_JSON_KEY = "crossSectionRenderScale";
 export const SHADER_JSON_KEY = "shader";

src/mesh/frontend.ts

@@ -643,7 +643,6 @@ export class MeshLayer extends PerspectiveViewRenderLayer<ThreeDimensionalRender
           segmentPropertyMap: { value: segmentPropertyMap },
         } = displayState.segmentationGroupState.value;
         if (segmentPropertyMap) {
-          console.log('key/objectId', key, objectId);
           setSegmentPropertyUniforms(gl, shader, segmentPropertyMap, objectId);
         }
 
@@ -956,7 +955,7 @@ export class MultiscaleMeshLayer extends PerspectiveViewRenderLayer<ThreeDimensi
       attachment,
     );
     if (modelMatrix === undefined) return;
-    console.log("get shader multiscale!");
+    // console.log("get shader multiscale!");
     const { shader, parameters } = this.getShader(renderContext.emitter);
     parameters;
     if (shader === null) return;
@@ -1034,7 +1033,6 @@ export class MultiscaleMeshLayer extends PerspectiveViewRenderLayer<ThreeDimensi
           segmentPropertyMap: { value: segmentPropertyMap },
         } = displayState.segmentationGroupState.value;
         if (segmentPropertyMap) {
-          console.log('key/objectId', key, objectId);
           setSegmentPropertyUniforms(gl, shader, segmentPropertyMap, objectId);
         }
 

src/segmentation_display_state/frontend.ts

@@ -18,7 +18,10 @@ import type { LayerChunkProgressInfo } from "#src/chunk_manager/base.js";
 import type { ChunkManager } from "#src/chunk_manager/frontend.js";
 import { ChunkRenderLayerFrontend } from "#src/chunk_manager/frontend.js";
 import type { LayerSelectedValues } from "#src/layer/index.js";
-import type { SegmentationUserLayer } from "#src/layer/segmentation/index.js";
+import type {
+  SegmentationUserLayer,
+  SegmentPropertyColor,
+} from "#src/layer/segmentation/index.js";
 import type { PickIDManager } from "#src/object_picking.js";
 import type { WatchableRenderLayerTransform } from "#src/render_coordinate_transform.js";
 import type { RenderScaleHistogram } from "#src/render_scale_statistics.js";
@@ -178,6 +181,8 @@ export interface SegmentationColorGroupState {
   segmentColorHash: SegmentColorHash;
   segmentStatedColors: Uint64Map;
   tempSegmentStatedColors2d: Uint64Map;
+  segmentPropertyColors: WatchableValueInterface<SegmentPropertyColor[]>;
+  segmentPropertyColorsMap: WatchableValueInterface<Uint64Map>;
   segmentDefaultColor: WatchableValueInterface<vec3 | undefined>;
   tempSegmentDefaultColor2d: WatchableValueInterface<vec3 | vec4 | undefined>;
 }
@@ -199,6 +204,7 @@ export interface SegmentationDisplayState {
   hideSegmentZero: WatchableValueInterface<boolean>;
   segmentColorHash: WatchableValueInterface<number>;
   segmentStatedColors: WatchableValueInterface<Uint64Map>;
+  segmentPropertyColorsMap: WatchableValueInterface<Uint64Map>; // which of these do I need?
   tempSegmentStatedColors2d: WatchableValueInterface<Uint64Map>;
   useTempSegmentStatedColors2d: WatchableValueInterface<boolean>;
   segmentDefaultColor: WatchableValueInterface<vec3 | undefined>;
@@ -934,7 +940,11 @@ export function getBaseObjectColor(
     return color;
   }
   const colorGroupState = displayState.segmentationColorGroupState.value;
-  const { segmentStatedColors } = colorGroupState;
+  const {
+    segmentStatedColors,
+    segmentPropertyColorsMap: { value: segmentPropertyColorsMap },
+    // segmentPropertyColors: { value: segmentPropertyColors },
+  } = colorGroupState;
   let statedColor: bigint | undefined;
   if (
     segmentStatedColors.size !== 0 &&
@@ -947,6 +957,16 @@ export function getBaseObjectColor(
     color[2] = (Number(statedColor & 0xff0000n) >>> 16) / 255.0;
     return color;
   }
+  let propertyColor: bigint | undefined;
+  if (
+    segmentPropertyColorsMap.size !== 0 &&
+    (propertyColor = segmentPropertyColorsMap.get(objectId)) !== undefined
+  ) {
+    color[0] = Number(propertyColor & 0x0000ffn) / 255.0;
+    color[1] = (Number(propertyColor & 0x00ff00n) >>> 8) / 255.0;
+    color[2] = (Number(propertyColor & 0xff0000n) >>> 16) / 255.0;
+    return color;
+  }
   const segmentDefaultColor = colorGroupState.segmentDefaultColor.value;
   if (segmentDefaultColor !== undefined) {
     color[0] = segmentDefaultColor[0];

src/segmentation_display_state/property_map.ts

@@ -1434,7 +1434,6 @@ export const setSegmentPropertyUniforms = (
     numericalProperties,
   } = segmentPropertyMap;
   labels; // TODO, support labels
-
   for (const [i, property] of numericalProperties.entries()) {
     const value = index !== -1 ? property.values[index] : 0;
     const uniformSetter = getShaderUniformValueSetter(gl, property.dataType);
@@ -1444,7 +1443,6 @@ export const setSegmentPropertyUniforms = (
       value,
     );
   }
-
   if (tagsProperty !== undefined) {
     const { values, tags } = tagsProperty;
     for (let i = 0; i < tags.length; ++i) {
@@ -1453,8 +1451,7 @@ export const setSegmentPropertyUniforms = (
     const tagIndices = index !== -1 ? values[index] : "";
     for (let i = 0, length = tagIndices.length; i < length; ++i) {
       const tagIdx = tagIndices.charCodeAt(i);
-
-      console.log("enable tag property", tagIdx);
+      // console.log('enabling tagIdx', tagIdx);
       gl.uniform1ui(shader.uniform(`uSegmentTagProperty${tagIdx}`), 1);
     }
   }