Front-end pseudocode 90%+ complete, beginning work on processing data for BarGraphComparisonActions

Author: EivindDelFierro

src/app/components/StateRoute/History.tsx

@@ -24,8 +24,8 @@ const defaultMargin: DefaultMargin = {
 // below we destructure the props
 function History(props: Record<string, unknown>): JSX.Element {
   const {
-    width: totalWidth,
-    height: totalHeight,
+    width: totalWidth, // from ParentSize provided in StateRoute
+    height: totalHeight, // from ParentSize provided in StateRoute
     margin = defaultMargin,
     hierarchy, // from 'tabs[currentTab]' object in 'MainContainer'
     dispatch, // from useStoreContext in 'StateRoute'

src/app/components/StateRoute/PerformanceVisx/BarGraphComparison.tsx

@@ -18,14 +18,7 @@ import { useTheme } from '@mui/material/styles';
 import { Button } from '@mui/material';
 import { onHover, onHoverExit, deleteSeries, setCurrentTabInApp } from '../../../actions/actions';
 import { useStoreContext } from '../../../store';
-import {
-  snapshot,
-  TooltipData,
-  Margin,
-  BarGraphComparisonProps,
-  ActionObj,
-  Series,
-} from '../../../FrontendTypes';
+import { snapshot, TooltipData, Margin, BarGraphComparisonProps, ActionObj, Series } from '../../../FrontendTypes';
 
 /* DEFAULTS */
 const margin: Margin = {
@@ -49,8 +42,8 @@ const tooltipStyles = {
 const BarGraphComparison = (props: BarGraphComparisonProps): JSX.Element => {
   const [{ tabs, currentTab }, dispatch] = useStoreContext();
   const {
-    width, // from stateRoute container
-    height, // from stateRoute container
+    width, // from ParentSize provided in StateRoute
+    height, // from ParentSize provided in StateRoute
     data, // Acquired from getPerfMetrics(snapshots, getSnapshotIds(hierarchy)) in 'PerformanceVisx'
     comparison, // result from invoking 'allStorage' in 'PerformanceVisx'
     setSeries, // setter function to update the state located in 'PerfomanceVisx'

src/app/components/StateRoute/PerformanceVisx/BarGraphComparisonActions.tsx

@@ -40,8 +40,8 @@ const tooltipStyles = {
 const BarGraphComparisonActions = (props: BarGraphComparisonAction) => {
   const [dispatch] = useStoreContext(); // used to get the dispatch function from our storeContext
   const {
-    width, // from stateRoute container
-    height, // from stateRoute container
+    width, // from ParentSize provided in StateRoute
+    height, // from ParentSize provided in StateRoute
     data, 
     comparison, // returned value from invoking 'allStorage()' in 'PerformanceVisx' which is an array of objects
     setSeries, // setter function to update the state located in 'PerfomanceVisx'

src/app/components/StateRoute/PerformanceVisx/PerformanceVisx.tsx

@@ -150,33 +150,18 @@ const getPerfMetrics = (snapshots, snapshotsIds): PerfData => {
   return perfData;
 };
 
-/* EXPORT COMPONENT */
-const PerformanceVisx = (props: PerformanceVisxProps): JSX.Element => {
-  // hook used to dispatch onhover action in react
-  const { width, height, snapshots, hierarchy } = props;
-  const [{ currentTabInApp }, dispatch] = useStoreContext();
-  const NO_STATE_MSG = 'No state change detected. Trigger an event to change state';
-  const data = getPerfMetrics(snapshots, getSnapshotIds(hierarchy));
-  const [series, setSeries] = useState(true);
-  const [action, setAction] = useState(false);
-
-  const [route, setRoute] = useState('All Routes');
-  const [snapshot, setSnapshot] = useState('All Snapshots');
-  // snapshots = 3.0
-  useEffect(() => {
-    dispatch(setCurrentTabInApp('performance')); // dispatch sent at initial page load allowing changing "immer's" draft.currentTabInApp to 'performance' to facilitate render.
-  }, [dispatch]);
-
-  // Creates the actions array used to populate the compare actions dropdown
-  const getActions = () => {
+  const getActions = () => { // Creates the actions array used to populate the compare actions dropdown (WORK IN PROGRESS)
     const project = localStorage.getItem('project');
     const seriesArr: Series[] = project === null ? [] : JSON.parse(project);
     const actionsArr = [];
 
+    console.log("Project:", project)
+    console.log('seriesArr:', seriesArr)
+
     if (seriesArr.length) {
       for (let i = 0; i < seriesArr.length; i += 1) {
         for (const actionObj of seriesArr[i].data.barStack) {
-          if (actionObj.name === action) {
+          if (actionObj.name === 'action') {
             actionObj.seriesName = seriesArr[i].name;
             actionsArr.push(actionObj);
           }
@@ -186,6 +171,29 @@ const PerformanceVisx = (props: PerformanceVisxProps): JSX.Element => {
     return actionsArr;
   };
 
+/* EXPORT COMPONENT */
+const PerformanceVisx = (props: PerformanceVisxProps): JSX.Element => {
+  // hook used to dispatch onhover action in react
+  const {
+    width, // from ParentSize provided in StateRoute
+    height, // from ParentSize provided in StateRoute
+    snapshots, // from 'tabs[currentTab]' object in 'MainContainer'
+    hierarchy // from 'tabs[currentTab]' object in 'MainContainer'
+  } = props;
+  const [{ currentTabInApp }, dispatch] = useStoreContext();
+  const NO_STATE_MSG = 'No state change detected. Trigger an event to change state';
+  const data = getPerfMetrics(snapshots, getSnapshotIds(hierarchy));
+  const [series, setSeries] = useState(true);
+  const [action, setAction] = useState(false);
+  const [route, setRoute] = useState('All Routes');
+  const [snapshot, setSnapshot] = useState('All Snapshots');
+
+  getActions();
+
+  useEffect(() => {
+    dispatch(setCurrentTabInApp('performance')); // dispatch sent at initial page load allowing changing "immer's" draft.currentTabInApp to 'performance' to facilitate render.
+  }, [dispatch]);
+
   const renderComparisonBargraph = () => {
     if (hierarchy && series !== false) {
       return (
@@ -212,35 +220,29 @@ const PerformanceVisx = (props: PerformanceVisxProps): JSX.Element => {
       />
     );
   };
-  // create allRoutes variable to hold urls
-  const allRoutes = [];
+  
+  const allRoutes = []; // create allRoutes variable to hold urls
   const filteredSnapshots = [];
-  // loop through data.barStack
-  for (let i = 0; i < data.barStack.length; i += 1) {
-    // set url variable to new route url
-    const url = new URL(data.barStack[i].route);
-    // if all the routes do not have the pathname property on url then push it onto all routes array
-    if (!allRoutes.includes(url.pathname)) {
+  
+  for (let i = 0; i < data.barStack.length; i += 1) { // loop through data.barStack
+    const url = new URL(data.barStack[i].route); // set url variable to new route url
+    if (!allRoutes.includes(url.pathname)) { // if all the routes do not have the pathname property on url then push it onto all routes array
       allRoutes.push(url.pathname);
     }
-    // if the route exists and it is equal to url.pathname then push data.barstack at i into filteredSnapshots array
-    if (route && route === url.pathname) {
+    if (route && route === url.pathname) { // if the route exists and it is equal to url.pathname then push data.barstack at i into filteredSnapshots array
       filteredSnapshots.push(data.barStack[i]);
     }
   }
-  // if route does not equal to All Routes, set data.barstack to filteredSnapshots array
-  if (route !== 'All Routes') {
+  if (route !== 'All Routes') { // if route does not equal to All Routes, set data.barstack to filteredSnapshots array
     data.barStack = filteredSnapshots;
   }
 
-  // maxheight is referring to the max height in render time to choose the scaling size for graph
-  let maxHeight = 0;
+  let maxHeight = 0; // maxheight is referring to the max height in render time to choose the scaling size for graph
   if (snapshot !== 'All Snapshots') {
-    // filter barStack to make it equal to an array of length 1 with object matching snapshot ID to mirror the data.barStack object's shape
-    const checkData = [data.barStack.find((comp) => comp.snapshotId === snapshot)];
+    const checkData = [data.barStack.find((comp) => comp.snapshotId === snapshot)]; // filter barStack to make it equal to an array of length 1 with object matching snapshot ID to mirror the data.barStack object's shape
     const holdData = [];
-    // looping through checkData which is composed of a single snapshot while pushing key/values to a new object and setting maxHeight
-    for (const key in checkData[0]) {
+    
+    for (const key in checkData[0]) { // looping through checkData which is composed of a single snapshot while pushing key/values to a new object and setting maxHeight
       if (key !== 'route' && key !== 'snapshotId') {
         if (maxHeight < checkData[0][key]) maxHeight = checkData[0][key];
         const name = {};
@@ -250,11 +252,9 @@ const PerformanceVisx = (props: PerformanceVisxProps): JSX.Element => {
         holdData[holdData.length - 1].snapshotId = key;
       }
     }
-    // maxTotalRender height of bar is aligned to y-axis
-    // 1.15 adjusts the numbers on the y-axis so the max bar's true height never reaches the max of the y-axis
-    data.maxTotalRender = maxHeight * 1.15;
-    // assign holdData to data.barStack to be used later to create graph
-    if (holdData) data.barStack = holdData;
+    
+    data.maxTotalRender = maxHeight * 1.15; // maxTotalRender height of bar is aligned to y-axis. 1.15 adjusts the numbers on the y-axis so the max bar's true height never reaches the max of the y-axis
+    if (holdData) data.barStack = holdData; // assign holdData to data.barStack to be used later to create graph
   }
 
   const renderBargraph = (): JSX.Element | null => {
@@ -285,8 +285,7 @@ const PerformanceVisx = (props: PerformanceVisxProps): JSX.Element => {
     return <div className='noState'>{NO_STATE_MSG}</div>;
   };
 
-  // This will redirect to the proper tabs during the tutorial
-  const renderForTutorial = () => {
+  const renderForTutorial = () => { // This will redirect to the proper tabs during the tutorial
     if (currentTabInApp === 'performance') return <Redirect to='/' />;
     if (currentTabInApp === 'performance-comparison') return <Redirect to='/comparison' />;
     return null;

src/app/components/StateRoute/PerformanceVisx/RenderingFrequency.tsx

@@ -12,9 +12,11 @@ import { useStoreContext } from '../../../store';
 const RenderingFrequency = (props) => {
   const perfData = props.data;
   const [store, dispatch] = useStoreContext();
+
   useEffect(() => {
     dispatch(setCurrentTabInApp('performance-comparison')); // dispatch sent at initial page load allowing changing "immer's" draft.currentTabInApp to 'performance-comparison' to facilitate render.
   }, []);
+  
   return (
     <div>
       {Object.keys(perfData).map((componentName) => {

src/app/containers/ButtonsContainer.tsx

@@ -9,95 +9,44 @@ import LockOpenIcon from '@mui/icons-material/LockOpen';
 import FileDownloadIcon from '@mui/icons-material/FileDownload';
 import FileUploadIcon from '@mui/icons-material/FileUpload';
 
+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
+  const fileDownload: HTMLAnchorElement = document.createElement('a'); // invisible HTML element that will hold our tabs[currentTab] object
 
-// function exportHandler takes in a parameter snapshots which is typed as an array
-// the function does not return anything so the type is void
-function exportHandler(snapshots: []): void {
-  // create invisible download anchor link
-  // fileDownload is typed as HTMLAnchorElement
-  // HTML anchor element has the <a></a> tag
-  const fileDownload: HTMLAnchorElement = document.createElement('a');
-
-  // set file in anchor link
-  // href is the reference to the URL object created from the Blob
-  fileDownload.href = URL.createObjectURL(
-    // Blob obj is raw data, json is raw, stringify the snapshots as json so the Blob can access the raw data
-    new Blob([JSON.stringify(snapshots)], { type: 'application/json' }),
+  fileDownload.href = URL.createObjectURL( // href is the reference to the URL object created from the Blob
+    new Blob([JSON.stringify(snapshots)], { type: 'application/json' }), // Blob obj is raw data. The tabs[currentTab] object is stringified so the Blob can access the raw data
   );
 
-  // set anchor as file download and click it
-  // anchor element has a download attribute
-  // snapshot.json is what the file name will be once the file is downloaded locally
-  fileDownload.setAttribute('download', 'snapshot.json');
-  // click is a method on all HTML elements
-  // simulates a mouse click, triggering the element's click event
-  fileDownload.click();
+  fileDownload.setAttribute('download', 'snapshot.json'); // We set a download attribute with snapshots.json as the file name. This allows us to download the file when the element is 'clicked.' The file will be named snapshots.json once the file is downloaded locally
+  fileDownload.click(); // click is a method on all HTML elements that simulates a mouse click, triggering the element's click event
 
-  // remove file url
-  // after file is downloaded, remove the href
-  URL.revokeObjectURL(fileDownload.href);
+  URL.revokeObjectURL(fileDownload.href); // after file is downloaded, remove the href
 }
 
-function importHandler(dispatch: (a: unknown) => void): void {
-  // create input element
-  // fileUpload is HTMLInputElement, which is an interface for HTML input elements
-  // accepts data from user
-  const fileUpload = document.createElement('input');
-  // file is a type attribute on the input element, allows users to select a file
-  console.log('fileUpload element:', fileUpload)
-  fileUpload.setAttribute('type', 'file');
-
-  // onChange is when value of HTML element is changed
-  // parameter for onChange is an event
-  fileUpload.onchange = (e: Event) => {
-    // FileReader is an object
-    // reads contents of local files in async
-    // can use file or blob objects
-    const reader = new FileReader();
-    console.log('on change triggered')
-    //console.log('reader :', reader);
+function importHandler(dispatch: (a: unknown) => void): void { // function handles the importing of a tabs[currentTab] object when the upload button is selected
+  const fileUpload = document.createElement('input'); // invisible HTML element that will hold our uploaded tabs[currentTab] object
+  fileUpload.setAttribute('type', 'file'); // Attributes added to HTML element
 
-    const eventFiles = e.target as HTMLInputElement;
-    // console.log('e.target:', e.target)
-    // console.log('event files:', eventFiles.files[0]);
+  fileUpload.onchange = (e: Event) => { // onChange is when value of HTML element is changed
+    const reader = new FileReader(); // FileReader is an object that reads contents of local files in async. It can use file or blob objects
+    const eventFiles = e.target as HTMLInputElement; // uploaded tabs[currentTab] object is stored as the event.target
 
-    if (eventFiles) {
-      reader.readAsText(eventFiles.files[0]);
+    if (eventFiles) { // if the fileUpload element has an eventFiles
+      reader.readAsText(eventFiles.files[0]); // the reader parses the file into a string and stores it within the reader object
     }
 
     reader.onload = () => {
-      // once the local file has been loaded, result property on FileReader object returns the file's contents
-      // then take contents and convert to a string
-      console.log('on load triggered:')
-      const test = reader.result.toString();
-      // dispatch sends the result of calling importSnapshots on the json parsed data from the file contents from the new FileReader object
-      // importSnapshots defined in actions/actions.ts/line 71, it returns an action object with a type and payload, payload is newSnaps parameter
-      // dispatch function is being called with that action object which gets sent to the reducer in reducers/mainReducer.js/line 203
-      // this updates the current tab
-      return dispatch(importSnapshots(JSON.parse(test)));
+      const test = reader.result.toString(); // once the local file has been loaded, result property on FileReader object returns the file's contents and then converts the file contents to a string
+      return dispatch(importSnapshots(JSON.parse(test))); // dispatch sends the result of of converting our tabs[currentTab] object => string => JSON Object. This updates the current tab
     };
-    // const eventFiles = e.target as HTMLInputElement;
-    // if (eventFiles?.hasOwnProperty('files')) {
-    //   // const eventFiles = target as HTMLInputElement;
-    //   if (eventFiles) {
-    //     reader.readAsText(eventFiles.files[0]);
-    //   }
-    // }
   };
 
-  fileUpload.click();
-  //console.log('dispatch importSnapshots successful')
+  fileUpload.click(); // click is a method on all HTML elements that simulates a mouse click, triggering the element's click event
 }
 
 function ButtonsContainer(): JSX.Element {
   const [{ tabs, currentTab, currentTabInApp }, dispatch] = useStoreContext();
-  const {
-    snapshots,
-    mode: { paused },
-  } = tabs[currentTab];
-
-  console.log('----state after any change----', tabs[currentTab])
-
+  const { snapshots, mode: { paused }} = tabs[currentTab];
+  
   return (
     <div className='buttons-container'>
       <Button

src/app/reducers/mainReducer.js

@@ -8,19 +8,7 @@ export default (state, action) =>
     const { port, currentTab, tabs } = draft;
     const { hierarchy, snapshots, mode, intervalId, viewIndex, sliderIndex } =
       tabs[currentTab] || {};
-
-    // console.log('----consoles before reducer funcs!-----')
-    // console.log('state:', state)
-    //console.log(tabs[currentTab]);
-    //console.log('properties of tabs[currentTab]:', hierarchy, snapshots, mode, intervalId, viewIndex, sliderIndex)
-
-    //console.log('reducer file!', 'hierarchy:', hierarchy, 'tabs:', tabs)
-
-    // eslint-disable-next-line max-len
-    // function that finds the index in the hierarchy and extracts the name of the equivalent index to add to the post message
     // eslint-disable-next-line consistent-return
-
-    // (action.payload, hierarchy)
     const findName = (index, obj) => {
       // eslint-disable-next-line eqeqeq
       if (obj && obj.index == index) {
@@ -44,7 +32,6 @@ export default (state, action) =>
     switch (action.type) {
       // This saves the series user wants to save to chrome local storage
       case types.SAVE: {
-        console.log('save action reducer!', 'payload:', action.payload);
         const { newSeries, newSeriesName } = action.payload;
         if (!tabs[currentTab].seriesSavedStatus) {
           tabs[currentTab] = { ...tabs[currentTab], seriesSavedStatus: 'inputBoxOpen' };
@@ -192,9 +179,6 @@ export default (state, action) =>
       }
 
       case types.EMPTY: {
-        console.log('-----clear snapshots reducer----');
-        console.log('state before:', state.tabs[currentTab]);
-
         port.postMessage({ action: 'emptySnap', tabId: currentTab }); //communicate with background.js (service worker)
 
         // properties associated with timetravel + seek bar
@@ -223,17 +207,12 @@ export default (state, action) =>
 
       case types.IMPORT: {
         // Log the value of tabs[currentTab].snapshots before the update
-        console.log('-----import snapshots reducer----');
-        console.log('state before:', state.tabs[currentTab]);
-        console.log('action payload:', action.payload);
-
         port.postMessage({
           action: 'import',
           payload: action.payload, //.snapshots,
           tabId: currentTab,
         });
 
-        //============
         const savedSnapshot = action.payload;
 
         tabs[currentTab].sliderIndex = savedSnapshot.sliderIndex;
@@ -255,14 +234,6 @@ export default (state, action) =>
         tabs[currentTab].currParent = savedSnapshot.currParent;
         tabs[currentTab].currBranch = savedSnapshot.Branch;
         tabs[currentTab].seriesSavedStatus = false;
-
-        //============
-        //tabs[currentTab].snapshots = action.payload.snapshots;
-
-        // console.log('New snapshots:', action.payload);
-        // console.log('updated tabs[CurrentTab].snapshots:', tabs[currentTab].snapshots)
-        //console.log('state after:', state)
-
         break;
       }
       case types.TOGGLE_MODE: {