Started activity graph

Author: Liototo

packages/collaboration-extension/src/collaboration.ts

@@ -26,6 +26,7 @@ import { Menu, MenuBar } from '@lumino/widgets';
 import { IAwareness } from '@jupyter/ydoc';
 
 import {
+  ActivityDisplay,
   addDisplay,
   Chatbox,
   CollaboratorsPanel,
@@ -138,11 +139,12 @@ export const rtcPanelPlugin: JupyterFrontEndPlugin<void> = {
   id: '@jupyter/collaboration-extension:rtcPanel',
   description: 'Add side panel to display all currently connected users.',
   autoStart: true,
-  requires: [IGlobalAwareness],
+  requires: [IGlobalAwareness, INotebookTracker],
   optional: [ITranslator],
   activate: (
     app: JupyterFrontEnd,
     awareness: Awareness,
+    tracker: INotebookTracker,
     translator: ITranslator | null
   ): void => {
 
@@ -179,6 +181,10 @@ export const rtcPanelPlugin: JupyterFrontEndPlugin<void> = {
     collaboratorsPanel.title.label = trans.__('Online Collaborators');
     userPanel.addWidget(collaboratorsPanel);
 
+    const activityDisplay = new ActivityDisplay(tracker);
+    activityDisplay.title.label = trans.__('User activity');
+    userPanel.addWidget(activityDisplay);
+
 
     const chatPanel = new SidePanel({
       alignment: 'justify'

packages/collaboration/src/activitydisplay.tsx

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import { ReactWidget } from '@jupyterlab/apputils';
+import { INotebookTracker, Notebook, NotebookPanel } from '@jupyterlab/notebook';
+
+export class ActivityDisplay extends ReactWidget {
+
+    private _tracker: INotebookTracker
+
+    constructor(tracker: INotebookTracker) {
+
+        super();
+
+        this._tracker = tracker;
+
+    }
+
+    render() {
+        return <ActivityDisplayComponent tracker={this._tracker}/>
+    }
+
+}
+
+
+interface ActivityDisplayComponentProps {
+
+    tracker: INotebookTracker;
+
+}
+
+const ActivityDisplayComponent: React.FC<ActivityDisplayComponentProps> = ({tracker}) => {
+
+    const [state, setState] = React.useState<number[]>([]);
+
+    React.useEffect(() => {
+
+        const updateCounts = (notebook: Notebook) => {
+
+            const counts = notebook.widgets.map(cell => {
+                return cell.model.getMetadata('active_users') || 0;
+            });
+
+            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 graph = state.map((count, index) => (
+        <div key={index} style={{height: '8px', width: count*5, backgroundColor: 'green', margin: '2px'}}/>
+    ))
+
+    return <div>{graph}</div>;
+
+}

packages/collaboration/src/index.ts

@@ -16,4 +16,5 @@ export * from './messageEncoding';
 export * from './polls';
 export * from './roles';
 export * from './cellTracker';
-export * from './activeusersdisplay';
+export * from './activeusersdisplay';
+export * from './activitydisplay';