-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #364 from hpi-dhc/issue/340-control-panel
`anni`: Control Panel
- Loading branch information
Showing
22 changed files
with
419 additions
and
64 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,94 @@ | ||
| import { CloudDownloadIcon } from '@heroicons/react/solid'; | ||
| import axios from 'axios'; | ||
| import { useState } from 'react'; | ||
| import { useSWRConfig } from 'swr'; | ||
|
|
||
| import { FetchTarget, LastUpdatesDto } from '../../pages/api/server-update'; | ||
| import WithIcon from '../common/WithIcon'; | ||
|
|
||
| type Props = { | ||
| updates: LastUpdatesDto | undefined; | ||
| hide: () => void; | ||
| }; | ||
|
|
||
| const ControlPanel = ({ updates, hide }: Props) => { | ||
| const { mutate } = useSWRConfig(); | ||
| const [isLoading, setIsLoading] = useState(false); | ||
| const [message, setMessage] = useState(''); | ||
| const fetchServerData = async (target: FetchTarget) => { | ||
| setIsLoading(true); | ||
| setMessage(''); | ||
| try { | ||
| await axios.post('/api/server-update', { target }); | ||
| setMessage('Success!'); | ||
| } catch { | ||
| setMessage( | ||
| `An unexpected error occured. Try again or contact the Annotation Server's maintainer`, | ||
| ); | ||
| } | ||
| mutate('/api/server-update'); | ||
| setIsLoading(false); | ||
| }; | ||
| return ( | ||
| <div | ||
| className="fixed top-0 left-0 w-full h-full bg-black bg-opacity-80 text-white text-opacity-80 backdrop-blur-sm" | ||
| onClick={() => !isLoading && hide()} | ||
| > | ||
| <div | ||
| className="max-w-screen-md m-auto py-20 space-y-6" | ||
| onClick={(e) => e.stopPropagation()} | ||
| > | ||
| <h2 className="text-2xl font-bold">Fetch new data</h2> | ||
| <p> | ||
| Note that fetching data may take up to ten minutes and users | ||
| may experience undefined behavior during this time period. | ||
| Use with caution and keep this page open while fetching | ||
| data. | ||
| </p> | ||
| <p>{message}</p> | ||
| {isLoading ? ( | ||
| <div className="flex justify-center"> | ||
| <div className="relative"> | ||
| <WithIcon | ||
| icon={CloudDownloadIcon} | ||
| className="absolute animate-ping top-0 left-0" | ||
| /> | ||
| <WithIcon icon={CloudDownloadIcon}> | ||
| Fetching data ... | ||
| </WithIcon> | ||
| </div> | ||
| </div> | ||
| ) : ( | ||
| <> | ||
| <div> | ||
| <WithIcon | ||
| as="button" | ||
| icon={CloudDownloadIcon} | ||
| onClick={() => fetchServerData('all')} | ||
| > | ||
| {updates?.medications ? 'Update' : 'Fetch'} all | ||
| data | ||
| </WithIcon> | ||
| </div> | ||
| {updates?.medications && ( | ||
| <div> | ||
| <WithIcon | ||
| as="button" | ||
| icon={CloudDownloadIcon} | ||
| onClick={() => | ||
| fetchServerData('guidelines') | ||
| } | ||
| > | ||
| {updates?.guidelines ? 'Update' : 'Fetch'}{' '} | ||
| CPIC guidelines | ||
| </WithIcon> | ||
| </div> | ||
| )} | ||
| </> | ||
| )} | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default ControlPanel; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| import axios from 'axios'; | ||
| import { NextApiHandler } from 'next'; | ||
|
|
||
| export type FetchDate = Date | null; | ||
| export type FetchTarget = 'all' | 'guidelines'; | ||
| export interface LastUpdatesDto { | ||
| medications: FetchDate; | ||
| guidelines: FetchDate; | ||
| } | ||
|
|
||
| const serverUpdateApi: NextApiHandler = async (req, res) => { | ||
| const { method } = req; | ||
| try { | ||
| switch (method) { | ||
| case 'GET': | ||
| const [medicationsRes, guidelinesRes] = await Promise.all([ | ||
| axios.get<FetchDate>( | ||
| `http://${process.env.AS_API}/medications/last_update`, | ||
| ), | ||
| axios.get<FetchDate>( | ||
| `http://${process.env.AS_API}/guidelines/last_update`, | ||
| ), | ||
| ]); | ||
| const lastUpdates: LastUpdatesDto = { | ||
| medications: medicationsRes.data, | ||
| guidelines: guidelinesRes.data, | ||
| }; | ||
| res.status(200).json(lastUpdates); | ||
| return; | ||
|
|
||
| case 'POST': | ||
| const target = req.body.target as FetchTarget; | ||
| switch (target) { | ||
| case 'all': | ||
| await axios.post(`http://${process.env.AS_API}/init`); | ||
| break; | ||
| case 'guidelines': | ||
| await axios.post( | ||
| `http://${process.env.AS_API}/guidelines`, | ||
| ); | ||
| break; | ||
| default: | ||
| throw new Error(); | ||
| } | ||
| res.status(201).json({ success: true }); | ||
| return; | ||
| default: | ||
| throw new Error(); | ||
| } | ||
| } catch { | ||
| res.status(400).json({ success: false }); | ||
| } | ||
| }; | ||
|
|
||
| export default serverUpdateApi; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,106 @@ | ||
| import { CloudDownloadIcon, ExclamationIcon } from '@heroicons/react/solid'; | ||
| import axios from 'axios'; | ||
| import dayjs from 'dayjs'; | ||
| import LocalizedFormat from 'dayjs/plugin/localizedFormat'; | ||
| import RelativeTime from 'dayjs/plugin/relativeTime'; | ||
| import { useState } from 'react'; | ||
| import useSWR from 'swr'; | ||
|
|
||
| import PageHeading from '../components/common/PageHeading'; | ||
| import WithIcon from '../components/common/WithIcon'; | ||
| import ControlPanel from '../components/home/ControlPanel'; | ||
| import { LastUpdatesDto } from './api/server-update'; | ||
|
|
||
| dayjs.extend(RelativeTime); | ||
| dayjs.extend(LocalizedFormat); | ||
|
|
||
| const fetchLastUpdateDates = async (url: string) => | ||
| await axios.get<LastUpdatesDto>(url); | ||
|
|
||
| const dateDisplay = ( | ||
| lastUpdates: LastUpdatesDto | undefined, | ||
| key: keyof LastUpdatesDto, | ||
| ) => { | ||
| if (!lastUpdates) return null; | ||
| const date = lastUpdates[key]; | ||
| if (!date) return <WithIcon icon={ExclamationIcon}>missing</WithIcon>; | ||
| return ( | ||
| <p | ||
| data-bs-toggle="tooltip" | ||
| data-bs-placement="bottom" | ||
| title={dayjs(date).format('lll')} | ||
| > | ||
| Last updated {dayjs(date).fromNow()} | ||
| </p> | ||
| ); | ||
| }; | ||
|
|
||
| const Home = () => { | ||
| return <div>TODO</div>; | ||
| const { data: updatesResponse, error } = useSWR( | ||
| '/api/server-update', | ||
| fetchLastUpdateDates, | ||
| ); | ||
| const lastUpdates = updatesResponse?.data; | ||
| const [controlVisible, setControlVisible] = useState(false); | ||
| return ( | ||
| <> | ||
| <PageHeading title="PharMe's Annotation Interface"> | ||
| Welcome to the curator's interface to the{' '} | ||
| <span className="italic">Annotation Server</span>: PharMe's | ||
| hub for all user-agnostic data. PharMe uses{' '} | ||
| <span className="italic">external data</span> from{' '} | ||
| <a className="underline" href="https://go.drugbank.com"> | ||
| DrugBank | ||
| </a>{' '} | ||
| and{' '} | ||
| <a className="underline" href="https://cpicpgx.org"> | ||
| CPIC | ||
| </a>{' '} | ||
| as well as <span className="italic">internal data</span> defined | ||
| by{' '} | ||
| <a className="underline" href="https://cpicpgx.org"> | ||
| Annotations | ||
| </a> | ||
| . | ||
| </PageHeading> | ||
|
|
||
| <div className="pb-2 border-b border-black border-opacity-10 flex justify-between"> | ||
| <h2 className="font-bold">External data status</h2> | ||
| {!error && ( | ||
| <WithIcon | ||
| as="button" | ||
| icon={CloudDownloadIcon} | ||
| reverse | ||
| onClick={() => setControlVisible(true)} | ||
| > | ||
| Fetch new data | ||
| </WithIcon> | ||
| )} | ||
| </div> | ||
| {error ? ( | ||
| <WithIcon as="p" icon={ExclamationIcon} className="p-2"> | ||
| Unable to connect to Annotation Server. | ||
| </WithIcon> | ||
| ) : ( | ||
| <> | ||
| <div className="p-2 flex justify-between"> | ||
| <p>DrugBank: drug names, synonyms, descriptions</p> | ||
| {dateDisplay(lastUpdates, 'medications')} | ||
| </div> | ||
| <div className="p-2 flex justify-between"> | ||
| <p>CPIC: PGx guidelines</p> | ||
| {dateDisplay(lastUpdates, 'guidelines')} | ||
| </div> | ||
| </> | ||
| )} | ||
| {controlVisible && ( | ||
| <ControlPanel | ||
| updates={lastUpdates} | ||
| hide={() => setControlVisible(false)} | ||
| /> | ||
| )} | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default Home; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.