Added styling rules for relationship color (cherrypicked) (#537)

* Added styling rules for relationship color

* Removed stray console logs and added comments

* Refactor PR

* Clean smells

* Review commit

* updated naming

* Refactor

---------

Co-authored-by: Brahm Prakash Mishra <[email protected]>
Co-authored-by: Bennu <[email protected]>

Author: 3 people

src/card/Card.tsx

@@ -175,6 +175,7 @@ const NeoCard = ({
             height={report.height}
             heightPx={height}
             fields={report.fields}
+            schema={report.schema}
             type={report.type}
             expanded={expanded}
             extensions={extensions}

src/card/CardActions.ts

@@ -50,6 +50,12 @@ export const updateFields = (pagenumber: number, id: number, fields: any) => ({
   payload: { pagenumber, id, fields },
 });
 
+export const UPDATE_SCHEMA = 'PAGE/CARD/UPDATE_SCHEMA';
+export const updateSchema = (pagenumber: number, id: number, schema: any) => ({
+  type: UPDATE_SCHEMA,
+  payload: { pagenumber, id, schema },
+});
+
 export const UPDATE_SELECTION = 'PAGE/CARD/UPDATE_SELECTION';
 export const updateSelection = (pagenumber: number, id: number, selectable: any, field: any) => ({
   type: UPDATE_SELECTION,

src/card/CardReducer.ts

@@ -5,6 +5,7 @@ import {
   UPDATE_ALL_SELECTIONS,
   UPDATE_CYPHER_PARAMETERS,
   UPDATE_FIELDS,
+  UPDATE_SCHEMA,
   UPDATE_REPORT_QUERY,
   UPDATE_REPORT_SETTING,
   UPDATE_REPORT_SIZE,
@@ -72,6 +73,11 @@ export const cardReducer = (state = CARD_INITIAL_STATE, action: { type: any; pay
       state = update(state, { fields: fields });
       return state;
     }
+    case UPDATE_SCHEMA: {
+      const { schema } = payload;
+      state = update(state, { schema: schema });
+      return state;
+    }
     case UPDATE_REPORT_TYPE: {
       const { type } = payload;
       state = update(state, { type: type });

src/card/CardThunks.ts

@@ -10,6 +10,7 @@ import {
   clearSelection,
   updateAllSelections,
   updateReportDatabase,
+  updateSchema,
 } from './CardActions';
 import { createNotificationThunk } from '../page/PageThunks';
 import { getReportTypes } from '../extensions/ExtensionUtils';
@@ -67,68 +68,76 @@ export const updateReportTypeThunk = (id, type) => (dispatch: any, getState: any
 
     dispatch(updateReportType(pagenumber, id, type));
     dispatch(updateFields(pagenumber, id, []));
+    dispatch(updateSchema(pagenumber, id, []));
     dispatch(clearSelection(pagenumber, id));
   } catch (e) {
     dispatch(createNotificationThunk('Cannot update report type', e));
   }
 };
 
-export const updateFieldsThunk = (id, fields) => (dispatch: any, getState: any) => {
-  try {
-    const state = getState();
-    const { pagenumber } = state.dashboard.settings;
-    const extensions = Object.fromEntries(Object.entries(state.dashboard.extensions).filter(([_, v]) => v.active));
-    const oldReport = state.dashboard.pages[pagenumber].reports.find((o) => o.id === id);
+export const updateFieldsThunk =
+  (id, fields, schema = false) =>
+  (dispatch: any, getState: any) => {
+    try {
+      const state = getState();
+      const { pagenumber } = state.dashboard.settings;
+      const extensions = Object.fromEntries(Object.entries(state.dashboard.extensions).filter(([_, v]) => v.active));
+      const oldReport = state.dashboard.pages[pagenumber].reports.find((o) => o.id === id);
 
-    if (!oldReport) {
-      return;
-    }
-    const oldFields = oldReport.fields;
-    const reportType = oldReport.type;
-    const oldSelection = oldReport.selection;
-    const reportTypes = getReportTypes(extensions);
-    const selectableFields = reportTypes[reportType].selection; // The dictionary of selectable fields as defined in the config.
-    const { autoAssignSelectedProperties } = reportTypes[reportType];
-    const selectables = selectableFields ? Object.keys(selectableFields) : [];
+      if (!oldReport) {
+        return;
+      }
+      const oldFields = schema ? oldReport.schema : oldReport.fields;
+      const reportType = oldReport.type;
+      const oldSelection = oldReport.selection;
+      const reportTypes = getReportTypes(extensions);
+      const selectableFields = reportTypes[reportType].selection; // The dictionary of selectable fields as defined in the config.
+      const { autoAssignSelectedProperties } = reportTypes[reportType];
+      const selectables = selectableFields ? Object.keys(selectableFields) : [];
 
-    // If the new set of fields is not equal to the current set of fields, we ned to update the field selection.
-    if (!isEqual(oldFields, fields) || Object.keys(oldSelection).length === 0) {
-      selectables.forEach((selection, i) => {
-        if (fields.includes(oldSelection[selection])) {
-          // If the current selection is still present in the new set of fields, no need to reset.
-          // Also we ignore this on a node property selector.
-          /* continue */
-        } else if (selectableFields[selection].optional) {
-          // If the fields change, always set optional selections to none.
-          if (selectableFields[selection].multiple) {
-            dispatch(updateSelection(pagenumber, id, selection, ['(none)']));
-          } else {
-            dispatch(updateSelection(pagenumber, id, selection, '(none)'));
-          }
-        } else if (fields.length > 0) {
-          // For multi selections, select the Nth item of the result fields as a single item array.
-          if (selectableFields[selection].multiple) {
-            // only update if the old selection no longer covers the new set of fields...
-            if (!oldSelection[selection] || !oldSelection[selection].every((v) => fields.includes(v))) {
-              dispatch(updateSelection(pagenumber, id, selection, [fields[Math.min(i, fields.length - 1)]]));
+      // If the new set of fields is not equal to the current set of fields, we ned to update the field selection.
+      if (!isEqual(oldFields, fields) || Object.keys(oldSelection).length === 0) {
+        selectables.forEach((selection, i) => {
+          if (fields.includes(oldSelection[selection])) {
+            // If the current selection is still present in the new set of fields, no need to reset.
+            // Also we ignore this on a node property selector.
+            /* continue */
+          } else if (selectableFields[selection].optional) {
+            // If the fields change, always set optional selections to none.
+            if (selectableFields[selection].multiple) {
+              dispatch(updateSelection(pagenumber, id, selection, ['(none)']));
+            } else {
+              dispatch(updateSelection(pagenumber, id, selection, '(none)'));
+            }
+          } else if (fields.length > 0) {
+            // For multi selections, select the Nth item of the result fields as a single item array.
+            if (selectableFields[selection].multiple) {
+              // only update if the old selection no longer covers the new set of fields...
+              if (!oldSelection[selection] || !oldSelection[selection].every((v) => fields.includes(v))) {
+                dispatch(updateSelection(pagenumber, id, selection, [fields[Math.min(i, fields.length - 1)]]));
+              }
+            } else if (selectableFields[selection].type == SELECTION_TYPES.NODE_PROPERTIES) {
+              // For node property selections, select the most obvious properties of the node to display.
+              const selection = getSelectionBasedOnFields(fields, oldSelection, autoAssignSelectedProperties);
+              dispatch(updateAllSelections(pagenumber, id, selection));
+            } else {
+              // Else, default the selection to the Nth item of the result set fields.
+              dispatch(updateSelection(pagenumber, id, selection, fields[Math.min(i, fields.length - 1)]));
             }
-          } else if (selectableFields[selection].type == SELECTION_TYPES.NODE_PROPERTIES) {
-            // For node property selections, select the most obvious properties of the node to display.
-            const selection = getSelectionBasedOnFields(fields, oldSelection, autoAssignSelectedProperties);
-            dispatch(updateAllSelections(pagenumber, id, selection));
-          } else {
-            // Else, default the selection to the Nth item of the result set fields.
-            dispatch(updateSelection(pagenumber, id, selection, fields[Math.min(i, fields.length - 1)]));
           }
+        });
+        // Set the new set of fields for the report so that we may select them.
+
+        if (schema) {
+          dispatch(updateSchema(pagenumber, id, fields));
+        } else {
+          dispatch(updateFields(pagenumber, id, fields));
         }
-      });
-      // Set the new set of fields for the report so that we may select them.
-      dispatch(updateFields(pagenumber, id, fields));
+      }
+    } catch (e) {
+      dispatch(createNotificationThunk('Cannot update report fields', e));
     }
-  } catch (e) {
-    dispatch(createNotificationThunk('Cannot update report fields', e));
-  }
-};
+  };
 
 export const updateSelectionThunk = (id, selectable, field) => (dispatch: any, getState: any) => {
   try {

src/card/settings/CardSettings.tsx

@@ -19,6 +19,7 @@ const NeoCardSettings = ({
   reportSettings,
   reportSettingsOpen,
   fields,
+  schema,
   heightPx,
   extensions, // A set of enabled extensions.
   onQueryUpdate,
@@ -78,6 +79,7 @@ const NeoCardSettings = ({
     <NeoCardSettingsFooter
       type={type}
       fields={fields}
+      schema={schema}
       extensions={extensions}
       reportSettings={reportSettings}
       reportSettingsOpen={reportSettingsOpen}

src/card/settings/CardSettingsFooter.tsx

@@ -19,6 +19,7 @@ const update = (state, mutations) => Object.assign({}, state, mutations);
 const NeoCardSettingsFooter = ({
   type,
   fields,
+  schema,
   reportSettings,
   reportSettingsOpen,
   extensions,
@@ -124,6 +125,7 @@ const NeoCardSettingsFooter = ({
           settingValue={reportSettings[settingToCustomize]}
           type={type}
           fields={fields}
+          schema={schema}
           customReportStyleModalOpen={customReportStyleModalOpen}
           setCustomReportStyleModalOpen={setCustomReportStyleModalOpen}
           onReportSettingUpdate={onReportSettingUpdate}

src/chart/Utils.ts

@@ -111,3 +111,8 @@ export const rgbaToHex = (color: string): string => {
   }
   return color;
 };
+
+export enum EntityType {
+  Node,
+  Relationship,
+}

src/chart/graph/util/RecordUtils.ts

@@ -1,4 +1,4 @@
-import { evaluateRulesOnNode } from '../../../extensions/styling/StyleRuleEvaluator';
+import { evaluateRulesOnNode, evaluateRulesOnLink } from '../../../extensions/styling/StyleRuleEvaluator';
 import { extractNodePropertiesFromRecords, mergeNodePropsFieldsLists } from '../../../report/ReportRecordProcessing';
 import { valueIsArray, valueIsNode, valueIsRelationship, valueIsPath } from '../../ChartUtils';
 import { GraphChartVisualizationProps } from '../GraphChartVisualization';
@@ -162,10 +162,15 @@ export function buildGraphVisualizationObjectFromRecords(
       );
     });
   });
-  // Assign proper curvatures to relationships.
-  // This is needed for pairs of nodes that have multiple relationships between them, or self-loops.
+  // Assign proper curvatures and colors to relationships.
+  // Assigning curvature is needed for pairs of nodes that have multiple relationships between them, or self-loops.
   const linksList = Object.values(links).map((linkArray) => {
     return linkArray.map((link, i) => {
+      let defaultColor = link.color;
+
+      // Assign color from json based on style rule evaluation if specified
+      let evaluatedColor = evaluateRulesOnLink(link, 'relationship color', defaultColor, styleRules);
+      link.color = evaluatedColor;
       const mirroredNodePair = links[`${link.target},${link.source}`];
       return assignCurvatureToLink(link, i, linkArray.length, mirroredNodePair ? mirroredNodePair.length : 0);
     });

src/extensions/styling/StyleRuleCreationModal.tsx

@@ -53,6 +53,11 @@ export const RULE_BASED_REPORT_CUSTOMIZATIONS = {
       value: 'node label color',
       label: 'Node Label Color',
     },
+    {
+      value: 'relationship color',
+      label: 'Relationship Color',
+      on: 'relationship',
+    },
   ],
   map: [
     {
@@ -124,6 +129,7 @@ export const NeoCustomReportStyleModal = ({
   settingValue,
   type,
   fields,
+  schema,
   setCustomReportStyleModalOpen,
   onReportSettingUpdate,
 }) => {
@@ -157,20 +163,20 @@ export const NeoCustomReportStyleModal = ({
    * This will be dynamic based on the type of report we are customizing.
    */
   const createFieldVariableSuggestions = () => {
-    if (!fields) {
+    if (!schema) {
       return [];
     }
     if (type == 'graph' || type == 'map') {
-      return fields
+      return schema
         .map((node, index) => {
           if (!Array.isArray(node)) {
             return undefined;
           }
-          return fields[index].map((property, propertyIndex) => {
+          return schema[index].map((property, propertyIndex) => {
             if (propertyIndex == 0) {
               return undefined;
             }
-            return `${fields[index][0]}.${property}`;
+            return `${schema[index][0]}.${property}`;
           });
         })
         .flat()

src/extensions/styling/StyleRuleEvaluator.ts

@@ -1,6 +1,5 @@
 import { makeStyles } from '@mui/styles';
-import { extensionEnabled } from '../ExtensionUtils';
-import React, { useEffect } from 'react';
+import { EntityType } from '../../chart/Utils';
 
 /**
  * Evaluates the specified rule set on a row returned by the Neo4j driver.
@@ -88,17 +87,30 @@ export const evaluateRulesOnDict = (dict, rules, customizations) => {
  * @returns a user-defined value if a rule is met, or the default value if none are.
  */
 export const evaluateRulesOnNode = (node, customization, defaultValue, rules) => {
-  if (!node || !customization || !rules) {
+  return evaluateRules(node, customization, defaultValue, rules, EntityType.Node);
+};
+
+export const evaluateRulesOnLink = (link, customization, defaultValue, rules) => {
+  return evaluateRules(link, customization, defaultValue, rules, EntityType.Relationship);
+};
+
+export const evaluateRules = (entity, customization, defaultValue, rules, entityType) => {
+  if (!entity || !customization || !rules) {
     return defaultValue;
   }
+
   for (const [index, rule] of rules.entries()) {
     // Only look at rules relevant to the target customization.
     if (rule.customization == customization) {
       // if the row contains the specified field...
-      const label = rule.field.split('.')[0];
+      const typeOrLabel = rule.field.split('.')[0];
       const property = rule.field.split('.')[1];
-      if (node.labels.includes(label)) {
-        const realValue = node.properties[property] ? node.properties[property] : '';
+
+      if (
+        (entityType === EntityType.Node && entity.labels.includes(typeOrLabel)) ||
+        (entityType === EntityType.Relationship && entity.type == typeOrLabel)
+      ) {
+        const realValue = entity?.properties?.[property] || '';
         const ruleValue = rule.value;
         if (evaluateCondition(realValue, rule.condition, ruleValue)) {
           return rule.customizationValue;