Experiment vertical orientation

Signed-off-by: Omkar Phansopkar <omkarphansopkar@gmail.com>

src/components/LicenseEntity/LicenseEntity.tsx

@@ -1,6 +1,7 @@
-import ReactJson from "@microlink/react-json-view";
 import { AgGridReact } from "ag-grid-react";
-import React, { useEffect, useState } from "react";
+import { ColDef, ColumnApi } from "ag-grid-community";
+import ReactJson from "@microlink/react-json-view";
+import React, { useEffect, useMemo, useState } from "react";
 
 import {
   ActiveLicenseEntity,
@@ -19,7 +20,10 @@ import {
 import { MatchedTextProvider } from "./MatchedTextContext";
 import { useWorkbenchDB } from "../../contexts/dbContext";
 import { ScanOptionKeys } from "../../utils/parsers";
-import { ColumnApi } from "ag-grid-community";
+import {
+  LicenseDetectionMatch,
+  LicenseMatch,
+} from "../../services/importedJsonTypes";
 
 import "./licenseEntity.css";
 import "../../styles/entityCommonStyles.css";
@@ -48,6 +52,82 @@ const LicenseEntity = (props: LicenseDetectionEntityProps) => {
   const matches = activeLicenseEntity?.license?.matches;
   const file_regions = activeLicenseEntity?.license?.file_regions;
 
+  const matchesTransposedRows = useMemo(() => {
+    if (!matches) return [];
+
+    if (activeLicenseEntity.type === "detection") {
+      const matches = activeLicenseEntity?.license?.matches;
+      const fields: (keyof LicenseDetectionMatch)[] = [
+        "license_expression",
+        "score",
+        "matched_length",
+        "match_coverage",
+        "matcher",
+        "matched_text",
+        "rule_url",
+        "license_expression_spdx",
+      ];
+
+      const rowData = fields.map((field) => ({
+        field,
+        ...Object.fromEntries(
+          matches.map((match, idx) => [String(idx), match[field]])
+        ),
+      }));
+      return rowData;
+    } else {
+      const matches = activeLicenseEntity?.license?.matches;
+      const fields: (keyof LicenseMatch)[] = [
+        "license_expression",
+        "score",
+        "matched_length",
+        "match_coverage",
+        "matcher",
+        "matched_text",
+        "rule_url",
+      ];
+
+      const rowData = fields.map((field) => ({
+        field,
+        ...Object.fromEntries(
+          matches.map((match, idx) => [String(idx), match[field]])
+        ),
+      }));
+      return rowData;
+    }
+  }, [matches]);
+
+  // Transpose table
+  const matchesTransposedColumnDefs = useMemo(() => {
+    const matches = activeLicenseEntity?.license?.matches;
+
+    if (!matches) return [];
+
+    const TransposedDefaultColDef: ColDef = {
+      resizable: true,
+      sortable: false,
+      filter: false,
+      flex: 1,
+      minWidth: 200,
+    };
+    return [
+      {
+        ...TransposedDefaultColDef,
+        headerName: "License Expression",
+        field: "field",
+        width: 200,
+        maxWidth: 200,
+      },
+      ...matches.map((match, idx) => {
+        return {
+          headerName: match.license_expression,
+          field: String(idx),
+          ...TransposedDefaultColDef,
+        };
+      }),
+    ];
+  }, [matches]);
+
   if (!activeLicenseEntity) {
     return (
       <div>
@@ -125,14 +205,34 @@ const LicenseEntity = (props: LicenseDetectionEntityProps) => {
       <br />
       <MatchedTextProvider>
         <b>Matches</b>
+        <AgGridReact
+          rowData={matchesTransposedRows}
+          columnDefs={matchesTransposedColumnDefs}
+          // rowData={matches}
+          // columnDefs={
+          //   activeLicenseEntity.type === "detection"
+          //     ? LicenseDetectionMatchCols
+          //     : LicenseClueMatchCols
+          // }
+          onGridReady={(params) => {
+            params.api.sizeColumnsToFit();
+            setMatchesTableColumnApi(params.columnApi);
+          }}
+          onGridSizeChanged={(params) => params.api.sizeColumnsToFit()}
+          className="ag-theme-alpine ag-grid-customClass entity-table"
+          ensureDomOrder
+          enableCellTextSelection
+          pagination={false}
+          defaultColDef={DEFAULT_MATCHES_COL_DEF}
+        />
+        <br />
         <AgGridReact
           rowData={matches}
           columnDefs={
             activeLicenseEntity.type === "detection"
               ? LicenseDetectionMatchCols
               : LicenseClueMatchCols
           }
-          onGridReady={(params) => setMatchesTableColumnApi(params.columnApi)}
           className="ag-theme-alpine ag-grid-customClass entity-table"
           ensureDomOrder
           enableCellTextSelection

src/components/LicenseEntity/MatchesTableCols.ts

@@ -64,7 +64,7 @@ export const MATCH_COLS: MatchColumns = {
     field: "matched_text",
     headerName: "Matched Text",
     cellRenderer: MatchedTextRenderer,
-    width: 150,
+    width: 300,
   },
   rule_url: {
     colId: "rule_url",
@@ -90,10 +90,10 @@ export const MATCH_COLS: MatchColumns = {
 export const LicenseDetectionMatchCols: ColDef[] = [
   MATCH_COLS.license_expression,
   MATCH_COLS.score,
+  MATCH_COLS.matched_text,
   MATCH_COLS.matched_length,
   MATCH_COLS.match_coverage,
   MATCH_COLS.matcher,
-  MATCH_COLS.matched_text,
   MATCH_COLS.rule_url,
   MATCH_COLS.license_expression_spdx,
 ];

src/constants/routes.ts

@@ -37,4 +37,4 @@ export const IMPORT_FALLBACK_ROUTES = [
   ROUTES.SCAN_INFO,
 ];
 
-export const DEFAULT_ROUTE_ON_IMPORT = ROUTES.TABLE_VIEW;
+export const DEFAULT_ROUTE_ON_IMPORT = ROUTES.LICENSES;

src/pages/TableView/CustomCellRenderers/Licenses/MatchedTextRenderer.tsx

@@ -13,7 +13,7 @@ const MatchedTextRenderer = (props: MatchedTextRendererProps) => {
   const { openDiffWindow } = useMatchedTextContext();
 
   const trimmedText = useMemo(
-    () => trimStringWithEllipsis(value || "", 30),
+    () => trimStringWithEllipsis(value || "", 150),
     [value]
   );