Schema/update for output format v3.0.0

.eslintrc.json

@@ -12,5 +12,12 @@
     "plugin:import/electron",
     "plugin:import/typescript"
   ],
-  "parser": "@typescript-eslint/parser"
+  "parser": "@typescript-eslint/parser",
+  "settings": {
+    "import/resolver": {
+      "node": {
+        "extensions": [".js", ".jsx", ".ts", ".tsx"]
+      }
+    }
+  },
 }

package.json

@@ -44,6 +44,7 @@
     "@types/node": "^18.8.0",
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
+    "@types/react-toastify": "^4.1.0",
     "@types/sequelize": "^4.28.14",
     "@types/sqlite3": "^3.1.8",
     "@types/validator": "^13.7.7",
@@ -59,6 +60,7 @@
     "eslint": "^8.24.0",
     "eslint-plugin-import": "^2.26.0",
     "fork-ts-checker-webpack-plugin": "^7.2.13",
+    "json-loader": "^0.5.7",
     "native-ext-loader": "^2.3.0",
     "node-loader": "^2.0.0",
     "react-scripts": "^5.0.1",
@@ -87,6 +89,7 @@
     "font-awesome": "^4.7.0",
     "jquery": "^3.6.1",
     "JSONStream": "^1.3.5",
+    "license-expressions": "^0.6.0",
     "moment": "^2.29.4",
     "packageurl-js": "^1.0.0",
     "pg-hstore": "^2.3.4",
@@ -99,8 +102,11 @@
     "react-pro-sidebar": "^0.7.1",
     "react-router-dom": "^6.4.1",
     "react-toastify": "^9.0.8",
+    "react-tooltip": "^5.10.4",
     "sequelize": "^6.23.2",
     "sequelize-cli": "^6.5.1",
+    "spdx-correct": "^3.1.1",
+    "spdx-license-ids": "^3.0.12",
     "sqlite3": "^5.1.2",
     "url": "^0.11.0",
     "url-loader": "^4.1.1",
@@ -135,9 +141,9 @@
         }
       ],
       "plugins": [
-        [
-          "@electron-forge/plugin-webpack",
-          {
+        {
+          "name": "@electron-forge/plugin-webpack",
+          "config": {
             "mainConfig": "./webpack.main.config.js",
             "renderer": {
               "config": "./webpack.renderer.config.js",
@@ -150,7 +156,7 @@
               ]
             }
           }
-        ]
+        }
       ]
     }
   }

src/App.tsx

