@jbrowse/plugin-jobs-management 2.6.1

package/src/JobsListWidget/components/CurrentJobCard.tsx

@@ -0,0 +1,73 @@
+import React, { useState } from 'react'
+import { observer } from 'mobx-react'
+import {
+  Box,
+  Button,
+  Card,
+  CardActions,
+  CardContent,
+  LinearProgress,
+  Typography,
+} from '@mui/material'
+import { NewJob } from '../model'
+
+function CurrentJobCard({ job }: { job: NewJob }) {
+  const [clicked, setClicked] = useState(false)
+  return (
+    <Card variant="outlined">
+      <CardContent>
+        <Typography variant="body1">
+          <strong>{'Name: '}</strong>
+          {job.name}
+        </Typography>
+        <Typography variant="body1">
+          <strong>{'Message: '}</strong>
+          {job.statusMessage || 'No message provided'}
+        </Typography>
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            marginTop: 10,
+            marginBottom: 10,
+            marginLeft: 10,
+          }}
+        >
+          {job.progressPct === 0 || job.progressPct === 100 ? (
+            <Box sx={{ width: '100%' }}>
+              <LinearProgress variant="indeterminate" />
+            </Box>
+          ) : (
+            <>
+              <Box sx={{ width: '100%' }}>
+                <LinearProgress variant="determinate" value={job.progressPct} />
+              </Box>
+              <Box sx={{ m: 1 }}>
+                <Typography>{`${Math.round(
+                  job.progressPct || 0,
+                )}%`}</Typography>
+              </Box>
+            </>
+          )}
+        </Box>
+      </CardContent>
+      {job.cancelCallback ? (
+        <CardActions>
+          <Button
+            variant="contained"
+            color="inherit"
+            disabled={clicked || job.progressPct === 0}
+            onClick={() => {
+              job.cancelCallback && job.cancelCallback()
+              setClicked(true)
+            }}
+          >
+            Cancel
+          </Button>
+        </CardActions>
+      ) : null}
+    </Card>
+  )
+}
+
+export default observer(CurrentJobCard)

