Merge pull request #12 from oslabs-beta/oliver/ax-time-travel

Oliver/ax time travel

Author: ay7991

src/app/components/StateRoute/Ax.tsx

@@ -4,50 +4,52 @@ import { setCurrentTabInApp } from '../../slices/mainSlice';
 import { useDispatch } from 'react-redux';
 
 const theme = {
-    scheme: 'monokai',
-    author: 'wimer hazenberg (http://www.monokai.nl)',
-    base00: '#272822',
-    base01: '#383830',
-    base02: '#49483e',
-    base03: '#75715e',
-    base04: '#a59f85',
-    base05: '#f8f8f2',
-    base06: '#f5f4f1',
-    base07: '#f9f8f5',
-    base08: '#f92672',
-    base09: '#fd971f',
-    base0A: '#f4bf75',
-    base0B: '#a6e22e',
-    base0C: '#a1efe4',
-    base0D: '#66d9ef',
-    base0E: '#ae81ff',
-    base0F: '#cc6633',
-  };
+  scheme: 'monokai',
+  author: 'wimer hazenberg (http://www.monokai.nl)',
+  base00: '#272822',
+  base01: '#383830',
+  base02: '#49483e',
+  base03: '#75715e',
+  base04: '#a59f85',
+  base05: '#f8f8f2',
+  base06: '#f5f4f1',
+  base07: '#f9f8f5',
+  base08: '#f92672',
+  base09: '#fd971f',
+  base0A: '#f4bf75',
+  base0B: '#a6e22e',
+  base0C: '#a1efe4',
+  base0D: '#66d9ef',
+  base0E: '#ae81ff',
+  base0F: '#cc6633',
+};
 
 const AxTree = (props) => {
-    const {
-        snapshot, // from 'tabs[currentTab]' object in 'MainContainer'
-        snapshots, // from 'tabs[currentTab].snapshotDisplay' object in 'MainContainer'
-        currLocation, // from 'tabs[currentTab]' object in 'MainContainer'
-        axSnapshots,
-      } = props;
+  const {
+    snapshot, // from 'tabs[currentTab]' object in 'MainContainer'
+    snapshots, // from 'tabs[currentTab].snapshotDisplay' object in 'MainContainer'
+    currLocation, // from 'tabs[currentTab]' object in 'MainContainer'
+    axSnapshots,
+  } = props;
 
-      const dispatch = useDispatch();
+  const dispatch = useDispatch();
 
-      useEffect(() => {
-        dispatch(setCurrentTabInApp('AxTree')); // dispatch sent at initial page load allowing changing "immer's" draft.currentTabInApp to 'tree' to facilitate render.
-      }, []);
+  useEffect(() => {
+    dispatch(setCurrentTabInApp('AxTree')); // dispatch sent at initial page load allowing changing "immer's" draft.currentTabInApp to 'tree' to facilitate render.
+  }, []);
 
-    //removing/adding snapshot at beginning of return statement didn't change anything
-    return(
-        <> {snapshot && (
-            <JSONTree 
-            data={axSnapshots}
-            // shouldExpandNodeInitially={() => true}
-            theme = {theme}
-            />
-                )}
-        </>
-    )
-}
-export default AxTree;
+  //removing/adding snapshot at beginning of return statement didn't change anything
+  return (
+    <>
+      {' '}
+      {snapshot && (
+        <JSONTree
+          data={axSnapshots[currLocation.index]}
+          shouldExpandNodeInitially={() => true}
+          theme={theme}
+        />
+      )}
+    </>
+  );
+};
+export default AxTree;

src/app/components/StateRoute/StateRoute.tsx

