From 3534d5f17b106dae6fba1c8d2ed9c8ccf896e636 Mon Sep 17 00:00:00 2001 From: Matus Talcik <matus.talcik@outlook.com> Date: Wed, 17 Aug 2022 00:49:34 +0200 Subject: [PATCH] fix bugs here and there --- .../ChromatinViewportConfigurationPanel.tsx | 34 ++-- .../components/RightPanel/SelectionsPart.tsx | 14 +- app/src/components/Tools/ToolOptions.tsx | 2 +- .../viewports/ChromatinViewport.tsx | 189 +++++++++--------- .../storage/models/viewports/chromatin.ts | 2 +- .../src/viewports/chromatin_viewport.ts | 2 +- 6 files changed, 116 insertions(+), 127 deletions(-) diff --git a/app/src/components/RightPanel/ChromatinViewportConfigurationPanel.tsx b/app/src/components/RightPanel/ChromatinViewportConfigurationPanel.tsx index 0ca17e0..2c34a1b 100644 --- a/app/src/components/RightPanel/ChromatinViewportConfigurationPanel.tsx +++ b/app/src/components/RightPanel/ChromatinViewportConfigurationPanel.tsx @@ -38,6 +38,7 @@ export function ChromatinViewportConfigurationPanel(props: { } > = [ { key: 'single-color', id: 'none', text: 'Single color' }, + { key: 'selections', id: 'none', text: 'Selections' }, { key: 'centromers', id: 'centromers', @@ -281,7 +282,7 @@ export function ChromatinViewportConfigurationPanel(props: { representation: ChromatinRepresentation.Spheres, - color: getColorFromRGBA({ r: 255, g: 255, b: 255, a: 100}), + color: getColorFromRGBA({ r: 255, g: 255, b: 255, a: 100 }), radius, radiusRange, @@ -608,7 +609,7 @@ export function ChromatinViewportConfigurationPanel(props: { (<div className={"treeViewListItem " + (configuration.selectedDatum == index ? 'selected' : '')} key={index} onClick={() => setSelectedDatum(index)}> <span style={{ display: 'block', width: '4px' }}></span> <Text className="text" nowrap>{datum.id}</Text> - <Delete16Regular primaryFill={'white'} className='icon iconHoverRed' onClick={(e) => { e.stopPropagation(); removeData3D(index); } }></Delete16Regular> + <Delete16Regular primaryFill={'white'} className='icon iconHoverRed' onClick={(e) => { e.stopPropagation(); removeData3D(index); }}></Delete16Regular> </div>) )} @@ -663,7 +664,7 @@ export function ChromatinViewportConfigurationPanel(props: { <DefaultButton id="singleColorButton" styles={{ root: { width: 'calc(100% - 8px)', margin: '0px 4px 0px 4px' } }} key="singleColorButton" onClick={() => setIsSingleColorCalloutVisible(true)}> - <span style={{ color: '#' + configuration.data[configuration.selectedDatum].color.hex}}>{configuration.data[configuration.selectedDatum].color.hex}</span> + <span style={{ color: '#' + configuration.data[configuration.selectedDatum].color.hex }}>{configuration.data[configuration.selectedDatum].color.hex}</span> </DefaultButton> {isSingleColorCalloutVisible && ( <Callout @@ -685,6 +686,20 @@ export function ChromatinViewportConfigurationPanel(props: { )} </>} + {configuration.selectedDatum != null && configuration.data.length > configuration.selectedDatum && configuration.data[configuration.selectedDatum].colorMappingMode == 'selections' && <> + <div style={{ display: 'block', width: '100%', marginTop: '8px' }}></div> + + {configuration.selectedDatum != null && ( + <SelectionsPart + selections={selections} + configurationReducer={configurationReducer} + dataReducer={props.dataReducer} + selectionsReducer={props.selectionsReducer} + selectedDataIndex={configuration.selectedDatum} + ></SelectionsPart> + )} + </>} + {configuration.selectedDatum != null && configuration.data.length > configuration.selectedDatum && configuration.data[configuration.selectedDatum].colorMappingMode == 'centromers' && <> {centromerDataOptions.length <= 0 && ("No more data available.")} { @@ -860,19 +875,6 @@ export function ChromatinViewportConfigurationPanel(props: { } </>} - {/* SELECTIONS */} - <div style={{ display: 'block', width: '100%', marginTop: '16px' }}></div> - <Separator></Separator> - {configuration.selectedDatum != null && ( - <SelectionsPart - selections={selections} - configurationReducer={configurationReducer} - dataReducer={props.dataReducer} - selectionsReducer={props.selectionsReducer} - selectedDataIndex={configuration.selectedDatum} - ></SelectionsPart> - )} - {/* <Separator></Separator> <Text nowrap block variant='large'>Labeling</Text> <Checkbox label="Show labels" checked={configuration.labeling.showLabelingOverlay} onChange={handleShowLabelingOverlayChange} /> diff --git a/app/src/components/RightPanel/SelectionsPart.tsx b/app/src/components/RightPanel/SelectionsPart.tsx index f68358b..d3cb6fa 100644 --- a/app/src/components/RightPanel/SelectionsPart.tsx +++ b/app/src/components/RightPanel/SelectionsPart.tsx @@ -56,10 +56,10 @@ export function SelectionsPart<T extends ConfigurationsWithSelections>(props: Pr } const selectSelection = (selectionID: SelectionID) => { - if (configuration.type === ViewportConfigurationType.Chromatin && configuration.selectedDatum != null) { + if (configuration.type === ViewportConfigurationType.Chromatin && props.selectedDataIndex != null) { const newData = [...configuration.data]; - newData[configuration.selectedDatum] = { - ...newData[configuration.selectedDatum], + newData[props.selectedDataIndex] = { + ...newData[props.selectedDataIndex], selectedSelectionID: selectionID, }; @@ -147,8 +147,6 @@ export function SelectionsPart<T extends ConfigurationsWithSelections>(props: Pr } function changeSelectionColor(selectionID: SelectionID, color: IColor) { - console.log(color); - globalSelectionsDispatch({ type: SelectionActionKind.UPDATE, id: selectionID, @@ -162,13 +160,11 @@ export function SelectionsPart<T extends ConfigurationsWithSelections>(props: Pr } const isSelected = (id: SelectionID) => { - if (configuration.type === ViewportConfigurationType.Chromatin && configuration.selectedDatum && configuration.data[configuration.selectedDatum]) { - return configuration.data[configuration.selectedDatum].selectedSelectionID == id; + if (configuration.type === ViewportConfigurationType.Chromatin) { + return configuration.data[props.selectedDataIndex].selectedSelectionID == id; } else { return configuration.selectedSelectionID == id; } - - return false; } return <> diff --git a/app/src/components/Tools/ToolOptions.tsx b/app/src/components/Tools/ToolOptions.tsx index 63c95a8..34fe859 100644 --- a/app/src/components/Tools/ToolOptions.tsx +++ b/app/src/components/Tools/ToolOptions.tsx @@ -19,7 +19,7 @@ export function ToolOptions(props: { let hasSelectedSelection = configuration.selectedSelectionID != null; - if (configuration.type == ViewportConfigurationType.Chromatin && configuration.selectedDatum && configuration.data[configuration.selectedDatum]) { + if (configuration.type == ViewportConfigurationType.Chromatin && configuration.selectedDatum != null && configuration.data[configuration.selectedDatum]) { hasSelectedSelection = configuration.data[configuration.selectedDatum].selectedSelectionID != null; } diff --git a/app/src/components/viewports/ChromatinViewport.tsx b/app/src/components/viewports/ChromatinViewport.tsx index f9aac25..5336da7 100644 --- a/app/src/components/viewports/ChromatinViewport.tsx +++ b/app/src/components/viewports/ChromatinViewport.tsx @@ -117,29 +117,29 @@ export function ChromatinViewport(props: { }, [layoutGenerator, viewport, viewport.width, viewport.height]); // Camera Update - // useDeepCompareEffect(() => { - // viewport.cameraConfiguration = configuration.camera; - // }, [configuration.camera]); + useDeepCompareEffect(() => { + viewport.cameraConfiguration = configuration.camera; + }, [configuration.camera]); - // useDeepCompareEffect(() => { - // if (!viewport.camera || !viewport.canvas) return; + useDeepCompareEffect(() => { + if (!viewport.camera || !viewport.canvas) return; - // const timer = setTimeout(() => { - // updateConfiguration({ - // ...configuration, - // camera: viewport.cameraConfiguration - // }); - // }, 500) + const timer = setTimeout(() => { + updateConfiguration({ + ...configuration, + camera: viewport.cameraConfiguration + }); + }, 500) - // return () => clearTimeout(timer); - // }, [viewport.cameraConfiguration]); + return () => clearTimeout(timer); + }, [viewport.cameraConfiguration]); // Disable camera if control is pressed useEffect(() => { if (!viewport || !viewport.camera) return; viewport.camera.ignoreEvents = isPrimaryModPressed; - }, [isPrimaryModPressed]); + }, [viewport, isPrimaryModPressed]); // remove data removed from data tab // useEffect(() => { @@ -152,7 +152,7 @@ export function ChromatinViewport(props: { // }, [data, globalSelections]); useEffect(() => { - if (!viewport.canvas || !configuration.data) return; + if (!viewport.canvas) return; viewport.clearChromatin(); @@ -244,6 +244,8 @@ export function ChromatinViewport(props: { configurationDatum.color.b / 255.0, 1.0 ))); + } else if (configurationDatum.colorMappingMode == "selections") { + newColors[configurationDatumIndex] = data3D.cacheColorArray(new Array(binsAmount).fill(vec4.fromValues(1.0, 1.0, 1.0, 1.0))); } } @@ -569,7 +571,7 @@ export function ChromatinViewport(props: { // Color bins useEffect(() => { - if (!viewport.canvas || !configuration.data) { + if (!viewport.canvas) { return; } @@ -611,14 +613,8 @@ export function ChromatinViewport(props: { return; } - let intersectionBin = closestIntersection.binIndex; - if (interesctionSecondaryData) { - // intersectionBin = ; - } - - if (closestIntersection != null && tool.type == ChromatinViewportToolType.PointSelection) { - closestIntersection.chromatinPart.setBinColor(intersectionBin, { r: selection.color.r, g: selection.color.g, b: selection.color.b, a: 1.0 }); + closestIntersection.chromatinPart.setBinColor(closestIntersection.binIndex, { r: selection.color.r, g: selection.color.g, b: selection.color.b, a: 1.0 }); } else if (closestIntersection != null && tool.type == ChromatinViewportToolType.SphereSelection && configuration.data[selectedDatum].selectedSelectionID) { // Only find position in space where the ray intersects const intersectionExactPosition = vec3.add(vec3.create(), closestIntersection.ray.origin, vec3.scale(vec3.create(), closestIntersection.ray.direction, closestIntersection.distance)); @@ -710,7 +706,7 @@ export function ChromatinViewport(props: { } // console.timeEnd('colorBins::intersection'); // console.timeEnd('colorBins'); - }, [viewport, closestIntersection, colors, configuration.data, configuration.tool, configuration.selectedSelectionID, configuration.chromosomes, data.data, globalSelections.selections, isShiftPressed]); + }, [viewport, closestIntersection, colors, configuration.data, configuration.selectedDatum, configuration.tool, configuration.selectedSelectionID, configuration.chromosomes, data.data, globalSelections.selections, isShiftPressed]); useEffect(() => { if (viewport && configuration.backgroundColor) { @@ -781,112 +777,107 @@ export function ChromatinViewport(props: { const onClick = () => { - if (!viewport || !configuration.data || !closestIntersection || !isPrimaryModPressed || !configuration.tool || !configuration.selectedSelectionID) { + if (!viewport || !configuration.data || !closestIntersection || !isPrimaryModPressed || !configuration.tool || configuration.selectedDatum == null || !configuration.data[configuration.selectedDatum]) { return; } - /* - + const datum = configuration.data[configuration.selectedDatum]; const tool = configuration.tool; - const selectionId = configuration.selectedSelectionID; - const selectedChromatinPart = viewport.getChromatinPartByChromosomeIndex(closestIntersection.chromatinPart.chromosomeIndex); - if (!selectedChromatinPart) { + const selectionId = datum.selectedSelectionID; + if (selectionId == null) { return; } + const selectedChromatinPart = closestIntersection.chromatinPart; + const selection = globalSelections.selections.find(s => s.id == selectionId); if (!selection) { throw "No global selection found with local selection ID " + selectionId; } - const datum = configuration.data; const binPositions = data.data.filter(d => d.id == datum.id)[0] as BinPositionsData; - const chromosomeSlices = binPositions.chromosomes; - const selectedChromosomeIndex = selectedChromatinPart.chromosomeIndex; - const selectedChromosomeOffset = binPositions.chromosomes[selectedChromosomeIndex].from; const newBins: Uint16Array = selection.bins.slice(); if (tool.type == ChromatinViewportToolType.PointSelection) { - newBins[selectedChromosomeOffset + closestIntersection.binIndex] = isSecondaryModPressed ? 0 : 1; + newBins[closestIntersection.binIndex] = isSecondaryModPressed ? 0 : 1; } else if (tool.type == ChromatinViewportToolType.SphereSelection) { - const sphereCenter = vec3.add(vec3.create(), closestIntersection.ray.origin, vec3.scale(vec3.create(), closestIntersection.ray.direction, closestIntersection.distance)); - const sphereRadius = tool.radius; - const value = isSecondaryModPressed ? 0 : 1; + // const sphereCenter = vec3.add(vec3.create(), closestIntersection.ray.origin, vec3.scale(vec3.create(), closestIntersection.ray.direction, closestIntersection.distance)); + // const sphereRadius = tool.radius; + // const value = isSecondaryModPressed ? 0 : 1; - for (let chromosomeIndex = 0; chromosomeIndex < configuration.chromosomes.length; chromosomeIndex++) { - const chromatinPart = viewport.getChromatinPartByChromosomeIndex(chromosomeIndex); - if (!chromatinPart || !configuration.chromosomes[chromosomeIndex]) continue; + // for (let chromosomeIndex = 0; chromosomeIndex < configuration.chromosomes.length; chromosomeIndex++) { + // const chromatinPart = viewport.getChromatinPartByChromosomeIndex(chromosomeIndex); + // if (!chromatinPart || !configuration.chromosomes[chromosomeIndex]) continue; - const binsPositions = chromatinPart.getBinsPositions(); - const offset = binPositions.chromosomes[chromosomeIndex].from; - for (let binIndex = 0; binIndex < binsPositions.length; binIndex++) { - const binPosition = binsPositions[binIndex]; + // const binsPositions = chromatinPart.getBinsPositions(); + // const offset = binPositions.chromosomes[chromosomeIndex].from; + // for (let binIndex = 0; binIndex < binsPositions.length; binIndex++) { + // const binPosition = binsPositions[binIndex]; - if (vec3.distance(binPosition, sphereCenter) < sphereRadius) { - newBins[offset + binIndex] = value; - } - } - } + // if (vec3.distance(binPosition, sphereCenter) < sphereRadius) { + // newBins[offset + binIndex] = value; + // } + // } + // } } else if (tool.type == ChromatinViewportToolType.JoinSelection) { - if (tool.from == null) { - updateConfiguration({ - ...configuration, - tool: { - ...tool, - from: selectedChromosomeOffset + closestIntersection.binIndex - } - }); - } else { - const closestIntersectionChromosomeOffset = chromosomeSlices[closestIntersection.chromatinPart.chromosomeIndex].from; + // if (tool.from == null) { + // updateConfiguration({ + // ...configuration, + // tool: { + // ...tool, + // from: selectedChromosomeOffset + closestIntersection.binIndex + // } + // }); + // } else { + // const closestIntersectionChromosomeOffset = chromosomeSlices[closestIntersection.chromatinPart.chromosomeIndex].from; - const startBinIndex = Math.min(closestIntersectionChromosomeOffset + closestIntersection.binIndex, tool.from); - const endBinIndex = Math.max(closestIntersectionChromosomeOffset + closestIntersection.binIndex, tool.from); + // const startBinIndex = Math.min(closestIntersectionChromosomeOffset + closestIntersection.binIndex, tool.from); + // const endBinIndex = Math.max(closestIntersectionChromosomeOffset + closestIntersection.binIndex, tool.from); - const value = isSecondaryModPressed ? 0 : 1; - for (let chromosomeIndex = 0; chromosomeIndex < configuration.chromosomes.length; chromosomeIndex++) { - const chromatinPart = viewport.getChromatinPartByChromosomeIndex(chromosomeIndex); - if (!chromatinPart) continue; - - const binsPositions = chromatinPart.getBinsPositions(); - const binOffset = chromosomeSlices[chromosomeIndex].from; - for (let binIndex = 0; binIndex < binsPositions.length; binIndex++) { - if (startBinIndex <= (binOffset + binIndex) && (binOffset + binIndex) <= endBinIndex) { - newBins[binOffset + binIndex] = value; - } - } - } + // const value = isSecondaryModPressed ? 0 : 1; + // for (let chromosomeIndex = 0; chromosomeIndex < configuration.chromosomes.length; chromosomeIndex++) { + // const chromatinPart = viewport.getChromatinPartByChromosomeIndex(chromosomeIndex); + // if (!chromatinPart) continue; - updateConfiguration({ - ...configuration, - tool: { - ...tool, - from: null, - to: null - } - }); - } - } else if (tool.type == ChromatinViewportToolType.Ruler) { - const ruler = { ...tool }; + // const binsPositions = chromatinPart.getBinsPositions(); + // const binOffset = chromosomeSlices[chromosomeIndex].from; + // for (let binIndex = 0; binIndex < binsPositions.length; binIndex++) { + // if (startBinIndex <= (binOffset + binIndex) && (binOffset + binIndex) <= endBinIndex) { + // newBins[binOffset + binIndex] = value; + // } + // } + // } - if (!isSecondaryModPressed) { - ruler.from = { - bin: closestIntersection.binIndex, - chrom: closestIntersection.chromatinPart.name, - }; - } else { - ruler.from = null; - } + // updateConfiguration({ + // ...configuration, + // tool: { + // ...tool, + // from: null, + // to: null + // } + // }); + // } + } else if (tool.type == ChromatinViewportToolType.Ruler) { + // const ruler = { ...tool }; + + // if (!isSecondaryModPressed) { + // ruler.from = { + // bin: closestIntersection.binIndex, + // chrom: closestIntersection.chromatinPart.name, + // }; + // } else { + // ruler.from = null; + // } - updateConfiguration({ - ...configuration, - tool: ruler - }); + // updateConfiguration({ + // ...configuration, + // tool: ruler + // }); } globalSelectionsDispatch({ type: SelectionActionKind.UPDATE, id: selectionId, bins: newBins }); - */ }; return (<div style={{ width: '100%', height: '100%', overflow: 'hidden', position: 'relative' }}> diff --git a/app/src/modules/storage/models/viewports/chromatin.ts b/app/src/modules/storage/models/viewports/chromatin.ts index 67c62c5..4b6e871 100644 --- a/app/src/modules/storage/models/viewports/chromatin.ts +++ b/app/src/modules/storage/models/viewports/chromatin.ts @@ -95,7 +95,7 @@ export interface IChromatinDataConfiguration extends IDataConfiguration { } export type ChromatinViewportAggregationFunction = "min" | "max" | "median" | "mean" | 'sum'; -export type ChromatinViewportColorMappingMode = 'single-color' | 'centromers' | '1d-numerical' | '1d-density' | 'linear-order' | 'sasa' | '3d-density'; +export type ChromatinViewportColorMappingMode = 'single-color' | 'selections' | 'centromers' | '1d-numerical' | '1d-density' | 'linear-order' | 'sasa' | '3d-density'; export type TooltipTextAggregation = 'none' | 'count'; export type TooltipNumericAggregation = 'none' | 'min' | 'max' | 'median' | 'mean' | 'sum'; export type LabelingDebugTexture = 'id' | 'contours' | 'dt'; diff --git a/libs/graphics/src/viewports/chromatin_viewport.ts b/libs/graphics/src/viewports/chromatin_viewport.ts index 4c705d9..f808796 100644 --- a/libs/graphics/src/viewports/chromatin_viewport.ts +++ b/libs/graphics/src/viewports/chromatin_viewport.ts @@ -149,7 +149,7 @@ export class ChromatinPart { } public setBinColorVec4(binIndex: number, color: vec4): void { - this._binsColor[binIndex] = color; + this._binsColor[binIndex] = vec4.clone(color); if (this._structure instanceof ContinuousTube) { if (binIndex == 0) { -- GitLab