Merge branch 'develop' into PXP-11267_manifest_download

lerna.json

@@ -1,5 +1,5 @@
 {
   "packages": ["packages/*"],
   "useWorkspaces": true,
-  "version": "0.10.13"
+  "version": "0.10.14"
 }

package.json

@@ -55,7 +55,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "jest-canvas-mock": "^2.4.0",
     "jest-environment-jsdom": "^29.7.0",
-    "lerna": "^6.6.2",
+    "lerna": ">=6.6.2 <7.0.0",
     "prettier": "^2.7.1",
     "rollup":"^3.29.4",
     "rollup-plugin-swc3": "^0.10.2",

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gen3/core",
-  "version": "0.10.13",
+  "version": "0.10.14",
   "author": "CTDS",
   "description": "Core module for gen3 frontend. Provides an interface for interacting with the gen3 API and a redux store for managing state.",
   "license": "Apache-2.0",

packages/core/rollup.config.mjs

@@ -45,6 +45,7 @@ const config = [
       json(),
       swc({
         // All options are optional
+        "sourceMaps": true,
         include: /\.[mc]?[jt]sx?$/, // default
         exclude: /node_modules/, // default
         tsconfig: 'tsconfig.json', // default

packages/core/src/types/index.ts

@@ -28,6 +28,16 @@ export const isJSONObject = (data: any): data is JSONObject => {
   return typeof data === 'object' && data !== null && !Array.isArray(data);
 };
 
+export const isJSONValue = (data: any): data is JSONValue => {
+  return (
+    typeof data === 'string' ||
+    typeof data === 'number' ||
+    typeof data === 'boolean' ||
+    Array.isArray(data) && data.every(isJSONValue) ||
+    isJSONObject(data)
+  );
+};
+
 export type HistogramDataArray = Array<HistogramData>;
 
 export const isHistogramData = (data: any): data is HistogramData => {

packages/frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gen3/frontend",
-  "version": "0.10.13",
+  "version": "0.10.14",
   "description": "Gen3 frontend components, content management, and pages",
   "keywords": [],
   "author": "Center for Translational Data Science",

packages/frontend/src/components/Buttons/DropdownButtons/types.ts

@@ -10,6 +10,6 @@ export interface DownloadButtonProps {
   actionArgs?: Record<string, string>;
 }
 
-export interface DropdownButtonProps extends Omit<DownloadButtonProps, "action" |"actionArgs"> {
+export interface DropdownButtonProps extends Omit<DownloadButtonProps, 'action' |'actionArgs'> {
   dropdownItems: ReadonlyArray<Partial<DownloadButtonProps>>;
 }

packages/frontend/src/components/Content/LandingPageContent.tsx

@@ -111,8 +111,7 @@ const LandingPageContent = ({ content }: LandingPageContentProp) => {
                     <Image
                       src={`${basePath}${obj.image.src}`}
                       alt={obj.image.alt}
-                      layout="fill"
-                      objectFit="contain"
+                      fill
                     />
                   </div>
                 );

packages/frontend/src/components/DropdownWithIcon/DropdownWithIcon.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { Button, Menu } from '@mantine/core';
 import { FloatingPosition } from '@mantine/core/lib/Floating/types';
 import { ReactNode } from 'react';
@@ -128,15 +129,15 @@ export const DropdownWithIcon = ({
         className="border-1 border-secondary"
       >
         {menuLabelText && (
-          <>
+          <React.Fragment>
             <Menu.Label
               className={menuLabelCustomClass ?? 'font-bold'}
               data-testid="menu-label"
             >
               {menuLabelText}
             </Menu.Label>
             <Menu.Divider />
-          </>
+          </React.Fragment>
         )}
         {dropdownElements.map(({ title, onClick, icon, disabled }, idx) => (
           <Menu.Item

packages/frontend/src/components/Protected/ProtectedContent.tsx

@@ -34,7 +34,7 @@ const ProtectedContent = ({ children, referer }: ProtectedContentProps) => {
     if (pending) return <LoadingOverlay visible={pending} />;
     else
       return (
-        <React.Fragment>
+       <div className="w-full h-full">
           <LoadingOverlay visible={pending} />
           <Center>
             <Paper shadow="md" p="md">
@@ -44,11 +44,11 @@ const ProtectedContent = ({ children, referer }: ProtectedContentProps) => {
               </Text>
             </Paper>
           </Center>
-        </React.Fragment>
+        </div>
       );
   }
 
-  return <>{children}</>;
+  return <React.Fragment>{children}</React.Fragment>;
 };
 
 export default ProtectedContent;

packages/frontend/src/components/charts/EnumFacetChart.tsx

@@ -2,7 +2,7 @@
  * A BarChart for Enumerated Facets. The as the chart is wrapped from EnumFacet it does not
  * require the Core Data hooks.
  */
-
+import React from 'react';
 import { useEffect, useState } from 'react';
 import { Box, Loader, Tooltip } from '@mantine/core';
 import { useElementSize } from '@mantine/hooks';
@@ -139,12 +139,12 @@ const EnumBarChartTooltip: React.FC<EnumBarChartTooltipProps> = ({
       <foreignObject x={x} y={y}>
         <Tooltip
           label={
-            <>
+            <React.Fragment>
               <b>{datum?.x}</b>
               <p>
                 {datum?.y.toLocaleString()} {unitLabel}
               </p>
-            </>
+            </React.Fragment>
           }
           withArrow
           opened

packages/frontend/src/components/status.tsx

@@ -4,7 +4,7 @@ import { useGetStatus } from '@gen3/core';
 import { Code } from '@mantine/core';
 
 const Status = () => {
-    const { data, error } = useGetStatus();
+    const { data } = useGetStatus();
     return (
         <div>
             <h1>Status</h1>

packages/frontend/src/features/CohortBuilder/types.ts

@@ -90,7 +90,7 @@ export type ActionButtonWithArgsFunction = (
 ) => Promise<void>;
 
 
-export interface DownloadButtonPropsWithAction extends Omit<DownloadButtonProps, "action" |"actionArgs"> {
+export interface DownloadButtonPropsWithAction extends Omit<DownloadButtonProps, 'action' |'actionArgs'> {
     actionFunction: ActionButtonWithArgsFunction;
     actionArgs: Record<string, any>;
 

packages/frontend/src/features/Discovery/DataLoaders/MDSAllLocal/DataLoader.ts

@@ -263,7 +263,7 @@ const useSearchMetadata = ({
     storeFields: [uidField],
     idField: uidField,
     extractField: extractValue,
-    //  processTerm: (term) => suffixes(term, 3),
+  //  processTerm: (term) => suffixes(term, 3),
     searchOptions: {
       processTerm: MiniSearch.getDefault('processTerm'),
     },

packages/frontend/src/features/Discovery/Discovery.tsx

@@ -76,10 +76,9 @@ const Discovery = ({
               <Text size="xl">{discoveryConfig?.features?.pageTitle.text}</Text>
             ) : null
           }
-          <div className="flex items-center  p-2 mb-4 bg-base-max rounded-lg">
+          <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">
+            <div className="w-3/4 flex flex-col">
               <SearchInputWithSuggestions
                 suggestions={suggestions}
                 clearSearch={() => {

packages/frontend/src/features/Discovery/DiscoveryProvider.tsx

@@ -8,6 +8,9 @@ interface DiscoveryProviderValue {
   studyDetails: JSONObject;
 }
 
+
+
+
 const DiscoveryContext = createContext<DiscoveryProviderValue>({
   discoveryConfig: {} as DiscoveryConfig,
   setStudyDetails: () => null,

packages/frontend/src/features/Discovery/DiscoveryTable.tsx

@@ -120,7 +120,7 @@ const DiscoveryTable = ({
           textAlign: 'center',
           padding: theme.spacing.md,
           fontWeight: 'bold',
-          fontSize: theme.fontSizes.xl,
+          fontSize: theme.fontSizes.lg,
           textTransform: 'uppercase',
         };
       },

packages/frontend/src/features/Discovery/Search/SearchInput.tsx

@@ -14,7 +14,7 @@ const SearchInput = ({ searchChanged, placeholder }: SearchInputProps) => {
         icon={<SearchIcon size={24} />}
         placeholder={placeholder || 'Search...'}
         data-testid="textbox-search-bar"
-        aria-label="App Search Input"
+        aria-label="metadata search input"
         value={searchTerm}
         onChange={(event) => {
           searchChanged(event.target.value);

packages/frontend/src/features/Discovery/Statistics/StatisticsRendererFactory.tsx

@@ -16,7 +16,7 @@ const defaultStatisticRenderer = ({
       <Text size="2rem" color="accent">
         {value}
       </Text>
-      <Text size="sm" color="primary">
+      <Text size="sm" color="primary" className="uppercase">
         {label}
       </Text>
     </Stack>

packages/frontend/src/features/Discovery/Statistics/SummaryStatisticPanel.tsx

@@ -2,9 +2,6 @@ import React from 'react';
 import { SummaryStatistics } from './types';
 import StatisticRendererFactory from './StatisticsRendererFactory';
 
-// TODO remove this once stats are working
-const SAMPLE_VALUES = [1023, 2392];
-
 const BuildSummaryStatisticPanel = (summaries: SummaryStatistics = []) => {
   return summaries.map((summary) => {
     const { name, field, type } = summary;
@@ -15,15 +12,11 @@ const BuildSummaryStatisticPanel = (summaries: SummaryStatistics = []) => {
         'default',
       );
 
-      return element({
+      return ( element({
         value: summary.value ?? 'N/A',
         label: name,
         key: `stats-item-${name}-${field}-${type}`,
-        className:
-          summaries.length > 1
-            ? 'px-5 border-accent-darker first:border-r-2 last:border-right-0'
-            : 'px-5',
-      });
+      }));
     }
   });
 };
@@ -32,9 +25,23 @@ interface SummaryStatisticPanelProps {
   summaries: SummaryStatistics;
 }
 
+const columns = [
+  'grid-cols-0',
+  'grid-cols-1',
+  'grid-cols-2',
+  'grid-cols-3',
+  'grid-cols-4',
+  'grid-cols-5',
+  'grid-cols-6',
+  'grid-cols-7',
+  'grid-cols-8',
+  'grid-cols-9',
+  'grid-cols-10',
+];
+
 const SummaryStatisticPanel = ({ summaries }: SummaryStatisticPanelProps) => {
   return (
-    <div className="flex items-center">
+    <div className={`grid ${columns[summaries.length]} grow shrink-0 divide-x-2 divide-accent`} >
       {BuildSummaryStatisticPanel(summaries)}
     </div>
   );

packages/frontend/src/features/Discovery/Statistics/index.ts

@@ -1 +1,6 @@
-export * from './types';
+import {
+  type SummaryStatisticsConfig,
+  type StatisticsDataResponse,
+} from './types';
+
+export { type SummaryStatisticsConfig, type StatisticsDataResponse };

packages/frontend/src/features/Discovery/StudyDetails/DetailsAuthorizationIcon.tsx

@@ -1,7 +1,7 @@
 import { DataAuthorization, AccessLevel } from '../types';
 import { JSONObject } from '@gen3/core';
-import {  Badge } from '@mantine/core';
-import { FiUnlock as UnlockOutlined } from 'react-icons/fi';
+import { Badge } from '@mantine/core';
+import { FiUnlock as UnlockOutlined, FiLock as Locked } from 'react-icons/fi';
 import { accessibleFieldName } from '../types';
 
 interface DetailsAccessProps {
@@ -11,18 +11,20 @@ interface DetailsAccessProps {
 
 const DetailsAuthorizationIcon = ({ studyData, dataAccess } : DetailsAccessProps) => {
 
+  const accessStyle = "flex w-full items-center rounded-sm border-2 py-3 px-1";
+
   return (
-    <div>
-      {dataAccess.enabled &&
+    <div className="flex mb-2">
+      {(dataAccess.enabled &&
         studyData[accessibleFieldName]
-        && (studyData[accessibleFieldName] === AccessLevel.ACCESSIBLE ? (
-          <Badge pl={0} size="lg" color="green" radius="xl" leftSection={<UnlockOutlined/>}>
+        && (studyData[accessibleFieldName] === AccessLevel.ACCESSIBLE) ? (
+          <div className={`${accessStyle} bg-green-100 border-green-500 text-black pl-2`}>
                  You have access to this data.
-          </Badge>
+          </div>
         ) : (
-          <Badge pl={0} size="lg" color="yellow" radius="xl" leftSection={<UnlockOutlined/>}>
+          <div className={`${accessStyle} bg-yellow-100 border-yellow-500 text-black pl-2`}>
                 You do not have access to this data.
-          </Badge>
+          </div>
         ))}
     </div>
   );