From 9eb26f01fbbb48dd06ec2e13ff3ec0523c0147bb Mon Sep 17 00:00:00 2001 From: Omkar Phansopkar Date: Wed, 4 Oct 2023 22:35:02 +0530 Subject: [PATCH 1/3] Setup automatic height & max height for matches & file regions table Signed-off-by: Omkar Phansopkar --- .../LicenseEntity/LicenseEntity.tsx | 5 +- .../LicenseEntity/MatchedTextContext.tsx | 2 + .../LicenseEntity/licenseEntity.css | 83 +++++-------------- src/components/LicenseEntity/matchedText.css | 62 ++++++++++++++ src/pages/TableView/AgDataTable.tsx | 63 ++++++-------- src/pages/TableView/TableView.css | 25 ++++-- 6 files changed, 132 insertions(+), 108 deletions(-) create mode 100644 src/components/LicenseEntity/matchedText.css diff --git a/src/components/LicenseEntity/LicenseEntity.tsx b/src/components/LicenseEntity/LicenseEntity.tsx index eef9f25e..b623db93 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 matches-table" + className="ag-theme-alpine ag-grid-customClass license-entity-table" ensureDomOrder enableCellTextSelection pagination={false} @@ -120,13 +120,14 @@ const LicenseEntity = (props: LicenseDetectionEntityProps) => { />
+
File regions 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 license-entity-table" ensureDomOrder enableCellTextSelection pagination={false} diff --git a/src/components/LicenseEntity/MatchedTextContext.tsx b/src/components/LicenseEntity/MatchedTextContext.tsx index df645ecb..5f319983 100644 --- 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 index 10ea09b3..70c19713 100644 --- a/src/components/LicenseEntity/licenseEntity.css +++ b/src/components/LicenseEntity/licenseEntity.css @@ -1,3 +1,10 @@ +:root { + --max-license-entity-table-height: 35vh; + --license-entity-table-header-height: 49px; + --license-entity-table-height: 5px; +} + + .license-detecion-entity { height: 100%; } @@ -15,73 +22,25 @@ 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; +.license-entity-table { + /* max-height: 250px; */ + max-height: var(--max-license-entity-table-height); + height: auto !important; } -.matched-text-diff-modal .diff-line .line-content .line-text { - margin: 0; - display: inline-block; - white-space: pre-wrap; - line-height: 20px; +.license-entity-table .ag-root-wrapper-body.ag-layout-normal { + flex: none; + height: auto; } -.matched-text-diff-modal .diff-line .line-content .removed-snippet { - background-color: #fdb8c0; +.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; } -.matched-text-diff-modal .diff-line .line-content .added-snippet { - background-color: #acf2bd; +.license-entity-table .ag-center-cols-viewport { + height: auto; } \ No newline at end of file diff --git a/src/components/LicenseEntity/matchedText.css b/src/components/LicenseEntity/matchedText.css new file mode 100644 index 00000000..338a6a4a --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/src/pages/TableView/AgDataTable.tsx b/src/pages/TableView/AgDataTable.tsx index 64348c72..8e01f032 100644 --- a/src/pages/TableView/AgDataTable.tsx +++ b/src/pages/TableView/AgDataTable.tsx @@ -1,14 +1,11 @@ -import React, { useEffect } from 'react' -import { AgGridReact, AgGridReactProps } from 'ag-grid-react'; -import { - ColDef, - GridApi, -} from 'ag-grid-community'; +import React, { useEffect } from "react"; +import { AgGridReact, AgGridReactProps } from "ag-grid-react"; +import { ColDef, GridApi } from "ag-grid-community"; -import { frameworkComponents } from './columnDefs'; +import { frameworkComponents } from "./columnDefs"; -import 'ag-grid-community/styles/ag-grid.css'; -import 'ag-grid-community/styles/ag-theme-alpine.css'; +import "ag-grid-community/styles/ag-grid.css"; +import "ag-grid-community/styles/ag-theme-alpine.css"; // Config for Ag DataTable const defaultColDef: ColDef = { @@ -22,40 +19,35 @@ const defaultColDef: ColDef = { const paginationOptions = [25, 50, 100, 200]; const defaultPaginationOption = paginationOptions[0]; - interface AgDataTableProps extends AgGridReactProps { - tableData: unknown[], - columnDefs: ColDef[], - gridApi: GridApi | null, + tableData: unknown[]; + columnDefs: ColDef[]; + gridApi: GridApi | null; } const AgDataTable = (props: AgDataTableProps) => { - const { - tableData, columnDefs, gridApi, - } = props; - + const { tableData, columnDefs, gridApi } = props; const changePaginationSize = (newValue: string | number) => { - if(gridApi){ + if (gridApi) { gridApi.paginationSetPageSize(Number(newValue)); } - } + }; useEffect(() => { - if(gridApi){ + if (gridApi) { gridApi.setFilterModel(null); // Setting column defs manually to lazily update columns gridApi.setColumnDefs(columnDefs); } - }, [columnDefs]) - + }, [columnDefs]); return (
{ className="ag-theme-alpine ag-grid-customClass" ensureDomOrder enableCellTextSelection - pagination={true} defaultColDef={defaultColDef} paginationPageSize={defaultPaginationOption} - // Performance options rowBuffer={200} animateRows={false} suppressColumnMoveAnimation suppressRowVirtualisation suppressColumnVirtualisation - {...props} /> @@ -83,19 +72,17 @@ const AgDataTable = (props: AgDataTableProps) => { Page Size:
- ) -} + ); +}; -export default AgDataTable \ No newline at end of file +export default AgDataTable; diff --git a/src/pages/TableView/TableView.css b/src/pages/TableView/TableView.css index d0e1a031..aa7b54ce 100644 --- a/src/pages/TableView/TableView.css +++ b/src/pages/TableView/TableView.css @@ -1,8 +1,9 @@ -.globalSearch{ +.globalSearch { display: inline-flex; float: right; margin-right: 15px; } + .globalSearch input { display: inline-block; } @@ -10,17 +11,19 @@ .filterButtons { margin-bottom: 4px; } -.filterButtons section{ + +.filterButtons section { display: inline-flex; margin-left: 10px; margin-right: 10px; } -.filterButtons button{ + +.filterButtons button { margin: 3px; margin-right: 10px; } -.column-selector{ +.column-selector { padding: 15px; } @@ -30,23 +33,33 @@ margin-right: 0px; font-size: 15px; } -.pagination-controls select{ + +.pagination-controls select { margin-left: 10px; } +.matches-table { + max-height: 250px; + height: auto; +} + .ag-grid-customClass { font-size: 12px !important; --ag-cell-horizontal-border: 1px solid rgb(225 225 225) !important; } + + .ag-cell-wrapper { padding: 7px 0 10px 0; font-size: 14px; line-height: 1.5; } + .ag-cell-wrapper .ag-cell-value { max-height: 300px; overflow-y: overlay; } + .ag-cell-wrap-text { word-break: break-word; } @@ -56,4 +69,4 @@ padding: 5px; width: fit-content; max-width: 90px; -} +} \ No newline at end of file From 1626babe5ec0087cbfdce2ad04fb47e91209def8 Mon Sep 17 00:00:00 2001 From: Omkar Phansopkar Date: Thu, 5 Oct 2023 17:07:46 +0530 Subject: [PATCH 2/3] Fixed auto height for package & dependency entity Signed-off-by: Omkar Phansopkar --- 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) => { 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} />
- Raw license {activeLicenseEntity.type} - +
+ Raw license {activeLicenseEntity.type} + +
); }; 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) => { /> )} -
- Raw dependency: - +
+ Raw dependency: + +
); }; 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:`} -
- -
- Raw package: - + {activePackage.dependencies.length > 0 && ( + + )} +
+ Raw package: + +
); }; 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; +} From e3973724d8ea43c513c66ba655cb01eb25595f64 Mon Sep 17 00:00:00 2001 From: Omkar Phansopkar Date: Tue, 17 Oct 2023 23:58:43 +0530 Subject: [PATCH 3/3] Handled summary table for packages without dependencies & adjusted table dimensions Signed-off-by: Omkar Phansopkar --- .../LicenseEntity/LicenseEntity.tsx | 1 + .../DependenciesTableCols.ts.ts | 12 +++--- .../PackagesEntityDetails/PackageEntity.tsx | 4 +- .../DependencyInfoDash/DependencyInfoDash.tsx | 43 +++++++++++-------- .../DependencyInfoDash/dependencyInfoDash.css | 3 +- src/pages/Packages/Packages.tsx | 2 +- 6 files changed, 38 insertions(+), 27 deletions(-) diff --git a/src/components/LicenseEntity/LicenseEntity.tsx b/src/components/LicenseEntity/LicenseEntity.tsx index dda0da81..a7d36b0e 100644 --- a/src/components/LicenseEntity/LicenseEntity.tsx +++ b/src/components/LicenseEntity/LicenseEntity.tsx @@ -129,6 +129,7 @@ const LicenseEntity = (props: LicenseDetectionEntityProps) => { onGridSizeChanged={(params) => params.api.sizeColumnsToFit()} className="ag-theme-alpine ag-grid-customClass entity-table" ensureDomOrder + suppressHorizontalScroll enableCellTextSelection pagination={false} defaultColDef={DEFAULT_FILE_REGION_COL_DEF} diff --git a/src/components/PackagesEntityDetails/DependenciesTableCols.ts.ts b/src/components/PackagesEntityDetails/DependenciesTableCols.ts.ts index d6c58f43..00dc8e25 100644 --- 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/PackageEntity.tsx b/src/components/PackagesEntityDetails/PackageEntity.tsx index 3710848e..2f83ac89 100644 --- 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) { diff --git a/src/pages/DependencyInfoDash/DependencyInfoDash.tsx b/src/pages/DependencyInfoDash/DependencyInfoDash.tsx index 316a0269..28968c32 100644 --- a/src/pages/DependencyInfoDash/DependencyInfoDash.tsx +++ b/src/pages/DependencyInfoDash/DependencyInfoDash.tsx @@ -60,7 +60,7 @@ const DependencyInfoDash = () => { >(); packagesData.forEach((packageData) => { // Package data having PURL as null are invalid & will have no dependency - // Hence, don't consider such package data (will be fixed in further toolkit version) + // Hence, don't consider such package data (will be fixed in further scancode-toolkit version) if (!packageData.getDataValue("purl")) return; const packageDataType = packageData.getDataValue("type"); @@ -94,11 +94,15 @@ const DependencyInfoDash = () => { }, 0); }); - return Array.from(packageTypeToSummaryMapping.values()).sort( - (packageTypeSummary1, packageTypeSummary2) => - packageTypeSummary2.packageTypeDetails.total - - packageTypeSummary1.packageTypeDetails.total - ); + return Array.from(packageTypeToSummaryMapping.values()) + .filter( + (packageTypeSummary) => packageTypeSummary.packageTypeDetails.total > 0 + ) + .sort( + (packageTypeSummary1, packageTypeSummary2) => + packageTypeSummary2.packageTypeDetails.total - + packageTypeSummary1.packageTypeDetails.total + ); } useEffect(() => { @@ -217,17 +221,22 @@ const DependencyInfoDash = () => {
- Dependency Scope summary by Package Type - params.api.sizeColumnsToFit()} - onGridSizeChanged={(params) => params.api.sizeColumnsToFit()} - className="ag-theme-alpine ag-grid-customClass scope-summary-table" - /> + {packageTypeSummaryData.length > 0 && ( + <> +
Dependency Scope summary by Package Type
+ params.api.sizeColumnsToFit()} + onGridSizeChanged={(params) => params.api.sizeColumnsToFit()} + className="ag-theme-alpine ag-grid-customClass scope-summary-table" + /> + + )}
diff --git a/src/pages/DependencyInfoDash/dependencyInfoDash.css b/src/pages/DependencyInfoDash/dependencyInfoDash.css index 6081b378..8e237108 100644 --- a/src/pages/DependencyInfoDash/dependencyInfoDash.css +++ b/src/pages/DependencyInfoDash/dependencyInfoDash.css @@ -1,5 +1,5 @@ :root { - --min-scope-summary-table-height: 100px; + --min-scope-summary-table-height: 90px; --max-scope-summary-table-height: 40vh; --scope-summary-table-header-height: 49px; --scope-summary-table-height: 5px; @@ -14,6 +14,7 @@ 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; diff --git a/src/pages/Packages/Packages.tsx b/src/pages/Packages/Packages.tsx index 58d1aa80..f8ddb892 100644 --- a/src/pages/Packages/Packages.tsx +++ b/src/pages/Packages/Packages.tsx @@ -589,7 +589,7 @@ const Packages = () => { {activeEntityType ? ( activeEntityType === "package" && activePackage ? ( ) : activeEntityType === "dependency" && activeDependency ? (