feat(anni): execute data fetch

annotation-interface/components/common/WithIcon.tsx

@@ -15,7 +15,7 @@ function WithIcon<T>({
     ...additionalProps
 }: PropsWithChildren<Props<T>>) {
     const iconElement = createElement(icon, {
-        className: `h-5 w-5 ${reverse ? 'ml-2' : 'mr-2'}`,
+        className: `h-5 w-5 ${children && (reverse ? 'ml-2' : 'mr-2')}`,
     });
     return createElement(
         parent ?? 'span',

annotation-interface/components/home/ControlPanel.tsx

@@ -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;

annotation-interface/pages/api/server-update.ts

@@ -2,6 +2,7 @@ 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;
@@ -26,6 +27,23 @@ const serverUpdateApi: NextApiHandler = async (req, res) => {
                 };
                 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();
         }

annotation-interface/pages/index.tsx

@@ -1,12 +1,14 @@
-import { ExclamationIcon } from '@heroicons/react/solid';
+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);
@@ -39,6 +41,7 @@ const Home = () => {
         fetchLastUpdateDates,
     );
     const lastUpdates = updatesResponse?.data;
+    const [controlVisible, setControlVisible] = useState(false);
     return (
         <>
             <PageHeading title="PharMe's Annotation Interface">
@@ -63,6 +66,16 @@ const Home = () => {
 
             <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">
@@ -80,6 +93,12 @@ const Home = () => {
                     </div>
                 </>
             )}
+            {controlVisible && (
+                <ControlPanel
+                    updates={lastUpdates}
+                    hide={() => setControlVisible(false)}
+                />
+            )}
         </>
     );
 };