CSV download in graph chart (#381)

* CSV file download in Graph Chart

* Update pre-commit

* Fixes

* Move config order

---------

Co-authored-by: Niels de Jong <niels-121@hotmail.com>

Author: JonanOribe

src/card/view/CardView.tsx

@@ -103,7 +103,7 @@ const NeoCardView = ({
     <></>
   );
   const localParameters = getLocalParameters(
-    `${query  }//${  settings.drilldownLink}` !== undefined ? settings.drilldownLink : ''
+    `${query}//${settings.drilldownLink}` !== undefined ? settings.drilldownLink : ''
   );
   const reportTypes = getReportTypes(extensions);
   const withoutFooter =

src/chart/graph/GraphChart.tsx

@@ -12,8 +12,13 @@ import { parseNodeIconConfig } from './util/NodeUtils';
 import { GraphChartVisualizationProps, layouts } from './GraphChartVisualization';
 import { handleExpand } from './util/ExplorationUtils';
 import { categoricalColorSchemes } from '../../config/ColorConfig';
+import { IconButton, Tooltip } from '@material-ui/core';
+import SaveAltIcon from '@material-ui/icons/SaveAlt';
+import { RenderSubValue } from '../../report/ReportRecordProcessing';
+import { downloadCSV } from '../ChartUtils';
 import { GraphChartContextMenu } from './component/GraphChartContextMenu';
 import { getSettings } from '../SettingsUtils';
+import { generateSafeColumnKey } from '../table/TableChart';
 
 /**
  * Draws graph data using a force-directed-graph visualization.
@@ -33,7 +38,6 @@ const NeoGraphChart = (props: ChartProps) => {
 
   const setNodePositions = (positions) =>
     props.updateReportSetting && props.updateReportSetting('nodePositions', positions);
-
   const handleEntityClick = (item) => {
     setSelectedEntity(item);
     setContextMenuOpen(false);
@@ -213,6 +217,27 @@ const NeoGraphChart = (props: ChartProps) => {
         {settings.drilldownLink ? <NeoGraphChartDeepLinkButton {...chartProps} /> : <></>}
         <NeoGraphChartVisualization2D {...chartProps} />
         <NeoGraphChartInspectModal {...chartProps}></NeoGraphChartInspectModal>
+        {settings.allowDownload && props.records && props.records.length > 0 ? (
+          <Tooltip title='Download CSV' aria-label=''>
+            <IconButton
+              onClick={() => {
+                const rows = props.records.map((record, rownumber) => {
+                  return Object.assign(
+                    { id: rownumber },
+                    ...record._fields.map((field, i) => ({ [generateSafeColumnKey(record.keys[i])]: field }))
+                  );
+                });
+                downloadCSV(rows);
+              }}
+              aria-label='download csv'
+              style={{ bottom: '9px', left: '3px', position: 'absolute' }}
+            >
+              <SaveAltIcon style={{ fontSize: '1.3rem', zIndex: 5 }} fontSize='small'></SaveAltIcon>
+            </IconButton>
+          </Tooltip>
+        ) : (
+          <></>
+        )}
       </NeoGraphChartCanvas>
     </div>
   );

src/chart/map/layers/MarkerLayer.tsx

@@ -45,12 +45,7 @@ export function createMarkers(data, props) {
                 // TODO MOVE THIS DEPENDENCY OUT OF THE TOOLTIP GENERATION
 
                 return (
-                  <tr
-                    key={i}
-                    onClick={() => {
-                      
-                    }}
-                  >
+                  <tr key={i} onClick={() => {}}>
                     <td style={{ marginRight: '10px' }} key={0}>
                       {k.toString()}:
                     </td>

src/chart/table/TableChart.tsx

@@ -48,6 +48,10 @@ function ApplyColumnType(column, value) {
   return column;
 }
 
+export const generateSafeColumnKey = (key) => {
+  return key != 'id' ? key : `${key} `;
+};
+
 const NeoTableChart = (props: ChartProps) => {
   const transposed = props.settings && props.settings.transposed ? props.settings.transposed : false;
   const allowDownload =
@@ -83,10 +87,6 @@ const NeoTableChart = (props: ChartProps) => {
 
   const { records } = props;
 
-  const generateSafeColumnKey = (key) => {
-    return key != 'id' ? key : `${key} `;
-  };
-
   const actionableFields = [];
 
   const columns = transposed

src/config/ReportConfig.tsx

@@ -244,6 +244,12 @@ export const REPORT_TYPES = {
         placeholder: 'http://bloom.neo4j.io',
         default: '',
       },
+      allowDownload: {
+        label: 'Enable CSV Download',
+        type: SELECTION_TYPES.LIST,
+        values: [true, false],
+        default: false,
+      },
       hideSelections: {
         label: 'Hide Property Selection',
         type: SELECTION_TYPES.LIST,