@apollo-annotation/jbrowse-plugin-apollo 0.1.0

package/package.json

@@ -0,0 +1,130 @@
+{
+  "version": "0.1.0",
+  "name": "@apollo-annotation/jbrowse-plugin-apollo",
+  "description": "Apollo plugin for JBrowse 2",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/GMOD/Apollo3.git",
+    "directory": "packages/jbrowse-plugin-apollo"
+  },
+  "author": "JBrowse Team",
+  "license": "Apache-2.0",
+  "keywords": [
+    "jbrowse",
+    "jbrowse2"
+  ],
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "typings": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "config": {
+    "jbrowse": {
+      "plugin": {
+        "name": "Apollo"
+      }
+    }
+  },
+  "scripts": {
+    "setup": "rimraf .jbrowse && jbrowse create .jbrowse",
+    "clean": "rimraf dist",
+    "start": "yarn clean && npm-run-all --parallel start:watch start:server",
+    "start:watch": "JB_NPM=false NODE_ENV=development rollup --config --watch",
+    "start:server": "serve --no-request-logging --cors --listen 9000 .",
+    "build": "yarn build:shared && yarn clean && rollup --config",
+    "browse": "serve --no-request-logging --listen 8999 .jbrowse",
+    "test": "jest",
+    "test:ci": "jest --coverage",
+    "start:collab-cypress": "yarn workspace apollo-collaboration-server run cypress:start",
+    "test:e2e": "yarn build && start-test \"npm-run-all --parallel start:server browse start:collab-cypress\" \"9000|8999|http://localhost:3999/health\" \"npm-run-all cypress:run\"",
+    "test:e2e:debug": "yarn build && start-test \"npm-run-all --parallel start:server browse start:collab-cypress\" \"9000|8999|http://localhost:3999/health\" \"npm-run-all cypress:debug\"",
+    "cypress:run": "cypress run --browser chrome",
+    "cypress:debug": "cypress run --browser chrome --config screenshotOnRunFailure=true,video=true",
+    "cypress:open": "cypress open --config baseUrl=http://localhost:3000",
+    "prepublish": "yarn test",
+    "prepack": "yarn build",
+    "postversion": "git push --follow-tags"
+  },
+  "jbrowse-plugin": {
+    "name": "Apollo"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.10.6",
+    "@emotion/styled": "^11.10.6",
+    "@gmod/gff": "1.2.0",
+    "@jbrowse/plugin-authentication": "^2.0.1",
+    "@jbrowse/plugin-linear-genome-view": "^2.0.1",
+    "@mui/icons-material": "^5.8.4",
+    "@types/jsonpath": "^0.2.0",
+    "apollo-common": "^1.0.0-alpha.0",
+    "apollo-mst": "^1.0.0-alpha.0",
+    "apollo-shared": "^1.0.0-alpha.0",
+    "autosuggest-highlight": "^3.3.4",
+    "bson-objectid": "^2.0.4",
+    "clsx": "^1.1.1",
+    "fast-deep-equal": "^3.1.3",
+    "file-saver": "^2.0.5",
+    "http-proxy-middleware": "^2.0.6",
+    "idb": "^7.1.1",
+    "jsonpath": "^1.1.1",
+    "nanoid": "^4.0.2",
+    "regenerator-runtime": "^0.13.9",
+    "socket.io-client": "^4.5.4",
+    "tslib": "^2.3.1"
+  },
+  "peerDependencies": {
+    "@jbrowse/core": "^2.7.0",
+    "@mui/material": "^5.11.10",
+    "mobx": "^6.6.1",
+    "mobx-react": "^7.2.1",
+    "mobx-state-tree": "^5.1.7",
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rxjs": "^7.4.0",
+    "tss-react": "^4.6.1"
+  },
+  "devDependencies": {
+    "@jbrowse/cli": "^2.6.2",
+    "@jbrowse/core": "^2.7.0",
+    "@jbrowse/development-tools": "^2.1.1",
+    "@jest/globals": "^29.0.3",
+    "@mui/material": "^5.11.10",
+    "@mui/x-data-grid": "^6.0.1",
+    "@types/autosuggest-highlight": "^3",
+    "@types/file-saver": "^2",
+    "@types/node": "^18.14.2",
+    "@types/prop-types": "^15",
+    "@types/react": "^17.0.34",
+    "@types/react-dom": "^18",
+    "cypress": "12.17.3",
+    "cypress-mongodb": "^6.2.0",
+    "fake-indexeddb": "^4.0.2",
+    "jest": "^29.6.2",
+    "jest-fetch-mock": "^3.0.3",
+    "librpc-web-mod": "^1.1.9",
+    "mobx": "^6.6.1",
+    "mobx-react": "^7.2.1",
+    "mobx-state-tree": "^5.1.7",
+    "npm-run-all": "^4.1.5",
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rimraf": "^3.0.2",
+    "rollup": "^2.59.0",
+    "rxjs": "^7.4.0",
+    "serve": "^14.0.1",
+    "shx": "^0.3.3",
+    "start-server-and-test": "^1.11.7",
+    "ts-jest": "^29.1.1",
+    "ts-node": "^10.3.0",
+    "tss-react": "^4.6.1",
+    "typescript": "^5.1.6"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "stableVersion": "0.0.0"
+}

