mg pseudo code for import export features

Author: morahgeist

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

@@ -138,21 +138,20 @@ const BarGraphComparison = (props: BarGraphComparisonProps): JSX.Element => {
   // const classes = useStyles();
 
   const StyledFormControl = styled(FormControl)(({ theme }) => ({
-  margin: theme.spacing(1),
-  minWidth: 80,
-  height: 30,
-}));
-
-const StyledSelect = styled(Select)({
-  minWidth: 80,
-  fontSize: '.75rem',
-  fontWeight: 200,
-  border: '1px solid grey',
-  borderRadius: 4,
-  color: 'grey',
-  height: 30,
-});
+    margin: theme.spacing(1),
+    minWidth: 80,
+    height: 30,
+  }));
 
+  const StyledSelect = styled(Select)({
+    minWidth: 80,
+    fontSize: '.75rem',
+    fontWeight: 200,
+    border: '1px solid grey',
+    borderRadius: 4,
+    color: 'grey',
+    height: 30,
+  });
 
   const handleSeriesChange = (event: Event) => {
     if (!event) return;
@@ -247,7 +246,6 @@ const StyledSelect = styled(Select)({
             <StyledSelect
               style={{ color: 'white' }}
               labelId='simple-select-outlined-label'
-              
               open={open}
               onClose={handleClose}
               onOpen={handleOpen}
@@ -266,12 +264,11 @@ const StyledSelect = styled(Select)({
             </StyledSelect>
           </StyledFormControl>
           <h4 style={{ padding: '0 1rem' }}>Compare Actions </h4>
-          <StyledFormControl variant='outlined' >
+          <StyledFormControl variant='outlined'>
             <StyledSelect
               style={{ color: 'white' }}
               labelId='snapshot-select'
               id='snapshot-select'
-              
               open={picOpen}
               onClose={picHandleClose}
               onOpen={picHandleOpen}

src/app/containers/ButtonsContainer.tsx

@@ -13,31 +13,57 @@ import { useStoreContext } from '../store';
 
 import Tutorial from '../components/Tutorial';
 
+// 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' }),
   );
 
   // 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();
 
   // remove file url
+  // after file is downloaded, remove the href
   URL.revokeObjectURL(fileDownload.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
   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();
     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
       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 eventFiles = e.target as HTMLInputElement;

src/extension/background.js

@@ -337,7 +337,7 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
         reloaded[tabId] = false;
       } else {
         tabsObj[tabId].snapshots.push(request.payload);
-        //! INVOKING buildHierarchy FIGURE OUT WHAT TO PASS IN!!!!
+        // INVOKING buildHierarchy FIGURE OUT WHAT TO PASS IN
         if (!tabsObj[tabId][index]) {
           sendToHierarchy(tabsObj[tabId], new Node(request.payload, tabsObj[tabId]));
         }