feat: add cellxgene collection id to atlas forms (#484) (#486)

clevercanary · Dec 17, 2024 · a36d125 · a36d125
1 parent 73bd56a
commit a36d125
Show file tree

Hide file tree

Showing 17 changed files with 227 additions and 37 deletions.
diff --git a/app/common/constants.ts b/app/common/constants.ts
@@ -1,3 +1,22 @@
+import { escapeRegExp } from "@databiosphere/findable-ui/lib/common/utils";
+import {
+  ATLAS_ECOSYSTEM_PATHS,
+  ATLAS_ECOSYSTEM_URLS,
+} from "../../site-config/common/constants";
+
 export const DEFAULT_HEADERS = {
   "content-type": "application/json",
 };
+
+export const CELLXGENE_COLLECTION_ID_REGEX = new RegExp(
+  `^$|^(?:${escapeRegExp(
+    ATLAS_ECOSYSTEM_URLS.CELLXGENE_PORTAL +
+      ATLAS_ECOSYSTEM_PATHS.CELLXGENE_COLLECTION
+  )}/)?[0-9a-fA-F]{8}(?:-[0-9a-fA-F]{4}){3}-[0-9a-fA-F]{12}$`
+);
+
+export const HCA_PROJECT_ID_REGEX = new RegExp(
+  `^$|^(?:${escapeRegExp(
+    ATLAS_ECOSYSTEM_URLS.HCA_EXPLORER + ATLAS_ECOSYSTEM_PATHS.HCA_PROJECT
+  )}/)?[0-9a-fA-F]{8}(?:-[0-9a-fA-F]{4}){3}-[0-9a-fA-F]{12}$`
+);
diff --git a/...nts/Section/components/SourceStudy/components/View/components/Identifiers/identifiers.tsx b/...nts/Section/components/SourceStudy/components/View/components/Identifiers/identifiers.tsx
@@ -30,7 +30,11 @@ export const Identifiers = ({
   const {
     formStatus: { isReadOnly },
   } = formManager;
-  const { control, watch } = formMethod;
+  const {
+    control,
+    formState: { errors },
+    watch,
+  } = formMethod;
   const watchedFields = watch([FIELD_NAME.PUBLICATION_STATUS]);
   const [publicationStatus] = watchedFields;
   const isPublishedPreprint =
@@ -48,6 +52,8 @@ export const Identifiers = ({
             <Input
               {...field}
               {...DEFAULT_INPUT_PROPS.HCA_PROJECT_ID}
+              error={Boolean(errors[FIELD_NAME.HCA_PROJECT_ID])}
+              helperText={errors[FIELD_NAME.HCA_PROJECT_ID]?.message}
               isFilled={Boolean(field.value)}
               label={
                 <Fragment>
@@ -68,6 +74,8 @@ export const Identifiers = ({
             <Input
               {...field}
               {...DEFAULT_INPUT_PROPS.CELLXGENE_COLLECTION_ID}
+              error={Boolean(errors[FIELD_NAME.CELLXGENE_COLLECTION_ID])}
+              helperText={errors[FIELD_NAME.CELLXGENE_COLLECTION_ID]?.message}
               isFilled={Boolean(field.value)}
               label={
                 <Fragment>

diff --git a/app/components/Forms/common/constants.ts b/app/components/Forms/common/constants.ts
@@ -1,4 +1,5 @@
 export const SECTION_TITLES = {
   GENERAL_INFORMATION: "General Information",
+  IDENTIFIERS: "Identifiers",
   INTEGRATION_LEAD: "Integration Lead",
 };
diff --git a/app/components/Forms/components/Atlas/common/constants.ts b/app/components/Forms/components/Atlas/common/constants.ts
@@ -51,8 +51,23 @@ const WAVE: CommonControllerConfig = {
   },
 };
 
+const CELLXGENE_COLLECTION_ID: CommonControllerConfig = {
+  inputProps: {
+    isFullWidth: true,
+    label: "CELLxGENE collection ID",
+  },
+  labelLink: true,
+  name: FIELD_NAME.CELLXGENE_ATLAS_COLLECTION,
+};
+
 export const GENERAL_INFO_NEW_ATLAS_CONTROLLERS: ControllerConfig<NewAtlasData>[] =
   [SHORT_NAME, VERSION, BIO_NETWORK, WAVE];
 
+export const IDENTIFIERS_NEW_ATLAS_CONTROLLERS: ControllerConfig<NewAtlasData>[] =
+  [CELLXGENE_COLLECTION_ID];
+
 export const GENERAL_INFO_VIEW_ATLAS_CONTROLLERS: ControllerConfig<AtlasEditData>[] =
   [...GENERAL_INFO_NEW_ATLAS_CONTROLLERS, TARGET_COMPLETION];
+
+export const IDENTIFIERS_VIEW_ATLAS_CONTROLLERS: ControllerConfig<AtlasEditData>[] =
+  [...IDENTIFIERS_NEW_ATLAS_CONTROLLERS];
diff --git a/app/components/Forms/components/Atlas/common/sections.ts b/app/components/Forms/components/Atlas/common/sections.ts
@@ -16,6 +16,10 @@ export const ADD_ATLAS_SECTION_CONFIGS: SectionConfig<
     sectionTitle: SECTION_TITLES.GENERAL_INFORMATION,
     showDivider: true,
   },
+  {
+    controllerConfigs: C.IDENTIFIERS_NEW_ATLAS_CONTROLLERS,
+    sectionTitle: SECTION_TITLES.IDENTIFIERS,
+  },
   {
     SectionCard: NewAtlasIntegrationLeadSection,
     sectionTitle: SECTION_TITLES.INTEGRATION_LEAD,
@@ -30,6 +34,10 @@ export const VIEW_ATLAS_SECTION_CONFIGS: SectionConfig<
     controllerConfigs: C.GENERAL_INFO_VIEW_ATLAS_CONTROLLERS,
     sectionTitle: SECTION_TITLES.GENERAL_INFORMATION,
   },
+  {
+    controllerConfigs: C.IDENTIFIERS_VIEW_ATLAS_CONTROLLERS,
+    sectionTitle: SECTION_TITLES.IDENTIFIERS,
+  },
   {
     SectionCard: ViewAtlasIntegrationLeadSection,
     sectionTitle: SECTION_TITLES.INTEGRATION_LEAD,

diff --git a/app/components/common/Form/components/Controllers/common/entities.ts b/app/components/common/Form/components/Controllers/common/entities.ts
@@ -2,6 +2,7 @@ import { FieldValues, Path } from "react-hook-form";
 import { YupValidatedFormValues } from "../../../../../../hooks/useForm/common/entities";
 import { InputProps } from "../../Input/input";
 import { SelectProps } from "../../Select/select";
+import { LabelLinkConfig } from "../components/InputController/inputController";
 import { SelectControllerProps } from "../components/SelectController/selectController";
 
 export type ControllerInputConfig = Pick<InputProps, PickedInputProps>;
@@ -16,6 +17,7 @@ type PickedSelectProps = "displayEmpty" | "label";
 
 export interface ControllerConfig<T extends FieldValues> {
   inputProps?: ControllerInputConfig;
+  labelLink?: LabelLinkConfig | true;
   name: Path<YupValidatedFormValues<T>>;
   selectProps?: ControllerSelectConfig<T>;
 }
diff --git a/...ponents/common/Form/components/Controllers/components/InputController/inputController.tsx b/...ponents/common/Form/components/Controllers/components/InputController/inputController.tsx
@@ -1,25 +1,34 @@
-import { OutlinedInputProps as MOutlinedInputProps } from "@mui/material/OutlinedInput/OutlinedInput";
+import { Link } from "@databiosphere/findable-ui/lib/components/Links/components/Link/link";
+import { TypographyNoWrap } from "app/components/common/Typography/components/TypographyNoWrap/typographyNoWrap";
+import { Fragment, ReactNode } from "react";
 import { Controller, FieldValues, UseControllerProps } from "react-hook-form";
 import {
   FormMethod,
   YupValidatedFormValues,
 } from "../../../../../../../hooks/useForm/common/entities";
 import { FormManager } from "../../../../../../../hooks/useFormManager/common/entities";
-import { Input } from "../../../Input/input";
+import { Input, InputProps } from "../../../Input/input";
+
+export interface LabelLinkConfig {
+  getUrl?: (v: string | null) => string | null;
+  label?: string;
+}
 
 export interface InputControllerProps<T extends FieldValues, R = undefined>
   extends UseControllerProps<YupValidatedFormValues<T>> {
   className?: string;
   formManager: FormManager;
   formMethod: FormMethod<T, R>;
-  inputProps?: Partial<Omit<MOutlinedInputProps, "ref">>;
+  inputProps?: Partial<Omit<InputProps, "ref">>;
+  labelLink?: LabelLinkConfig | true;
 }
 
 export const InputController = <T extends FieldValues, R = undefined>({
   className,
   formManager,
   formMethod,
-  inputProps,
+  inputProps: { label, ...inputProps } = {},
+  labelLink,
   name,
   ...props
 }: InputControllerProps<T, R>): JSX.Element => {
@@ -38,6 +47,15 @@ export const InputController = <T extends FieldValues, R = undefined>({
           error={invalid}
           helperText={error?.message}
           isFilled={Boolean(field.value)}
+          label={
+            labelLink
+              ? getLabelWithLink(
+                  label,
+                  labelLink === true ? {} : labelLink,
+                  field.value
+                )
+              : label
+          }
           readOnly={isReadOnly}
           {...inputProps}
           {...props}
@@ -46,3 +64,31 @@ export const InputController = <T extends FieldValues, R = undefined>({
     />
   );
 };
+
+/**
+ * Get input label including a link derived from the input value.
+ * @param label - Primary label.
+ * @param param1 - Link config.
+ * @param param1.getUrl - Function that takes the input value (cast to string or null) and returns the link URL, or null if the link shouldn't be displayed.
+ * @param param1.label - Link label.
+ * @param value - Input value.
+ * @returns Input label with link.
+ */
+function getLabelWithLink(
+  label: ReactNode,
+  {
+    getUrl = (v): string | null => (v ? v : null),
+    label: linkLabel = "Visit link",
+  }: LabelLinkConfig,
+  value: unknown
+): JSX.Element {
+  const url = getUrl(
+    value === null || value === undefined ? null : String(value)
+  );
+  return (
+    <Fragment>
+      <TypographyNoWrap>{label}</TypographyNoWrap>
+      {url !== null && <Link label={linkLabel} url={url} />}
+    </Fragment>
+  );
+}
diff --git a/app/components/common/Form/components/Controllers/controllers.tsx b/app/components/common/Form/components/Controllers/controllers.tsx
@@ -19,27 +19,30 @@ export const Controllers = <T extends FieldValues, R = undefined>({
 }: ControllersProps<T, R>): JSX.Element => {
   return (
     <Fragment>
-      {controllerConfigs.map(({ inputProps, name, selectProps }, i) => {
-        const { SelectComponent } = selectProps || {};
-        return SelectComponent ? (
-          <SelectController
-            key={i}
-            {...selectProps}
-            name={name}
-            formManager={formManager}
-            formMethod={formMethod}
-            SelectComponent={SelectComponent}
-          />
-        ) : (
-          <InputController
-            key={i}
-            {...inputProps}
-            name={name}
-            formManager={formManager}
-            formMethod={formMethod}
-          />
-        );
-      })}
+      {controllerConfigs.map(
+        ({ inputProps, labelLink, name, selectProps }, i) => {
+          const { SelectComponent } = selectProps || {};
+          return SelectComponent ? (
+            <SelectController
+              key={i}
+              {...selectProps}
+              name={name}
+              formManager={formManager}
+              formMethod={formMethod}
+              SelectComponent={SelectComponent}
+            />
+          ) : (
+            <InputController
+              key={i}
+              inputProps={inputProps}
+              name={name}
+              formManager={formManager}
+              formMethod={formMethod}
+              labelLink={labelLink}
+            />
+          );
+        }
+      )}
     </Fragment>
   );
 };
diff --git a/app/views/AddNewAtlasView/common/constants.ts b/app/views/AddNewAtlasView/common/constants.ts
@@ -1,5 +1,6 @@
 export const FIELD_NAME = {
   BIO_NETWORK: "network",
+  CELLXGENE_ATLAS_COLLECTION: "cellxgeneAtlasCollection",
   INTEGRATION_LEAD: "integrationLead",
   SHORT_NAME: "shortName",
   VERSION: "version",

diff --git a/app/views/AddNewAtlasView/common/schema.ts b/app/views/AddNewAtlasView/common/schema.ts
@@ -3,6 +3,7 @@ import {
   NETWORK_KEYS,
   WAVES,
 } from "../../../apis/catalog/hca-atlas-tracker/common/constants";
+import { CELLXGENE_COLLECTION_ID_REGEX } from "../../../common/constants";
 import { FIELD_NAME } from "./constants";
 
 export const newAtlasSchema = object({
@@ -24,6 +25,13 @@ export const newAtlasSchema = object({
     .required("Network is required")
     .notOneOf([""], "Network is required")
     .oneOf(NETWORK_KEYS, `Network must be one of: ${NETWORK_KEYS.join(", ")}`),
+  [FIELD_NAME.CELLXGENE_ATLAS_COLLECTION]: string()
+    .default("")
+    .notRequired()
+    .matches(
+      CELLXGENE_COLLECTION_ID_REGEX,
+      "CELLxGENE collection ID must be a UUID or CELLxGENE collection URL"
+    ),
   [FIELD_NAME.SHORT_NAME]: string()
     .default("")
     .required("Short name is required"),

diff --git a/app/views/AddNewAtlasView/common/utils.ts b/app/views/AddNewAtlasView/common/utils.ts
@@ -8,3 +8,14 @@ import { getAtlasesBreadcrumb } from "../../../components/Detail/components/Trac
 export function getBreadcrumbs(): Breadcrumb[] {
   return [getAtlasesBreadcrumb()];
 }
+
+/**
+ * Returns the identifier URL's ID.
+ * @param identifierUrl - Identifier URL.
+ * @returns identifier ID.
+ */
+export function getIdentifierId(identifierUrl: string | null): string | null {
+  if (!identifierUrl) return null;
+  const paths = identifierUrl.split("/");
+  return paths.pop() || "";
+}
diff --git a/app/views/AddNewAtlasView/hooks/useAddAtlasFormManager.ts b/app/views/AddNewAtlasView/hooks/useAddAtlasFormManager.ts
@@ -9,6 +9,7 @@ import { FormManager } from "../../../hooks/useFormManager/common/entities";
 import { useFormManager } from "../../../hooks/useFormManager/useFormManager";
 import { ROUTE } from "../../../routes/constants";
 import { NewAtlasData } from "../common/entities";
+import { getIdentifierId } from "../common/utils";
 
 export const useAddAtlasFormManager = (
   formMethod: FormMethod<NewAtlasData, HCAAtlasTrackerAtlas>
@@ -21,7 +22,7 @@ export const useAddAtlasFormManager = (
 
   const onSave = useCallback(
     (payload: NewAtlasData, url?: string) => {
-      onSubmit(API.CREATE_ATLAS, METHOD.POST, payload, {
+      onSubmit(API.CREATE_ATLAS, METHOD.POST, mapPayload(payload), {
         onSuccess: (data) => onSuccess(data.id, url),
       });
     },
@@ -31,6 +32,19 @@ export const useAddAtlasFormManager = (
   return useFormManager(formMethod, { onDiscard, onSave });
 };
 
+/**
+ * Maps the payload.
+ * Strips ID from identifier CELLxGENE collection.
+ * @param payload - Payload.
+ * @returns payload.
+ */
+function mapPayload(payload: NewAtlasData): NewAtlasData {
+  return {
+    ...payload,
+    cellxgeneAtlasCollection: getIdentifierId(payload.cellxgeneAtlasCollection),
+  };
+}
+
 /**
  * Side effect "onSuccess"; redirects to the atlas page, or to the specified URL.
  * @param atlasId - Atlas ID.

diff --git a/app/views/AtlasView/hooks/useEditAtlasForm.ts b/app/views/AtlasView/hooks/useEditAtlasForm.ts
@@ -1,3 +1,7 @@
+import {
+  ATLAS_ECOSYSTEM_PATHS,
+  ATLAS_ECOSYSTEM_URLS,
+} from "../../../../site-config/common/constants";
 import { HCAAtlasTrackerAtlas } from "../../../apis/catalog/hca-atlas-tracker/common/entities";
 import { AtlasEditData as APIAtlasEditData } from "../../../apis/catalog/hca-atlas-tracker/common/schema";
 import { PathParameter } from "../../../common/entities";
@@ -45,6 +49,9 @@ function mapSchemaValues(atlas?: HCAAtlasTrackerAtlas): Partial<AtlasEditData> {
   return {
     [FIELD_NAME.INTEGRATION_LEAD]: sortedIntegrationLead,
     [FIELD_NAME.BIO_NETWORK]: atlas.bioNetwork,
+    [FIELD_NAME.CELLXGENE_ATLAS_COLLECTION]: mapCELLxGENECollectionId(
+      atlas.cellxgeneAtlasCollection
+    ),
     [FIELD_NAME.SHORT_NAME]: atlas.shortName,
     [FIELD_NAME.TARGET_COMPLETION]:
       atlas.targetCompletion ?? TARGET_COMPLETION_NULL,
@@ -53,6 +60,18 @@ function mapSchemaValues(atlas?: HCAAtlasTrackerAtlas): Partial<AtlasEditData> {
   };
 }
 
+/**
+ * Maps CELLxGENE collection ID to URL.
+ * @param cellxgeneCollectionId - CELLxGENE collection ID.
+ * @returns URL.
+ */
+function mapCELLxGENECollectionId(
+  cellxgeneCollectionId: string | null
+): string {
+  if (!cellxgeneCollectionId) return "";
+  return `${ATLAS_ECOSYSTEM_URLS.CELLXGENE_PORTAL}${ATLAS_ECOSYSTEM_PATHS.CELLXGENE_COLLECTION}/${cellxgeneCollectionId}`;
+}
+
 /**
  * Returns API payload mapped from data.
  * @param data - Form data.