package/src/ApolloInternetAccount/addMenuItems.ts

@@ -0,0 +1,94 @@
+import { AbstractMenuManager, AbstractSessionModel } from '@jbrowse/core/util'
+
+import {
+  AddAssembly,
+  DeleteAssembly,
+  ImportFeatures,
+  ManageUsers,
+} from '../components'
+import { ApolloSessionModel } from '../session'
+
+export function addMenuItems(rootModel: AbstractMenuManager) {
+  rootModel.appendToMenu('Apollo', {
+    label: 'Add Assembly',
+    onClick: (session: ApolloSessionModel) => {
+      ;(session as unknown as AbstractSessionModel).queueDialog(
+        (doneCallback) => [
+          AddAssembly,
+          {
+            session,
+            handleClose: () => {
+              doneCallback()
+            },
+            changeManager: session.apolloDataStore.changeManager,
+          },
+        ],
+      )
+    },
+  })
+  rootModel.appendToMenu('Apollo', {
+    label: 'Delete Assembly',
+    onClick: (session: ApolloSessionModel) => {
+      ;(session as unknown as AbstractSessionModel).queueDialog(
+        (doneCallback) => [
+          DeleteAssembly,
+          {
+            session,
+            handleClose: () => {
+              doneCallback()
+            },
+            changeManager: session.apolloDataStore.changeManager,
+          },
+        ],
+      )
+    },
+  })
+  rootModel.appendToMenu('Apollo', {
+    label: 'Import Features',
+    onClick: (session: ApolloSessionModel) => {
+      ;(session as unknown as AbstractSessionModel).queueDialog(
+        (doneCallback) => [
+          ImportFeatures,
+          {
+            session,
+            handleClose: () => {
+              doneCallback()
+            },
+            changeManager: (session as ApolloSessionModel).apolloDataStore
+              .changeManager,
+          },
+        ],
+      )
+    },
+  })
+  rootModel.appendToMenu('Apollo', {
+    label: 'Manage Users',
+    onClick: (session: ApolloSessionModel) => {
+      ;(session as unknown as AbstractSessionModel).queueDialog(
+        (doneCallback) => [
+          ManageUsers,
+          {
+            session,
+            handleClose: () => {
+              doneCallback()
+            },
+            changeManager: (session as ApolloSessionModel).apolloDataStore
+              .changeManager,
+          },
+        ],
+      )
+    },
+  })
+  rootModel.appendToMenu('Apollo', {
+    label: 'Undo',
+    onClick: (session: ApolloSessionModel) => {
+      const { apolloDataStore } = session
+      const { notify } = session as unknown as AbstractSessionModel
+      if (apolloDataStore.changeManager.recentChanges.length > 0) {
+        void apolloDataStore.changeManager.revertLastChange()
+      } else {
+        notify('No changes to undo', 'info')
+      }
+    },
+  })
+}

package/src/ApolloInternetAccount/components/AuthTypeSelector.tsx

