feat: improve stack distinction

packages/react-navigation-visualizer/webui/src/NavigationTree.tsx

@@ -51,6 +51,7 @@ export function NavigationTree({ logs }: Props) {
       </Layout.Content>
       {hasCurrentItem ? (
         <Sidebar
+          Legend={<Legend />}
           action={currentNavigationItem.action}
           state={currentNavigationItem.state}
           stack={currentNavigationItem.stack}
@@ -86,17 +87,28 @@ const HalfContent = styled.div({
 
 const Spacer = styled.div({
   height: 4,
+  width: 4,
 });
 
 const LeafContainer = styled.div(({ theme: antdTheme }) => ({
   display: 'flex',
+  flex: 1,
   backgroundColor: antdTheme.token?.colorPrimary,
   borderRadius: 4,
   alignItems: 'center',
   justifyContent: 'center',
   padding: 8,
 }));
 
+const SelectedLeafContainer = styled.div({
+  display: 'flex',
+  flex: 1,
+  padding: 4,
+  border: 'dashed',
+  borderRadius: 4,
+  borderWidth: 2,
+});
+
 const LeafTitle = styled(Typography.Text)({
   color: 'white',
 });
@@ -110,12 +122,15 @@ const Leaf = ({
   isSelectedTab?: boolean;
   color: string;
 }) => {
+  const Wrapper = isSelectedTab ? SelectedLeafContainer : React.Fragment;
   return (
-    <LeafContainer style={{ backgroundColor: color }}>
-      <LeafTitle style={{ textDecoration: isSelectedTab ? 'underline' : 'none' }}>
-        {title}
-      </LeafTitle>
-    </LeafContainer>
+    <Wrapper style={{ borderColor: color }}>
+      <LeafContainer style={{ backgroundColor: color }}>
+        <LeafTitle style={{ textDecoration: isSelectedTab ? 'underline' : 'none' }}>
+          {title}
+        </LeafTitle>
+      </LeafContainer>
+    </Wrapper>
   );
 };
 
@@ -126,14 +141,26 @@ const NodeContainer = styled.div(({ theme: antdTheme }) => ({
   borderWidth: 1,
   border: 'solid',
   borderColor: antdTheme.token?.colorPrimary,
+  borderTopWidth: 0,
+  borderTopLeftRadius: 0,
+  borderTopRightRadius: 0,
   padding: 8,
+  paddingTop: 4,
 }));
 
 const NodeTitle = styled(Typography)(({ theme }) => ({
   color: theme.token?.colorPrimary,
   alignSelf: 'flex-start',
 }));
 
+const TabContainer = styled.div({
+  display: 'flex',
+  flex: 1,
+  flexDirection: 'row',
+  alignItems: 'center',
+  justifyContent: 'space-around',
+});
+
 const Node = ({
   name,
   state,
@@ -150,25 +177,28 @@ const Node = ({
 
   const color = generateColor(state.key);
 
+  const StackWrapper = state.type === 'tab' ? TabContainer : React.Fragment;
+
   return (
     <NodeContainer style={{ borderColor: color }}>
-      {routes.toReversed().map((route, index) => (
-        <React.Fragment key={index}>
-          {route.state?.routes && route.state.routes.length ? (
-            <Node name={route.name} state={route.state} parentColor={color} />
-          ) : (
-            <Leaf
-              title={route.name}
-              isSelectedTab={
-                state.type === 'tab' && state.index === state.routes.length - 1 - index
-              }
-              color={color}
-            />
-          )}
-          <Spacer />
-        </React.Fragment>
-      ))}
-      <Spacer />
+      <StackWrapper>
+        {routes.toReversed().map((route, index) => (
+          <React.Fragment key={index}>
+            {route.state?.routes && route.state.routes.length ? (
+              <Node name={route.name} state={route.state} parentColor={color} />
+            ) : (
+              <Leaf
+                title={route.name}
+                isSelectedTab={
+                  state.type === 'tab' && state.index === state.routes.length - 1 - index
+                }
+                color={color}
+              />
+            )}
+            {index < routes.length - 1 ? <Spacer /> : null}
+          </React.Fragment>
+        ))}
+      </StackWrapper>
       <NodeTitle style={{ color }}>{name}</NodeTitle>
     </NodeContainer>
   );
@@ -184,7 +214,7 @@ const generateColor = (key: string) => {
     return colorMap[key];
   }
 
-  currentHue = (currentHue + 9) % 360;
+  currentHue = (currentHue + 15) % 360;
   const newColor = `hsl(${currentHue}, 70%, 50%)`;
 
   colorMap[key] = newColor;
@@ -193,3 +223,27 @@ const generateColor = (key: string) => {
 
   return newColor;
 };
+
+const Legend = () => {
+  return (
+    <div style={{ padding: 12 }}>
+      <NodeContainer style={{ borderColor: 'hsl(0, 70%, 50%)' }}>
+        <Leaf title="Screen" color="hsl(0, 70%, 50%)" />
+        <div style={{ height: 4 }} />
+        <NodeTitle style={{ color: 'hsl(0, 70%, 50%)' }}>Stack Navigator</NodeTitle>
+      </NodeContainer>
+      <div style={{ height: 12 }} />
+      <NodeContainer style={{ borderColor: 'hsl(0, 70%, 50%)' }}>
+        <div style={{ display: 'flex', flexDirection: 'row' }}>
+          <Leaf title="Unselected Tab" color="hsl(0, 70%, 50%)" />
+          <div style={{ width: 4 }} />
+          <SelectedLeafContainer style={{ borderColor: 'hsl(0, 70%, 50%)' }}>
+            <Leaf title="Selected Tab" color="hsl(0, 70%, 50%)" />
+          </SelectedLeafContainer>
+        </div>
+        <div style={{ height: 4 }} />
+        <NodeTitle style={{ color: 'hsl(0, 70%, 50%)' }}>Tab Navigator</NodeTitle>
+      </NodeContainer>
+    </div>
+  );
+};

packages/react-navigation-visualizer/webui/src/Sidebar.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
-import ReactJson from 'react-json-view';
 import { Layout } from 'antd';
+import ReactJson from 'react-json-view';
 
 import * as React from 'react';
 
@@ -11,10 +11,12 @@ export function Sidebar({
   action,
   state,
   stack,
+  Legend,
 }: {
   action: object;
   state: object | undefined;
   stack?: string | undefined;
+  Legend?: React.ReactNode;
 }) {
   return (
     <Layout.Sider
@@ -25,7 +27,7 @@ export function Sidebar({
         padding: `0 ${theme.space.small}px`,
         borderRadius: theme.borderRadius,
         overflow: 'auto',
-        height: '100vh'
+        height: '100vh',
       }}>
       {stack ? (
         <>
@@ -77,6 +79,12 @@ export function Sidebar({
           </Code>
         </>
       ) : null}
+      {Legend && (
+        <>
+          <Title4>Legend</Title4>
+          {Legend}
+        </>
+      )}
       <Title4>Action</Title4>
       <ReactJson src={action} collapsed />
       <Title4>State</Title4>