fix: fixes ordering, font scaling, and disable visibility for too small labels

.gitignore

@@ -80,7 +80,6 @@ node_modules
 tsconfig.tsbuildinfo
 vite.config.ts.*
 
-
 # Generated ts definitions files for CSS modules
 *.d.ts
 *.module.scss.d.ts

libs/shared/lib/vis/visualizations/matrix/components/BitmapTextLabel.ts

+import { BitmapText, Text } from 'pixi.js';
+
+export class BitmapTextLabel extends BitmapText {
+  static readonly LABEL_FONT_FAMILY = 'HelveticaRegular';
+  static readonly LABEL_FONT_SIZE = 12;
+  static readonly LABEL_COLOR = 0x333333;
+
+  constructor(label: string) {
+    super(label, {
+      fontName: BitmapTextLabel.LABEL_FONT_FAMILY,
+      fontSize: BitmapTextLabel.LABEL_FONT_SIZE,
+      align: 'right',
+      tint: BitmapTextLabel.LABEL_COLOR,
+    });
+
+    this.rotation = (Math.PI * 3) / 2;
+    this.eventMode = 'none';
+    this.name = 'Text_' + label;
+  }
+}

libs/shared/lib/vis/visualizations/matrix/components/ColumnGraphicsComponent.tsx

@@ -50,9 +50,14 @@ export const createColumn = (
       gfx.drawRect(0, i * cellWidth, cellWidth, cellHeight);
       gfx.endFill();
     } else {
+      // console.log('inOutEdge', inOutEdge, Math.min(inOutEdge.length, 1), currentVisMapping.colorScale(Math.min(inOutEdge.length, 1)));
+
       if (outEdges.length > 0) {
         const thisEdge = outEdges[0];
+        // console.log('inOutEdge', thisEdge);
+
         const value = byString(thisEdge, currentVisMapping.attribute);
+        // console.log('value', value);
 
         color = currentVisMapping.colorScale(value);
       }
@@ -62,8 +67,25 @@ export const createColumn = (
       gfx.drawRect(0, i * cellWidth, cellWidth, cellHeight);
       gfx.endFill();
     }
+
+    // if (inOutEdge.length > 0) {
+    //   color = fgCellColor;
+    // } else {
+    //   color = bgCellColor;
+    // }
   }
 
+  //   gfx.on('pointerdown', onButtonDown);
+  // .on('pointerup', onDragEnd).on('pointerupoutside', onDragEnd);
+
+  // for (let i = 0; i < edges.length; i++) {
+  //   const edge = edges[i];
+  //   // draw an rectangle with a fill
+  //   gfx.beginFill(0xff0000, 0.5);
+  //   gfx.drawRect(0, i * cellWidth, cellWidth, cellHeight * nodes.length);
+  //   gfx.endFill();
+  // }
+
   return gfx;
 };
 

libs/shared/lib/vis/visualizations/matrix/components/ColumnLabelTrack.tsx

+import { useEffect } from 'react';
+
+export const ColumnLabelTrack = ({ columnLabels, config }: { columnLabels: string[]; config: any }) => {
+  //   console.log('ColumnLabelTrack', columnLabels);
+
+  return (
+    <>
+      <div className="grid grid-flow-col auto-cols-max h-80">
+        {columnLabels.map((label, index) => {
+          // console.log('columnlabeltrack', label);
+          return (
+            <div className="-rotate-90 font-mono text-sm w-4" key={index}>
+              {label}
+            </div>
+          );
+        })}
+      </div>
+    </>
+  );
+};

libs/shared/lib/vis/visualizations/matrix/components/ColumnSpriteComponent.tsx

