Exposure Analysis Download CSV access from anywhere

frontend/src/components/MapView/LeftPanel/AnalysisPanel/ExposureAnalysisActions/index.tsx

@@ -9,17 +9,21 @@ import {
 } from '@material-ui/core';
 import { snakeCase } from 'lodash';
 import { useSelector } from 'react-redux';
-import { downloadToFile } from 'components/MapView/utils';
+import {
+  downloadToFile,
+  getExposureAnalysisColumnsToRender,
+  getExposureAnalysisTableDataRowsToRender,
+} from 'components/MapView/utils';
 import { useSafeTranslation } from 'i18n';
 import {
   exposureLayerIdSelector,
   getCurrentDefinition,
-  TableRow,
   TableRow as AnalysisTableRow,
 } from 'context/analysisResultStateSlice';
 import ReportDialog from 'components/Common/ReportDialog';
-import { Column, quoteAndEscapeCell } from 'utils/analysis-utils';
+import { Column } from 'utils/analysis-utils';
 import { ReportsDefinitions } from 'config/utils';
+import { getExposureAnalysisCsvData } from 'utils/csv-utils';
 
 function ExposureAnalysisActions({
   analysisButton,
@@ -35,24 +39,17 @@ function ExposureAnalysisActions({
 
   const [openReport, setOpenReport] = useState(false);
 
-  const getCellValue = useCallback((value: string | number, column: Column) => {
-    if (column.format && typeof value === 'number') {
-      return quoteAndEscapeCell(column.format(value));
-    }
-    return quoteAndEscapeCell(value);
-  }, []);
-
-  const columnsToRenderCsv = useMemo(() => {
-    return columns.reduce(
-      (acc: { [key: string]: string | number }, column: Column) => {
-        return {
-          ...acc,
-          [column.id]: column.label,
-        };
-      },
-      {},
-    );
-  }, [columns]);
+  const exposureAnalysisColumnsToRender = getExposureAnalysisColumnsToRender(
+    columns,
+  );
+  const exposureAnalysisTableRowsToRender = getExposureAnalysisTableDataRowsToRender(
+    columns,
+    tableData,
+  );
+  const exposureAnalysisCsvData = getExposureAnalysisCsvData(
+    exposureAnalysisColumnsToRender,
+    exposureAnalysisTableRowsToRender,
+  );
 
   const reportConfig = useMemo(() => {
     // We use find here because exposure reports and layers have 1 - 1 sync.
@@ -67,35 +64,12 @@ function ExposureAnalysisActions({
     return ReportsDefinitions[foundReportKeyBasedOnLayerId as string];
   }, [exposureLayerId]);
 
-  const tableDataRowsToRenderCsv = useMemo(() => {
-    return tableData.map((tableRowData: TableRow) => {
-      return columns.reduce(
-        (acc: { [key: string]: string | number }, column: Column) => {
-          const value = tableRowData[column.id];
-          return {
-            ...acc,
-            [column.id]: getCellValue(value, column),
-          };
-        },
-        {},
-      );
-    });
-  }, [columns, getCellValue, tableData]);
-
-  const analysisCsvData = useMemo(() => {
-    return [columnsToRenderCsv, ...tableDataRowsToRenderCsv]
-      .map(analysisCsvItem => {
-        return Object.values(analysisCsvItem);
-      })
-      .join('\n');
-  }, [columnsToRenderCsv, tableDataRowsToRenderCsv]);
-
   const handleOnDownloadCsv = useCallback(
     (event: MouseEvent<HTMLButtonElement>) => {
       event.preventDefault();
       downloadToFile(
         {
-          content: analysisCsvData,
+          content: exposureAnalysisCsvData,
           isUrl: false,
         },
         `${snakeCase(analysisDefinition?.id)}_${snakeCase(
@@ -104,7 +78,7 @@ function ExposureAnalysisActions({
         'text/csv',
       );
     },
-    [analysisCsvData, analysisDefinition],
+    [analysisDefinition, exposureAnalysisCsvData],
   );
 
   const handleToggleReport = (toggle: boolean) => {
@@ -118,7 +92,7 @@ function ExposureAnalysisActions({
       <Button className={analysisButton} onClick={clearAnalysis}>
         <Typography variant="body2">{t('Clear Analysis')}</Typography>
       </Button>
-      {analysisCsvData && (
+      {exposureAnalysisCsvData && (
         <Button className={bottomButton} onClick={handleOnDownloadCsv}>
           <Typography variant="body2">{t('Download as CSV')}</Typography>
         </Button>

frontend/src/components/MapView/LeftPanel/AnalysisPanel/index.tsx

@@ -57,6 +57,11 @@ import {
   analysisResultSortOrderSelector,
   setAnalysisResultSortByKey,
   setAnalysisResultSortOrder,
+  exposureAnalysisResultSortByKeySelector,
+  exposureAnalysisResultSortOrderSelector,
+  setExposureAnalysisResultSortByKey,
+  setExposureAnalysisResultSortOrder,
+  TableRow,
 } from 'context/analysisResultStateSlice';
 import {
   AdminLevelType,
@@ -102,6 +107,7 @@ import LoadingBlinkingDots from 'components/Common/LoadingBlinkingDots';
 import AnalysisTable from './AnalysisTable';
 import ExposureAnalysisTable from './AnalysisTable/ExposureAnalysisTable';
 import ExposureAnalysisActions from './ExposureAnalysisActions';
+import { getExposureAnalysisTableData } from '../../utils';
 
 const tabIndex = 2;
 
@@ -132,6 +138,12 @@ const AnalysisPanel = memo(
     const analysisResultSortOrder = useSelector(
       analysisResultSortOrderSelector,
     );
+    const exposureAnalysisResultSortByKey = useSelector(
+      exposureAnalysisResultSortByKeySelector,
+    );
+    const exposureAnalysisResultSortOrder = useSelector(
+      exposureAnalysisResultSortOrderSelector,
+    );
     const isAnalysisLoading = useSelector(isAnalysisLoadingSelector);
     const isExposureAnalysisLoading = useSelector(
       isExposureAnalysisLoadingSelector,
@@ -142,12 +154,12 @@ const AnalysisPanel = memo(
     const [
       exposureAnalysisSortColumn,
       setExposureAnalysisSortColumn,
-    ] = useState<Column['id']>('name');
+    ] = useState<Column['id']>(exposureAnalysisResultSortByKey);
     // exposure analysis sort order
     const [
       exposureAnalysisIsAscending,
       setExposureAnalysisIsAscending,
-    ] = useState(true);
+    ] = useState(exposureAnalysisResultSortOrder === 'asc');
     // defaults the sort column of every other analysis table to 'name'
     const [analysisSortColumn, setAnalysisSortColumn] = useState<Column['id']>(
       analysisResultSortByKey,
@@ -654,22 +666,22 @@ const AnalysisPanel = memo(
         );
         setExposureAnalysisSortColumn(newExposureAnalysisSortColumn);
         setExposureAnalysisIsAscending(newIsAsc);
+        // set the sort by key of exposure analysis data in redux
+        dispatch(
+          setExposureAnalysisResultSortByKey(newExposureAnalysisSortColumn),
+        );
+        // set the sort order of exposure analysis result data in redux
+        dispatch(setExposureAnalysisResultSortOrder(newIsAsc ? 'asc' : 'desc'));
       },
-      [exposureAnalysisIsAscending, exposureAnalysisSortColumn],
+      [dispatch, exposureAnalysisIsAscending, exposureAnalysisSortColumn],
     );
 
     // The exposure analysis table data
-    const exposureAnalysisTableData = useMemo(() => {
-      return orderBy(
-        analysisResult?.tableData,
-        exposureAnalysisSortColumn,
-        exposureAnalysisIsAscending ? 'asc' : 'desc',
-      );
-    }, [
-      analysisResult,
-      exposureAnalysisIsAscending,
+    const exposureAnalysisTableData = getExposureAnalysisTableData(
+      (analysisResult?.tableData || []) as TableRow[],
       exposureAnalysisSortColumn,
-    ]);
+      exposureAnalysisIsAscending ? 'asc' : 'desc',
+    );
 
     const renderedExposureAnalysisLoading = useMemo(() => {
       if (!isExposureAnalysisLoading) {

frontend/src/components/MapView/LeftPanel/layersPanel/AnalysisLayerMenuItem/__snapshots__/index.test.tsx.snap

@@ -148,6 +148,9 @@ exports[`renders as expected 1`] = `
                       keepmounted="true"
                       open="false"
                     >
+                      <mock-menuitem>
+                        Download as CSV
+                      </mock-menuitem>
                       <mock-menuitem>
                         Download as GeoJSON
                       </mock-menuitem>

frontend/src/components/MapView/LeftPanel/layersPanel/AnalysisLayerSwitchItem/AnalysisLayerSwitchItemDownloadOptions/__snapshots__/index.test.tsx.snap

@@ -34,6 +34,9 @@ exports[`renders as expected 1`] = `
     keepmounted="true"
     open="false"
   >
+    <mock-menuitem>
+      Download as CSV
+    </mock-menuitem>
     <mock-menuitem>
       Download as GeoJSON
     </mock-menuitem>

frontend/src/components/MapView/LeftPanel/layersPanel/AnalysisLayerSwitchItem/AnalysisLayerSwitchItemDownloadOptions/index.tsx

@@ -2,7 +2,12 @@ import React, { memo, useMemo, useCallback, useState } from 'react';
 import { IconButton, Menu, MenuItem, Tooltip } from '@material-ui/core';
 import GetAppIcon from '@material-ui/icons/GetApp';
 import { useSafeTranslation } from 'i18n';
-import { downloadToFile } from 'components/MapView/utils';
+import {
+  downloadToFile,
+  getExposureAnalysisColumnsToRender,
+  getExposureAnalysisTableData,
+  getExposureAnalysisTableDataRowsToRender,
+} from 'components/MapView/utils';
 import {
   BaselineLayerResult,
   downloadCSVFromTableData,
@@ -11,6 +16,15 @@ import {
   PolygonAnalysisResult,
   useAnalysisTableColumns,
 } from 'utils/analysis-utils';
+import { snakeCase } from 'lodash';
+import { useSelector } from 'react-redux';
+import {
+  exposureAnalysisResultSortByKeySelector,
+  exposureAnalysisResultSortOrderSelector,
+  getCurrentDefinition,
+  TableRow,
+} from 'context/analysisResultStateSlice';
+import { getExposureAnalysisCsvData } from 'utils/csv-utils';
 
 const AnalysisLayerSwitchItemDownloadOptions = memo(
   ({
@@ -26,20 +40,33 @@ const AnalysisLayerSwitchItemDownloadOptions = memo(
 
     const { translatedColumns } = useAnalysisTableColumns(analysisData);
 
+    const exposureAnalysisResultSortByKey = useSelector(
+      exposureAnalysisResultSortByKeySelector,
+    );
+    const exposureAnalysisResultSortOrder = useSelector(
+      exposureAnalysisResultSortOrderSelector,
+    );
+    const analysisDefinition = useSelector(getCurrentDefinition);
+
+    const exposureAnalysisTableData = getExposureAnalysisTableData(
+      (analysisData?.tableData || []) as TableRow[],
+      exposureAnalysisResultSortByKey,
+      exposureAnalysisResultSortOrder,
+    );
+    const exposureAnalysisColumnsToRender = getExposureAnalysisColumnsToRender(
+      translatedColumns,
+    );
+    const exposureAnalysisTableRowsToRender = getExposureAnalysisTableDataRowsToRender(
+      translatedColumns,
+      exposureAnalysisTableData,
+    );
+
     const { t } = useSafeTranslation();
 
     const featureCollection = useMemo(() => {
       return analysisData?.featureCollection;
     }, [analysisData]);
 
-    const doesLayerAcceptCSVDownload = useMemo(() => {
-      return (
-        analysisData &&
-        (analysisData instanceof BaselineLayerResult ||
-          analysisData instanceof PolygonAnalysisResult)
-      );
-    }, [analysisData]);
-
     const handleDownloadMenuClose = useCallback(() => {
       setDownloadMenuAnchorEl(null);
     }, []);
@@ -90,11 +117,23 @@ const AnalysisLayerSwitchItemDownloadOptions = memo(
     }, [analysisData, analysisDate, t]);
 
     const handleDownloadCsv = useCallback((): void => {
-      if (
-        // Explicit condition for type narrowing
-        !analysisData ||
-        analysisData instanceof ExposedPopulationResult
-      ) {
+      if (!analysisData) {
+        return;
+      }
+      if (analysisData instanceof ExposedPopulationResult) {
+        downloadToFile(
+          {
+            content: getExposureAnalysisCsvData(
+              exposureAnalysisColumnsToRender,
+              exposureAnalysisTableRowsToRender,
+            ),
+            isUrl: false,
+          },
+          `${snakeCase(analysisDefinition?.id)}_${snakeCase(
+            analysisDefinition?.legendText,
+          )}`,
+          'text/csv',
+        );
         return;
       }
       downloadCSVFromTableData(
@@ -107,8 +146,11 @@ const AnalysisLayerSwitchItemDownloadOptions = memo(
     }, [
       analysisData,
       analysisDate,
+      analysisDefinition,
       analysisResultSortByKey,
       analysisResultSortOrder,
+      exposureAnalysisColumnsToRender,
+      exposureAnalysisTableRowsToRender,
       translatedColumns,
     ]);
 
@@ -127,15 +169,12 @@ const AnalysisLayerSwitchItemDownloadOptions = memo(
     }, [analysisData, featureCollection, fileName]);
 
     const renderedDownloadAsCSVMenuItem = useMemo(() => {
-      if (!doesLayerAcceptCSVDownload) {
-        return null;
-      }
       return (
         <MenuItem key="download-as-csv" onClick={handleDownloadCsv}>
           {t('Download as CSV')}
         </MenuItem>
       );
-    }, [doesLayerAcceptCSVDownload, handleDownloadCsv, t]);
+    }, [handleDownloadCsv, t]);
 
     return (
       <>

frontend/src/components/MapView/LeftPanel/layersPanel/AnalysisLayerSwitchItem/__snapshots__/index.test.tsx.snap

@@ -79,6 +79,9 @@ exports[`renders as expected 1`] = `
         keepmounted="true"
         open="false"
       >
+        <mock-menuitem>
+          Download as CSV
+        </mock-menuitem>
         <mock-menuitem>
           Download as GeoJSON
         </mock-menuitem>