@gen3/frontend 0.10.66 → 0.10.68

package/dist/cjs/index.js

@@ -1692,7 +1692,7 @@ const ReactECharts = ({ option, style, settings, loading, theme })=>{
 };
 
 const filterMissing = (facetData)=>facetData.filter((d)=>d.key !== '_missing');
-const processChartData$4 = (facetData, maxBins = 100)=>{
+const processChartData$5 = (facetData, maxBins = 100)=>{
     if (!facetData) {
         return [];
     }
@@ -1741,7 +1741,7 @@ const BarChart = ({ data })=>{
             series: [
                 {
                     type: 'bar',
-                    data: processChartData$4(data)
+                    data: processChartData$5(data)
                 }
             ]
         };
@@ -1756,7 +1756,7 @@ const BarChart = ({ data })=>{
     });
 };
 
-const processChartData$3 = (facetData, maxBins = 100)=>{
+const processChartData$4 = (facetData, maxBins = 100)=>{
     if (!facetData) {
         return [];
     }
@@ -1767,13 +1767,9 @@ const processChartData$3 = (facetData, maxBins = 100)=>{
         }));
     return results;
 };
-const PieChart = ({ data })=>{
+const PieChart = ({ data, label })=>{
     const chartDefinition = React.useMemo(()=>{
         return {
-            label: {
-                show: true,
-                fontSize: '14'
-            },
             emphasis: {
                 label: {
                     show: true,
@@ -1787,8 +1783,9 @@ const PieChart = ({ data })=>{
                 {
                     type: 'pie',
                     radius: '60%',
-                    data: processChartData$3(data),
+                    data: processChartData$4(data),
                     label: {
+                        show: label?.show !== undefined ? label.show : true,
                         fontSize: '14',
                         fontWeight: 'bold',
                         overflow: 'break'
@@ -1807,7 +1804,7 @@ const PieChart = ({ data })=>{
     });
 };
 
-const processChartData$2 = (facetData, maxBins = 100)=>{
+const processChartData$3 = (facetData, maxBins = 100)=>{
     if (!facetData) {
         return [];
     }
@@ -1839,7 +1836,7 @@ const DonutChart = ({ data })=>{
                         '30%',
                         '60%'
                     ],
-                    data: processChartData$2(data),
+                    data: processChartData$3(data),
                     label: {
                         show: false,
                         position: 'center'
@@ -1863,7 +1860,7 @@ const DonutChart = ({ data })=>{
 
 const ExtractDataCount = (d, _ = undefined)=>d.count;
 const ExtractDataPercent = (d, total)=>total ? Math.round((d.count / total * 100.0 + Number.EPSILON) * 100) / 100 : 0;
-const processChartData$1 = (facetData, valueType = 'count', total, maxBins = 100)=>{
+const processChartData$2 = (facetData, valueType = 'count', total, maxBins = 100)=>{
     if (!facetData) {
         return [];
     }
@@ -1885,7 +1882,7 @@ const processChartData$1 = (facetData, valueType = 'count', total, maxBins = 100
     return results;
 };
 const HorizontalBarChart = ({ data, valueType, total })=>{
-    const chartData = processChartData$1(data, valueType, total);
+    const chartData = processChartData$2(data, valueType, total);
     const chartDefinition = React.useMemo(()=>{
         return {
             tooltip: {
@@ -1981,7 +1978,8 @@ const chartColors = [
 const Charts = ({ charts, data, counts, isSuccess, numCols = DEFAULT_COLS, style = 'tile', showLegends = false })=>{
     const spans = computeRowSpan(Object.keys(charts).length, numCols);
     const chartCard = (field, indexNum)=>{
-        if (!(field in data)) {
+        if (Object.keys(data).length === 0) return null;
+        if (Object.keys(data).length > 0 && !(field in data)) {
             return /*#__PURE__*/ jsxRuntime.jsx(ErrorCard, {
                 message: `${field} not found in data`
             });
@@ -2026,7 +2024,8 @@ const Charts = ({ charts, data, counts, isSuccess, numCols = DEFAULT_COLS, style
                                     children: createChart(chart.chartType, {
                                         data: data === undefined ? [] : data,
                                         total: counts ?? 1,
-                                        valueType: chart.valueType ?? 'count'
+                                        valueType: chart.valueType ?? 'count',
+                                        label: chart.label
                                     })
                                 }, "modal-col-1"),
                                 /*#__PURE__*/ jsxRuntime.jsx(core$1.Grid.Col, {
@@ -2113,7 +2112,8 @@ const Charts = ({ charts, data, counts, isSuccess, numCols = DEFAULT_COLS, style
                     createChart(charts[field].chartType, {
                         data: data === undefined ? [] : data[field],
                         total: counts ?? 1,
-                        valueType: charts[field].valueType ?? 'count'
+                        valueType: charts[field].valueType ?? 'count',
+                        label: charts[field].label
                     }),
                     showLegends && /*#__PURE__*/ jsxRuntime.jsx(core$1.Card.Section, {
                         inheritPadding: true,
@@ -2177,7 +2177,7 @@ const maxValuesToDisplay = 7;
 // from https://stackoverflow.com/questions/33053310/remove-value-from-object-without-mutation
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const removeKey = (key, { [key]: _, ...rest })=>rest;
-const processChartData = (facetData, selectedEnums, maxBins = 100)=>{
+const processChartData$1 = (facetData, selectedEnums, maxBins = 100)=>{
     const data = removeKey('_missing', facetData);
     const results = Object.keys(data).filter((d)=>!selectedEnums || selectedEnums.length === 0 ? d : selectedEnums.includes(d)).slice(0, maxBins).map((d)=>({
             x: processLabel(d),
@@ -2190,7 +2190,7 @@ const EnumFacetChart = ({ field, data, selectedEnums, isSuccess, height, showTit
     const { ref, width } = hooks.useElementSize();
     React.useEffect(()=>{
         if (isSuccess) {
-            const cd = processChartData(data, selectedEnums, maxBins);
+            const cd = processChartData$1(data, selectedEnums, maxBins);
             setChartData(cd);
         } else {
             setChartData([]);
@@ -5095,19 +5095,20 @@ const ActionBar = ({ config })=>{
     });
 };
 
-const defaultStatisticRenderer = ({ value, label, ...props })=>{
-    return /*#__PURE__*/ jsxRuntime.jsxs(core$1.Stack, {
+const defaultStatisticRenderer = ({ value, label, key, ...props })=>{
+    return /*#__PURE__*/ React.createElement(core$1.Stack, {
         ...props,
+        key: key,
         align: "center",
         children: [
             /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
                 size: "2rem",
-                color: "accent",
+                c: "accent",
                 children: value
             }),
             /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
                 size: "sm",
-                color: "primary",
+                c: "primary",
                 className: "uppercase",
                 children: label
             })
@@ -5137,7 +5138,7 @@ const BuildSummaryStatisticPanel = (summaries = [])=>{
             return element({
                 value: summary.value ?? 'N/A',
                 label: name,
-                key: `stats-item-${name}-${field}-${type}`
+                key: `stats-item-${name}-${field}`
             });
         }
     });
@@ -5162,25 +5163,15 @@ const SummaryStatisticPanel = ({ summaries })=>{
     });
 };
 
-const ChartsPanel = ({ config })=>{
+const ChartsPanel = ({ config, data })=>{
     const [showLegends, setShowLegends] = React.useState(config.showLegends?.enabled);
-    if (!(config?.charts && config.charts.length > 0)) {
-        console.error('Discovery Charts Section not setup properly');
-        return;
-    }
-    const chartsProperties = ()=>{
-        const chartDataTemp = {};
-        config?.charts?.forEach((chart, index)=>{
-            chartDataTemp[`testName${index}`] = {
-                //TODO use from data
-                title: chart.title,
-                chartType: chart.chartType,
-                valueType: chart.valueType,
-                dataLabels: chart.dataLabels
-            };
+    if (!(config?.charts && Object.keys(config.charts).length > 0)) {
+        return /*#__PURE__*/ jsxRuntime.jsx(core$1.Center, {
+            children: /*#__PURE__*/ jsxRuntime.jsx(ErrorCard, {
+                message: "Discovery Charts Section not setup properly"
+            })
         });
-        return chartDataTemp;
-    };
+    }
     return /*#__PURE__*/ jsxRuntime.jsx(core$1.Accordion, {
         unstyled: true,
         classNames: {
@@ -5221,105 +5212,8 @@ const ChartsPanel = ({ config })=>{
                             children: /*#__PURE__*/ jsxRuntime.jsx(Charts, {
                                 showLegends: showLegends,
                                 style: "box",
-                                charts: chartsProperties(),
-                                data: {
-                                    testName0: [
-                                        {
-                                            key: 'a',
-                                            count: 11
-                                        },
-                                        {
-                                            key: 'b',
-                                            count: 9
-                                        },
-                                        {
-                                            key: 'c',
-                                            count: 3
-                                        },
-                                        {
-                                            key: 'd',
-                                            count: 1
-                                        },
-                                        {
-                                            key: 'e',
-                                            count: 0
-                                        }
-                                    ],
-                                    testName1: [
-                                        {
-                                            key: 'a',
-                                            count: 11
-                                        },
-                                        {
-                                            key: 'b',
-                                            count: 9
-                                        },
-                                        {
-                                            key: 'c',
-                                            count: 3
-                                        }
-                                    ],
-                                    testName2: [
-                                        {
-                                            key: 'a',
-                                            count: 11
-                                        },
-                                        {
-                                            key: 'b',
-                                            count: 9
-                                        },
-                                        {
-                                            key: 'c',
-                                            count: 3
-                                        }
-                                    ],
-                                    testName3: [
-                                        {
-                                            key: 'a',
-                                            count: 1
-                                        },
-                                        {
-                                            key: 'b',
-                                            count: 2
-                                        },
-                                        {
-                                            key: 'c',
-                                            count: 3
-                                        },
-                                        {
-                                            key: 'd',
-                                            count: 4
-                                        },
-                                        {
-                                            key: 'e',
-                                            count: 5
-                                        },
-                                        {
-                                            key: 'f',
-                                            count: 6
-                                        },
-                                        {
-                                            key: 'g',
-                                            count: 7
-                                        },
-                                        {
-                                            key: 'h',
-                                            count: 8
-                                        },
-                                        {
-                                            key: 'i',
-                                            count: 9
-                                        },
-                                        {
-                                            key: 'j',
-                                            count: 10
-                                        },
-                                        {
-                                            key: 'k',
-                                            count: 11
-                                        }
-                                    ]
-                                },
+                                charts: config.charts,
+                                data: data,
                                 counts: 2,
                                 isSuccess: true,
                                 numCols: 4
@@ -5539,6 +5433,33 @@ const processAuthorizations = (data, config, authMapping)=>{
         };
     });
 };
+const processChartData = (data, pathsToProcess)=>{
+    // Initialize results object
+    const results = {};
+    pathsToProcess.forEach((path)=>{
+        // Use JSONPath to extract all values at the given path
+        const values = jsonpathPlus.JSONPath({
+            path: `$[*].${path}`,
+            json: data,
+            flatten: true
+        });
+        // Count occurrences of each value
+        // add missing to count null values
+        const counts = {};
+        values.forEach((value)=>{
+            if (value && value !== '') {
+                counts[value] = (counts[value] || 0) + 1;
+            }
+        });
+        // Convert to required format and sort by count
+        // Store results using the path as key
+        results[path] = Object.entries(counts).map(([key, count])=>({
+                key,
+                count
+            })).sort((a, b)=>b.count - a.count);
+    });
+    return results;
+};
 
 // TODO remove after debugging
 // import { reactWhatChanged as RWC } from 'react-what-changed';
@@ -5802,6 +5723,7 @@ const useLoadAllData = ({ pagination, searchTerms, advancedSearchTerms, discover
     const dataGuidType = discoveryConfig?.guidType ?? guidType;
     const dataStudyField = discoveryConfig?.studyField ?? studyField;
     const [summaryStatistics, setSummaryStatistics] = React.useState([]);
+    const [chartData, setChartData] = React.useState({});
     const { mdsData, isUninitialized, isFetching, isLoading, isSuccess, isError } = dataHook({
         studyField: dataStudyField,
         guidType: dataGuidType,
@@ -5832,14 +5754,12 @@ const useLoadAllData = ({ pagination, searchTerms, advancedSearchTerms, discover
     });
     React.useEffect(()=>{
         setSummaryStatistics(processAllSummaries(searchedData, discoveryConfig?.aggregations));
+        if (discoveryConfig.features.chartsSection?.charts && searchedData.length > 0) setChartData(processChartData(searchedData, Object.keys(discoveryConfig.features.chartsSection.charts)));
     }, [
         searchedData,
-        discoveryConfig?.aggregations
+        discoveryConfig?.aggregations,
+        discoveryConfig.features.chartsSection?.charts
     ]);
-    // const { summaryStatistics } = useGetSummaryStatistics({
-    //   data: searchedData,
-    //   aggregationConfig: discoveryConfig?.aggregations,
-    // });
     return {
         data: manualSortingAndPagination ? paginatedData : searchedData,
         hits: searchedData.length ?? -1,
@@ -5847,6 +5767,7 @@ const useLoadAllData = ({ pagination, searchTerms, advancedSearchTerms, discover
         suggestions: suggestions,
         advancedSearchFilterValues,
         summaryStatistics,
+        charts: chartData,
         dataRequestStatus: {
             isUninitialized,
             isFetching,
@@ -6386,6 +6307,7 @@ const useAggMDSServer = ({ pagination, searchTerms, advancedSearchTerms, discove
         hits: total,
         suggestions: [],
         summaryStatistics: [],
+        charts: {},
         advancedSearchFilterValues: [],
         dataRequestStatus: {
             isUninitialized,
@@ -6525,7 +6447,7 @@ const DiscoveryIndexPanel = ({ discoveryConfig, indexSelector })=>{
         advancedSearchTerms
     ]);
     // Get all required data from the data hook. This includes the metadata, search suggestions, and results, pagination, etc.
-    const { data, hits, dataRequestStatus, advancedSearchFilterValues, suggestions, summaryStatistics } = dataHook({
+    const { data, hits, dataRequestStatus, advancedSearchFilterValues, suggestions, summaryStatistics, charts: chartData } = dataHook({
         pagination: {
             offset: pagination.pageIndex * pagination.pageSize,
             pageSize: pagination.pageSize
@@ -6567,7 +6489,8 @@ const DiscoveryIndexPanel = ({ discoveryConfig, indexSelector })=>{
                         children: discoveryConfig?.features?.pageTitle.text
                     }) : null,
                     discoveryConfig.features?.chartsSection?.enabled && /*#__PURE__*/ jsxRuntime.jsx(ChartsPanel, {
-                        config: discoveryConfig.features?.chartsSection
+                        config: discoveryConfig.features?.chartsSection,
+                        data: chartData
                     }),
                     /*#__PURE__*/ jsxRuntime.jsxs("div", {
                         className: "flex items-center p-2 mb-4 bg-base-max rounded-lg",
@@ -17960,7 +17883,6 @@ const sendExistingPFBToURL = async (validatedSelections, params, done = ()=>null
             onAbort: onAbort,
             signal: signal
         });
-        console.log('received presignedURL', presignedURL);
         // the PFB export target URL is a template URL that should have a {{PRESIGNED_URL}} template
         // variable in it.
         const signedURL = encodeURIComponent(presignedURL);