fixed rendering a dynamic property list

seung-lab · Sep 26, 2024 · 8aac424 · 8aac424
1 parent 8be7d30
commit 8aac424
Show file tree

Hide file tree

Showing 6 changed files with 152 additions and 171 deletions.
diff --git a/src/annotation/index.ts b/src/annotation/index.ts
@@ -41,7 +41,6 @@ import {
   expectArray,
   parseArray,
   parseFixedLengthArray,
-  verifyBoolean,
   verifyEnumString,
   verifyFiniteFloat,
   verifyFiniteNonNegativeFloat,
@@ -108,7 +107,13 @@ export interface AnnotationNumericPropertySpec
   min?: number;
   max?: number;
   step?: number;
-  tag?: boolean;
+  tag?: string;
+}
+
+export interface AnnotationTagPropertySpec
+  extends AnnotationNumericPropertySpec {
+  type: "int8";
+  tag: string;
 }
 
 export const propertyTypeDataType: Record<
@@ -136,6 +141,12 @@ export function isAnnotationNumericPropertySpec(
   return spec.type !== "rgb" && spec.type !== "rgba";
 }
 
+export function isAnnotationTagPropertySpec(
+  spec: AnnotationPropertySpec,
+): spec is AnnotationTagPropertySpec {
+  return spec.type === "uint8" && spec.tag !== undefined;
+}
+
 export interface AnnotationPropertyTypeHandler {
   serializedBytes(rank: number): number;
   alignment(rank: number): number;
@@ -505,7 +516,6 @@ export function formatNumericProperty(
   property: AnnotationNumericPropertySpec,
   value: number,
 ): string {
-  console.log("formatNumericProperty");
   const formattedValue =
     property.type === "float32" ? value.toPrecision(6) : value.toString();
   const { enumValues, enumLabels } = property;
@@ -579,7 +589,7 @@ function parseAnnotationPropertySpec(obj: unknown): AnnotationPropertySpec {
   );
   let enumValues: number[] | undefined;
   let enumLabels: string[] | undefined;
-  let tag: boolean | undefined;
+  let tag: string | undefined;
   switch (type) {
     case "rgb":
     case "rgba":
@@ -604,7 +614,7 @@ function parseAnnotationPropertySpec(obj: unknown): AnnotationPropertySpec {
           ),
         );
       }
-      tag = verifyOptionalObjectProperty(obj, "tag", verifyBoolean);
+      tag = verifyOptionalObjectProperty(obj, "tag", verifyString);
     }
   }
   return {
@@ -1312,20 +1322,6 @@ export class LocalAnnotationSource extends AnnotationSource {
     );
   }
 
-  getUniquePropertyId() {
-    const { properties } = this;
-    const ids = new Set<string>();
-    for (const p of properties.value) {
-      ids.add(p.identifier);
-    }
-    while (true) {
-      const uuid = crypto.randomUUID();
-      if (!ids.has(uuid)) {
-        return uuid;
-      }
-    }
-  }
-
   addProperty(property: AnnotationPropertySpec) {
     this.properties.value.push(property);
     for (const annotation of this) {
@@ -1347,10 +1343,7 @@ export class LocalAnnotationSource extends AnnotationSource {
 
   getTagProperties = () => {
     const { properties } = this;
-    const numericProps = properties.value.filter(
-      isAnnotationNumericPropertySpec,
-    ); // for type
-    return numericProps.filter((x) => x.tag);
+    return properties.value.filter(isAnnotationTagPropertySpec);
   };
 
   ensureUpdated() {

diff --git a/src/annotation/renderlayer.ts b/src/annotation/renderlayer.ts
@@ -474,9 +474,9 @@ function AnnotationRenderLayer<
     private renderHelpers: AnnotationRenderHelper[] = [];
     private tempChunkPosition: Float32Array;
 
-    handleRankChanged() {
+    handleRankChanged(force = false) {
       const { rank } = this.base.source;
-      if (rank === this.curRank) return;
+      if (!force && rank === this.curRank) return;
       this.curRank = rank;
       this.tempChunkPosition = new Float32Array(rank);
       const { renderHelpers, gl } = this;
@@ -524,6 +524,12 @@ function AnnotationRenderLayer<
       });
       this.role = base.state.role;
       this.registerDisposer(base.redrawNeeded.add(this.redrawNeeded.dispatch));
+      this.registerDisposer(
+        base.source.properties.changed.add(() => {
+          // todo, does it make sense to run this whole function? Or should we pass the watchable value to renderHelperConstructor?
+          this.handleRankChanged(true);
+        }),
+      );
       this.handleRankChanged();
       this.registerDisposer(
         this.base.state.displayState.shaderControls.histogramSpecifications.producerVisibility.add(