@@ -11,6 +11,7 @@ export const createColumn = (
   cellWidth: number,
   cellHeight: number
 ) => {
+  // console.log('createColumn', id, nodes.length, edges.length);
   const sprite = new Sprite(Texture.WHITE);
   sprite.name = 'col_' + id;
   sprite.eventMode = 'static';
@@ -19,6 +20,8 @@ export const createColumn = (
   const edgesForThisColumn = edges.filter((edge) => {
     return edge.from === nodesCol[id].id || edge.to === nodesCol[id].id;
   });
+  // console.log('edgesForThisColumn', nodesCol[id].id, edgesForThisColumn);
+  // const color = new Color({ r: 255 * (id / nodesCol.length), g: 255, b: 255, a: 1 });
   const bgCellColor = dataColors.neutral['5'];
   const fgCellColor = tailwindColors.entity.DEFAULT;
   let color = bgCellColor;
@@ -44,5 +47,14 @@ export const createColumn = (
     // sprite.drawRect(0, i * cellWidth, cellWidth, cellHeight);
     // sprite.endFill();
   }
+  //   sprite.on('pointerdown', onButtonDown);
+  // .on('pointerup', onDragEnd).on('pointerupoutside', onDragEnd);
+  // for (let i = 0; i < edges.length; i++) {
+  //   const edge = edges[i];
+  //   // draw an rectangle with a fill
+  //   gfx.beginFill(0xff0000, 0.5);
+  //   gfx.drawRect(0, i * cellWidth, cellWidth, cellHeight * nodes.length);
+  //   gfx.endFill();
+  // }
   return sprite;
 };

libs/shared/lib/vis/visualizations/matrix/components/ReorderingManager.tsx

@@ -10,6 +10,27 @@ export class ReorderingManager {
     this.graph = graph;
   }
 
+  //   // Precompute the orders.
+  //   orders = {
+  //     //
+  //     //   name: d3.range(n).sort(function (a, b) {
+  //     //     return d3.ascending(nodes[a].name, nodes[b].name);
+  //     //   }),
+  //     //   count: d3.range(n).sort(function (a, b) {
+  //     //     return nodes[b].count - nodes[a].count;
+  //     //   }),
+  //     //   group: d3.range(n).sort(function (a, b) {
+  //     //     var x = nodes[b].group - nodes[a].group;
+  //     //     return x != 0 ? x : d3.ascending(nodes[a].name, nodes[b].name);
+  //     //   }),
+  //     leafOrder: computeLeaforder,
+  //     //   leafOrderDist: computeLeaforderDist,
+  //     //   barycenter: computeBarycenter,
+  //     //   rcm: computeRCM,
+  //     //   spectral: computeSpectral,
+  //     //   nn2opt: computeNN2OPT,
+  //   };
+
   private computeNameOrder = (columnOrder: string[], rowOrder: string[]) => {
     const columnOrderSorted = columnOrder.sort((a, b) => a.localeCompare(b));
     const rowOrderSorted = rowOrder.sort((a, b) => a.localeCompare(b));
@@ -80,6 +101,8 @@ export class ReorderingManager {
       adjacency.push(rowOrderIDs);
     }
 
+    // console.log('adjacency', adjacency);
+
     return adjacency;
   }
 
@@ -114,6 +137,9 @@ export class ReorderingManager {
     );
 
     const nodes = columnOrder.map((id) => nodesTemp.find((node) => node.id === id));
+    const nodesWithRows = nodes.push(...rowOrder.map((id) => nodesTemp.find((node) => node.id === id)));
+    console.log('nodesTemp', nodes);
+
     const graphReorderJs = reorderAny.graph().nodes(nodes);
 
     const edges = graph.edges.map((edge) => {
@@ -130,6 +156,7 @@ export class ReorderingManager {
       } as any;
     });
 
+    // const edges = rowOrder.map((id) => edgesTemp.find((edge) => edge.id === id));
     graphReorderJs.links(edges);
     graphReorderJs.init();
 
@@ -154,6 +181,14 @@ export class ReorderingManager {
     const reorderGraph = this.getReorderJSGraph(this.graph, columnOrder, rowOrder);
 
     var order = reorderAny.spectral_order(reorderGraph);
+    // rcm.forEach(function (lo, i) {
+    //   nodes[i].rcm = lo;
+    // });
+
+    // return nodes.map(function (n) {
+    //   return n.rcm;
+    // });
+
     const columnOrderSorted = order.map((i: number) => columnOrder[i]).filter((a: string) => columnOrder.includes(a));
     const rowOrderSorted = order.map((i: number) => rowOrder[i]).filter((a: string) => rowOrder.includes(a));
 
@@ -167,6 +202,13 @@ export class ReorderingManager {
     const reorderGraph = this.getReorderJSGraph(this.graph, columnOrder, rowOrder);
 
     var order = reorderAny.bfs_order(reorderGraph);
+    // rcm.forEach(function (lo, i) {
+    //   nodes[i].rcm = lo;
+    // });
+
+    // return nodes.map(function (n) {
+    //   return n.rcm;
+    // });
 
     const columnOrderSorted = order.map((i: number) => columnOrder[i]).filter((a: string) => columnOrder.includes(a));
     const rowOrderSorted = order.map((i: number) => rowOrder[i]).filter((a: string) => rowOrder.includes(a));
@@ -183,6 +225,7 @@ export class ReorderingManager {
 
     const order = reorderAny.pca_order(columnOrderUnSorted);
     const columnOrderSorted = order.map((i: number) => columnOrder[i]);
+    // const rowOrderSorted = order.map((i: number) => rowOrder[i]).filter((a: string) => rowOrder.includes(a));
 
     console.debug('improved pca', order, columnOrderSorted, rowOrder);
 
@@ -193,22 +236,22 @@ export class ReorderingManager {
     console.log('reorderMatrix', orderingname);
     switch (orderingname.toLowerCase()) {
       case 'leafordering': {
-        return this.computeLeaforder(columnOrder, rowOrder);
+        return this.computeLeaforder(columnOrder, rowOrder) as { columnOrder: string[]; rowOrder: string[] };
       }
       case 'name': {
-        return this.computeNameOrder(columnOrder, rowOrder);
+        return this.computeNameOrder(columnOrder, rowOrder) as { columnOrder: string[]; rowOrder: string[] };
       }
       case 'count': {
-        return this.computeCountOrder(columnOrder, rowOrder);
+        return this.computeCountOrder(columnOrder, rowOrder) as { columnOrder: string[]; rowOrder: string[] };
       }
       case 'barycenter': {
-        return this.computeBarycenter(columnOrder, rowOrder);
+        return this.computeBarycenter(columnOrder, rowOrder) as { columnOrder: string[]; rowOrder: string[] };
       }
       case 'rcm': {
-        return this.computeRCM(columnOrder, rowOrder);
+        return this.computeRCM(columnOrder, rowOrder) as { columnOrder: string[]; rowOrder: string[] };
       }
       case 'spectral': {
-        return this.computeSpectal(columnOrder, rowOrder);
+        return this.computeSpectal(columnOrder, rowOrder) as { columnOrder: string[]; rowOrder: string[] };
       }
       // case 'pca': {
       //   return this.computePCA(columnOrder, rowOrder);
@@ -217,10 +260,10 @@ export class ReorderingManager {
       //   return this.computeBFS(columnOrder, rowOrder);
       // }
       case 'none' || 'identity': {
-        return { columnOrder, rowOrder };
+        return { columnOrder, rowOrder } as { columnOrder: string[]; rowOrder: string[] };
       }
       default: {
-        return this.computeLeaforder(columnOrder, rowOrder);
+        return this.computeLeaforder(columnOrder, rowOrder) as { columnOrder: string[]; rowOrder: string[] };
       }
     }
   };

libs/shared/lib/vis/visualizations/matrix/components/TextLabel.ts

+import { Text } from 'pixi.js';
+
+export class TextLabel extends Text {
+  static readonly RANDOM_SCALE_FACTOR = 10.0;
+
+  constructor(label: string, config: any) {
+    super(label);
+
+    // this.style = { fontSize: this.finalTextSize * this.bigRandomScaleFactor, fill: 0x000000, align: 'center' };
+    this.style = {
+      fontSize: config.LABEL_FONT_SIZE * TextLabel.RANDOM_SCALE_FACTOR,
+      fontFamily: config.LABEL_FONT_FAMILY,
+      fill: config.LABEL_FILL,
+      align: config.LABEL_ALIGN,
+    };
+    this.scale.x = 1 / TextLabel.RANDOM_SCALE_FACTOR;
+    this.scale.y = 1 / TextLabel.RANDOM_SCALE_FACTOR;
+    this.rotation = (Math.PI * 3) / 2;
+    this.eventMode = 'none';
+    this.name = 'Text_' + label;
+    this.cacheAsBitmap = true;
+
+    //   // from the PixiJS documention: Setting a text object's scale to > 1.0 will result in blurry/pixely display,
+    //   // because the text is not re-rendered at the higher resolution needed to look sharp -
+    //   // it's still the same resolution it was when generated. To deal with this, you can render at a higher
+    //   // initial size and down-scale, instead.
+    //   const basicText = new Text(columnOrder[j], { fontSize: finalTextSize * bigRandomScaleFactor, fill: 0x000000, align: 'center' });
+    //   basicText.position.set(j * config.cellWidth + config.cellWidth / 4, config.textOffsetY - 5);
+    //   basicText.scale.set(finalTextSize / (bigRandomScaleFactor * bigRandomScaleFactor));
+    //   basicText.rotation = (Math.PI * 3) / 2;
+    //   basicText.eventMode = 'none';
+    //   basicText.name = 'Text_' + columnOrder[j];
+  }
+}

libs/shared/lib/vis/visualizations/matrix/matrix.stories.tsx

@@ -8,8 +8,19 @@ import {
   big2ndChamberSchemaRaw,
   smallFlightsQueryResults,
   mockLargeQueryResults,
+  recommendationPersonActedInMovieQueryResult,
+  recommendationPersonActedInMovieQueryResultPayload,
+  slackReactionToThreadedMessageQueryResultPayload,
 } from '../../../mock-data';
 
+// export * from './mockLargeQueryResults';
+// export * from './big2ndChamberQueryResult';
+// export * from './bigMockQueryResults';
+// export * from './mockQueryResults';
+// export * from './smallFlightsQueryResults';
+// export * from './mockMobilityQueryResult';
+// export * from './typesMockQueryResults';
+
 import { VisualizationPanel } from '../../panel/visualization';
 import {
   assignNewGraphQueryResult,
@@ -43,7 +54,7 @@ const Component: Meta<typeof VisualizationPanel> = {
   ],
 };
 
-const Mockstore: any = configureStore({
+const Mockstore = configureStore({
   reducer: {
     schema: schemaSlice.reducer,
     graphQueryResult: graphQueryResultSlice.reducer,
@@ -127,4 +138,22 @@ export const TestWithLargeQueryResult = {
   },
 };
 
+export const TestWithRecommendationPersonActedInMovieQueryResult = {
+  args: { loading: false },
+  play: async () => {
+    const dispatch = Mockstore.dispatch;
+    dispatch(assignNewGraphQueryResult(recommendationPersonActedInMovieQueryResultPayload));
+    dispatch(setActiveVisualization(Visualizations.Matrix));
+  },
+};
+
+export const TestWithSlackReactionToThreadedMessageQueryResult = {
+  args: { loading: false },
+  play: async () => {
+    const dispatch = Mockstore.dispatch;
+    dispatch(assignNewGraphQueryResult(slackReactionToThreadedMessageQueryResultPayload));
+    dispatch(setActiveVisualization(Visualizations.Matrix));
+  },
+};
+
 export default Component;

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

@@ -21,15 +21,29 @@ export const MatrixVis = React.memo(({ data, ml, dispatch, localConfig }: Visual
 
   useEffect(() => {
     if (data) {
-      setGraph(data);
+      setGraph(
+        data
+        // parseQueryResult(graphQueryResult, ml, {
+        //   defaultX: (ref.current?.clientWidth || 1000) / 2,
+        //   defaultY: (ref.current?.clientHeight || 1000) / 2,
+        // })
+      );
     }
   }, [data, ml]);
 
   return (
     <>
-      <div className="h-full w-full overflow-hidden" ref={ref}>
-        <MatrixPixi graph={graph} highlightNodes={highlightNodes} highlightedLinks={highlightedLinks} localConfig={localConfig} />
-      </div>
+      <MatrixPixi graph={graph} highlightNodes={highlightNodes} highlightedLinks={highlightedLinks} localConfig={localConfig} />
+
+      {/* <VisConfigPanelComponent> */}
+      {/* <NodeLinkConfigPanelComponent
+               graph={this.state.graph}
+               nlViewModel={this.nodeLinkViewModel}
+            /> */}
+      {/*</VisConfigPanelComponent>*/}
+      {/*<VisConfigPanelComponent isLeft>*/}
+      {/*  <AttributesConfigPanel nodeLinkViewModel={this.nodeLinkViewModel} />*/}
+      {/* </VisConfigPanelComponent> */}
     </>
   );
 });

libs/shared/lib/vis/visualizations/nodelink/nodelinkvis.tsx

@@ -97,7 +97,6 @@ export const NodeLinkVis = React.memo(({ data, ml, dispatch }: VisualizationProp
             onClickedNode(node, ml);
           }}
         />
-
         {/* <VisConfigPanelComponent> */}
         {/* <NodeLinkConfigPanelComponent
                graph={this.state.graph}

libs/shared/package.json

@@ -24,6 +24,7 @@
     "@emotion/styled": "^11.10.6",
     "@mui/icons-material": "^5.11.11",
     "@nebula.gl/layers": "^1.0.4",
+    "@pixi-essentials/cull": "^2.0.0",
     "@reactflow/node-resizer": "^2.0.1",
     "@reduxjs/toolkit": "^1.9.2",
     "@tisoap/react-flow-smart-edge": "^3.0.0",
@@ -33,6 +34,7 @@
     "@types/supercluster": "^7.1.0",
     "classnames": "^2.3.2",
     "color": "^4.2.3",
+    "color-string": "^1.9.1",
     "config": "workspace:*",
     "cytoscape": "^3.23.0",
     "d3": "^6.6",
@@ -50,8 +52,8 @@
     "kepler.gl": "^2.5.5",
     "keycloak-js": "^21.1.1",
     "lodash-es": "^4.17.21",
-    "pixi-viewport": "^5.0.2",
     "pixi-actions": "^1.1.10",
+    "pixi-viewport": "^5.0.2",
     "pixi.js": "^7.1.4",
     "react-color": "^2.19.3",
     "react-cookie": "^4.1.1",
@@ -63,6 +65,7 @@
     "react-window": "^1.8.9",
     "reactflow": "^11.7.0",
     "regenerator-runtime": "0.13.11",
+    "reorder.js": "^2.2.6",
     "sass": "^1.59.3",
     "scss": "^0.2.4",
     "styled-components": "^5.3.6",
@@ -70,9 +73,7 @@
     "tslib": "^2.5.0",
     "typed": "link:@deck.gl/core/typed",
     "use-immer": "^0.9.0",
-    "web-worker": "^1.2.0",
-    "reorder.js": "^2.2.6",
-    "color-string": "^1.9.1"
+    "web-worker": "^1.2.0"
   },
   "devDependencies": {
     "@iconify/json": "^2.2.95",

pnpm-lock.yaml

@@ -232,6 +232,9 @@ importers:
       '@nebula.gl/layers':
         specifier: ^1.0.4
         version: 1.0.4(@deck.gl/core@8.9.19)(@deck.gl/extensions@8.9.19)(@deck.gl/geo-layers@8.9.19)(@deck.gl/layers@8.9.19)(@deck.gl/mesh-layers@8.9.19)(@luma.gl/constants@8.5.20)(@luma.gl/core@8.5.20)
+      '@pixi-essentials/cull':
+        specifier: ^2.0.0
+        version: 2.0.0(@pixi/display@7.2.1)(@pixi/math@7.2.1)
       '@reactflow/node-resizer':
         specifier: ^2.0.1
         version: 2.1.0(immer@10.0.2)(react-dom@18.2.0)(react@18.2.0)
@@ -4833,6 +4836,16 @@ packages:
       '@nodelib/fs.scandir': 2.1.5
       fastq: 1.15.0
+  /@pixi-essentials/cull@2.0.0(@pixi/display@7.2.1)(@pixi/math@7.2.1):
+    resolution: {integrity: sha512-6hm1wfCmGItOnyKvCxrmZmOLQVIaN0MqseBweH+tLZH8ecGTIF3qb1cGQDNf9jaK6HH7s/+7m9xXvvk9e92ESw==}
+    peerDependencies:
+      '@pixi/display': ^7.0.0
+      '@pixi/math': ^7.0.0
+    dependencies:
+      '@pixi/display': 7.2.1(@pixi/core@7.2.1)
+      '@pixi/math': 7.2.1
+    dev: false
+
   /@pixi/accessibility@7.2.1(@pixi/core@7.2.1)(@pixi/display@7.2.1)(@pixi/events@7.2.1):
     resolution: {integrity: sha512-4kwcmY9CRb07grMd/3FTTpzzpsPlvutnP/xnlkxF8Bz5p2Hrg1nYYxwHzn3hZI0bMIR6oQbScxlx0ijIhVjXrA==}
     peerDependencies:
@@ -16358,7 +16371,7 @@ packages:
     dependencies:
       lilconfig: 2.1.0
       postcss: 8.4.21
-      ts-node: 10.9.1(@types/node@17.0.12)(typescript@4.9.5)
+      ts-node: 10.9.1(@types/node@18.13.0)(typescript@4.9.5)
       yaml: 1.10.2
     dev: true
@@ -20537,8 +20550,8 @@ packages:
       tinybench: 2.4.0
       tinypool: 0.4.0
       tinyspy: 1.1.1
-      vite: 4.2.1(@types/node@17.0.12)(sass@1.59.3)
-      vite-node: 0.29.4(@types/node@17.0.12)(sass@1.64.2)
+      vite: 4.2.1(@types/node@17.0.12)(sass@1.64.2)
+      vite-node: 0.29.4(@types/node@17.0.12)(sass@1.59.3)
       why-is-node-running: 2.2.2
     transitivePeerDependencies:
       - less