feat: colorize text nodes

src/components/Graph/CustomNode/ObjectNode.tsx

@@ -13,17 +13,14 @@ type RowProps = {
 };
 
 const Row = ({ val, x, y, index }: RowProps) => {
+  const key = JSON.stringify(val);
+  const rowKey = JSON.stringify(val[0]).replaceAll('"', "");
+  const rowValue = JSON.stringify(val[1]);
+
   return (
-    <Styled.StyledRow
-      data-key={JSON.stringify(val)}
-      data-x={x}
-      data-y={y + index * 17.8}
-      $type={JSON.stringify(val[1])}
-    >
-      <Styled.StyledKey $type="object">
-        {JSON.stringify(val[0]).replaceAll('"', "")}:{" "}
-      </Styled.StyledKey>
-      <TextRenderer>{JSON.stringify(val[1])}</TextRenderer>
+    <Styled.StyledRow $value={rowValue} data-key={key} data-x={x} data-y={y + index * 17.8}>
+      <Styled.StyledKey $type="object">{rowKey}: </Styled.StyledKey>
+      <TextRenderer>{rowValue}</TextRenderer>
     </Styled.StyledRow>
   );
 };

src/components/Graph/CustomNode/TextNode.tsx

@@ -59,6 +59,7 @@ const Node: React.FC<CustomNodeProps> = ({ node, x, y, hasCollapse = false }) =>
   const collapseNodes = useGraph(state => state.collapseNodes);
   const isExpanded = useGraph(state => state.collapsedParents.includes(id));
   const isImage = imagePreview && isContentImage(text as string);
+  const value = JSON.stringify(text).replaceAll('"', "");
 
   const handleExpand = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation();
@@ -81,8 +82,8 @@ const Node: React.FC<CustomNodeProps> = ({ node, x, y, hasCollapse = false }) =>
           data-key={JSON.stringify(text)}
           $hasCollapse={isParent && hideCollapse}
         >
-          <Styled.StyledKey $parent={isParent} $type={type}>
-            <TextRenderer>{JSON.stringify(text).replaceAll('"', "")}</TextRenderer>
+          <Styled.StyledKey $value={value} $parent={isParent} $type={type}>
+            <TextRenderer>{value}</TextRenderer>
           </Styled.StyledKey>
           {isParent && childrenCount > 0 && showChildrenCount && (
             <Styled.StyledChildrenCount>({childrenCount})</Styled.StyledChildrenCount>

src/components/Graph/CustomNode/styles.tsx

@@ -1,23 +1,29 @@
 import styled, { DefaultTheme } from "styled-components";
-import { NodeType } from "jsonc-parser";
 import { LinkItUrl } from "react-linkify-it";
 import { firaMono } from "src/constants/fonts";
 
-function getTypeColor(value: string, theme: DefaultTheme) {
-  if (!Number.isNaN(+value)) return theme.NODE_COLORS.INTEGER;
-  if (value === "true") return theme.NODE_COLORS.BOOL.TRUE;
-  if (value === "false") return theme.NODE_COLORS.BOOL.FALSE;
-  if (value === "null") return theme.NODE_COLORS.NULL;
-  return theme.NODE_COLORS.NODE_VALUE;
-}
+type TextColorFn = {
+  theme: DefaultTheme;
+  $type?: string;
+  $value?: string;
+  $parent?: boolean;
+};
 
-function getKeyColor(theme: DefaultTheme, parent: boolean, type: NodeType) {
-  if (parent) {
-    if (type === "array") return theme.NODE_COLORS.PARENT_ARR;
-    return theme.NODE_COLORS.PARENT_OBJ;
-  }
-  if (type === "object") return theme.NODE_COLORS.NODE_KEY;
-  return theme.NODE_COLORS.TEXT;
+function getTextColor({ $value, $type, $parent, theme }: TextColorFn) {
+  // per type
+  if ($parent && $type === "array") return theme.NODE_COLORS.PARENT_ARR;
+  if ($parent && $type === "object") return theme.NODE_COLORS.PARENT_OBJ;
+  if ($type === "object") return theme.NODE_COLORS.NODE_KEY;
+  if ($type === "array") return theme.NODE_COLORS.NODE_VALUE;
+
+  // per value
+  if ($value && !Number.isNaN(+$value)) return theme.NODE_COLORS.INTEGER;
+  if ($value === "true") return theme.NODE_COLORS.BOOL.TRUE;
+  if ($value === "false") return theme.NODE_COLORS.BOOL.FALSE;
+  if ($value === "null") return theme.NODE_COLORS.NULL;
+
+  // default
+  return theme.NODE_COLORS.NODE_VALUE;
 }
 
 export const StyledLinkItUrl = styled(LinkItUrl)`
@@ -57,20 +63,21 @@ export const StyledForeignObject = styled.foreignObject<{ $isObject?: boolean }>
   }
 `;
 
-export const StyledKey = styled.span<{ $parent?: boolean; $type?: NodeType }>`
+export const StyledKey = styled.span<{ $parent?: boolean; $type: string; $value?: string }>`
   display: inline;
   flex: 1;
-  color: ${({ theme, $type = "null", $parent = false }) => getKeyColor(theme, $parent, $type)};
+  color: ${({ theme, $type, $parent = false, $value = "" }) =>
+    getTextColor({ $parent, $type, $value, theme })};
   font-size: ${({ $parent }) => $parent && "14px"};
   overflow: hidden;
   text-overflow: ellipsis;
   padding: ${({ $type }) => $type !== "object" && "10px"};
   white-space: nowrap;
 `;
 
-export const StyledRow = styled.span<{ $type: string }>`
+export const StyledRow = styled.span<{ $value: string }>`
   padding: 0 10px;
-  color: ${({ theme, $type }) => getTypeColor($type, theme)};
+  color: ${({ theme, $value }) => getTextColor({ $value, theme })};
   display: block;
   overflow: hidden;
   text-overflow: ellipsis;