correct zoom

Author: aquinojardim

src/app/components/Chart.jsx

@@ -9,6 +9,8 @@
 /* eslint-disable no-param-reassign */
 /* eslint-disable no-use-before-define */
 /* eslint-disable react/no-string-refs */
+
+
 import React, { Component } from 'react';
 import * as d3 from 'd3';
 
@@ -72,9 +74,10 @@ class Chart extends Component {
 
     const tree = d3.tree()
       // this assigns width of tree to be 2pi
-      .size([2 * Math.PI, radius / 1.3])
+      // .size([2 * Math.PI, radius / 1.3])
+      .nodeSize([width/10, height/10])
       // .separation(function (a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; });
-      .separation(function (a, b) { return (a.parent == b.parent ? 1 : 2)});
+      .separation(function (a, b) { return (a.parent == b.parent ? 2 : 2)});
 
     const d3root = tree(hierarchy);
 
@@ -88,7 +91,10 @@ class Chart extends Component {
       .append('path')
       .attr('class', 'link')
       .attr('d', d3.linkRadial()
-        .angle(d => d.x)
+        .angle(d => {
+          console.log('d on line 92 chart', d)
+          return d.x
+        })
         .radius(d => d.y));
 
     const node = g.selectAll('.node')
@@ -105,12 +111,12 @@ class Chart extends Component {
       });
 
     node.append('circle')
-      .attr('r', 5)
+      .attr('r', 15)
       .on('mouseover', function (d) {
         d3.select(this)
           .transition(100)
           .duration(20)
-          .attr('r', 10);
+          .attr('r', 25);
 
         tooltipDiv.transition()
           .duration(50)
@@ -125,7 +131,7 @@ class Chart extends Component {
         d3.select(this)
           .transition()
           .duration(300)
-          .attr('r', 5);
+          .attr('r', 15);
 
         tooltipDiv.transition()
           .duration(400)
@@ -134,14 +140,14 @@ class Chart extends Component {
     node
       .append('text')
       // adjusts the y coordinates for the node text
-      .attr('dy', '-1.5em')
+      .attr('dy', '0.5em')
       .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 ? -4 : 5;
+        return d.x < Math.PI === !d.children ? 0 : 0;
       })
-      .attr('text-anchor', function (d) { return d.x < Math.PI === !d.children ? 'start' : 'end'; })
+      .attr('text-anchor', 'middle')
       // this arranges the angle of the text
       .attr('transform', function (d) { return 'rotate(' + (d.x < Math.PI ? d.x - Math.PI / 2 : d.x + Math.PI / 2) * 1 / Math.PI + ')'; })
       .text(function (d) {
@@ -159,7 +165,7 @@ class Chart extends Component {
 
     chartContainer.call(d3.zoom()
       .extent([[0, 0], [width, height]])
-      .scaleExtent([1, 8])
+      .scaleExtent([0, 8]) //scaleExtent([minimum scale factor, maximum scale factor])
       .on('zoom', zoomed));
 
     function dragstarted() {

src/app/components/StateRoute.jsx

@@ -10,7 +10,7 @@ import Tree from './Tree';
 // eslint-disable-next-line react/prop-types
 
 const StateRoute = ({ snapshot, hierarchy }) => {
-  // gabi :: the hierarchy get set on the first click in the page, when page in refreshed we don't have a hierarchy so we need to check if hierarchy was inicialize involk render chart  
+  // gabi :: the hierarchy get set on the first click in the page, when page in refreshed we don't have a hierarchy so we need to check if hierarchy was initialize involk render chart  
   const renderChart = () =>{ 
     if (hierarchy){
       return <Chart hierarchy={hierarchy} />
@@ -20,7 +20,7 @@ const StateRoute = ({ snapshot, hierarchy }) => {
     }
   }
 
-  // gabi :: the snapshot get set on the first click in the page, when page in refreshed we don't have a hierarchy so we need to check if snapshot was inicialize involk render chart 
+  // gabi :: the snapshot get set on the first click in the page, when page in refreshed we don't have a hierarchy so we need to check if snapshot was initialize involk render chart 
   const renderTree = () => { 
     if (hierarchy){
       return <Tree snapshot={snapshot} />

src/app/containers/ActionContainer.jsx

@@ -35,7 +35,7 @@ function ActionContainer() {
         })
       }
     }
-    // gabi :: the hierarchy get set on the first click in the page, when page in refreshed we don't have a hierarchy so we need to check if hierarchy was inicialize involk displayArray to display the hierarchy  
+    // gabi :: the hierarchy get set on the first click in the page, when page in refreshed we don't have a hierarchy so we need to check if hierarchy was initialize involk displayArray to display the hierarchy  
     if (hierarchy) displayArray(hierarchy)
     // console.log('this is hierarchyArr', hierarchyArr)
 

src/app/containers/HeadContainer.jsx

@@ -4,6 +4,7 @@ import SwitchAppDropdown from '../components/SwitchApp';
 function HeadContainer() {
   return (
     <div className="head-container">
+      <img src ="https://i.imgur.com/19jt84a.png" height= "30px"/>
       <SwitchAppDropdown />
     </div>
   );

src/app/containers/logo4.png

@@ -112,13 +112,13 @@ export default (state, action) => produce(state, draft => {
       tabs[currentTab].playing = false;
       // gabi :: activate empty mode
       tabs[currentTab].mode.empty = true 
-      // gabi :: record snapshot of page inicial state
-      tabs[currentTab].inicialSnapshot.push(tabs[currentTab].snapshots[0]);
+      // gabi :: record snapshot of page initial state
+      tabs[currentTab].initialSnapshot.push(tabs[currentTab].snapshots[0]);
       // gabi :: reset snapshots to page last state recorded
       tabs[currentTab].snapshots = [ tabs[currentTab].snapshots[tabs[currentTab].snapshots.length - 1] ];
-      // gabi :: record hierarchy of page inicial state
-      tabs[currentTab].inicialHierarchy = {...tabs[currentTab].hierarchy};
-      tabs[currentTab].inicialHierarchy.children = [];
+      // gabi :: record hierarchy of page initial state
+      tabs[currentTab].initialHierarchy = {...tabs[currentTab].hierarchy};
+      tabs[currentTab].initialHierarchy.children = [];
       // gabi :: reset hierarchy
       tabs[currentTab].hierarchy.children = [];
       // gabi :: reset hierarchy to page last state recorded
@@ -222,6 +222,7 @@ export default (state, action) => produce(state, draft => {
         draft.currentTab = action.payload.tabId;
         break;
       }
+      break;
     }
     case types.DELETE_TAB: {
       delete draft.tabs[action.payload];

src/app/reducers/mainReducer.js

@@ -13,14 +13,16 @@ body {
   fill: #5249f7;
 }
 
-.node circle:hover {
-  fill: #9cf4df;
-}
+/* .node circle:hover {
+  fill: #320a5c;
+} */
 
 .node text {
   font-size: 10px;
   font-family: "Overpass Mono", monospace;
 }
+
+
 /* this represents text for leaf nodes aka the ones with no children */
 .node--leaf {
   fill: #71e9e1;
@@ -34,7 +36,7 @@ body {
 /*   modifies text of parent nodes (has children) */
 .node--internal text {
   fill: #fae6e4;
-  font-size: 11px;
+  font-size: 10px;
 }
 .link {
   fill: none;

src/app/styles/components/d3graph.css

@@ -17,8 +17,8 @@ function createTabObj(title) {
     title,
     // snapshots is an array of ALL state snapshots for the reactime tab working on a specific user application
     snapshots: [],
-    // gabi :: record inicial snapshot to refresh page in case empty function is called 
-    inicialSnapshot: [],
+    // gabi :: record initial snapshot to refresh page in case empty function is called 
+    initialSnapshot: [],
     // gabi and nate :: index here is the tab index that show total amount of state changes 
     index: 0, 
     //* this is our pointer so we know what the current state the user is checking (this accounts for time travel aka when user clicks jump on the UI)
@@ -29,8 +29,8 @@ function createTabObj(title) {
     currBranch: 0,
     //* inserting a new property to build out our hierarchy dataset for d3
     hierarchy: null,
-    // gabi :: record inicial hierarchy to refresh page in case empty function is called 
-    inicialHierarchy: null,
+    // gabi :: record initial hierarchy to refresh page in case empty function is called 
+    initialHierarchy: null,
     mode: {
       persist: false,
       locked: false,
@@ -140,13 +140,13 @@ chrome.runtime.onConnect.addListener(port => {
       case 'emptySnap':
         // gabi :: activate empty mode
         tabsObj[tabId].mode.empty = true 
-        // gabi :: record snapshot of page inicial state
-        tabsObj[tabId].inicialSnapshot.push(tabsObj[tabId].snapshots[0]);
+        // gabi :: record snapshot of page initial state
+        tabsObj[tabId].initialSnapshot.push(tabsObj[tabId].snapshots[0]);
         // gabi :: reset snapshots to page last state recorded
         tabsObj[tabId].snapshots = [tabsObj[tabId].snapshots[tabsObj[tabId].snapshots.length - 1] ];
-        // gabi :: record hierarchy of page inicial state
-        tabsObj[tabId].inicialHierarchy = {...tabsObj[tabId].hierarchy};
-        tabsObj[tabId].inicialHierarchy.children = [];
+        // gabi :: record hierarchy of page initial state
+        tabsObj[tabId].initialHierarchy = {...tabsObj[tabId].hierarchy};
+        tabsObj[tabId].initialHierarchy.children = [];
         // gabi :: reset hierarchy
         tabsObj[tabId].hierarchy.children = [];
         // gabi :: reset hierarchy to page last state recorded
@@ -214,17 +214,17 @@ chrome.runtime.onMessage.addListener((request, sender) => {
       // dont remove snapshots if persisting
       if (!persist) {
         if(empty){        
-          // gabi :: reset snapshots to page inicial state recorded when empted 
-          tabsObj[tabId].snapshots = tabsObj[tabId].inicialSnapshot;
-          // gabi :: reset hierarchy to page inicial state recorded when empted 
-          tabsObj[tabId].hierarchy = tabsObj[tabId].inicialHierarchy
+          // gabi :: reset snapshots to page initial state recorded when empted 
+          tabsObj[tabId].snapshots = tabsObj[tabId].initialSnapshot;
+          // gabi :: reset hierarchy to page initial state recorded when empted 
+          tabsObj[tabId].hierarchy = tabsObj[tabId].initialHierarchy;
         } else {
-          // gabi :: reset snapshots to page inicial state
+          // gabi :: reset snapshots to page initial state
           tabsObj[tabId].snapshots.splice(1);
-          // gabi :: reset hierarchy to page inicial state
+          // gabi :: reset hierarchy to page initial state
           tabsObj[tabId].hierarchy.children = [];
         }
-      // gabi :: reset currLocation to page inicial state
+      // gabi :: reset currLocation to page initial state
       tabsObj[tabId].currLocation = tabsObj[tabId].hierarchy;
       // gabi :: reset index
       tabsObj[tabId].index = 0;