jbrowse-plugin-graphgenomeviewer 1.0.0

package/package.json

@@ -0,0 +1,63 @@
+{
+  "version": "1.0.0",
+  "name": "jbrowse-plugin-graphgenomeviewer",
+  "keywords": [
+    "jbrowse",
+    "jbrowse2"
+  ],
+  "main": "dist/index.js",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "test": "vitest",
+    "clean": "rimraf dist",
+    "format": "prettier --write .",
+    "prebuild": "npm run clean",
+    "start": "node esbuild.mjs",
+    "build": "tsc && NODE_ENV=production node esbuild.mjs",
+    "lint": "eslint --report-unused-disable-directives --max-warnings 0",
+    "prepack": "npm run build",
+    "postversion": "git push --follow-tags"
+  },
+  "dependencies": {
+    "@mui/icons-material": "^6.4.1",
+    "graphgenomeviewer": "^5.0.4"
+  },
+  "devDependencies": {
+    "@emotion/react": "^11.13.0",
+    "@eslint/compat": "^1.1.1",
+    "@fal-works/esbuild-plugin-global-externals": "^2.1.2",
+    "@jbrowse/core": "^3.0.1",
+    "@jbrowse/plugin-linear-genome-view": "^3.0.1",
+    "@mui/material": "^6.1.5",
+    "@mui/system": "^6.1.5",
+    "@mui/x-data-grid": "^7.3.0",
+    "@types/node": "^22.5.0",
+    "@types/react": "^19.0.2",
+    "@typescript-eslint/eslint-plugin": "^8.1.0",
+    "@typescript-eslint/parser": "^8.1.0",
+    "esbuild": "^0.25.0",
+    "eslint": "^9.0.0",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-react": "^7.20.3",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.11",
+    "eslint-plugin-unicorn": "^56.0.0",
+    "mobx": "^6.0.0",
+    "mobx-react": "^9.0.1",
+    "mobx-state-tree": "5.4.2",
+    "prettier": "^3.2.5",
+    "pretty-bytes": "^6.1.1",
+    "react": "^19.0.0",
+    "rimraf": "^6.0.1",
+    "rxjs": "^7.0.0",
+    "tss-react": "^4.9.4",
+    "typescript": "^5.3.3",
+    "typescript-eslint": "^8.1.0",
+    "vitest": "^3.0.5"
+  },
+  "author": "Colin <colin.diesh@gmail.com>",
+  "license": "MIT"
+}

package/src/GraphGenomeView/components/FeatureDialog.tsx

@@ -0,0 +1,51 @@
+import React from 'react'
+
+import { Dialog } from '@jbrowse/core/ui'
+
+export default function FeatureDialog({
+  data,
+  onClose,
+}: {
+  data: Record<string, unknown>
+  onClose: () => void
+}) {
+  return (
+    <Dialog open title="Feature details" onClose={onClose}>
+      <div>Attributes</div>
+      {Object.entries(data)
+        .filter(
+          entry => !['source', 'target', 'linkNum', 'tags'].includes(entry[0]),
+        )
+        .map(([key, value]) => (
+          <div
+            key={`${key}_${value}`}
+            style={{ display: 'flex', maxHeight: 150, margin: 3 }}
+          >
+            <div style={{ backgroundColor: '#dda', minWidth: 100 }}>{key}</div>
+            <div style={{ wordBreak: 'break-word', overflow: 'auto' }}>
+              {String(value)}
+            </div>
+          </div>
+        ))}
+      <hr />
+      {data.tags && Object.keys(data.tags).length > 0 ? (
+        <>
+          <div>Tags</div>
+          {Object.entries(data.tags).map(([key, value]) => (
+            <div
+              key={`${key}_${value}`}
+              style={{ display: 'flex', maxHeight: 150, margin: 3 }}
+            >
+              <div style={{ backgroundColor: '#dda', minWidth: 100 }}>
+                {key}
+              </div>
+              <div style={{ wordBreak: 'break-word', overflow: 'auto' }}>
+                {String(value)}
+              </div>
+            </div>
+          ))}
+        </>
+      ) : null}
+    </Dialog>
+  )
+}

package/src/GraphGenomeView/components/GraphGenomeView.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+
+import { ErrorMessage } from '@jbrowse/core/ui'
+import { observer } from 'mobx-react'
+
+import GraphPanel from './GraphPanel'
+import Header from './Header'
+
+import type { GraphGenomeViewModel } from '../model'
+
+const GraphGenomeView = observer(function ({
+  model,
+}: {
+  model: GraphGenomeViewModel
+}) {
+  const { error } = model
+  return (
+    <div
+      style={{
+        padding: 10,
+      }}
+    >
+      <Header model={model} />
+      <div>
+        {error ? <ErrorMessage error={error} /> : null}
+        <GraphPanel model={model} />
+      </div>
+    </div>
+  )
+})
+
+export default GraphGenomeView

