From 2e2ebbf75b12784ac664d864865f01729b3eb8c4 Mon Sep 17 00:00:00 2001 From: Kristóf Marussy Date: Thu, 24 Aug 2023 00:06:37 +0200 Subject: refactor(web): clean up graphviz visualization --- subprojects/frontend/src/graph/GraphTheme.tsx | 64 +++++++++++++++++++++++++++ 1 file changed, 64 insertions(+) create mode 100644 subprojects/frontend/src/graph/GraphTheme.tsx (limited to 'subprojects/frontend/src/graph/GraphTheme.tsx') diff --git a/subprojects/frontend/src/graph/GraphTheme.tsx b/subprojects/frontend/src/graph/GraphTheme.tsx new file mode 100644 index 00000000..41ba6ba5 --- /dev/null +++ b/subprojects/frontend/src/graph/GraphTheme.tsx @@ -0,0 +1,64 @@ +/* + * SPDX-FileCopyrightText: 2023 The Refinery Authors + * + * SPDX-License-Identifier: EPL-2.0 + */ + +import { styled, type CSSObject } from '@mui/material/styles'; + +function createEdgeColor(suffix: string, color: string): CSSObject { + return { + [`& .edge-${suffix}`]: { + '& text': { + fill: color, + }, + '& [stroke="black"]': { + stroke: color, + }, + '& [fill="black"]': { + fill: color, + }, + }, + }; +} + +export default styled('div', { + name: 'GraphTheme', +})(({ theme }) => ({ + '& svg': { + userSelect: 'none', + '& .node': { + '& text': { + fontFamily: theme.typography.fontFamily, + fill: theme.palette.text.primary, + }, + '& [stroke="black"]': { + stroke: theme.palette.text.primary, + }, + '& [fill="green"]': { + fill: + theme.palette.mode === 'dark' + ? theme.palette.primary.dark + : theme.palette.primary.light, + }, + '& [fill="white"]': { + fill: theme.palette.background.default, + stroke: theme.palette.background.default, + }, + }, + '& .edge': { + '& text': { + fontFamily: theme.typography.fontFamily, + fill: theme.palette.text.primary, + }, + '& [stroke="black"]': { + stroke: theme.palette.text.primary, + }, + '& [fill="black"]': { + fill: theme.palette.text.primary, + }, + }, + ...createEdgeColor('UNKNOWN', theme.palette.text.secondary), + ...createEdgeColor('ERROR', theme.palette.error.main), + }, +})); -- cgit v1.2.3-70-g09d2