feat: update stats panel.

Signed-off-by: Eugene Panteleymonchuk <[email protected]>
iotaledger · Feb 15, 2024 · df03dc8 · df03dc8
1 parent 563a896
commit df03dc8
Show file tree

Hide file tree

Showing 7 changed files with 87 additions and 105 deletions.
diff --git a/client/src/features/visualizer-threejs/Visualizer.scss b/client/src/features/visualizer-threejs/Visualizer.scss
@@ -83,78 +83,6 @@
         }
     }
 
-    .stats-panel-container {
-        display: flex;
-        //position: absolute;
-        z-index: 1;
-        //top: 90px !important;
-        //left: 20px !important;
-        //bottom: auto !important;
-        //justify-content: left !important;
-        align-items: center;
-        pointer-events: none;
-
-        .card--value.red {
-            color: var(--error);
-        }
-
-        .stats-panel {
-            background: var(--body-background);
-
-            .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 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;
-                }
-            }
-        }
-    }
-
     .info-panel {
         background: var(--body-background);
         display: flex;

diff --git a/client/src/features/visualizer-threejs/VisualizerInstance.tsx b/client/src/features/visualizer-threejs/VisualizerInstance.tsx
@@ -244,6 +244,7 @@ const VisualizerInstance: React.FC<RouteComponentProps<VisualizerRouteProps>> =
 
     return (
         <Wrapper
+            bps={bpsCounter.getBPS()}
             key={network}
             blocksCount={indexToBlockId.length}
             filter=""

diff --git a/client/src/features/visualizer-threejs/wrapper/KeyPanel.scss b/client/src/features/visualizer-threejs/wrapper/KeyPanel.scss
@@ -4,7 +4,7 @@
 @import "../../../scss/variables";
 @import "../../../scss/themes";
 
-.key-panel-container {
+.info-container {
     display: flex;
     position: absolute;
     z-index: 1;
@@ -15,18 +15,21 @@
     pointer-events: none;
     gap: 20px;
 
-    .key-panel {
+    .card {
         background: var(--body-background);
+        padding: 16px 32px;
+    }
+
+    .key-panel-list {
         display: flex;
         flex-direction: row;
         flex-wrap: wrap;
-        padding: 16px;
+        gap: 32px;
 
         .key-panel-item {
             display: flex;
             flex-direction: row;
             align-items: center;
-            margin: 0 16px;
 
             @include desktop-down {
                 width: 110px;
@@ -49,4 +52,67 @@
             }
         }
     }
+
+    .stats-panel-container {
+        display: flex;
+        z-index: 1;
+        align-items: center;
+        pointer-events: none;
+
+        .stats-panel {
+            background: var(--body-background);
+
+            .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 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;
+                }
+            }
+        }
+    }
 }
diff --git a/client/src/features/visualizer-threejs/wrapper/KeyPanel.tsx b/client/src/features/visualizer-threejs/wrapper/KeyPanel.tsx
@@ -4,7 +4,7 @@ import { BlockState } from "@iota/sdk-wasm-nova/web";
 import "./KeyPanel.scss";
 import { StatsPanel } from "~features/visualizer-threejs/wrapper/StatsPanel";
 
-export const KeyPanel: React.FC = () => {
+export const KeyPanel = ({ bps }: { bps: number }) => {
     const statuses: {
         label: string;
         state: BlockState;
@@ -43,8 +43,8 @@ export const KeyPanel: React.FC = () => {
     ];
 
     return (
-        <div className="key-panel-container">
-            <div className="card key-panel">
+        <div className="info-container">
+            <div className="card key-panel-list">
                 {statuses.map((s) => {
                     return (
                         <div className="key-panel-item" key={s.state}>
@@ -59,6 +59,7 @@ export const KeyPanel: React.FC = () => {
                     );
                 })}
             </div>
-          <StatsPanel blocksCount={0} network={'stardust'} />
+            <StatsPanel bps={bps} />
         </div>
-);
+    );
+};
diff --git a/client/src/features/visualizer-threejs/wrapper/StatsPanel.tsx b/client/src/features/visualizer-threejs/wrapper/StatsPanel.tsx
@@ -1,26 +1,12 @@
 import React from "react";
-import { useNetworkStats } from "~helpers/stardust/hooks/useNetworkStats";
-import Modal from "~app/components/Modal";
-
-export const StatsPanel: React.FC<{ readonly blocksCount: number; readonly network: string }> = ({ blocksCount, network }) => {
-    const [blocksPerSecond, confirmedBlocksPerSecond, confirmedBlocksPerSecondPercent] = useNetworkStats(network);
 
+export const StatsPanel = ({ bps }: { bps: number }) => {
     return (
         <div className="stats-panel-container">
-            <div className="card stats-panel">
-                <div className="card--content">
-
-                    <div className="stats-panel__info">
-                        {/*@ts-ignore*/}
-                        <div className="card--label">BPS <div style={{marginLeft: '2px'}}><Modal icon="info" /></div></div>
-                        <div className="card--value green">
-                            130
-                        </div>
-                    </div>
-                    <div className="stats-panel__info">
-                        <div className="card--label">Avg block time</div>
-                        <div className="card--value">10s</div>
-                    </div>
+            <div className="card">
+                <div className="stats-panel__info">
+                    <div className="card--label">BPS</div>
+                    <div className="card--value green">{parseInt(String(bps))}</div>
                 </div>
             </div>
         </div>

diff --git a/client/src/features/visualizer-threejs/wrapper/Wrapper.tsx b/client/src/features/visualizer-threejs/wrapper/Wrapper.tsx
@@ -5,22 +5,23 @@ import { INetwork } from "~/models/config/INetwork";
 import { KeyPanel } from "./KeyPanel";
 import mainHeader from "~assets/modals/visualizer/main-header.json";
 import { SelectedFeedInfo } from "./SelectedFeedInfo";
-import { StatsPanel } from "./StatsPanel";
 
 export const Wrapper = ({
     blocksCount,
+    bps,
     children,
     filter,
+    isEdgeRenderingEnabled,
     isPlaying,
     network,
     networkConfig,
     onChangeFilter,
     selectNode,
     selectedFeedItem,
-    setIsPlaying,
-    isEdgeRenderingEnabled,
     setEdgeRenderingEnabled,
+    setIsPlaying,
 }: {
+    readonly bps: number;
     readonly blocksCount: number;
     readonly children: React.ReactNode;
     readonly filter: string;
@@ -70,7 +71,7 @@ export const Wrapper = ({
         </div>
 
         {selectedFeedItem && <SelectedFeedInfo networkConfig={networkConfig} network={network} selectedFeedItem={selectedFeedItem} />}
-        <KeyPanel />
+        <KeyPanel bps={bps} />
     </div>
 );
 

diff --git a/client/src/helpers/stardust/hooks/useNetworkStats.ts b/client/src/helpers/stardust/hooks/useNetworkStats.ts
@@ -40,7 +40,6 @@ export function useNetworkStats(network: string): [string, string, string, numbe
                     includeHistory: true,
                 })
                 .then((ips) => {
-
                     const itemsPerSecond = ips.itemsPerSecond ?? 0;
                     const confirmedItemsPerSecond = ips.confirmedItemsPerSecond ?? 0;
                     const confirmedRate = ips.confirmationRate ? (ips.confirmationRate > 100 ? 100 : ips.confirmationRate) : 0;