From f7e06f122ff1dc281c18e9a5090818f55f86b449 Mon Sep 17 00:00:00 2001 From: salam dalloul Date: Tue, 17 Sep 2024 16:24:35 +0200 Subject: [PATCH 1/5] #90 Update neuron and group visibility logic for newly added groups and hide neurons from side menu when hiding it from the viewer --- .../components/ViewerContainer/CustomListItem.tsx | 12 +++++++----- .../src/components/ViewerContainer/Neurons.tsx | 13 +++++++++++-- .../src/components/viewers/TwoD/ContextMenu.tsx | 2 ++ .../frontend/src/helpers/twoD/groupHelper.ts | 1 + .../visualizer/frontend/src/models/models.ts | 1 + .../visualizer/frontend/src/models/workspace.ts | 12 +++++++++++- 6 files changed, 33 insertions(+), 8 deletions(-) diff --git a/applications/visualizer/frontend/src/components/ViewerContainer/CustomListItem.tsx b/applications/visualizer/frontend/src/components/ViewerContainer/CustomListItem.tsx index 4c67627d..bf738021 100644 --- a/applications/visualizer/frontend/src/components/ViewerContainer/CustomListItem.tsx +++ b/applications/visualizer/frontend/src/components/ViewerContainer/CustomListItem.tsx @@ -137,11 +137,13 @@ const CustomListItem = ({ - - - - - + {isNeurons && ( + + + + + + )} )} diff --git a/applications/visualizer/frontend/src/components/ViewerContainer/Neurons.tsx b/applications/visualizer/frontend/src/components/ViewerContainer/Neurons.tsx index 1a9b5984..abbcd488 100644 --- a/applications/visualizer/frontend/src/components/ViewerContainer/Neurons.tsx +++ b/applications/visualizer/frontend/src/components/ViewerContainer/Neurons.tsx @@ -14,6 +14,12 @@ const mapNeuronsToListItem = (neuron: string, isActive: boolean) => ({ label: neuron, checked: isActive, }); + +const mapGroupsToListItem = (group: string, isActive: boolean) => ({ + id: group, + label: group, + checked: isActive, +}); const mapNeuronsAvailableNeuronsToOptions = (neuron: Neuron) => ({ id: neuron.name, label: neuron.name, @@ -62,6 +68,9 @@ const Neurons = ({ children }) => { .map((neuron: Neuron) => mapNeuronsAvailableNeuronsToOptions(neuron)) .sort((a, b) => a.label.localeCompare(b.label)); + const handleUpdateNeuronGroupVisibility = (_, group) => { + currentWorkspace.updateNeuronGroupVisibility(group.id, group.visible); + }; return ( { {Array.from(Object.keys(groups)).map((groupId) => ( console.log("switch")} + onSwitchChange={(e) => handleUpdateNeuronGroupVisibility(e, groups[groupId])} onDelete={() => console.log("delete")} deleteTooltipTitle="Remove group from the workspace" /> diff --git a/applications/visualizer/frontend/src/components/viewers/TwoD/ContextMenu.tsx b/applications/visualizer/frontend/src/components/viewers/TwoD/ContextMenu.tsx index 38ea986c..8a4ed3f7 100644 --- a/applications/visualizer/frontend/src/components/viewers/TwoD/ContextMenu.tsx +++ b/applications/visualizer/frontend/src/components/viewers/TwoD/ContextMenu.tsx @@ -71,6 +71,8 @@ const ContextMenu: React.FC = ({ open, onClose, position, setS const neuron = draft.availableNeurons[neuronId]; if (neuron && neuron.viewerData[ViewerType.Graph]) { neuron.viewerData[ViewerType.Graph].visibility = Visibility.Hidden; + neuron.isVisible = false; + draft.selectedNeurons.delete(neuronId); } }); draft.selectedNeurons.clear(); diff --git a/applications/visualizer/frontend/src/helpers/twoD/groupHelper.ts b/applications/visualizer/frontend/src/helpers/twoD/groupHelper.ts index c4b9f641..edd96f80 100644 --- a/applications/visualizer/frontend/src/helpers/twoD/groupHelper.ts +++ b/applications/visualizer/frontend/src/helpers/twoD/groupHelper.ts @@ -48,6 +48,7 @@ export const groupNeurons = (selectedNeurons: Set, workspace: Workspace) name: originalGroupName || newGroupId, color: originalGroupColor, neurons: newGroupNeurons, + visible: true, }; return { newGroupId, newGroup, groupsToDelete }; diff --git a/applications/visualizer/frontend/src/models/models.ts b/applications/visualizer/frontend/src/models/models.ts index 5ac1b464..d6026e78 100644 --- a/applications/visualizer/frontend/src/models/models.ts +++ b/applications/visualizer/frontend/src/models/models.ts @@ -24,6 +24,7 @@ export interface NeuronGroup { name: string; color: string; neurons: Set; + visible: boolean; } export interface EnhancedNeuron extends Neuron { diff --git a/applications/visualizer/frontend/src/models/workspace.ts b/applications/visualizer/frontend/src/models/workspace.ts index f0fd6019..59e8bc17 100644 --- a/applications/visualizer/frontend/src/models/workspace.ts +++ b/applications/visualizer/frontend/src/models/workspace.ts @@ -67,7 +67,6 @@ export class Workspace { }); this.updateContext(updated); } - hideNeuron(neuronId: string): void { const updated = produce(this, (draft: Workspace) => { if (draft.availableNeurons[neuronId]) { @@ -167,6 +166,17 @@ export class Workspace { this.updateContext(updated); } + updateNeuronGroupVisibility(groupId: string, isVisible: boolean): void { + const updated = produce(this, (draft: Workspace) => { + if (draft.neuronGroups[groupId]) { + draft.neuronGroups[groupId].visible = !isVisible; + } else { + throw new Error("Neuron group not found"); + } + }); + this.updateContext(updated); + } + changeViewerVisibility(viewerId: ViewerType, isVisible: boolean): void { const updated = produce(this, (draft: Workspace) => { if (draft.viewers[viewerId] === undefined) { From babbcb8c44340f7eb1f1331eef506c7628d1081c Mon Sep 17 00:00:00 2001 From: salam dalloul Date: Tue, 17 Sep 2024 21:17:40 +0200 Subject: [PATCH 2/5] fix twoD styling wrong prop --- applications/visualizer/frontend/src/theme/twoDStyles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/applications/visualizer/frontend/src/theme/twoDStyles.ts b/applications/visualizer/frontend/src/theme/twoDStyles.ts index 688e4080..084c574b 100644 --- a/applications/visualizer/frontend/src/theme/twoDStyles.ts +++ b/applications/visualizer/frontend/src/theme/twoDStyles.ts @@ -258,7 +258,7 @@ const ANNOTATION_STYLES = Object.entries(annotationLegend).map(([, { id, color } style: { "line-color": color, "target-arrow-color": color, - "sources-arrow-color": color, + "source-arrow-color": color, }, })); From 539404a6c4998c8cad48e8de5de0f7f4ef7c2c79 Mon Sep 17 00:00:00 2001 From: salam dalloul Date: Tue, 17 Sep 2024 21:18:00 +0200 Subject: [PATCH 3/5] fix twoD styling wrong prop --- applications/visualizer/frontend/src/theme/twoDStyles.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/applications/visualizer/frontend/src/theme/twoDStyles.ts b/applications/visualizer/frontend/src/theme/twoDStyles.ts index 084c574b..88de08ad 100644 --- a/applications/visualizer/frontend/src/theme/twoDStyles.ts +++ b/applications/visualizer/frontend/src/theme/twoDStyles.ts @@ -258,7 +258,6 @@ const ANNOTATION_STYLES = Object.entries(annotationLegend).map(([, { id, color } style: { "line-color": color, "target-arrow-color": color, - "source-arrow-color": color, }, })); From f5665464a18b17fd42efac639306bccead565917 Mon Sep 17 00:00:00 2001 From: aranega Date: Thu, 26 Sep 2024 19:48:36 -0600 Subject: [PATCH 4/5] CELE-90 Fix hide and switch on of groups in 2D viewer --- .../src/components/ViewerContainer/Neurons.tsx | 15 ++++++++------- .../src/components/viewers/TwoD/TwoDViewer.tsx | 4 ++-- .../frontend/src/helpers/twoD/twoDHelpers.ts | 15 +++++---------- 3 files changed, 15 insertions(+), 19 deletions(-) diff --git a/applications/visualizer/frontend/src/components/ViewerContainer/Neurons.tsx b/applications/visualizer/frontend/src/components/ViewerContainer/Neurons.tsx index ecbb345a..a7b4b676 100644 --- a/applications/visualizer/frontend/src/components/ViewerContainer/Neurons.tsx +++ b/applications/visualizer/frontend/src/components/ViewerContainer/Neurons.tsx @@ -3,19 +3,20 @@ import { Box, IconButton, Stack, Typography } from "@mui/material"; import Tooltip from "@mui/material/Tooltip"; import { useState } from "react"; import { useGlobalContext } from "../../contexts/GlobalContext.tsx"; +import { type ViewerData, Visibility } from "../../models/models.ts"; import type { Neuron } from "../../rest"; import { vars } from "../../theme/variables.ts"; import CustomEntitiesDropdown from "./CustomEntitiesDropdown.tsx"; import CustomListItem from "./CustomListItem.tsx"; -import { Visibility, type ViewerData } from "../../models/models.ts"; const { gray900, gray500 } = vars; -const mapNeuronsToListItem = (neuron: string, visibility: ViewerData) => ({ +const mapToListItem = (neuron: string, visibility: ViewerData) => ({ id: neuron, label: neuron, checked: Object.values(visibility).every((e) => e === undefined || e.visibility === Visibility.Visible), }); -const mapNeuronsAvailableNeuronsToOptions = (neuron: Neuron) => ({ + +const neuronToOption = (neuron: Neuron) => ({ id: neuron.name, label: neuron.name, content: [], @@ -60,7 +61,7 @@ const Neurons = ({ children }) => { }; const autoCompleteOptions = Object.values(neurons) - .map((neuron: Neuron) => mapNeuronsAvailableNeuronsToOptions(neuron)) + .map((neuron: Neuron) => neuronToOption(neuron)) .sort((a, b) => a.label.localeCompare(b.label)); return ( @@ -115,7 +116,7 @@ const Neurons = ({ children }) => { {Array.from(activeNeurons).map((neuronId) => ( { {Array.from(Object.keys(groups)).map((groupId) => ( console.log("switch")} + onSwitchChange={handleSwitchChange} onDelete={() => console.log("delete")} deleteTooltipTitle="Remove group from the workspace" /> diff --git a/applications/visualizer/frontend/src/components/viewers/TwoD/TwoDViewer.tsx b/applications/visualizer/frontend/src/components/viewers/TwoD/TwoDViewer.tsx index b1068cc5..a75e01bd 100644 --- a/applications/visualizer/frontend/src/components/viewers/TwoD/TwoDViewer.tsx +++ b/applications/visualizer/frontend/src/components/viewers/TwoD/TwoDViewer.tsx @@ -83,8 +83,8 @@ const TwoDViewer = () => { const hiddenNeurons = useMemo(() => { return getHiddenNeuronsIn2D(workspace); }, [ - Object.keys(workspace.availableNeurons) - .map((neuronId) => workspace.visibilities[neuronId]?.[ViewerType.Graph]?.visibility || "") + Object.entries(workspace.visibilities) + .map(([name, data]) => `${name}-${data[ViewerType.Graph].visibility}`) .join(","), ]); diff --git a/applications/visualizer/frontend/src/helpers/twoD/twoDHelpers.ts b/applications/visualizer/frontend/src/helpers/twoD/twoDHelpers.ts index 887178b6..6eb47f58 100644 --- a/applications/visualizer/frontend/src/helpers/twoD/twoDHelpers.ts +++ b/applications/visualizer/frontend/src/helpers/twoD/twoDHelpers.ts @@ -1,9 +1,9 @@ import type { Core, ElementDefinition, Position } from "cytoscape"; import { ViewerType, Visibility, type Workspace } from "../../models"; +import { emptyViewerData } from "../../models/models.ts"; import type { Connection } from "../../rest"; import { GRAPH_LAYOUTS, LAYOUT_OPTIONS, annotationLegend } from "../../settings/twoDSettings.tsx"; import { cellConfig, neurotransmitterConfig } from "./coloringHelper.ts"; -import { emptyViewerData } from "../../models/models.ts"; import { getConcentricLayoutPositions } from "./concentricLayoutHelper.ts"; export const createEdge = (id: string, conn: Connection, workspace: Workspace, includeAnnotations: boolean, width: number): ElementDefinition => { @@ -234,17 +234,12 @@ export const updateWorkspaceNeurons2DViewerData = (workspace: Workspace, cy: Cor }; export function getVisibleActiveNeuronsIn2D(workspace: Workspace): Set { - const activeVisibleNeurons = Array.from(workspace.activeNeurons).filter((neuronId) => { - return workspace.visibilities[neuronId]?.[ViewerType.Graph]?.visibility === Visibility.Visible; - }); + const activeVisibleNeurons = Array.from(workspace.activeNeurons).filter( + (neuronId) => workspace.visibilities[neuronId]?.[ViewerType.Graph]?.visibility === Visibility.Visible, + ); // Create a set to store the class neurons that are active and visible - const activeVisibleClasses = new Set( - activeVisibleNeurons.filter((neuronId) => { - const neuron = workspace.availableNeurons[neuronId]; - return neuron && isNeuronClass(neuronId, workspace); - }), - ); + const activeVisibleClasses = new Set(activeVisibleNeurons.filter((neuronId) => workspace.availableNeurons[neuronId] && isNeuronClass(neuronId, workspace))); // Filter out individual cells if their class neuron is active and visible return new Set( From acdd370703475fe9736b47b7da1d3e349137523c Mon Sep 17 00:00:00 2001 From: aranega Date: Thu, 26 Sep 2024 20:01:08 -0600 Subject: [PATCH 5/5] CELE-90 Remove unused code --- .../visualizer/frontend/src/models/workspace.ts | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/applications/visualizer/frontend/src/models/workspace.ts b/applications/visualizer/frontend/src/models/workspace.ts index 1750178a..e8db3698 100644 --- a/applications/visualizer/frontend/src/models/workspace.ts +++ b/applications/visualizer/frontend/src/models/workspace.ts @@ -159,17 +159,6 @@ export class Workspace { this.updateContext(updated); } - updateNeuronGroupVisibility(groupId: string, isVisible: boolean): void { - const updated = produce(this, (draft: Workspace) => { - if (draft.neuronGroups[groupId]) { - draft.neuronGroups[groupId].visible = !isVisible; - } else { - throw new Error("Neuron group not found"); - } - }); - this.updateContext(updated); - } - changeViewerVisibility(viewerId: ViewerType, isVisible: boolean): void { const updated = produce(this, (draft: Workspace) => { if (draft.viewers[viewerId] === undefined) {