Merge pull request #1920 from 4dn-dcic/utku_statistics_follow_up

Npm Security Updates + Statistics Page Improvements

CHANGELOG.rst

@@ -6,6 +6,20 @@ fourfront
 Change Log
 ----------
 
+8.5.0
+=====
+
+`PR 1920: npm security updates + statistics page improvements <https://github.com/4dn-dcic/fourfront/pull/1920>`_
+
+* Critical npm package updates for security vulnerabilities
+* New usage statistics table shows daily counts in tabular form
+* New TrackingItem viewer triggered by usage statistics table cell click (admin-only)
+* New Y-Axis scaling for usage statistics
+* Enhanced table-full-size toggles for usage statistics
+* New histogram interval options for submission statistics
+* Chart section header styles updated
+* Hide QC HTML Report Links after removal of bulk html reports already generated
+
 
 8.4.6
 =====

package.json

@@ -100,14 +100,14 @@
     "string-replace-loader": "^3.1.0",
     "terser-webpack-plugin": "^5.3.6",
     "utf-8-validate": "^5.0.9",
-    "webpack": "5.92.1",
+    "webpack": "5.94.0",
     "webpack-bundle-analyzer": "^4.5.0",
     "webpack-deadcode-plugin": "^0.1.15"
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.6.0",
     "@hms-dbmi-bgm/react-workflow-viz": "0.1.11",
-    "@hms-dbmi-bgm/shared-portal-components": "git+https://github.com/4dn-dcic/shared-portal-components#0.1.91",
+    "@hms-dbmi-bgm/shared-portal-components": "git+https://github.com/4dn-dcic/shared-portal-components#0.1.92",
     "@reduxjs/toolkit": "^2.2.6",
     "auth0-lock": "^12.5.1",
     "d3": "^7.5.0",
@@ -142,9 +142,13 @@
     "underscore": "^1.13.6",
     "url": "^0.11.0",
     "uuid": "^8.3.2",
-    "vitessce": "3.4.9"
+    "vitessce": "3.4.14"
   },
   "optionalDependencies": {
     "cypress": "^13.7.0"
+  },
+  "overrides": {
+    "cross-spawn@<7.0.5": "^7.0.5",
+    "nanoid@<3.3.8": "^3.3.8"
   }
 }

pyproject.toml

@@ -1,7 +1,7 @@
 [tool.poetry]
 # Note: Various modules refer to this system as "encoded", not "fourfront".
 name = "encoded"
-version = "8.4.6"
+version = "8.5.0"
 description = "4DN-DCIC Fourfront"
 authors = ["4DN-DCIC Team <[email protected]>"]
 license = "MIT"

src/encoded/static/components/browse/components/file-tables.js

@@ -1097,8 +1097,13 @@ export class QCMetricsTable extends React.PureComponent {
             </React.Fragment>
         );
     }