@@ -0,0 +1,121 @@
+import { isAbortException } from '@jbrowse/core/util'
+import {
+  Button,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  Divider,
+} from '@mui/material'
+import React, { useEffect, useState } from 'react'
+import { makeStyles } from 'tss-react/mui'
+
+import { Dialog } from '../../components/Dialog'
+import { createFetchErrorMessage } from '../../util'
+import { GoogleButton, GuestButton, MicrosoftButton } from './LoginButtons'
+
+const useStyles = makeStyles()((theme) => ({
+  divider: {
+    marginTop: theme.spacing(4),
+    marginBottom: theme.spacing(5),
+  },
+}))
+
+export const AuthTypeSelector = ({
+  baseURL,
+  handleClose,
+  name,
+}: {
+  baseURL: string
+  name: string
+  handleClose: (type?: 'google' | 'microsoft' | 'guest' | Error) => void
+}) => {
+  const { classes } = useStyles()
+  const [errorMessage, setErrorMessage] = useState('')
+  const [loginTypes, setLoginTypes] = useState<string[]>([])
+  useEffect(() => {
+    const controller = new AbortController()
+    const { signal } = controller
+    async function getAuthTypes() {
+      const uri = new URL('/auth/types', baseURL).href
+      const response = await fetch(uri, { method: 'GET', signal })
+      if (!response.ok) {
+        const newErrorMessage = await createFetchErrorMessage(
+          response,
+          'Error when retrieving auth types from server',
+        )
+        setErrorMessage(newErrorMessage)
+        return
+      }
+      const data = (await response.json()) as string[]
+      setLoginTypes(data)
+    }
+    getAuthTypes().catch((error) =>
+      isAbortException(error) ? '' : setErrorMessage(String(error)),
+    )
+    return () => {
+      controller.abort()
+    }
+  }, [baseURL])
+
+  function handleClick(authType: 'google' | 'microsoft' | 'guest') {
+    if (authType === 'google') {
+      handleClose('google')
+    } else if (authType === 'microsoft') {
+      handleClose('microsoft')
+    } else {
+      handleClose('guest')
+    }
+  }
+
+  const allowGoogle = loginTypes.includes('google')
+  const allowMicrosoft = loginTypes.includes('microsoft')
+  const allowGuest = loginTypes.includes('guest')
+  return (
+    <Dialog
+      open
+      title={`Log in to ${name}`}
+      handleClose={handleClose}
+      maxWidth={false}
+      data-testid="login-apollo"
+    >
+      <DialogContent
+        style={{ display: 'flex', flexDirection: 'column', paddingTop: 8 }}
+      >
+        {allowGoogle ? (
+          <GoogleButton
+            disabled={!allowGoogle}
+            onClick={() => handleClick('google')}
+          />
+        ) : null}
+        {allowMicrosoft ? (
+          <MicrosoftButton
+            disabled={!allowMicrosoft}
+            onClick={() => handleClick('microsoft')}
+          />
+        ) : null}
+        {allowGuest ? (
+          <>
+            <Divider className={classes.divider} />
+            <GuestButton onClick={() => handleClick('guest')} />
+          </>
+        ) : null}
+      </DialogContent>
+      <DialogActions>
+        <Button
+          variant="outlined"
+          type="submit"
+          onClick={() => {
+            handleClose()
+          }}
+        >
+          Cancel
+        </Button>
+      </DialogActions>
+      {errorMessage ? (
+        <DialogContent>
+          <DialogContentText color="error">{errorMessage}</DialogContentText>
+        </DialogContent>
+      ) : null}
+    </Dialog>
+  )
+}

package/src/ApolloInternetAccount/components/LoginButtons.tsx

@@ -0,0 +1,62 @@
+import AccountCircleIcon from '@mui/icons-material/AccountCircle'
+import { Button, ButtonProps } from '@mui/material'
+import React from 'react'
+import { makeStyles } from 'tss-react/mui'
+
+import { Google, Microsoft } from './LoginIcons'
+
+const useStyles = makeStyles()((theme) => ({
+  loginButton: {
+    marginBottom: theme.spacing(1),
+    width: '220px',
+    height: '40px',
+    fontSize: '16px',
+    textTransform: 'none',
+    justifyContent: 'left',
+    padding: '3px 12px',
+  },
+}))
+
+export function GoogleButton(props: ButtonProps) {
+  const { classes } = useStyles()
+  const { disabled } = props
+  return (
+    <Button
+      className={classes.loginButton}
+      variant="outlined"
+      startIcon={<Google color={disabled ? 'disabled' : undefined} />}
+      {...props}
+    >
+      Sign in with Google
+    </Button>
+  )
+}
+
+export function MicrosoftButton(props: ButtonProps) {
+  const { classes } = useStyles()
+  const { disabled } = props
+  return (
+    <Button
+      className={classes.loginButton}
+      variant="outlined"
+      startIcon={<Microsoft color={disabled ? 'disabled' : undefined} />}
+      {...props}
+    >
+      Sign in with Microsoft
+    </Button>
+  )
+}
+
+export function GuestButton(props: ButtonProps) {
+  const { classes } = useStyles()
+  return (
+    <Button
+      className={classes.loginButton}
+      variant="outlined"
+      startIcon={<AccountCircleIcon fontSize="small" />}
+      {...props}
+    >
+      Continue as Guest
+    </Button>
+  )
+}

package/src/ApolloInternetAccount/components/LoginIcons.tsx

