Merge pull request #692 from emiliocortina/master

HSF · Nov 8, 2024 · c2b8b9e · c2b8b9e
2 parents e5b433b + acb18c5
commit c2b8b9e
Show file tree

Hide file tree

Showing 7 changed files with 125 additions and 64 deletions.
diff --git a/packages/phoenix-event-display/src/lib/models/cut.model.ts b/packages/phoenix-event-display/src/lib/models/cut.model.ts
@@ -1,3 +1,6 @@
+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 +13,8 @@ export class Cut {
   private defaultApplyMaxValue: boolean;
   /** Default if lower bound applied */
   private defaultApplyMinValue: boolean;
+  /** Range slider for Cut */
+  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,49 @@ 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;
   }
 }
diff --git a/packages/phoenix-event-display/src/loaders/phoenix-loader.ts b/packages/phoenix-event-display/src/loaders/phoenix-loader.ts
@@ -13,6 +13,7 @@ import { CoordinateHelper } from '../helpers/coordinate-helper.js';
 import { getLabelTitle } from '../helpers/labels.js';
 import { DatGUIMenuUI } from '../managers/ui-manager/dat-gui-ui.js';
 import { PhoenixMenuUI } from '../managers/ui-manager/phoenix-menu/phoenix-menu-ui.js';
+import * as _ from 'lodash';
 
 /**
  * Loader for processing and loading an event.
@@ -413,7 +414,8 @@ export class PhoenixLoader implements EventDataLoader {
         }
         // Phoenix menu
         if (typeFolderPM) {
-          typeFolderPM.addConfig('slider', {
+          typeFolderPM.addConfig({
+            type: 'slider',
             label: 'Size (%)',
             value: 100,
             min: 1,
@@ -460,6 +462,8 @@ export class PhoenixLoader implements EventDataLoader {
     this.ui.addEventDataTypeFolder(typeName);
 
     for (const collectionName of collectionsList) {
+      const newCuts = _.cloneDeep(cuts);
+      // Make a new array ^, otherwise we reuse the same cuts for each collection
       const objectCollection = object[collectionName];
       console.log(
         `${typeName} collection ${collectionName} has ${objectCollection.length} constituents.`,
@@ -479,8 +483,11 @@ export class PhoenixLoader implements EventDataLoader {
         concatonateObjs,
       );
 
-      cuts = cuts?.filter((cut) => cut.field in objectCollection[0]);
-      this.ui.addCollection(typeName, collectionName, cuts);
+      // collectionCuts is shallow copy
+      const collectionCuts = newCuts?.filter(
+        (cut) => cut.field in objectCollection[0],
+      );
+      this.ui.addCollection(typeName, collectionName, collectionCuts);
     }
 
     const eventDataTypeFolderDatGUI = this.ui
@@ -776,7 +783,8 @@ export class PhoenixLoader implements EventDataLoader {
 
       // Phoenix menu
       if (typeFolderPM) {
-        typeFolderPM.addConfig('slider', {
+        typeFolderPM.addConfig({
+          type: 'slider',
           label: configLabel,
           value: 1,
           min: 0.001,

diff --git a/packages/phoenix-event-display/src/managers/state-manager.ts b/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) => {

diff --git a/packages/phoenix-event-display/src/managers/ui-manager/color-options.ts b/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,

diff --git a/packages/phoenix-event-display/src/managers/ui-manager/phoenix-menu/phoenix-menu-node.ts b/packages/phoenix-event-display/src/managers/ui-manager/phoenix-menu/phoenix-menu-node.ts
@@ -108,17 +108,15 @@ 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'>,
+  addConfig(
+    config: PhoenixMenuConfigs[keyof PhoenixMenuConfigs],
   ): PhoenixMenuNode {
-    const configsLength = this.configs.push({ type, ...options });
+    this.configs.push(config);
     // Apply the values of config
-    this.applyConfigState(this.configs[configsLength - 1]);
+    this.applyConfigState(config);
     return this;
   }