Fix and Chips (#406)

* v1

* Fix and chips

---------

Co-authored-by: Niels de Jong <Niels-121@hotmail.com>

Author: BennuFire

src/card/view/CardView.tsx

@@ -2,7 +2,6 @@ import React, { useEffect, useState } from 'react';
 import { ReportItemContainer } from '../CardStyle';
 import NeoCardViewHeader from './CardViewHeader';
 import NeoCardViewFooter from './CardViewFooter';
-import NeoReport from '../../report/Report';
 import { CardContent, IconButton } from '@material-ui/core';
 import NeoCodeEditorComponent from '../../component/editor/CodeEditorComponent';
 import PlayCircleFilledIcon from '@material-ui/icons/PlayCircleFilled';

src/card/view/CardViewFooter.tsx

@@ -37,6 +37,9 @@ const NeoCardViewFooter = ({
         if (selectableFields[selectable].type == SELECTION_TYPES.NODE_PROPERTIES) {
           // Only show optional selections if we explicitly allow it.
           if (showOptionalSelections || selectionIsMandatory) {
+            const totalColors = categoricalColorSchemes[nodeColorScheme]
+              ? categoricalColorSchemes[nodeColorScheme].length
+              : 0;
             const fieldSelections = fields.map((field, i) => {
               // TODO logically, it should be the last element in the field (node labels) array, as that is typically
               // the most specific node label when we have multi-labels
@@ -49,9 +52,6 @@ const NeoCardViewFooter = ({
                 '(id)',
                 '(no label)',
               ]);
-              const totalColors = categoricalColorSchemes[nodeColorScheme]
-                ? categoricalColorSchemes[nodeColorScheme].length
-                : 0;
               const color =
                 totalColors > 0 && !ignoreLabelColors
                   ? categoricalColorSchemes[nodeColorScheme][i % totalColors]

src/chart/graph/GraphChart.tsx

@@ -98,6 +98,7 @@ const NeoGraphChart = (props: ChartProps) => {
       nodeLabels,
       linkTypes,
       colorScheme,
+      props.fields,
       settings.nodeColorProp,
       settings.defaultNodeColor,
       settings.nodeSizeProp,

src/chart/graph/util/RecordUtils.ts

@@ -129,6 +129,7 @@ export function buildGraphVisualizationObjectFromRecords(
   nodeLabels: Record<string, any>,
   linkTypes: Record<string, any>,
   colorScheme: any,
+  fields: any,
   nodeColorProperty: any,
   defaultNodeColor: any,
   nodeSizeProperty: any,
@@ -172,7 +173,7 @@ export function buildGraphVisualizationObjectFromRecords(
 
   // Assign proper colors to nodes.
   const totalColors = colorScheme ? colorScheme.length : 0;
-  const nodeLabelsList = Object.keys(nodeLabels);
+  const nodeLabelsList = fields.map((e) => e[0]);
   const nodesList = Object.values(nodes).map((node) => {
     // First try to assign a node a color if it has a property specifying the color.
     let assignedColor = node.properties[nodeColorProperty]
@@ -222,6 +223,7 @@ export function injectNewRecordsIntoGraphVisualization(
     props.data.nodeLabels,
     props.data.linkTypes,
     props.style.colorScheme,
+    props.engine.fields,
     props.style.nodeColorProp,
     props.style.defaultNodeColor,
     props.style.nodeSizeProp,