diff --git a/packages/collaboration/src/activitybargraph.tsx b/packages/collaboration/src/activitybargraph.tsx index e7631b6..3176bd9 100644 --- a/packages/collaboration/src/activitybargraph.tsx +++ b/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 = ({tracker, currentUser, userRoles}) => { - - const user = currentUser; - const roles = userRoles; +export const ActivityBarGraph: React.FC = ({tracker}) => { const [state, setState] = React.useState([]); + const MIN_HORIZONTAL_RANGE = 20; + React.useEffect(() => { const updateCounts = (notebook: Notebook) => { @@ -52,6 +50,8 @@ export const ActivityBarGraph: React.FC = ({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 = ({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 = ({track } }; - return
- {roles.get(user.identity!.username) === Role.Owner && ( - - )} -
+ return } \ No newline at end of file diff --git a/packages/collaboration/src/activitydisplay.tsx b/packages/collaboration/src/activitydisplay.tsx index 0a7bc13..42a970d 100644 --- a/packages/collaboration/src/activitydisplay.tsx +++ b/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 + return } } + +const ActivityDisplayComponent: React.FC = ({tracker, currentUser, userRoles}) => { + + const [showBarGraph, setShowBarGraph] = React.useState(true); + + const switchGraph = () => {setShowBarGraph(prev => !prev)}; + + const barGraph = ActivityBarGraph({tracker}); + const dotPlot = ActivityDotPlot({tracker}); + + return
+ {userRoles.get(currentUser.identity!.username) === Role.Owner && ( +
+ + {showBarGraph ? barGraph : dotPlot} +
+ )} +
+ +} \ No newline at end of file diff --git a/packages/collaboration/src/activitydotplot.tsx b/packages/collaboration/src/activitydotplot.tsx index a661b02..b21da2a 100644 --- a/packages/collaboration/src/activitydotplot.tsx +++ b/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 = ({tracker, currentUser, userRoles}) => { - - const user = currentUser; - const roles = userRoles; +export const ActivityDotPlot: React.FC = ({tracker}) => { const [state, setState] = React.useState([]); @@ -63,14 +59,14 @@ export const ActivityDotPlot: React.FC = ({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 = ({tracke } }; - return
- {roles.get(user.identity!.username) === Role.Owner && ( - - )} -
+ return } \ No newline at end of file