Add flag to disable multi class mode

SenteraLLC · Sep 20, 2024 · c411cdb · c411cdb
1 parent cafccb4
commit c411cdb
Show file tree

Hide file tree

Showing 8 changed files with 68 additions and 72 deletions.
diff --git a/api_spec.md b/api_spec.md
@@ -364,10 +364,11 @@ type FilterDistanceConfig = {
     "default_values"?: AnnotationClassDistanceData,
     "step_value"?: number,
     "multi_class_mode"?: boolean,
+    "disable_multi_class_mode"?: boolean,
     "filter_on_load"?: boolean,
     "show_options"?: boolean,
+    "show_overlay"?: boolean,
     "toggle_overlay_keybind"?: string,
-    "show_overlay_on_load"?: boolean
 }
 ```
 Where all `config_data` properties are optional.

diff --git a/changelog.md b/changelog.md
@@ -10,6 +10,8 @@ Nothing yet.
 - Fix bug where `delete` modes and the `FilterDistance` toolbox item would clash.
 - Expose `n_annos_per_canvas` arg to `config_data` as an advanced feature for performance tuning.
   - Also added some dynamic scaling of this value based on the max number of annotations in a single subtask if no value is provided by the user.
+- Renamed `FilterDistanceConfig` arg `show_overlay_on_load` -> `show_overlay` for internal consistency.
+- Added `disable_multi_class_mode` flag to `FilterDistanceConfig`, which defaults to `false`. When `true`, the multi-class mode will be disabled and the checkbox will not be shown.
 
 ## [0.11.0] - Sept 19th, 2024
 - Fix bug where class counts wouldn't update when changing subtasks.

diff --git a/demo/row-filtering-example.html b/demo/row-filtering-example.html
@@ -761,7 +761,13 @@
                 "username": "DemoUser",
                 "submit_buttons": on_submit,
                 "subtasks": subtasks,
-                "toolbox_order": [0, 1, 3, 6, 8, 2, 7, 4, 5]
+                "toolbox_order": [0, 1, 3, 6, 8, 2, 7, 4, 5],
+                "config_data": {
+                    "distance_filter_toolbox_item": {
+                        "show_overlay": true,
+                        // "disable_multi_class_mode": true,
+                    }
+                }
             });
             // Wait for ULabel instance to finish initialization
             ulabel.init(function () {

diff --git a/dist/ulabel.js b/dist/ulabel.js
diff --git a/dist/ulabel.min.js b/dist/ulabel.min.js
diff --git a/index.d.ts b/index.d.ts
@@ -88,10 +88,11 @@ export type FilterDistanceConfig = {
     default_values?: AnnotationClassDistanceData,
     step_value?: number,
     multi_class_mode?: boolean,
+    disable_multi_class_mode?: boolean,
     filter_on_load?: boolean,
     show_options?: boolean,
+    show_overlay?: boolean,
     toggle_overlay_keybind?: string,
-    show_overlay_on_load?: boolean
 }
 
 export type ULabelSubmitButton = {

diff --git a/src/configuration.ts b/src/configuration.ts
@@ -28,6 +28,20 @@ export enum AllowedToolboxItem {
 
 export const DEFAULT_N_ANNOS_PER_CANVAS: number = 100;
 export const TARGET_MAX_N_CANVASES_PER_SUBTASK: number = 8;
+export const DEFAULT_FILTER_DISTANCE_CONFIG: FilterDistanceConfig = {
+    "name": "Filter Distance From Row",
+    "component_name": "filter-distance-from-row",
+    "filter_min": 0,
+    "filter_max": 400,
+    "default_values": {"single": 40},
+    "step_value": 2,
+    "multi_class_mode": false,
+    "disable_multi_class_mode": false,
+    "filter_on_load": true,
+    "show_options": true,
+    "show_overlay": false,
+    "toggle_overlay_keybind": "p",
+}
 
 export class Configuration {
     public toolbox_map = new Map<AllowedToolboxItem, any> ([
@@ -70,19 +84,7 @@ export class Configuration {
     }
 
     // Config for FilterDistanceToolboxItem
-    public distance_filter_toolbox_item: FilterDistanceConfig = {
-        "name": "Filter Distance From Row",
-        "component_name": "filter-distance-from-row",
-        "filter_min": 0,
-        "filter_max": 400,
-        "default_values": {"single": 40},
-        "step_value": 2,
-        "multi_class_mode": false,
-        "filter_on_load": true,
-        "show_options": true,
-        "toggle_overlay_keybind": "p",
-        "show_overlay_on_load": false
-    }
+    public distance_filter_toolbox_item: FilterDistanceConfig = DEFAULT_FILTER_DISTANCE_CONFIG; 
 
     public change_zoom_keybind: string = "r";
 

diff --git a/src/toolbox.ts b/src/toolbox.ts
@@ -5,6 +5,7 @@ import {
     ULabel,
     ULabelSubmitButton, 
 } from "..";
+import { DEFAULT_FILTER_DISTANCE_CONFIG } from "./configuration";
 import { ULabelAnnotation, NONSPATIAL_MODES, DELETE_MODES } from "./annotation";
 import { ULabelSubtask } from "./subtask";
 import { 
@@ -1982,8 +1983,9 @@ export class FilterPointDistanceFromRow extends ToolboxItem {
     step_value: number // Value slider increments by
     filter_on_load: boolean // Whether or not to filter annotations on page load
     multi_class_mode: boolean // Whether or not the component is currently in multi-class mode
+    disable_multi_class_mode: boolean // Whether or not to disable the checkbox to enable multi-class mode
     show_options: boolean // Whether or not the options dialog will be visable
-    collapse_options: boolean// Whether or not the options is in a collapsed state
+    collapse_options: boolean // Whether or not the options is in a collapsed state
     show_overlay: boolean // Whether or not the overlay will be shown
     toggle_overlay_keybind: string 
     overlay: FilterDistanceOverlay
@@ -1999,57 +2001,32 @@ export class FilterPointDistanceFromRow extends ToolboxItem {
         // Get this component's config from ulabel's config
         this.config = this.ulabel.config.distance_filter_toolbox_item
 
-        // Create a set of defaults for every config value
-        const default_values = {
-            "name": <string> "Filter Distance From Row",
-            "component_name": <string> "fitler_distance_from_row",
-            "filter_min": <number> 0,
-            "filter_max": <number> 100,
-            "default_values": <AnnotationClassDistanceData> {"single": 50},
-            "step_value": <number> 1,
-            "multi_class_mode": <boolean> false,
-            "filter_on_load": <boolean> true,
-            "show_options": <boolean> true,
-            "toggle_overlay_keybind": <string> "p"
-        }
-
-        // Loop through every key value pair in the config
-        for (const [key, value] of Object.entries(this.config)) {
-            // If the passed in value's type !== the default value's type then use the default value
-            if (typeof value !== typeof default_values[key]) {
-                this.config[key] = default_values[key]
+        // For each key missing from the config, set the default value
+        for (const key in DEFAULT_FILTER_DISTANCE_CONFIG) {
+            if (!this.config.hasOwnProperty(key)) {
+                this.config[key] = DEFAULT_FILTER_DISTANCE_CONFIG[key]
             }
         }
 
         // Set the component's properties to be the same as the config's properties
         for (const property in this.config) {
             this[property] = this.config[property]
         }
+
+        // Force disable multi-class mode if the config doesn't allow it
+        if (this.disable_multi_class_mode) this.multi_class_mode = false
 
         // Get if the options should be collapsed from local storage
-        if (window.localStorage.getItem("filterDistanceCollapseOptions") === "true") {
-            this.collapse_options = true
-        }
-        else if (window.localStorage.getItem("filterDistanceCollapseOptions") === "false") {
-            this.collapse_options = false
-        }
+        this.collapse_options = window.localStorage.getItem("filterDistanceCollapseOptions") === "true"
 
         // Create an overlay and determine whether or not it should be displayed
         this.create_overlay()
-        if (window.localStorage.getItem("filterDistanceShowOverlay") === "true") {
-            this.show_overlay = true
-            this.overlay.update_display_overlay(true)
-        }
-        else if (window.localStorage.getItem("filterDistanceShowOverlay") === "false") {
-            this.show_overlay = false
-            this.overlay.update_display_overlay(false)
-        }
-        else if (this.config.show_overlay_on_load !== undefined || this.config.show_overlay_on_load !== null) {
-            this.show_overlay = this.config.show_overlay_on_load
-        }
-        else {
-            this.show_overlay = false // Default
+
+        // Check if localStorage has a value for showing the overlay
+        if (window.localStorage.getItem("filterDistanceShowOverlay") !== null) {
+            this.show_overlay = window.localStorage.getItem("filterDistanceShowOverlay") === "true"
         }
+        this.overlay.update_display_overlay(this.show_overlay);
 
         this.add_styles()
 
@@ -2301,7 +2278,27 @@ export class FilterPointDistanceFromRow extends ToolboxItem {
             "step": this.step_value.toString()
         })
 
-        return`
+        let multi_class_mode_checkbox: string = ``
+        // If multi-class mode is allowed, create the checkbox
+        if (!this.disable_multi_class_mode) {
+            multi_class_mode_checkbox = `
+            <div class="filter-row-distance-option">
+                <input
+                    type="checkbox"
+                    id="filter-slider-distance-multi-checkbox"
+                    class="filter-row-distance-options-checkbox"
+                    ${this.multi_class_mode ? "checked" : ""}
+                />
+                <label
+                    for="filter-slider-distance-multi-checkbox"
+                    id="filter-slider-distance-multi-checkbox-label"
+                    class="filter-row-distance-label">
+                    Multi-Class Filtering
+                </label>
+            </div>`
+        }
+
+        return `
         <div class="filter-row-distance">
             <p class="tb-header">${this.name}</p>
             <fieldset class="
@@ -2312,20 +2309,7 @@ export class FilterPointDistanceFromRow extends ToolboxItem {
                 <legend>
                     Options ˅
                 </legend>
-                <div class="filter-row-distance-option">
-                    <input
-                        type="checkbox"
-                        id="filter-slider-distance-multi-checkbox"
-                        class="filter-row-distance-options-checkbox"
-                        ${this.multi_class_mode ? "checked" : ""}
-                    />
-                    <label
-                        for="filter-slider-distance-multi-checkbox"
-                        id="filter-slider-distance-multi-checkbox-label"
-                        class="filter-row-distance-label">
-                        Multi-Class Filtering
-                    </label>
-                </div>
+                ` + multi_class_mode_checkbox + `
                 <div class="filter-row-distance-option">
                     <input
                         type="checkbox"