Merge branch 'develop' into dependabot/npm_and_yarn/adobe/css-tools-4.3.1

BennuFire · web-flow · commit 0d2f3f227d75 · 2023-09-22T14:23:49.000+02:00
diff --git a/public/index.html b/public/index.html
@@ -30,6 +30,7 @@
 </head>
 
 <body>
+    <div id="overlay"></div>
     <div id="root"></div>
     <noscript>Please enable JavaScript to view this site.</noscript>
     <script src="bundle.js"></script>
diff --git a/public/style.css b/public/style.css
@@ -228,4 +228,11 @@
 		transform: scale(0.95);
 		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
 	}
-}
+}
+
+/* Workaround for Needle not handling menu placement of dropdowns on modals */
+#overlay {
+  z-index: 99 !important;
+  position: absolute;
+}
+/* End workaround */
diff --git a/src/card/settings/CardSettingsContent.tsx b/src/card/settings/CardSettingsContent.tsx
@@ -111,7 +111,7 @@ const NeoCardSettingsContent = ({
             label: report?.label || '',
             value: report?.label || '',
           },
-          menuPortalTarget: document.querySelector('body'),
+          menuPortalTarget: document.querySelector('#overlay'),
         }}
         fluid
         style={{ marginLeft: '0px', marginRight: '10px', width: '47%', maxWidth: '200px', display: 'inline-block' }}
@@ -133,7 +133,7 @@ const NeoCardSettingsContent = ({
               value: database,
             })),
             value: { label: databaseText, value: databaseText },
-            menuPortalTarget: document.querySelector('body'),
+            menuPortalTarget: document.querySelector('#overlay'),
           }}
           fluid
           style={{ marginLeft: '0px', marginRight: '10px', width: '47%', maxWidth: '200px', display: 'inline-block' }}
diff --git a/src/card/view/CardViewFooter.tsx b/src/card/view/CardViewFooter.tsx
@@ -121,7 +121,7 @@ const NeoCardViewFooter = ({
                       : { label: selection[selectable], value: selection[selectable] },
                     isMulti: selectableFields[selectable].multiple,
                     isClearable: false,
-                    menuPortalTarget: document.querySelector('body'),
+                    menuPortalTarget: document.querySelector('#overlay'),
                   }}
                   fluid
                   style={{
diff --git a/src/chart/bar/BarChart.tsx b/src/chart/bar/BarChart.tsx
@@ -28,7 +28,7 @@ const NeoBarChart = (props: ChartProps) => {
 
   const { records, selection } = props;
 
-  const [keys, setKeys] = React.useState({});
+  const [keys, setKeys] = React.useState<string[]>([]);
   const [data, setData] = React.useState<Record<string, any>[]>([]);
 
   useEffect(() => {
@@ -72,7 +72,7 @@ const NeoBarChart = (props: ChartProps) => {
         return row;
       });
 
-    setKeys(newKeys);
+    setKeys(Object.keys(newKeys));
     setData(newData);
   }, [selection]);
 
@@ -114,8 +114,8 @@ const NeoBarChart = (props: ChartProps) => {
   const chartColorsByScheme = getD3ColorsByScheme(colorScheme);
   // Compute bar color based on rules - overrides default color scheme completely.
   const getBarColor = (bar) => {
-    let { data, id } = bar;
-    let colorIndex = Object.keys(data).indexOf(id);
+    let { id } = bar;
+    let colorIndex = keys.indexOf(id);
     if (colorIndex >= chartColorsByScheme.length) {
       colorIndex %= chartColorsByScheme.length;
     }
@@ -218,7 +218,7 @@ const NeoBarChart = (props: ChartProps) => {
       layout={layout}
       groupMode={groupMode == 'stacked' ? 'stacked' : 'grouped'}
       enableLabel={enableLabel}
-      keys={Object.keys(keys)}
+      keys={keys}
       indexBy='index'
       margin={{
         top: marginTop,
diff --git a/src/chart/graph/component/GraphChartInspectModal.tsx b/src/chart/graph/component/GraphChartInspectModal.tsx
@@ -17,7 +17,9 @@ export const NeoGraphChartInspectModal = (props: GraphChartVisualizationProps) =
         aria-labelledby='form-dialog-title'
       >
         <Dialog.Header id='form-dialog-title'>
-          {props.interactivity.selectedEntity ? getEntityHeader(props.interactivity.selectedEntity) : ''}
+          {props.interactivity.selectedEntity
+            ? getEntityHeader(props.interactivity.selectedEntity, props.engine.selection)
+            : ''}
         </Dialog.Header>
         <Dialog.Content>
           <GraphEntityInspectionTable entity={props.interactivity.selectedEntity}></GraphEntityInspectionTable>
diff --git a/src/chart/graph/util/NodeUtils.ts b/src/chart/graph/util/NodeUtils.ts
@@ -24,8 +24,26 @@ export const parseNodeIconConfig = (iconStyle) => {
   }
 };
 
-export const getEntityHeader = (entity) => {
-  return (entity.labels && entity.labels.join(', ')) || entity.type;
+const getSelectedNodeProperty = (entity: any, sourceOrTarget: string, propertySelections: any) => {
+  const selection = propertySelections[entity[sourceOrTarget]?.mainLabel];
+  switch (selection) {
+    case '(label)':
+      return entity[sourceOrTarget]?.mainLabel;
+    case '(id)':
+      return entity[sourceOrTarget]?.id;
+    default:
+      return entity[sourceOrTarget]?.properties[selection];
+  }
+};
+
+const getRelPatternString = (entity: any, selection: any) => {
+  const sourceTitle = getSelectedNodeProperty(entity, 'source', selection);
+  const targetTitle = getSelectedNodeProperty(entity, 'target', selection);
+  return `(${sourceTitle ? sourceTitle : '[no value]'} --> ${targetTitle ? targetTitle : '[no value]'})`;
+};
+
+export const getEntityHeader = (entity: any, selection: any) => {
+  return entity.labels?.join(', ') || `${entity.type} ${getRelPatternString(entity, selection)}`;
 };
 
 export const drawDataURIOnCanvas = (node, strDataURI, canvas, defaultNodeSize) => {
diff --git a/src/chart/table/TableChart.tsx b/src/chart/table/TableChart.tsx
@@ -276,13 +276,18 @@ export const NeoTableChart = (props: ChartProps) => {
             ColumnSortedAscendingIcon: () => <></>,
           }}
           getRowClassName={(params) => {
-            return `rule${evaluateRulesOnDict(params.row, styleRules, ['row color', 'row text color'])}`;
+            return ['row color', 'row text color']
+              .map((e) => {
+                return `rule${evaluateRulesOnDict(params.row, styleRules, [e])}`;
+              })
+              .join(' ');
           }}
           getCellClassName={(params) => {
-            return `rule${evaluateRulesOnDict({ [params.field]: params.value }, styleRules, [
-              'cell color',
-              'cell text color',
-            ])}`;
+            return ['cell color', 'cell text color']
+              .map((e) => {
+                return `rule${evaluateRulesOnDict({ [params.field]: params.value }, styleRules, [e])}`;
+              })
+              .join(' ');
           }}
         />
       </div>