@@ -87,25 +87,29 @@ const StateRoute = (props: StateRouteProps) => {
           Tree
         </NavLink>
         <NavLink
-        className = {(navData) => 
-          navData.isActive ? 'is-active router-link accessibility-tab' : 'router-link accessibility-tab'
-        }
-        to = '/accessibility'
+          className={(navData) =>
+            navData.isActive
+              ? 'is-active router-link accessibility-tab'
+              : 'router-link accessibility-tab'
+          }
+          to='/accessibility'
         >
           Accessibility
         </NavLink>
       </div>
       <div className='app-content'>
         <Routes>
           <Route
-            path = '/accessibility'
-            element = {<AxTree
-              axSnapshots={axSnapshots}
-              snapshot={snapshot} 
-              snapshots={snapshots} 
-              currLocation={currLocation}/>}
-          >
-          </Route>
+            path='/accessibility'
+            element={
+              <AxTree
+                axSnapshots={axSnapshots}
+                snapshot={snapshot}
+                snapshots={snapshots}
+                currLocation={currLocation}
+              />
+            }
+          ></Route>
           <Route
             path='/history'
             element={

src/backend/models/routes.ts

@@ -103,7 +103,7 @@ export class Routes {
     );
     // If the target route is not found, throw an error
     if (targetIndex === -1) {
-      throw new Error('Error at Routes.navigage: targetIndex is undefined');
+      throw new Error('Error at Routes.navigate: targetIndex is undefined');
     }
     // Calculate the difference in index between the current route and the target route
     const delta: number = targetIndex - this.current;

src/extension/background.js

@@ -93,7 +93,7 @@ function createTabObj(title) {
 // 1. param 'obj' : arg request.payload, which is an object containing a tree from snapShot.ts and a route property
 // 2. param tabObj: arg tabsObj[tabId], which is an object that holds info about a specific tab. Should change the name of tabObj to tabCollection or something
 class HistoryNode {
-  constructor(obj, tabObj) {
+  constructor(tabObj, newStateSnapshot, newAxSnapshot) {
     // continues the order of number of total state changes
     this.index = tabObj.index;
     tabObj.index += 1;
@@ -102,8 +102,8 @@ class HistoryNode {
     this.name = tabObj.currParent;
     // marks from what branch this node is originated
     this.branch = tabObj.currBranch;
-    this.stateSnapshot = obj;
-    this.axSnapshot = tabObj.axSnapshots[tabObj.axSnapshots.length - 1];
+    this.stateSnapshot = newStateSnapshot;
+    this.axSnapshot = newAxSnapshot;
     this.children = [];
   }
 }
@@ -250,9 +250,11 @@ chrome.runtime.onConnect.addListener((port) => {
       case 'import': // create a snapshot property on tabId and set equal to tabs object
         // may need do something like filter payload from stateless
         tabsObj[tabId].snapshots = payload.snapshots; // reset snapshots to page last state recorded
+        tabsObj[tabId].axSnapshots = payload.axSnapshots; // TRYING to import axsnapshots
         // tabsObj[tabId].hierarchy = savedSnapshot.hierarchy; // why don't we just use hierarchy? Because it breaks everything...
         tabsObj[tabId].hierarchy.children = payload.hierarchy.children; // resets hierarchy to last state recorded
         tabsObj[tabId].hierarchy.stateSnapshot = payload.hierarchy.stateSnapshot; // resets hierarchy to last state recorded
+        tabsObj[tabId].hierarchy.axSnapshot = payload.hierarchy.axSnapshot; // TRYING to import hierarchy axsnapshot
         tabsObj[tabId].currLocation = payload.currLocation; // resets currLocation to last state recorded
         tabsObj[tabId].index = payload.index; //reset index to last state recorded
         tabsObj[tabId].currParent = payload.currParent; // reset currParent to last state recorded
@@ -268,10 +270,17 @@ chrome.runtime.onConnect.addListener((port) => {
           // resets hierarchy to page last state recorded
           ...tabsObj[tabId].snapshots[0],
         };
+        tabsObj[tabId].axSnapshots =
+          tabsObj[tabId].axSnapshots[tabsObj[tabId].axSnapshots.length - 1];
+        tabsObj[tabId].hierarchy.axSnapshot = tabsObj[tabId].axSnapshots[0]; //what about other hierarchy properties? Shouldn't those be reset as well?
         tabsObj[tabId].currLocation = tabsObj[tabId].hierarchy; // resets currLocation to page last state recorded
         tabsObj[tabId].index = 1; //reset index
         tabsObj[tabId].currParent = 0; // reset currParent
         tabsObj[tabId].currBranch = 1; // reset currBranch
+        console.log(
+          'background.js: bottom of emptySnap: tabsObj[tabId]:',
+          JSON.parse(JSON.stringify(tabsObj[tabId])),
+        );
         return true; // return true so that port remains open
 
       case 'setPause': // Pause = lock on tab
@@ -405,6 +414,7 @@ chrome.runtime.onMessage.addListener(async (request, sender, sendResponse) => {
       function addAxSnap(snap) {
         const pruned = pruneAxTree(snap);
         tabsObj[tabId].axSnapshots.push(pruned);
+        return pruned;
       }
 
       function attachDebugger(tabId, version) {
@@ -448,8 +458,9 @@ chrome.runtime.onMessage.addListener(async (request, sender, sendResponse) => {
           await attachDebugger(tabId, '1.3');
           await sendDebuggerCommand(tabId, 'Accessibility.enable');
           const response = await sendDebuggerCommand(tabId, 'Accessibility.getFullAXTree');
-          addAxSnap(response.nodes);
+          const addedAxSnap = addAxSnap(response.nodes);
           await detachDebugger(tabId);
+          return addedAxSnap;
         } catch (error) {
           console.error('axRecord debugger command failed:', error);
         }
@@ -458,12 +469,19 @@ chrome.runtime.onMessage.addListener(async (request, sender, sendResponse) => {
       tabsObj[tabId].webMetrics = metrics;
 
       if (!firstSnapshotReceived[tabId]) {
-        await axRecord(tabId);
         firstSnapshotReceived[tabId] = true;
         reloaded[tabId] = false;
         tabsObj[tabId].webMetrics = metrics;
         tabsObj[tabId].snapshots.push(request.payload);
-        sendToHierarchy(tabsObj[tabId], new HistoryNode(request.payload, tabsObj[tabId]));
+        const addedAxSnap = await axRecord(tabId);
+        sendToHierarchy(
+          tabsObj[tabId],
+          new HistoryNode(tabsObj[tabId], request.payload, addedAxSnap),
+        );
+        console.log(
+          'background.js: bottom of recordSnap: tabsObj[tabId]:',
+          JSON.parse(JSON.stringify(tabsObj[tabId])),
+        );
         if (portsArr.length > 0) {
           portsArr.forEach((bg) =>
             bg.postMessage({
@@ -492,8 +510,15 @@ chrome.runtime.onMessage.addListener(async (request, sender, sendResponse) => {
         tabsObj[tabId].snapshots.push(request.payload);
         // INVOKING buildHierarchy FIGURE OUT WHAT TO PASS IN
         if (!tabsObj[tabId][index]) {
-          await axRecord(tabId);
-          sendToHierarchy(tabsObj[tabId], new HistoryNode(request.payload, tabsObj[tabId]));
+          const addedAxSnap = await axRecord(tabId);
+          sendToHierarchy(
+            tabsObj[tabId],
+            new HistoryNode(tabsObj[tabId], request.payload, addedAxSnap),
+          );
+          console.log(
+            'background.js: bottom of recordSnap: tabsObj[tabId]:',
+            JSON.parse(JSON.stringify(tabsObj[tabId])),
+          );
         }
       }