Merge pull request #17 from oslabs-beta/javi/web-vitals

jorozco94 · web-flow · commit 009f5c5a1402 · 2022-09-21T10:20:48.000-07:00
Javi/web vitals
diff --git a/src/CodeEditor/CustomDialog/newDialog.css b/src/CodeEditor/CustomDialog/newDialog.css
@@ -18,6 +18,7 @@
   top: 0px;
   z-index: 10;
   font-size: .8em;
+  font-weight: bold;
 }
 
 .CodeMirror-advanced-dialog input {
@@ -31,6 +32,7 @@
 
 .CodeMirror-advanced-dialog button {
   font-size: 70%;
+  font-weight: bold;
 }
 
 .CodeMirror-advanced-dialog .row {
@@ -57,7 +59,3 @@
   background-color: inherit;
   color: inherit;
 }
-
-.CodeMirror-find-label .CodeMirror-search-count {
-  text-shadow: white 0 0 0.2em;
-}
diff --git a/src/CodeEditor/CustomSearch/newSearch.js b/src/CodeEditor/CustomSearch/newSearch.js
@@ -103,6 +103,7 @@
   }
 
   function parseQuery(query) {
+    if (query === null) return;
     const isRE = query.match(/^\/(.*)\/([a-z]*)$/);
     if (isRE) {
       try { query = new RegExp(isRE[1], isRE[2].indexOf("i") == -1 ? "" : "i"); }
@@ -116,6 +117,7 @@
   }
 
   function startSearch(cm, state, query) {
+    if (query === null) return;
     state.queryText = query;
     state.query = parseQuery(query);
     cm.removeOverlay(state.overlay, queryCaseInsensitive(state.query));
@@ -156,7 +158,6 @@
     cm.operation(() => {
       const state = getSearchState(cm);
       let cursor = getSearchCursor(cm, state.query, reverse ? state.posFrom : state.posTo);
-      // console.log(cursor);
       if (!cursor.find(reverse)) {
         cursor = getSearchCursor(cm, state.query, reverse ? CodeMirror.Pos(cm.lastLine()) : CodeMirror.Pos(cm.firstLine(), 0));
         if (!cursor.find(reverse)) return;
diff --git a/src/PerformanceDashboard/RerenderChart.svelte b/src/PerformanceDashboard/RerenderChart.svelte
@@ -42,7 +42,7 @@
   </script> 
   
   <main>
-    <h5 class="graph-title">Component Rerender Tracker</h5>
+    <h5 class="graph-title" data-tooltip='Dynamically track re-render counts of Svelte app components.'>Component Rerender Tracker</h5>
       <svg {width} {height} class="chart">
           <g transform={`translate(${margin.left},${margin.top})`}>
             {#each xScale.ticks() as tickValue}
@@ -82,6 +82,7 @@
     margin-top: 0;
     padding-top: 50px;
     font-size: 12px;
+    position: relative;
   }
 
   .chart {
@@ -114,4 +115,46 @@
     fill: #ccc; 
   }
 
+  /* CODE BELOW IS FOR CSS TOOLTIP ON RERENDER CHART TITLE */
+  .graph-title::before,
+  .graph-title::after {
+    --scale: 0;
+    --arrow-size: 10px;
+    --tooltip-color: #F3EFEE;
+
+    position: absolute;
+    bottom: -.10rem;
+    left: 50%;
+    transform: translateX(-50%) translateY(var(--translate-y, 0)) scale(var(--scale));
+    transition: 150ms transform;
+    transform-origin: top center;
+  }
+
+  .graph-title::before {
+    --translate-y: calc(100% + var(--arrow-size));
+
+    content: attr(data-tooltip);
+    font-size: .9rem;
+    color: rgb(20, 20, 20);
+    padding: .5rem;
+    border-radius: .3rem;
+    text-align: center;
+    width: max-content;
+    max-width: 300%;
+    background: var(--tooltip-color);
+  }
+
+  .graph-title:hover::before,
+  .graph-title:hover::after {
+    --scale: .8;
+  }
+
+  .graph-title::after {
+    --translate-y: calc(1 * var(--arrow-size));
+
+    content: '';
+    border: var(--arrow-size) solid transparent;
+    border-bottom-color: var(--tooltip-color);
+    transform-origin: bottom center;
+  }
   </style>
diff --git a/src/PerformanceDashboard/WebVitals.svelte b/src/PerformanceDashboard/WebVitals.svelte
@@ -2,11 +2,9 @@
   import { vitals } from "../DataStore/SvelteStormDataStore"; 
   const { ipcRenderer } = require('electron');
 
-  console.log('Web Vitals Exists', vitals);
   ipcRenderer.on('web-vitals', (event, args) => {
     vitals.update((currVal) => {
     currVal[args.name] = args.value;
-    // console.log('vitals', currVal);
     return currVal;
     });
   });  
@@ -17,7 +15,7 @@
 <main>
   
   <div class='web-vitals-parent-container'>
-    <h5 class='web-vitals-title'>Web Vitals</h5>
+    <h5 class='web-vitals-title' data-Tooltip="Web Vitals are graded on a 'Good', 'Needs Improvement', and 'Poor' scale.">Web Vitals</h5>
     <div class='web-vitals-columns-container'>
       <div class='vitals-left'>
         <div class='individual-vital'>
@@ -75,5 +73,50 @@
     padding: 1em;
     text-align: center;
   }
+  /* CODE BELOW CREATES TOOLTIP UNDER WEB VITALS TITLE*/
+  .web-vitals-title {
+    position: relative;
+  }
+
+  .web-vitals-title::before,
+  .web-vitals-title::after {
+    --scale: 0;
+    --arrow-size: 10px;
+    --tooltip-color: #F3EFEE;
+
+    position: absolute;
+    bottom: -.10rem;
+    left: 50%;
+    transform: translateX(-50%) translateY(var(--translate-y, 0)) scale(var(--scale));
+    transition: 150ms transform;
+    transform-origin: top center;
+  }
+
+  .web-vitals-title::before {
+    --translate-y: calc(100% + var(--arrow-size));
+
+    content: attr(data-tooltip);
+    font-size: .9rem;
+    color: rgb(20, 20, 20);
+    padding: .5rem;
+    border-radius: .3rem;
+    text-align: center;
+    width: max-content;
+    max-width: 300%;
+    background: var(--tooltip-color);
+  }
+
+  .web-vitals-title:hover::before,
+  .web-vitals-title:hover::after {
+    --scale: .8;
+  }
+
+  .web-vitals-title::after {
+    --translate-y: calc(1 * var(--arrow-size));
 
+    content: '';
+    border: var(--arrow-size) solid transparent;
+    border-bottom-color: var(--tooltip-color);
+    transform-origin: bottom center;
+  }
 </style>
diff --git a/src/Terminal/XTerm.svelte b/src/Terminal/XTerm.svelte
@@ -25,7 +25,7 @@
       }
 
       // The result can be accessed through the `m`-variable.
-      if(!$saveToFileName){
+      // if(!$saveToFileName){
       m.forEach((match, groupIndex) => {
 
           localhostToUse = match;
@@ -40,7 +40,7 @@
           $saveToFileName = path.resolve(__dirname, `./CapturedSnaps/${filename}`);
           ipcRenderer.send('openDebugAppWindow', localhostToUse);
         });
-      }
+      // }
     }
   }
 
diff --git a/src/index.js b/src/index.js
@@ -45,7 +45,6 @@ let browser;
 //app.on is a start of the main process that controls the lifecycle events
 //Fires once when app is ready..
 app.on('ready', () => {
-  createApplicationMenu();
   createWindow();
 });
 
@@ -133,14 +132,12 @@ const createWindow = (exports.createWindow = () => {
   // let watcher;
 
   //show window by calling the listener once
-  newWindow.once('ready-to-show', () => {
+  newWindow.on('ready-to-show', () => {
     newWindow.show();
   });
-
   newWindow.on('focus', createApplicationMenu);
 
   //save changes dialog modal message
-
   newWindow.on('close', (event) => {
     if (newWindow.isDocumentEdited()) {
       event.preventDefault();
@@ -161,56 +158,58 @@ const createWindow = (exports.createWindow = () => {
   newWindow.on('closed', () => {
     windows.delete(newWindow);
     createApplicationMenu();
-    // ptyProcess = null;
     newWindow = null;
   });
+  windows.add(newWindow);
 
-  var shell = os.platform() === 'win32' ? 'powershell.exe' : 'zsh';
+});
 
-  // this spawns the terminal window space
-  var ptyProcess = pty.spawn(shell, [], {
-    name: 'xterm-color',
-    cols: 80,
-    rows: 24,
-    cwd: process.env.HOME,
-    // cwd: cwdFilePath,
-    env: process.env,
-  });
+/* 
+  * Below code (shell and ptyProcess) was previously inside createWindow fxn but 
+  * was causing issues w/ re-activation. Moving it outside of the fxn below
+  * allows re-activation app but still not perfect implementation
+*/
+const shell = os.platform() === 'win32' ? 'powershell.exe' : 'zsh';
+// this spawns the terminal window space
+const ptyProcess = pty.spawn(shell, [], {
+  name: 'xterm-color',
+  cols: 80,
+  rows: 24,
+  cwd: process.env.HOME,
+  // cwd: cwdFilePath,
+  env: process.env,
+});
 
-  //2022-ST-AJ sends to renderer cwd for it to display on prompt
-  // ipcMain.on('cwd', (event, data) => {
-  //   event.reply('cwdreply', process.env.PWD);
-  // });
+//2022-ST-AJ sends to renderer cwd for it to display on prompt
+// ipcMain.on('cwd', (event, data) => {
+//   event.reply('cwdreply', process.env.PWD);
+// });
 
-  // add ipc listen for open folder and reassign ptyProcess.cwd to actual cwd
-  ipcMain.on('openFolder', (event, data) => {
-    ptyProcess.cwd = cwdFilePath[0];
-  });
-  
-  //2022-ST-AJ node-pty listens to data and send whatever it receives back to xterm to render
-  ptyProcess.onData((data) => {
-    newWindow.webContents.send('terminal-incData', data);
-  });
+// add ipc listen for open folder and reassign ptyProcess.cwd to actual cwd
+ipcMain.on('openFolder', (event, data) => {
+  ptyProcess.cwd = cwdFilePath[0];
+});
 
-  //2022-ST-AJ ipcMain listens on data passed from xterm to write to shell
-  ipcMain.on('terminal-into', (event, data) => {
-    ptyProcess.write(data);
-  });
+//2022-ST-AJ node-pty listens to data and send whatever it receives back to xterm to render
+ptyProcess.onData((data) => {
+  newWindow.webContents.send('terminal-incData', data);
+});
 
-  //2022-ST-AJ ipcMain listens to resizing event from renderer and calls resize on node-pty to align size between node-pty and xterm. They need to align otherwise there are wierd bugs everywhere.
-  ipcMain.on('terminal-resize', (event, size) => {
-    const cols = size.cols;
-    const rows = size.rows;
-    ptyProcess.resize(cols, rows);
-  });
+//2022-ST-AJ ipcMain listens on data passed from xterm to write to shell
+ipcMain.on('terminal-into', (event, data) => {
+  ptyProcess.write(data);
+});
 
-  require('electron-reload')(__dirname, {
-    electron: path.join(__dirname, '../node_modules', '.bin', 'electron'),
-    awaitWriteFinish: true,
-  });
+//2022-ST-AJ ipcMain listens to resizing event from renderer and calls resize on node-pty to align size between node-pty and xterm. They need to align otherwise there are wierd bugs everywhere.
+ipcMain.on('terminal-resize', (event, size) => {
+  const cols = size.cols;
+  const rows = size.rows;
+  ptyProcess.resize(cols, rows);
+});
 
-  windows.add(newWindow);
-  // return newWindow;
+require('electron-reload')(__dirname, {
+  electron: path.join(__dirname, '../node_modules', '.bin', 'electron'),
+  awaitWriteFinish: true,
 });
 
  /*
@@ -328,7 +327,7 @@ ipcMain.handle('decreaseFontSize', decreaseFontSize);
 
 ipcMain.handle('createProjectFromUser', createProjectFromUser);
 
-ipcMain.on('openDebugAppWindow', (event, localhostToUse) => {
+ipcMain.on('openDebugAppWindow', (event, localhostToUse)=> {
   if(localhostToUse.length === 4 || localhostToUse.length === 5) openBrowserWindow(localhostToUse);
 });
 

Original file line number	Diff line number	Diff line change
`@@ -18,6 +18,7 @@`
`18`	`18`	`top: 0px;`
`19`	`19`	`z-index: 10;`
`20`	`20`	`font-size: .8em;`
	`21`	`+ font-weight: bold;`
`21`	`22`	`}`
`22`	`23`
`23`	`24`	`.CodeMirror-advanced-dialog input {`
`@@ -31,6 +32,7 @@`
`31`	`32`
`32`	`33`	`.CodeMirror-advanced-dialog button {`
`33`	`34`	`font-size: 70%;`
	`35`	`+ font-weight: bold;`
`34`	`36`	`}`
`35`	`37`
`36`	`38`	`.CodeMirror-advanced-dialog .row {`
`@@ -57,7 +59,3 @@`
`57`	`59`	`background-color: inherit;`
`58`	`60`	`color: inherit;`
`59`	`61`	`}`
`60`		`-`
`61`		`-.CodeMirror-find-label .CodeMirror-search-count {`
`62`		`- text-shadow: white 0 0 0.2em;`
`63`		`-}`
Original file line number	Diff line number	Diff line change
`@@ -25,7 +25,7 @@`
`25`	`25`	`}`
`26`	`26`
`27`	`27`	// The result can be accessed through the `m`-variable.
`28`		`- if(!$saveToFileName){`
	`28`	`+ // if(!$saveToFileName){`
`29`	`29`	`m.forEach((match, groupIndex) => {`
`30`	`30`
`31`	`31`	`localhostToUse = match;`
`@@ -40,7 +40,7 @@`
`40`	`40`	$saveToFileName = path.resolve(__dirname, `./CapturedSnaps/${filename}`);
`41`	`41`	`ipcRenderer.send('openDebugAppWindow', localhostToUse);`
`42`	`42`	`});`
`43`		`- }`
	`43`	`+ // }`
`44`	`44`	`}`
`45`	`45`	`}`
`46`	`46`