From 054a30220bbdaf3d6e1043babe4c6a210be661a0 Mon Sep 17 00:00:00 2001 From: Emilio Cortina Labra Date: Sun, 20 Oct 2024 23:41:54 +0200 Subject: [PATCH 1/3] [#689] Reset cut is not updating view https://github.com/HSF/phoenix/issues/689 Prettier fixes Deep copy cuts, so that they work correctly Add missing documentation for range slider --- .../src/lib/models/cut.model.ts | 49 ++++++++++++ .../src/loaders/phoenix-loader.ts | 16 +++- .../src/managers/state-manager.ts | 6 +- .../src/managers/ui-manager/color-options.ts | 18 +++-- .../phoenix-menu/phoenix-menu-node.ts | 12 ++- .../phoenix-menu/phoenix-menu-ui.ts | 80 +++++++++---------- .../phoenix-menu-item.component.html | 8 +- 7 files changed, 125 insertions(+), 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 index 0b6ad928..9b069ed1 100644 --- 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 index c6ece63d..7a4c2fb2 100644 --- 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 index 158f7993..c291a559 100644 --- 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 index 4a5b127c..8bb929bf 100644 --- 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 index 231a04a2..f81bdde2 100644 --- 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( - type: T, - options: Omit, + 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; } diff --git a/packages/phoenix-event-display/src/managers/ui-manager/phoenix-menu/phoenix-menu-ui.ts b/packages/phoenix-event-display/src/managers/ui-manager/phoenix-menu/phoenix-menu-ui.ts index a2372414..4e75938d 100644 --- a/packages/phoenix-event-display/src/managers/ui-manager/phoenix-menu/phoenix-menu-ui.ts +++ b/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 { } 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 { ); }, }) - .addConfig('slider', { + .addConfig({ + type: 'slider', label: 'Scale', min: 0, max: 20, @@ -139,14 +141,16 @@ export class PhoenixMenuUI implements PhoenixUI { 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 { 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 { }, '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 { 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,11 @@ export class PhoenixMenuUI implements PhoenixUI { // 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 +322,8 @@ export class PhoenixMenuUI implements PhoenixUI { ) { const drawOptionsNode = collectionNode.addChild('Draw Options'); - drawOptionsNode.addConfig('slider', { + drawOptionsNode.addConfig({ + type: 'slider', label: 'Opacity', min: 0.1, step: 0.1, @@ -354,7 +345,8 @@ export class PhoenixMenuUI implements PhoenixUI { }, }); - drawOptionsNode.addConfig('checkbox', { + drawOptionsNode.addConfig({ + type: 'checkbox', label: 'Wireframe', onChange: (value) => this.sceneManager.wireframeObjects( @@ -389,7 +381,8 @@ export class PhoenixMenuUI implements PhoenixUI { 'info', ); - this.labelsFolder.addConfig('slider', { + this.labelsFolder.addConfig({ + type: 'slider', label: 'Size', min: 0, max: 10, @@ -398,18 +391,21 @@ export class PhoenixMenuUI implements PhoenixUI { 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 +432,8 @@ export class PhoenixMenuUI implements PhoenixUI { if (labelObject) this.sceneManager.objectVisibility(labelObject, value); }); - labelNode.addConfig('color', { + labelNode.addConfig({ + type: 'color', label: 'Color', color: '#a8a8a8', onChange: (value) => { @@ -447,7 +444,8 @@ export class PhoenixMenuUI implements PhoenixUI { }, }); - labelNode.addConfig('button', { + labelNode.addConfig({ + type: 'button', label: 'Remove', onClick: () => { onRemoveLabel?.(); diff --git a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/phoenix-menu/phoenix-menu-item/phoenix-menu-item.component.html b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/phoenix-menu/phoenix-menu-item/phoenix-menu-item.component.html index 80c0bead..8d053825 100644 --- a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/phoenix-menu/phoenix-menu-item/phoenix-menu-item.component.html +++ b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/phoenix-menu/phoenix-menu-item/phoenix-menu-item.component.html @@ -113,11 +113,11 @@
@@ -126,7 +126,7 @@ type="number" placeholder="Min" class="form-control form-control-sm" - [value]="config.value" + [(ngModel)]="config.value" (input)=" config.value = $event.target.value; config.onChange(config) @@ -137,7 +137,7 @@ type="number" placeholder="Max" class="form-control form-control-sm" - [value]="config.highValue" + [(ngModel)]="config.highValue" (input)=" config.highValue = $event.target.value; config.onChange(config) From 156f28ab56064da2a0382cc8aadf08869851f891 Mon Sep 17 00:00:00 2001 From: Edward Moyse Date: Fri, 25 Oct 2024 15:12:20 +0200 Subject: [PATCH 2/3] Disable excessive pre-commit check --- .husky/pre-commit | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.husky/pre-commit b/.husky/pre-commit index c67afa34..2bdbaee1 100755 --- a/.husky/pre-commit +++ b/.husky/pre-commit @@ -1,3 +1,3 @@ -npm run test:ci +#npm run test:ci yarn lint-staged From acb18c596b46c4d5c73b836784f1a99dd677bbba Mon Sep 17 00:00:00 2001 From: Edward Moyse Date: Fri, 8 Nov 2024 10:06:37 +0100 Subject: [PATCH 3/3] Update workflows to node v20 --- .github/workflows/main.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index 33f01396..4024a34b 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -10,7 +10,7 @@ jobs: strategy: matrix: - node-version: [18.x] + node-version: [20.x] steps: - name: Checkout