package/src/JobsListWidget/components/JobCard.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { observer } from 'mobx-react'
+import { Card, CardContent, Typography } from '@mui/material'
+import { NewJob } from '../model'
+
+function JobCard({ job }: { job: NewJob }) {
+  return (
+    <Card variant="outlined">
+      <CardContent>
+        <Typography variant="body1">
+          <strong>{'Name: '}</strong>
+          {job.name}
+        </Typography>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default observer(JobCard)

package/src/JobsListWidget/components/JobsListWidget.tsx

@@ -0,0 +1,103 @@
+import React from 'react'
+import {
+  Accordion,
+  AccordionSummary,
+  Card,
+  CardContent,
+  Typography,
+} from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
+import { observer } from 'mobx-react'
+
+// icons
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
+
+import JobCard from './JobCard'
+import CurrentJobCard from './CurrentJobCard'
+import { JobsListModel, NewJob } from '../model'
+
+const useStyles = makeStyles()(theme => ({
+  root: {
+    margin: theme.spacing(1),
+  },
+  expandIcon: {
+    color: theme.palette.tertiary.contrastText,
+  },
+  button: {
+    marginTop: theme.spacing(1),
+    marginRight: theme.spacing(1),
+  },
+  adminBadge: {
+    margin: '0.5em',
+    borderRadius: 3,
+    backgroundColor: theme.palette.quaternary.main,
+    padding: '1em',
+    display: 'flex',
+    alignContent: 'center',
+  },
+}))
+
+function JobsListWidget({ model }: { model: JobsListModel }) {
+  const { classes } = useStyles()
+  const { jobs, finished, queued } = model
+  return (
+    <div className={classes.root}>
+      <Accordion defaultExpanded>
+        <AccordionSummary
+          expandIcon={<ExpandMoreIcon className={classes.expandIcon} />}
+        >
+          <Typography variant="h5">Jobs</Typography>
+        </AccordionSummary>
+        {jobs.length ? (
+          jobs.map((job: NewJob, index: number) => (
+            <CurrentJobCard job={job} key={`${JSON.stringify(job)}-${index}`} />
+          ))
+        ) : (
+          <Card variant="outlined">
+            <CardContent>
+              <Typography variant="body1">No jobs</Typography>
+            </CardContent>
+          </Card>
+        )}
+      </Accordion>
+      <Accordion defaultExpanded>
+        <AccordionSummary
+          expandIcon={<ExpandMoreIcon className={classes.expandIcon} />}
+        >
+          <Typography variant="h5">Queued jobs</Typography>
+        </AccordionSummary>
+        {queued.length ? (
+          queued.map((job: NewJob, index: number) => (
+            <JobCard job={job} key={`${JSON.stringify(job)}-${index}`} />
+          ))
+        ) : (
+          <Card variant="outlined">
+            <CardContent>
+              <Typography variant="body1">No queued jobs</Typography>
+            </CardContent>
+          </Card>
+        )}
+      </Accordion>
+      <Accordion defaultExpanded>
+        <AccordionSummary
+          expandIcon={<ExpandMoreIcon className={classes.expandIcon} />}
+        >
+          <Typography variant="h5">Jobs completed</Typography>
+        </AccordionSummary>
+        {finished.length ? (
+          finished.map((job: NewJob, index: number) => (
+            <JobCard key={`${JSON.stringify(job)}-${index}`} job={job} />
+          ))
+        ) : (
+          <Card variant="outlined">
+            <CardContent>
+              <Typography variant="body1">No jobs completed</Typography>
+            </CardContent>
+          </Card>
+        )}
+      </Accordion>
+    </div>
+  )
+}
+
+export default observer(JobsListWidget)

package/src/JobsListWidget/index.ts

@@ -0,0 +1,5 @@
+import { ConfigurationSchema } from '@jbrowse/core/configuration'
+
+export { default as ReactComponent } from './components/JobsListWidget'
+export { default as stateModelFactory } from './model'
+export const configSchema = ConfigurationSchema('JobsListWidget', {})

package/src/JobsListWidget/model.ts

@@ -0,0 +1,85 @@
+import { types, Instance, SnapshotIn } from 'mobx-state-tree'
+import PluginManager from '@jbrowse/core/PluginManager'
+import { ElementId } from '@jbrowse/core/util/types/mst'
+
+export const Job = types
+  .model('Job', {
+    name: types.string,
+    statusMessage: types.maybe(types.string),
+    progressPct: types.number,
+  })
+  .volatile(self => ({
+    cancelCallback() {},
+  }))
+  .actions(self => ({
+    setCancelCallback(cancelCallback: () => void) {
+      self.cancelCallback = cancelCallback
+    },
+    setStatusMessage(message?: string) {
+      self.statusMessage = message
+    },
+    setProgressPct(pct: number) {
+      self.progressPct = pct
+    },
+  }))
+
+export interface NewJob extends SnapshotIn<typeof Job> {
+  cancelCallback(): void
+}
+
+export default function f(pluginManager: PluginManager) {
+  return types
+    .model('JobsListModel', {
+      id: ElementId,
+      type: types.literal('JobsListWidget'),
+      jobs: types.array(Job),
+      finished: types.array(Job),
+      queued: types.array(Job),
+    })
+    .actions(self => ({
+      addJob(job: NewJob) {
+        const { cancelCallback } = job
+        const length = self.jobs.push(job)
+        const addedJob = self.jobs[length - 1]
+        addedJob.setCancelCallback(cancelCallback)
+        return addedJob
+      },
+      removeJob(jobName: string) {
+        const indx = self.jobs.findIndex(job => job.name === jobName)
+        const removed = self.jobs[indx]
+        self.jobs.splice(indx, 1)
+        return removed
+      },
+      addFinishedJob(job: NewJob) {
+        self.finished.push(job)
+        return self.finished
+      },
+      addQueuedJob(job: NewJob) {
+        self.queued.push(job)
+        return self.finished
+      },
+      removeQueuedJob(jobName: string) {
+        const indx = self.queued.findIndex(job => job.name === jobName)
+        const removed = self.queued[indx]
+        self.queued.splice(indx, 1)
+        return removed
+      },
+      updateJobStatusMessage(jobName: string, message?: string) {
+        const job = self.jobs.find(job => job.name === jobName)
+        if (!job) {
+          throw new Error(`No job found with name ${jobName}`)
+        }
+        job.setStatusMessage(message)
+      },
+      updateJobProgressPct(jobName: string, pct: number) {
+        const job = self.jobs.find(job => job.name === jobName)
+        if (!job) {
+          throw new Error(`No job found with name ${jobName}`)
+        }
+        job.setProgressPct(pct)
+      },
+    }))
+}
+
+export type JobsListStateModel = ReturnType<typeof f>
+export type JobsListModel = Instance<JobsListStateModel>

package/src/index.test.ts

@@ -0,0 +1,3 @@
+test('easy', () => {
+  expect(1).toBe(1)
+})

package/src/index.ts

@@ -0,0 +1,51 @@
+import { lazy } from 'react'
+import Plugin from '@jbrowse/core/Plugin'
+import PluginManager from '@jbrowse/core/PluginManager'
+import { SessionWithWidgets, isAbstractMenuManager } from '@jbrowse/core/util'
+import { Indexing } from '@jbrowse/core/ui/Icons'
+import WidgetType from '@jbrowse/core/pluggableElementTypes/WidgetType'
+import {
+  stateModelFactory as JobsListStateModelFactory,
+  configSchema as JobsListConfigSchema,
+} from '../../jobs-management/src/JobsListWidget'
+import { isSessionModelWithWidgets } from '@jbrowse/core/util'
+
+export default class extends Plugin {
+  name = 'JobsManagementPlugin'
+
+  install(pluginManager: PluginManager) {
+    pluginManager.addWidgetType(() => {
+      return new WidgetType({
+        name: 'JobsListWidget',
+        heading: 'Running jobs',
+        configSchema: JobsListConfigSchema,
+        stateModel: JobsListStateModelFactory(pluginManager),
+        ReactComponent: lazy(
+          () =>
+            import(
+              '../../jobs-management/src/JobsListWidget/components/JobsListWidget'
+            ),
+        ),
+      })
+    })
+  }
+  configure(pluginManager: PluginManager) {
+    if (isAbstractMenuManager(pluginManager.rootModel)) {
+      pluginManager.rootModel.appendToMenu('Tools', {
+        label: 'Jobs list',
+        icon: Indexing, // TODO: pick a better icon
+        onClick: (session: SessionWithWidgets) => {
+          if (isSessionModelWithWidgets(session)) {
+            const { widgets } = session
+            let jobStatusWidget = widgets.get('JobsList')
+            if (!jobStatusWidget) {
+              jobStatusWidget = session.addWidget('JobsListWidget', 'JobsList')
+            } else {
+              session.showWidget(jobStatusWidget)
+            }
+          }
+        },
+      })
+    }
+  }
+}