Implemented Processing indicator for queries

Signed-off-by: Omkar Phansopkar <[email protected]>
aboutcode-org · Jun 19, 2023 · 221c382 · 221c382
1 parent fcf0c80
commit 221c382
Show file tree

Hide file tree

Showing 18 changed files with 492 additions and 373 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -68,7 +68,8 @@
     "style-loader": "^3.3.1",
     "svg-url-loader": "^8.0.0",
     "ts-loader": "^9.4.1",
-    "typescript": "~4.8.4"
+    "typescript": "~4.8.4",
+    "worker-loader": "^3.0.8"
   },
   "dependencies": {
     "@electron/remote": "^2.0.8",

diff --git a/src/components/FileTree/FileTree.tsx b/src/components/FileTree/FileTree.tsx
@@ -1,13 +1,12 @@
 import RcTree from "rc-tree";
 import { DataNode, Key } from "rc-tree/lib/interface";
 import React, { useEffect, useState } from "react";
-import { Element, scroller } from "react-scroll";
+import { Element } from "react-scroll";
 
 import EllipticLoader from "../EllipticLoader";
 import { PathType, useWorkbenchDB } from "../../contexts/dbContext";
 
 import SwitcherIcon from "./SwitcherIcon";
-import { scrollToDomElement } from "../../utils/dom";
 
 import "./FileTree.css";
 
@@ -56,19 +55,15 @@ const FileTree = (props: React.HTMLProps<HTMLDivElement>) => {
   useEffect(() => {
     if (!initialized || !db || !importedSqliteFilePath) return;
 
-    db.sync.then(() => {
-      db.findAllJSTree().then((treeData) => {
+    db.findAllJSTree()
+      .then((treeData) => {
         console.log("Filetree data", treeData);
 
         // Wrap with react-scroll wrapper
         function wrapNode(node: DataNode) {
           const key = String(node.key);
           node.title = (
-            <Element
-              key={key}
-              name={key}
-              className="filetree-node-wrapper"
-            >
+            <Element key={key} name={key} className="filetree-node-wrapper">
               <span>{String(node.title)}</span>
               {/* <span id={key}>{String(node.title)}</span> */}
             </Element>
@@ -77,8 +72,7 @@ const FileTree = (props: React.HTMLProps<HTMLDivElement>) => {
         }
         treeData.forEach(wrapNode);
         setTreeData(treeData as unknown as DataNode[]);
-      });
-    });
+      })
   }, [importedSqliteFilePath]);
 
   function selectPath(path: string, pathType: PathType) {

diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx
@@ -1,31 +1,43 @@
-import React from 'react'
-import { useLocation } from 'react-router-dom';
+import React, { useEffect } from "react";
+import { useLocation } from "react-router-dom";
 
 // eslint-disable-next-line import/namespace
-import { Allotment } from 'allotment';
+import { Allotment } from "allotment";
 
-import Navbar from '../Navbar/Navbar';
-import FileTree from '../FileTree/FileTree'
-import ImportFallback from '../ImportFallback/ImportFallback';
+import Navbar from "../Navbar/Navbar";
+import FileTree from "../FileTree/FileTree";
+import ImportFallback from "../ImportFallback/ImportFallback";
 
-import { useWorkbenchDB } from '../../contexts/dbContext';
-import { FILE_TREE_ROUTES, IMPORT_FALLBACK_ROUTES } from '../../constants/routes';
-import ProgressLoader from '../ProgressLoader/ProgressLoader';
+import { useWorkbenchDB } from "../../contexts/dbContext";
+import {
+  FILE_TREE_ROUTES,
+  IMPORT_FALLBACK_ROUTES,
+} from "../../constants/routes";
+import ProgressLoader from "../ProgressLoader/ProgressLoader";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faGear } from "@fortawesome/free-solid-svg-icons";
 
 import "allotment/dist/style.css";
-import './layout.css';
+import "./layout.css";
 
 const Layout = (props: React.PropsWithChildren) => {
   const { pathname } = useLocation();
-  const { initialized, loadingStatus } = useWorkbenchDB();
-
-  const isImportFallbackRoute = IMPORT_FALLBACK_ROUTES.find(route => pathname.includes(route)) !== undefined;
-  const showFileTree = FILE_TREE_ROUTES.find(route => pathname.includes(route)) !== undefined;
-
+  const { initialized, loadingStatus, processingQuery } = useWorkbenchDB();
+
+  const isImportFallbackRoute =
+    IMPORT_FALLBACK_ROUTES.find((route) => pathname.includes(route)) !==
+    undefined;
+  const showFileTree =
+    FILE_TREE_ROUTES.find((route) => pathname.includes(route)) !== undefined;
+
+  // useEffect(() => {
+  //   console.log("Loader status", processingQuery ? "Showing" : "Hiding");
+  // }, [processingQuery]);
+
   return (
-    <div className='d-flex flex-row'>
+    <div className="d-flex flex-row">
       <Navbar />
-      <Allotment className='pane-container'>
+      <Allotment className="pane-container">
         <Allotment.Pane
           visible={showFileTree && initialized}
           minSize={10}
@@ -35,21 +47,27 @@ const Layout = (props: React.PropsWithChildren) => {
         >
           <FileTree style={{ minHeight: "100vh" }} />
         </Allotment.Pane>
-        <Allotment.Pane className='content-pane'>
-          <div className='content-container'>
-            {
-              isImportFallbackRoute && !initialized ? (
-                loadingStatus !== null ?
-                  <ProgressLoader progress={loadingStatus} />
-                :
-                  <ImportFallback />
-              ) : props.children
-            }
+        <Allotment.Pane className="content-pane">
+          <div className="content-container">
+            {isImportFallbackRoute && !initialized ? (
+              loadingStatus !== null ? (
+                <ProgressLoader progress={loadingStatus} />
+              ) : (
+                <ImportFallback />
+              )
+            ) : (
+              props.children
+            )}
+            {processingQuery && (
+              <div className="query-processing-indicator">
+                Processing <FontAwesomeIcon icon={faGear} spin />
+              </div>
+            )}
           </div>
         </Allotment.Pane>
       </Allotment>
     </div>
-  )
-}
+  );
+};
 
-export default Layout
+export default Layout;
diff --git a/src/components/Layout/layout.css b/src/components/Layout/layout.css
@@ -8,12 +8,37 @@
   box-shadow: rgb(177 177 177) 1px 0px 18px -3px;
   overflow: overlay !important;
 }
+
 .content-pane {
   overflow-y: overlay !important;
 }
+
 .content-container {
   padding: 10px;
   padding-top: 5px;
   padding-bottom: 5px;
   min-height: 100%;
+}
+
+.query-processing-indicator {
+  position: fixed;
+  background: #f3f9ff;
+  padding: 10px;
+  right: 20px;
+  z-index: 999;
+  border-radius: 8px;
+  -webkit-box-shadow: 0px 3px 15px -2px rgba(0, 0, 0, 0.67);
+  box-shadow: 0px 3px 15px -2px rgba(0, 0, 0, 0.67);
+
+  /* Animate */
+  bottom: -100%;
+  opacity: 0;
+  animation: smooth-appear 0.5s ease forwards;
+}
+
+@keyframes smooth-appear {
+  to {
+    bottom: 20px;
+    opacity: 1;
+  }
 }
diff --git a/src/contexts/dbContext.tsx b/src/contexts/dbContext.tsx
@@ -36,9 +36,12 @@ interface BasicValueState {
 interface WorkbenchContextProperties extends BasicValueState {
   currentPath: string | null;
   currentPathType: PathType;
+  loadingStatus: null | number;
+  processingQuery: boolean;
   startImport: () => void;
   abortImport: () => void;
-  loadingStatus: null | number;
+  startProcessing: () => void;
+  endProcessing: () => void;
   sqliteParser: (sqliteFilePath: string, preventNavigation?: boolean) => void;
   jsonParser: (
     jsonFilePath: string,
@@ -55,16 +58,19 @@ interface WorkbenchContextProperties extends BasicValueState {
 export const defaultWorkbenchContextValue: WorkbenchContextProperties = {
   db: null,
   initialized: false,
-  importedSqliteFilePath: null,
-  loadingStatus: null,
   currentPath: null,
   currentPathType: "directory",
+  importedSqliteFilePath: null,
+  loadingStatus: null,
+  processingQuery: false,
   jsonParser: () => null,
   sqliteParser: () => null,
   importJsonFile: () => null,
   updateLoadingStatus: () => null,
   startImport: () => null,
   abortImport: () => null,
+  startProcessing: () => null,
+  endProcessing: () => null,
   updateCurrentPath: () => null,
   goToFileInTableView: () => null,
   updateWorkbenchDB: () => null,
@@ -80,6 +86,7 @@ export const WorkbenchDBProvider = (
   const navigate = useNavigate();
 
   const [loadingStatus, updateLoadingStatus] = useState<number | null>(null);
+  const [processingQuery, setProcessingQuery] = useState<boolean>(null);
   const [value, setValue] = useState<BasicValueState>({
     db: null,
     initialized: false,
@@ -92,13 +99,13 @@ export const WorkbenchDBProvider = (
     setCurrentPath(path);
     setCurrentPathType(pathType);
   }
-  
-  function changeRouteOnImport(){
+
+  function changeRouteOnImport() {
     navigate(DEFAULT_ROUTE_ON_IMPORT);
   }
 
-  function goToFileInTableView(path: string){
-    updateCurrentPath(path, 'file');
+  function goToFileInTableView(path: string) {
+    updateCurrentPath(path, "file");
     navigate("/" + ROUTES.TABLE_VIEW);
   }
 
@@ -456,15 +463,18 @@ export const WorkbenchDBProvider = (
     <WorkbenchContext.Provider
       value={{
         ...value,
-        loadingStatus,
-        updateLoadingStatus,
         currentPath,
         currentPathType,
+        loadingStatus,
+        processingQuery,
+        updateLoadingStatus,
         jsonParser,
         sqliteParser,
         importJsonFile,
         startImport,
         abortImport,
+        startProcessing: () => setProcessingQuery(true),
+        endProcessing: () => setProcessingQuery(false),
         updateCurrentPath,
         goToFileInTableView,
         updateWorkbenchDB,
@@ -475,4 +485,4 @@ export const WorkbenchDBProvider = (
   );
 };
 
-export const useWorkbenchDB = () => useContext(WorkbenchContext);
+export const useWorkbenchDB = () => useContext(WorkbenchContext);
diff --git a/src/pages/About/About.tsx b/src/pages/About/About.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { version } from "../../../package.json";
+import packageInfo from "../../../package.json";
 
 import "./about.css";
 
@@ -8,7 +8,7 @@ const About = () => {
     <div className="help">
       <h1>
         About ScanCode Workbench
-        <span className="app-version">v{version}</span>
+        <span className="app-version">v{packageInfo.version}</span>
       </h1>
       <br />
       <h3>Overview</h3>

diff --git a/src/pages/FileInfoDash/FileInfoDash.tsx b/src/pages/FileInfoDash/FileInfoDash.tsx
@@ -17,6 +17,8 @@ import "./FileInfoDash.css";
 
 const FileInfoDash = () => {
   const workbenchDB = useWorkbenchDB();
+  const { db, initialized, currentPath, startProcessing, endProcessing } =
+    workbenchDB;
 
   const [progLangsData, setProgLangsData] = useState(null);
   const [mimeTypesData, setMimeTypesData] = useState(null);
@@ -27,10 +29,10 @@ const FileInfoDash = () => {
   });
 
   useEffect(() => {
-    const { db, initialized, currentPath } = workbenchDB;
-
     if (!initialized || !db || !currentPath) return;
 
+    startProcessing();
+
     db.sync
       .then((db) => db.File.findOne({ where: { path: currentPath } }))
       .then((root) => {
@@ -88,7 +90,8 @@ const FileInfoDash = () => {
         const { chartData: mimeTypesChartData } =
           formatChartData(fileMimeTypes);
         setMimeTypesData(mimeTypesChartData);
-      });
+      })
+      .then(endProcessing);
   }, [workbenchDB]);
 
   return (