adjust layout on Discovery Page

uc-cdis · Feb 22, 2024 · c7f895a · c7f895a
1 parent 2aac92c
commit c7f895a
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 21 deletions.
diff --git a/packages/frontend/package.json b/packages/frontend/package.json
@@ -21,7 +21,7 @@
     "copy-tailwind": "cp src/tailwind.cjs dist/tailwind.cjs",
     "build": "npm run compile && npm run types && npm run copy-tailwind && npm run rollup",
     "build:clean": "npm run clean && npm run build",
-    "build:watch": "npm run build -- --watch",
+    "build:watch": "npm run compile && npm run rollup -- --watch",
     "dev": "npm run build:watch"
   },
   "exports": {

diff --git a/packages/frontend/src/features/Discovery/Discovery.tsx b/packages/frontend/src/features/Discovery/Discovery.tsx
@@ -76,7 +76,7 @@ const Discovery = ({
               <Text size="xl">{discoveryConfig?.features?.pageTitle.text}</Text>
             ) : null
           }
-          <div className="flex items-center  p-2 mb-2 bg-base-max">
+          <div className="flex items-center  p-2 mb-4 bg-base-max rounded-lg">
             <SummaryStatisticPanel summaries={summaryStatistics} />
             <div className="flex-grow"></div>
             <div className="w-full">
@@ -111,7 +111,7 @@ const Discovery = ({
               opened={showAdvancedSearch}
               setAdvancedSearchFilters={setAdvancedSearchTerms}
             /> : false }
-            <div className="flex w-full bg-base-max p-4">
+            <div className="flex w-full bg-base-max p-4 rounded-lg">
               <DiscoveryTable
                 data={data}
                 hits={hits}

diff --git a/packages/frontend/src/features/Discovery/TableRenderers/CellRenderers.tsx b/packages/frontend/src/features/Discovery/TableRenderers/CellRenderers.tsx
@@ -32,7 +32,7 @@ export const RenderArrayCell: CellRendererFunction = ({
   return <span>value</span>;
 };
 
-export const RenderArrayCellNegativePositive : CellRendererFunction = ({
+export const RenderArrayCellNegativePositive: CellRendererFunction = ({
   value,
   cell,
 }: CellRenderFunctionProps) => {
@@ -56,7 +56,9 @@ export const RenderArrayCellNegativePositive : CellRendererFunction = ({
   return <span>{value as any}</span>;
 };
 
-export const RenderLinkCell : CellRendererFunction = ({ value }: CellRenderFunctionProps) => {
+export const RenderLinkCell: CellRendererFunction = ({
+  value,
+}: CellRenderFunctionProps) => {
   const content = value as string;
   return (
     <Link
@@ -70,32 +72,66 @@ export const RenderLinkCell : CellRendererFunction = ({ value }: CellRenderFunct
   );
 };
 
-const RenderStringCell : CellRendererFunction = ({ value }: CellRenderFunctionProps,  params? : JSONObject) => {
+const RenderStringCell: CellRendererFunction = (
+  { value }: CellRenderFunctionProps,
+  params?: JSONObject,
+) => {
   const content = value as string | string[];
   if (content === undefined || content === null) {
-    return <Text>{`${params && params?.valueIfNotAvailable ? params?.valueIfNotAvailable : ''}`}   </Text>;
+    return (
+      <Text>
+        {`${
+          params && params?.valueIfNotAvailable
+            ? params?.valueIfNotAvailable
+            : ''
+        }`}{' '}
+      </Text>
+    );
   }
   if (content == '') {
-    return <Text>{`${params && params?.valueIfNotAvailable ? params?.valueIfNotAvailable : ''}`}   </Text>;
+    return (
+      <Text>
+        {`${
+          params && params?.valueIfNotAvailable
+            ? params?.valueIfNotAvailable
+            : ''
+        }`}{' '}
+      </Text>
+    );
   }
   return <Text>{isArray(content) ? content.join(', ') : content}</Text>;
 };
 
-const RenderNumberCell : CellRendererFunction = ({ value }: CellRenderFunctionProps, params? : JSONObject) => {
+const RenderNumberCell: CellRendererFunction = (
+  { value }: CellRenderFunctionProps,
+  params?: JSONObject,
+) => {
+  const isContentEmpty = value === undefined || value === null;
+  const paramsValueIfNotAvailable = params && params?.valueIfNotAvailable;
   const content = value as number | number[];
-  if (content === undefined || content === null) {
-    return <Text>{`${params && params?.valueIfNotAvailable ? params?.valueIfNotAvailable : ''}`}   </Text>;
+
+  if (isContentEmpty) {
+    return (
+      <Text>{`${
+        paramsValueIfNotAvailable ? paramsValueIfNotAvailable : ''
+      }`}</Text>
+    );
   }
-  return (
-    <Text>
-      {isArray(content)
-        ? content.map((v) => v ? v.toLocaleString() : "").join('; ')
-        : content.toLocaleString()}
-    </Text>
-  );
+
+  let stringValue = '';
+  // check if content is an array of all numbers
+  if (isArray(content) && content.every((item) => typeof item === 'number')) {
+    stringValue = content.map((v) => (v ? v.toLocaleString() : '')).join('; ');
+  } else {
+    stringValue = content.toLocaleString();
+  }
+
+  return <Text>{stringValue}</Text>;
 };
 
-const RenderParagraphsCell : CellRendererFunction  = ({ value }: CellRenderFunctionProps) => {
+const RenderParagraphsCell: CellRendererFunction = ({
+  value,
+}: CellRenderFunctionProps) => {
   const content = value as string | string[];
   return (
     <React.Fragment>
@@ -117,7 +153,9 @@ interface TagData {
 
 // TODO Fix below
 // eslint-disable-next-line react/prop-types
-export const RenderTagsCell : CellRendererFunction = ({ value }: CellRenderFunctionProps) => {
+export const RenderTagsCell: CellRendererFunction = ({
+  value,
+}: CellRenderFunctionProps) => {
   const content = value as TagData[];
   const { discoveryConfig: config } = useDiscoveryContext();
   return (
@@ -128,7 +166,9 @@ export const RenderTagsCell : CellRendererFunction = ({ value }: CellRenderFunct
           <Badge
             key={name}
             role="button"
-            size="lg" radius="sm" variant="filled"
+            size="lg"
+            radius="sm"
+            variant="filled"
             tabIndex={0}
             aria-label={name}
             style={{