From 1626babe5ec0087cbfdce2ad04fb47e91209def8 Mon Sep 17 00:00:00 2001
From: Omkar Phansopkar <omkarphansopkar@gmail.com>
Date: Thu, 5 Oct 2023 17:07:46 +0530
Subject: [PATCH] Fixed auto height for package & dependency entity

Signed-off-by: Omkar Phansopkar <omkarphansopkar@gmail.com>
---
 docs/.gitignore                               |  2 +-
 src/components/FileTree/FileTree.tsx          |  1 +
 .../LicenseEntity/LicenseEntity.tsx           | 20 +++++-----
 .../LicenseEntity/licenseEntity.css           | 29 --------------
 .../DependencyEntity.tsx                      | 17 +++++----
 .../PackagesEntityDetails/PackageEntity.tsx   | 38 ++++++++++---------
 .../PackagesEntityDetails/packageEntity.css   |  1 +
 .../DependencyInfoDash/dependencyInfoDash.css | 35 ++++++++++++++++-
 src/styles/entityCommonStyles.css             | 38 ++++++++++++++++++-
 9 files changed, 112 insertions(+), 69 deletions(-)

diff --git a/docs/.gitignore b/docs/.gitignore
index dc3f9d59..887f56e8 100644
--- 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
index d33874c7..1dd4ded9 100644
--- 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
index b623db93..dda0da81 100644
--- a/src/components/LicenseEntity/LicenseEntity.tsx
+++ b/src/components/LicenseEntity/LicenseEntity.tsx
@@ -112,7 +112,7 @@ const LicenseEntity = (props: LicenseDetectionEntityProps) => {
               : LicenseClueMatchCols
           }
           onGridReady={(params) => setMatchesTableColumnApi(params.columnApi)}
-          className="ag-theme-alpine ag-grid-customClass license-entity-table"
+          className="ag-theme-alpine ag-grid-customClass entity-table"
           ensureDomOrder
           enableCellTextSelection
           pagination={false}
@@ -127,20 +127,22 @@ const LicenseEntity = (props: LicenseDetectionEntityProps) => {
         columnDefs={DetectionFileRegionCols}
         onGridReady={(params) => params.api.sizeColumnsToFit()}
         onGridSizeChanged={(params) => params.api.sizeColumnsToFit()}
-        className="ag-theme-alpine ag-grid-customClass license-entity-table"
+        className="ag-theme-alpine ag-grid-customClass entity-table"
         ensureDomOrder
         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/licenseEntity.css b/src/components/LicenseEntity/licenseEntity.css
index 70c19713..db539c06 100644
--- a/src/components/LicenseEntity/licenseEntity.css
+++ b/src/components/LicenseEntity/licenseEntity.css
@@ -1,10 +1,3 @@
-:root {
-  --max-license-entity-table-height: 35vh;
-  --license-entity-table-header-height: 49px;
-  --license-entity-table-height: 5px;
-}
-
-
 .license-detecion-entity {
   height: 100%;
 }
@@ -22,25 +15,3 @@
   margin-right: 5px;
 }
 
-
-.license-entity-table {
-  /* max-height: 250px; */
-  max-height: var(--max-license-entity-table-height);
-  height: auto !important;
-}
-
-.license-entity-table .ag-root-wrapper-body.ag-layout-normal {
-  flex: none;
-  height: auto;
-}
-
-.license-entity-table .ag-body-viewport {
-  height: auto;
-  /* Subtract height of horizontal scroll and header from table height */
-  max-height: calc(var(--max-license-entity-table-height) - var(--license-entity-table-header-height) - var(--license-entity-table-height));
-  flex: none;
-}
-
-.license-entity-table .ag-center-cols-viewport {
-  height: auto;
-}
\ No newline at end of file
diff --git a/src/components/PackagesEntityDetails/DependencyEntity.tsx b/src/components/PackagesEntityDetails/DependencyEntity.tsx
index d2c52b2a..bf055e98 100644
--- 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
index 3a01b53f..3710848e 100644
--- a/src/components/PackagesEntityDetails/PackageEntity.tsx
+++ b/src/components/PackagesEntityDetails/PackageEntity.tsx
@@ -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
index e863919a..26a4230f 100644
--- a/src/components/PackagesEntityDetails/packageEntity.css
+++ b/src/components/PackagesEntityDetails/packageEntity.css
@@ -4,4 +4,5 @@
 
 .dependencies-table {
   max-height: 40vh;
+  margin-bottom: 22px;
 }
