Merge branch 'main' into realTimeVisulization

app/src/styles/pages/realTimeViz.scss

@@ -7,7 +7,7 @@
   border-radius: 20px;
   box-shadow: $box-shadow-medium;
   width: calc(100% - (320px + 270px + 90px));
-  height: calc(100% - (200px + 80px));
+  height: calc(100% - (250px));
   position: absolute;
   top: 50%;
   left: calc(270px + 45px);
@@ -16,10 +16,25 @@
   transition: all 0.2s;
   z-index: #{$z-index-default};
 
-  .floating {
+  .realTime-viz-wrapper {
     width: 100%;
-    max-width: 250px;
-    min-height: 83px;
+    height: 100%;
+    position: relative;
+    z-index: -1;
+  }
+
+  .floating {
+
+
+    width: calc(var(--realTimeViz-container-width) * 0.2);
+    height: calc(var(--realTimeViz-container-width) * 0.05);
+
+    min-width: 250px;
+    max-width: 300px;
+
+    min-height: 83px !important;
+    // max-height: 100px !important;
+
     background: var(--background-color);
     border: 1.23px solid var(--border-color);
     box-shadow: 0px 4.91px 4.91px 0px #0000001c;
@@ -53,15 +68,16 @@
     display: flex;
     background-color: var(--background-color);
     position: absolute;
-    bottom: 10px;
+    bottom: 0px;
     left: 50%;
-    transform: translate(-50%, 0);
     gap: 6px;
-
     border-radius: 8px;
     max-width: 80%;
     overflow: auto;
     max-width: calc(100% - 500px);
+    min-width: 150px;
+    z-index: 3;
+    transform: translate(-50%, -10%);
 
     &::-webkit-scrollbar {
       display: none;
@@ -108,7 +124,8 @@
   }
 
   .zone-wrapper.bottom {
-    bottom: 210px;
+    bottom: var(--bottomWidth);
+    // bottom: 200px;
   }
 
   .content-container {
@@ -129,7 +146,7 @@
       display: flex;
       background-color: rgba(224, 223, 255, 0.5);
       position: absolute;
-      bottom: 10px;
+      // bottom: 10px;
       left: 50%;
       transform: translate(-50%, 0);
       gap: 6px;
@@ -181,6 +198,7 @@
     .panel-content {
       position: relative;
       height: 100%;
+      width: 100%;
       padding: 10px;
       display: flex;
       flex-direction: column;
@@ -193,15 +211,15 @@
 
       .chart-container {
         width: 100%;
-        height: 25% !important;
-        min-height: 150px;
+
         max-height: 100%;
-        // border: 1px dashed var(--background-color-gray);
+        border: 1px dashed var(--background-color-gray);
         border-radius: 8px;
         box-shadow: var(--box-shadow-medium);
         padding: 6px 0;
         background-color: var(--background-color);
         position: relative;
+        padding: 0 10px;
 
         .kebab {
           width: 30px;
@@ -283,16 +301,17 @@
     &.bottom-panel {
       left: 0;
       right: 0;
+      min-height: 150px;
 
       .panel-content {
         display: flex;
         flex-direction: row;
         height: 100%;
+        width: 100%;
+        min-height: 150px;
 
         .chart-container {
-          height: 100% !important;
-          width: 20%;
-          min-width: 150px;
+          min-width: 160px;
         }
       }
     }
@@ -309,29 +328,48 @@
       left: 0;
       top: 0;
       bottom: 0;
-
-      .chart-container {
-        width: 100%;
-        height: 180px;
-      }
     }
 
     &.right-panel {
       right: 0;
       top: 0;
       bottom: 0;
+    }
 
+    &.left-panel,
+    &.right-panel {
+      min-width: 150px;
+
+      .panel-content {
+        flex-direction: column;
+        width: 100%;
+
+        gap: 6px;
+
+        .chart-container {
+          width: 100%;
+          min-height: 150px;
+          max-height: 100%;
+          border-radius: 8px;
+          box-shadow: var(--box-shadow-medium);
+          padding: 6px 0;
+          background-color: var(--background-color);
+          position: relative;
+        }
+      }
     }
   }
 
   .panel.hidePanel {
-    opacity: 0;
+    pointer-events: none;
+    opacity: 0.1;
   }
 }
 
 .playingFlase {
   .zone-wrapper.bottom {
-    bottom: 300px;
+    bottom: var(--bottomWidth);
+    // bottom: 210px;
   }
 }
 
@@ -620,9 +658,6 @@
         }
       }
     }
-
-
-
   }
 }
 
@@ -713,7 +748,7 @@
 }
 
 .activeChart {
-  outline: 1px solid var(--accent-color);
+  outline: 2px solid var(--accent-color);
   z-index: 2 !important;
 }
 
@@ -725,14 +760,13 @@
 }
 
 .connectionSuccess {
-  outline-color: #43C06D;
+  outline-color: #43c06d;
 }
 
 .connectionFails {
   outline-color: #ffe3e0;
 }
 
-
 .editWidgetOptions {
   position: absolute;
   // top: 50%;