Fix license detection parser issues, trimmed filter options, hide empty 'other dependencies'

.eslintrc.json

@@ -4,20 +4,22 @@
     "es6": true,
     "node": true
   },
+  "plugins": ["css-import-order"],
   "extends": [
     "eslint:recommended",
     "plugin:@typescript-eslint/eslint-recommended",
     "plugin:@typescript-eslint/recommended",
     "plugin:import/recommended",
     "plugin:import/electron",
-    "plugin:import/typescript"
+    "plugin:import/typescript",
+    "plugin:css-import-order/recommended"
   ],
   "parser": "@typescript-eslint/parser",
   "settings": {
     "import/resolver": {
       "node": {
-        "extensions": [".js", ".jsx", ".ts", ".tsx"]
+        "extensions": [".js", ".jsx", ".ts", ".tsx", "json"]
       }
     }
-  },
+  }
 }

package.json

@@ -57,6 +57,7 @@
     "electron-packager": "^16.0.0",
     "electron-rebuild": "^3.2.9",
     "eslint": "^8.24.0",
+    "eslint-plugin-css-import-order": "^1.1.0",
     "eslint-plugin-import": "^2.26.0",
     "fork-ts-checker-webpack-plugin": "^7.2.13",
     "json-loader": "^0.5.7",

src/App.tsx

@@ -1,37 +1,34 @@
 import React from "react";
-import { HashRouter, Routes, Route } from "react-router-dom";
+import { HashRouter, Route,Routes } from "react-router-dom";
 import { ToastContainer } from "react-toastify";
 
+import DropZone from "./components/DropZone/DropZone";
+import Layout from "./components/Layout/Layout";
 import { ROUTES } from "./constants/routes";
 import { WorkbenchDBProvider } from "./contexts/dbContext";
-
-import Layout from "./components/Layout/Layout";
-import DropZone from "./components/DropZone/DropZone";
-
-import Home from "./pages/Home/Home";
-import TableView from "./pages/TableView/TableView";
+import { WorkbenchStateProvider } from "./contexts/stateContext";
+import About from "./pages/About/About";
+import ChartView from "./pages/ChartView/ChartView";
 import FileInfoDash from "./pages/FileInfoDash/FileInfoDash";
+import Home from "./pages/Home/Home";
+import LicenseDetections from "./pages/LicenseDetections/LicenseDetections";
 import LicenseInfoDash from "./pages/LicenseInfoDash/LicenseInfoDash";
 import PackageInfoDash from "./pages/PackageInfoDash/PackageInfoDash";
 import Packages from "./pages/Packages/Packages";
-import LicenseDetections from "./pages/LicenseDetections/LicenseDetections";
-import ChartView from "./pages/ChartView/ChartView";
-import ScanInfo from "./pages/ScanInfo/ScanInfo";
-import About from "./pages/About/About";
 import PageNotFound from "./pages/PageNotFound";
+import ScanInfo from "./pages/ScanInfo/ScanInfo";
+import TableView from "./pages/TableView/TableView";
 
 import "./utils/ensureRendererDeps";
-
 import "./fontawesome";
+
 import "rc-tree/assets/index.css";
 import "react-toastify/dist/ReactToastify.css";
 import "bootstrap/dist/css/bootstrap.min.css";
 import "react-tooltip/dist/react-tooltip.css";
-
 import "./app.css";
 import "./dashStyles.css";
 import "./customFaColors.css";