\ No newline at end of file
diff --git a/src/pages/DependencyInfoDash/dependencyInfoDash.css b/src/pages/DependencyInfoDash/dependencyInfoDash.css
index eaf49d46..6081b378 100644
--- a/src/pages/DependencyInfoDash/dependencyInfoDash.css
+++ b/src/pages/DependencyInfoDash/dependencyInfoDash.css
@@ -1,7 +1,38 @@
-.scope-summary-table {
-  max-height: 42vh;
+:root {
+  --min-scope-summary-table-height: 100px;
+  --max-scope-summary-table-height: 40vh;
+  --scope-summary-table-header-height: 49px;
+  --scope-summary-table-height: 5px;
 }
 
 .deps-status-flag-table .ag-header-cell-label {
   justify-content: center;
+}
+
+.scope-summary-table {
+  max-height: var(--max-scope-summary-table-height);
+  min-height: var(--min-scope-summary-table-height);
+  height: auto !important;
+}
+.scope-summary-table .ag-overlay-wrapper {
+  max-height: var(--max-scope-summary-table-height);
+  align-items: flex-end;
+  padding-bottom: 3%;
+}
+
+.scope-summary-table .ag-root-wrapper-body.ag-layout-normal {
+  flex: none;
+  height: auto;
+}
+
+.scope-summary-table .ag-body-viewport {
+  height: auto;
+  /* Subtract height of horizontal scroll and header from table height */
+  max-height: calc(var(--max-scope-summary-table-height) - var(--scope-summary-table-header-height) - var(--scope-summary-table-height));
+  min-height: calc(var(--min-scope-summary-table-height) - var(--scope-summary-table-header-height) - var(--scope-summary-table-height));
+  flex: none;
+}
+
+.scope-summary-table .ag-center-cols-viewport {
+  height: auto;
 }
\ No newline at end of file
diff --git a/src/styles/entityCommonStyles.css b/src/styles/entityCommonStyles.css
index cb5ee0dd..0bca25eb 100644
--- a/src/styles/entityCommonStyles.css
+++ b/src/styles/entityCommonStyles.css
@@ -1,3 +1,9 @@
+:root {
+  --max-entity-table-height: 35vh;
+  --entity-table-header-height: 49px;
+  --entity-table-height: 5px;
+}
+
 .entity-properties {
   font-size: 14px;
 }
@@ -16,5 +22,33 @@
 .license-detecion-entity .react-json-view {
   max-height: 75vh;
   overflow: auto;
-  margin-bottom: 15px;
-}
\ No newline at end of file
+}
+
+.package-entity .raw-info-section,
+.dependency-entity .raw-info-section,
+.license-detecion-entity .raw-info-section {
+  margin-top: 15px;
+  margin-bottom: 25px;
+}
+
+.entity-table {
+  /* max-height: 250px; */
+  max-height: var(--max-entity-table-height);
+  height: auto !important;
+}
+
+.entity-table .ag-root-wrapper-body.ag-layout-normal {
+  flex: none;
+  height: auto;
+}
+
+.entity-table .ag-body-viewport {
+  height: auto;
+  /* Subtract height of horizontal scroll and header from table height */
+  max-height: calc(var(--max-entity-table-height) - var(--entity-table-header-height) - var(--entity-table-height));
+  flex: none;
+}
+
+.entity-table .ag-center-cols-viewport {
+  height: auto;
+}