feat(visManager): matrix settings

libs/shared/lib/vis/visualizations/matrixvis/components/MatrixPixi.tsx

@@ -22,9 +22,9 @@ import { NLPopup } from './MatrixPopup';
 import { Actions, Interpolations } from 'pixi-actions';
 
 import Color from 'color';
-import { SettingTypes } from '../../../configuration/settings';
 import { createColumn } from './ColumnGraphicsComponent';
 import { ReorderingManager } from './ReorderingManager';
+import { VisualizationConfiguration } from '../../../types';
 
 type Props = {
   // onClick: (node: NodeType, pos: IPointData) => void;
@@ -34,7 +34,7 @@ type Props = {
   currentShortestPathEdges?: LinkType[];
   highlightedLinks?: LinkType[];
   graph?: GraphQueryResult;
-  localConfig: SettingTypes;
+  configuration: VisualizationConfiguration;
 };
 
 const app = new Application({ background: 0xffffff, antialias: true, autoDensity: true, eventMode: 'auto' });
@@ -122,7 +122,7 @@ export const MatrixPixi = (props: Props) => {
     if (props.graph && ref.current && ref.current.children.length > 0) {
       setup();
     }
-  }, [props.localConfig]);
+  }, [props.configuration]);
 
   // TODO implement search results
   // useEffect(() => {
@@ -145,7 +145,7 @@ export const MatrixPixi = (props: Props) => {
 
   function onButtonDown(event: FederatedPointerEvent) {
     console.log(
-      event.currentTarget
+      event.currentTarget,
       // graph.nodes.find((node) => node.id === event.currentTarget.name)
     );
   }
@@ -231,7 +231,7 @@ export const MatrixPixi = (props: Props) => {
 
     if (columnTextPositions.length !== columnPositions.length)
       throw new Error(
-        'columnTextPositions and columnPositions have different length ' + columnTextPositions.length + ' / ' + columnPositions.length
+        'columnTextPositions and columnPositions have different length ' + columnTextPositions.length + ' / ' + columnPositions.length,
       );
 
     for (let i = 0; i < columns.length; i++) {
@@ -257,7 +257,7 @@ export const MatrixPixi = (props: Props) => {
     rowOrder: string[],
     colorScale: any,
     cellWidth: number,
-    cellHeight: number
+    cellHeight: number,
   ) => {
     const rows = rowsContainer.children;
     let rowPositions: Point[] = [];
@@ -306,11 +306,14 @@ export const MatrixPixi = (props: Props) => {
     viewport.current.addChild(columnsContainer);
     viewport.current.addChild(rowsContainer);
 
-    const groupByType = props.graph.nodes.reduce((group: any, node: Node) => {
-      if (!group[node.label]) group[node.label] = [];
-      group[node.label].push(node);
-      return group;
-    }, {} as { [key: string]: Node[] });
+    const groupByType = props.graph.nodes.reduce(
+      (group: any, node: Node) => {
+        if (!group[node.label]) group[node.label] = [];
+        group[node.label].push(node);
+        return group;
+      },
+      {} as { [key: string]: Node[] },
+    );
 
     // order groupByType by size
     const ordered = Object.entries(groupByType).sort((a: any[], b: any[]) => b[1].length - a[1].length);
@@ -350,7 +353,7 @@ export const MatrixPixi = (props: Props) => {
 
     // console.log('currentColumnOrder', columnOrder);
 
-    setupVisualizationEncodingMapping(props.localConfig);
+    setupVisualizationEncodingMapping(props.configuration);
 
     setupColumns(props.graph.edges, columnOrder, rowOrder);
     setupColumnLegend(columnOrder);
@@ -369,7 +372,7 @@ export const MatrixPixi = (props: Props) => {
     isSetup.current = true;
   };
 
-  const setupVisualizationEncodingMapping = (localConfig: SettingTypes) => {
+  const setupVisualizationEncodingMapping = (configuration: VisualizationConfiguration) => {
     if (!props.graph) throw new Error('Graph is undefined; cannot setup matrix');
     const visMapping = []; // TODO type
 
@@ -381,7 +384,7 @@ export const MatrixPixi = (props: Props) => {
     const adjacenyScale = d3.scaleLinear([colorNeutral, tailwindColors.entity.DEFAULT]);
     visMapping.push({
       attribute: 'adjacency',
-      encoding: localConfig.marks,
+      encoding: configuration.marks,
       colorScale: adjacenyScale,
       renderFunction: function (i: number, color: ColorSource, gfxContext: Graphics) {
         gfxContext.beginFill(color, 1);

libs/shared/lib/vis/visualizations/matrixvis/matrixvis.tsx

@@ -6,14 +6,17 @@ import { MatrixPixi } from './components/MatrixPixi';
 import { VisualizationPropTypes, VISComponentType } from '../../types';
 import Input from '@graphpolaris/shared/lib/components/inputs';
 import { GraphMetaData } from '@graphpolaris/shared/lib/data-access/statistics';
-import { SettingsContainer, SettingsHeader } from '@graphpolaris/shared/lib/vis/configuration';
+import { SettingsContainer } from '@graphpolaris/shared/lib/vis/configuration';
+import { dataColors, tailwindColors } from 'config';
 
 export interface MatrixVisProps {
   marks: string;
+  color: string;
 }
 
 const configuration: MatrixVisProps = {
   marks: 'rect',
+  color: 'blue',
 };
 
 export const MatrixVis = React.memo(({ data, ml, configuration }: VisualizationPropTypes) => {
@@ -31,7 +34,7 @@ export const MatrixVis = React.memo(({ data, ml, configuration }: VisualizationP
   return (
     <>
       <div className="h-full w-full overflow-hidden" ref={ref}>
-        <MatrixPixi graph={graph} highlightNodes={highlightNodes} highlightedLinks={highlightedLinks} localConfig={configuration} />
+        <MatrixPixi graph={graph} highlightNodes={highlightNodes} highlightedLinks={highlightedLinks} configuration={configuration} />
       </div>
     </>
   );
@@ -55,6 +58,14 @@ const MatrixSettings = ({
         options={['rect', 'circle']}
         onChange={(val) => updateSettings({ marks: val })}
       />
+
+      <Input
+        type="dropdown"
+        label="Color"
+        value={configuration.color}
+        options={['blue', 'green']}
+        onChange={(val) => updateSettings({ color: val })}
+      />
     </SettingsContainer>
   );
 };