-import { WorkbenchStateProvider } from "./contexts/stateContext";
 
 const App = () => {
   return (

src/components/FileTree/FileTree.tsx

@@ -16,7 +16,6 @@ const FileTree = (props: React.HTMLProps<HTMLDivElement>) => {
     initialized,
     importedSqliteFilePath,
     currentPath,
-    currentPathType,
     updateCurrentPath,
   } = workbenchDB;
 
@@ -38,7 +37,9 @@ const FileTree = (props: React.HTMLProps<HTMLDivElement>) => {
     updateCurrentPath(path, pathType);
   }
 
-  // console.log("Current path & type", currentPath, currentPathType);
+  // useEffect(() => {
+  //   console.log("Current path", currentPath);
+  // }, [currentPath]);
 
   if (!treeData) {
     return (
@@ -58,6 +59,7 @@ const FileTree = (props: React.HTMLProps<HTMLDivElement>) => {
         showLine
         treeData={treeData}
         switcherIcon={SwitcherIcon}
+        selectedKeys={[currentPath]}
         onSelect={(keys, info) => {
           if (keys && keys[0])
             selectPath(

src/components/Layout/Layout.tsx

@@ -10,13 +10,14 @@ 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 './layout.css';
 import "allotment/dist/style.css";
+import './layout.css';
 
 const Layout = (props: React.PropsWithChildren) => {
   const { pathname } = useLocation();
-  const { initialized } = useWorkbenchDB();
+  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;
@@ -36,7 +37,14 @@ const Layout = (props: React.PropsWithChildren) => {
         </Allotment.Pane>
         <Allotment.Pane className='content-pane'>
           <div className='content-container'>
-            { isImportFallbackRoute && !initialized ? <ImportFallback /> : props.children }
+            {
+              isImportFallbackRoute && !initialized ? (
+                loadingStatus !== null ?
+                  <ProgressLoader progress={loadingStatus} />
+                :
+                  <ImportFallback />
+              ) : props.children
+            }
           </div>
         </Allotment.Pane>
       </Allotment>

src/components/Layout/layout.css

@@ -15,5 +15,5 @@
   padding: 10px;
   padding-top: 5px;
   padding-bottom: 5px;
-  min-height: 95%;
+  min-height: 100%;
 }

src/components/LicenseDetection/FileRegionTableCols.ts

@@ -1,4 +1,5 @@
 import { ColDef } from "ag-grid-community";
+import { TickRenderer } from "../../pages/TableView/CustomCellRenderers";
 
 const MINI_FIELD_WIDTH = 90;
 
@@ -29,4 +30,11 @@ export const DetectionFileRegionCols: ColDef[] = [
     field: 'end_line',
     width: MINI_FIELD_WIDTH,
   },
+  {
+    headerName: 'From package',
+    field: 'from_package',
+    cellRenderer: TickRenderer,
+    maxWidth: 110,
+    suppressMenu: true,
+  },
 ]

src/components/LicenseDetection/LicenseDetectionEntity.tsx

@@ -1,115 +1,95 @@
-import React, { useEffect } from 'react'
-import ReactJson from '@microlink/react-json-view';
-import { AgGridReact } from 'ag-grid-react';
+import ReactJson from "@microlink/react-json-view";
+import { AgGridReact } from "ag-grid-react";
+import React from "react";
 
-import { DEFAULT_MATCHES_COL_DEF, DetectionMatchesCols } from './MatchesTableCols';
-import { LicenseDetectionDetails } from '../../pages/LicenseDetections/licenseDefinitions';
+import { LicenseDetectionDetails } from "../../pages/LicenseDetections/licenseDefinitions";
+import {
+  DEFAULT_FILE_REGION_COL_DEF,
+  DetectionFileRegionCols,
+} from "./FileRegionTableCols";
+import {
+  DEFAULT_MATCHES_COL_DEF,
+  DetectionMatchesCols,
+} from "./MatchesTableCols";
 
-import './licenseDetection.css'
-import '../../styles/entityCommonStyles.css'
-import { DEFAULT_FILE_REGION_COL_DEF, DetectionFileRegionCols } from './FileRegionTableCols';
+import "../../styles/entityCommonStyles.css";
+import "./licenseDetection.css";
 
 interface LicenseDetectionEntityProps {
-  licenseDetection: LicenseDetectionDetails | null,
+  licenseDetection: LicenseDetectionDetails | null;
 }
 const LicenseDetectionEntity = (props: LicenseDetectionEntityProps) => {
   const { licenseDetection } = props;
   const matches = licenseDetection?.matches || [];
   const file_regions = licenseDetection?.file_regions || [];
 
-  useEffect(() => {
-    // if(matches)
-    //   matches.push({
-    //     ...matches[0]
-    //   })
-  }, [matches]);
-
-  if(!licenseDetection){
+  if (!licenseDetection) {
     return (
       <div>
-        <h5>
-          No License Detection to show
-        </h5>
+        <h5>No License Detection to show</h5>
       </div>
-    )
+    );
   }
   return (
-    <div className='license-detecion-entity'>
+    <div className="license-detecion-entity">
       <h5>
-        { licenseDetection.license_expression }
-        <br/>
+        {licenseDetection.license_expression}
+        <br />
       </h5>
-      <div className='license-entity-properties'>
-        {
-          [
-            // [ "License Expression:", licenseDetection.license_expression || "NA" ],
-            [ "License Identifier:", licenseDetection.identifier || "NA" ],
-            [ "Instances:", (licenseDetection.detection_count || 0).toString() ],
-            ...(
-              licenseDetection.detection_log &&
-              Array.isArray(licenseDetection.detection_log) && licenseDetection.detection_log.length &&
+      <div className="license-entity-properties">
+        {[
+          // [ "License Expression:", licenseDetection.license_expression || "NA" ],
+          ["License Identifier:", licenseDetection.identifier || "NA"],
+          ["Instances:", (licenseDetection.detection_count || 0).toString()],
+          ...(licenseDetection.detection_log &&
+            Array.isArray(licenseDetection.detection_log) &&
+            licenseDetection.detection_log.length && [
               [
-                [
-                  "Detection log ",
-                  <>
-                    <ul>
-                      { 
-                        licenseDetection.detection_log.map((log_item, idx) => (
-                          <li key={String(log_item)+idx}>
-                            { log_item }
-                          </li>
-                        ))
-                      }
-                    </ul>
-                  </>
-                ]
-              ]
-            )
-          ].map(entry => (
-            <React.Fragment key={entry[0].toString()}>
-              <span className='property'>
-                { entry[0] || "" }
-              </span>
-              <span className='value'>
-                { entry[1] || "" }
-              </span>
-              <br/>
-            </React.Fragment>
-          ))
-        }
+                "Detection log ",
+                <>
+                  <ul>
+                    {licenseDetection.detection_log.map((log_item, idx) => (
+                      <li key={String(log_item) + idx}>{log_item}</li>
+                    ))}
+                  </ul>
+                </>,
+              ],
+            ]),
+        ].map((entry) => (
+          <React.Fragment key={entry[0].toString()}>
+            <span className="property">{entry[0] || ""}</span>
+            <span className="value">{entry[1] || ""}</span>
+            <br />
+          </React.Fragment>
+        ))}
       </div>
-
       {/* <br/>
       <br/>
       <br/>
       <br/> */}
-      <br/>
+      <br />
       Matches
       <AgGridReact
         rowData={matches}
         columnDefs={DetectionMatchesCols}
         className="ag-theme-alpine ag-grid-customClass matches-table"
-
         ensureDomOrder
         enableCellTextSelection
-
         pagination={false}
         defaultColDef={DEFAULT_MATCHES_COL_DEF}
       />
-      <br/>
+      <br />
       File regions
       <AgGridReact
         rowData={file_regions}
         columnDefs={DetectionFileRegionCols}
         className="ag-theme-alpine ag-grid-customClass file-regions-table"
-
         ensureDomOrder
         enableCellTextSelection
-
         pagination={false}
         defaultColDef={DEFAULT_FILE_REGION_COL_DEF}
       />
-      <br/>
+      <br />
       Raw license detection:
       <ReactJson
         src={licenseDetection}
@@ -118,7 +98,7 @@ const LicenseDetectionEntity = (props: LicenseDetectionEntityProps) => {
         collapsed={0}
       />
     </div>
-  )
-}
+  );
+};
 
-export default LicenseDetectionEntity
+export default LicenseDetectionEntity;