#netpyne-103: removing reset button, removing update timestamp, clean up dependencies

Author: ddelpiano

webapp/components/general/TutorialBubble.js

@@ -1,21 +1,21 @@
 import React, { useState, useRef, useEffect } from 'react';
-import { Box, Button, Grid, Typography } from '@material-ui/core';
+import {
+  Box, Button, Grid, Typography,
+} from '@material-ui/core';
 import {
   primaryColor, secondaryColor, bgLight, bgDark, primaryTextColor, secondaryTextColor, fontColor,
 } from '../../theme';
 
 const rectMargin = 4;
 
 const TutorialBubble = ({
-  requestedTourStep, steps, lastCheckRender, stopTutorial, incrementTutorialStep, validateTutorialStep, currentTourStep
+  requestedTourStep, steps, lastCheckRender, stopTutorial, incrementTutorialStep, validateTutorialStep, currentTourStep,
 }) => {
-  const tutorialTarget = useRef(null)
+  const tutorialTarget = useRef(null);
 
-  useEffect(() => {
-    return () => {
-      tutorialTarget.current = null;
-    }
-  }, [])
+  useEffect(() => () => {
+    tutorialTarget.current = null;
+  }, []);
 
   const getDOMTarget = (target, config) => {
     // We query the DOM with the selector
@@ -37,7 +37,7 @@ const TutorialBubble = ({
     return DOMtargets[config?.collectionIndex || 0];
   };
 
-  function calculateVisiblePosition(rect1, width2, height2) {
+  function calculateVisiblePosition (rect1, width2, height2) {
     const windowHeight = window.innerHeight;
     const windowWidth = window.innerWidth;
 
@@ -68,11 +68,10 @@ const TutorialBubble = ({
   }
 
   const nextTourStep = steps[requestedTourStep];
-  const { target: nextTarget } = nextTourStep ? nextTourStep : { target: undefined };
+  const { target: nextTarget } = nextTourStep || { target: undefined };
 
   const { target, title, content } = tourStep;
 
-
   const DOMtarget = getDOMTarget(target, tourStep);
   const nextDOMtarget = getDOMTarget(nextTarget, nextTourStep);
   const visible = DOMtarget?.checkVisibility();
@@ -91,7 +90,7 @@ const TutorialBubble = ({
       return false;
     }
     return el.parentNode.isContentEditable;
-  }
+  };
 
   const isAnyEditable = (element) => {
     if (isEditable(element)) {
@@ -104,27 +103,27 @@ const TutorialBubble = ({
       }
     }
     return false;
-  }
+  };
 
   const listen = (event) => {
     tutorialTarget.current = null;
     incrementTutorialStep();
-  }
+  };
 
   const stop = (event) => {
     stopTutorial(event);
     tutorialTarget.current = null;
-  }
+  };
 
   if (currentTourStep === requestedTourStep) {
     tutorialTarget.current = null;
   }
 
   if (!tutorialTarget.current && currentTourStep !== requestedTourStep) {
     tutorialTarget.current = DOMtarget;
-    let waitFor = tourStep.waitFor;
+    let { waitFor } = tourStep;
     if (!waitFor) {
-      waitFor = isAnyEditable(DOMtarget) ? 'fieldEdition' : 'click'
+      waitFor = isAnyEditable(DOMtarget) ? 'fieldEdition' : 'click';
     }
     switch (waitFor) {
       case 'click':
@@ -148,9 +147,9 @@ const TutorialBubble = ({
   const nextIsVisible = nextDOMtarget?.checkVisibility();
 
   return (
-    <Box className='tutorials'>
+    <Box className="tutorials">
       <Box
-        className='tutorials_highlight'
+        className="tutorials_highlight"
         id="tutorialTargetRectangle"
         style={{
           top: targetRect.top - rectMargin,
@@ -162,25 +161,28 @@ const TutorialBubble = ({
         }}
       />
 
-      <Box className='tutorials_wrapper' id="tutorialBubble">
-        {lastCheckRender}
-
-        <Box className='tutorials_content' style={{
-          top: y,
-          left: x,
-        }}>
-          <Typography component='h3'>
+      <Box className="tutorials_wrapper" id="tutorialBubble">
+        <Box
+          className="tutorials_content"
+          style={{
+            top: y,
+            left: x,
+          }}
+        >
+          <Typography component="h3">
             {title}
           </Typography>
 
           {content}
 
-          <Box pt={2.5} display='flex' alignItems='center' justifyContent='space-between'>
+          <Box pt={2.5} display="flex" alignItems="center" justifyContent="space-between">
             <Typography>
-              {requestedTourStep}/{steps.length}
+              {requestedTourStep}
+              /
+              {steps.length}
             </Typography>
 
-            <Box display='flex' alignItems='center'>
+            <Box display="flex" alignItems="center">
               <Button
                 onClick={stop}
                 color="primary"
@@ -190,7 +192,7 @@ const TutorialBubble = ({
 
               {hasOtherSteps && (
                 <Button
-                  variant='contained'
+                  variant="contained"
                   color="primary"
                   onClick={listen}
                   disabled={!nextIsVisible}

webapp/components/general/TutorialObserver.js

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import TutorialBubble from './TutorialBubble';
 
-export default function TutorialObserver(props) {
+export default function TutorialObserver (props) {
   const tourRunning = useSelector((state) => state.tutorial.tourRunning);
   const [observer, setObserver] = useState(null);
 
@@ -16,11 +16,11 @@ export default function TutorialObserver(props) {
     validateTutorialStep,
     checkBubbleRender,
     lastCheckRender,
-    children
+    children,
   } = props;
 
   const bubbleUpdate = () => {
-    checkBubbleRender({ epoch: Date.now() })
+    checkBubbleRender({ epoch: Date.now() });
   };
 
   useEffect(() => {
@@ -31,8 +31,9 @@ export default function TutorialObserver(props) {
       return;
     }
     // Listen for new components being added to the DOM
+    // eslint-disable-next-line no-undef
     const obs = new MutationObserver((mutationsList) => {
-      if(mutationsList.length > 0) {
+      if (mutationsList.length > 0) {
         bubbleUpdate();
       }
     });
@@ -44,23 +45,22 @@ export default function TutorialObserver(props) {
 
   const startTutorialCallBack = () => {
     startTutorialStep();
-  }
+  };
 
   const stopTutorial = () => {
     stopTutorialStep();
-  }
+  };
 
   const doIncrementTutorialStep = () => {
-    validateTutorialStep({ tourStep: requestedTourStep })
-    incrementTutorialStep()
-  }
+    validateTutorialStep({ tourStep: requestedTourStep });
+    incrementTutorialStep();
+  };
 
   return (
     <>
       {children}
       {tourRunning && (
         <>
-        <button onClick={ () => { startTutorialCallBack() }}>RESET TUTORIAL</button>
           <TutorialBubble
             requestedTourStep={requestedTourStep}
             currentTourStep={tourStep}
@@ -70,7 +70,8 @@ export default function TutorialObserver(props) {
             validateTutorialStep={validateTutorialStep}
             lastCheckRender={lastCheckRender}
           />
-        </>)}
+        </>
+      )}
     </>
   );
-}
+}

webapp/dev_package.json

@@ -33,7 +33,6 @@
     "react": "^17.0.1",
     "react-color": "^2.19.3",
     "react-dom": "^16.4.0",
-    "react-joyride": "^2.5.3",
     "react-json-view": "^1.21.3",
     "react-redux": "^7.2.0",
     "react-sortable-tree": "^2.8.0",

webapp/package.bak

@@ -6,7 +6,7 @@
   "license": "MIT",
   "scripts": {
     "lint": "eslint . --color --fix",
-    "build": "webpack --mode production -p --progress --devtool source-map",
+    "build": "webpack --mode development -p --progress --devtool source-map",
     "build-dev": "webpack --mode development --devtool source-map",
     "build-dev-noTest": "webpack --mode development --devtool source-map --env.noTest=true",
     "build-dev-noTest:watch": "webpack --mode development --devtool source-map --env.noTest=true --progress --watch",
@@ -19,9 +19,9 @@
     "@material-ui/core": "4.12.1",
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.60",
-    "@metacell/geppetto-meta-client": "1.1.0",
-    "@metacell/geppetto-meta-core": "1.1.0",
-    "@metacell/geppetto-meta-ui": "1.1.0",
+    "@metacell/geppetto-meta-client": "1.2.0",
+    "@metacell/geppetto-meta-core": "1.2.0",
+    "@metacell/geppetto-meta-ui": "1.2.0",
     "@nosferatu500/react-sortable-tree": "3.0.5",
     "@sentry/integrations": "^6.16.1",
     "@sentry/react": "^6.16.1",

webapp/package.json

@@ -62,7 +62,6 @@
     "awesome-typescript-loader": "^5.2.1",
     "babel-eslint": "^10.0.1",
     "babel-loader": "^8.0.6",
-    "casperjs": "^1.1.4",
     "copy-webpack-plugin": "^4.6.0",
     "css-loader": "^3.0.0",
     "eslint": "^7.20.0",