Close niblings (nieces & nephews)

.prettierignore

@@ -1,7 +1,7 @@
 **/build
 **/dist
 **/node_modules/
-**/.env*
+.env
 **/*.bak
 /client/public/mockServiceWorker.js
-.github/pull_request_template.md
+.github/pull_request_template.md

README.md

@@ -1,5 +1,10 @@
 # The Manifest Game
 
 [![Tests](https://github.com/USEPA/the-manifest-game/actions/workflows/test.yaml/badge.svg)](https://github.com/USEPA/the-manifest-game/actions/workflows/test.yaml)
+[![Build](https://github.com/USEPA/the-manifest-game/actions/workflows/build.yaml/badge.svg)](https://github.com/USEPA/the-manifest-game/actions/workflows/build.yaml/badge.svg)
 
 An interactive decision tree to assist e-Manifest users determine the necessary course of action.
+
+## Getting Started
+
+

docs/README.md

@@ -44,6 +44,15 @@ The following terms are used throughout the documentation and code:
 5. **Descendant** (or **Descendants**): The descendants of a node are the vertices that are connected to the parent node
    by a path of edges such that in the topological order `f(u, v)` of the DAG, for every edge `(u, v)`, where `u` is the
    parent of `v`, `u` comes before `v`. (you will see this term in the code many times)
+6. **Parent**: The parent of a node is the vertex that is connected to the child node by a direct edge such that in the
+   topological order `f(u, v)` of the DAG, for every edge `(u, v)`, where `u` is the parent of `v`, `u` comes
+   before `v`.
+   (you will see this term in the code many times)
+7. **Sibling**: The siblings of a node are the vertices that are connected to the same parent node as the child node.
+   Siblings have the same "rank" in the DAG.
+8. **_Nibling_**: The niblings of a node are the descendants of the node's siblings (those that reside at the same level
+   or rank in the
+   DAG)
 
 ## Implementation Notes
 

package.json

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

public/default.json

@@ -14,7 +14,7 @@
     "id": "1",
     "type": "default",
     "data": {
-      "label": "I am a Generator/Transporter",
+      "label": "I am a Generator or Transporter",
       "children": [
         "15"
       ]

src/App.spec.tsx

@@ -83,4 +83,8 @@ describe('App', () => {
     await waitFor(() => expect(screen.queryByTestId('spinner')).not.toBeInTheDocument());
     expect(screen.getByText('The Manifest Game')).toBeInTheDocument();
   });
+  it('Throws an error if there is an error fetching the config', async () => {
+    // ToDo - implement this test
+    expect(true).toBe(true);
+  });
 });

src/App.tsx

@@ -1,29 +1,26 @@
-import { ErrorBoundary } from 'components/Error/ErrorBoundary';
-import { ErrorMsg } from 'components/Error/ErrorMsg';
 import { Header } from 'components/Header/Header';
 import { Spinner } from 'components/Spinner/Spinner';
 import { Tree } from 'components/Tree/Tree';
+import { useDecisionTree } from 'hooks';
 import { useFetchConfig } from 'hooks/useFetchConfig/useFetchConfig';
 
 /**
  * App - responsible for rendering the decision tree
- * Future work - add a spinner, error handling, and a way to load a tree from (multiple) files
  * @constructor
  */
 export default function App() {
   const title = import.meta.env.VITE_APP_TITLE ?? 'The Manifest Game';
   const { config, isLoading, error } = useFetchConfig('/default.json');
+  const { nodes, edges, onClick } = useDecisionTree(config);
 
   if (isLoading || !config) return <Spinner />;
 
-  if (error || (!config && !isLoading)) return <p>error</p>;
+  if (error || (!config && !isLoading)) throw new Error('Failed to fetch config');
 
   return (
     <>
-      <ErrorBoundary fallback={<ErrorMsg />}>
-        <Header treeTitle={title} />
-        <Tree tree={config} />
-      </ErrorBoundary>
+      <Header treeTitle={title} />
+      <Tree nodes={nodes} edges={edges} onClick={onClick} />
     </>
   );
 }

src/components/Error/ErrorMsg.spec.tsx

@@ -1,8 +1,14 @@
 import '@testing-library/jest-dom';
 import { cleanup, render, screen } from '@testing-library/react';
 import { ErrorMsg } from 'components/Error/ErrorMsg';
