libs/config/styling/variables.css

@@ -182,6 +182,7 @@
   }
 
   body.dark-mode {
+    color-scheme: dark;
     --clr-light: var(--clr-neutral-100);
     --clr-dark: var(--clr-white);
 

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

@@ -2,7 +2,7 @@ import { Edge, GraphQueryResult, Node, useML, useSearchResultData } from '@graph
 import { dataColors, visualizationColors } from 'config';
 import { Viewport } from 'pixi-viewport';
 import { Application, ColorSource, Container, FederatedPointerEvent, Graphics, IPointData, Point, Text } from 'pixi.js';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState, useImperativeHandle } from 'react';
 import { LinkType, NodeType } from '../types';
 import { NLPopup } from './MatrixPopup';
 
@@ -26,6 +26,8 @@ import {
   type Axis,
 } from 'd3';
 import { MatrixVisProps } from '../matrixvis';
+import { Theme } from '@graphpolaris/shared/lib/data-access/store/configSlice';
+import { useConfig } from '@graphpolaris/shared/lib/data-access/store';
 
 const styleMatrixSize = 50;
 
@@ -56,6 +58,14 @@ export const MatrixPixi = (props: Props) => {
     cellWidth: 100,
   };
 
+  const globalConfig = useConfig();
+
+  useEffect(() => {
+    if (props.graph) {
+      setup();
+    }
+  }, [globalConfig.theme]);
+
   let columnOrder: string[] = [];
   let rowOrder: string[] = [];
 
