Cosmetic updates

package.json

@@ -1,7 +1,7 @@
 {
   "name": "the-manifest-game",
   "private": true,
-  "version": "0.5.1",
+  "version": "0.5.2",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/App.spec.tsx

@@ -3,8 +3,18 @@ import { cleanup, render, screen, waitFor } from '@testing-library/react';
 import App from 'App';
 import { delay, http, HttpResponse } from 'msw';
 import { setupServer } from 'msw/node';
+import React from 'react';
+import { ReactFlowProvider } from 'reactflow';
 import { afterAll, afterEach, beforeAll, describe, expect, it, vi } from 'vitest';
 
+const TestComponent = () => {
+  return (
+    <ReactFlowProvider>
+      <App />
+    </ReactFlowProvider>
+  );
+};
+
 const handlers = [
   http.get('/default.json', async () => {
     return HttpResponse.json({
@@ -53,29 +63,29 @@ describe('App', () => {
         });
       })
     );
-    render(<App />);
+    render(<TestComponent />);
     expect(screen.getByTestId('spinner')).toBeInTheDocument();
   });
   it('renders a title if provided', async () => {
     const title = 'Zee bananas';
     vi.stubEnv('VITE_APP_TITLE', title);
-    render(<App />);
+    render(<TestComponent />);
     await waitFor(() => expect(screen.queryByTestId('spinner')).not.toBeInTheDocument());
     expect(screen.getByText(title)).toBeInTheDocument();
   });
   it('defaults title to "The Manifest Game"', async () => {
-    render(<App />);
+    render(<TestComponent />);
     await waitFor(() => expect(screen.queryByTestId('spinner')).not.toBeInTheDocument());
     expect(screen.getByText('The Manifest Game')).toBeInTheDocument();
   });
   it('minimap is visible by default', async () => {
-    render(<App />);
+    render(<TestComponent />);
     await waitFor(() => expect(screen.queryByTestId('spinner')).not.toBeInTheDocument());
     expect(screen.getByTestId(/minimap/i)).toBeInTheDocument();
   });
   it('Throws an error if there is an error fetching the config', async () => {
     server.use(http.get('/default.json', async () => HttpResponse.error()));
-    render(<App />);
+    render(<TestComponent />);
     await waitFor(() => expect(screen.queryByTestId('spinner')).not.toBeInTheDocument());
     expect(screen.getByText(/Error/i)).toBeInTheDocument();
   });

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

@@ -8,13 +8,46 @@ import { afterEach, describe, expect, it } from 'vitest';
 
 afterEach(() => {});
 
-const TestComponent = ({ overwrites }: { overwrites?: Partial<NodeProps<BoolNodeData>> }) => {
+interface TestComponentProps {
+  overwrites?: Partial<NodeProps<BoolNodeData>>;
+  primaryId?: string;
+  yesId?: string;
+  noId?: string;
+}
+
+const TestComponent = ({ overwrites, primaryId, noId, yesId }: TestComponentProps) => {
+  const id = primaryId || '1';
+  const yId = yesId || '2';
+  const nId = noId || '3';
+  useStore.setState({
+    decisionTree: {
+      [id]: {
+        id: id,
+        hidden: false,
+        data: { label: 'question', children: [yId, nId] },
+        position: { x: 0, y: 0, rank: 0 },
+      },
+      [yId]: {
+        id: yId,
+        hidden: true,
+        data: { children: [], label: 'foo' },
+        position: { x: 0, y: 0, rank: 0 },
+      },
+      [nId]: {
+        id: nId,
+        hidden: true,
+        data: { children: [], label: 'bar' },
+        position: { x: 0, y: 0, rank: 0 },
+      },
+    },
+  });
+
   const props: NodeProps<BoolNodeData> = {
-    id: '',
+    id: id,
     data: {
       label: 'this is a question?',
-      yesId: '',
-      noId: '',
+      yesId: yId,
+      noId: nId,
       children: [],
       ...overwrites?.data,
     },
@@ -27,65 +60,56 @@ const TestComponent = ({ overwrites }: { overwrites?: Partial<NodeProps<BoolNode
     dragging: false,
     ...overwrites,
   };
-  return <BoolNode {...props} />;
+  return (
+    <ReactFlowProvider>
+      <BoolNode {...props} />
+    </ReactFlowProvider>
+  );
 };
 
 describe('BoolNode', () => {
   it('renders a node', () => {
     const label = 'what site type?';
-    render(
-      <ReactFlowProvider>
-        {/* @ts-expect-error - just need the label*/}
-        <TestComponent overwrites={{ data: { label } }} />
-      </ReactFlowProvider>
-    );
+    // @ts-expect-error - don't need to pass all props
+    render(<TestComponent overwrites={{ data: { label } }} />);
     expect(screen.getByText(label)).toBeInTheDocument();
   });
   it('renders a yes and no button', () => {
-    render(
-      <ReactFlowProvider>
-        <TestComponent />
-      </ReactFlowProvider>
-    );
+    render(<TestComponent />);
     expect(screen.getByRole('button', { name: /yes/i })).toBeInTheDocument();
     expect(screen.getByRole('button', { name: /no/i })).toBeInTheDocument();
   });
+  it('yes and no initially do not have selected class name', () => {
+    render(<TestComponent />);
+    expect(screen.getByRole('button', { name: /yes/i })).not.toHaveClass(/selected/i);
+  });
+  it('clicking the buttons adds selected class', async () => {
+    const user = userEvent.setup();
+    render(<TestComponent />);
+    const yesButton = screen.getByRole('button', { name: /yes/i });
+    const noButton = screen.getByRole('button', { name: /no/i });
+    await user.click(yesButton);
+    expect(yesButton).toHaveClass(/selected/i);
+    await user.click(noButton);
+    expect(noButton).toHaveClass(/selected/i);
+    expect(yesButton).not.toHaveClass(/selected/i);
+  });
   it('clicking yes/no toggles the visibility of the children nodes', async () => {
     const user = userEvent.setup();
     const primaryId = '1';
     const yesId = '2';
     const noId = '3';
-    useStore.setState({
-      decisionTree: {
-        [primaryId]: {
-          id: primaryId,
-          hidden: false,
-          data: { label: 'question', children: [yesId, noId] },
-          position: { x: 0, y: 0, rank: 0 },
-        },
-        [yesId]: {
-          id: yesId,
-          hidden: true,
-          data: { children: [], label: 'foo' },
-          position: { x: 0, y: 0, rank: 0 },
-        },
-        [noId]: {
-          id: noId,
-          hidden: true,
-          data: { children: [], label: 'bar' },
-          position: { x: 0, y: 0, rank: 0 },
-        },
-      },
-    });
+
     render(
-      <ReactFlowProvider>
-        <TestComponent
-          overwrites={{
-            id: primaryId,
-            data: { label: 'question', yesId: yesId, noId: noId, children: [yesId, noId] },
-          }}
-        />
-      </ReactFlowProvider>
+      <TestComponent
+        primaryId={primaryId}
+        yesId={yesId}
+        noId={noId}
+        overwrites={{
+          id: primaryId,
+          data: { label: 'question', yesId: yesId, noId: noId, children: [yesId, noId] },
+        }}
+      />
     );
     await user.click(screen.getByRole('button', { name: /yes/i }));
     expect(useStore.getState().decisionTree[yesId].hidden).toBe(false);

src/components/Nodes/BoolNode/BoolNode.tsx

@@ -1,5 +1,6 @@
 import { BaseNode } from 'components/Nodes/BaseNode/BaseNode';
 import { useDAG } from 'hooks/useDAG/useDAG';
+import { useState } from 'react';
 import { NodeProps } from 'reactflow';
 
 import styles from './bool.module.css';
@@ -17,15 +18,18 @@ export const BoolNode = ({
   ...props
 }: NodeProps<BoolNodeData>) => {
   const { showNode, hideNode } = useDAG();
+  const [selected, setSelected] = useState<'yes' | 'no' | undefined>(undefined);
 
   const handleYes = () => {
     showNode(yesId, { parentId: id });
     hideNode(noId);
+    setSelected('yes');
   };
 
   const handleNo = () => {
     showNode(noId, { parentId: id });
     hideNode(yesId);
+    setSelected('no');
   };
 
   return (
@@ -35,8 +39,12 @@ export const BoolNode = ({
           <span>{label}</span>
         </div>
         <div className={styles.boolNodeOptions}>
-          <button onClick={handleYes}>Yes</button>
-          <button onClick={handleNo}>No</button>
+          <button onClick={handleYes} className={selected === 'yes' ? styles.selected : ''}>
+            Yes
+          </button>
+          <button onClick={handleNo} className={selected === 'no' ? styles.selected : ''}>
+            No
+          </button>
         </div>
       </div>
     </BaseNode>

src/components/Nodes/BoolNode/bool.module.css

@@ -35,7 +35,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    box-shadow: rgba(27, 31, 35, 0.04) 0 1px 0 0, rgba(255, 255, 255, 0.25) 0px 1px 0px 0px inset;
+    box-shadow: rgba(27, 31, 35, 0.04) 0 1px 0 0, rgba(255, 255, 255, 0.25) 0 1px 0 0 inset;
     transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);
     transition-property: color, background-color, border-color;
 }
@@ -44,6 +44,12 @@
     color: #ffffff;
     background-color: #334155;
     border-color: #1b1f2326;
-    box-shadow: rgba(27, 31, 35, 0.1) 0 1px 0 0, rgba(255, 255, 255, 0.03) 0px 1px 0px 0px inset;
+    box-shadow: rgba(27, 31, 35, 0.1) 0 1px 0 0, rgba(255, 255, 255, 0.03) 0 1px 0 0 inset;
+    transition-duration: 0.1s;
+}
+
+.selected {
+    border: #ad0202 3px solid !important;
+    box-shadow: rgba(27, 31, 35, 0.1) 0 1px 0 0, rgba(255, 255, 255, 0.03) 0 1px 0 0 inset;
     transition-duration: 0.1s;
 }

src/components/Tree/Tree.tsx

@@ -3,7 +3,14 @@ import { DefaultNode } from 'components/Nodes/DefaultNode/DefaultNode';
 import { ControlCenter } from 'components/Tree/ControlCenter';
 import { useDAG, useTreeDirection } from 'hooks';
 import React, { useMemo, useState } from 'react';
-import ReactFlow, { Edge, MiniMap, NodeMouseHandler } from 'reactflow';
+import ReactFlow, {
+  Edge,
+  MiniMap,
+  NodeMouseHandler,
+  useReactFlow,
+  useViewport,
+  XYPosition,
+} from 'reactflow';
 import { DagNode } from 'store/DagSlice/dagSlice';
 
 export interface TreeProps {
@@ -21,6 +28,8 @@ export const Tree = ({ nodes, edges, onClick }: TreeProps) => {
   const { onNodesChange, onEdgesChange } = useDAG();
   const [mapVisible, setMapVisible] = useState(true);
   const [direction, setDirection] = useTreeDirection();
+  const { setCenter } = useReactFlow();
+  const { zoom } = useViewport();
 
   return (
     <>
@@ -33,11 +42,19 @@ export const Tree = ({ nodes, edges, onClick }: TreeProps) => {
           onEdgesChange={onEdgesChange}
           onNodesChange={onNodesChange}
           fitView
-          fitViewOptions={{ padding: 5 }}
+          fitViewOptions={{ padding: 5, minZoom: 0.5, maxZoom: 5 }}
           proOptions={{ hideAttribution: true }}
         >
           {mapVisible && (
-            <MiniMap nodeStrokeWidth={3} data-testid="tree-mini-map" nodeColor="#3E6D9BAA" />
+            <MiniMap
+              nodeStrokeWidth={3}
+              data-testid="tree-mini-map"
+              nodeColor="#3E6D9BAA"
+              zoomable={true}
+              onClick={(_event: React.MouseEvent, position: XYPosition) =>
+                setCenter(position.x, position.y, { zoom: zoom, duration: 1.5 })
+              }
+            />
           )}
           <ControlCenter
             mapVisible={mapVisible}

src/index.tsx

@@ -1,14 +1,17 @@
 import { ErrorBoundary, ErrorMsg } from 'components/Error';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import { ReactFlowProvider } from 'reactflow';
 import App from './App';
 import 'reactflow/dist/style.css';
 import './index.css';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <ErrorBoundary fallback={<ErrorMsg />}>
-      <App />
+      <ReactFlowProvider>
+        <App />
+      </ReactFlowProvider>
     </ErrorBoundary>
   </React.StrictMode>
 );

src/store/DagSlice/dagSlice.ts

@@ -101,7 +101,7 @@ export const createDagSlice: StateCreator<DagSlice, [['zustand/devtools', never]
       'onEdgesChange'
     );
   },
-  treeDirection: 'TB',
+  treeDirection: 'LR',
   setDagDirection: (treeDirection: DagDirection) => {
     const decisionTree = layoutTree(get().decisionTree, treeDirection);
     const dagNodes = applyPositionToNodes(decisionTree, get().dagNodes);

src/store/DagSlice/dagUtils.ts

@@ -13,7 +13,7 @@ export const createDagEdge = (source: string, target: string): Edge => {
     hidden: false,
     source,
     target,
-    type: 'default',
+    type: 'smoothstep',
     markerEnd: { type: MarkerType.ArrowClosed },
   };
 };

src/store/DagSlice/layout.spec.ts

@@ -43,7 +43,9 @@ describe('DAG layout', () => {
     const direction = 'LR';
     const horizontalTree = layoutTree(positionUnawareTree, direction);
     const verticalTree = layoutTree(positionUnawareTree);
-    expect(horizontalTree[parentId].position.x).toBeLessThan(horizontalTree[childId].position.x);
-    expect(verticalTree[parentId].position.y).toBeLessThan(verticalTree[childId].position.y);
+    expect(horizontalTree[parentId].position.x).toBeLessThanOrEqual(
+      horizontalTree[childId].position.x
+    );
+    expect(verticalTree[parentId].position.y).toBeLessThanOrEqual(verticalTree[childId].position.y);
   });
 });