Implement the publication viewer

Eplant/Species/arabidopsis/loaders/PublicationViewer/index.ts

@@ -0,0 +1,29 @@
+import axios from 'axios'
+import {
+  PublicationData,
+  GeneRIFsData,
+  PublicationViewerData
+} from "@eplant/views/PublicationViewer/types"
+import { View } from '@eplant/views/View'
+
+const out: View<PublicationViewerData>['loadData'] = async (
+  geneticElement,
+  loadEvent
+) => {
+  // Get publication data
+  const publications = await axios.get<PublicationData[]>(
+    `http://bar.utoronto.ca/webservices/bar_araport/` +
+      `publications_by_locus.php?locus=${geneticElement.id}`
+  )
+  // Get gene RIFs data
+  const geneRIFs = await axios.get<GeneRIFsData[]>(
+    `http://bar.utoronto.ca/webservices/bar_araport/` +
+      `generifs_by_locus.php?locus=${geneticElement.id}`
+  )
+  return {
+    publications,
+    geneRIFs,
+  }
+}
+
+export default out

Eplant/__tests__/views/PublicationViewer.test.tsx

@@ -0,0 +1,12 @@
+import exampleData from '@eplant/Species/arabidopsis/loaders/PublicationViewer/exampleData'
+import { PublicationViewer } from '@eplant/views/PublicationViewer'
+import '@testing-library/jest-dom'
+import { render } from '@testing-library/react'
+import * as React from 'react'
+
+describe('Publication Viewer', () => {
+  it('renders correctly', () => {
+    const s = render(<PublicationViewer.component {...exampleData} />)
+    expect(s).toMatchSnapshot()
+  })
+})

Eplant/views/PublicationViewer/GeneRIFs.tsx

@@ -0,0 +1,65 @@
+import { Button } from '@mui/material'
+import { DataGrid, GridColDef, GridRenderCellParams, GridToolbar } from '@mui/x-data-grid'
+import * as React from 'react'
+import { GeneRIFsData } from './types'
+
+const columns: GridColDef[] = [
+  {
+    field: 'annotation',
+    headerName: 'Annotation',
+    flex: 1,
+  },
+  {
+    field: 'link',
+    headerName: 'Link',
+    width: 130,
+    renderCell: (params: GridRenderCellParams<string>) => (
+      <Button href={params.value} variant="outlined" size="small">
+        VIEW PAPER
+      </Button>
+    ),
+  },
+]
+
+// Generate DataGrid rows from publication data
+const toRows = (geneRIFs: GeneRIFsData[]) => {
+  const props: {
+    id: string
+    annotation: string
+    link: string
+  }[] = []
+  geneRIFs.forEach((geneRIF) => {
+    props.push({
+      id: geneRIF.publication.pubmed_id,
+      annotation: geneRIF.annotation,
+      link: `https://www.ncbi.nlm.nih.gov/pubmed/${geneRIF.publication.pubmed_id}`,
+    })
+  })
+  return props
+}
+
+export const GeneRIFs = ({ geneRIFs }: { geneRIFs: GeneRIFsData[] }) => {
+  const [rows, setRows] = React.useState(toRows(geneRIFs))
+  React.useEffect(() => {
+    setRows(toRows(geneRIFs))
+  }, [geneRIFs])
+  return (
+    <>
+      <DataGrid
+        rows={rows}
+        autoHeight
+        disableColumnFilter
+        disableColumnSelector
+        disableDensitySelector
+        columns={columns}
+        components={{ Toolbar: GridToolbar }}
+        componentsProps={{
+          toolbar: {
+            showQuickFilter: true,
+            quickFilterProps: { debounceMs: 500 },
+          },
+        }}
+      />
+    </>
+  )
+}

Eplant/views/PublicationViewer/Publications.tsx

