Added extensions for table report, optional markdown descriptions (po…

…p-ups), deep-linking pages and line-chart customizations (#196)

* Added doubleclick = copy action to tables. Added description setting to all reports:

* Added option to deep-link into a given pagenumber

* Added rotation angles for line chart ticks

* Updated docs for new extensions

docs/modules/ROOT/pages/developer-guide/standalone-mode.adoc

@@ -57,3 +57,14 @@ ____
 Alternatively, environment variables from docker compose or a kubernetes
 deployment can be used.
 ____
+
+== Deep Linking
+To dynamically view a deployed NeoDash dashboard, you can deep-link into a deployed dashboard.
+ the following deeplinking options are available via URL parameters:
+- Appending `?page=1` to the URL will open up a dashboard at a given page. (Starting at zero).
+- Appending `?neodash_person_name=Tom` to the URL will set a dashboard parameter as a default for the entire dashboard.
+
+Multiple parameters can be used in a deep-link by concatinating them:
+....
+https://myneodashdeployment.com/?page=1&neodash_person_name=Tom&neodash_movie_name=The%20Matrix
+....

docs/modules/ROOT/pages/user-guide/reports/bar-chart.adoc

@@ -91,6 +91,7 @@ label on top of the visualization (if enabled).
 |Auto-run query |on/off |on |when activated automatically runs the query
 when the report is displayed. When set to `off', the query is displayed
 and will need to be executed manually.
+|Report Description |markdown text | | When specified, adds another button the report header that opens a pop-up. This pop-up contains the rendered markdown from this setting. 
 |===
 
 == Rule-Based Styling

docs/modules/ROOT/pages/user-guide/reports/choropleth.adoc

@@ -57,4 +57,5 @@ the visualization on the y axis
 |Auto-run query |on/off |on |When activated, automatically runs the
 query when the report is displayed. When set to `off', the query is
 displayed and will need to be executed manually.
+|Report Description |markdown text | | When specified, adds another button the report header that opens a pop-up. This pop-up contains the rendered markdown from this setting. 
 |===

docs/modules/ROOT/pages/user-guide/reports/circle-packing.adoc

@@ -50,4 +50,5 @@ of the visualization.
 |Auto-run query |on/off |on |When activated, automatically runs the
 query when the report is displayed. When set to `off', the query is
 displayed and will need to be executed manually.
+|Report Description |markdown text | | When specified, adds another button the report header that opens a pop-up. This pop-up contains the rendered markdown from this setting. 
 |===

docs/modules/ROOT/pages/user-guide/reports/graph.adoc

@@ -123,6 +123,7 @@ that the graph can be explored further. Dynamic Dashboard Parameters
 |Auto-run query |on/off |on |when activated automatically runs the query
 when the report is displayed. When set to `off', the query is displayed
 and will need to be executed manually.
+|Report Description |markdown text | | When specified, adds another button the report header that opens a pop-up. This pop-up contains the rendered markdown from this setting. 
 |===
 
 == Rule-Based Styling

docs/modules/ROOT/pages/user-guide/reports/iframe.adoc

@@ -35,4 +35,5 @@ iFrame URL.
 |Append global parameters to iFrame URL |on/off |off |If enabled,
 appends the full list of global parameters as URL parameters to the
 specified URL.
+|Report Description |markdown text | | When specified, adds another button the report header that opens a pop-up. This pop-up contains the rendered markdown from this setting. 
 |===

docs/modules/ROOT/pages/user-guide/reports/line-chart.adoc

@@ -87,6 +87,10 @@ format should look like this:
 smoothened. One of linear (no smoothing), basis (interpolating),
 cardinal (through each point) and step (step-based interpolation).
 
+|X-axis Tick Rotation (Degrees) |number |0 | The angle at which the tick labels on the x-axis are rotated.
+
+|Y-axis Tick Rotation (Degrees) |number |0 | The angle at which the tick labels on the y-axis are rotated.
+
 |Show Grid |on/off |on |If enabled, shows a grid in the line chart that
 intersects at the axis ticks.
 
@@ -116,6 +120,7 @@ selector (footer of the visualization).
 |Auto-run query |on/off |on |when activated automatically runs the query
 when the report is displayed. When set to `off', the query is displayed
 and will need to be executed manually.
+|Report Description |markdown text | | When specified, adds another button the report header that opens a pop-up. This pop-up contains the rendered markdown from this setting. 
 |===
 
 == Rule-Based Styling

docs/modules/ROOT/pages/user-guide/reports/map.adoc

@@ -117,6 +117,7 @@ selector (footer of the visualization).
 |Auto-run query |on/off |on |when activated automatically runs the query
 when the report is displayed. When set to `off', the query is displayed
 and will need to be executed manually.
+|Report Description |markdown text | | When specified, adds another button the report header that opens a pop-up. This pop-up contains the rendered markdown from this setting. 
 |===
 
 == Rule-Based Styling

docs/modules/ROOT/pages/user-guide/reports/markdown.adoc

@@ -29,4 +29,5 @@ image::markdown.png[Basic Markdown]
 |Replace global parameters in Markdown |on/off |on |If enabled, replaces
 all instances of query parameters (e.g. $neodash_person_name) inside the
 markdown source.
+|Report Description |markdown text | | When specified, adds another button the report header that opens a pop-up. This pop-up contains the rendered markdown from this setting. 
 |===

docs/modules/ROOT/pages/user-guide/reports/parameter-select.adoc

@@ -51,4 +51,5 @@ for large datasets where the autocomplete field is too slow to render.
 |Helper Text (Override) |Text |(none) |Text to show above the user input
 field. This will override the autogenerated text from the
 node/relationship property pair.
+|Report Description |markdown text | | When specified, adds another button the report header that opens a pop-up. This pop-up contains the rendered markdown from this setting. 
 |===

docs/modules/ROOT/pages/user-guide/reports/pie-chart.adoc

@@ -88,6 +88,7 @@ of the visualization.
 |Auto-run query |on/off |on |when activated automatically runs the query
 when the report is displayed. When set to `off', the query is displayed
 and will need to be executed manually.
+|Report Description |markdown text | | When specified, adds another button the report header that opens a pop-up. This pop-up contains the rendered markdown from this setting. 
 |===
 
 == Rule-Based Styling

docs/modules/ROOT/pages/user-guide/reports/raw-json.adoc

@@ -23,4 +23,5 @@ image::json.png[Basic Value]
 |Auto-run query |on/off |on |when activated automatically runs the query
 when the report is displayed. When set to `off', the query is displayed
 and will need to be executed manually.
+|Report Description |markdown text | | When specified, adds another button the report header that opens a pop-up. This pop-up contains the rendered markdown from this setting. 
 |===

docs/modules/ROOT/pages/user-guide/reports/sankey.adoc

@@ -62,6 +62,7 @@ of the visualization.
 |Auto-run query |on/off |on |when activated automatically runs the query
 when the report is displayed. When set to `off', the query is displayed
 and will need to be executed manually.
+|Report Description |markdown text | | When specified, adds another button the report header that opens a pop-up. This pop-up contains the rendered markdown from this setting. 
 |===
 
 

docs/modules/ROOT/pages/user-guide/reports/single-value.adoc

@@ -46,6 +46,7 @@ image::value2.png[Styled Value]
 |Auto-run query |on/off |on |when activated automatically runs the query
 when the report is displayed. When set to `off', the query is displayed
 and will need to be executed manually.
+|Report Description |markdown text | | When specified, adds another button the report header that opens a pop-up. This pop-up contains the rendered markdown from this setting. 
 |===
 
 == Rule-Based Styling

docs/modules/ROOT/pages/user-guide/reports/sunburst.adoc

@@ -58,4 +58,5 @@ in the visualization.
 |Auto-run query |on/off |on |When activated, automatically runs the
 query when the report is displayed. When set to `off', the query is
 displayed and will need to be executed manually.
+|Report Description |markdown text | | When specified, adds another button the report header that opens a pop-up. This pop-up contains the rendered markdown from this setting. 
 |===

docs/modules/ROOT/pages/user-guide/reports/table.adoc

@@ -11,6 +11,8 @@ The table report supports the following additional features:
 - Sorting/filtering by clicking on the table headers. 
 - Downloading your data as a CSV file.
 
+Double-clicking on a table cell will copy that cell's value to the user's clipboard.
+
 == Examples
 
 === Basic Table
@@ -52,6 +54,7 @@ the complete set of table results (all pages) as a CSV file.
 |Auto-run query |on/off |on |when activated automatically runs the query
 when the report is displayed. When set to `off', the query is displayed
 and will need to be executed manually.
+|Report Description |markdown text | | When specified, adds another button the report header that opens a pop-up. This pop-up contains the rendered markdown from this setting. 
 |===
 
 == Rule-Based Styling

docs/modules/ROOT/pages/user-guide/reports/treemap.adoc

@@ -50,4 +50,5 @@ of the visualization.
 |Auto-run query |on/off |on |When activated, automatically runs the
 query when the report is displayed. When set to `off', the query is
 displayed and will need to be executed manually.
+|Report Description |markdown text | | When specified, adds another button the report header that opens a pop-up. This pop-up contains the rendered markdown from this setting. 
 |===

src/application/ApplicationThunks.ts

@@ -5,7 +5,7 @@ import { NEODASH_VERSION } from "../dashboard/DashboardReducer";
 import { loadDashboardFromNeo4jByNameThunk, loadDashboardFromNeo4jByUUIDThunk, loadDashboardThunk, upgradeDashboardVersion } from "../dashboard/DashboardThunks";
 import { createNotificationThunk } from "../page/PageThunks";
 import { QueryStatus, runCypherQuery } from "../report/ReportQueryRunner";
-import { updateGlobalParametersThunk, updateGlobalParameterThunk } from "../settings/SettingsThunks";
+import { setPageNumberThunk, updateGlobalParametersThunk, updateGlobalParameterThunk } from "../settings/SettingsThunks";
 import {
     setConnected, setConnectionModalOpen, setConnectionProperties, setDesktopConnectionProperties,
     resetShareDetails, setShareDetailsFromUrl, setWelcomeScreenOpen, setDashboardToLoadAfterConnecting,
@@ -259,6 +259,12 @@ export const loadApplicationConfigThunk = () => async (dispatch: any, getState:
             }
         });
 
+        const page = urlParams.get('page');
+        if(page !== "" && page !== null){
+            if(!isNaN(page)){
+                dispatch(setPageNumberThunk(parseInt(page)));
+            }
+        }
         const clearNotificationAfterLoad = true;
         dispatch(setSSOEnabled(config['ssoEnabled'], config["ssoDiscoveryUrl"]));
         const state = getState();

src/card/view/CardView.tsx

@@ -26,6 +26,7 @@ const NeoCardView = ({ title, database, query, globalParameters,
     const reportHeader = <NeoCardViewHeader
         title={title}
         editable={editable}
+        description={settings.description}
         fullscreenEnabled={dashboardSettings.fullscreenEnabled}
         downloadImageEnabled={dashboardSettings.downloadImageEnabled}
         onTitleUpdate={onTitleUpdate}

src/card/view/CardViewHeader.tsx

@@ -4,19 +4,23 @@ import IconButton from '@material-ui/core/IconButton';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
 import FullscreenIcon from '@material-ui/icons/Fullscreen';
 import FullscreenExit from '@material-ui/icons/FullscreenExit';
-import { TextField } from "@material-ui/core";
+import { Badge, Dialog, DialogContent, DialogTitle, TextField } from "@material-ui/core";
 import debounce from 'lodash/debounce';
 import { useCallback } from 'react';
 import DragIndicatorIcon from '@material-ui/icons/DragIndicator';
 import DragHandleIcon from '@material-ui/icons/DragHandle';
 import { Tooltip } from '@material-ui/core';
-import CameraAltIcon from '@material-ui/icons/CameraAlt';
+import InfoOutlinedIcon from '@material-ui/icons/InfoOutlined';
 import ImageIcon from '@material-ui/icons/Image';
+import CloseIcon from '@material-ui/icons/Close';
+import ReactMarkdown from "react-markdown";
+import gfm from 'remark-gfm';
 
-const NeoCardViewHeader = ({ title, editable, onTitleUpdate, fullscreenEnabled, downloadImageEnabled,
+const NeoCardViewHeader = ({ title, description, editable, onTitleUpdate, fullscreenEnabled, downloadImageEnabled,
     onToggleCardSettings, onDownloadImage, onToggleCardExpand, expanded }) => {
 
     const [text, setText] = React.useState(title);
+    const [descriptionModalOpen, setDescriptionModalOpen] = React.useState(false);
 
     // Ensure that we only trigger a text update event after the user has stopped typing.
     const debouncedTitleUpdate = useCallback(
@@ -32,7 +36,7 @@ const NeoCardViewHeader = ({ title, editable, onTitleUpdate, fullscreenEnabled,
     }, [title])
 
     const cardTitle = <>
-        <table style={{width: "100%"}}>
+        <table style={{ width: "100%" }}>
             <tbody>
                 <tr>
                     {editable ? <td>
@@ -59,6 +63,8 @@ const NeoCardViewHeader = ({ title, editable, onTitleUpdate, fullscreenEnabled,
         </table>
     </>
 
+    const descriptionEnabled = description && description.length > 0;
+
     const settingsButton = <Tooltip title="Settings" aria-label="settings">
         <IconButton aria-label="settings"
             onClick={onToggleCardSettings}>
@@ -85,13 +91,37 @@ const NeoCardViewHeader = ({ title, editable, onTitleUpdate, fullscreenEnabled,
         </IconButton>
     </Tooltip>
 
-    return <CardHeader style={{ height: "72px" }}
-        action={<>
-            {(downloadImageEnabled) ? downloadImageButton : <></>}
-            {fullscreenEnabled ? (expanded ? unMaximizeButton : maximizeButton) : <></>}
-            {editable ? settingsButton : <></>}
-        </>}
-        title={cardTitle} />
+    const descriptionButton = <Tooltip title="Details" aria-label="details">
+        <IconButton onClick={() => setDescriptionModalOpen(true)} aria-label="details">
+            <InfoOutlinedIcon />
+        </IconButton>
+    </Tooltip>
+
+    return <>
+        <Dialog maxWidth={"lg"} open={descriptionModalOpen == true} onClose={() => setDescriptionModalOpen(false)} aria-labelledby="form-dialog-title">
+            <DialogTitle id="form-dialog-title">
+                {title}
+                <IconButton onClick={() => setDescriptionModalOpen(false)} style={{ padding: "3px", float: "right" }}>
+                    <Badge badgeContent={""} >
+                        <CloseIcon />
+                    </Badge>
+                </IconButton>
+            </DialogTitle>
+            <DialogContent style={{ minWidth: "400px" }}>
+                <div>
+                    <base target="_blank" /> <ReactMarkdown plugins={[gfm]} children={description} />
+                </div>
+            </DialogContent>
+        </Dialog>
+        <CardHeader style={{ height: "72px" }}
+            action={<>
+                {(downloadImageEnabled) ? downloadImageButton : <></>}
+                {fullscreenEnabled ? (expanded ? unMaximizeButton : maximizeButton) : <></>}
+                {descriptionEnabled ? descriptionButton : <></>}
+                {editable ? settingsButton : <></>}
+            </>}
+            title={cardTitle} />
+    </>
 }
 
 export default NeoCardViewHeader;

src/chart/TableChart.tsx

@@ -7,6 +7,10 @@ import GetAppIcon from '@material-ui/icons/GetApp';
 import { IconButton, Tooltip } from '@material-ui/core';
 import { downloadCSV } from './util/ChartUtils';
 import SaveAltIcon from '@material-ui/icons/SaveAlt';
+import Button from '@material-ui/core/Button';
+import Snackbar from '@material-ui/core/Snackbar';
+import CloseIcon from '@material-ui/icons/Close';
+
 
 const TABLE_HEADER_HEIGHT = 32;
 const TABLE_FOOTER_HEIGHT = 52;
@@ -28,6 +32,7 @@ const NeoTableChart = (props: ChartProps) => {
     const transposed = props.settings && props.settings.transposed ? props.settings.transposed : false;
     const allowDownload = props.settings && props.settings.allowDownload !== undefined ? props.settings.allowDownload : false;
     const styleRules = props.settings && props.settings.styleRules ? props.settings.styleRules : [];
+    const [notificationOpen, setNotificationOpen] = React.useState(false);
 
     const useStyles = generateClassDefinitionsBasedOnRules(styleRules);
     const classes = useStyles();
@@ -76,10 +81,29 @@ const NeoTableChart = (props: ChartProps) => {
 
     return (
         <div className={classes.root} style={{ height: "100%", width: '100%', position: "relative" }}>
-           {(allowDownload && rows && rows.length > 0) ? <Tooltip title="Download CSV" aria-label="">
+            <Snackbar
+                anchorOrigin={{
+                    vertical: 'bottom',
+                    horizontal: 'center'
+                }}
+                open={notificationOpen}
+                autoHideDuration={2000}
+                onClose={() => setNotificationOpen(false)}
+                message="Value copied to clipboard."
+                action={
+                    <React.Fragment>
+                        <IconButton size="small" aria-label="close" color="inherit" onClick={() => setNotificationOpen(false)}>
+                            <CloseIcon fontSize="small" />
+                        </IconButton>
+                    </React.Fragment>
+                }
+            />
+
+
+            {(allowDownload && rows && rows.length > 0) ? <Tooltip title="Download CSV" aria-label="">
                 <IconButton onClick={(e) => {
-                        downloadCSV(rows);
-                    }} aria-label="download csv" style={{ bottom: "9px", left: "3px", position: "absolute"}}>
+                    downloadCSV(rows);
+                }} aria-label="download csv" style={{ bottom: "9px", left: "3px", position: "absolute" }}>
                     <SaveAltIcon style={{ fontSize: "1.3rem", zIndex: 5 }} fontSize="small">
                     </SaveAltIcon>
                 </IconButton>
@@ -88,7 +112,11 @@ const NeoTableChart = (props: ChartProps) => {
                 headerHeight={32}
                 rows={rows}
                 columns={columns}
-                pageSize={Math.floor((props.dimensions.height-TABLE_HEADER_HEIGHT-TABLE_FOOTER_HEIGHT) / TABLE_ROW_HEIGHT)-1}
+                onCellDoubleClick={(e) => {
+                    setNotificationOpen(true);
+                    navigator.clipboard.writeText(e.value);
+                }}
+                pageSize={Math.floor((props.dimensions.height - TABLE_HEADER_HEIGHT - TABLE_FOOTER_HEIGHT) / TABLE_ROW_HEIGHT) - 1}
                 disableSelectionOnClick
                 components={{
                     ColumnSortedDescendingIcon: () => <></>,

src/chart/visualizations/LineVisualization.tsx

@@ -44,6 +44,9 @@ export default function  (props: ExtendedChartReportProps) {
     const xTickTimeValues = (settings["xTickTimeValues"] != undefined) ? settings["xTickTimeValues"] : "every 1 years";
     const xAxisTimeFormat = (settings["xAxisTimeFormat"] != undefined) ? settings["xAxisTimeFormat"] : "%Y-%m-%dT%H:%M:%SZ";
     const xAxisFormat = (settings["xAxisFormat"] != undefined) ? settings["xAxisFormat"] : undefined;
+
+    const xTickRotationAngle = (settings["xTickRotationAngle"] != undefined) ? settings["xTickRotationAngle"] : 0;
+    const yTickRotationAngle = (settings["yTickRotationAngle"] != undefined) ? settings["yTickRotationAngle"] : 0;
     const styleRules = settings && settings.styleRules ? settings.styleRules : [];
 
     // Compute line color based on rules - overrides default color scheme completely. 
@@ -125,7 +128,7 @@ export default function  (props: ExtendedChartReportProps) {
                 tickValues: xTickTimeValues,
                 tickSize: 5,
                 tickPadding: 5,
-                tickRotation: 0,
+                tickRotation: xTickRotationAngle,
                 format: xAxisTimeFormat,
                 legend: "Time",
                 legendOffset: 36,
@@ -135,14 +138,14 @@ export default function  (props: ExtendedChartReportProps) {
                 tickSize: 6,
                 tickValues: xTickValues,
                 format: xAxisFormat,
-                tickPadding: 12,
-                tickRotation: 0,
+                tickRotation: xTickRotationAngle,
+                tickPadding: 12
             }
             }
             axisLeft={{
                 tickSize: 6,
                 tickPadding: 12,
-                tickRotation: 0,
+                tickRotation: yTickRotationAngle,
             }}
             pointSize={pointSize}
             lineWidth={lineWidth}

src/component/field/Field.tsx

@@ -16,6 +16,7 @@ const NeoField = ({ label,
     variant= undefined,
     helperText = undefined,
     defaultValue = undefined,
+    multiline = false,
     placeholder = "" }) => {
     return (
         <TextField
@@ -30,7 +31,7 @@ const NeoField = ({ label,
             helperText={helperText}
             disabled={disabled}
             value={value != null ? value : defaultValue}
-            // defaultValue={defaultValue}
+            multiline={multiline}
             onClick={(e) => {onClick(e.target.textContent)}}
             onChange={(event) => {
                 if (!numeric) {