Bug fixes and UX improvements for 2.0.3

nielsdejong · nielsdejong · commit ed56989d158c · 2021-12-12T15:33:16.000+01:00
diff --git a/release-notes.md b/release-notes.md
@@ -1,4 +1,18 @@
-## NeoDash 2.0 (stable)
+## NeoDash 2.0.3
+UX improvements + bug fixes.
+- Parameter selection report:
+    - fixed bug to allow for selecting properties from nodes with >5 distinct properties.
+    - Added support for nodes and properties with spaces in their name.
+- Sharing:
+    - Removed persisted URL in share links to avoid getting stuck on shared dashboards
+- Table:
+    - Added option to specify relative column sizes
+- Graph:
+    - Changed node styling to use the last (most specific label) for applying customizations
+    - Fixed error where incorrect properties were extracted from graphs with multi-labeled nodes
+    - Fixed node display to hide "undefined" when a non-existing property is selected for that node.
+    
+## NeoDash 2.0.0, 2.0.1 & 2.0.2
 
 **New & Improved Dashboard Editor**
 - Added new Cypher editor with syntax highlighting / live syntax validation.
diff --git a/src/application/ApplicationThunks.tsx b/src/application/ApplicationThunks.tsx
@@ -97,7 +97,6 @@ export const setDatabaseFromNeo4jDesktopIntegrationThunk = () => (dispatch: any,
 
 export const handleSharedDashboardsThunk = () => (dispatch: any, getState: any) => {
     try {
-        dispatch(resetShareDetails());
         const queryString = window.location.search;
         const urlParams = new URLSearchParams(queryString);
         if (urlParams.get("share") !== null) {
@@ -113,10 +112,13 @@ export const handleSharedDashboardsThunk = () => (dispatch: any, getState: any)
                 const url = connection.split("@")[1].split(":")[1];
                 const port = connection.split("@")[1].split(":")[2];
                 dispatch(setShareDetailsFromUrl(type, id, standalone, protocol, url, port, database, username, password));
+                window.history.pushState({}, document.title, "/" );
             } else {
                 dispatch(setShareDetailsFromUrl(type, id, undefined, undefined, undefined, undefined, undefined, undefined, undefined));
+                window.history.pushState({}, document.title, "/" );
             }
-
+        }else{
+            // dispatch(resetShareDetails());
         }
 
     } catch (e) {
diff --git a/src/card/settings/custom/CardSettingsContentPropertySelect.tsx b/src/card/settings/custom/CardSettingsContentPropertySelect.tsx
@@ -27,13 +27,13 @@ const NeoCardSettingsContentPropertySelect = ({ type, database, query, onQueryUp
     const [propertyValue, setPropertyValue] = React.useState(property);
     const [parameterName, setParameterName] = React.useState("");
     const [propertyRecords, setPropertyRecords] = React.useState([]);
-
+   
     // Reverse engineer the label, property, ID from the generated query.
     const approxParam = query.split("\n")[0].split("$")[1];
-    const id = (approxParam && approxParam.split("_").length > 3) ? approxParam.split("_")[approxParam.split("_").length-1] : "";
+    const id = (approxParam && approxParam.split("_").length > 3) && !isNaN(parseInt(approxParam.split("_")[approxParam.split("_").length-1])) ? approxParam.split("_")[approxParam.split("_").length-1] : "";
     const [idValue, setIdValue] = React.useState(id);
     if(!parameterName && labelValue && propertyValue){
-        setParameterName("neodash_" + (labelValue + "_" + propertyValue + (idValue == "" || idValue.startsWith("_") ? idValue : "_" + idValue)).toLowerCase());
+        setParameterName("neodash_" + (labelValue + "_" + propertyValue + (idValue == "" || idValue.startsWith("_") ? idValue : "_" + idValue)).toLowerCase().replaceAll(" ","_").replaceAll("-", "_"));
     }
     // Define query callback to allow reports to get extra data on interactions.
     const queryCallback = useCallback(
@@ -43,7 +43,7 @@ const NeoCardSettingsContentPropertySelect = ({ type, database, query, onQueryUp
                 (result => setRecords(result)),
                 () => { return }, false,
                 false, false,
-                [], [], [], null);
+                [], [], [], [], null);
         },
         [],
     );
@@ -67,14 +67,15 @@ const NeoCardSettingsContentPropertySelect = ({ type, database, query, onQueryUp
             value={labelValue}
             onChange={(event, newValue) => {
                 setLabelValue(newValue);
-
+                setPropertyValue(undefined);
+                setParameterName("");
                 if (newValue && propertyValue) {
-                    const new_parameter_name = "neodash_" + (newValue + "_" + propertyValue + (idValue == "" || idValue.startsWith("_") ? idValue : "_" + idValue)).toLowerCase();
-                    setParameterName(new_parameter_name);
+                    const new_parameter_name = "neodash_" + (newValue + "_" + propertyValue + (idValue == "" || idValue.startsWith("_") ? idValue : "_" + idValue)).toLowerCase().replaceAll(" ","_").replaceAll("-", "_");
+                    // setParameterName(new_parameter_name);
                     const newQuery = "// $" + new_parameter_name + "\nMATCH (n:`" + newValue + "`) \nWHERE toLower(toString(n.`" + propertyValue + "`)) CONTAINS toLower($input) \nRETURN DISTINCT n.`" + propertyValue + "` as value LIMIT 5";
                     onQueryUpdate(newQuery);
                 } else {
-                    setParameterName(null);
+                    setParameterName("");
                 }
             }}
             renderInput={(params) => <TextField {...params} placeholder="Start typing..." InputLabelProps={{ shrink: true }} label={"Node Label"} />}
@@ -87,14 +88,14 @@ const NeoCardSettingsContentPropertySelect = ({ type, database, query, onQueryUp
             inputValue={propertyInputText}
             onInputChange={(event, value) => {
                 setPropertyInputText(value);
-                queryCallback("CALL db.schema.nodeTypeProperties() YIELD nodeLabels, propertyName WITH * WHERE $label IN nodeLabels RETURN DISTINCT propertyName LIMIT 5", { label: labelValue }, setPropertyRecords);
+                queryCallback("CALL db.schema.nodeTypeProperties() YIELD nodeLabels, propertyName WITH * WHERE $label IN nodeLabels AND toLower(propertyName) CONTAINS toLower($input) RETURN DISTINCT propertyName LIMIT 5", { label: labelValue, input: value }, setPropertyRecords);
             }}
             value={propertyValue}
             onChange={(event, newValue) => {
                 setPropertyValue(newValue);
 
                 if (newValue && labelValue) {
-                    const new_parameter_name = "neodash_" + (labelValue + "_" + newValue + (idValue == "" || idValue.startsWith("_") ? idValue : "_" + idValue)).toLowerCase();
+                    const new_parameter_name = "neodash_" + (labelValue + "_" + newValue + (idValue == "" || idValue.startsWith("_") ? idValue : "_" + idValue)).toLowerCase().replaceAll(" ","_").replaceAll("-", "_");
                     setParameterName(new_parameter_name);
                     const newQuery = "// $" + new_parameter_name + "\nMATCH (n:`" + labelValue + "`) \nWHERE toLower(toString(n.`" + newValue + "`)) CONTAINS toLower($input) \nRETURN DISTINCT n.`" + newValue + "` as value LIMIT 5";
                     onQueryUpdate(newQuery);
@@ -111,7 +112,7 @@ const NeoCardSettingsContentPropertySelect = ({ type, database, query, onQueryUp
                 const newValue = value ? "_" + value : "";
                 setIdValue(value);
                 if (propertyValue && labelValue) {
-                    const new_parameter_name = "neodash_" + (labelValue + "_" + propertyValue + newValue).toLowerCase();
+                    const new_parameter_name = "neodash_" + (labelValue + "_" + propertyValue + newValue).toLowerCase().replaceAll(" ","_").replaceAll("-", "_");
                     setParameterName(new_parameter_name);
                     const newQuery = "// $" + new_parameter_name + "\nMATCH (n:`" + labelValue + "`) \nWHERE toLower(toString(n.`" + propertyValue + "`)) CONTAINS toLower($input) \nRETURN DISTINCT n.`" + propertyValue + "` as value LIMIT 5";
                     onQueryUpdate(newQuery);
diff --git a/src/card/view/CardViewFooter.tsx b/src/card/view/CardViewFooter.tsx
@@ -54,6 +54,7 @@ const NeoCardViewFooter = ({ fields, settings, selection, type, showOptionalSele
                 // Creates the selection for all other types of components
                 if (selectableFields[selectable].type == SELECTION_TYPES.LIST ||
                     selectableFields[selectable].type == SELECTION_TYPES.NUMBER ||
+                    selectableFields[selectable].type == SELECTION_TYPES.NUMBER_OR_DATETIME ||
                     selectableFields[selectable].type == SELECTION_TYPES.TEXT) {
                     if (selectionIsMandatory || showOptionalSelections) {
 
diff --git a/src/chart/GraphChart.tsx b/src/chart/GraphChart.tsx
@@ -72,7 +72,7 @@ const NeoGraphChart = (props: ChartProps) => {
                 labels: value.labels,
                 size: value.properties[nodeSizeProp] ? value.properties[nodeSizeProp] : defaultNodeSize,
                 properties: value.properties,
-                firstLabel: value.labels[0]
+                lastLabel: value.labels[value.labels.length - 1]
             };
         } else if (valueIsRelationship(value)) {
             if (links[value.start.low + "," + value.end.low] == undefined) {
@@ -147,7 +147,7 @@ const NeoGraphChart = (props: ChartProps) => {
         const nodeLabelsList = Object.keys(nodeLabels);
         const nodesList = Object.values(nodes).map(node => {
             const assignedColor = node.properties[nodeColorProp] ? node.properties[nodeColorProp] :
-                categoricalColorSchemes[nodeColorScheme][nodeLabelsList.indexOf(node.firstLabel) % totalColors];
+                categoricalColorSchemes[nodeColorScheme][nodeLabelsList.indexOf(node.lastLabel) % totalColors];
             return update(node, { color: assignedColor ? assignedColor : defaultNodeColor });
         });
 
@@ -163,7 +163,7 @@ const NeoGraphChart = (props: ChartProps) => {
     }
 
     const renderNodeLabel = (node) => {
-        const selectedProp = props.selection[node.firstLabel];
+        const selectedProp = props.selection[node.lastLabel];
         if (selectedProp == "(id)") {
             return node.id;
         }
@@ -173,7 +173,7 @@ const NeoGraphChart = (props: ChartProps) => {
         if (selectedProp == "(no label)") {
             return "";
         }
-        return node.properties[selectedProp]
+        return node.properties[selectedProp] ? node.properties[selectedProp] : "";
     }
 
     const handleExpand = useCallback(node => {
@@ -205,7 +205,7 @@ const NeoGraphChart = (props: ChartProps) => {
                 onNodeRightClick={handleExpand}
                 nodeCanvasObjectMode={() => "after"}
                 nodeCanvasObject={(node, ctx, globalScale) => {
-                    const label = (props.selection && props.selection[node.firstLabel]) ? renderNodeLabel(node) : "";
+                    const label = (props.selection && props.selection[node.lastLabel]) ? renderNodeLabel(node) : "";
                     const fontSize = nodeLabelFontSize;
                     ctx.font = `${fontSize}px Sans-Serif`;
                     ctx.fillStyle = nodeLabelColor;
diff --git a/src/chart/TableChart.tsx b/src/chart/TableChart.tsx
@@ -52,7 +52,7 @@ function RenderTableValue(value, key = 0) {
         return JSON.stringify(value);
     }
     const str = value.toString();
-    if (str.startsWith("http") || str.startsWith("https")){
+    if (str.startsWith("http") || str.startsWith("https")) {
         return <a target="_blank" href={str}>{str}</a>;
     }
     return str;
@@ -62,14 +62,23 @@ const NeoTableChart = (props: ChartProps) => {
         return <>No data, re-run the report.</>
     }
 
-    const columns = props.records[0].keys.map(key => {
+    var columnWidths = null;
+    try {
+        columnWidths = props.settings && props.settings.columnWidths && JSON.parse(props.settings.columnWidths);
+    } catch (e) {
+        // do nothing
+    } finally {
+        // do nothing
+    }
+
+    const columns = props.records[0].keys.map((key, i) => {
         return {
             field: key,
             headerName: key,
             headerClassName: 'table-small-header',
             renderCell: (c) => RenderTableValue(c.value),
             disableColumnSelector: true,
-            flex: 1,
+            flex: columnWidths ? columnWidths[i] % columnWidths.length : 1,
             disableClickEventBubbling: true
         }
     })
diff --git a/src/config/ReportConfig.tsx b/src/config/ReportConfig.tsx
@@ -14,6 +14,7 @@ import NeoTableChart from '../chart/TableChart';
 
 export enum SELECTION_TYPES {
     NUMBER,
+    NUMBER_OR_DATETIME,
     LIST,
     TEXT,
     DICTIONARY,
@@ -39,7 +40,14 @@ export const REPORT_TYPES = {
         helperText: "A table will contain all returned data.",
         component: NeoTableChart,
         maxRecords: 1000,
-        settings: {}
+      
+        settings: {
+            "columnWidths": {
+                label: "Relative Column Sizes",
+                type: SELECTION_TYPES.TEXT,
+                default: "[1, 1, 1, ...]"
+            }
+        }
     },
     "graph": {
         label: "Graph",
diff --git a/src/dashboard/DashboardHeaderPageButton.tsx b/src/dashboard/DashboardHeaderPageButton.tsx
@@ -45,7 +45,7 @@ export const NeoPageButton = ({ title, index, disabled = false, selected = false
                                 e.stopPropagation();
                             }
                         }}
-                        readonly={disabled}
+                        readOnly={disabled}
                         inputProps={{ style: { textTransform: 'none', cursor: 'pointer', fontWeight: 'normal' } }}
                         style={{ height: "36px", width: "185px", paddingLeft: "10px", color: selected ? 'black' : '#888', textAlign: "center", textTransform: "uppercase" }}
                         placeholder="Page name..."
diff --git a/src/report/CypherQueryRunner.tsx b/src/report/CypherQueryRunner.tsx
@@ -31,7 +31,7 @@ export enum QueryStatus {
  */
 export async function runCypherQuery(driver,
     database = undefined,
-    query,
+    query = "",
     parameters = {},
     selection = {},
     fields = [],
@@ -43,6 +43,7 @@ export async function runCypherQuery(driver,
     useRecordMapper = false,
     useNodePropsAsFields = false,
     numericFields = [],
+    numericOrDatetimeFields = [],
     textFields = [],
     optionalFields = [],
     defaultKeyField = ""
@@ -99,7 +100,7 @@ export async function runCypherQuery(driver,
            
             // Set the records for the visualization, if an explicit field name mapping is provided.
             if (useRecordMapper) {
-                records = mapRecords(records, selection, textFields, numericFields, optionalFields, defaultKeyField)
+                records = mapRecords(records, selection, textFields, numericFields, numericOrDatetimeFields, optionalFields, defaultKeyField)
             }
             if (records == null) {
                 setStatus(QueryStatus.NO_DRAWABLE_DATA)
diff --git a/src/report/RecordProcessing.tsx b/src/report/RecordProcessing.tsx
@@ -1,4 +1,5 @@
 import _ from 'lodash';
+import { DateTime } from 'neo4j-driver';
 
 const OPTIONAL_FIELD_UNAVAILABLE_IDENTIFIER = "(none)";
 
@@ -9,19 +10,20 @@ const OPTIONAL_FIELD_UNAVAILABLE_IDENTIFIER = "(none)";
  * @param selection : a dictionary of record field name mappings.
  * @returns records : the same set of records, but with cleaned up and renamed records that the visualization needs.
  */
-export function mapRecords(records: any, selection: any, textFields: any, numericFields: any, optionalFields: any, defaultKeyField: str) {
+export function mapRecords(records: any, selection: any, textFields: any, numericFields: any, numericOrDatetimeFields: any,
+    optionalFields: any, defaultKeyField: string) {
 
     // if: We have null records, or, an empty result set, or, no specified selection, we return the original record set.
     if (!records || records.length == 0 || Object.keys(selection).length == 0) {
         return records;
     }
 
     // Use the first row + the selection dict to create a mapping from the actual --> expected fields.
-    const fieldLookup = createMappedFieldLookup(records[0], selection, optionalFields)
+    const fieldLookup = createMappedFieldLookup(records[0], selection, optionalFields, numericOrDatetimeFields)
     const keys = Object.keys(fieldLookup)
     const defaultKey = selection[defaultKeyField] ? selection[defaultKeyField] : "";
     const mappedRecords = records
-        .map(r => mapSingleRecord(r, fieldLookup, keys, defaultKey, textFields, numericFields, optionalFields))
+        .map(r => mapSingleRecord(r, fieldLookup, keys, defaultKey, textFields, numericFields, numericOrDatetimeFields, optionalFields))
         .filter(r => r != null);
 
     // Check if we have non-zero records for all of the numeric fields, if not, we can't visualize anything.
@@ -50,7 +52,7 @@ export function mapRecords(records: any, selection: any, textFields: any, numeri
  * Output:
  * - (fieldlookup={x=0, y1=1, y2=2}
  */
-export function createMappedFieldLookup(record: any, selection: any, optionalFieldNames: any) {
+export function createMappedFieldLookup(record: any, selection: any, optionalFieldNames: any, numericOrDateTimeFieldNames) {
     const newFieldLookup = {}
     Object.keys(selection).forEach(expectedFieldName => {
         const actualFieldName = selection[expectedFieldName];
@@ -87,7 +89,9 @@ export function createMappedFieldLookup(record: any, selection: any, optionalFie
  * @param defaultKey : if the record is missing a 'key' field, a default value for the field.
  * @returns the mapped record.
  */
-export function mapSingleRecord(record, fieldLookup, keys, defaultKey, textFieldNames, numericFieldNames, optionalFieldNames) {
+export function mapSingleRecord(record, fieldLookup, keys, defaultKey,
+    textFieldNames, numericFieldNames, numericOrDatetimeFieldNames, optionalFieldNames) {
+
     record._fieldLookup = fieldLookup;
     record.keys = keys;
 
@@ -103,6 +107,15 @@ export function mapSingleRecord(record, fieldLookup, keys, defaultKey, textField
     if (numericFieldNames.some(numericFieldName => (isNaN(record._fields[record._fieldLookup[numericFieldName]])))) {
         return null;
     }
+  
+    numericOrDatetimeFieldNames.forEach(numericOrDatetimeFieldName => {
+        const value = record._fields[record._fieldLookup[numericOrDatetimeFieldName]];
+        const className = value.__proto__.constructor.name;
+        if (className == "DateTime"){
+            record._fields[record._fieldLookup[numericOrDatetimeFieldName]] =new Date(value.toString());
+            
+        }
+    })
 
     textFieldNames.forEach(textFieldName => {
         record._fields[record._fieldLookup[textFieldName]] =
@@ -189,15 +202,17 @@ export function extractNodePropertiesFromRecords(records: any) {
     return fields.length > 0 ? fields : [];
 }
 
+
 export function saveNodePropertiesToDictionary(field, fieldsDict) {
+    // TODO - instead of doing this discovery ad-hoc, we could also use CALL db.schema.nodeTypeProperties().
     if (field == undefined) {
         return
     }
     if (valueIsArray(field)) {
         field.forEach((v, i) => saveNodePropertiesToDictionary(v, fieldsDict));
-    } else if(valueIsNode(field)) {
+    } else if (valueIsNode(field)) {
         field.labels.forEach(l => {
-            fieldsDict[l] = (fieldsDict[l]) ? _.merge(fieldsDict[l], Object.keys(field.properties)) : Object.keys(field.properties)
+            fieldsDict[l] = (fieldsDict[l]) ? [...new Set(fieldsDict[l].concat(Object.keys(field.properties)))] : Object.keys(field.properties)
         });
     } else if (valueIsPath(field)) {
         field.segments.forEach((segment, i) => {
diff --git a/src/report/Report.tsx b/src/report/Report.tsx

Original file line number	Diff line number	Diff line change
`@@ -45,7 +45,7 @@ export const NeoPageButton = ({ title, index, disabled = false, selected = false`
`45`	`45`	`e.stopPropagation();`
`46`	`46`	`}`
`47`	`47`	`}}`
`48`		`- readonly={disabled}`
	`48`	`+ readOnly={disabled}`
`49`	`49`	`inputProps={{ style: { textTransform: 'none', cursor: 'pointer', fontWeight: 'normal' } }}`
`50`	`50`	`style={{ height: "36px", width: "185px", paddingLeft: "10px", color: selected ? 'black' : '#888', textAlign: "center", textTransform: "uppercase" }}`
`51`	`51`	`placeholder="Page name..."`