Skip to content
This repository has been archived by the owner on Oct 20, 2023. It is now read-only.

Graph Updates: Labels, Anchor Mode, Colors, Styles #182

Merged
merged 12 commits into from
Sep 20, 2023
Prev Previous commit
Next Next commit
add more graph custom colors: foreground and background
  • Loading branch information
James Bradford committed Sep 13, 2023

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
commit 6b1d9da09198e70556db2c222b7736e38c8381f7
Original file line number Diff line number Diff line change
@@ -11,7 +11,7 @@ type NodePreviewProps = FlexProps &
};

export const NodePreview = observer<NodePreviewProps>(({ type, shape, text, color = 'default', size: _, ...props }) => (
<Flex align="center" gap="0.5ch" css={{ color: nodeColor[color].token }} {...props}>
<Flex align="center" gap="0.5ch" css={{ color: nodeColor[color].fgToken }} {...props}>
<NodeIcon {...{ type, shape, color }} />
{text && <Txt>– {text === 'color' ? color : shape}</Txt>}
</Flex>
7 changes: 2 additions & 5 deletions applications/client/src/views/Campaign/Graph/graph-styles.tsx
Original file line number Diff line number Diff line change
@@ -88,7 +88,7 @@ export const graphStyles = css`
}
}
circle {
stroke-width: 1px;
/* stroke-width: 1px; */
}

.${GCN.groupNode} {
@@ -146,7 +146,6 @@ export const graphStyles = css`
.${GCN.softwareNode}, .${GCN.serverNode} {
fill: ${GraphTokens.PresentFgColor};
stroke: ${GraphTokens.PresentBgColor};
r: 4px;

&.${GCN.past} {
fill: ${GraphTokens.PastFgColor};
@@ -157,16 +156,14 @@ export const graphStyles = css`

&.${GCN.selected} {
fill: ${GraphTokens.PreviewFgColor}; // not GraphTokens.SelectedFgColor
r: 5px;
}
&.${GCN.previewed} {
fill: ${GraphTokens.PreviewFgColor};
}
&.${GCN.selectedFocus} {
fill: ${GraphTokens.SelectedFocusFgColor};
stroke: ${GraphTokens.PreviewFgColor};
stroke-width: ${GraphTokens.SelectedThickness};
r: 6px;
stroke-width: ${GraphTokens.PreviewThickness};
filter: drop-shadow(0 0 1px ${CoreTokens.Colors.Black});
}
}
111 changes: 96 additions & 15 deletions applications/client/src/views/Campaign/Graph/node-colors.tsx
Original file line number Diff line number Diff line change
@@ -1,22 +1,88 @@
import { css } from '@emotion/react';
import { CoreTokens } from '@redeye/ui-styles';
import { RedEyeGraphClassNames as GCN } from '@redeye/graph';
import { Classes } from '@blueprintjs/core';

export const nodeColor = {
default: { className: 'defaultNode', token: CoreTokens.TextBody },
vermilion: { className: 'vermilionNode', token: CoreTokens.Colors.Vermilion3 },
red: { className: 'redNode', token: CoreTokens.Colors.Red3 },
rose: { className: 'roseNode', token: CoreTokens.Colors.Rose3 },
violet: { className: 'violetNode', token: CoreTokens.Colors.Violet3 },
indigo: { className: 'indigoNode', token: CoreTokens.Colors.Indigo3 },
// blue: { className: 'blueNode', token: CoreTokens.Colors.Blue3 }, // excluded because its the selection color
// cerulean: { className: 'ceruleanNode', token: CoreTokens.Colors.Cerulean3 }, // excluded because its almost blue
turquoise: { className: 'turquoiseNode', token: CoreTokens.Colors.Turquoise4 },
green: { className: 'greenNode', token: CoreTokens.Colors.Green4 },
forest: { className: 'forestNode', token: CoreTokens.Colors.Forest4 },
lime: { className: 'limeNode', token: CoreTokens.Colors.Lime4 },
gold: { className: 'goldNode', token: CoreTokens.Colors.Gold4 },
orange: { className: 'orangeNode', token: CoreTokens.Colors.Orange3 },
default: { className: 'defaultNode', token: CoreTokens.TextBody, fgToken: 'none', bgToken: 'none' },
vermilion: {
className: 'vermilionNode',
token: CoreTokens.Colors.Vermilion3,
fgToken: CoreTokens.Colors.Vermilion5,
bgToken: CoreTokens.Colors.Vermilion1,
},
red: {
className: 'redNode',
token: CoreTokens.Colors.Red3,
fgToken: CoreTokens.Colors.Red5,
bgToken: CoreTokens.Colors.Red1,
},
rose: {
className: 'roseNode',
token: CoreTokens.Colors.Rose3,
fgToken: CoreTokens.Colors.Rose5,
bgToken: CoreTokens.Colors.Rose1,
},
violet: {
className: 'violetNode',
token: CoreTokens.Colors.Violet3,
fgToken: CoreTokens.Colors.Violet5,
bgToken: CoreTokens.Colors.Violet1,
},
indigo: {
className: 'indigoNode',
token: CoreTokens.Colors.Indigo3,
fgToken: CoreTokens.Colors.Indigo5,
bgToken: CoreTokens.Colors.Indigo1,
},
/* blue: { // excluded because its the selection color
className: 'blueNode',
token: CoreTokens.Colors.Blue3,
fgToken: CoreTokens.Colors.Blue5,
bgToken: CoreTokens.Colors.Blue1,
},
cerulean: { // excluded because its almost blue
className: 'ceruleanNode',
token: CoreTokens.Colors.Cerulean3,
fgToken: CoreTokens.Colors.Cerulean5,
bgToken: CoreTokens.Colors.Cerulean1,
}, */
turquoise: {
className: 'turquoiseNode',
token: CoreTokens.Colors.Turquoise4,
fgToken: CoreTokens.Colors.Turquoise5,
bgToken: CoreTokens.Colors.Turquoise1,
},
green: {
className: 'greenNode',
token: CoreTokens.Colors.Green4,
fgToken: CoreTokens.Colors.Green5,
bgToken: CoreTokens.Colors.Green1,
},
forest: {
className: 'forestNode',
token: CoreTokens.Colors.Forest4,
fgToken: CoreTokens.Colors.Forest5,
bgToken: CoreTokens.Colors.Forest1,
},
lime: {
className: 'limeNode',
token: CoreTokens.Colors.Lime4,
fgToken: CoreTokens.Colors.Lime5,
bgToken: CoreTokens.Colors.Lime1,
},
gold: {
className: 'goldNode',
token: CoreTokens.Colors.Gold4,
fgToken: CoreTokens.Colors.Gold5,
bgToken: CoreTokens.Colors.Gold1,
},
orange: {
className: 'orangeNode',
token: CoreTokens.Colors.Orange3,
fgToken: CoreTokens.Colors.Orange5,
bgToken: CoreTokens.Colors.Orange1,
},
};

export type NodeColor = keyof typeof nodeColor;
@@ -27,13 +93,28 @@ const iNodeColorStyles = nodeColors
.filter((colorKey) => colorKey !== 'default')
.map(
(colorKey) => css`
text.${nodeColor[colorKey].className} {
&:not(.${GCN.superNodeCountLabel}) {
fill: ${nodeColor[colorKey].fgToken};
}
}

&.${nodeColor[colorKey].className}, .${nodeColor[colorKey].className} {
color: ${nodeColor[colorKey].token};
color: ${nodeColor[colorKey].fgToken};
&.${Classes.ICON} {
color: ${nodeColor[colorKey].token};
}

&.${GCN.softwareNode}, &.${GCN.serverNode} {
fill: ${nodeColor[colorKey].token};
}

&.${GCN.computerNode} {
stroke: ${nodeColor[colorKey].token};
&.${GCN.selectedFocus} {
stroke: ${nodeColor[colorKey].fgToken};
fill: ${nodeColor[colorKey].bgToken};
}
}
}
`
2 changes: 1 addition & 1 deletion packages/ui-styles/src/styles/tokens.ts
Original file line number Diff line number Diff line change
@@ -224,7 +224,7 @@ const darkThemeGraphAndTimelineCssVars = declareCssVars([
[GraphTokens.SelectedFocusFgColor, CoreTokens.Intent.Primary3],
[GraphTokens.SelectedFocusBgColor, CoreTokens.Intent.Primary1],
[GraphTokens.GroupNodeStrokeColor, CoreTokens.transparentWhite(0.03)],
[GraphTokens.TextOutlineColor, CoreTokens.transparentBlack(0.6)],
[GraphTokens.TextOutlineColor, CoreTokens.transparentBlack(0.8)],
]);

export const customCssVars = css`