enhancement/shared-plot-settings (#230)

USACE · Aug 2, 2024 · 82b90e2 · 82b90e2
1 parent f4804c9
commit 82b90e2
Show file tree

Hide file tree

Showing 9 changed files with 135 additions and 95 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hhd-ui",
-  "version": "0.16.0",
+  "version": "0.16.1",
   "private": true,
   "dependencies": {
     "@ag-grid-community/client-side-row-model": "^30.0.3",

diff --git a/src/app-bundles/batch-plot-configurations-bundle.js b/src/app-bundles/batch-plot-configurations-bundle.js
@@ -71,12 +71,7 @@ export default createRestBundle({
       const projectId = store.selectProjectsIdByRoute()?.projectId;
       const uri = `/projects/${projectId}/plot_configs/${uriMap[plotType]}${!id ? '' : `/${id}`}`;
 
-      const finalFormData = {
-        ...formData,
-        date_range: '1 year',
-      }
-
-      method(uri, finalFormData, (err, _body) => {
+      method(uri, formData, (err, _body) => {
         if (err) {
           dispatch({ type: 'BATCH_PLOT_CONFIGURATION_SAVE_ERROR', payload: err });
         } else {

diff --git a/src/app-pages/project/batch-plotting/batch-plotting.jsx b/src/app-pages/project/batch-plotting/batch-plotting.jsx
@@ -64,7 +64,7 @@ const BatchPlotting = connect(
           autoClose: false,
           onClose: () => {
             downloadFinalReport({ projectId, reportConfigId, jobId });
-          }
+          },
         }
       );
     }

diff --git a/src/app-pages/project/batch-plotting/chart-content/bullseye-plot.jsx b/src/app-pages/project/batch-plotting/chart-content/bullseye-plot.jsx
@@ -1,8 +1,11 @@
-import React from 'react';
-import { Icon } from '@iconify/react';
+import React, { useState } from 'react';
+import { connect } from 'redux-bundler-react';
 
+import BatchPlotChartSettings from '../components/batch-plot-chart-settings.jsx';
 import Chart from '../../../../app-components/chart/chart.jsx';
 import { useGetBullseyeMeasurements } from '../../../../app-services/collections/instrument-timeseries-measurements.ts';
+import { determineDateRange } from '../helper.js';
+import { DateTime } from 'luxon';
 
 const generateCircle = (maxValue, scalar, isLight) => {
   const scaled = maxValue * scalar;
@@ -23,7 +26,7 @@ const generateCircle = (maxValue, scalar, isLight) => {
   };
 };
 
-const generateBullseyeData = (display, measurements = []) => {
+const generateBullseyeData = (_plotConfig, measurements = []) => {
   const x = measurements.map(el => el.x);
   const y = measurements.map(el => el.y);
 
@@ -44,50 +47,60 @@ const generateBullseyeData = (display, measurements = []) => {
   };
 };
 
-const BullseyePlot = ({
-  plotConfig,
-}) => {
-  const { project_id, display, id } = plotConfig || {};
+const BullseyePlot = connect(
+  'doSaveBatchPlotConfiguration',
+  ({
+    doSaveBatchPlotConfiguration,
+    plotConfig,
+  }) => {
+    const { auto_range, date_range, display, show_masked, show_comments, show_nonvalidated, plot_type, id, project_id } = plotConfig || {};
+
+    const [chartSettings, setChartSettings] = useState({ auto_range, display, show_masked, show_comments, show_nonvalidated, date_range, plot_type });
+    const [dateRange, setDateRange] = useState(determineDateRange(date_range));
+    const [threshold, setThreshold] = useState(3000);
 
-  const { data: measurements, isLoading } = useGetBullseyeMeasurements({ projectId: project_id, plotConfigId: id });
-  const { data, totalMax } = generateBullseyeData(display, measurements);
+    const { data: measurements } = useGetBullseyeMeasurements({
+      projectId: project_id,
+      plotConfigId: id,
+      before: DateTime.fromJSDate(dateRange[1]).toISO(),
+      after: DateTime.fromJSDate(dateRange[0]).toISO(),
+    });
+    const { data, totalMax } = generateBullseyeData(plotConfig, measurements);
 
-  const config = {
-    repsonsive: true,
-    displaylogo: false,
-    displayModeBar: true,
-    scrollZoom: true,
-  };
+    const config = {
+      repsonsive: true,
+      displaylogo: false,
+      displayModeBar: true,
+      scrollZoom: true,
+    };
 
-  const layout = {
-    showlegend: true,
-    height: 800,
-    width: 800,
-    yaxis: {
-      showgrid: true,
-      title: `<-- South | North -->`,
-    }, 
-    xaxis: {
-      showgrid: true,
-      title: `<-- West | East -->`,
-    },
-    shapes: [
-      generateCircle(totalMax, 0.25, true),
-      generateCircle(totalMax, 0.5, false),
-      generateCircle(totalMax, 0.75, true),
-      generateCircle(totalMax, 1, false),
-      generateCircle(totalMax, 1.25, true),
-    ],
-  };
+    const layout = {
+      showlegend: false,
+      height: 800,
+      width: 800,
+      yaxis: {
+        showgrid: true,
+        title: `<-- South | North -->`,
+      }, 
+      xaxis: {
+        showgrid: true,
+        title: `<-- West | East -->`,
+      },
+      shapes: [
+        generateCircle(totalMax, 0.25, true),
+        generateCircle(totalMax, 0.5, false),
+        generateCircle(totalMax, 0.75, true),
+        generateCircle(totalMax, 1, false),
+        generateCircle(totalMax, 1.25, true),
+      ],
+    };
 
-
-  return (
-    <>
-      {isLoading ? (
-        <div className='w-100 p-2 d-flex justify-content-center'>
-          <Icon icon='eos-icons:loading' fontSize={30} />
-        </div>
-      ) : (
+    const savePlotSettings = (params) => {
+      doSaveBatchPlotConfiguration(plot_type, id, { ...params });
+    };
+
+    return (
+      <>
         <div className='w-100 p-2 d-flex justify-content-center'>
           <Chart
             withOverlay
@@ -96,9 +109,24 @@ const BullseyePlot = ({
             config={config}
           />
         </div>
-      )}
-    </>
-  );
-};
+        {chartSettings ? (
+          <>
+            <hr />
+            <BatchPlotChartSettings
+              plotConfig={plotConfig}
+              threshold={threshold}
+              setThreshold={setThreshold}
+              dateRange={dateRange}
+              setDateRange={setDateRange}
+              chartSettings={chartSettings}
+              setChartSettings={setChartSettings}
+              savePlotSettings={savePlotSettings}
+            />
+          </>
+        ) : null}
+      </>
+    );
+  },
+);
 
 export default BullseyePlot;
diff --git a/src/app-pages/project/batch-plotting/chart-content/contour-plot.jsx b/src/app-pages/project/batch-plotting/chart-content/contour-plot.jsx
@@ -12,14 +12,25 @@ import Chart from '../../../../app-components/chart/chart';
 import { useGetContourMeasurements, useGetMeasurementTimestamps } from '../../../../app-services/collections/instrument-timeseries-measurements.ts';
 
 const generateContourData = (display, measurements) => {
-  const { time } = display || {};
+  const { time, show_labels, contour_smoothing, gradient_smoothing } = display || {};
   if (!time) return [];
 
   return [{
     ...measurements,
     connectgaps: true,
     type: 'contour',
-    colorscale: 'Jet',
+    contours: {
+      line: {
+        smoothing: contour_smoothing ? 0.9 : 0,
+      },
+      ...gradient_smoothing && { coloring: 'heatmap' },
+      showlabels: show_labels,
+      labelfont: {
+        family: 'Raleway',
+        size: 12,
+        color: 'white',
+      },
+    },
   }];
 };
 

diff --git a/src/app-pages/project/batch-plotting/chart-content/scatter-line-plot.jsx b/src/app-pages/project/batch-plotting/chart-content/scatter-line-plot.jsx
@@ -34,7 +34,7 @@ const ScatterLinePlot = connect(
 
     const [dateRange, setDateRange] = useState([subDays(new Date(), 365), new Date()]);
     const [threshold, setThreshold] = useState(3000);
-    const [chartSettings, setChartSettings] = useState({ auto_range, display, show_masked, show_comments, show_nonvalidated, date_range });
+    const [chartSettings, setChartSettings] = useState({ auto_range, display, show_masked, show_comments, show_nonvalidated, date_range, plot_type });
 
     const chartData = useMemo(() => generateNewChartData(plotMeasurements, plotTimeseries, chartSettings, plotConfig), [plotMeasurements, activeId]);
     const withPrecipitation = plotTimeseries.some(ts => ts.parameter === 'precipitation');
@@ -99,7 +99,7 @@ const ScatterLinePlot = connect(
       if (activeId) {
         setThreshold(threshold);
         setDateRange(determineDateRange(date_range));
-        setChartSettings({ auto_range, date_range, show_comments, show_nonvalidated, show_masked });
+        setChartSettings({ auto_range, date_range, show_comments, show_nonvalidated, show_masked, plot_type });
       }
     }, [activeId]);
 

diff --git a/src/app-pages/project/batch-plotting/components/batch-plot-chart-settings.jsx b/src/app-pages/project/batch-plotting/components/batch-plot-chart-settings.jsx
@@ -16,8 +16,8 @@ import { determineDateRange } from '../helper';
 const customDateFormat = (fromTime, endTime) => {
   const fromISO = fromTime.toISOString();
   const endISO = endTime.toISOString();
-  const fromDate = DateTime.fromISO(fromISO).toFormat('YYYY-MM-DD');
-  const endDate = DateTime.fromISO(endISO).toFormat('YYYY-MM-DD');
+  const fromDate = DateTime.fromISO(fromISO).toFormat('yyyy-MM-dd');
+  const endDate = DateTime.fromISO(endISO).toFormat('yyyy-MM-dd');
 
   return `${fromDate} ${endDate}`;
 };
@@ -61,14 +61,14 @@ const BatchPlotChartSettings = connect(
     threshold = 3000,
     setThreshold,
     savePlotSettings,
-    chartData,
+    chartData = {},
   }) => {
     const [fromTime, endTime] = dateRange;
-    const { date_range, auto_range, show_comments, show_masked, show_nonvalidated } = chartSettings;
+    const { date_range, auto_range, show_comments, show_masked, show_nonvalidated, plot_type } = chartSettings;
 
     const [currentThreshold, setCurrentThreshold] = useState(threshold);
     const [csvData, setCsvData] = useState([]);
-    const [activeButton, setActiveButton] = useState(date_range);
+    const [activeButton, setActiveButton] = useState(['lifetime', '5 years', '1 year', '1 month'].includes(date_range) ? date_range : 'Custom');
 
     const isDisplayAllActive = () => show_comments && show_masked && show_nonvalidated;
 
@@ -77,7 +77,7 @@ const BatchPlotChartSettings = connect(
     };
 
     useEffect(() => {
-      setDateRange(determineDateRange(activeButton));
+      setDateRange(determineDateRange(activeButton === 'Custom' ? date_range : activeButton));
     }, [activeButton]);
 
     return (
@@ -295,14 +295,16 @@ const BatchPlotChartSettings = connect(
             className='ml-2'
           />
         </CSVLink>
-        <Button
-          isOutline
-          size='small'
-          variant='info'
-          text='Advanced Settings'
-          className='float-right'
-          handleClick={() => doModalOpen(BatchPlotAdvancedSettings, { chartData, plotConfig }, 'lg')}
-        />
+        {plot_type === 'scatter-line' && (
+          <Button
+            isOutline
+            size='small'
+            variant='info'
+            text='Advanced Settings'
+            className='float-right'
+            handleClick={() => doModalOpen(BatchPlotAdvancedSettings, { chartData, plotConfig }, 'lg')}
+          />
+        )}
       </div>
     );
   }

diff --git a/src/app-pages/project/batch-plotting/helper.js b/src/app-pages/project/batch-plotting/helper.js
@@ -8,6 +8,15 @@ export const PlotTypeText = {
   'bullseye': 'Bullseye Plot',
 };
 
+const defaultPlotConfigOptions = {
+  show_comments: true,
+  show_masked: true,
+  show_nonvalidated: true,
+  auto_range: false,
+  threshold: 3000,
+  date_range: '1 year',
+};
+
 const getStyle = (trace) => {
   const { color, line_style, show_markers, width, y_axis } = trace;
   const lineColor = color === '#ffffff' ? null : color;
@@ -40,8 +49,9 @@ export const determineDateRange = date_range => {
     case '1 month':
       return [dateAgo(30), new Date()];
     case '1 year':
-    default:
       return [dateAgo(365), new Date()];
+    default:
+      return date_range.split(' ').map(date => DateTime.fromFormat(date, 'yyyy-MM-dd').toJSDate());
   };
 };
 
@@ -141,6 +151,7 @@ const _plotPayload = (configName, display, projectId) => ({
   name: configName.trim(),
   display,
   project_id: projectId,
+  ...defaultPlotConfigOptions,
 });
 
 export const formatTimeseriesOptions = (timeseries = []) => (

diff --git a/src/app-services/collections/instrument-timeseries-measurements.ts b/src/app-services/collections/instrument-timeseries-measurements.ts
@@ -2,12 +2,6 @@ import { useQuery } from '@tanstack/react-query';
 
 import { apiGet } from '../fetch-helpers';
 
-type TimeseriesSelectValue = {
-  label: string,
-  value: string,
-  instrumentName: string
-}
-
 interface InstrumentParams {
   instrumentId: string,
   instrumentType: string,
@@ -25,7 +19,6 @@ interface ContourParams extends BullseyeParams {
 interface TimestampParams extends BullseyeParams {
   before?: string,
   after?: string,
-  selectedTimeseries?: TimeseriesSelectValue[],
 }
 
 export const useGetContourMeasurements = ({ projectId, plotConfigId, time }: ContourParams, opts: ClientQueryOptions) => {
@@ -38,29 +31,29 @@ export const useGetContourMeasurements = ({ projectId, plotConfigId, time }: Con
   });
 };
 
-export const useGetBullseyeMeasurements = ({ projectId, plotConfigId }: BullseyeParams, opts: ClientQueryOptions) => {
-  const uri = `/projects/${projectId}/plot_configs/bullseye_plots/${plotConfigId}/measurements`;
+export const useGetBullseyeMeasurements = ({ projectId, plotConfigId, before, after }: TimestampParams, opts: ClientQueryOptions) => {
+  const uri = `/projects/${projectId}/plot_configs/bullseye_plots/${plotConfigId}/measurements?before=${before}&after=${after}`;
 
   return useQuery({
-      queryKey: [`contourMeasurements`, projectId, plotConfigId],
+      queryKey: [`contourMeasurements`, projectId, plotConfigId, before, after],
       queryFn: () => apiGet(uri),
       ...opts,
   });
 };
 
 export const useGetMeasurementsByInstrumentType = ({ instrumentId, instrumentType }: InstrumentParams, opts: ClientQueryOptions) => {
-    const typeMap = {
-      'SAA': 'saa',
-      'IPI': 'ipi',
-    } as Record<string, string>;
+  const typeMap = {
+    'SAA': 'saa',
+    'IPI': 'ipi',
+  } as Record<string, string>;
 
-    const uri = `/instruments/${typeMap[instrumentType]}/${instrumentId}/measurements`;
+  const uri = `/instruments/${typeMap[instrumentType]}/${instrumentId}/measurements`;
 
-    return useQuery({
-        queryKey: [`instrumentMeasurementsType`, instrumentId, instrumentType],
-        queryFn: () => apiGet(uri),
-        ...opts,
-    });
+  return useQuery({
+      queryKey: [`instrumentMeasurementsType`, instrumentId, instrumentType],
+      queryFn: () => apiGet(uri),
+      ...opts,
+  });
 };
 
 export const useGetMeasurementTimestamps = ({ projectId, plotConfigId, before, after }: TimestampParams, opts: ClientQueryOptions) => {
@@ -71,4 +64,4 @@ export const useGetMeasurementTimestamps = ({ projectId, plotConfigId, before, a
       queryFn: () => apiGet(uri),
       ...opts,
   });
-}
+};
-Original file line number
+Diff line change
@@ Expand Up / @@ -64,7 +64,7 @@ const BatchPlotting = connect( @@
               autoClose: false,
               onClose: () => {
                 downloadFinalReport({ projectId, reportConfigId, jobId });
-              }
+              },
             }
           );
         }
@@ Expand Down @@