[#689] Reset cut is not updating view

#689

packages/phoenix-event-display/src/lib/models/cut.model.ts

@@ -1,3 +1,7 @@
+import { PrettySymbols } from "../../helpers/pretty-symbols";
+import { ConfigRangeSlider } from "src/managers/ui-manager/phoenix-menu/config-types";
+
+
 /**
  * Cut for specifying filters on event data attribute.
  */
@@ -10,6 +14,7 @@ export class Cut {
   private defaultApplyMaxValue: boolean;
   /** Default if lower bound applied */
   private defaultApplyMinValue: boolean;
+  public configRangeSlider?: ConfigRangeSlider
   /**
    * Create the cut to filter an event data attribute.
    * @param field Name of the event data attribute to be filtered.
@@ -60,5 +65,47 @@ export class Cut {
     this.maxValue = this.defaultMaxValue;
     this.minCutActive = this.defaultApplyMinValue;
     this.maxCutActive = this.defaultApplyMaxValue;
+    // Reset the config range slider
+    if(this.configRangeSlider != undefined) {
+      this.configRangeSlider.enableMin = true;
+      this.configRangeSlider.enableMax = true;
+      this.configRangeSlider.value = this.minValue;
+      this.configRangeSlider.highValue = this.maxValue;
+    }
+  }
+
+  /**
+   * Builds a config range slider for the cut to be used in Phoenix Menu
+   * @param collectionFiltering callback function to apply to all objects inside a collection, filtering them given a parameter
+   * @returns config range slider for the cut to be used in Phoenix Menu
+   */
+  public getConfigRangeSlider(collectionFiltering: () => void): ConfigRangeSlider {
+    if(this.configRangeSlider == undefined) {
+      this.configRangeSlider =  {
+        type: 'rangeSlider',
+        label: PrettySymbols.getPrettySymbol(this.field),
+        min: this.minValue,
+        max: this.maxValue,
+        step: this.step,
+        value: this.minValue,
+        highValue: this.maxValue,
+        enableMin: this.minCutActive,
+        enableMax: this.maxCutActive,
+        onChange: ({ value, highValue }) => {
+          this.minValue = value;
+          this.maxValue = highValue;
+          collectionFiltering();
+        },
+        setEnableMin: (checked: boolean) => {
+          this.enableMinCut(checked);
+          collectionFiltering();
+        },
+        setEnableMax: (checked: boolean) => {
+          this.enableMaxCut(checked);
+          collectionFiltering();
+        }
+      };
+    }
+    return this.configRangeSlider;
   }
 }

packages/phoenix-event-display/src/loaders/phoenix-loader.ts

@@ -413,7 +413,8 @@ export class PhoenixLoader implements EventDataLoader {
         }
         // Phoenix menu
         if (typeFolderPM) {
-          typeFolderPM.addConfig('slider', {
+          typeFolderPM.addConfig({
+            type: 'slider',
             label: 'Size (%)',
             value: 100,
             min: 1,
@@ -776,7 +777,8 @@ export class PhoenixLoader implements EventDataLoader {
 
       // Phoenix menu
       if (typeFolderPM) {
-        typeFolderPM.addConfig('slider', {
+        typeFolderPM.addConfig({
+          type: 'slider',
           label: configLabel,
           value: 1,
           min: 0.001,

packages/phoenix-event-display/src/managers/state-manager.ts

@@ -57,13 +57,15 @@ export class StateManager {
     if (this.phoenixMenuRoot) {
       // Add save and load config buttons to the root node
       this.phoenixMenuRoot
-        .addConfig('button', {
+        .addConfig({
+          type: 'button',
           label: 'Save state',
           onClick: () => {
             this.saveStateAsJSON();
           },
         })
-        .addConfig('button', {
+        .addConfig({
+          type: 'button',
           label: 'Load state',
           onClick: () => {
             loadFile((data) => {

packages/phoenix-event-display/src/managers/ui-manager/color-options.ts

@@ -88,7 +88,8 @@ export class ColorOptions {
     this.collectionName = collectionFolder.name;
     this.colorOptionsFolder = collectionFolder.addChild('Color Options');
 
-    this.colorOptionsFolder.addConfig('color', {
+    this.colorOptionsFolder.addConfig({
+      type: 'color',
       label: 'Color',
       color: collectionColor
         ? `#${collectionColor?.getHexString()}`
@@ -97,7 +98,8 @@ export class ColorOptions {
         this.colorManager.collectionColor(this.collectionName, value),
     });
 
-    this.colorOptionsFolder.addConfig('button', {
+    this.colorOptionsFolder.addConfig({
+      type: 'button',
       label: 'Random',
       onClick: () =>
         this.colorManager.collectionColorRandom(this.collectionName),
@@ -129,7 +131,8 @@ export class ColorOptions {
 
     // Configurations
 
-    this.colorOptionsFolder.addConfig('select', {
+    this.colorOptionsFolder.addConfig({
+      type: 'select',
       label: 'Color by',
       options: this.colorByOptions.map((colorByOption) => colorByOption.name),
       onChange: (updatedColorByOption) => {
@@ -156,7 +159,8 @@ export class ColorOptions {
     [-1, 0, 1].forEach((chargeValue) => {
       const chargeValueIndex =
         chargeValue.toString() as keyof typeof this.chargeColors;
-      this.colorOptionsFolder.addConfig('color', {
+      this.colorOptionsFolder.addConfig({
+        type: 'color',
         label: `${PrettySymbols.getPrettySymbol('charge')}=${chargeValue}`,
         group: ColorByOptionKeys.CHARGE,
         color: this.chargeColors[chargeValueIndex],
@@ -216,7 +220,8 @@ export class ColorOptions {
   private initMomColorOptions() {
     // Momentum configurations
     Object.entries(this.momColors).forEach(([key, momValue]) => {
-      this.colorOptionsFolder.addConfig('slider', {
+      this.colorOptionsFolder.addConfig({
+        type: 'slider',
         label: PrettySymbols.getPrettySymbol('mom') + ' ' + key,
         group: ColorByOptionKeys.MOM,
         min: this.momColors.min.value,
@@ -234,7 +239,8 @@ export class ColorOptions {
         },
       });
 
-      this.colorOptionsFolder.addConfig('color', {
+      this.colorOptionsFolder.addConfig({
+        type: 'color',
         label: PrettySymbols.getPrettySymbol('mom') + ' ' + key + ' color',
         group: ColorByOptionKeys.MOM,
         color: momValue.color,

packages/phoenix-event-display/src/managers/ui-manager/phoenix-menu/phoenix-menu-node.ts

@@ -108,17 +108,13 @@ export class PhoenixMenuNode {
 
   /**
    * Add a config to the phoenix menu item.
-   * @param type Type of configuration.
-   * @param options Options for the config.
+   * @param config config to be displayed as a Phoenix Menu item.
    * @returns The current node.
    */
-  addConfig<T extends keyof PhoenixMenuConfigs>(
-    type: T,
-    options: Omit<PhoenixMenuConfigs[T], 'type'>,
-  ): PhoenixMenuNode {
-    const configsLength = this.configs.push({ type, ...options });
+  addConfig(config: PhoenixMenuConfigs[keyof PhoenixMenuConfigs]): PhoenixMenuNode {
+    this.configs.push(config);
     // Apply the values of config
-    this.applyConfigState(this.configs[configsLength - 1]);
+    this.applyConfigState(config);
     return this;
   }
 

packages/phoenix-event-display/src/managers/ui-manager/phoenix-menu/phoenix-menu-ui.ts

@@ -9,7 +9,6 @@ import { SceneManager } from '../../three-manager/scene-manager.js';
 import { ThreeManager } from '../../three-manager/index.js';
 import { PhoenixMenuNode } from './phoenix-menu-node.js';
 import { Cut } from '../../../lib/models/cut.model.js';
-import { PrettySymbols } from '../../../helpers/pretty-symbols.js';
 import { ColorByOptionKeys, ColorOptions } from '../color-options.js';
 import type { PhoenixUI } from '../phoenix-ui.js';
 
@@ -67,14 +66,16 @@ export class PhoenixMenuUI implements PhoenixUI<PhoenixMenuNode> {
     }
 
     this.geomFolder
-      .addConfig('checkbox', {
+      .addConfig({
+        type: 'checkbox',
         label: 'Wireframe',
         isChecked: false,
         onChange: (value) => {
           this.sceneManager.wireframeGeometries(value);
         },
       })
-      .addConfig('slider', {
+      .addConfig({
+        type: 'slider',
         label: 'Opacity',
         min: 0,
         max: 1,
@@ -89,7 +90,8 @@ export class PhoenixMenuUI implements PhoenixUI<PhoenixMenuNode> {
           );
         },
       })
-      .addConfig('slider', {
+      .addConfig({
+        type: 'slider',
         label: 'Scale',
         min: 0,
         max: 20,
@@ -139,14 +141,16 @@ export class PhoenixMenuUI implements PhoenixUI<PhoenixMenuNode> {
     objFolder.toggleState = visible;
 
     objFolder
-      .addConfig('color', {
+      .addConfig({
+        type: 'color',
         label: 'Color',
         color: color ? `#${new Color(color).getHexString()}` : undefined,
         onChange: (value) => {
           this.sceneManager.changeObjectColor(object, value);
         },
       })
-      .addConfig('slider', {
+      .addConfig({
+        type: 'slider',
         label: 'Opacity',
         min: 0,
         max: 1,
@@ -156,7 +160,8 @@ export class PhoenixMenuUI implements PhoenixUI<PhoenixMenuNode> {
           this.sceneManager.setGeometryOpacity(object as Mesh, opacity);
         },
       })
-      .addConfig('button', {
+      .addConfig({
+        type: 'button',
         label: 'Remove',
         onClick: () => {
           objFolder.remove();
@@ -181,7 +186,8 @@ export class PhoenixMenuUI implements PhoenixUI<PhoenixMenuNode> {
       },
       'event-folder',
     );
-    this.eventFolder.addConfig('checkbox', {
+    this.eventFolder.addConfig({
+      type: 'checkbox',
       label: 'Depth Test',
       isChecked: true,
       onChange: (value) => {
@@ -275,10 +281,12 @@ export class PhoenixMenuUI implements PhoenixUI<PhoenixMenuNode> {
     const cutsOptionsNode = collectionNode.addChild('Cut Options');
 
     cutsOptionsNode
-      .addConfig('label', {
+      .addConfig({
+        type: 'label',
         label: 'Cuts',
       })
-      .addConfig('button', {
+      .addConfig({
+        type: 'button',
         label: 'Reset cuts',
         onClick: () => {
           this.sceneManager.groupVisibility(
@@ -295,29 +303,7 @@ export class PhoenixMenuUI implements PhoenixUI<PhoenixMenuNode> {
 
     // Add range sliders for cuts
     for (const cut of cuts) {
-      cutsOptionsNode.addConfig('rangeSlider', {
-        label: PrettySymbols.getPrettySymbol(cut.field),
-        min: cut.minValue,
-        max: cut.maxValue,
-        step: cut.step,
-        value: cut.minValue,
-        highValue: cut.maxValue,
-        enableMin: cut.minCutActive,
-        enableMax: cut.maxCutActive,
-        onChange: ({ value, highValue }) => {
-          cut.minValue = value;
-          cut.maxValue = highValue;
-          this.sceneManager.collectionFilter(collectionName, cuts);
-        },
-        setEnableMin: (checked: boolean) => {
-          cut.enableMinCut(checked);
-          this.sceneManager.collectionFilter(collectionName, cuts);
-        },
-        setEnableMax: (checked: boolean) => {
-          cut.enableMaxCut(checked);
-          this.sceneManager.collectionFilter(collectionName, cuts);
-        },
-      });
+      cutsOptionsNode.addConfig(cut.getConfigRangeSlider(() => this.sceneManager.collectionFilter(collectionName, cuts)));
     }
   }
 
@@ -332,7 +318,8 @@ export class PhoenixMenuUI implements PhoenixUI<PhoenixMenuNode> {
   ) {
     const drawOptionsNode = collectionNode.addChild('Draw Options');
 
-    drawOptionsNode.addConfig('slider', {
+    drawOptionsNode.addConfig({
+      type: 'slider',
       label: 'Opacity',
       min: 0.1,
       step: 0.1,
@@ -354,7 +341,8 @@ export class PhoenixMenuUI implements PhoenixUI<PhoenixMenuNode> {
       },
     });
 
-    drawOptionsNode.addConfig('checkbox', {
+    drawOptionsNode.addConfig({
+      type: 'checkbox',
       label: 'Wireframe',
       onChange: (value) =>
         this.sceneManager.wireframeObjects(
@@ -389,7 +377,8 @@ export class PhoenixMenuUI implements PhoenixUI<PhoenixMenuNode> {
       'info',
     );
 
-    this.labelsFolder.addConfig('slider', {
+    this.labelsFolder.addConfig({
+      type: 'slider',
       label: 'Size',
       min: 0,
       max: 10,
@@ -398,18 +387,21 @@ export class PhoenixMenuUI implements PhoenixUI<PhoenixMenuNode> {
       onChange: onSizeChange,
     });
 
-    this.labelsFolder.addConfig('color', {
+    this.labelsFolder.addConfig({
+      type: 'color',
       label: 'Color',
       color: '#a8a8a8',
       onChange: onColorChange,
     });
 
-    this.labelsFolder.addConfig('button', {
+    this.labelsFolder.addConfig({
+      type: 'button',
       label: 'Save Labels',
       onClick: onSaveLabels,
     });
 
-    this.labelsFolder.addConfig('button', {
+    this.labelsFolder.addConfig({
+      type: 'button',
       label: 'Load Labels',
       onClick: onLoadLabels,
     });
@@ -436,7 +428,8 @@ export class PhoenixMenuUI implements PhoenixUI<PhoenixMenuNode> {
       if (labelObject) this.sceneManager.objectVisibility(labelObject, value);
     });
 
-    labelNode.addConfig('color', {
+    labelNode.addConfig({
+      type: 'color',
       label: 'Color',
       color: '#a8a8a8',
       onChange: (value) => {
@@ -447,7 +440,8 @@ export class PhoenixMenuUI implements PhoenixUI<PhoenixMenuNode> {
       },
     });
 
-    labelNode.addConfig('button', {
+    labelNode.addConfig({
+      type: 'button',
       label: 'Remove',
       onClick: () => {
         onRemoveLabel?.();