Merge pull request #606 from nexB/fix/autoTableDimensions

Automatic height for table
aboutcode-org · Oct 18, 2023 · d21e55d · d21e55d
2 parents 241487f + e397372
commit d21e55d
Show file tree

Hide file tree

Showing 16 changed files with 258 additions and 180 deletions.
diff --git a/docs/.gitignore b/docs/.gitignore
@@ -1,5 +1,5 @@
 # Virtual environment
-.venv/
+venv/
 
 # sphinx build folder
 build/

diff --git a/src/components/FileTree/FileTree.tsx b/src/components/FileTree/FileTree.tsx
@@ -55,6 +55,7 @@ const FileTree = (props: React.HTMLProps<HTMLDivElement>) => {
     if (alreadyRenderedTargetNode) {
       // Immediate scroll possible
       scrollTreeNode(alreadyRenderedTargetNode);
+      endProcessing();
     } else {
       // Wait for target node to render
       pendingScrollerTimeoutId = setTimeout(() => {

diff --git a/src/components/LicenseEntity/LicenseEntity.tsx b/src/components/LicenseEntity/LicenseEntity.tsx
@@ -112,34 +112,38 @@ const LicenseEntity = (props: LicenseDetectionEntityProps) => {
               : LicenseClueMatchCols
           }
           onGridReady={(params) => setMatchesTableColumnApi(params.columnApi)}
-          className="ag-theme-alpine ag-grid-customClass matches-table"
+          className="ag-theme-alpine ag-grid-customClass entity-table"
           ensureDomOrder
           enableCellTextSelection
           pagination={false}
           defaultColDef={DEFAULT_MATCHES_COL_DEF}
         />
       </MatchedTextProvider>
       <br />
+      <br />
       File regions
       <AgGridReact
         rowData={file_regions}
         columnDefs={DetectionFileRegionCols}
         onGridReady={(params) => params.api.sizeColumnsToFit()}
         onGridSizeChanged={(params) => params.api.sizeColumnsToFit()}
-        className="ag-theme-alpine ag-grid-customClass file-regions-table"
+        className="ag-theme-alpine ag-grid-customClass entity-table"
         ensureDomOrder
+        suppressHorizontalScroll
         enableCellTextSelection
         pagination={false}
         defaultColDef={DEFAULT_FILE_REGION_COL_DEF}
       />
       <br />
-      Raw license {activeLicenseEntity.type}
-      <ReactJson
-        src={activeLicenseEntity.license}
-        enableClipboard={false}
-        displayDataTypes={false}
-        collapsed={0}
-      />
+      <div className="raw-info-section">
+        Raw license {activeLicenseEntity.type}
+        <ReactJson
+          src={activeLicenseEntity.license}
+          enableClipboard={false}
+          displayDataTypes={false}
+          collapsed={0}
+        />
+      </div>
     </div>
   );
 };

diff --git a/src/components/LicenseEntity/MatchedTextContext.tsx b/src/components/LicenseEntity/MatchedTextContext.tsx
@@ -12,6 +12,8 @@ import {
 import { ScanOptionKeys } from "../../utils/parsers";
 import { SYNTHETIC_RULE_PREFIXES } from "../../constants/licenseRules";
 
+import "./matchedText.css";
+
 interface MatchedTextContextProperties {
   showDiffWindow: boolean;
   openDiffWindow: (

diff --git a/src/components/LicenseEntity/licenseEntity.css b/src/components/LicenseEntity/licenseEntity.css
@@ -15,73 +15,3 @@
   margin-right: 5px;
 }
 
-.matches-table,
-.file-regions-table {
-  max-height: 30vh;
-}
-
-.matched-text-diff-modal {
-  overflow: auto;
-  max-height: calc(100vh - 120px);
-}
-
-.matched-text-diff-modal .row {
-  padding: 5px;
-}
-
-.matched-text-diff-modal .rule-text-section {
-  background-color: #f6feff;
-  padding: 0;
-}
-
-.matched-text-diff-modal .matched-text-section {
-  background-color: #f9fffc;
-  padding: 0;
-}
-
-.matched-text-diff-modal .diff-table {
-  table-layout: fixed;
-  width: 100%;
-}
-
-.matched-text-diff-modal .diff-table th {
-  padding: 15px;
-  padding-left: 10px;
-  font-weight: 500;
-  background-color: #fafbfc;
-}
-
-.matched-text-diff-modal .diff-line {
-  display: table-row-group;
-  margin: 0;
-  vertical-align: top;
-  white-space: pre;
-  overflow-wrap: anywhere;
-}
-
-.matched-text-diff-modal .line-number {
-  margin-right: 15px;
-  padding-left: 10px;
-  padding-right: 10px;
-  opacity: 0.9;
-}
-
-.matched-text-diff-modal .line-content {
-  padding-left: 10px;
-  padding-right: 10px;
-}
-
-.matched-text-diff-modal .diff-line .line-content .line-text {
-  margin: 0;
-  display: inline-block;
-  white-space: pre-wrap;
-  line-height: 20px;
-}
-
-.matched-text-diff-modal .diff-line .line-content .removed-snippet {
-  background-color: #fdb8c0;
-}
-
-.matched-text-diff-modal .diff-line .line-content .added-snippet {
-  background-color: #acf2bd;
-}
diff --git a/src/components/LicenseEntity/matchedText.css b/src/components/LicenseEntity/matchedText.css
@@ -0,0 +1,62 @@
+.matched-text-diff-modal .row {
+  padding: 5px;
+  max-height: calc(100vh - 20vh);
+  overflow: auto;
+}
+
+.matched-text-diff-modal .rule-text-section {
+  background-color: #f6feff;
+  padding: 0;
+}
+
+.matched-text-diff-modal .matched-text-section {
+  background-color: #f9fffc;
+  padding: 0;
+}
+
+.matched-text-diff-modal .diff-table {
+  table-layout: fixed;
+  width: 100%;
+}
+
+.matched-text-diff-modal .diff-table th {
+  padding: 15px;
+  padding-left: 10px;
+  font-weight: 500;
+  background-color: #fafbfc;
+}
+
+.matched-text-diff-modal .diff-line {
+  display: table-row-group;
+  margin: 0;
+  vertical-align: top;
+  white-space: pre;
+  overflow-wrap: anywhere;
+}
+
+.matched-text-diff-modal .line-number {
+  margin-right: 15px;
+  padding-left: 10px;
+  padding-right: 10px;
+  opacity: 0.9;
+}
+
+.matched-text-diff-modal .line-content {
+  padding-left: 10px;
+  padding-right: 10px;
+}
+
+.matched-text-diff-modal .diff-line .line-content .line-text {
+  margin: 0;
+  display: inline-block;
+  white-space: pre-wrap;
+  line-height: 20px;
+}
+
+.matched-text-diff-modal .diff-line .line-content .removed-snippet {
+  background-color: #fdb8c0;
+}
+
+.matched-text-diff-modal .diff-line .line-content .added-snippet {
+  background-color: #acf2bd;
+}
diff --git a/src/components/PackagesEntityDetails/DependenciesTableCols.ts.ts b/src/components/PackagesEntityDetails/DependenciesTableCols.ts.ts
@@ -29,36 +29,36 @@ export const DependenciesTableCols: DepsColDef[] = [
   {
     headerName: "Scope",
     field: "scope",
-    width: 130,
+    width: 160,
   },
   {
     headerName: "Resolved",
     field: "is_resolved",
     cellRenderer: TickRenderer,
-    maxWidth: 95,
+    maxWidth: 92,
   },
   {
     headerName: "Runtime",
     field: "is_runtime",
     cellRenderer: TickRenderer,
-    maxWidth: 95,
+    maxWidth: 92,
   },
   {
     headerName: "Optional",
     field: "is_optional",
     cellRenderer: TickRenderer,
-    maxWidth: 95,
+    maxWidth: 92,
   },
   {
     headerName: "Data source ID",
     field: "datasource_id",
-    width: 130,
+    width: 165,
   },
   {
     headerName: "Data file",
     field: "datafile_path",
     cellRenderer: FilePathRenderer,
-    width: 200,
+    width: 400,
   },
   {
     headerName: "Extracted requirement",

diff --git a/src/components/PackagesEntityDetails/DependencyEntity.tsx b/src/components/PackagesEntityDetails/DependencyEntity.tsx
@@ -97,14 +97,15 @@ const DependencyEntity = (props: DependencyEntityProps) => {
           />
         </div>
       )}
-      <br />
-      Raw dependency:
-      <ReactJson
-        src={dependency || {}}
-        enableClipboard={false}
-        displayDataTypes={false}
-        collapsed={0}
-      />
+      <div className="raw-info-section">
+        Raw dependency:
+        <ReactJson
+          src={dependency || {}}
+          enableClipboard={false}
+          displayDataTypes={false}
+          collapsed={0}
+        />
+      </div>
     </div>
   );
 };

diff --git a/src/components/PackagesEntityDetails/PackageEntity.tsx b/src/components/PackagesEntityDetails/PackageEntity.tsx
@@ -18,11 +18,11 @@ import "../../styles/entityCommonStyles.css";
 import "./packageEntity.css";
 
 interface PackageEntityProps {
-  package: PackageDetails;
+  activePackage: PackageDetails;
   goToDependency: (dependency: DependencyDetails) => void;
 }
 const PackageEntity = (props: PackageEntityProps) => {
-  const { package: activePackage } = props;
+  const { activePackage } = props;
   const { goToFileInTableView } = useWorkbenchDB();
 
   if (!activePackage) {
@@ -122,24 +122,26 @@ const PackageEntity = (props: PackageEntityProps) => {
           ? "1 Dependency:"
           : `${activePackage.dependencies.length} Dependencies:`}
       </b>
-      <br />
-      <AgGridReact
-        rowData={activePackage.dependencies}
-        columnDefs={DependenciesTableCols}
-        className="ag-theme-alpine ag-grid-customClass dependencies-table"
-        pagination
-        ensureDomOrder
-        enableCellTextSelection
-        defaultColDef={DEFAULT_DEPENDENCIES_COL_DEF}
-      />
-      <br />
-      Raw package:
-      <ReactJson
-        src={activePackage}
-        enableClipboard={false}
-        displayDataTypes={false}
-        collapsed={0}
-      />
+      {activePackage.dependencies.length > 0 && (
+        <AgGridReact
+          rowData={activePackage.dependencies}
+          columnDefs={DependenciesTableCols}
+          className="ag-theme-alpine ag-grid-customClass entity-table dependencies-table"
+          pagination
+          ensureDomOrder
+          enableCellTextSelection
+          defaultColDef={DEFAULT_DEPENDENCIES_COL_DEF}
+        />
+      )}
+      <div className="raw-info-section">
+        Raw package:
+        <ReactJson
+          src={activePackage}
+          enableClipboard={false}
+          displayDataTypes={false}
+          collapsed={0}
+        />
+      </div>
     </div>
   );
 };

diff --git a/src/components/PackagesEntityDetails/packageEntity.css b/src/components/PackagesEntityDetails/packageEntity.css
@@ -4,4 +4,5 @@
 
 .dependencies-table {
   max-height: 40vh;
+  margin-bottom: 22px;
 }