Merge pull request #25 from oslabs-beta/feature/garrett

garrettlchow · web-flow · commit b6a537f51146 · 2024-12-20T19:44:11.000-08:00
Feature/garrett
diff --git a/.travis.yml b/.travis.yml
diff --git a/Dockerfile b/Dockerfile
diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2019 reactime
+Copyright (c) 2025 reactime
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
diff --git a/docker-compose.yml b/docker-compose.yml
diff --git a/src/app/App.tsx b/src/app/App.tsx
@@ -11,7 +11,6 @@ import MainContainer from './containers/MainContainer';
 function App(): JSX.Element {
   return (
     <Router>
-      {/* we wrap our application with the <Router> tag so that all components that are nested will have the react-router context */}
       <MainContainer />
     </Router>
   );
diff --git a/src/app/FrontendTypes.ts b/src/app/FrontendTypes.ts
@@ -399,6 +399,8 @@ export interface AxContainer {
   };
   snapshots: [];
   currLocation: object;
+  setShowTree: any;
+  setShowParagraph: any;
 }
 
 export interface FilteredNode {
diff --git a/src/app/components/Actions/RouteDescription.tsx b/src/app/components/Actions/RouteDescription.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import Slider from 'rc-slider';
 import VerticalSlider from '../TimeTravel/VerticalSlider';
 
 /*
diff --git a/src/app/components/Buttons/Tutorial.tsx b/src/app/components/Buttons/Tutorial.tsx
@@ -7,7 +7,7 @@ import { Component } from 'react';
 import 'intro.js/introjs.css';
 import { TutorialProps, TutorialState, StepsObj } from '../../FrontendTypes';
 import { Button } from '@mui/material';
-const { Steps } = require('intro.js-react'); //Must be required in. This enables compatibility with TS. If imported in, throws ts error of not rendering steps as a class component correctly. The package 'intro.js-react' is small React wrapper around Intro.js. The wrapper provides support for both steps and hints. https://introjs.com/docs/
+const { Steps } = require('intro.js-react');
 import { setCurrentTabInApp, tutorialSaveSeriesToggle } from '../../slices/mainSlice';
 import { HelpCircle } from 'lucide-react';
 
diff --git a/src/app/components/StateRoute/AxMap/Ax.tsx b/src/app/components/StateRoute/AxMap/Ax.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useRef } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import { Group } from '@visx/group';
 import { hierarchy, Tree } from '@visx/hierarchy';
 import { LinearGradient } from '@visx/gradient';
@@ -9,7 +9,7 @@ import { useTooltip, useTooltipInPortal, defaultStyles } from '@visx/tooltip';
 import ToolTipDataDisplay from './ToolTipDataDisplay';
 import { ToolTipStyles } from '../../../FrontendTypes';
 import { localPoint } from '@visx/event';
-import { toggleExpanded, setCurrentTabInApp } from '../../../slices/mainSlice';
+import { toggleExpanded } from '../../../slices/mainSlice';
 
 const defaultMargin = {
   top: 30,
@@ -32,7 +32,7 @@ export type LinkTypesProps = {
 };
 
 export default function AxTree(props) {
-  const { currLocation, axSnapshots, width, height } = props;
+  const { currLocation, axSnapshots, width, height, setShowTree, setShowParagraph } = props;
 
   let margin = defaultMargin;
   let totalWidth = width;
@@ -74,7 +74,7 @@ export default function AxTree(props) {
   };
 
   const [orientation, setOrientation] = useState('horizontal');
-  const [linkType, setLinkType] = useState('step');
+  const [linkType, setLinkType] = useState('diagonal');
   const [stepPercent, setStepPercent] = useState(0.0);
 
   const innerWidth: number = totalWidth - margin.left - margin.right;
@@ -157,6 +157,8 @@ export default function AxTree(props) {
           setOrientation={setOrientation}
           setLinkType={setLinkType}
           setStepPercent={setStepPercent}
+          setShowTree={setShowTree}
+          setShowParagraph={setShowParagraph}
         />
       </div>
 
@@ -408,7 +410,7 @@ export default function AxTree(props) {
             </div>
             <div>
               {/* Ax Node Info below names the tooltip title because of how its passed to the ToolTipDataDisplay container*/}
-              <ToolTipDataDisplay containerName='Ax Node Info' dataObj={tooltipData} />
+              <ToolTipDataDisplay containerName='Accessbility' dataObj={tooltipData} />
             </div>
           </div>
         </TooltipInPortal>
