Rename interfaces, slices, and store exports for clarity

src/components/Nodes/BaseNode/BaseNode.spec.tsx

@@ -2,7 +2,7 @@ import '@testing-library/jest-dom';
 import { act, cleanup, render, screen } from '@testing-library/react';
 import { BaseNode } from 'components/Nodes/BaseNode/BaseNode';
 import { ReactFlowProvider } from 'reactflow';
-import useStore from 'store';
+import useTreeStore from 'store';
 import { afterEach, describe, expect, it } from 'vitest';
 
 const TestComponent = () => {
@@ -31,12 +31,12 @@ describe('BaseNode', () => {
     expect(screen.getByTestId('node-1')).toBeInTheDocument();
   });
   it('handles changes in tree layout', () => {
-    useStore.setState({ direction: 'LR' });
+    useTreeStore.setState({ direction: 'LR' });
     const { rerender } = render(<TestComponent />);
     expect(screen.getByTestId('left-handle')).toBeInTheDocument();
     expect(screen.getByTestId('right-handle')).toBeInTheDocument();
     act(() => {
-      useStore.setState({ direction: 'TB' });
+      useTreeStore.setState({ direction: 'TB' });
     });
     rerender(<TestComponent />);
     expect(screen.getByTestId('top-handle')).toBeInTheDocument();

src/components/Nodes/BoolNode/BoolNode.spec.tsx

@@ -3,7 +3,7 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { BoolNode, BoolNodeData } from 'components/Nodes/BoolNode/BoolNode';
 import { NodeProps, ReactFlowProvider } from 'reactflow';
-import useStore from 'store';
+import useTreeStore from 'store';
 import { afterEach, describe, expect, it } from 'vitest';
 
 afterEach(() => {});
@@ -19,7 +19,7 @@ const TestComponent = ({ overwrites, primaryId, noId, yesId }: TestComponentProp
   const id = primaryId || '1';
   const yId = yesId || '2';
   const nId = noId || '3';
-  useStore.setState({
+  useTreeStore.setState({
     tree: {
       [id]: {
         id: id,
@@ -112,8 +112,8 @@ describe('BoolNode', () => {
       />
     );
     await user.click(screen.getByRole('button', { name: /yes/i }));
-    expect(useStore.getState().tree[yesId].hidden).toBe(false);
+    expect(useTreeStore.getState().tree[yesId].hidden).toBe(false);
     await user.click(screen.getByRole('button', { name: /no/i }));
-    expect(useStore.getState().tree[yesId].hidden).toBe(true);
+    expect(useTreeStore.getState().tree[yesId].hidden).toBe(true);
   });
 });

src/components/Nodes/BoolNode/BoolNode.tsx

@@ -1,5 +1,5 @@
 import { BaseNode } from 'components/Nodes/BaseNode/BaseNode';
-import { useDagStore } from 'hooks';
+import { useTreeStore } from 'hooks';
 import { useState } from 'react';
 import { NodeProps } from 'reactflow';
 
@@ -17,7 +17,7 @@ export const BoolNode = ({
   id,
   ...props
 }: NodeProps<BoolNodeData>) => {
-  const { showNode, hideNode } = useDagStore();
+  const { showNode, hideNode } = useTreeStore();
   const [selected, setSelected] = useState<'yes' | 'no' | undefined>(undefined);
 
   const handleYes = () => {

src/components/Tree/ControlCenter/ControlCenter.spec.tsx

@@ -3,14 +3,14 @@ import { cleanup, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { ControlCenter } from 'components/Tree/ControlCenter/index';
 import { ReactFlowProvider } from 'reactflow';
-import { DagDirection } from 'store/DagSlice/dagSlice';
+import { TreeDirection } from 'store';
 import { afterEach, describe, expect, it, vi } from 'vitest';
 
 interface TestComponentProps {
   mapVisible?: boolean;
   setMapVisible?: (visible: boolean) => void;
-  direction?: DagDirection;
-  setDirection?: (direction: DagDirection) => void;
+  direction?: TreeDirection;
+  setDirection?: (direction: TreeDirection) => void;
 }
 
 const TestComponent = ({ ...props }: TestComponentProps) => {

src/components/Tree/ControlCenter/ControlCenter.tsx

@@ -1,13 +1,13 @@
 import { LayoutBtn } from 'components/Tree/ControlCenter/Controls/LayoutBtn/LayoutBtn';
 import { MiniMapBtn } from 'components/Tree/ControlCenter/Controls/MiniMapBtn/MiniMapBtn';
 import { Controls } from 'reactflow';
-import { DagDirection } from 'store/DagSlice/dagSlice';
+import { TreeDirection } from 'store';
 
 export interface ControlCenterProps {
   mapVisible: boolean;
   setMapVisible: (visible: boolean) => void;
-  direction: DagDirection;
-  setDirection: (direction: DagDirection) => void;
+  direction: TreeDirection;
+  setDirection: (direction: TreeDirection) => void;
 }
 
 /** The Controls for the Decision Tree*/

src/components/Tree/Tree.spec.tsx

@@ -3,8 +3,7 @@ import { cleanup, fireEvent, render, screen } from '@testing-library/react';
 import { Tree } from 'components/Tree/Tree';
 import { useDecisionTree } from 'hooks';
 import { ReactFlowProvider } from 'reactflow';
-import { DecisionTree } from 'store';
-import { PositionUnawareDecisionTree } from 'store/DagSlice/dagSlice';
+import { DecisionTree, PositionUnawareDecisionTree } from 'store';
 import { afterEach, describe, expect, it } from 'vitest';
 
 afterEach(() => cleanup());

src/components/Tree/Tree.tsx

@@ -1,20 +1,20 @@
 import { BoolNode } from 'components/Nodes/BoolNode/BoolNode';
 import { DefaultNode } from 'components/Nodes/DefaultNode/DefaultNode';
 import { ControlCenter } from 'components/Tree/ControlCenter';
-import { useDagStore, useTreeDirection } from 'hooks';
+import { useTreeDirection, useTreeStore } from 'hooks';
 import React, { useMemo, useState } from 'react';
 import ReactFlow, {
   Edge,
   MiniMap,
+  Node,
   NodeMouseHandler,
   useReactFlow,
   useViewport,
   XYPosition,
 } from 'reactflow';
-import { DagNode } from 'store/DagSlice/dagSlice';
 
 export interface TreeProps {
-  nodes: DagNode[];
+  nodes: Node[];
   edges: Edge[];
   onClick: NodeMouseHandler;
   mapVisible?: boolean;
@@ -25,7 +25,7 @@ export interface TreeProps {
  */
 export const Tree = ({ nodes, edges, onClick }: TreeProps) => {
   const nodeTypes = useMemo(() => ({ BoolNode: BoolNode, default: DefaultNode }), []);
-  const { onNodesChange, onEdgesChange } = useDagStore();
+  const { onNodesChange, onEdgesChange } = useTreeStore();
   const [mapVisible, setMapVisible] = useState(true);
   const [direction, setDirection] = useTreeDirection();
   const { setCenter } = useReactFlow();

src/hooks/index.ts

@@ -1,5 +1,5 @@
 export { useDecisionTree } from './useDecisionTree/useDecisionTree';
-export { useDagStore } from './useDagStore/useDagStore';
+export { useTreeStore } from 'hooks/useTreeStore/useTreeStore';
 export { useFetchConfig } from './useFetchConfig/useFetchConfig';
 export { useTreeDirection } from './useTreeDirection/useTreeDirection';
 export { useTreeViewport } from './useTreeViewport/useTreeViewport';

src/hooks/useDecisionTree/useDecisionTree.tsx

@@ -1,17 +1,16 @@
-import { useDagStore } from 'hooks';
+import { useTreeStore } from 'hooks';
 import { NodeMouseHandler } from 'reactflow';
 import { PositionUnawareDecisionTree } from 'store';
 
 /**
- * useDecisionTree
- *
  * Returns an array of nodes & edges to be used with the ReactFlow library
+ * ToDo: consolidate useTreeStore and useDecisionTree
  * @param initialTree
  */
 export const useDecisionTree = (initialTree?: PositionUnawareDecisionTree) => {
-  const { hideDescendants, showChildren, edges, nodes, hideNiblings } = useDagStore(initialTree);
+  const { hideDescendants, showChildren, edges, nodes, hideNiblings } = useTreeStore(initialTree);
 
-  /** handle node click events */
+  /** handle node click events ToDo: remove this and locate onClick logic in the default node*/
   const onClick: NodeMouseHandler = (_event, node) => {
     switch (node.type) {
       case 'BoolNode':

src/hooks/useFetchConfig/useFetchConfig.tsx

@@ -1,7 +1,6 @@
 import { BoolNodeData } from 'components/Nodes/BoolNode/BoolNode';
 import { useEffect, useState } from 'react';
-import { TreeNode } from 'store';
-import { PositionUnawareDecisionTree } from 'store/DagSlice/dagSlice';
+import { PositionUnawareDecisionTree, TreeNode } from 'store';
 
 /**
  * Data needed by all TreeNodes that contains the nodes expanded state,

src/hooks/useTreeDirection/useTreeDirection.spec.tsx

@@ -2,16 +2,15 @@ import '@testing-library/jest-dom';
 import { cleanup, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { useTreeDirection } from 'hooks/useTreeDirection/useTreeDirection';
-import useStore from 'store';
-import { DagDirection } from 'store/DagSlice/dagSlice';
+import useTreeStore, { TreeDirection } from 'store';
 import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 
 afterEach(() => {
   cleanup();
-  useStore.setState({});
+  useTreeStore.setState({});
 });
 beforeEach(() => {
-  useStore.setState({
+  useTreeStore.setState({
     direction: 'TB',
     tree: {
       '1': {
@@ -30,8 +29,8 @@ const TestComponent = ({
   initialDir,
   newDir,
 }: {
-  initialDir?: DagDirection;
-  newDir?: DagDirection;
+  initialDir?: TreeDirection;
+  newDir?: TreeDirection;
 }) => {
   const [direction, setDirection, isHorizontal] = useTreeDirection(initialDir);
   return (

src/hooks/useTreeDirection/useTreeDirection.tsx

@@ -1,16 +1,15 @@
 import { useEffect } from 'react';
-import useStore from 'store';
-import { DagDirection } from 'store/DagSlice/dagSlice';
+import useTreeStore, { TreeDirection } from 'store';
 
 /**
  * Returns the current direction of the node layout and a setter. The direction can be set to
- * the values of a DagDirection.
+ * the values of a .
  */
-export const useTreeDirection = (initialDir?: DagDirection) => {
-  const { direction, setDirection: setStoreDirection } = useStore((state) => state);
+export const useTreeDirection = (initialDir?: TreeDirection) => {
+  const { direction, setDirection: setStoreDirection } = useTreeStore((state) => state);
 
   /** set the direction of the tree layout */
-  const setDirection = (direction: DagDirection) => {
+  const setDirection = (direction: TreeDirection) => {
     if (direction) setStoreDirection(direction);
   };
 

src/hooks/useDagStore/useDagStore.spec.tsx → src/hooks/useTreeStore/useTreeStore.spec.tsx

@@ -1,7 +1,7 @@
 import '@testing-library/jest-dom';
 import { cleanup, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { useDagStore } from 'hooks/useDagStore/useDagStore';
+import { useTreeStore } from 'hooks/useTreeStore/useTreeStore';
 import { ReactFlowProvider } from 'reactflow';
 import { DecisionTree } from 'store';
 import { afterEach, describe, expect, test } from 'vitest';
@@ -15,7 +15,7 @@ interface TestComponentProps {
 }
 
 const TestComponent = ({ initialTree, hideNodeId = '1', showNodeId = '1' }: TestComponentProps) => {
-  const { hideNode, showNode, tree } = useDagStore(initialTree);
+  const { hideNode, showNode, tree } = useTreeStore(initialTree);
 
   return (
     <>

src/hooks/useDagStore/useDagStore.tsx → src/hooks/useTreeStore/useTreeStore.tsx

@@ -1,16 +1,13 @@
 import { useTreeViewport } from 'hooks/useTreeViewport/useTreeViewport';
 import { useEffect } from 'react';
-import useStore from 'store';
-import { PositionUnawareDecisionTree, ShowDagNodeOptions } from 'store/DagSlice/dagSlice';
+import useDecTreeStore, { PositionUnawareDecisionTree, ShowDagNodeOptions } from 'store';
 
 /**
- * useTreeNodes
- *
  * custom hook that wraps around the tree store to provide a simplified interface for common tasks
  * such as showing and hiding nodes and edges
  * @param initialTree
  */
-export const useDagStore = (initialTree?: PositionUnawareDecisionTree) => {
+export const useTreeStore = (initialTree?: PositionUnawareDecisionTree) => {
   const { setCenter, getZoom } = useTreeViewport();
   const {
     tree,
@@ -24,7 +21,7 @@ export const useDagStore = (initialTree?: PositionUnawareDecisionTree) => {
     removeNiblings: removeStoreNiblings,
     onNodesChange,
     onEdgesChange,
-  } = useStore((state) => state);
+  } = useDecTreeStore((state) => state);
 
   /** show a node's direct children and the edges leading to them */
   const showChildren = (nodeId: string) => {

src/store/DagSlice/dagSlice.ts → src/store/DagNodeSlice/dagNodeSlice.ts

@@ -14,7 +14,7 @@ import {
   applyPositionToNodes,
   createDagEdge,
   createDagNode,
-} from 'store/DagSlice/dagUtils';
+} from 'store/DagNodeSlice/dagNodeUtils';
 import { StateCreator } from 'zustand';
 
 /** A vertex in our decision tree.*/
@@ -38,34 +38,34 @@ export interface ShowDagNodeOptions {
   parentId?: string;
 }
 
-export type DagDirection = 'TB' | 'LR';
-
-interface DagState {
+interface DagNodeSliceState {
   dagNodes: DagNode[];
   dagEdges: Edge[];
 }
 
-interface DagActions {
+interface DagNodeSliceActions {
   /** Show the direct children of a node in the tree */
   createChildrenNodes: (nodeId: string, tree: DecisionTree) => void;
   /** Show a node in the tree - Currently does not create edges*/
-  createNode: (nodeId: string, tree: DecisionTree, options?: ShowDagNodeOptions) => void;
+  createDagNode: (nodeId: string, tree: DecisionTree, options?: ShowDagNodeOptions) => void;
   /** Hide a node and all of its descendants*/
-  removeNodes: (nodeId: string[]) => void;
+  removeDagNodes: (nodeId: string[]) => void;
   /** Set the layout direction */
-  setNodePositions: (tree: DecisionTree) => void;
+  setDagNodePositions: (tree: DecisionTree) => void;
   /** Used to apply update to existing nodes - used by the react-flow library*/
   onNodesChange: OnNodesChange;
   /** Used to apply update to existing edges - used by the react-flow library*/
   onEdgesChange: OnEdgesChange;
 }
 
-export interface DagSlice extends DagState, DagActions {}
+export interface DagNodeSlice extends DagNodeSliceState, DagNodeSliceActions {}
 
-export const createDagSlice: StateCreator<DagSlice, [['zustand/devtools', never]], [], DagSlice> = (
-  set,
-  get
-) => ({
+export const createDagNodeSlice: StateCreator<
+  DagNodeSlice,
+  [['zustand/devtools', never]],
+  [],
+  DagNodeSlice
+> = (set, get) => ({
   dagEdges: [],
   dagNodes: [],
   onNodesChange: (changes: NodeChange[]) => {
@@ -86,7 +86,7 @@ export const createDagSlice: StateCreator<DagSlice, [['zustand/devtools', never]
       'onEdgesChange'
     );
   },
-  setNodePositions: (tree: DecisionTree) => {
+  setDagNodePositions: (tree: DecisionTree) => {
     const dagNodes = applyPositionToNodes(tree, get().dagNodes);
     set(
       {
@@ -97,8 +97,8 @@ export const createDagSlice: StateCreator<DagSlice, [['zustand/devtools', never]
     );
   },
 
-  /** ToDo: Options temporary, to be removed when we separate the EdgeSlice*/
-  createNode: (nodeId: string, tree: DecisionTree, options?: ShowDagNodeOptions) => {
+  /** ToDo: remove options. can be done after when we create EdgeSlice*/
+  createDagNode: (nodeId: string, tree: DecisionTree, options?: ShowDagNodeOptions) => {
     const dagEdges = options?.parentId
       ? addDagEdge(get().dagEdges, {
           source: options.parentId,
@@ -116,7 +116,7 @@ export const createDagSlice: StateCreator<DagSlice, [['zustand/devtools', never]
       'createNode'
     );
   },
-  removeNodes: (nodeId: string[]) => {
+  removeDagNodes: (nodeId: string[]) => {
     const newNodes = filterNodes(get().dagNodes, nodeId);
     const newEdges = get().dagEdges.filter((edge) => !nodeId.includes(edge.target));
     set(
@@ -128,6 +128,7 @@ export const createDagSlice: StateCreator<DagSlice, [['zustand/devtools', never]
       'removeDagNode'
     );
   },
+  /** ToDo: move logic into TreeSlice and consolidate with createDagNode */
   createChildrenNodes: (nodeId: string, tree: DecisionTree) => {
     const childrenData = getTreeChildren(tree, tree[nodeId]);
     const newEdges = createChildrenEdges(nodeId, childrenData);

src/store/DagSlice/dagUtils.spec.ts → src/store/DagNodeSlice/dagNodeUtils.spec.ts

@@ -1,7 +1,7 @@
 import '@testing-library/jest-dom';
 import { Edge } from 'reactflow';
-import { DecisionTree } from 'store/DagSlice/dagSlice';
-import { addDagEdge, applyPositionToNodes, createDagEdge } from 'store/DagSlice/dagUtils';
+import { DecisionTree } from 'store/DagNodeSlice/dagNodeSlice';
+import { addDagEdge, applyPositionToNodes, createDagEdge } from 'store/DagNodeSlice/dagNodeUtils';
 import { describe, expect, it, test } from 'vitest';
 
 describe('Dag Slice internals', () => {

src/store/DagSlice/dagUtils.ts → src/store/DagNodeSlice/dagNodeUtils.ts

@@ -4,7 +4,7 @@
  *  Do not export outside this module
  * */
 import { Edge, MarkerType } from 'reactflow';
-import { DagNode, DecisionTree, TreeNode } from './dagSlice';
+import { DagNode, DecisionTree, TreeNode } from 'store/DagNodeSlice/dagNodeSlice';
 
 export interface DagEdgeConfig {
   source: string;