package/src/GraphGenomeView/components/GraphPanel.tsx

@@ -0,0 +1,37 @@
+import React, { useState } from 'react'
+
+import { Graph } from 'graphgenomeviewer'
+import { observer } from 'mobx-react'
+
+import FeatureDialog from './FeatureDialog'
+
+import type { GraphGenomeViewModel } from '../model'
+
+const GraphPanel = observer(function ({
+  model,
+}: {
+  model: GraphGenomeViewModel
+}) {
+  const { graph } = model
+  const [featureData, setFeatureData] = useState<Record<string, unknown>>()
+  return graph ? (
+    <>
+      {featureData ? (
+        <FeatureDialog
+          data={featureData}
+          onClose={() => {
+            setFeatureData(undefined)
+          }}
+        />
+      ) : null}
+      <Graph
+        graph={graph}
+        onFeatureClick={data => {
+          setFeatureData(data)
+        }}
+      />
+    </>
+  ) : null
+})
+
+export default GraphPanel

package/src/GraphGenomeView/components/Header.tsx

@@ -0,0 +1,90 @@
+import React, { useEffect, useState } from 'react'
+
+import { FileSelector } from '@jbrowse/core/ui'
+import { FileLocation, getSession } from '@jbrowse/core/util'
+import { openLocation } from '@jbrowse/core/util/io'
+import { Button, IconButton, TextField } from '@mui/material'
+import { observer } from 'mobx-react'
+
+import { Settings } from '@mui/icons-material'
+
+import SettingsDialog from './SettingsDialog'
+
+import type { GraphGenomeViewModel } from '../model'
+
+const Header = observer(function ({ model }: { model: GraphGenomeViewModel }) {
+  const { mode } = model
+  const [val, setVal] = useState('GRCh38#chr21:1000-2000')
+  const [loc, setLoc] = useState<FileLocation>()
+  useEffect(() => {
+    if (!loc) {
+      return
+    }
+    if ('uri' in loc && loc.uri) {
+      model.setGfaUrl(loc.uri)
+    } else {
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      ;(async () => {
+        try {
+          model.setError(undefined)
+          const data = await openLocation(loc).readFile('utf8')
+          model.setResultData(data)
+        } catch (e) {
+          console.error(e)
+          model.setError(e)
+        }
+      })()
+    }
+  })
+  return (
+    <div style={{ display: 'flex' }}>
+      {mode === 'files' ? (
+        <div style={{ maxWidth: 500 }}>
+          <FileSelector
+            name="GFA path"
+            inline
+            location={loc}
+            setLocation={loc => {
+              setLoc(loc)
+            }}
+          />
+        </div>
+      ) : (
+        <div>
+          <TextField
+            type="text"
+            variant="outlined"
+            margin="normal"
+            size="small"
+            value={val}
+            style={{ minWidth: 500 }}
+            onChange={event => {
+              setVal(event.target.value)
+            }}
+          />
+          <Button variant="contained" type="submit">
+            Submit
+          </Button>
+        </div>
+      )}
+      <div style={{ flexGrow: 1 }} />
+      <div>
+        <IconButton
+          onClick={() => {
+            getSession(model).queueDialog(handleClose => [
+              SettingsDialog,
+              {
+                handleClose,
+                model,
+              },
+            ])
+          }}
+        >
+          <Settings />
+        </IconButton>
+      </div>
+    </div>
+  )
+})
+
+export default Header

package/src/GraphGenomeView/components/SettingsDialog.tsx

@@ -0,0 +1,71 @@
+import React from 'react'
+
+import { Dialog } from '@jbrowse/core/ui'
+import {
+  Button,
+  DialogActions,
+  DialogContent,
+  FormControl,
+  FormControlLabel,
+  Radio,
+  RadioGroup,
+} from '@mui/material'
+import { observer } from 'mobx-react'
+
+import type { GraphGenomeViewModel } from '../model'
+
+const SettingsDialog = observer(function ({
+  model,
+  handleClose,
+}: {
+  model: GraphGenomeViewModel
+  handleClose: () => void
+}) {
+  const { mode } = model
+  return (
+    <Dialog open maxWidth="xl" title="Settings" onClose={handleClose}>
+      <DialogContent style={{ minWidth: 800 }}>
+        <FormControl component="fieldset">
+          <RadioGroup
+            value={mode}
+            onChange={event => {
+              model.setMode(event.target.value)
+            }}
+          >
+            <FormControlLabel
+              value="files"
+              control={<Radio />}
+              label="Use GFA files"
+            />
+            <FormControlLabel
+              value="server"
+              control={<Radio />}
+              label="Use GFA server"
+            />
+          </RadioGroup>
+        </FormControl>
+      </DialogContent>
+      <DialogActions>
+        <Button
+          variant="contained"
+          onClick={() => {
+            handleClose()
+          }}
+        >
+          Submit
+        </Button>
+        <Button
+          variant="contained"
+          color="secondary"
+          onClick={() => {
+            handleClose()
+          }}
+        >
+          Cancel
+        </Button>
+      </DialogActions>
+    </Dialog>
+  )
+})
+
+export default SettingsDialog

