Started displaying dot plot

Author: Liototo

packages/collaboration/src/activitybargraph.tsx

@@ -1,19 +1,10 @@
-import { INotebookTracker, Notebook, NotebookPanel } from '@jupyterlab/notebook';
-import { User } from '@jupyterlab/services';
+import { Notebook, NotebookPanel } from '@jupyterlab/notebook';
 
 import * as React from 'react';
 import Plot from 'react-plotly.js';
 
-import { Roles, Role } from './roles';
-
-
-interface ActivityDisplayComponentProps {
-
-    tracker: INotebookTracker;
-    currentUser: User.IManager;
-    userRoles: Roles
-
-}
+import { ActivityDisplayComponentProps } from './activitydisplay';
+import { Role } from './roles';
 
 export const ActivityBarGraph: React.FC<ActivityDisplayComponentProps> = ({tracker, currentUser, userRoles}) => {
 

packages/collaboration/src/activitydisplay.tsx

@@ -4,9 +4,17 @@ import { User } from '@jupyterlab/services';
 
 import * as React from 'react';
 
-import { ActivityBarGraph } from './activitybargraph';
+// import { ActivityBarGraph } from './activitybargraph';
+import { ActivityDotPlot } from './activitydotplot';
 import { Roles } from './roles';
 
+export interface ActivityDisplayComponentProps {
+
+    tracker: INotebookTracker;
+    currentUser: User.IManager;
+    userRoles: Roles
+
+}
 
 export class ActivityDisplay extends ReactWidget {
 
@@ -25,7 +33,7 @@ export class ActivityDisplay extends ReactWidget {
     }
 
     render() {
-        return <ActivityBarGraph tracker={this._tracker} currentUser={this._currentUser} userRoles={this._roles}/>
+        return <ActivityDotPlot tracker={this._tracker} currentUser={this._currentUser} userRoles={this._roles}/>
     }
 
 }

packages/collaboration/src/activitydotplot.tsx

@@ -0,0 +1,113 @@
+import { Notebook, NotebookPanel } from '@jupyterlab/notebook';
+
+import * as React from 'react';
+import Plot from 'react-plotly.js';
+
+import { ActivityDisplayComponentProps } from './activitydisplay';
+import { SimpleUser } from './cellTracker';
+import { Role } from './roles';
+
+export const ActivityDotPlot: React.FC<ActivityDisplayComponentProps> = ({tracker, currentUser, userRoles}) => {
+
+    const user = currentUser;
+    const roles = userRoles;
+
+    const [state, setState] = React.useState<SimpleUser[][]>([]);
+
+    React.useEffect(() => {
+
+        const updateCounts = (notebook: Notebook) => {
+
+            const counts = notebook.widgets.map(cell => {
+                return cell.model.getMetadata('active_users') || [];
+            });
+
+            setState(counts);
+
+        }
+
+        const startTracking = (_: any, panel: NotebookPanel) => {
+
+            const notebook = panel.content;
+
+            notebook.model?.cells.changed.connect(() => {
+
+                updateCounts(notebook);
+
+                notebook.widgets.forEach(cell => {
+                    cell.model.metadataChanged.connect(() => {
+                        updateCounts(notebook);
+                    })
+                })
+
+            })
+
+        }
+
+        tracker.widgetAdded.connect(startTracking);
+
+        return () => {
+            tracker.widgetAdded.disconnect(startTracking);
+        }
+
+    }, [tracker]);
+
+    const xValues: number[] = [];
+    const yValues: number[] = [];
+    const hoverText: string[] = [];
+
+    state.forEach((userArray, cellIndex) => {
+
+        userArray.forEach((user, userIndex) => {
+            yValues.push(-cellIndex);
+            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 data = [{
+        y: yValues,
+        x: xValues,
+        type: 'scatter',
+        mode: 'markers',
+        orientation: 'h',
+        marker: {color: 'green'},
+        hoverinfo: 'text',
+        text: hoverText
+    }] as Plotly.Data[];
+
+    const layout = {
+        width: 300,
+        height: 500,
+        xaxis: {
+            title: 'Active users',
+            range: [1, Math.max(...xValues) + 1]
+        },
+        yaxis: {
+            title: 'Cell', 
+            autorange: false,
+            range: [-maxCellIndex, 0],
+            tickvals: tickvals,
+            ticktext: ticktext
+        },
+        margin: {
+            l: 60,
+            r: 30,
+            t: 30,
+            b: 60
+        }
+    };
+
+    return <div>
+        {roles.get(user.identity!.username) === Role.Owner && (
+            <Plot className='jp-graph' data={data} layout={layout}/>
+        )}
+    </div>
+
+}

packages/collaboration/src/cellTracker.ts

@@ -9,7 +9,7 @@ let notebook: Notebook;
 let undefinedStuff = 0;
 let currentUser: SimpleUser;
 
-interface SimpleUser {
+export interface SimpleUser {
 
     id: string,
     name: string