-
-    static generateAlignedColumnHeaders(fileGroups) {
+    /**
+     * Generates column headers for QCMetricsTable including render functions for each column
+     * @param {*} fileGroups file groups
+     * @param {*} canShowMetricURL 2025-01-22: added to hide QC HTML Report Links after removal of bulk html reports already generated
+     * @returns columnHeaders for QCMetricsTable including render functions for each column
+     */
+    static generateAlignedColumnHeaders(fileGroups, canShowMetricURL = false) {
         return fileGroups.map(function (fileGroup) {
             const titleTooltipsByQMSTitle = QCMetricsTable.qcSummaryItemTitleTooltipsByTitle(fileGroup);
             const columnHeaders = [ // Static / present-for-each-table headers
@@ -1125,7 +1130,7 @@ export class QCMetricsTable extends React.PureComponent {
                 return f && f.quality_metric && f.quality_metric.url;
             });
 
-            if (anyFilesWithMetricURL) {
+            if (anyFilesWithMetricURL && canShowMetricURL) {
                 columnHeaders.push({ columnClass: 'file-detail', title: 'Report', initialWidth: 35, render: renderFileQCReportLinkButton });
                 columnHeaders.push({ columnClass: 'file-detail', title: 'Details', initialWidth: 35, render: renderFileQCDetailLinkButton });
             } else {
@@ -1235,9 +1240,12 @@ export class QCMetricsTable extends React.PureComponent {
 }
 
 export function QCMetricFromSummary(props){
-    const { title } = props;
+    const { title, field } = props;
     const { value, tooltip } = QCMetricFromSummary.formatByNumberType(props);
 
+    // 2025-01-22: added to hide QC HTML Report Links after removal of bulk html reports already generated
+    if (field === 'url') { return null; }
+
     return (
         <div className="overview-list-element">
             <div className="row">

src/encoded/static/components/item-pages/QualityMetricView.js

@@ -90,7 +90,7 @@ class QualityMetricViewOverview extends React.PureComponent {
                 <div className="overview-list-elements-container">
                     {_.map(quality_metric_summary, function (qmsItem) { return <QCMetricFromSummary {...qmsItem} key={qmsItem.title} />; })}
                     {context.url ?
-                        <QCMetricFromSummary title="Report" tooltip="Link to full quality metric report" value={
+                        <QCMetricFromSummary title="Report" tooltip="Link to full quality metric report" field="url" value={
                             <React.Fragment>
                                 <a href={context.url} target="_blank" rel="noopener noreferrer">{valueTransforms.hrefToFilename(context.url)}</a>
                                 <i className="ms-05 icon icon-fw icon-external-link-alt text-small fas" />
@@ -191,6 +191,9 @@ class QCMetricFromEmbed extends React.PureComponent {
         const { metric, qcProperty, schemaItem, schemas, fallbackTitle, tips, percent } = this.props;
         const { open, closing } = this.state;
 
+        // 2025-01-22: added to hide QC HTML Report Links after removal of bulk html reports already generated
+        if (qcProperty === "url") return null;
+
         const { qc_order = null, title = null, description: tip = null } = schemaItem || {};
         if (schemaItem && typeof qc_order !== 'number') return null;
         let value = metric[qcProperty];
@@ -326,7 +329,7 @@ export class QualityControlResults extends React.PureComponent {
             <div className="overview-list-elements-container">
                 { _.map(file.quality_metric.quality_metric_summary, function(qmsItem){ return <QCMetricFromSummary {...qmsItem} key={qmsItem.title} />; }) }
                 { metricURL ?
-                    <QCMetricFromSummary title="Report" tooltip="Link to full quality metric report" value={
+                    <QCMetricFromSummary title="Report" tooltip="Link to full quality metric report" field="url" value={
                         <React.Fragment>
                             <a href={metricURL} target="_blank" rel="noopener noreferrer">{ valueTransforms.hrefToFilename(metricURL) }</a>
                             <i className="ms-05 icon icon-fw icon-external-link-alt text-small fas"/>

src/encoded/static/components/static-pages/StatisticsPageView.js

@@ -131,6 +131,13 @@ export default class StatisticsPageView extends React.PureComponent {
         };
         const initialDateRangePreset = 'all';
 
+        const dateHistogramIntervalOptions = {
+            'daily'     : <span>Daily</span>,
+            'weekly'    : <span>Weekly</span>,
+            'monthly'   : <span>Monthly</span>,
+        };
+        const initialDateHistogramInterval = 'weekly';
+
         if (browseBaseState !== 'all'){
             _.extend(groupByOptions, {
                 'award.center_title'                 : <span><i className="icon icon-fw fas icon-university me-1"/>Center</span>,
@@ -140,7 +147,7 @@ export default class StatisticsPageView extends React.PureComponent {
             initialGroupBy = 'award.center_title';
         }
         return (
-            <dynamicImports.GroupByController {...{ groupByOptions, initialGroupBy, dateRangeOptions, initialDateRangePreset }}>
+            <dynamicImports.GroupByController {...{ groupByOptions, initialGroupBy, dateRangeOptions, initialDateRangePreset, dateHistogramIntervalOptions, initialDateHistogramInterval }}>
                 <dynamicImports.SubmissionStatsViewController {..._.pick(this.props, 'session', 'browseBaseState', 'windowWidth')}>
                     <dynamicImports.StatsChartViewAggregator {...{ shouldReaggregate }} aggregationsToChartData={dynamicImports.submissionsAggsToChartData} cumulativeSum={true}>
                         <dynamicImports.SubmissionsStatsView />
@@ -153,14 +160,25 @@ export default class StatisticsPageView extends React.PureComponent {
     renderUsageSection(){
         const { shouldReaggregate } = StatisticsPageView.viewOptions.usage;
         const groupByOptions = {
-            'monthly'   : <span>Previous 12 Months</span>,
-            'daily30'     : <span>Previous 30 Days</span>,
-            'daily60'     : <span>Previous 60 Days</span>
+            'daily:30': <span>Previous 30 Days</span>,
+            'daily:60': <span>Previous 60 Days</span>,
+            'monthly:6': <span>Previous 6 Months</span>,
+            'monthly:12': <span>Previous 12 Months</span>,
+            'monthly:18': <span>Previous 18 Months</span>,
+            'monthly:All': <span>All</span>
+        };
+        const dataKeys = _.keys(dynamicImports.usageAggsToChartData || {});
+        const initialChartToggles = {
+            'chart': dataKeys.reduce((acc, key) => { acc[key] = true; return acc; }, {}),
+            'table': dataKeys.reduce((acc, key) => { acc[key] = true; return acc; }, {}),
+            'expanded': dataKeys.reduce((acc, key) => { acc[key] = false; return acc; }, {})
         };
+        // override
+        initialChartToggles.table['fields_faceted'] = false;
         return (
-            <dynamicImports.GroupByController groupByOptions={groupByOptions} initialGroupBy="daily60">
+            <dynamicImports.GroupByController groupByOptions={groupByOptions} initialGroupBy="daily:60">
                 <dynamicImports.UsageStatsViewController {..._.pick(this.props, 'session', 'windowWidth', 'href')}>
-                    <dynamicImports.StatsChartViewAggregator {...{ shouldReaggregate }} aggregationsToChartData={dynamicImports.usageAggsToChartData}>
+                    <dynamicImports.StatsChartViewAggregator {...{ shouldReaggregate }} aggregationsToChartData={dynamicImports.usageAggsToChartData} initialChartToggles={initialChartToggles}>
                         <dynamicImports.UsageStatsView />
                     </dynamicImports.StatsChartViewAggregator>
                 </dynamicImports.UsageStatsViewController>