Added graph toggle

Author: Liototo

packages/collaboration/src/activitybargraph.tsx

@@ -3,16 +3,14 @@ import { Notebook, NotebookPanel } from '@jupyterlab/notebook';
 import * as React from 'react';
 import Plot from 'react-plotly.js';
 
-import { ActivityDisplayComponentProps } from './activitydisplay';
-import { Role } from './roles';
+import { GraphProps } from './activitydisplay';
 
-export const ActivityBarGraph: React.FC<ActivityDisplayComponentProps> = ({tracker, currentUser, userRoles}) => {
-
-    const user = currentUser;
-    const roles = userRoles;
+export const ActivityBarGraph: React.FC<GraphProps> = ({tracker}) => {
 
     const [state, setState] = React.useState<number[]>([]);
 
+    const MIN_HORIZONTAL_RANGE = 20;
+
     React.useEffect(() => {
 
         const updateCounts = (notebook: Notebook) => {
@@ -52,6 +50,8 @@ export const ActivityBarGraph: React.FC<ActivityDisplayComponentProps> = ({track
         }
 
     }, [tracker]);
+
+    const maxXvalue = Math.max(Math.max(...state), MIN_HORIZONTAL_RANGE);
 
     const data = [{
         y: state.map((_, index) => index + 1),
@@ -66,7 +66,8 @@ export const ActivityBarGraph: React.FC<ActivityDisplayComponentProps> = ({track
         width: 300,
         height: 500,
         xaxis: {
-            title: 'Active users'
+            title: 'Active users',
+            range: [0, maxXvalue]
         },
         yaxis: {
             title: 'Cell', 
@@ -80,10 +81,6 @@ export const ActivityBarGraph: React.FC<ActivityDisplayComponentProps> = ({track
         }
     };
 
-    return <div>
-        {roles.get(user.identity!.username) === Role.Owner && (
-            <Plot className='jp-graph' data={data} layout={layout}/>
-        )}
-    </div>
+    return <Plot className='jp-graph' data={data} layout={layout}/>
 
 }

packages/collaboration/src/activitydisplay.tsx

@@ -4,9 +4,9 @@ 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';
+import { Role, Roles } from './roles';
 
 export interface ActivityDisplayComponentProps {
 
@@ -16,6 +16,12 @@ export interface ActivityDisplayComponentProps {
 
 }
 
+export interface GraphProps {
+
+    tracker: INotebookTracker
+
+}
+
 export class ActivityDisplay extends ReactWidget {
 
     private _tracker: INotebookTracker
@@ -33,7 +39,29 @@ export class ActivityDisplay extends ReactWidget {
     }
 
     render() {
-        return <ActivityDotPlot tracker={this._tracker} currentUser={this._currentUser} userRoles={this._roles}/>
+        return <ActivityDisplayComponent tracker={this._tracker} currentUser={this._currentUser} userRoles={this._roles}/>
     }
 
 }
+
+const ActivityDisplayComponent: React.FC<ActivityDisplayComponentProps> = ({tracker, currentUser, userRoles}) => {
+
+    const [showBarGraph, setShowBarGraph] = React.useState(true);
+
+    const switchGraph = () => {setShowBarGraph(prev => !prev)};
+
+    const barGraph = ActivityBarGraph({tracker});
+    const dotPlot = ActivityDotPlot({tracker});
+
+    return <div>
+        {userRoles.get(currentUser.identity!.username) === Role.Owner && (
+            <div>
+                <button onClick={switchGraph} style={{marginTop: '3px', marginLeft: '3px'}}>
+                    {showBarGraph ? 'Switch to Dot Plot' : 'Switch to Bar Graph'}
+                </button>
+                {showBarGraph ? barGraph : dotPlot}
+            </div>
+        )}
+    </div>
+
+}

packages/collaboration/src/activitydotplot.tsx

@@ -3,14 +3,10 @@ import { Notebook, NotebookPanel } from '@jupyterlab/notebook';
 import * as React from 'react';
 import Plot from 'react-plotly.js';
 
-import { ActivityDisplayComponentProps } from './activitydisplay';
+import { GraphProps } 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;
+export const ActivityDotPlot: React.FC<GraphProps> = ({tracker}) => {
 
     const [state, setState] = React.useState<SimpleUser[][]>([]);
 
@@ -63,14 +59,14 @@ export const ActivityDotPlot: React.FC<ActivityDisplayComponentProps> = ({tracke
         userArray.forEach((user, userIndex) => {
             yValues.push(-cellIndex - 1);
             xValues.push(userIndex + 1);
-            hoverText.push(`${user.name} on cell ${cellIndex}`);
+            hoverText.push(`${user.name} on cell ${cellIndex + 1}`);
         });
 
     });
 
     const maxCellIndex = state.length > 0 ? state.length - 1 : 0
     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 ticktext = Array.from(Array(maxCellIndex + 2).keys()).map(index => (index).toString());
     const maxXvalue = Math.max(...xValues, MIN_HORIZONTAL_RANGE);
 
     const data = [{
@@ -106,10 +102,6 @@ export const ActivityDotPlot: React.FC<ActivityDisplayComponentProps> = ({tracke
         }
     };
 
-    return <div>
-        {roles.get(user.identity!.username) === Role.Owner && (
-            <Plot className='jp-graph' data={data} layout={layout}/>
-        )}
-    </div>
+    return <Plot className='jp-graph' data={data} layout={layout}/>
 
 }