feat!: updated allowed annotation values #489 (#498)

Author: MillenniumFalconMechanic

src/common/entities.ts

@@ -4,9 +4,8 @@ import { ColumnDef, RowData } from "@tanstack/react-table";
  * Model of a value of a metadata class.
  */
 export interface Attribute {
-  annotations?: {
-    [key in keyof DataDictionaryPrefix]: string; // Prefix to fragment mapping, e.g. cxg: "batch_condition".
-  };
+  // Prefix to fragment mapping, e.g. cxg: "batch_condition", or, general tags e.g. tier: "Tier 1" and bionetwork: ["gut"]
+  annotations?: Record<string, string | string[] | undefined>; // 'undefined' allows for mix of keys across attributes e.g. tier, or tier and cxg, or cxg
   description: string;
   example?: string; // Free text example of attribute
   multivalued: boolean; // True if attribute can have multiple values

src/components/DataDictionary/dataDictionary.tsx

@@ -21,13 +21,13 @@ export const DataDictionary = <T extends RowData = Attribute>({
   Title = DefaultTitle,
   TitleLayout = DefaultTitleLayout,
 }: DataDictionaryProps): JSX.Element => {
-  const { classes, columnDefs } = useDataDictionary<T>();
+  const { classes, columnDefs, title } = useDataDictionary<T>();
   const { spacing } = useLayoutSpacing();
   const outline = useMemo(() => buildClassesOutline(classes), [classes]);
   return (
     <View className={className}>
       <TitleLayout {...spacing}>
-        <Title />
+        <Title title={title} />
       </TitleLayout>
       <OutlineLayout {...spacing}>
         <Outline outline={outline} />

src/components/DataDictionary/hooks/UseDataDictionary/hook.ts

@@ -18,6 +18,7 @@ export const useDataDictionary = <
   return useMemo(() => {
     const classes = dataDictionaryConfig?.dataDictionary?.classes || [];
     const columnDefs = dataDictionaryConfig?.columnDefs || [];
-    return { classes, columnDefs };
+    const title = dataDictionaryConfig?.dataDictionary?.title || "";
+    return { classes, columnDefs, title };
   }, [dataDictionaryConfig]);
 };

src/components/DataDictionary/hooks/UseDataDictionary/types.ts

@@ -4,4 +4,5 @@ import { Attribute, Class } from "../../../../common/entities";
 export interface UseDataDictionary<T extends RowData = Attribute> {
   classes: Class<T>[];
   columnDefs: ColumnDef<T, T[keyof T]>[];
+  title: string;
 }

src/components/Layout/components/Header/header.styles.ts

@@ -4,6 +4,11 @@ import { AppBar as MAppBar } from "@mui/material";
 import { smokeMain } from "../../../../styles/common/mixins/colors";
 import { HEADER_HEIGHT } from "./common/constants";
 
+// See https://github.com/emotion-js/emotion/issues/1105.
+// See https://github.com/emotion-js/emotion/releases/tag/%40emotion%2Fcache%4011.10.2.
+const ignoreSsrWarning =
+  "/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */";
+
 export const AppBar = styled(MAppBar)`
   border-bottom: 1px solid ${smokeMain};
 
@@ -34,7 +39,7 @@ export const Left = styled.div`
   justify-content: flex-start;
 
   .MuiButton-navPrimary {
-    &:first-of-type {
+    &:first-child:not(style)${ignoreSsrWarning} { {
       margin-left: 24px;
     }
   }