@@ -70,7 +80,13 @@ export const MatrixPixi = (props: Props) => {
   const isSetup = useRef(false);
   const ml = useML();
 
-  // const imperative = useRef<any>(null);
+  const imperative = useRef<any>(null);
+  useImperativeHandle(imperative, () => ({
+    getBackgroundColor() {
+      // Colors corresponding to .bg-light class
+      return globalConfig.theme === Theme.dark ? 0x121621 : 0xffffff;
+    },
+  }));
 
   let app: Application;
 
@@ -257,7 +273,7 @@ export const MatrixPixi = (props: Props) => {
 
     if (app == null) {
       app = new Application({
-        background: 0xffffff,
+        backgroundAlpha: 0,
         antialias: true,
         autoDensity: true,
         eventMode: 'auto',
@@ -267,21 +283,23 @@ export const MatrixPixi = (props: Props) => {
     }
 
     if (svg.current != null) {
-      select(svg.current).select('*').remove();
+      select(svg.current).selectAll('*').remove();
     }
+
     columnsContainer.removeChildren();
     app.stage.removeChildren();
 
     const size = ref.current?.getBoundingClientRect();
-    viewport.current = new Viewport({
-      screenWidth: size?.width || 1000,
-      screenHeight: size?.height || 1000,
-      worldWidth: size?.width || 1000,
-      worldHeight: size?.height || 1000,
-      stopPropagation: true,
-      events: app.renderer.events, // the interaction module is important for wheel to work properly when renderer.view is placed or scaled
-    });
-
+    if (viewport.current == null) {
+      viewport.current = new Viewport({
+        screenWidth: size?.width || 1000,
+        screenHeight: size?.height || 1000,
+        worldWidth: size?.width || 1000,
+        worldHeight: size?.height || 1000,
+        stopPropagation: true,
+        events: app.renderer.events, // the interaction module is important for wheel to work properly when renderer.view is placed or scaled
+      });
+    }
     app.stage.addChild(viewport.current);
 
     viewport.current.addChild(columnsContainer);
@@ -362,19 +380,19 @@ export const MatrixPixi = (props: Props) => {
     if (!props.graph) throw new Error('Graph is undefined; cannot setup matrix');
     const visMapping = []; // TODO type
 
-    let colorNeutralString = dataColors.neutral['5'];
+    let colorNeutralString = globalConfig.theme === Theme.dark ? dataColors.neutral['80'] : dataColors.neutral['15'];
     const colorNeutral = Color(colorNeutralString);
 
     // make adjacency
     // const adjacenyScale = scaleLinear([dataColors.neutral['5'], tailwindColors.entity.DEFAULT]);
-    const adjacenyScale = scaleLinear([colorNeutral, visualizationColors.GPSelected.colors[1][0]]);
+    const adjacenyScale = scaleLinear([colorNeutral, visualizationColors.GPPrimary.colors[1][0]]);
     visMapping.push({
       attribute: 'adjacency',
       encoding: settings.marks,
       colorScale: adjacenyScale,
       renderFunction: function (i: number, color: ColorSource, gfxContext: Graphics) {
         // Clear locally
-        gfxContext.beginFill(0xffffff, 1);
+        gfxContext.beginFill(imperative.current.getBackgroundColor(), 1);
         gfxContext.drawRect(0, i * config.cellHeight, config.cellWidth, config.cellHeight);
         gfxContext.endFill();
 
@@ -474,7 +492,7 @@ export const MatrixPixi = (props: Props) => {
       .attr('class', 'label')
       .style('text-anchor', 'middle')
       .style('alignment-baseline', 'hanging')
-      .style('fill', 'black')
+      .style('fill', globalConfig.theme === Theme.dark ? 'white' : 'black')
       .style('font-size', '14')
       .text(label);
 
@@ -572,7 +590,7 @@ export const MatrixPixi = (props: Props) => {
       .attr('class', 'label')
       .style('text-anchor', 'middle')
       .style('alignment-baseline', 'hanging')
-      .style('fill', 'black')
+      .style('fill', globalConfig.theme === Theme.dark ? 'white' : 'black')
       .style('font-size', '14')
       .text(label);
 
@@ -659,8 +677,8 @@ export const MatrixPixi = (props: Props) => {
             bottom: 0,
             width: styleMatrixSize,
             backdropFilter: 'blur(10px)',
-            background: 'rgba(255,255,255, 0.5)',
-            boxShadow: '1px 0px 0px 0px rgba(0,0,0,0.2)',
+            background: globalConfig.theme === Theme.dark ? 'rgba(0,0,0,0.2)' : 'rgba(255,255,255, 0.5)',
+            boxShadow: globalConfig.theme === Theme.dark ? '1px 0px 0px 0px rgba(255,255,255,0.2)' : '1px 0px 0px 0px rgba(0,0,0,0.2)',
           }}
         ></div>
         <div
@@ -672,8 +690,8 @@ export const MatrixPixi = (props: Props) => {
             right: 0,
             height: styleMatrixSize,
             backdropFilter: 'blur(10px)',
-            background: 'rgba(255,255,255, 0.5)',
-            boxShadow: `${styleMatrixSize}px 0px 0px 0px rgba(0,0,0,0.2)`,
+            background: globalConfig.theme === Theme.dark ? 'rgba(0,0,0,0.2)' : 'rgba(255,255,255, 0.5)',
+            boxShadow: globalConfig.theme === Theme.dark ? `${styleMatrixSize}px 1px 0px 0px rgba(255,255,255,0.2)` : `${styleMatrixSize}px 1px 0px 0px rgba(0,0,0,0.2)`,
           }}
         ></div>
         <svg

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

@@ -44,7 +44,7 @@ const settings: NodelinkVisProps = {
     shapeMap: undefined,
   },
   edges: {
-    width: { similar: true, width: 0.2 },
+    width: { similar: true, width: 0.8 },
   },
   nodeList: [],
 };

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

-import React, { useEffect } from 'react';
-import ReactJSONView from 'react-json-view';
+import React, { useState, useEffect } from 'react';
+import ReactJSONView, { ThemeKeys } from 'react-json-view';
 import { VisualizationPropTypes, VISComponentType, VisualizationSettingsPropTypes } from '../../common';
 import { SettingsContainer } from '@graphpolaris/shared/lib/vis/components/config';
 import { Input } from '@graphpolaris/shared/lib/components/inputs';
+import { useConfig } from '@graphpolaris/shared/lib/data-access/store';
+import { Theme } from '@graphpolaris/shared/lib/data-access/store/configSlice';
 
 export interface RawJSONVisProps {
   theme: string;
@@ -15,13 +17,28 @@ const settings: RawJSONVisProps = {
 };
 
 export const RawJSONVis = React.memo(({ data, settings }: VisualizationPropTypes) => {
+  const config = useConfig();
+
+  let [theme, setTheme] = useState<ThemeKeys>(settings.theme || 'bright:inverted');
+
+  useEffect(() => {
+    if (theme.startsWith('bright')) {
+      setTheme(config.theme === Theme.dark ? 'bright' : 'bright:inverted');
+    }
+  }, [config.theme]);
+
+
+  if (config.theme === Theme.dark && theme === 'bright:inverted') {
+    setTheme('bright');
+  }
+
   return (
     <ReactJSONView
       src={data}
       collapsed={1}
       quotesOnKeys={false}
       style={{ padding: '20px', flexGrow: 1 }}
-      theme={settings.theme || 'bright:inverted'}
+      theme={theme}
       iconStyle={settings.iconStyle}
       enableClipboard={true}
     />