-import { afterEach, describe, expect, it, vi } from 'vitest';
+import { afterEach, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
 
+beforeAll(() => {
+  vi.stubEnv('VITE_ISSUE_URL', 'https://example.com/issues/new');
+});
+beforeEach(() => {
+  vi.unstubAllEnvs();
+});
 afterEach(() => cleanup());
 
 describe('ErrorMsg', () => {
@@ -19,4 +25,10 @@ describe('ErrorMsg', () => {
     expect(issueLink).toHaveAccessibleName('file a ticket');
     expect(issueLink).toHaveAttribute('href', issueUrl);
   });
+  it('Does not render a link if environment variable is not defined', () => {
+    vi.unstubAllEnvs();
+    render(<ErrorMsg />);
+    const issueLink = screen.queryByRole('link', { name: 'file a ticket' });
+    expect(issueLink).not.toBeInTheDocument();
+  });
 });

src/components/Error/ErrorMsg.tsx

@@ -4,15 +4,18 @@ import styles from './errorMsg.module.css';
  * ErrorMsg displays a simple error message and a link to file a ticket.
  */
 export const ErrorMsg = () => {
+  const issueURL = import.meta.env.VITE_ISSUE_URL;
   return (
     <div className={styles.center}>
       <div className={styles.errorBox}>
         <h1>Something went wrong</h1>
-        <p>
-          <a href={import.meta.env.VITE_ISSUE_URL ?? '#'} className={styles.errorLink}>
-            file a ticket
-          </a>
-        </p>
+        {issueURL && (
+          <p>
+            <a href={issueURL} className={styles.errorLink}>
+              file a ticket
+            </a>
+          </p>
+        )}
       </div>
     </div>
   );

src/components/Error/index.ts

@@ -0,0 +1,2 @@
+export { ErrorMsg } from './ErrorMsg';
+export { ErrorBoundary } from './ErrorBoundary';

src/components/Tree/Tree.spec.tsx

@@ -1,13 +1,15 @@
 import '@testing-library/jest-dom';
 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 { afterEach, describe, expect, it } from 'vitest';
 
 afterEach(() => cleanup());
 
-const TestComponent = ({ tree }: { tree?: DecisionTree }) => {
+const TestComponent = ({ tree }: { tree?: PositionUnawareDecisionTree }) => {
   const myTree = tree || {
     ['1']: {
       id: '1',
@@ -36,14 +38,15 @@ const TestComponent = ({ tree }: { tree?: DecisionTree }) => {
       hidden: false,
     },
   };
-  return <Tree tree={myTree} />;
+  const { nodes, edges, onClick } = useDecisionTree(myTree);
+  return <Tree nodes={nodes} edges={edges} onClick={onClick} />;
 };
 
-describe('Tree UI', () => {
+describe('Tree Component', () => {
   it('renders', () => {
     render(
       <ReactFlowProvider>
-        <TestComponent />
+        <Tree nodes={[]} edges={[]} onClick={() => undefined} />
       </ReactFlowProvider>
     );
     expect(screen.getByTestId('decision-tree')).toBeInTheDocument();
@@ -52,7 +55,7 @@ describe('Tree UI', () => {
     const parentId = '1';
     const childId2 = '2';
     const childId3 = '3';
-    const tree = {
+    const tree: DecisionTree = {
       [parentId]: {
         id: parentId,
         data: {
@@ -91,4 +94,157 @@ describe('Tree UI', () => {
     expect(screen.queryByTestId(`node-${childId2}`)).toBeInTheDocument();
     expect(screen.queryByTestId(`node-${childId3}`)).toBeInTheDocument();
   });
+  it('hides niblings (the descendants of children) on click', () => {
+    const parentId = '1';
+    const siblingWithChild2 = '2';
+    const sibling3 = '3';
+    const grandchildId = '4';
+    const tree: DecisionTree = {
+      [parentId]: {
+        id: parentId,
+        data: {
+          label: 'this is a question?',
+          children: ['2', '3'],
+          expanded: true,
+        },
+        position: { x: 0, y: 0 },
+        type: 'default',
+        hidden: false,
+      },
+      [siblingWithChild2]: {
+        id: siblingWithChild2,
+        data: {
+          label: 'this is an answer?',
+          children: ['4'],
+          expanded: true,
+        },
+        position: { x: 0, y: 0 },
+        type: 'default',
+        hidden: false,
+      },
+      [sibling3]: {
+        id: sibling3,
+        data: { label: 'this is an answer?', children: [] },
+        position: { x: 0, y: 0 },
+        type: 'default',
+        hidden: false,
+      },
+      [grandchildId]: {
+        id: grandchildId,
+        data: { label: 'this is an answer?', children: [] },
+        position: { x: 0, y: 0 },
+        type: 'default',
+        hidden: false,
+      },
+    };
+    render(
+      <ReactFlowProvider>
+        <TestComponent tree={tree} />
+      </ReactFlowProvider>
+    );
+    [parentId, siblingWithChild2, sibling3, grandchildId].forEach((nodeId: string) => {
+      expect(screen.queryByTestId(`node-${nodeId}`)).toBeInTheDocument();
+    });
+    fireEvent.click(screen.queryByTestId(`node-${siblingWithChild2}`)!);
+    expect(screen.queryByTestId(`node-${grandchildId}`)).not.toBeInTheDocument();
+  });
+  it('hides all descendants of expanded nodes on click', () => {
+    const parentId = '1';
+    const childId = '2';
+    const grandchildId = '3';
+    const greatGrandchildId = '4';
+    const tree: DecisionTree = {
+      [parentId]: {
+        id: parentId,
+        data: {
+          label: 'this is a question?',
+          children: ['2'],
+          expanded: true,
+        },
+        position: { x: 0, y: 0 },
+        type: 'default',
+        hidden: false,
+      },
+      [childId]: {
+        id: childId,
+        data: {
+          label: 'this is an answer?',
+          children: ['3'],
+          expanded: true,
+        },
+        position: { x: 0, y: 0 },
+        type: 'default',
+        hidden: false,
+      },
+      [grandchildId]: {
+        id: grandchildId,
+        data: { label: 'this is an answer?', children: ['4'] },
+        position: { x: 0, y: 0 },
+        type: 'default',
+        hidden: false,
+      },
+      [greatGrandchildId]: {
+        id: greatGrandchildId,
+        data: { label: 'this is an answer?', children: [] },
+        position: { x: 0, y: 0 },
+        type: 'default',
+        hidden: false,
+      },
+    };
+    render(
+      <ReactFlowProvider>
+        <TestComponent tree={tree} />
+      </ReactFlowProvider>
+    );
+    [parentId, childId, grandchildId, greatGrandchildId].forEach((nodeId: string) => {
+      expect(screen.queryByTestId(`node-${nodeId}`)).toBeInTheDocument();
+    });
+    fireEvent.click(screen.queryByTestId(`node-${childId}`)!);
+    [parentId, childId].forEach((nodeId) => {
+      expect(screen.queryByTestId(`node-${nodeId}`)).toBeInTheDocument();
+    });
+    [grandchildId, greatGrandchildId].forEach((nodeId) => {
+      expect(screen.queryByTestId(`node-${nodeId}`)).not.toBeInTheDocument();
+    });
+  });
+  it('ignores yes/no clicks', () => {
+    const parentId = '1';
+    const childId = '2';
+    const tree: DecisionTree = {
+      [parentId]: {
+        id: parentId,
+        type: 'BoolNode',
+        data: {
+          label: 'this is a question?',
+          children: ['2'],
+          expanded: true,
+        },
+        position: { x: 0, y: 0 },
+        hidden: false,
+      },
+      [childId]: {
+        id: childId,
+        data: {
+          label: 'this is an answer?',
+          children: [],
+          expanded: true,
+        },
+        position: { x: 0, y: 0 },
+        type: 'default',
+        hidden: false,
+      },
+    };
+    render(
+      <ReactFlowProvider>
+        <TestComponent tree={tree} />
+      </ReactFlowProvider>
+    );
+    [parentId, childId].forEach((nodeId: string) => {
+      expect(screen.queryByTestId(`node-${nodeId}`)).toBeInTheDocument();
+    });
+    fireEvent.click(screen.queryByTestId(`node-${parentId}`)!);
+    [parentId, childId].forEach((nodeId) => {
+      expect(screen.queryByTestId(`node-${nodeId}`)).toBeInTheDocument();
+    });
+  });
 });

src/components/Tree/Tree.tsx

@@ -1,20 +1,27 @@
 import { BoolNode } from 'components/Nodes/BoolNode/BoolNode';
 import { DefaultNode } from 'components/Nodes/DefaultNode/DefaultNode';
-import { useDecisionTree } from 'hooks';
 import React, { useMemo } from 'react';
-import ReactFlow, { Background, BackgroundVariant, Controls, MiniMap } from 'reactflow';
-import { PositionUnawareDecisionTree } from 'store/DagSlice/dagSlice';
+import ReactFlow, {
+  Background,
+  BackgroundVariant,
+  Controls,
+  Edge,
+  MiniMap,
+  NodeMouseHandler,
+} from 'reactflow';
+import { DagNode } from 'store/DagSlice/dagSlice';
 
 export interface TreeProps {
-  tree: PositionUnawareDecisionTree;
+  nodes: DagNode[];
+  edges: Edge[];
+  onClick: NodeMouseHandler;
 }
 
 /**
  * Tree - responsible for rendering the decision tree
  */
-export const Tree = ({ tree }: TreeProps) => {
+export const Tree = ({ nodes, edges, onClick }: TreeProps) => {
   const nodeTypes = useMemo(() => ({ BoolNode: BoolNode, default: DefaultNode }), []);
-  const { nodes, edges, onClick } = useDecisionTree(tree);
 
   return (
     <>