diff --git a/src/app/components/StateRoute/AxMap/AxContainer.tsx b/src/app/components/StateRoute/AxMap/AxContainer.tsx
@@ -11,6 +11,8 @@ const AxContainer = (props: AxContainer) => {
     snapshot, // from 'tabs[currentTab]' object in 'MainContainer'
     snapshots, // from 'tabs[currentTab].snapshotDisplay' object in 'MainContainer'
     currLocation, // from 'tabs[currentTab]' object in 'MainContainer'
+    setShowTree,
+    setShowParagraph,
   } = props;
 
   return (
@@ -28,6 +30,8 @@ const AxContainer = (props: AxContainer) => {
               currLocation={currLocation}
               width={width}
               height={h}
+              setShowTree={setShowTree}
+              setShowParagraph={setShowParagraph}
             />
           );
         }}
diff --git a/src/app/components/StateRoute/AxMap/ToolTipDataDisplay.tsx b/src/app/components/StateRoute/AxMap/ToolTipDataDisplay.tsx
@@ -17,7 +17,7 @@ const colors = {
   base06: '#b9b6b0',
   base07: '#e7e9db',
   base08: '#ef6155',
-  base09: '#824508', //base09 is orange for booleans and numbers. This base in particular fails to match the entered color.
+  base09: '#824508',
   base0A: '#fec418',
   base0B: '#48b685',
   base0C: '#5bc4bf',
diff --git a/src/app/components/StateRoute/AxMap/axLinkControls.tsx b/src/app/components/StateRoute/AxMap/axLinkControls.tsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import { useDispatch } from 'react-redux';
+import { toggleAxTree, setCurrentTabInApp } from '../../../slices/mainSlice';
 
 const AxLinkControls = ({
   orientation,
@@ -7,9 +9,30 @@ const AxLinkControls = ({
   setOrientation,
   setLinkType,
   setStepPercent,
+  setShowTree,
+  setShowParagraph,
 }) => {
+  const dispatch = useDispatch();
+  const disableAxTree = () => {
+    dispatch(toggleAxTree('toggleAxRecord'));
+    dispatch(setCurrentTabInApp('AxTree'));
+    setShowTree(false);
+    setShowParagraph(true);
+  };
+
   return (
     <div className='link-controls'>
+      <div className='accessibility-disable'>
+        <input
+          type='radio'
+          id='disable'
+          name='accessibility'
+          value='disable'
+          onChange={disableAxTree}
+        />
+        <label htmlFor='disable'>Disable</label>
+      </div>
+
       <div className='control-group'>
         <label className='control-label'>Orientation:</label>
         <select
diff --git a/src/app/components/StateRoute/AxMap/useForceUpdate.tsx b/src/app/components/StateRoute/AxMap/useForceUpdate.tsx
diff --git a/src/app/components/StateRoute/History.tsx b/src/app/components/StateRoute/History.tsx
@@ -114,7 +114,6 @@ function History(props: Record<string, unknown>): JSX.Element {
       if (!delta) return 'No state changes';
 
       const changedState = findStateChangeObj(delta);
-      console.log('changed state', formatters.html.format(changedState[0]));
       return changedState.length > 0 ? formatters.html.format(changedState[0]) : 'No state changes';
     } catch (error) {
       console.error('Error in findDiff:', error);
diff --git a/src/app/components/StateRoute/StateRoute.tsx b/src/app/components/StateRoute/StateRoute.tsx
@@ -119,6 +119,8 @@ const StateRoute = (props: StateRouteProps) => {
                     snapshot={snapshot}
                     snapshots={snapshots}
                     currLocation={currLocation}
+                    setShowTree={setShowTree}
+                    setShowParagraph={setShowParagraph}
                   />
                 </div>
               ) : (
diff --git a/src/app/components/StateRoute/WebMetrics/WebMetrics.tsx b/src/app/components/StateRoute/WebMetrics/WebMetrics.tsx
@@ -10,6 +10,7 @@ import { useDispatch } from 'react-redux';
 
 const radialGraph = (props) => {
   const dispatch = useDispatch();
+  console.log('props', props);
   const state = {
     series: [props.series], // series appears to be the scale at which data is displayed based on the type of webMetrics measured.
     options: {
@@ -100,15 +101,9 @@ const radialGraph = (props) => {
     dispatch(setCurrentTabInApp('webmetrics')); // dispatch sent at initial page load allowing changing "immer's" draft.currentTabInApp to 'webmetrics' to facilitate render.
   }, []);
 
-  const optionsCursorTrueWithMargin: OptionsCursorTrueWithMargin = {
-    followCursor: true,
-    shiftX: 20,
-    shiftY: 0,
-  };
-
   return (
     <div className='metric'>
-      <ReactHover options={optionsCursorTrueWithMargin}>
+      <ReactHover>
         <Trigger type='trigger'>
           <div id='chart' className='chart-container'>
             <Charts
@@ -121,7 +116,7 @@ const radialGraph = (props) => {
           </div>
         </Trigger>
         <Hover type='hover'>
-          <div className='metric-tooltip' id='hover-box'>
+          <div className='hover-box'>
             <p>
               <strong>{props.name}</strong>
             </p>
diff --git a/src/app/components/TimeTravel/VerticalSlider.tsx b/src/app/components/TimeTravel/VerticalSlider.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import Slider from 'rc-slider';
 import Tooltip from 'rc-tooltip';
-import { changeSlider, pause } from '../../slices/mainSlice';
+import { changeSlider } from '../../slices/mainSlice';
 import { useDispatch, useSelector } from 'react-redux';
 import { HandleProps, MainSliderProps, MainState, RootState } from '../../FrontendTypes';
 
diff --git a/src/app/containers/ActionContainer.tsx b/src/app/containers/ActionContainer.tsx
@@ -7,7 +7,7 @@ import RouteDescription from '../components/Actions/RouteDescription';
 import DropDown from '../components/Actions/DropDown';
 import ProvConContainer from './ProvConContainer';
 import { ActionContainerProps, CurrentTab, MainState, Obj, RootState } from '../FrontendTypes';
-import { Button, Switch } from '@mui/material';
+import { Button } from '@mui/material';
 import RecordButton from '../components/Actions/RecordButton';
 
 /*
diff --git a/src/app/containers/ButtonsContainer.tsx b/src/app/containers/ButtonsContainer.tsx
@@ -11,7 +11,7 @@ import StatusDot from '../components/Buttons/StatusDot';
 import CloseIcon from '@mui/icons-material/Close';
 import WarningIcon from '@mui/icons-material/Warning';
 import { MainState, RootState } from '../FrontendTypes';
-import { Lock, Unlock, Download, Upload, RefreshCw, X, AlertTriangle } from 'lucide-react';
+import { Lock, Unlock, Download, Upload, RefreshCw } from 'lucide-react';
 
 function exportHandler(snapshots: []): void {
   // function that takes in our tabs[currentTab] object to be exported as a JSON file. NOTE: TypeScript needs to be updated
diff --git a/src/app/containers/MainContainer.tsx b/src/app/containers/MainContainer.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable max-len */
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import ActionContainer from './ActionContainer';
 import TravelContainer from './TravelContainer';
 import ButtonsContainer from './ButtonsContainer';
@@ -31,7 +31,6 @@ function MainContainer(): JSX.Element {
   //JR: check connection status
   const { connectionStatus }: MainState = useSelector((state: RootState) => state.main);
 
-  // JR 12.22.23: so far this log always returns true
   console.log('MainContainer connectionStatus at initialization: ', connectionStatus);
 
   const [actionView, setActionView] = useState(true); // We create a local state 'actionView' and set it to true
diff --git a/src/app/containers/ProvConContainer.tsx b/src/app/containers/ProvConContainer.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { ProvConContainerProps, FilteredNode } from '../FrontendTypes';
 import { JSONTree } from 'react-json-tree';
 
@@ -129,8 +129,8 @@ const ProvConContainer = (props: ProvConContainerProps): JSX.Element => {
     // Only return the node if it has at least one non-empty property
     return isEmptyObject(filteredNode) ? null : filteredNode;
   };
+
   const filteredProviders = filterComponentProperties(contextProvidersOnly);
-  console.log('filtered', filteredProviders);
 
   const parseStringifiedValues = (obj) => {
     if (!obj || typeof obj !== 'object') return obj;
diff --git a/src/app/index.tsx b/src/app/index.tsx
@@ -9,10 +9,7 @@ import { Provider } from 'react-redux'; //imported Provider
 //Updated rendering sytax for React 18
 const root = createRoot(document.getElementById('root'));
 root.render(
-  // Strict mode is for developers to better track best practices
-  // <StrictMode>
   <Provider store={store}>
     <App />
   </Provider>,
-  // </StrictMode>
 );
diff --git a/src/app/slices/mainSlice.ts b/src/app/slices/mainSlice.ts
@@ -210,8 +210,6 @@ export const mainSlice = createSlice({
       const nameFromIndex = findName(action.payload, hierarchy);
       // nameFromIndex is a number based on which jump button is pushed
 
-      console.log('changeSlider to ', action.payload);
-
       port.postMessage({
         action: 'jumpToSnap',
         payload: snapshots[action.payload],
@@ -429,27 +427,6 @@ export const mainSlice = createSlice({
       });
     },
 
-    save: (state, action) => {
-      const { currentTab, tabs } = state;
-
-      const { newSeries, newSeriesName } = action.payload;
-      if (!tabs[currentTab].seriesSavedStatus) {
-        tabs[currentTab] = { ...tabs[currentTab], seriesSavedStatus: 'inputBoxOpen' };
-        return;
-      }
-      // Runs if series name input box is active.
-      // Updates chrome local storage with the newly saved series. Console logging the seriesArray grabbed from local storage may be helpful.
-      if (tabs[currentTab].seriesSavedStatus === 'inputBoxOpen') {
-        let seriesArray: any = localStorage.getItem('project');
-        seriesArray = seriesArray === null ? [] : JSON.parse(seriesArray);
-        newSeries.name = newSeriesName;
-        seriesArray.push(newSeries);
-        localStorage.setItem('project', JSON.stringify(seriesArray));
-        tabs[currentTab] = { ...tabs[currentTab], seriesSavedStatus: 'saved' };
-        return;
-      }
-    },
-
     toggleExpanded: (state, action) => {
       const { tabs, currentTab } = state;
       const snapshot = tabs[currentTab].currLocation.stateSnapshot;
@@ -473,24 +450,6 @@ export const mainSlice = createSlice({
       checkChildren(snapshot);
     },
 
-    deleteSeries: (state) => {
-      const { tabs, currentTab } = state;
-      const allStorage = () => {
-        const keys = Object.keys(localStorage);
-        let i = keys.length;
-        while (i--) {
-          localStorage.removeItem(keys[i]);
-        }
-      };
-      allStorage();
-      Object.keys(tabs).forEach((tab) => {
-        tabs[tab] = {
-          ...tabs[tab],
-        };
-      });
-      tabs[currentTab] = { ...tabs[currentTab], seriesSavedStatus: false };
-    },
-
     disconnected: (state) => {
       state.connectionStatus = false;
     },
@@ -541,9 +500,7 @@ export const {
   tutorialSaveSeriesToggle,
   onHover,
   onHoverExit,
-  save,
   toggleExpanded,
-  deleteSeries,
   disconnected,
   startReconnect,
   endConnect,
diff --git a/src/app/styles/components/_actionComponent.scss b/src/app/styles/components/_actionComponent.scss
@@ -123,5 +123,5 @@
   font-size: 1rem;
   color: #374151;
   width: 100%;
-  padding: 2px 32px 2px 0px;
+  padding: 2px 24px 2px 0px;
 }
diff --git a/src/app/styles/components/_ax.scss b/src/app/styles/components/_ax.scss
diff --git a/src/app/styles/layout/_stateContainer.scss b/src/app/styles/layout/_stateContainer.scss
diff --git a/src/app/styles/main.scss b/src/app/styles/main.scss
diff --git a/src/extension/background.js b/src/extension/background.js
diff --git a/src/extension/build/manifest.json b/src/extension/build/manifest.json

Original file line number	Diff line number	Diff line change
`@@ -399,6 +399,8 @@ export interface AxContainer {`
`399`	`399`	`};`
`400`	`400`	`snapshots: [];`
`401`	`401`	`currLocation: object;`
	`402`	`+ setShowTree: any;`
	`403`	`+ setShowParagraph: any;`
`402`	`404`	`}`
`403`	`405`
`404`	`406`	`export interface FilteredNode {`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,4 @@`
`1`	`1`	`import React from 'react';`
`2`		`-import Slider from 'rc-slider';`
`3`	`2`	`import VerticalSlider from '../TimeTravel/VerticalSlider';`
`4`	`3`
`5`	`4`	`/*`