Feature/rule based styling table colouring (#944)

* rule based styling cell colouring feature

* changing cell text/background colour now plays nicely

* TODO note about row/cell rule mix and match behaviour

Author: LiamEdwardsLamarche

src/chart/table/TableChart.tsx

@@ -3,6 +3,7 @@ import { DataGrid, GridColumnVisibilityModel } from '@mui/x-data-grid';
 import { ChartProps } from '../Chart';
 import {
   evaluateRulesOnDict,
+  evaluateSingleRuleOnDict,
   generateClassDefinitionsBasedOnRules,
   useStyleRules,
 } from '../../extensions/styling/StyleRuleEvaluator';
@@ -243,6 +244,7 @@ export const NeoTableChart = (props: ChartProps) => {
       ColumnSortedDescendingIcon: () => <></>,
       ColumnSortedAscendingIcon: () => <></>,
     },
+    // TODO: if mixing and matching row and cell styling, row rules MUST be set first or will not populate correctly
     getRowClassName: (params) => {
       return ['row color', 'row text color']
         .map((e) => {
@@ -253,7 +255,19 @@ export const NeoTableChart = (props: ChartProps) => {
     getCellClassName: (params) => {
       return ['cell color', 'cell text color']
         .map((e) => {
-          return `rule${evaluateRulesOnDict({ [params.field]: params.value }, styleRules, [e])}`;
+          let trueRulesList = [''];
+          let trueRule;
+          for (const [index, rule] of styleRules.entries()) {
+            if (rule.targetField) {
+              if (rule.targetField === params.field) {
+                trueRule = `rule${evaluateSingleRuleOnDict({ [rule.field]: params.row[rule.field] }, rule, index, [e])}`;
+              }
+            } else {
+              trueRule = `rule${evaluateSingleRuleOnDict({ [params.field]: params.value }, rule, index, [e])}`;
+            }
+            trueRulesList.push(trueRule);
+          }
+          return trueRulesList.join(' ');
         })
         .join(' ');
     },

src/extensions/styling/StyleRuleCreationModal.tsx

@@ -338,6 +338,35 @@ export const NeoCustomReportStyleModal = ({
                                 }}
                                 fluid
                               />
+                              <Autocomplete
+                                className='n-align-middle n-inline-block n-w-5/12 n-pr-1'
+                                disableClearable={true}
+                                id={`autocomplete-label-type${index}`}
+                                size='small'
+                                noOptionsText='*Specify an exact field name'
+                                options={createFieldVariableSuggestions().filter((e) =>
+                                  e.toLowerCase().includes(rule.targetField)
+                                )}
+                                value={rule.targetField ? rule.targetField : (rule.field ? rule.field : '')}
+                                inputValue={rule.targetField ? rule.targetField : (rule.field ? rule.field : '')}
+                                popupIcon={<></>}
+                                style={{ minWidth: 125, visibility: rule.customization.includes("cell") ? 'visible' : 'hidden', display: rule.customization.includes("cell") ? '' : 'none' }}
+                                onInputChange={(event, value) => {
+                                  updateRuleField(index, 'targetField', value);
+                                }}
+                                onChange={(event, newValue) => {
+                                  updateRuleField(index, 'targetField', newValue);
+                                }}
+                                renderInput={(params) => (
+                                  <TextField
+                                    {...params}
+                                    placeholder='Target field name...'
+                                    InputLabelProps={{ shrink: true }}
+                                    style={{ padding: '6px 0 7px' }}
+                                    size={'small'}
+                                  />
+                                )}
+                              />
                               <TextInput
                                 className='n-align-middle n-inline-block n-w-1/12 n-pr-1'
                                 style={{ minWidth: 30 }}

src/extensions/styling/StyleRuleEvaluator.ts

@@ -63,21 +63,27 @@ export const evaluateRulesOnDict = (dict, rules, customizations) => {
   }
   for (const [index, rule] of rules.entries()) {
     // Only check customizations that are specified
-    if (customizations.includes(rule.customization)) {
-      // if the row contains the specified field...
-      if (dict[rule.field] !== undefined && dict[rule.field] !== null) {
-        const realValue = dict[rule.field].low ? dict[rule.field].low : dict[rule.field];
-        const ruleValue = rule.value;
-        if (evaluateCondition(realValue, rule.condition, ruleValue)) {
-          return index;
-        }
-      }
-    }
+    return evaluateSingleRuleOnDict (dict, rule, index, customizations)
   }
   // If no rules are met, return not found (index=-1)
   return -1;
 };
 
+export const evaluateSingleRuleOnDict = (dict, rule, ruleIndex, customizations) => {
+  if (customizations.includes(rule.customization)) {
+    // if the row contains the specified field...
+    if (dict[rule.field] !== undefined && dict[rule.field] !== null) {
+      const realValue = dict[rule.field].low ? dict[rule.field].low : dict[rule.field];
+      const ruleValue = rule.value;
+      if (evaluateCondition(realValue, rule.condition, ruleValue)) {
+        return ruleIndex;
+      }
+    }
+  }
+  return -1;
+}
+
+
 /**
  *  Evaluates the specified rule set on a node object returned by the Neo4j driver.
  * @param node - the node representation returned by the Neo4j driver.