[Feature Request] Refresh button #166

docs/antora.yml

@@ -1,6 +1,6 @@
 name: neodash
 version: 2.2
-title: NeoDash Documentation
+title: NeoDash
 start_page: ROOT:index.adoc
 nav:
   - modules/ROOT/nav.adoc

docs/preview.yml

@@ -1,5 +1,5 @@
 site:
-  title: NeoDash Documentation
+  title: NeoDash
 
 content:
   sources:

src/card/Card.tsx

@@ -9,7 +9,6 @@ import {
   updateSelectionThunk,
   updateReportQueryThunk,
   toggleCardSettingsThunk,
-  updateReportRefreshRateThunk,
   updateReportSettingThunk,
   updateReportTitleThunk,
   updateReportTypeThunk,
@@ -47,7 +46,6 @@ const NeoCard = ({
   onTypeUpdate, // action to take when the card report type is updated.
   onFieldsUpdate, // action to take when the set of returned query fields is updated.
   onQueryUpdate, // action to take when the card query is updated.
-  onRefreshRateUpdate, // action to take when the card refresh rate is updated.
   onReportSettingUpdate, // action to take when an advanced report setting is updated.
   onSelectionUpdate, // action to take when the selected visualization fields are updated.
   onGlobalParameterUpdate, // action to take when a report updates a dashboard parameter.
@@ -138,7 +136,6 @@ const NeoCard = ({
             query={report.query}
             globalParameters={globalParameters}
             fields={report.fields ? report.fields : []}
-            refreshRate={report.refreshRate}
             selection={report.selection}
             widthPx={width}
             heightPx={height}
@@ -170,7 +167,6 @@ const NeoCard = ({
             heightPx={height}
             fields={report.fields}
             type={report.type}
-            refreshRate={report.refreshRate}
             expanded={expanded}
             extensions={extensions}
             dashboardSettings={dashboardSettings}
@@ -179,7 +175,6 @@ const NeoCard = ({
             reportSettings={report.settings}
             reportSettingsOpen={report.advancedSettingsOpen}
             onQueryUpdate={(query) => onQueryUpdate(index, query)}
-            onRefreshRateUpdate={(rate) => onRefreshRateUpdate(index, rate)}
             onDatabaseChanged={(database) => onDatabaseChanged(index, database)}
             onReportSettingUpdate={(setting, value) => onReportSettingUpdate(index, setting, value)}
             onTypeUpdate={(type) => onTypeUpdate(index, type)}
@@ -237,9 +232,6 @@ const mapDispatchToProps = (dispatch) => ({
   onQueryUpdate: (index: any, query: any) => {
     dispatch(updateReportQueryThunk(index, query));
   },
-  onRefreshRateUpdate: (index: any, rate: any) => {
-    dispatch(updateReportRefreshRateThunk(index, rate));
-  },
   onTypeUpdate: (index: any, type: any) => {
     dispatch(updateReportTypeThunk(index, type));
   },

src/card/CardActions.ts

@@ -32,12 +32,6 @@ export const updateReportQuery = (pagenumber: number, index: number, query: any)
   payload: { pagenumber, index, query },
 });
 
-export const UPDATE_REPORT_REFRESH_RATE = 'PAGE/CARD/UPDATE_REPORT_REFRESH_RATE';
-export const updateReportRefreshRate = (pagenumber: number, index: number, rate: any) => ({
-  type: UPDATE_REPORT_REFRESH_RATE,
-  payload: { pagenumber, index, rate },
-});
-
 export const UPDATE_CYPHER_PARAMETERS = 'PAGE/CARD/UPDATE_CYPHER_PARAMETERS';
 export const updateCypherParameters = (pagenumber: number, index: number, parameters: any) => ({
   type: UPDATE_CYPHER_PARAMETERS,

src/card/CardReducer.ts

@@ -6,7 +6,6 @@ import {
   UPDATE_CYPHER_PARAMETERS,
   UPDATE_FIELDS,
   UPDATE_REPORT_QUERY,
-  UPDATE_REPORT_REFRESH_RATE,
   UPDATE_REPORT_SETTING,
   UPDATE_REPORT_SIZE,
   UPDATE_REPORT_TITLE,
@@ -61,12 +60,6 @@ export const cardReducer = (state = CARD_INITIAL_STATE, action: { type: any; pay
       state = update(state, { query: query });
       return state;
     }
-    case UPDATE_REPORT_REFRESH_RATE: {
-      const { rate } = payload;
-
-      state = update(state, { refreshRate: rate });
-      return state;
-    }
     case UPDATE_CYPHER_PARAMETERS: {
       const { parameters } = payload;
       state = update(state, { parameters: parameters });

src/card/CardThunks.ts

@@ -2,8 +2,6 @@ import {
   updateReportTitle,
   updateReportQuery,
   updateSelection,
-  updateReportSize,
-  updateReportRefreshRate,
   updateCypherParameters,
   updateFields,
   updateReportType,
@@ -52,17 +50,6 @@ export const updateReportQueryThunk = (index, query) => (dispatch: any, getState
   }
 };
 
-// TODO: make refresh rate an advanced setting
-export const updateReportRefreshRateThunk = (index, rate) => (dispatch: any, getState: any) => {
-  try {
-    const state = getState();
-    const { pagenumber } = state.dashboard.settings;
-    dispatch(updateReportRefreshRate(pagenumber, index, rate));
-  } catch (e) {
-    dispatch(createNotificationThunk('Cannot update refresh rate', e));
-  }
-};
-
 export const updateCypherParametersThunk = (index, parameters) => (dispatch: any, getState: any) => {
   try {
     const state = getState();

src/card/settings/CardSettings.tsx

@@ -11,7 +11,6 @@ const NeoCardSettings = ({
   query,
   database, // Current database related to the report
   databaseList, // List of databases the user can choose from ('system' is filtered out)
-  refreshRate,
   width,
   height,
   type,
@@ -21,7 +20,6 @@ const NeoCardSettings = ({
   heightPx,
   extensions, // A set of enabled extensions.
   onQueryUpdate,
-  onRefreshRateUpdate,
   onDatabaseChanged, // When the database related to a report is changed it must be stored in the report state
   onRemovePressed,
   onClonePressed,
@@ -57,7 +55,6 @@ const NeoCardSettings = ({
     <NeoCardSettingsContent
       query={query}
       database={database}
-      refreshRate={refreshRate}
       reportSettings={reportSettings}
       width={width}
       height={height}
@@ -67,7 +64,6 @@ const NeoCardSettings = ({
       onDatabaseChanged={onDatabaseChanged}
       onQueryUpdate={onQueryUpdate}
       onReportSettingUpdate={onReportSettingUpdate}
-      onRefreshRateUpdate={onRefreshRateUpdate}
       onTypeUpdate={onTypeUpdate}
     ></NeoCardSettingsContent>
   ) : (

src/card/settings/CardSettingsContent.tsx

@@ -12,11 +12,9 @@ const NeoCardSettingsContent = ({
   database, // Current report database
   databaseList, // List of databases the user can choose from ('system' is filtered out)
   reportSettings,
-  refreshRate,
   type,
   extensions,
   onQueryUpdate,
-  onRefreshRateUpdate,
   onReportSettingUpdate,
   onTypeUpdate,
   onDatabaseChanged, // When the database related to a report is changed it must be stored in the report state
@@ -25,9 +23,6 @@ const NeoCardSettingsContent = ({
   const [queryText, setQueryText] = React.useState(query);
   const debouncedQueryUpdate = useCallback(debounce(onQueryUpdate, 250), []);
 
-  const [refreshRateText, setRefreshRateText] = React.useState(refreshRate);
-  const debouncedRefreshRateUpdate = useCallback(debounce(onRefreshRateUpdate, 250), []);
-
   // State to manage the current database entry inside the form
   const [databaseText, setDatabaseText] = React.useState(database);
   const debouncedDatabaseUpdate = useCallback(debounce(onDatabaseChanged, 250), []);
@@ -39,13 +34,6 @@ const NeoCardSettingsContent = ({
     }
   }, [query]);
 
-  useEffect(() => {
-    // Reset text to the dashboard state when the page gets reorganized.
-    if (refreshRate !== refreshRateText) {
-      setRefreshRateText(refreshRate !== undefined ? refreshRate : '');
-    }
-  }, [refreshRate]);
-
   const reportTypes = getReportTypes(extensions);
   const SettingsComponent = reportTypes[type] && reportTypes[type].settingsComponent;
 
@@ -64,13 +52,13 @@ const NeoCardSettingsContent = ({
         ))}
       />
 
-      {reportTypes[type] && reportTypes[type].disableRefreshRate == undefined ? (
+      {reportTypes[type] && reportTypes[type].disableDatabaseSelector == undefined ? (
         <NeoField
           select
           placeholder='neo4j'
           label='Database'
           value={databaseText}
-          style={{ width: '47%', maxWidth: '200px', marginRight: '10px' }}
+          style={{ width: '47%', maxWidth: '200px' }}
           choices={databaseList.map((database) => (
             <MenuItem key={database} value={database}>
               {database}
@@ -85,22 +73,6 @@ const NeoCardSettingsContent = ({
         <></>
       )}
 
-      {reportTypes[type] && reportTypes[type].disableRefreshRate == undefined ? (
-        <NeoField
-          placeholder='0 (No Refresh)'
-          label='Refresh Rate (sec)'
-          numeric={true}
-          value={refreshRateText}
-          style={{ width: '47%', maxWidth: '200px' }}
-          onChange={(value) => {
-            setRefreshRateText(value);
-            debouncedRefreshRateUpdate(value);
-          }}
-        />
-      ) : (
-        <></>
-      )}
-
       <br />
       <br />
       {/* Allow for overriding the code box with a custom component */}

src/card/view/CardView.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { ReportItemContainer } from '../CardStyle';
 import NeoCardViewHeader from './CardViewHeader';
 import NeoCardViewFooter from './CardViewFooter';
@@ -8,7 +8,6 @@ import NeoCodeEditorComponent from '../../component/editor/CodeEditorComponent';
 import PlayCircleFilledIcon from '@material-ui/icons/PlayCircleFilled';
 
 import { CARD_FOOTER_HEIGHT, CARD_HEADER_HEIGHT } from '../../config/CardConfig';
-import { downloadComponentAsImage } from '../../chart/ChartUtils';
 import { getReportTypes } from '../../extensions/ExtensionUtils';
 import NeoCodeViewerComponent from '../../component/editor/CodeViewerComponent';
 
@@ -29,7 +28,6 @@ const NeoCardView = ({
   dashboardSettings,
   settings,
   settingsOpen,
-  refreshRate,
   editable,
   onGlobalParameterUpdate,
   onSelectionUpdate,
@@ -42,11 +40,12 @@ const NeoCardView = ({
   const reportHeight = heightPx - CARD_FOOTER_HEIGHT - CARD_HEADER_HEIGHT + 13;
   const cardHeight = heightPx - CARD_FOOTER_HEIGHT;
   const ref = React.useRef();
+  const [lastRunTimestamp, setLastRunTimestamp] = useState(Date.now());
 
   const getLocalParameters = (parse_string): any => {
     let re = /(?:^|\W)\$(\w+)(?!\w)/g;
-      let match;
-      let localQueryVariables: string[] = [];
+    let match;
+    let localQueryVariables: string[] = [];
     while ((match = re.exec(parse_string))) {
       localQueryVariables.push(match[1]);
     }
@@ -65,10 +64,12 @@ const NeoCardView = ({
       title={title}
       editable={editable}
       description={settings.description}
-      fullscreenEnabled={dashboardSettings.fullscreenEnabled}
-      downloadImageEnabled={dashboardSettings.downloadImageEnabled}
+      fullscreenEnabled={settings.fullscreenEnabled}
+      downloadImageEnabled={settings.downloadImageEnabled}
+      refreshButtonEnabled={settings.refreshButtonEnabled}
       onTitleUpdate={onTitleUpdate}
       onToggleCardSettings={onToggleCardSettings}
+      onManualRefreshCard={() => setLastRunTimestamp(Date.now())}
       settings={settings}
       onDownloadImage={onDownloadImage}
       onToggleCardExpand={onToggleCardExpand}
@@ -115,6 +116,13 @@ const NeoCardView = ({
     )
   );
 
+  const localParameters = getLocalParameters(query);
+  useEffect(() => {
+    if (!settingsOpen) {
+      setLastRunTimestamp(Date.now());
+    }
+  }, [settingsOpen, query, JSON.stringify(localParameters)]);
+
   // TODO - understand why CardContent is throwing a warning based on this style config.
   const cardContentStyle = {
     paddingBottom: '0px',
@@ -139,15 +147,15 @@ const NeoCardView = ({
         <NeoReport
           query={query}
           database={database}
-          parameters={getLocalParameters(query)}
+          parameters={localParameters}
+          lastRunTimestamp={lastRunTimestamp}
           extensions={extensions}
           disabled={settingsOpen}
           selection={selection}
           fields={fields}
           settings={settings}
           expanded={expanded}
           rowLimit={dashboardSettings.disableRowLimiting ? 1000000 : reportTypes[type] && reportTypes[type].maxRecords}
-          refreshRate={refreshRate}
           dimensions={{ width: widthPx, height: heightPx }}
           type={type}
           ChartType={reportTypes[type] && reportTypes[type].component}

src/card/view/CardViewHeader.tsx

@@ -2,6 +2,7 @@ import React, { useEffect } from 'react';
 import CardHeader from '@material-ui/core/CardHeader';
 import IconButton from '@material-ui/core/IconButton';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
+import RefreshIcon from '@material-ui/icons/Refresh';
 import FullscreenIcon from '@material-ui/icons/Fullscreen';
 import FullscreenExit from '@material-ui/icons/FullscreenExit';
 import { Badge, Dialog, DialogContent, DialogTitle, TextField } from '@material-ui/core';
@@ -22,7 +23,9 @@ const NeoCardViewHeader = ({
   onTitleUpdate,
   fullscreenEnabled,
   downloadImageEnabled,
+  refreshButtonEnabled,
   onToggleCardSettings,
+  onManualRefreshCard,
   onDownloadImage,
   onToggleCardExpand,
   expanded,
@@ -115,6 +118,14 @@ const NeoCardViewHeader = ({
     </Tooltip>
   );
 
+  const refreshButton = (
+    <Tooltip title='Refresh' aria-label='refresh'>
+      <IconButton aria-label='refresh' onClick={onManualRefreshCard}>
+        <RefreshIcon />
+      </IconButton>
+    </Tooltip>
+  );
+
   const maximizeButton = (
     <Tooltip title='Maximize' aria-label='maximize'>
       <IconButton aria-label='maximize' onClick={onToggleCardExpand}>
@@ -174,6 +185,7 @@ const NeoCardViewHeader = ({
             {downloadImageEnabled ? downloadImageButton : <></>}
             {fullscreenEnabled ? expanded ? unMaximizeButton : maximizeButton : <></>}
             {descriptionEnabled ? descriptionButton : <></>}
+            {refreshButtonEnabled ? refreshButton : <></>}
             {editable ? settingsButton : <></>}
           </>
         }

src/chart/line/LineChart.tsx

@@ -4,10 +4,6 @@ import { NoDrawableDataErrorMessage } from '../../component/editor/CodeViewerCom
 import { evaluateRulesOnDict } from '../../extensions/styling/StyleRuleEvaluator';
 import { ChartProps } from '../Chart';
 import { convertRecordObjectToString, recordToNative } from '../ChartUtils';
-import { ResponsiveSunburst } from '@nivo/sunburst';
-import { useState } from 'react';
-import { Tooltip } from '@material-ui/core';
-import RefreshIcon from '@material-ui/icons/Refresh';
 
 interface LineChartData {
   id: string;