package/src/GraphGenomeView/index.ts

@@ -0,0 +1,19 @@
+import { lazy } from 'react'
+
+import PluginManager from '@jbrowse/core/PluginManager'
+import { ViewType } from '@jbrowse/core/pluggableElementTypes'
+
+import stateModelF from './model'
+
+const ReactComponent = lazy(() => import('./components/GraphGenomeView'))
+
+export default function ProteinViewF(pluginManager: PluginManager) {
+  pluginManager.addViewType(() => {
+    return new ViewType({
+      name: 'GraphGenomeView',
+      displayName: 'Graph genome view',
+      stateModel: stateModelF(),
+      ReactComponent,
+    })
+  })
+}

package/src/GraphGenomeView/model.ts

@@ -0,0 +1,110 @@
+import { BaseViewModel } from '@jbrowse/core/pluggableElementTypes'
+import { parseGFA } from 'graphgenomeviewer'
+import { autorun } from 'mobx'
+import { addDisposer, types } from 'mobx-state-tree'
+
+import { myfetchtext } from './util'
+
+import type { Instance } from 'mobx-state-tree'
+
+export default function stateModelFactory() {
+  return types.compose(
+    'GraphGenomeView',
+    BaseViewModel,
+    types
+      .model({
+        /**
+         * #property
+         */
+        type: 'GraphGenomeView',
+
+        /**
+         * #property
+         */
+        genomicRegionLocString: types.maybe(types.string),
+
+        /**
+         * #property
+         */
+        gfaUrl: types.maybe(types.string),
+        /**
+         * #property
+         */
+        mode: 'files',
+      })
+      .volatile(() => ({
+        /**
+         * #volatile
+         */
+        resultData: undefined as string | undefined,
+        /**
+         * #volatile
+         */
+        error: undefined as unknown,
+      }))
+      .views(self => ({
+        /**
+         * #getter
+         */
+        get graph() {
+          return self.resultData ? parseGFA(self.resultData) : undefined
+        },
+      }))
+      .actions(self => ({
+        /**
+         * #action
+         */
+        setMode(arg: string) {
+          self.mode = arg
+        },
+        /**
+         * #action
+         */
+        setError(arg: unknown) {
+          self.error = arg
+        },
+        /**
+         * #action
+         */
+        setResultData(arg: string) {
+          self.resultData = arg
+        },
+        /**
+         * #action
+         */
+        setGenomicRegionLocString(arg: string) {
+          self.genomicRegionLocString = arg
+        },
+        /**
+         * #action
+         */
+        setGfaUrl(url: string) {
+          self.gfaUrl = url
+        },
+      }))
+      .actions(self => ({
+        afterAttach() {
+          addDisposer(
+            self,
+            autorun(async () => {
+              if (!self.gfaUrl) {
+                return
+              }
+              try {
+                self.setError(undefined)
+                const url = self.gfaUrl
+                const data = await myfetchtext(url)
+                self.setResultData(data)
+              } catch (e) {
+                self.setError(e)
+                console.error(e)
+              }
+            }),
+          )
+        },
+      })),
+  )
+}
+
+export type GraphGenomeViewStateModel = ReturnType<typeof stateModelFactory>
+export type GraphGenomeViewModel = Instance<GraphGenomeViewStateModel>

package/src/GraphGenomeView/util.ts

@@ -0,0 +1,7 @@
+export async function myfetchtext(url: string) {
+  const res = await fetch(url)
+  if (!res.ok) {
+    throw new Error(`HTTP ${res.status} fetching ${url}`)
+  }
+  return res.text()
+}

package/src/declare.d.ts

@@ -0,0 +1 @@
+declare module '*.json'

package/src/index.ts

@@ -0,0 +1,28 @@
+import Plugin from '@jbrowse/core/Plugin'
+import PluginManager from '@jbrowse/core/PluginManager'
+import { AbstractSessionModel, isAbstractMenuManager } from '@jbrowse/core/util'
+import HubIcon from '@mui/icons-material/Hub'
+
+import { version } from '../package.json'
+import GraphGenomeViewF from './GraphGenomeView'
+
+export default class GraphGenomeViewer extends Plugin {
+  name = 'GraphGenomeViewer'
+  version = version
+
+  install(pluginManager: PluginManager) {
+    GraphGenomeViewF(pluginManager)
+  }
+
+  configure(pluginManager: PluginManager) {
+    if (isAbstractMenuManager(pluginManager.rootModel)) {
+      pluginManager.rootModel.appendToSubMenu(['Add'], {
+        label: 'Graph genome viewer',
+        icon: HubIcon,
+        onClick: (session: AbstractSessionModel) => {
+          session.addView('GraphGenomeView', {})
+        },
+      })
+    }
+  }
+}