@@ -27,10 +27,12 @@ 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 LicenseDetections from './pages/LicenseDetections/LicenseDetections';
 
 const App = () => {
   return (
@@ -46,6 +48,7 @@ const App = () => {
                 <Route path={ROUTES.FILE_DASHBOARD} element={<FileInfoDash />} />
                 <Route path={ROUTES.LICENSE_DASHBOARD} element={<LicenseInfoDash />} />
                 <Route path={ROUTES.PACKAGE_DASHBOARD} element={<PackageInfoDash />} />
+                <Route path={ROUTES.LICENSE_DETECTIONS} element={<LicenseDetections />} />
                 <Route path={ROUTES.PACKAGES} element={<Packages />} />
                 <Route path={ROUTES.CHART_SUMMARY} element={<ChartView />} />
                 <Route path={ROUTES.SCAN_INFO} element={<ScanInfo />} />

src/app.css

@@ -15,6 +15,12 @@ a, a:not([href]), a:not([href]):not([class]) {
 a:hover, a:not([href]):hover, a:not([href]):not([class]):hover {
   color: #0a58ca;
 }
+img {
+	-webkit-user-select: none;
+	-webkit-user-drag: none;
+	-webkit-app-region: no-drag;
+  user-select: none;
+}
 
 
 /*---------------------------------------

src/components/EllipticLoader.tsx

@@ -9,6 +9,7 @@ interface EllipticLoaderProps {
   ariaLabel?: string,
   wrapperClass?: string,
 }
+
 const EllipticLoader = (props: EllipticLoaderProps) => {
   return (
     <ThreeDots

src/components/FileTree/FileTree.tsx

@@ -1,50 +1,52 @@
-import RcTree from 'rc-tree';
-import { DataNode } from 'rc-tree/lib/interface';
-import React, { useEffect, useState } from 'react';
+import RcTree from "rc-tree";
+import { DataNode } from "rc-tree/lib/interface";
+import React, { useEffect, useState } from "react";
 
-import EllipticLoader from '../EllipticLoader';
-import { useWorkbenchDB } from '../../contexts/workbenchContext';
+import EllipticLoader from "../EllipticLoader";
+import { PathType, useWorkbenchDB } from "../../contexts/workbenchContext";
 
-import SwitcherIcon from './SwitcherIcon';
+import SwitcherIcon from "./SwitcherIcon";
 
-import './FileTree.css';
+import "./FileTree.css";
 
 const FileTree = (props: React.HTMLProps<HTMLDivElement>) => {
   const workbenchDB = useWorkbenchDB();
-  const { db, initialized, importedSqliteFilePath, updateCurrentPath } = workbenchDB;
+  const {
+    db,
+    initialized,
+    importedSqliteFilePath,
+    currentPath,
+    currentPathType,
+    updateCurrentPath,
+  } = workbenchDB;
 
   const [treeData, setTreeData] = useState<DataNode[] | null>(null);
 
   useEffect(() => {
-    if(!initialized || !db || !importedSqliteFilePath)
-      return;
-
-    db.sync
-      .then(() => {
-        db.findAllJSTree()
-          .then((treeData) => {
-            setTreeData(treeData as unknown as DataNode[]);
-          });
-    })
+    if (!initialized || !db || !importedSqliteFilePath) return;
+
+    db.sync.then(() => {
+      db.findAllJSTree().then((treeData) => {
+        setTreeData(treeData as unknown as DataNode[]);
+      });
+    });
   }, [importedSqliteFilePath]);
 
-  function selectPath(path: string){
-    if(!initialized)
-      return;
+  function selectPath(path: string, pathType: PathType) {
+    if (!initialized) return;
     // console.log("FileTree: selected path:", path);
-    updateCurrentPath(path);
+    updateCurrentPath(path, pathType);
   }
 
-  if(!treeData){
+  // console.log("Current path & type", currentPath, currentPathType);
+
+  if (!treeData) {
     return (
-      <div className='file-tree-loader'>
+      <div className="file-tree-loader">
         <div>
           Processing File Tree
-          <br/>
-          <EllipticLoader
-            radius={1}
-            wrapperClass="loader"
-          />
+          <br />
+          <EllipticLoader radius={1} wrapperClass="loader" />
         </div>
       </div>
     );
@@ -56,26 +58,26 @@ const FileTree = (props: React.HTMLProps<HTMLDivElement>) => {
         showLine
         treeData={treeData}
         switcherIcon={SwitcherIcon}
-        onActiveChange={selectPath}
-        onSelect={keys => {
-          if(keys && keys[0])
-            selectPath(keys[0].toString())
+        onSelect={(keys, info) => {
+          if (keys && keys[0])
+            selectPath(
+              keys[0].toString(),
+              (info.node as any).dataValues.type
+            );
         }}
-
-        // For UI testing with dummy data
-        defaultExpandedKeys={['0', '0-0', '0-0-0', '0-0-0-0']}
-
         motion={{
-          motionName: 'node-motion',
+          motionName: "node-motion",
           motionAppear: false,
           onAppearStart: () => ({ height: 0 }),
-          onAppearActive: (node: HTMLElement) => ({ height: node.scrollHeight }),
+          onAppearActive: (node: HTMLElement) => ({
+            height: node.scrollHeight,
+          }),
           onLeaveStart: (node: HTMLElement) => ({ height: node.offsetHeight }),
           onLeaveActive: () => ({ height: 0 }),
         }}
       />
     </div>
-  )
-}
+  );
+};
 
-export default FileTree
+export default FileTree;

src/components/ImportFallback/ImportFallback.tsx

@@ -10,7 +10,7 @@ const ImportFallback = () => {
   return (
     <div className='import-fallback'>
       <Link to={ROUTES.HOME}>
-        <img src={AddFileImage} draggable={false} />
+        <img src={AddFileImage} draggable={false} onDragStart={() => false} />
       </Link>
       <br/>
       <h2>

src/components/Layout/layout.css

@@ -3,21 +3,17 @@
   height: 100vh !important;
 }
 
-/* .pane-container .content-pane {
-
-} */
-
 .file-tree-pane {
   border: 0;
   box-shadow: rgb(177 177 177) 1px 0px 18px -3px;
   overflow: overlay !important;
 }
 .content-pane {
-  overflow: overlay !important;
+  overflow-y: overlay !important;
 }
 .content-container {
   padding: 10px;
   padding-top: 5px;
   padding-bottom: 5px;
-  min-height: 100%;
+  min-height: 95%;
 }

src/components/LicenseDetection/FileRegionTableCols.ts

@@ -0,0 +1,32 @@
+import { ColDef } from "ag-grid-community";
+
+const MINI_FIELD_WIDTH = 90;
+
+export const DEFAULT_FILE_REGION_COL_DEF: ColDef = {
+  sortable: true,
+  resizable: true,
+  filter: true,
+  wrapText: true,
+  autoHeight: true,
+  wrapHeaderText: true,
+  flex: 1,
+  cellStyle: { "whiteSpace": "normal" },
+}
+
+export const DetectionFileRegionCols: ColDef[] = [
+  {
+    headerName: 'Path',
+    field: 'path',
+    width: 270,
+  },
+  {
+    headerName: 'Start line',
+    field: 'start_line',
+    width: MINI_FIELD_WIDTH,
+  },
+  {
+    headerName: 'End line',
+    field: 'end_line',
+    width: MINI_FIELD_WIDTH,
+  },
+]