Reinstated Subject feature panel with circos plot

* Adjusted Subject page layout with PrimeFlex Grid

Resolves #196

src/containers/subjects/SubjectFeatureTable/index.tsx

@@ -0,0 +1,72 @@
+import { useToastContext } from '../../../providers/ToastProvider';
+import { usePortalSubjectDataAPI } from '../../../api/subject';
+import React, { useEffect } from 'react';
+import CircularLoaderWithText from '../../../components/CircularLoaderWithText';
+import { Galleria } from 'primereact/galleria';
+
+type Props = { subjectId: string };
+
+function SubjectFeatureTable(props: Props) {
+  let images: string[] = [];
+
+  const { subjectId } = props;
+
+  const { toastShow } = useToastContext();
+
+  const { isLoading, isError, data } = usePortalSubjectDataAPI(subjectId);
+
+  useEffect(() => {
+    if (isError) {
+      toastShow({
+        severity: 'error',
+        summary: 'Something went wrong!',
+        detail: 'Unable to fetch data from Portal API',
+        life: 3000,
+      });
+    }
+  }, [isError]);
+
+  if (isLoading) {
+    return <CircularLoaderWithText />;
+  }
+
+  if (data && !isLoading) {
+    const { features } = data;
+    if (Array.isArray(features) && features.length) {
+      // feature_content_url = features[0];
+      images = features;
+    }
+  }
+
+  const itemTemplate = (item: string) => {
+    return <img src={item} alt={''} style={{ width: '100%', display: 'block' }} />;
+  };
+
+  return (
+    <div>
+      {images ? (
+        // <img src={feature_content_url} style={{ width: '100%', height: 'auto' }} alt={''} />
+        <div className='card'>
+          <Galleria
+            value={images}
+            numVisible={5}
+            circular
+            // style={{ maxWidth: '640px' }}
+            showItemNavigators
+            showItemNavigatorsOnHover
+            showIndicators
+            showThumbnails={false}
+            item={itemTemplate}
+          />
+        </div>
+      ) : (
+        <img
+          src='data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs='
+          alt={''}
+        />
+      )}
+    </div>
+  );
+}
+
+export default SubjectFeatureTable;

src/main.css

@@ -17,4 +17,8 @@ code {
 
 * {
   font-size: 14px;
-}
+}
+
+.p-galleria .p-galleria-item-nav {
+  background-color: slategray !important;
+}

src/pages/subjects/SubjectOverviewPage/index.tsx

@@ -6,6 +6,7 @@ import { useParams } from 'react-router-dom';
 import SubjectOverviewTable from '../../../containers/subjects/SubjectOverviewTable';
 import SampleInformationTable from '../../../containers/subjects/SampleInformationTable';
 import AnalysisResultsTable from '../../../containers/subjects/AnalysisResultTable';
+import SubjectFeatureTable from '../../../containers/subjects/SubjectFeatureTable';
 
 function SubjectOverviewPage() {
   const { subjectId } = useParams();
@@ -15,11 +16,16 @@ function SubjectOverviewPage() {
   }
 
   return (
-    <div>
-      <div className=''>
+    <div className={'grid'}>
+      <div className={'col-12 lg:col-4'}>
         <Panel className='mb-3 mr-3 inline-block vertical-align-top w-12' header='Overview'>
           <SubjectOverviewTable subjectId={subjectId} />
         </Panel>
+        <Panel header={'Feature'} toggleable={true} style={{ marginTop: '1em' }}>
+          <SubjectFeatureTable subjectId={subjectId} />
+        </Panel>
+      </div>
+      <div className={'col-12 lg:col-8'}>
         <Panel
           className='mb-3 mr-3 inline-block vertical-align-top w-12'
           header='Sample Information'
@@ -28,7 +34,7 @@ function SubjectOverviewPage() {
         </Panel>
         <Panel
           className='mb-3 mr-3 inline-block vertical-align-top w-12'
-          header='Analysis Result'
+          header='Analysis Results'
           toggleable>
           <AnalysisResultsTable subjectId={subjectId} />
         </Panel>