create unique css class for focused nodes

USEPA · Mar 14, 2024 · ac6042f · ac6042f
1 parent cb66f92
commit ac6042f
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 4 deletions.
diff --git a/src/components/Nodes/BoolNode/BoolNode.tsx b/src/components/Nodes/BoolNode/BoolNode.tsx
@@ -18,17 +18,23 @@ export const BoolNode = ({
   id,
   ...props
 }: NodeProps<BoolNodeData>) => {
-  const { showNode, showChildren, hideNiblings, hideDescendants, markDecisionMade } =
-    useDecisionTree();
+  const {
+    showNode,
+    showChildren,
+    hideNiblings,
+    hideDescendants,
+    markDecisionMade,
+    markDecisionFocused,
+  } = useDecisionTree();
   const [selected, setSelected] = useState<'yes' | 'no' | undefined>(undefined);
 
   const handleYes = () => {
     showNode(yesId, { parentId: id });
     showChildren(yesId);
     hideNiblings(id);
     hideDescendants(noId);
-    markDecisionMade(yesId);
     markDecisionMade(id);
+    markDecisionFocused(yesId);
     setSelected('yes');
   };
 
@@ -37,8 +43,8 @@ export const BoolNode = ({
     showChildren(noId);
     hideNiblings(id);
     hideDescendants(yesId);
-    markDecisionMade(noId);
     markDecisionMade(id);
+    markDecisionFocused(noId);
     setSelected('no');
   };
 

diff --git a/src/hooks/useDecisionTree/useDecisionTree.tsx b/src/hooks/useDecisionTree/useDecisionTree.tsx
@@ -21,6 +21,7 @@ export const useDecisionTree = (initialTree?: PositionUnawareDecisionTree) => {
     onNodesChange,
     onEdgesChange,
     markDecisionMade,
+    markDecisionFocused,
   } = useDecTreeStore((state) => state);
 
   /** show a node's direct children and the edges leading to them */
@@ -75,5 +76,6 @@ export const useDecisionTree = (initialTree?: PositionUnawareDecisionTree) => {
     onEdgesChange,
     onNodesChange,
     markDecisionMade,
+    markDecisionFocused,
   } as const;
 };
diff --git a/src/index.css b/src/index.css
@@ -46,6 +46,11 @@ body {
     border-radius: 20px;
 }
 
+.focused {
+    border: 5px solid #ec1f1f;
+    border-radius: 20px;
+}
+
 .react-flow__node-default.selectable:hover {
     cursor: pointer;
     background: var(--card-color-hover);

diff --git a/src/store/TreeSlice/treeSlice.ts b/src/store/TreeSlice/treeSlice.ts
@@ -18,6 +18,7 @@ export interface TreeSlice {
   hideDescendants: (nodeId: string) => void;
   removeNiblings: (nodeId: string) => void;
   markDecisionMade: (nodeId: string) => void;
+  markDecisionFocused: (nodeId: string) => void;
 }
 
 /** The state of the tree, implemented as a shared slice that builds on concrete slices
@@ -76,4 +77,11 @@ export const createTreeSlice: StateCreator<
     get().setStatus([...siblingDescendantIds, ...siblings], undefined);
     get().updateDagNodes(get().tree);
   },
+  markDecisionFocused: (nodeId: string) => {
+    const siblings = getSiblingIds(get().tree, nodeId);
+    const siblingDescendantIds = siblings.flatMap((id) => getDescendantIds(get().tree, id));
+    get().setStatus([nodeId], 'focused');
+    get().setStatus([...siblingDescendantIds, ...siblings], undefined);
+    get().updateDagNodes(get().tree);
+  },
 });