adjusting text spatial arrangement

Author: nusanam

.gitignore

@@ -8,3 +8,4 @@ coverage
 src/extension/build.zip
 src/extension/build.crx
 src/extension/build/key.pem
+package/__tests__

package/linkFiber.js

@@ -4,11 +4,12 @@
 // links component state tree to library
 // changes the setState method to also update our snapshot
 const Tree = require('./tree');
-const astParser = require('./astParser.js');
+const astParser = require('./astParser'); 
+const { saveState } = require('./masterState'); 
 
 module.exports = (snap, mode) => {
   let fiberRoot = null;
-  let astHooks; 
+  let astHooks;
 
   function sendSnapshot() {
     // don't send messages while jumping or while paused
@@ -45,14 +46,15 @@ module.exports = (snap, mode) => {
 
   function changeUseState(component) {
     if (component.queue.dispatch.linkFiberChanged) return;
-    // store the original dispatch function definition 
-    const oldDispatch = component.queue.dispatch.bind(component.queue);; 
+    // store the original dispatch function definition  
+    const oldDispatch = component.queue.dispatch.bind(component.queue);
     // redefine the dispatch function so we can inject our code
     component.queue.dispatch = (fiber, queue, action) => {
       // don't do anything if state is locked
       if (mode.locked && !mode.jumping) return; 
-      oldDispatch(fiber, queue, action);
+      //oldDispatch(fiber, queue, action);
       setTimeout(() => {
+        oldDispatch(fiber, queue, action);
         updateSnapShotTree();
         sendSnapshot();
       }, 100);
@@ -68,9 +70,10 @@ module.exports = (snap, mode) => {
     let index = 0; 
     astHooks = Object.values(astHooks); 
     // while memoizedState is truthy, save the value to the object
-    while (memoizedState && astHooks) {
+    while (memoizedState) {
       changeUseState(memoizedState);
-      memoized[astHooks[index]] = memoizedState.memoizedState;
+      //memoized[astHooks[index]] = memoizedState.memoizedState;
+      memoized[astHooks[index]] = memoizedState.memoizedState; 
       // Reassign memoizedState to its next value
       memoizedState = memoizedState.next;
       // Increment the index by 2
@@ -98,7 +101,7 @@ module.exports = (snap, mode) => {
       changeSetState(stateNode);
     }
     // Check if the component uses hooks
-    if (memoizedState && memoizedState.hasOwnProperty('baseState')) {
+    if (memoizedState && memoizedState.hasOwnProperty('baseState')) { 
       // Add a traversed property and initialize to the evaluated result 
       // of invoking traverseHooks, and reassign nextTree
       memoizedState.traversed = traverseHooks(memoizedState);
@@ -111,7 +114,8 @@ module.exports = (snap, mode) => {
 
     return tree;
   }
-
+  // runs when page initially loads 
+  // but skips 1st hook click 
   function updateSnapShotTree() {
     const { current } = fiberRoot;
     snap.tree = createTree(current);
@@ -125,9 +129,12 @@ module.exports = (snap, mode) => {
     // only assign internal rootp if it actually exists
     fiberRoot = _internalRoot || _reactRootContainer;
     // If hooks are implemented, traverse through the source code 
-    if (entryFile) astHooks = astParser(entryFile);
-
-    updateSnapShotTree();
+    // Save the getter/setter combo for timeJump
+    if (entryFile) {
+      astHooks = astParser(entryFile);
+      saveState(astHooks); 
+    }
+    updateSnapShotTree(); 
     // send the initial snapshot once the content script has started up
     window.addEventListener('message', ({ data: { action } }) => {
       if (action === 'contentScriptStarted') sendSnapshot();

package/masterState.js

@@ -0,0 +1,13 @@
+// Export two functions that either saves the AST state object into an array
+// or returns the array for use
+const masterState = [];
+
+module.exports = {
+  saveState: state => {
+    for (const key in state) {
+      masterState.push(state[key]);
+    }
+    return masterState; 
+  },
+  returnState: () => masterState
+};

package/timeJump.js

@@ -1,5 +1,7 @@
 /* eslint-disable no-param-reassign */
 // traverses given tree by accessing children through coords array
+const { returnState } = require('./masterState'); 
+
 function traverseTree(tree, coords) {
   let curr = tree;
   coords.forEach(coord => {
@@ -21,13 +23,16 @@ module.exports = (origin, mode) => {
         });
       });
     } else {
-      // if component uses hooks
+      // if component uses hooks, traverse through the memoize tree
       let current = originNode.component;
-      let index = 1;
-      // Iterate through the memoized tree
+      let index = 0;
+      const hooks = returnState(); 
+      // Iterate through the memoize tree
       while (current) {
-        current.queue.dispatch(target.state[`state${index++}`]);
+        current.queue.dispatch(target.state[hooks[index]]);
+        // Reassign the current value
         current = current.next;
+        index += 2;
       }
     }
   }

src/app/components/Chart.jsx

@@ -39,8 +39,8 @@ class Chart extends Component {
 
   maked3Tree() {
     this.removed3Tree();
-    let width = 960;
-    let height = 1060;
+    let width = 900;
+    let height = 1000;
     let chartContainer = d3.select(this.chartRef.current)
       .append('svg') // chartContainer is now pointing to svg
       .attr('width', width)
@@ -96,7 +96,7 @@ class Chart extends Component {
       .attr("x", function (d) {
         // this positions how far the text is from leaf nodes (ones without children)
         // negative number before the colon moves the text of rightside nodes, positive number moves the text for the leftside nodes
-        return d.x < Math.PI === !d.children ? -20 : 20;
+        return d.x < Math.PI === !d.children ? -20 : 23;
       })
       .attr("text-anchor", function (d) { return d.x < Math.PI === !d.children ? "start" : "end"; })
       // this arranges the angle of the text

src/app/components/SwitchState.jsx

@@ -1,31 +1,35 @@
-import React from 'react'; 
-import Select from 'react-select'; 
+// import React from 'react'; 
+// import Select from 'react-select'; 
+// import Action from './Action'; 
+// import { useStoreContext } from '../store'; 
 
-// SwitchStateDropdown should display options including all 
-// and specific states being used
-    // TODO: Need to get the getter name (for functional components) 
-    // and state name for stateful components 
-const SwitchStateDropdown = () => {
-    // Requirements: 
-        // Should be able to filter the Actions by the name of the state being changed
-        // Should consider how to import the state names being changed 
-        // Should display the "All state", as well as specific state names as the options
-        // When clicked on "All state" >> should display all Actions
-        // When clicked on a specific "state" >> should only display Actions corresponding to the state
+// // SwitchStateDropdown should display options including all 
+// // and specific states being used
+//     // TODO: Need to get the getter name (for functional components) 
+//     // and state name for stateful components 
+// const SwitchStateDropdown = () => {
+//   const [{ tabs, currentTab}, dispatch] = useStoreContext();
+//   const { snapshots } = tabs[currentTab]; 
+//     // Requirements: 
+//     // Should be able to filter the Actions by the name of the state being changed
+//         // Should consider how to import the state names being changed 
+//         // Should display the "All state", as well as specific state names as the options
+//         // When clicked on "All state" >> should display all Actions
+//         // When clicked on a specific "state" >> should only display Actions corresponding to the state
 
-    const sampleDropdown = [
-        {label: 'Overview'}, 
-        {label: 'setUsername'}, 
-        {label: 'setPassword'}
-    ]; 
+//     // const sampleDropdown = [
+//     //     {label: 'Overview'}, 
+//     //     {label: 'setUsername'}, 
+//     //     {label: 'setPassword'}
+//     // ]; 
 
-    return (
-        <Select 
-        className="state-dropdown" 
-        placeholder="Choose your state" 
-        options={sampleDropdown}
-        />
-    )
-}
+//   return (
+//     <Select 
+//     className="state-dropdown" 
+//     placeholder="Choose your state" 
+//     options={sampleDropdown}
+//     />
+//     )
+// }
 
-export default SwitchStateDropdown; 
+// export default SwitchStateDropdown; 

src/app/containers/ActionContainer.jsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/no-array-index-key */
 import React from 'react';
-import SwitchStateDropdown from '../components/SwitchState'; 
+//import SwitchStateDropdown from '../components/SwitchState'; 
 import Action from '../components/Action';
 
 import { emptySnapshots } from '../actions/actions';
@@ -33,7 +33,6 @@ function ActionContainer() {
         <button className="empty-button" onClick={() => dispatch(emptySnapshots())} type="button">
           Empty
         </button>
-        <SwitchStateDropdown />
       </div>
       <div>{actionsArr}</div>
     </div>

src/app/reducers/mainReducer.js

@@ -16,6 +16,7 @@ export default (state, action) => produce(state, draft => {
         port.postMessage({
           action: 'jumpToSnap',
           payload: snapshots[newIndex],
+          index: newIndex,
           tabId: currentTab,
         });
         clearInterval(intervalId);
@@ -31,6 +32,7 @@ export default (state, action) => produce(state, draft => {
 
         port.postMessage({
           action: 'jumpToSnap',
+          index: newIndex,
           payload: snapshots[newIndex],
           tabId: currentTab,
         });
@@ -55,6 +57,7 @@ export default (state, action) => produce(state, draft => {
       port.postMessage({
         action: 'jumpToSnap',
         payload: snapshots[action.payload],
+        index: action.payload,
         tabId: currentTab,
       });
       tabs[currentTab].sliderIndex = action.payload;

src/app/styles/components/_d3Tree.css renamed to src/app/styles/components/_d3TreeLEGACY.css

@@ -1,4 +1,8 @@
 /*   this represents leaf nodes aka no children */
+.node {
+    cursor: pointer;
+}
+
 .node circle {
   fill: #2e3634;
 }
@@ -18,5 +22,5 @@
   fill: none;
   stroke: #bfe3da;
   stroke-opacity: 0.2;
-  stroke-width: 50px;
+  stroke-width: 10px;
 }