Merge pull request #36 from oslabs-beta/reactime7

Updated manifest and link fiber tests

Author: rtviner

package.json

@@ -15,7 +15,7 @@
   "scripts": {
     "build": "webpack --mode production",
     "dev": "webpack --mode development --watch",
-    "test": "jest --verbose --coverage --watchAll --forceExit",
+    "test": "jest --verbose --coverage",
     "docker-test-lint": "eslint --ext .js --ext .jsx src",
     "docs": "typedoc --json docs --inputFiles src/app --inputFiles src/backend --readme docs/readme.md"
   },

src/app/components/BarGraph.tsx

@@ -56,7 +56,6 @@ const tooltipStyles = {
 const BarGraph = (props) => {
   const [{ tabs, currentTab }, dispatch] = useStoreContext();
   const { width, height, data } = props;
-  console.log('data: ', data)
   const {
     tooltipOpen, tooltipLeft, tooltipTop, tooltipData, hideTooltip, showTooltip,
   } = useTooltip<TooltipData>();
@@ -92,7 +91,6 @@ const BarGraph = (props) => {
   const yMax = height - margin.top - 150;
   snapshotIdScale.rangeRound([0, xMax]);
   renderingScale.range([yMax, 0]);
-  console.log("renderingScale range: ", renderingScale.range([yMax, 0]))
  return (
   <div> 
     <svg ref={containerRef} width={width} height={height}>
@@ -143,7 +141,6 @@ const BarGraph = (props) => {
                     /* TIP TOOL EVENT HANDLERS */
                     // Hides tool tip once cursor moves off the current rect
                     onMouseLeave={() => {
-                      console.log('bar: ', bar)
                       dispatch(onHoverExit(data.componentData[bar.key].rtid),
                       tooltipTimeout = window.setTimeout(() => {
                         hideTooltip()

src/app/components/ComponentMap.tsx

@@ -50,11 +50,13 @@ export default function ComponentMap({
   // This is where we select the last object in the snapshots array from props to allow hierarchy to parse the data for render on the component map per hierarchy layout specifications.
   const lastNode = snapshots.length - 1;
   const data: {} = snapshots[lastNode];
+
   // importing custom hooks for the selection tabs.
   const [layout, setLayout] = useState('cartesian');
   const [orientation, setOrientation] = useState('horizontal');
   const [linkType, setLinkType] = useState('diagonal');
   const [stepPercent, setStepPercent] = useState(10);
+
   // 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();
   // setting the margins for the Map to render in the tab window.
@@ -101,7 +103,6 @@ export default function ComponentMap({
         setStepPercent={setStepPercent}
       />
 
-
       <svg width={totalWidth} height={totalHeight}>
         <LinearGradient id='links-gradient' from='#fd9b93' to='#fe6e9e' />
         <rect width={totalWidth} height={totalHeight} rx={14} fill='#242529'/>
@@ -125,7 +126,6 @@ export default function ComponentMap({
                 ))}
 
                 {tree.descendants().map((node, key) => {
-                  // const width = (node.data.name.length) + 70;
                   const widthFunc = (name) => {
                     let nodeLength = name.length;
                     if (nodeLength < 5) return nodeLength + 40;
@@ -158,12 +158,11 @@ export default function ComponentMap({
                           stroke="#ff6569"
                           onClick={() => {
                             node.data.isExpanded = !node.data.isExpanded;
-                            // console.log(node);
                             forceUpdate();
                           }}
                         />
                       )}
-                      {/* This creates the rectangle boxes for each component and sets it relative position to other parent nodes of the same level.   */}
+                      {/* This creates the rectangle boxes for each component and sets it relative position to other parent nodes of the same level.*/}
                       {node.depth !== 0 && (
                         <rect
                           height={height}
@@ -174,7 +173,7 @@ export default function ComponentMap({
                           stroke={node.children ? '#62d6fb' : '#161521'}
                           strokeWidth={1}
                           strokeDasharray={node.children ? '0' : '2,2'}
-                          strokeOpazcity='1'
+                          strokeOpacity='1'
                           rx={node.children ? 4 : 10}                         
                           onClick={() => {
                             node.data.isExpanded = !node.data.isExpanded;

src/app/components/legend.tsx

@@ -10,8 +10,6 @@ type snapHierarchy = {};
 //type snapHierarchy = {`Record<string, unknown>`};
 export default function LegendKey(props: any) {
   const { hierarchy } = props;
-  // console.log('this is the props' + JSON.stringify(Object.entries(props)))
-  // console.log('this is the props.hierarchy' + JSON.stringify(Object.entries(props.hierarchy)))
   // we are sifting through array of displayNames and sorting them into key value pairs in an object, based on the branch they are on:
   // { '.0': [1.0, 2.0, 3.0, 4.0], '.1': [1.1, 2.1, 3.1,...], '.2': [....]}
   // then we create an array, with each index being strings showing the range of the branch, see below:

src/backend/__tests__/linkFiber.test.tsx

@@ -105,5 +105,4 @@ xdescribe('unit test for linkFiber', () => {
   });
 });
 
-
- 
+SERVER.close();

src/backend/index.ts

@@ -25,9 +25,8 @@ const mode: Mode = {
   jumping: false,
   paused: false,
 };
-// console.log("linkFiberStart in index.ts:" + linkFiberStart);
+
 const linkFiber = linkFiberStart(snapShot, mode);
-// console.log('linkFiber in index.ts: ' + linkFiber);
 const timeJump = timeJumpStart(snapShot, mode);
 
 // function getRouteURL(node: SnapshotNode): string {
@@ -44,7 +43,6 @@ const timeJump = timeJumpStart(snapShot, mode);
 
 // * Event listener for time-travel actions
 window.addEventListener('message', ({ data: { action, payload } }: MsgData) => {
-  // console.log('linkFiber in index.ts: ' + linkFiber);
   switch (action) {
     case 'jumpToSnap':
       timeJump(payload, true); // * This sets state with given payload
@@ -57,21 +55,16 @@ window.addEventListener('message', ({ data: { action, payload } }: MsgData) => {
       mode.paused = payload;
       break;
     case 'onHover':
-      // console.log("curr payload ", payload); 
       if (Array.isArray(payload)) {
-        // console.log('inside array is array if block')
         for (let i = 0; i < payload.length; i + 1) {
-          // console.log("current payload value: ", payload[i]);
           let element = document.getElementById(payload[i])
           if (element !== null) {
              element.style.backgroundColor = '#C0D9D9'; 
              }
         }
       } else {
         let element: HTMLElement = document.querySelector(`.${payload}`);
-        // console.log("element: ", element);
         if (element !== null) {
-          // console.log("element style: ", element.style)
           element.style.backgroundColor = '#C0D9D9'; 
         }
       }
@@ -86,7 +79,6 @@ window.addEventListener('message', ({ data: { action, payload } }: MsgData) => {
         }
       } else {
         let element: HTMLElement = document.querySelector(`.${payload}`);
-        // console.log("element style: ", element.style)
         if (element !== null) {
           element.style.backgroundColor = ''; 
         }

src/backend/linkFiber.ts

@@ -313,7 +313,6 @@ function createTree(
       // We then store them along with the corresponding memoizedState.queue,
       // which includes the dispatch() function we use to change their state.
       const hooksStates = traverseRecoilHooks(memoizedState, memoizedProps);
-      // console.log("hookStates: ", hooksStates);
       hooksStates.forEach((state, i) => {
         hooksIndex = componentActionsRecord.saveNew(
           state.state,
@@ -326,8 +325,7 @@ function createTree(
 
         // }
         // newState.push(state.state);
-          // console.log('newState in Recoil: ', newState);
-          // console.log('state.state: ', state.state);
+
         /* what is this supposed to do??? currently doesn't work?? and makes no sense, newState is an object, how can you push state.state into an object?? */
         // if (newState && newState.hooksState) {
         //   newState.push(state.state);
@@ -416,7 +414,6 @@ function createTree(
             //  remove existing rtid before adding a new one
             if (pointer.stateNode.classList.length > 0) {
               let lastClass = pointer.stateNode.classList[pointer.stateNode.classList.length -1];
-              // console.log("last class: ", lastClass, "linkFiber class? ",    lastClass.includes("fromLinkFiber"));
               if (lastClass.includes("fromLinkFiber")) {
                 pointer.stateNode.classList.remove(lastClass);
               }
@@ -434,7 +431,6 @@ function createTree(
         //  remove existing rtid before adding a new one
         if (currentFiber.child.stateNode.classList.length > 0) {
           let lastClass = currentFiber.child.stateNode.classList[currentFiber.child.stateNode.classList.length -1];
-          // console.log("lastClass: ", lastClass, "linkFiber class? ", lastClass.includes("fromLinkFiber"));
           if (lastClass.includes("fromLinkFiber")) {
             currentFiber.child.stateNode.classList.remove(lastClass);
           }

src/backend/timeJump.ts

@@ -26,7 +26,6 @@ export default (origin, mode) => {
   // Set the state of the origin tree if the component is stateful
   function jump(target, firstCall = false) {
     if (!target) return;
-    //console.log("target in jump: ", target)
     if (target.state === 'stateless') {
       target.children.forEach(child => jump(child));
       return;
@@ -35,7 +34,6 @@ export default (origin, mode) => {
     const component = componentActionsRecord.getComponentByIndex(
       target.componentData.index,
     );
-    // console.log("component in time jump: ", component)
     // check if it is a stateful class component
     // if yes, find the component by its index and assign it to a variable
     // call that components setState method to reset state to the state at the time of the jump snapshot

src/extension/background.js

@@ -185,6 +185,7 @@ chrome.runtime.onMessage.addListener((request, sender) => {
 	const { action, index, name } = request;
 	let isReactTimeTravel = false;
 
+
 	// Filter out tabs that don't have reactime, tabs that dont use react?
 	if (
 		action === 'tabReload' ||

src/extension/build/manifest.json

@@ -12,11 +12,11 @@
   "icons": { "48": "assets/icon48.png", "128": "assets/icon128.png" },
   "content_scripts": [
     {
-      "matches": ["<all_urls>"],
+      "matches": ["http://localhost/*", "https://localhost/*"],
       "js": ["bundles/content.bundle.js"]
     }
   ],
   "web_accessible_resources" : ["bundles/backend.bundle.js"],
-  "permissions": ["contextMenus", "tabs", "activeTab", "<all_urls>"]
+  "permissions": ["contextMenus", "tabs", "activeTab", "http://localhost/*", "https://localhost/*"]
 
 }