updated data panel and added zones

frontend/src/assets/styles/pages/_realTimeViz.scss

@@ -38,6 +38,34 @@
         height: 600px;
         background-color: rgb(235, 235, 235);
         margin: 0 30px;
+
+        .zoon-wrapper {
+            display: flex;
+            background-color: #E0DFFF80;
+            position: absolute;
+            bottom: 10px;
+            left: 50%;
+            transform: translate(-50%, 0);
+            gap: 6px;
+            padding: 4px;
+            border-radius: 8px;
+            max-width: 80%;
+            overflow: auto;
+
+            &::-webkit-scrollbar {
+                display: none;
+            }
+
+            .zone {
+                width: auto;
+                background-color: #FCFDFD;
+                border-radius: 6px;
+                padding: 4px 8px;
+                white-space: nowrap;
+            }
+        }
+
+
     }
 
     // + button
@@ -388,6 +416,10 @@
     flex-direction: column;
     gap: 5px;
     align-items: center;
+
+    .active {
+        // background-color: red;
+    }
 }
 
 .icon {
@@ -426,6 +458,7 @@
     .extra-buttons {
         display: flex;
         flex-direction: row;
+
     }
 }