From bdb7e5be2c31c6e61bf273f09e5593f441ab16c9 Mon Sep 17 00:00:00 2001
From: Marwan Zaarab <marwan.zaarab@gmail.com>
Date: Thu, 25 Jan 2024 13:08:05 -0600
Subject: [PATCH] add styles to navbar module to make it sticky and visible
 when scrolling down the notebook

---
 src/components/Dashboard/tree/LeftSidebar.tsx |  1 -
 .../Dashboard/tree/NotebookTreeView.tsx       |  7 +-
 .../Notebook/navbar/Navbar.module.css         |  3 +
 websocket-load-test.yml                       | 86 +++++++++++++++++++
 4 files changed, 95 insertions(+), 2 deletions(-)
 create mode 100644 websocket-load-test.yml

diff --git a/src/components/Dashboard/tree/LeftSidebar.tsx b/src/components/Dashboard/tree/LeftSidebar.tsx
index 7b255e2..25d4c20 100644
--- a/src/components/Dashboard/tree/LeftSidebar.tsx
+++ b/src/components/Dashboard/tree/LeftSidebar.tsx
@@ -103,7 +103,6 @@ export default function LeftSidebar({ username, refetch, handleSelectedDocId }:
           position: 'fixed',
           left: 0,
           backgroundColor: theme === 'dark' ? '#121212' : '#fafafa',
-
           zIndex: 5
         }}>
         {isExpanded && (
diff --git a/src/components/Dashboard/tree/NotebookTreeView.tsx b/src/components/Dashboard/tree/NotebookTreeView.tsx
index 56177ec..922b5c0 100644
--- a/src/components/Dashboard/tree/NotebookTreeView.tsx
+++ b/src/components/Dashboard/tree/NotebookTreeView.tsx
@@ -97,7 +97,12 @@ export default function NotebookTreeView({
     <>
       <div style={{ display: 'flex', alignItems: 'center', padding: '0px 12px', justifyContent: 'space-between' }}>
         <h3>Workspace</h3>
-        <Switch checkedChildren='Dark' unCheckedChildren='Light' checked={theme === 'dark'} onChange={toggleTheme} />
+        <Switch
+          checkedChildren='Dark'
+          unCheckedChildren='Light'
+          checked={theme === 'dark'}
+          onChange={toggleTheme}
+        />
       </div>
       <Tree
         defaultExpandAll
diff --git a/src/components/Notebook/navbar/Navbar.module.css b/src/components/Notebook/navbar/Navbar.module.css
index 006a2ee..38a2ac4 100644
--- a/src/components/Notebook/navbar/Navbar.module.css
+++ b/src/components/Notebook/navbar/Navbar.module.css
@@ -1,9 +1,12 @@
 .header {
   display: flex;
+  position: sticky;
   align-items: center;
   justify-content: space-between;
   padding: 0 24px;
+  top: 0;
   height: 64px;
+  z-index: 1000;
 }
 
 .header > * {
diff --git a/websocket-load-test.yml b/websocket-load-test.yml
new file mode 100644
index 0000000..89c018b
--- /dev/null
+++ b/websocket-load-test.yml
@@ -0,0 +1,86 @@
+config:
+  target: 'wss://hp.mafishi.io/collab'
+  phases:
+    - duration: 60
+      arrivalRate: 5
+      rampTo: 20
+      name: 'Ramping up the load'
+    - duration: 120
+      arrivalRate: 20
+      name: 'Sustained load'
+  ws:
+    # Replace with actual token if required
+    headers:
+      Authorization: 'Bearer YOUR_ACCESS_TOKEN'
+
+scenarios:
+  - name: 'WebSocket Connection and Interaction'
+    flow:
+      - loop:
+          - function: 'connectWebSocket'
+          - think: 5
+          - function: 'editMarkdownCell'
+          - think: 10
+          - function: 'editCodeCell'
+          - think: 15
+          - function: 'navigateDashboard'
+          - think: 5
+        count: 10
+
+  - name: 'Concurrent Editing Simulation'
+    flow:
+      - loop:
+          - function: 'connectWebSocket'
+          - think: 5
+          - function: 'concurrentEditCell'
+          - think: 10
+        count: 20
+
+  - name: 'Connection Stability Test'
+    flow:
+      - loop:
+          - function: 'connectWebSocket'
+          - think: 2
+          - function: 'disconnectWebSocket'
+          - think: 1
+        count: 30
+
+# Custom functions simulating different user actions
+functions:
+  connectWebSocket:
+    # JavaScript function to establish WebSocket connection using Hocuspocus provider
+    js: |
+      function(context, events, done) {
+        var docID = '9c93ccb1-6154-4a05-a6c8-903d092d2956'; 
+        var url = `wss://hp.mafishi.io/collab/${docID}`;
+        var token = 'super-secret-token'; 
+
+        context.ws.connect(url, {
+          headers: {
+            Authorization: `Bearer ${token}`
+          },
+          onOpen: function(socket) {
+            console.log('WebSocket connection opened');
+            // Store the WebSocket connection in the context for other functions to use
+            context.ws = socket;
+            done();
+          },
+          onClose: function() {
+            console.log('WebSocket connection closed');
+          },
+          onError: function(error) {
+            console.error('WebSocket error:', error);
+            done(error);
+          }
+        });
+      }
+  editMarkdownCell:
+    # Add logic to simulate editing a markdown cell
+  editCodeCell:
+    # Add logic to simulate editing a code cell
+  navigateDashboard:
+    # Add logic to simulate dashboard navigation
+  concurrentEditCell:
+    # Add logic to simulate concurrent editing of a cell
+  disconnectWebSocket:
+    # Add logic to disconnect the WebSocket