Improved visualization

Author: Liototo

packages/collaboration-extension/src/collaboration.ts

@@ -194,14 +194,14 @@ export const rtcPanelPlugin: JupyterFrontEndPlugin<void> = {
     app.shell.add(chatPanel, 'left', { rank: 301 });
 
     const chatbox = new Chatbox(user, awarenessProvider, roles);
-
     chatbox.title.label = trans.__('Chat with collaborators');
     chatPanel.addWidget(chatbox);
 
-    const pollTab = new PollList(user, awarenessProvider, roles);
-
-    pollTab.title.label = trans.__('Polls');
-    chatPanel.addWidget(pollTab);
+    setTimeout(() => {
+      const pollTab = new PollList(user, awarenessProvider, roles);
+      pollTab.title.label = trans.__('Polls');
+      chatPanel.addWidget(pollTab);
+    }, 1000);
 
   }
 };

packages/collaboration/src/activitydotplot.tsx

@@ -14,6 +14,8 @@ export const ActivityDotPlot: React.FC<ActivityDisplayComponentProps> = ({tracke
 
     const [state, setState] = React.useState<SimpleUser[][]>([]);
 
+    const MIN_HORIZONTAL_RANGE = 20;
+
     React.useEffect(() => {
 
         const updateCounts = (notebook: Notebook) => {
@@ -59,17 +61,17 @@ export const ActivityDotPlot: React.FC<ActivityDisplayComponentProps> = ({tracke
     state.forEach((userArray, cellIndex) => {
 
         userArray.forEach((user, userIndex) => {
-            yValues.push(-cellIndex);
+            yValues.push(-cellIndex - 1);
             xValues.push(userIndex + 1);
             hoverText.push(`${user.name} on cell ${cellIndex}`);
         });
 
     });
 
     const maxCellIndex = state.length > 0 ? state.length - 1 : 0
-    const tickvals = Array.from(Array(maxCellIndex + 1).keys()).map(index => -index);
-    const ticktext = Array.from(Array(maxCellIndex + 1).keys()).map(index => index.toString());
-    
+    const tickvals = Array.from(Array(maxCellIndex + 2).keys()).map(index => -index);
+    const ticktext = Array.from(Array(maxCellIndex + 2).keys()).map(index => (index - 1).toString());
+    const maxXvalue = Math.max(...xValues, MIN_HORIZONTAL_RANGE);
 
     const data = [{
         y: yValues,
@@ -87,12 +89,12 @@ export const ActivityDotPlot: React.FC<ActivityDisplayComponentProps> = ({tracke
         height: 500,
         xaxis: {
             title: 'Active users',
-            range: [1, Math.max(...xValues) + 1]
+            range: [0.5, maxXvalue]
         },
         yaxis: {
             title: 'Cell', 
             autorange: false,
-            range: [-maxCellIndex, 0],
+            range: [-maxCellIndex - 1.5, -0.5],
             tickvals: tickvals,
             ticktext: ticktext
         },