Merge pull request #126 from FormidableLabs/timeline-network-visualize

Timeline network visualization

cosmos.config.json

@@ -1,5 +1,5 @@
 {
-  "watchDirs": ["src/panel"],
+  "watchDirs": ["src/panel/!__image_snapshots__"],
   "webpack": {
     "configPath": "",
     "overridePath": "cosmos.override.js"

docker-compose.yml

@@ -6,7 +6,7 @@ services:
     working_dir: /app
     volumes:
       - .:/app
-      - node_modules:/app/node_modules
+      - node_modules:/app/node_modules/
     entrypoint: /bin/sh -c
     command:
       - yarn --frozen-lockfile && yarn cosmos
@@ -22,7 +22,7 @@ services:
       - USER=root
     entrypoint: ["/bin/bash", "-c"]
     command:
-      - npx wait-on http://cosmos:5000 && yarn run visual-regression-exec
+      - npx wait-on http://cosmos:5000 && yarn jest --clearCache && yarn run visual-regression-exec
     depends_on:
       - cosmos
 

package.json

@@ -95,9 +95,8 @@
     "@types/styled-components": "^5.0.1",
     "@typescript-eslint/eslint-plugin": "^2.25.0",
     "@typescript-eslint/parser": "^2.25.0",
-    "@urql/core": "1.11.0-debug.0",
+    "@urql/core": "https://pkg.csb.dev/FormidableLabs/urql/commit/888a7149/@urql/core",
     "@urql/devtools": "1.0.0-dev.1",
-    "@urql/core": "1.11.0-debug.0",
     "awesome-typescript-loader": "^5.2.1",
     "babel-jest": "^25.2.1",
     "babel-loader": "^8.1.0",

src/panel/context/Timeline.tsx

@@ -24,7 +24,7 @@ interface TimelineContextValue {
   startTime: number;
 }
 
-const TimelineContext = createContext<TimelineContextValue>(null as any);
+export const TimelineContext = createContext<TimelineContextValue>(null as any);
 
 export const useTimelineContext = () => useContext(TimelineContext);
 

src/panel/cosmos.decorator.tsx

@@ -20,11 +20,11 @@ const GlobalStyle = createGlobalStyle`
   }
 `;
 
-const ThemeDecorator: FC = (props) => (
+export const ThemeDecorator: FC = (props) => (
   <ThemeProvider {...props} theme={theme} />
 );
 
-const DevtoolsDecorator: FC = (props) => (
+export const DevtoolsDecorator: FC = (props) => (
   <DevtoolsContext.Provider
     {...props}
     value={{

src/panel/pages/timeline/Timeline.fixture.tsx

@@ -14,6 +14,16 @@ const defaultEvents: DebugEvent<string>[] = [
       },
     },
   },
+  {
+    type: "debug",
+    data: {
+      type: "fetchRequest",
+      message: "An update occured",
+      operation: {
+        key: 1,
+      },
+    },
+  },
   {
     type: "debug",
     data: {
@@ -24,6 +34,16 @@ const defaultEvents: DebugEvent<string>[] = [
       },
     },
   },
+  {
+    type: "debug",
+    data: {
+      type: "fetchResponse",
+      message: "The fetch request succeeded",
+      operation: {
+        key: 1,
+      },
+    },
+  },
   {
     type: "debug",
     data: {
@@ -64,6 +84,26 @@ const defaultEvents: DebugEvent<string>[] = [
       },
     },
   },
+  {
+    type: "debug",
+    data: {
+      type: "fetchRequest",
+      message: "An request was triggered",
+      operation: {
+        key: 2,
+      },
+    },
+  },
+  {
+    type: "debug",
+    data: {
+      type: "fetchError",
+      message: "An request errored",
+      operation: {
+        key: 2,
+      },
+    },
+  },
   {
     type: "debug",
     data: {

src/panel/pages/timeline/components/TimelineDuration.fixture.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import styled from "styled-components";
+import {
+  TimelineAliveDuration,
+  TimelineNetworkDuration,
+} from "./TimelineDuration";
+
+const Wrapper = styled.div`
+  display: flex;
+  padding: 100px;
+  background: ${(props) => props.theme.dark["0"]};
+  flex-grow: 1;
+
+  > :first-child {
+    width: 100px;
+  }
+`;
+
+export default {
+  "Alive: basic": (
+    <Wrapper>
+      <TimelineAliveDuration data-snapshot />
+    </Wrapper>
+  ),
+  "Network: fetching": (
+    <Wrapper>
+      <TimelineNetworkDuration data-snapshot state="fetching" />
+    </Wrapper>
+  ),
+  "Network: success": (
+    <Wrapper>
+      <TimelineNetworkDuration data-snapshot state="success" />
+    </Wrapper>
+  ),
+  "Network: error": (
+    <Wrapper>
+      <TimelineNetworkDuration data-snapshot state="error" />
+    </Wrapper>
+  ),
+};

src/panel/pages/timeline/components/TimelineDuration.tsx

@@ -1,6 +1,43 @@
 import styled from "styled-components";
+import React, { FC, ComponentProps } from "react";
+import { useTooltip, TimelineTooltip } from "./TimelineTooltip";
 
-export const TimelineDuration = styled.div`
+export const TimelineAliveDuration = styled.div`
   height: 20px;
   background: ${(props) => props.theme.dark["+1"]};
 `;
+
+type NetworkState = "fetching" | "success" | "error";
+
+export const NetworkDuration = styled.div`
+  height: 10px;
+
+  &[data-state="fetching"] {
+    background: ${(props) => props.theme.blue["-1"]};
+  }
+
+  &[data-state="success"] {
+    background: ${(props) => props.theme.green["0"]};
+  }
+
+  &[data-state="error"] {
+    background: ${(props) => props.theme.red["0"]};
+  }
+`;
+
+export const TimelineNetworkDuration: FC<
+  { state: NetworkState } & ComponentProps<typeof NetworkDuration>
+> = ({ state, ...props }) => {
+  const { ref, tooltipProps, isVisible } = useTooltip();
+
+  return (
+    <>
+      <NetworkDuration data-state={state} ref={ref} {...props} />
+      {isVisible && (
+        <TimelineTooltip {...tooltipProps}>
+          {`Network state: ${state}`}
+        </TimelineTooltip>
+      )}
+    </>
+  );
+};

src/panel/pages/timeline/components/TimelineNetworkDuration.tsx

@@ -0,0 +1,38 @@
+import React, { FC, ComponentProps } from "react";
+import styled from "styled-components";
+import { useTooltip, TimelineTooltip } from "./TimelineTooltip";
+
+type NetworkState = "fetching" | "success" | "error";
+
+export const NetworkDuration = styled.div`
+  height: 10px;
+
+  &[data-state="fetching"] {
+    background: ${(props) => props.theme.blue["-1"]};
+  }
+
+  &[data-state="success"] {
+    background: ${(props) => props.theme.green["0"]};
+  }
+
+  &[data-state="error"] {
+    background: ${(props) => props.theme.red["0"]};
+  }
+`;
+
+export const TimelineNetworkDuration: FC<
+  { state: NetworkState } & ComponentProps<typeof NetworkDuration>
+> = ({ state, ...props }) => {
+  const { ref, tooltipProps, isVisible } = useTooltip();
+
+  return (
+    <>
+      <NetworkDuration data-state={state} ref={ref} {...props} />
+      {isVisible && (
+        <TimelineTooltip {...tooltipProps}>
+          {`Network state: ${state}`}
+        </TimelineTooltip>
+      )}
+    </>
+  );
+};