Merge pull request #6 from oslabs-beta/freya/filter

reverse filter

Author: rxlina

src/app/components/ComponentMap.tsx

@@ -17,27 +17,28 @@ import getLinkComponent from './getLinkComponent';
 import { onHover, onHoverExit } from '../actions/actions';
 import { useStoreContext } from '../store';
 
-const root = hierarchy({
-  name: 'root',
-  children: [
-    { name: 'child #1' },
-    {
-      name: 'child #2',
-      children: [
-        { name: 'grandchild #1' },
-        { name: 'grandchild #2' },
-        { name: 'grandchild #3' },
-      ],
-    },
-  ],
-});
+// const root = hierarchy({
+//   name: 'root',
+//   children: [
+//     { name: 'child #1' },
+//     {
+//       name: 'child #2',
+//       children: [
+//         { name: 'grandchild #1' },
+//         { name: 'grandchild #2' },
+//         { name: 'grandchild #3' },
+//       ],
+//     },
+//   ],
+// });
+
 interface TreeNode {
   name: string;
   isExpanded?: boolean;
   children?: TreeNode[];
 }
 
-type HierarchyNode = HierarchyPointNode<TreeNode>;
+// type HierarchyNode = HierarchyPointNode<TreeNode>;
 
 const defaultMargin = {
   top: 30, left: 30, right: 55, bottom: 70,
@@ -69,6 +70,7 @@ export default function ComponentMap({
   const [stepPercent, setStepPercent] = useState(10);
   const [tooltip, setTooltip] = useState(false);
   const [expanded, setExpanded] = useState();
+  const [selectedNode, setSelectedNode] = useState('root');
 
   // Declared this variable and assigned it to the useForceUpdate function that forces a state to change causing that component to re-render and display on the map
   const forceUpdate = useForceUpdate();
@@ -131,6 +133,36 @@ export default function ComponentMap({
     return `${time} ms `;
   };
 
+  //put all nodes into an array
+  const nodeList = [];
+
+  const collectNodes = (node) => {
+    nodeList.splice(0, nodeList.length);
+    nodeList.push(node);
+    for (let i = 0; i < nodeList.length; i++) {
+      const cur = nodeList[i];
+      if (cur.children && cur.children.length > 0) {
+        for (let child of cur.children) {
+          nodeList.push(child);
+        }
+      }
+    }
+    console.log('NODELIST in ComponentMap: ', nodeList);
+  }
+  collectNodes(snapshots[lastNode]);
+
+  //find the node that has been selected and use it as the root
+  const startNode = null;
+  const findSelectedNode = () => {
+    console.log(selectedNode);
+    for (let node of nodeList) {
+      if (node.name === selectedNode) {
+        startNode = node;
+      }
+    }
+  }
+  findSelectedNode();
+
   // controls for the map
   const LinkComponent = getLinkComponent({ layout, linkType, orientation });
   return totalWidth < 10 ? null : (
@@ -140,18 +172,22 @@ export default function ComponentMap({
         orientation={orientation}
         linkType={linkType}
         stepPercent={stepPercent}
+        snapShots={snapshots[lastNode]}
+        selectedNode={selectedNode}
         setLayout={setLayout}
         setOrientation={setOrientation}
         setLinkType={setLinkType}
         setStepPercent={setStepPercent}
+        setSelectedNode={setSelectedNode}
       />
 
       <svg ref={containerRef} width={totalWidth} height={totalHeight}>
         <LinearGradient id="links-gradient" from="#fd9b93" to="#fe6e9e" />
         <rect width={totalWidth} height={totalHeight} rx={14} fill="#242529" />
         <Group top={margin.top} left={margin.left}>
+          {console.log('This is the SelectedNode:', selectedNode)}
           <Tree
-            root={hierarchy(data, d => (d.isExpanded ? null : d.children))}
+            root={hierarchy(startNode || data, d => (d.isExpanded ? null : d.children))}
             size={[sizeWidth, sizeHeight]}
             separation={(a, b) => (a.parent === b.parent ? 1 : 0.5) / a.depth}
           >
@@ -195,8 +231,10 @@ export default function ComponentMap({
                   // mousing controls & Tooltip display logic
                   const handleMouseOver = event => {
                     () => dispatch(onHover(node.data.rtid));
-                    console.log('line 197', event.target.ownerSVGElement);
-                    console.log('line 199: ', node);
+                    console.log('line 197 event.target', event.target.ownerSVGElement);
+                    console.log('line 199 This is DATA: ', data);
+                    console.log('line 200 This is TREE: ', tree);
+                    console.log('line 201 This is NODE: ', node);
                     const coords = localPoint(
                       event.target.ownerSVGElement,
                       event,

src/app/components/LinkControls.tsx

@@ -1,3 +1,4 @@
+import { List } from '@material-ui/core';
 import React from 'react';
 // Font size of the Controls label and Dropdowns
 const controlStyles = {
@@ -19,24 +20,52 @@ type Props = {
   orientation: string;
   linkType: string;
   stepPercent: number;
+  selectedNode: string;
   setLayout: (layout: string) => void;
   setOrientation: (orientation: string) => void;
   setLinkType: (linkType: string) => void;
   setStepPercent: (percent: number) => void;
+  setSelectedNode: (selectedNode: string) => void;
+  snapShots: [];
 };
 
+//use BFS to put all the nodes under snapShots(which is the tree node) into an array
+const nodeList = [];
+
+const collectNodes = (node) => {
+  nodeList.splice(0, nodeList.length);
+  nodeList.push(node);
+  for (let i = 0; i < nodeList.length; i++) {
+    const cur = nodeList[i];
+    if (cur.children && cur.children.length > 0) {
+      for (let child of cur.children) {
+        nodeList.push(child);
+      }
+    }
+  }
+  console.log('NODELIST looks like: ', nodeList);
+
+}
+
 export default function LinkControls({
   layout,
   orientation,
   linkType,
   stepPercent,
+  selectedNode,
   setLayout,
   setOrientation,
   setLinkType,
   setStepPercent,
+  setSelectedNode,
+  snapShots,
 }: Props) {
+
+  collectNodes(snapShots);
+
   return (
     <div style={controlStyles}>
+
       {/* Controls for the layout selection */}
       <label>Layout:</label>
       &nbsp;
@@ -50,6 +79,7 @@ export default function LinkControls({
         <option value="polar">Polar</option>
       </select>
       &nbsp;&nbsp;
+
       {/* Controls for the Orientation selection, this dropdown will be disabled when the polar layout is selected as it is not needed */}
       <label>Orientation:</label>
       &nbsp;
@@ -64,6 +94,7 @@ export default function LinkControls({
         <option value="vertical">Vertical</option>
       </select>
       &nbsp;&nbsp;
+
       {/* Controls for the link selections. */}
       <label>Link:</label>
       &nbsp;
@@ -77,23 +108,44 @@ export default function LinkControls({
         <option value="step">Step</option>
         <option value="line">Line</option>
       </select>
+
+      {/* Controls for the select selections. */}
+      <label>Select:</label>
+      &nbsp;
+      <select
+        onClick={e => e.stopPropagation()}
+        onChange={e => {
+          const val = e.target.value;
+          console.log("You selected: ", val);
+          setSelectedNode(e.target.value)
+        }}
+        value={selectedNode}
+        style={dropDownStyle}
+      >
+        {console.log("snapShots: ", snapShots)}
+
+        {nodeList.map(node => (
+          <option value={node.name}>{node.name}</option>
+        ))}
+      </select>
+
       {/* This is the slider control for the step option */}
       {linkType === 'step' && layout !== 'polar' && (
-      <>
-        &nbsp;&nbsp;
-        <label>Step:</label>
-        &nbsp;
-        <input
-          onClick={e => e.stopPropagation()}
-          type="range"
-          min={0}
-          max={1}
-          step={0.1}
-          onChange={e => setStepPercent(Number(e.target.value))}
-          value={stepPercent}
-          disabled={linkType !== 'step' || layout === 'polar'}
-        />
-      </>
+        <>
+          &nbsp;&nbsp;
+          <label>Step:</label>
+          &nbsp;
+          <input
+            onClick={e => e.stopPropagation()}
+            type="range"
+            min={0}
+            max={1}
+            step={0.1}
+            onChange={e => setStepPercent(Number(e.target.value))}
+            value={stepPercent}
+            disabled={linkType !== 'step' || layout === 'polar'}
+          />
+        </>
       )}
     </div>
   );

src/backend/tree.ts

@@ -53,17 +53,17 @@ class Tree {
 
   recoilDomNode: any;
 
-  constructor(state: string | {}, name = 'nameless', componentData: {} = {}, rtid: any = null, recoilDomNode:any = null) {
+  constructor(state: string | {}, name = 'nameless', componentData: {} = {}, rtid: any = null, recoilDomNode: any = null) {
     this.state = state === 'root' ? 'root' : serializeState(state);
-    this.name = name;
+    this.name = name === "" ? rtid : name;
     this.componentData = componentData ? JSON.parse(JSON.stringify(componentData)) : {};
     this.children = [];
     this.parent = null; // ref to parent so we can add siblings
     this.rtid = rtid;
     this.recoilDomNode = recoilDomNode;
   }
 
-  addChild(state: string | {}, name: string, componentData: {}, rtid: any, recoilDomNode:any): Tree {
+  addChild(state: string | {}, name: string, componentData: {}, rtid: any, recoilDomNode: any): Tree {
     const newChild: Tree = new Tree(state, name, componentData, rtid, recoilDomNode);
     newChild.parent = this;
     this.children.push(newChild);