Implemented Processing indicator for queries

Signed-off-by: Omkar Phansopkar <[email protected]>

Author: OmkarPh

package-lock.json

@@ -69,7 +69,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",

package.json

@@ -44,8 +44,8 @@ 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
@@ -60,8 +60,7 @@ const FileTree = (props: React.HTMLProps<HTMLDivElement>) => {
         }
         treeData.forEach(wrapNode);
         setTreeData(treeData as unknown as DataNode[]);
-      });
-    });
+      })
   }, [importedSqliteFilePath]);
 
   function selectPath(path: string, pathType: PathType) {

src/components/FileTree/FileTree.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;

src/components/Layout/Layout.tsx

@@ -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;
+  }
 }

src/components/Layout/layout.css

@@ -38,9 +38,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,
@@ -61,12 +64,15 @@ export const defaultWorkbenchContextValue: WorkbenchContextProperties = {
   loadingStatus: null,
   currentPath: null,
   currentPathType: "directory",
+  processingQuery: false,
   jsonParser: () => null,
   sqliteParser: () => null,
   importJsonFile: () => null,
   updateLoadingStatus: () => null,
   startImport: () => null,
   abortImport: () => null,
+  startProcessing: () => null,
+  endProcessing: () => null,
   updateCurrentPath: () => null,
   goToFileInTableView: () => null,
 };
@@ -81,6 +87,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,
@@ -462,15 +469,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,
       }}

src/contexts/dbContext.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>

src/pages/About/About.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 (

src/pages/FileInfoDash/FileInfoDash.tsx

@@ -2,7 +2,6 @@ import moment from "moment";
 import electron from "electron";
 import * as electronFs from "fs";
 import { toast } from "react-toastify";
-import { useNavigate } from "react-router-dom";
 import React, { useMemo, useState } from "react";
 
 import {