Skip to content

Commit fcf0c80

Browse files
OmkarPhOmkarPh
committed
Updated File info dashboard as per requirements in #578
Signed-off-by: Omkar Phansopkar <[email protected]>
1 parent d2742f9 commit fcf0c80

File tree

5 files changed

+49
-103
lines changed

5 files changed

+49
-103
lines changed

‎src/pages/FileInfoDash/FileInfoDash.tsx‎

Lines changed: 38 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import EllipticLoader from "../../components/EllipticLoader";
1010
interface ScanData {
1111
totalFiles: number | null;
1212
totalDirectories: number | null;
13-
totalUniqueCopyrightHolders: number | null;
1413
}
1514
import { NO_VALUE_DETECTED_LABEL } from "../../constants/data";
1615

@@ -20,12 +19,11 @@ const FileInfoDash = () => {
2019
const workbenchDB = useWorkbenchDB();
2120

2221
const [progLangsData, setProgLangsData] = useState(null);
22+
const [mimeTypesData, setMimeTypesData] = useState(null);
2323
const [fileTypesData, setFileTypesData] = useState(null);
24-
const [copyrightHoldersData, setCopyrightHoldersData] = useState(null);
2524
const [scanData, setScanData] = useState<ScanData>({
2625
totalFiles: null,
2726
totalDirectories: null,
28-
totalUniqueCopyrightHolders: null,
2927
});
3028

3129
useEffect(() => {
@@ -45,78 +43,51 @@ const FileInfoDash = () => {
4543
? root.getDataValue("dirs_count") || 0
4644
: 0;
4745

48-
setScanData((oldScanData) => ({
49-
...oldScanData,
46+
setScanData({
5047
totalFiles: Number(filesCount),
5148
totalDirectories: Number(dirsCount),
52-
}));
53-
54-
return db.sync.then((db) =>
55-
db.File.findAll({
56-
where: {
57-
type: {
58-
[Op.eq]: "file",
59-
},
60-
path: {
61-
[Op.or]: [
62-
{ [Op.like]: `${currentPath}` }, // Matches self
63-
{ [Op.like]: `${currentPath}/%` }, // Matches all its children (if any).
64-
],
65-
},
66-
},
67-
attributes: ["id", "mime_type", "programming_language"],
68-
})
69-
);
49+
});
50+
return db.sync;
7051
})
52+
.then((db) =>
53+
db.File.findAll({
54+
where: {
55+
type: {
56+
[Op.eq]: "file",
57+
},
58+
path: {
59+
[Op.or]: [
60+
{ [Op.like]: `${currentPath}` }, // Matches self
61+
{ [Op.like]: `${currentPath}/%` }, // Matches all its children (if any).
62+
],
63+
},
64+
},
65+
attributes: ["id", "file_type", "mime_type", "programming_language"],
66+
})
67+
)
7168
.then((files) => {
72-
// Prepare chart for file types
73-
const fileMimeTypes = files.map(
74-
(file) => file.getDataValue("mime_type") || NO_VALUE_DETECTED_LABEL
75-
);
76-
const { chartData: fileTypesChartData } = formatChartData(
77-
fileMimeTypes,
78-
"file-types"
79-
);
80-
setFileTypesData(fileTypesChartData);
81-
8269
// Prepare chart for programming languages
8370
const langs = files.map(
8471
(file) =>
8572
file.getDataValue("programming_language") || NO_VALUE_DETECTED_LABEL
8673
);
87-
const { chartData: langsChartData } = formatChartData(
88-
langs,
89-
"programming-langs"
90-
);
74+
const { chartData: langsChartData } = formatChartData(langs);
9175
setProgLangsData(langsChartData);
9276

93-
return files;
94-
})
95-
.then((files) => {
96-
const fileIDs = files.map((file) => file.getDataValue("id"));
97-
98-
// Query data for copyright holders chart
99-
db.sync
100-
.then((db) => db.Copyright.findAll({ where: { fileId: fileIDs } }))
101-
.then((copyrights) =>
102-
copyrights.map(
103-
(copyright) =>
104-
copyright.getDataValue("holders") || NO_VALUE_DETECTED_LABEL
105-
)
106-
)
107-
.then((copyrightHolders) => {
108-
setScanData((oldScanData) => ({
109-
...oldScanData,
110-
totalUniqueCopyrightHolders: new Set(copyrightHolders).size,
111-
}));
77+
// Prepare chart for file types
78+
const fileTypes = files.map(
79+
(file) => file.getDataValue("file_type") || NO_VALUE_DETECTED_LABEL
80+
);
81+
const { chartData: fileTypesChartData } = formatChartData(fileTypes);
82+
setFileTypesData(fileTypesChartData);
11283

113-
// Prepare chart for copyright holders
114-
const { chartData: copyrightHoldersChartData } = formatChartData(
115-
copyrightHolders,
116-
"policy"
117-
);
118-
setCopyrightHoldersData(copyrightHoldersChartData);
119-
});
84+
// Prepare chart for mime types
85+
const fileMimeTypes = files.map(
86+
(file) => file.getDataValue("mime_type") || NO_VALUE_DETECTED_LABEL
87+
);
88+
const { chartData: mimeTypesChartData } =
89+
formatChartData(fileMimeTypes);
90+
setMimeTypesData(mimeTypesChartData);
12091
});
12192
}, [workbenchDB]);
12293