@@ -0,0 +1,74 @@
+import { SvgIcon, SvgIconProps } from '@mui/material'
+import React from 'react'
+
+// Icon source: https://developers.google.com/identity/branding-guidelines
+export function Google(props: SvgIconProps) {
+  const { color } = props
+  return (
+    <SvgIcon
+      viewBox="0 0 18 18"
+      style={{ fontSize: 18, marginRight: 4 }}
+      {...props}
+    >
+      {color === 'disabled' ? (
+        <path d="M9.001,10.71 l0,-3.348 l8.424,0 c0.126,0.567,0.225,1.098,0.225,1.845 c0,5.139,-3.447,8.793,-8.64,8.793 c-4.968,0,-9,-4.032,-9,-9 c0,-4.968,4.032,-9,9,-9 c2.43,0,4.464,0.891,6.021,2.349 l-2.556,2.484 c-0.648,-0.612,-1.782,-1.332,-3.465,-1.332 c-2.979,0,-5.409,2.475,-5.409,5.508 c0,3.033,2.43,5.508,5.409,5.508 c3.447,0,4.716,-2.385,4.95,-3.798 l-4.959,0 l0,-0.009 z"></path>
+      ) : (
+        <>
+          <path
+            d="M17.64,9.20454545 c0,-0.638,-0.057,-1.252,-0.164,-1.841 l-8.476,0 l0,3.481 l4.844,0 c-0.209,1.125,-0.843,2.079,-1.796,2.717 l0,2.258 l2.908,0 c1.702,-1.567,2.684,-3.874,2.684,-6.615 l0,0 z"
+            fill="#4285F4"
+          ></path>
+          <path
+            d="M9,18 c2.43,0,4.467,-0.806,5.956,-2.18 l-2.908,-2.259 c-0.806,0.54,-1.837,0.859,-3.048,0.859 c-2.344,0,-4.328,-1.583,-5.036,-3.71 l-3.007,0 l0,2.332 c1.481,2.941,4.525,4.958,8.043,4.958 l0,0 z"
+            fill="#34A853"
+          ></path>
+          <path
+            d="M3.96409091,10.71 c-0.18,-0.54,-0.282,-1.117,-0.282,-1.71 c0,-0.593,0.102,-1.17,0.282,-1.71 l0,-2.332 l-3.007,0 c-0.609,1.215,-0.957,2.59,-0.957,4.042 c0,1.452,0.348,2.827,0.957,4.042 l3.007,-2.332 l0,0 z"
+            fill="#FBBC05"
+          ></path>
+          <path
+            d="M9,3.57954545 c1.321,0,2.508,0.454,3.44,1.346 l2.582,-2.581 c-1.559,-1.453,-3.596,-2.345,-6.022,-2.345 c-3.518,0,-6.562,2.017,-8.043,4.959 l3.007,2.331 c0.708,-2.127,2.692,-3.71,5.036,-3.71 l0,0 z"
+            fill="#EA4335"
+          ></path>
+        </>
+      )}
+    </SvgIcon>
+  )
+}
+
+// Icon source: https://learn.microsoft.com/en-us/azure/active-directory/develop/howto-add-branding-in-azure-ad-apps
+export function Microsoft(props: SvgIconProps) {
+  const { color } = props
+  return (
+    <SvgIcon viewBox="0 0 21 21" style={{ fontSize: 21 }} {...props}>
+      <rect
+        x="1"
+        y="1"
+        width="9"
+        height="9"
+        fill={color === 'disabled' ? '#7B7B7B' : '#F25022'}
+      />
+      <rect
+        x="1"
+        y="11"
+        width="9"
+        height="9"
+        fill={color === 'disabled' ? '#7B7B7B' : '#00A4EF'}
+      />
+      <rect
+        x="11"
+        y="1"
+        width="9"
+        height="9"
+        fill={color === 'disabled' ? '#939393' : '#7FBA00'}
+      />
+      <rect
+        x="11"
+        y="11"
+        width="9"
+        height="9"
+        fill={color === 'disabled' ? '#B9B9B9' : '#FFB900'}
+      />
+    </SvgIcon>
+  )
+}

package/src/ApolloInternetAccount/configSchema.ts

@@ -0,0 +1,26 @@
+import { ConfigurationSchema } from '@jbrowse/core/configuration'
+import { BaseInternetAccountConfig } from '@jbrowse/core/pluggableElementTypes'
+import { Instance } from 'mobx-state-tree'
+
+const ApolloConfigSchema = ConfigurationSchema(
+  'ApolloInternetAccount',
+  {
+    baseURL: {
+      description: 'Location of Apollo server',
+      type: 'string',
+      defaultValue: '',
+    },
+    tokenType: {
+      description: 'A custom name for a token to include in the header',
+      type: 'string',
+      defaultValue: 'Bearer',
+    },
+  },
+  { baseConfiguration: BaseInternetAccountConfig, explicitlyTyped: true },
+)
+
+export type ApolloInternetAccountConfigModel = typeof ApolloConfigSchema
+
+export type ApolloInternetAccountConfig =
+  Instance<ApolloInternetAccountConfigModel>
+export default ApolloConfigSchema

package/src/ApolloInternetAccount/index.ts

@@ -0,0 +1,2 @@
+export { default as configSchema } from './configSchema'
+export { default as modelFactory } from './model'