feat: kick off vivagraph.

client/src/app/routes.tsx

@@ -46,7 +46,7 @@ import StardustStatisticsPage from "./routes/stardust/statistics/StatisticsPage"
 import NovaStatisticsPage from "./routes/nova/statistics/StatisticsPage";
 import StardustTransactionPage from "./routes/stardust/TransactionPage";
 import { Visualizer as StardustVisualizer } from "./routes/stardust/Visualizer";
-import NovaVisualizer from "../features/visualizer-threejs/NovaVisualizer";
+import Visualizer from "./routes/nova/Visualizer";
 import StreamsV0 from "./routes/StreamsV0";
 import { StreamsV0RouteProps } from "./routes/StreamsV0RouteProps";
 import { VisualizerRouteProps } from "./routes/VisualizerRouteProps";
@@ -180,7 +180,7 @@ const buildAppRoutes = (protocolVersion: string, withNetworkContext: (wrappedCom
     const novaRoutes = [
         <Route exact path="/:network" key={keys.next().value} component={NovaLanding} />,
         <Route path="/:network/addr/:address" key={keys.next().value} component={NovaAddressPage} />,
-        <Route path="/:network/visualizer/" key={keys.next().value} component={NovaVisualizer} />,
+        <Route path="/:network/visualizer/" key={keys.next().value} component={Visualizer} />,
         <Route path="/:network/block/:blockId" key={keys.next().value} component={NovaBlockPage} />,
         <Route path="/:network/output/:outputId" key={keys.next().value} component={NovaOutputPage} />,
         <Route path="/:network/search/:query?" key={keys.next().value} component={NovaSearch} />,

client/src/app/routes/nova/Visualizer.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+import { RouteComponentProps } from "react-router-dom";
+import { useGetThemeMode } from "~/helpers/hooks/useGetThemeMode";
+import VisualizerInstance from "~features/visualizer-vivagraph/VisualizerInstance";
+import { VisualizerRouteProps } from "~app/routes/VisualizerRouteProps";
+
+export default function Visualizer(props: RouteComponentProps<VisualizerRouteProps>): React.JSX.Element {
+    const theme = useGetThemeMode();
+
+    return <VisualizerInstance key={theme} {...props} />;
+}

client/src/features/visualizer-threejs/wrapper/KeyPanel.tsx

@@ -3,7 +3,7 @@ import { BlockState } from "@iota/sdk-wasm-nova/web";
 import { SEARCH_RESULT_COLOR, THEME_BLOCK_COLORS } from "../constants";
 import StatsPanel from "~features/visualizer-threejs/wrapper/StatsPanel";
 import { ThemeMode } from "../enums";
-import ColorPanel from "./ColorPanel";
+import ColorPanel from "~features/visualizer-vivagraph/components/ColorPanel";
 import "./KeyPanel.scss";
 
 export const KeyPanel = ({ network, themeMode }: { network: string; themeMode: ThemeMode }) => {

client/src/features/visualizer-vivagraph/Visualizer.scss

@@ -0,0 +1,180 @@
+@import "../../scss/fonts";
+@import "../../scss/mixins";
+@import "../../scss/media-queries";
+@import "../../scss/variables";
+@import "../../scss/themes";
+
+.visualizer-nova {
+    position: relative;
+    margin: 16px 40px;
+
+    .heading {
+        min-width: 230px;
+    }
+
+    @include phone-down {
+        margin: 20px;
+    }
+
+    .search-filter {
+        flex: 1;
+        margin-bottom: 16px;
+
+        @include tablet-down {
+            display: none;
+        }
+
+        .card--content {
+            padding: 8px 16px;
+        }
+
+        button {
+            white-space: nowrap;
+        }
+    }
+
+    .graph-border {
+        display: flex;
+        position: relative;
+        flex: 1;
+        align-items: stretch;
+        justify-content: stretch;
+        height: 80vh;
+        overflow: hidden;
+        border: 1px solid var(--input-border-color);
+        border-radius: 6px;
+
+        .viva {
+            position: relative;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: var(--stardust-visualizer-bg);
+        }
+
+        .selected-node {
+            @include font-size(12px);
+
+            position: absolute;
+            z-index: 1;
+            margin: 5px;
+            background-color: $white;
+            color: var(--link-highlight);
+            font-family: $metropolis;
+            word-break: break-all;
+        }
+
+        .action-panel-container {
+            display: flex;
+            position: absolute;
+            z-index: 2;
+            top: 20px;
+            right: 20px;
+
+            .pause-button {
+                padding: 6px;
+                color: var(--header-icon-color);
+
+                &:hover {
+                    color: var(--link-highlight);
+                }
+            }
+        }
+    }
+
+    .info-panel {
+        background: var(--body-background);
+        display: flex;
+        position: absolute;
+        z-index: 2;
+        top: 150px;
+        right: 20px;
+        width: 320px;
+        overflow: visible;
+
+        @include tablet-down {
+            top: 140px;
+            width: 46%;
+        }
+
+        @include phone-down {
+            top: 200px;
+            left: 10px;
+            width: 60%;
+        }
+
+        button {
+            position: absolute;
+            top: 8px;
+            right: 8px;
+        }
+
+        .card--content {
+            padding: 20px 30px;
+
+            .card--value,
+            .card--label {
+                align-items: center;
+
+                @include phone-down {
+                    .block-tangle-state__confirmed {
+                        text-indent: -9999px;
+                        padding: 0 5px;
+
+                        &::before {
+                            content: "\2713";
+                            text-indent: 0px;
+                            color: var(--mint-green-bg);
+                            font-size: 16px;
+                            font-weight: bold;
+                        }
+                    }
+
+                    .blocks-tangle-state .block-tangle-state {
+                        margin-right: 0;
+                        padding: 0 5px;
+                        .tooltip .children {
+                            &::before {
+                                content: "\2717";
+                                padding-top: 4px;
+                                color: $error;
+                                font-size: 16px;
+                                font-weight: bold;
+                            }
+                            span {
+                                display: none;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        .tooltip {
+            .wrap {
+                width: 180px;
+            }
+        }
+
+        .info-panel__dropdown {
+            .card--content__input--dropdown {
+                display: none;
+
+                @include phone-down {
+                    display: block;
+                }
+            }
+        }
+
+        .info-panel__reattachments {
+            @include phone-down {
+                display: none;
+
+                &.info-panel__reattachments--opened {
+                    display: block;
+                }
+            }
+        }
+    }
+}

client/src/features/visualizer-vivagraph/VisualizerInstance.tsx

@@ -0,0 +1,44 @@
+import React, {
+    // useEffect,
+    useRef,
+} from "react";
+import { RouteComponentProps } from "react-router-dom";
+import { VisualizerRouteProps } from "~app/routes/VisualizerRouteProps";
+import { useGetThemeMode } from "~/helpers/hooks/useGetThemeMode";
+import { useNetworkConfig } from "~helpers/hooks/useNetworkConfig";
+import { Wrapper } from "./components/Wrapper";
+import "./Visualizer.scss";
+import { useFeed } from "~features/visualizer-vivagraph/hooks/useFeed";
+
+const VisualizerInstance: React.FC<RouteComponentProps<VisualizerRouteProps>> = ({
+    match: {
+        params: { network },
+    },
+}) => {
+
+    const [networkConfig] = useNetworkConfig(network);
+    const themeMode = useGetThemeMode();
+    const { graphElement, itemCount } = useFeed(network);
+
+    return (
+        <Wrapper
+            key={network}
+            blocksCount={itemCount}
+            network={network}
+            networkConfig={networkConfig}
+            selectNode={() => {}}
+            selectedFeedItem={null}
+            themeMode={themeMode}
+            searchValue={""}
+            onChangeSearch={(value) => {}}
+            isEdgeRenderingEnabled={false}
+            setEdgeRenderingEnabled={(checked) => {}}
+            isPlaying={false}
+            setIsPlaying={() => {}}
+        >
+            <div className="viva" onClick={() => {}} ref={graphElement} />
+        </Wrapper>
+    );
+};
+
+export default VisualizerInstance;

client/src/features/visualizer-vivagraph/components/KeyPanel.scss

@@ -0,0 +1,120 @@
+@import "../../../scss/fonts";
+@import "../../../scss/mixins";
+@import "../../../scss/media-queries";
+@import "../../../scss/variables";
+@import "../../../scss/themes";
+
+.info-container {
+    display: flex;
+    position: absolute;
+    z-index: 1;
+    right: 30px;
+    bottom: 10px;
+    left: 30px;
+    justify-content: center;
+    pointer-events: none;
+    gap: 20px;
+
+    .card {
+        background: var(--body-background);
+        padding: 16px 32px;
+    }
+
+    .key-panel-list {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 32px;
+
+        .key-panel-item {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+
+            @include desktop-down {
+                width: 110px;
+                margin: 0;
+            }
+
+            .key-marker {
+                width: 12px;
+                height: 12px;
+                margin-right: 10px;
+                border-radius: 50%;
+            }
+
+            .key-panel-item-multi-color {
+                display: flex;
+                flex-direction: row;
+                .key-marker:not(:last-of-type) {
+                    margin-right: 4px;
+                }
+            }
+
+            .key-label {
+                @include font-size(14px);
+
+                color: var(--body-color);
+                font-family: $metropolis;
+                font-weight: 500;
+            }
+        }
+    }
+
+    .stats-panel-container {
+        display: flex;
+        z-index: 1;
+        align-items: center;
+        pointer-events: none;
+
+        .card--label {
+            justify-content: flex-start;
+        }
+        .card--content {
+            padding: 0;
+        }
+        .stats-panel__info {
+            justify-content: center;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+
+        @include tablet-down {
+            top: 60px;
+            left: 20px;
+            bottom: auto;
+            justify-content: left;
+
+            .stats-panel {
+                .card--value,
+                .card--label {
+                    text-align: left;
+                }
+                .card--label {
+                    justify-content: flex-start;
+                }
+                .card--content {
+                    padding: 0;
+                }
+                .stats-panel__info {
+                    padding: 0 10px;
+                    display: inline-block;
+                }
+            }
+        }
+
+        @include phone-down {
+            left: 10px;
+            .stats-panel {
+                .card--value,
+                .card--label {
+                    font-size: 12px;
+                }
+                .stats-panel__info:last-of-type {
+                    display: block;
+                }
+            }
+        }
+    }
+}