@@ -147,16 +118,6 @@ const FileInfoDash = () => {
147118
<h5 className="title">Total Number of Directories</h5>
148119
</Card>
149120
</Col>
150-
<Col sm={6} md={4}>
151-
<Card className="info-card">
152-
{scanData.totalUniqueCopyrightHolders === null ? (
153-
<EllipticLoader wrapperClass="value" />
154-
) : (
155-
<h4 className="value">{scanData.totalUniqueCopyrightHolders}</h4>
156-
)}
157-
<h5 className="title">Unique Copyright Holders Detected</h5>
158-
</Card>
159-
</Col>
160121
</Row>
161122
<br />
162123
<br />
@@ -183,11 +144,11 @@ const FileInfoDash = () => {
183144
</Col>
184145
<Col sm={6} md={4}>
185146
<Card className="chart-card">
186-
<h5 className="title">Copyright holders</h5>
147+
<h5 className="title">Mime types</h5>
187148
<PieChart
188-
chartData={copyrightHoldersData}
189-
noDataText="Use --copyright CLI option for copyright data"
190-
noDataLink="https://scancode-toolkit.readthedocs.io/en/latest/cli-reference/basic-options.html#copyright-option"
149+
chartData={mimeTypesData}
150+
noDataText="Use --info CLI option for mime types"
151+
noDataLink="https://scancode-toolkit.readthedocs.io/en/latest/cli-reference/basic-options.html#info-option"
191152
/>
192153
</Card>
193154
</Col>

‎src/pages/LicenseInfoDash/LicenseInfoDash.tsx‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ const LicenseInfoDash = () => {
7777
NO_VALUE_DETECTED_LABEL
7878
);
7979
// Prepare chart for license expressions
80-
const { chartData } = formatChartData(expressions, "expressions");
80+
const { chartData } = formatChartData(expressions);
8181
setLicenseExpressionData(chartData);
8282

8383
const license_keys: string[] = [];
@@ -104,10 +104,8 @@ const LicenseInfoDash = () => {
104104
totalSPDXLicenses: new Set(license_keys_spdx).size,
105105
}));
106106

107-
const { chartData: licenseKeysChartData } = formatChartData(
108-
license_keys,
109-
"license_keys"
110-
);
107+
const { chartData: licenseKeysChartData } =
108+
formatChartData(license_keys);
111109
setLicenseKeyData(licenseKeysChartData);
112110
});
113111

@@ -123,8 +121,7 @@ const LicenseInfoDash = () => {
123121
)
124122
.then((labels) => {
125123
// @TODO - Set pie chart color based on the received color_code in policies
126-
const { chartData } = formatChartData(labels, "policy");
127-
// console.log("Result License policy formatted", chartData);
124+
const { chartData } = formatChartData(labels);
128125
setLicensePolicyData(chartData);
129126
});
130127
});

‎src/pages/PackageInfoDash/PackageInfoDash.css‎

Whitespace-only changes.

‎src/pages/PackageInfoDash/PackageInfoDash.tsx‎

Lines changed: 7 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,6 @@ interface ScanData {
1313
import { FileAttributes } from "../../services/models/file";
1414
import { NO_VALUE_DETECTED_LABEL } from "../../constants/data";
1515

16-
import "./PackageInfoDash.css";
17-
1816
const PackageInfoDash = () => {
1917
const workbenchDB = useWorkbenchDB();
2018
const [packageTypeData, setPackageTypeData] = useState(null);
@@ -42,7 +40,7 @@ const PackageInfoDash = () => {
4240
.then((db) =>
4341
db.File.findAll({
4442
where,
45-
// attributes: ['id'],
43+
attributes: ["id"],
4644
})
4745
)
4846
.then((files) => {
@@ -62,11 +60,8 @@ const PackageInfoDash = () => {
6260
(packageEntry) =>
6361
packageEntry.getDataValue("type") || NO_VALUE_DETECTED_LABEL
6462
);
65-
const { chartData: packageTypesChartData } = formatChartData(
66-
packageTypes,
67-
"package types"
68-
);
69-
// console.log("Result packages types:", packageTypesChartData);
63+
const { chartData: packageTypesChartData } =
64+
formatChartData(packageTypes);
7065
setPackageTypeData(packageTypesChartData);
7166

7267
// Prepare chart for package languages
@@ -75,11 +70,8 @@ const PackageInfoDash = () => {
7570
packageEntry.getDataValue("primary_language") ||
7671
NO_VALUE_DETECTED_LABEL
7772
);
78-
const { chartData: packageLangsChartData } = formatChartData(
79-
packageLangs,
80-
"package langs"
81-
);
82-
// console.log("Result packages languages:", packageLangsChartData);
73+
const { chartData: packageLangsChartData } =
74+
formatChartData(packageLangs);
8375
setPackageLangData(packageLangsChartData);
8476

8577
// Prepare chart for package license expression
@@ -88,12 +80,9 @@ const PackageInfoDash = () => {
8880
packageEntry.getDataValue("declared_license_expression") ||
8981
NO_VALUE_DETECTED_LABEL
9082
);
91-
const { chartData: packageLicenseExpChartData } = formatChartData(
92-
packageLicenseExp,
93-
"package license exp"
94-
);
83+
const { chartData: packageLicenseExpChartData } =
84+
formatChartData(packageLicenseExp);
9585

96-
// console.log("Result packages license exp:", packageLicenseExpChartData);
9786
setPackageLicenseData(packageLicenseExpChartData);
9887
});
9988
});

‎src/utils/pie.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,6 @@ function limitChartData(data: FormattedEntry[], limit: number) {
3434
// Formats data suitable for Pie chart
3535
export function formatChartData(
3636
names: (string | StringDataType)[],
37-
chartKey?: string,
3837
limit?: number,
3938
): {
4039
chartData: FormattedEntry[],

0 commit comments

Comments
 (0)