@@ -0,0 +1,80 @@
+import { Button } from '@mui/material'
+import {
+  DataGrid,
+  GridColDef,
+  GridRenderCellParams,
+  GridToolbar
+} from '@mui/x-data-grid'
+import * as React from 'react'
+import { PublicationData } from './types'
+
+const columns: GridColDef[] = [
+  { field: 'author', headerName: 'Author', flex: 0.15 },
+  { field: 'year', headerName: 'Year', flex: 0.15 },
+  { field: 'journal', headerName: 'Journal', flex: 0.15 },
+  { field: 'title', headerName: 'Title', flex: 0.5 },
+  {
+    field: 'link',
+    headerName: 'Link',
+    width: 130,
+    renderCell: (params: GridRenderCellParams<string>) => (
+      <Button href={params.value} variant="outlined" size="small">
+        VIEW PAPER
+      </Button>
+    ),
+  },
+]
+
+// Generate DataGrid rows from publication data
+const toRows = (publications: PublicationData[]) => {
+  const props: {
+    id: string
+    author: string
+    year: number
+    journal: string
+    title: string
+    link: string
+  }[] = []
+  publications.forEach((publication) => {
+    props.push({
+      id: publication.pubmed_id,
+      author: publication.first_author,
+      year: publication.year,
+      journal: publication.journal,
+      title: publication.title,
+      link: `https://www.ncbi.nlm.nih.gov/pubmed/${publication.pubmed_id}`,
+    })
+  })
+  return props
+}
+
+export const Publications = ({
+  publications,
+}: {
+  publications: PublicationData[]
+}) => {
+  const [rows, setRows] = React.useState(toRows(publications))
+  React.useEffect(() => {
+    setRows(toRows(publications))
+  }, [publications])
+
+  return (
+    <>
+      <DataGrid
+        rows={rows}
+        autoHeight
+        disableColumnFilter
+        disableColumnSelector
+        disableDensitySelector
+        columns={columns}
+        components={{ Toolbar: GridToolbar }}
+        componentsProps={{
+          toolbar: {
+            showQuickFilter: true,
+            quickFilterProps: { debounceMs: 500 },
+          },
+        }}
+      />
+    </>
+  )
+}

Eplant/views/PublicationViewer/index.tsx

@@ -0,0 +1,37 @@
+import { styled, Tab, Tabs, Typography } from '@mui/material'
+import * as React from 'react'
+import { ViewProps } from '../View'
+import { GeneRIFs } from './GeneRIFs'
+import { Publications } from './Publications'
+import { PublicationViewerData, TabValues } from './types'
+
+const SecondaryColour = styled('span')(({ theme }) => ({
+  color: theme.palette.text.secondary,
+}))
+
+export const PublicationViewer = {
+  name: 'Publication Viewer',
+  dataType: PublicationViewerData,
+  component({ geneticElement, activeData }: ViewProps<PublicationViewerData>) {
+    const [tab, setTab] = React.useState<TabValues>('publications')
+    return (
+      <div>
+        <Typography variant='h4'>
+          {geneticElement.id} <SecondaryColour>I</SecondaryColour> {geneticElement.aliases.join(', ')}
+        </Typography>
+        <Tabs value={tab} onChange={(e, val) => setTab(val)}>
+          <Tab label="PUBLICATIONS" value="publications" />
+          <Tab label="GENE RIFS" value="geneRIFs" />
+        </Tabs>
+        <div hidden={tab !== 'publications'}>
+          {tab === 'publications' && (
+            <Publications publications={activeData.publications} />
+          )}
+        </div>
+        <div hidden={tab !== 'geneRIFs'}>
+          {tab === 'geneRIFs' && <GeneRIFs geneRIFs={activeData.geneRIFs} />}
+        </div>
+      </div>
+    )
+  },
+}

Eplant/views/PublicationViewer/types.ts

@@ -0,0 +1,24 @@
+import { z } from 'zod';
+
+
+export const PublicationData = z.object({
+  first_author: z.string(),
+  journal: z.string(),
+  pubmed_id: z.string(),
+  title: z.string(),
+  year: z.number().int(),
+});
+export type PublicationData = z.infer<typeof PublicationData>;
+export const GeneRIFsData = z.object({
+  annotation: z.string(),
+  locus: z.string(),
+  publication: z.object({ pubmed_id: z.string() }),
+});
+export type GeneRIFsData = z.infer<typeof GeneRIFsData>;
+
+export const PublicationViewerData = z.object({
+  publications: PublicationData.array(),
+  geneRIFs: GeneRIFsData.array(),
+});
+export type PublicationViewerData = z.infer<typeof PublicationViewerData>;
+export type TabValues = 'publications' | 'geneRIFs';

package.json

@@ -50,6 +50,7 @@
     "@fontsource/roboto-mono": "^4.5.7",
     "@mui/icons-material": "^5.8.4",
     "@mui/material": "^5.8.4",
+    "@mui/x-data-grid": "^5.12.3",
     "axios": "^0.27.2",
     "lodash": "^4.17.21",
     "next": "^12.1.6",

stories/views/PublicationViewer.stories.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react'
+import { ComponentMeta, Story } from '@storybook/react'
+import data from '@eplant/Species/arabidopsis/loaders/PublicationViewer/exampleData'
+import { PublicationViewer } from '@eplant/views/PublicationViewer'
+
+export default {
+  title: 'Publication Viewer',
+  component: PublicationViewer.component,
+} as ComponentMeta<typeof PublicationViewer.component>
+
+export const Default: Story = () => (
+  <PublicationViewer.component {...data}></PublicationViewer.component>
+)