feat: Add Object Id Prefix (#1743)

* rough draft add object id prefix

* chore: Updated [rdev] values.yaml image tags to sha-b8b2dd2

* add placeholder and object id logic

* chore: Updated [rdev] values.yaml image tags to sha-584c623

* remove console logs

* adjust to match designs

* chore: Updated [rdev] values.yaml image tags to sha-0d77058

* off by 2 px

* chore: Updated [rdev] values.yaml image tags to sha-10566ed

---------

Co-authored-by: rainandbare <[email protected]>
Co-authored-by: czi-github-helper[bot] <+czi-github-helper[bot]@users.noreply.github.com>

Author: rainandbare

.infra/rdev/values.yaml

@@ -2,7 +2,7 @@ stack:
   services:
     frontend:
       image:
-        tag: sha-aede296
+        tag: sha-10566ed
       replicaCount: 1
       env:
         - name: API_URL_V2

frontend/packages/data-portal/app/components/AnnotationFilter/AnnotationFilter.tsx

@@ -12,7 +12,7 @@ import { useFeatureFlag } from 'app/utils/featureFlags'
 
 import { AnnotationSoftwareFilter } from './AnnotationSoftwareFilter'
 import { MethodTypeFilter } from './MethodTypeFilter'
-import { ObjectIdFilter } from './ObjectIdFilter'
+import { ObjectIdFilter } from './ObjectIdFilter/ObjectIdFilter'
 
 export function AnnotationFilter() {
   const { t } = useI18n()

frontend/packages/data-portal/app/components/AnnotationFilter/ObjectIdFilter.tsx

@@ -0,0 +1,96 @@
+import { RegexFilter } from 'app/components/Filters'
+import { GO, UNIPROTKB } from 'app/constants/annotationObjectIdLinks'
+import { QueryParams } from 'app/constants/query'
+import { useI18n } from 'app/hooks/useI18n'
+
+import {
+  PrefixValueProvider,
+  usePrefixValueContext,
+} from './PrefixValueContext'
+
+const prefixOptions = [
+  {
+    id: 'go',
+    name: 'GO ID',
+    details: 'Gene Ontology ID',
+    link: GO,
+    prefix: 'GO:',
+    placeholder: '0016020 or GO:0016020',
+  },
+  {
+    id: 'uniprotkb',
+    name: 'UniProtKB',
+    details: 'The UniProt Knowledgebase',
+    link: UNIPROTKB,
+    prefix: 'UniProtKB:',
+    placeholder: 'P01267 or UniProtKB:P01267',
+  },
+]
+
+const prefixes = prefixOptions.map((opt) =>
+  opt.prefix.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&'),
+) // escape any special chars
+const prefixPattern = prefixes.join('|') // e.g. 'GO:|UNIPROTKB:'
+const validationRegex = new RegExp(`^(${prefixPattern})?[A-Z0-9]+$`, 'i')
+
+export function ObjectIdFilterContent() {
+  const { t } = useI18n()
+  const { prefixValue, setPrefixValue, setInputDropdownValue } =
+    usePrefixValueContext()
+  return (
+    <RegexFilter
+      id="object-id-input"
+      title={`${t('filterByObjectId')}:`}
+      label={t('objectId')}
+      queryParam={QueryParams.ObjectId}
+      regex={validationRegex}
+      prefixOptions={prefixOptions}
+      displayNormalizer={(value) => {
+        return value
+      }}
+      paramNormalizer={(value) => {
+        if (!prefixValue) {
+          return value
+        }
+        // if the value has a prefix and it is the same as the selected prefix, keep it
+        if (value.toLowerCase().startsWith(prefixValue.prefix.toLowerCase())) {
+          const id = value.split(':')[1]
+          if (prefixValue.prefix === 'UniProtKB:') {
+            // if the prefix is UniProtKB, we need to make the id uppercase (e.g. P01267)
+            return `${prefixValue.prefix}${id.toUpperCase()}`
+          }
+          return `${prefixValue.prefix}${id}`
+        }
+
+        // If the value has a different prefix from the list, update the selected prefix
+        const matchingPrefix = prefixOptions.find((prefixOption) =>
+          value.toLowerCase().startsWith(prefixOption.prefix.toLowerCase()),
+        )
+
+        if (matchingPrefix) {
+          setPrefixValue(matchingPrefix)
+          setInputDropdownValue(matchingPrefix.name)
+          const id = value.split(':')[1]
+          if (matchingPrefix.prefix === 'UniProtKB:') {
+            return `${matchingPrefix.prefix}${id.toUpperCase()}`
+          }
+          return `${matchingPrefix.prefix}${id}`
+        }
+
+        // if the value has no prefix, add the selected prefix
+        if (value.match(validationRegex)) {
+          return `${prefixValue.prefix}${value}`
+        }
+        return value
+      }}
+    />
+  )
+}
+
+export function ObjectIdFilter() {
+  return (
+    <PrefixValueProvider initialOptions={prefixOptions}>
+      <ObjectIdFilterContent />
+    </PrefixValueProvider>
+  )
+}

frontend/packages/data-portal/app/components/AnnotationFilter/ObjectIdFilter/ObjectIdFilter.tsx

@@ -0,0 +1,59 @@
+import { DefaultAutocompleteOption } from '@czi-sds/components'
+import React, { createContext, useContext, useState } from 'react'
+
+export type PrefixOption = DefaultAutocompleteOption & {
+  link: string
+  prefix: string
+  placeholder: string
+}
+
+type PrefixValueContextType = {
+  prefixValue: PrefixOption | null
+  setPrefixValue: (value: PrefixOption | null) => void
+  inputDropdownValue: string | null
+  setInputDropdownValue: (value: string | null) => void
+}
+
+const PrefixValueContext = createContext<PrefixValueContextType | undefined>(
+  undefined,
+)
+
+export function PrefixValueProvider({
+  children,
+  initialOptions,
+}: {
+  children: React.ReactNode
+  initialOptions: PrefixOption[]
+}) {
+  const [prefixValue, setPrefixValue] = useState<PrefixOption | null>(
+    initialOptions[0] ?? null,
+  )
+  const [inputDropdownValue, setInputDropdownValue] = useState<string | null>(
+    initialOptions[0]?.name ?? null,
+  )
+
+  const contextValue = React.useMemo(
+    () => ({
+      prefixValue,
+      setPrefixValue,
+      inputDropdownValue,
+      setInputDropdownValue,
+    }),
+    [prefixValue, inputDropdownValue],
+  )
+
+  return (
+    <PrefixValueContext.Provider value={contextValue}>
+      {children}
+    </PrefixValueContext.Provider>
+  )
+}
+
+export function usePrefixValueContext() {
+  const ctx = useContext(PrefixValueContext)
+  if (!ctx)
+    throw new Error(
+      'usePrefixValueContext must be used within PrefixValueProvider',
+    )
+  return ctx
+}

frontend/packages/data-portal/app/components/AnnotationFilter/ObjectIdFilter/PrefixValueContext.tsx

@@ -1,4 +1,4 @@
-import { ObjectIdFilter } from 'app/components/AnnotationFilter/ObjectIdFilter'
+import { ObjectIdFilter } from 'app/components/AnnotationFilter/ObjectIdFilter/ObjectIdFilter'
 import {
   AnnotatedObjectNameFilter,
   AnnotatedObjectShapeTypeFilter,

frontend/packages/data-portal/app/components/DatasetFilter/AnnotationMetadataFilterSection.tsx

@@ -25,16 +25,19 @@ export function NameOrIdFilterSection({
         id: 'portal-id-input',
         label: `${t('datasetId')}:`,
         queryParam: QueryParams.DatasetId,
+        placeholder: t('datasetIdPlaceholder'),
       },
       {
         id: 'empiar-id-input',
         label: `${t('empiarID')}:`,
         queryParam: QueryParams.EmpiarId,
+        placeholder: t('empiarIDPlaceholder'),
       },
       {
         id: 'emdb-id-input',
         label: `${t('emdb')}:`,
         queryParam: QueryParams.EmdbId,
+        placeholder: t('emdbPlaceholder'),
       },
     ],
     [t],

frontend/packages/data-portal/app/components/DatasetFilter/NameOrIdFilterSection.tsx

@@ -8,9 +8,10 @@ export function DepositionIdFilter() {
   return (
     <EntityIdFilter
       id="deposition-id-input"
-      title={t('filterByDepositionId')}
+      title={`${t('filterByDepositionId')}:`}
       label={t('depositionId')}
       queryParam={QueryParams.DepositionId}
+      placeholder={t('depositionIdPlaceholder')}
     />
   )
 }

frontend/packages/data-portal/app/components/DepositionFilter/DepositionIdFilter.tsx

@@ -14,11 +14,13 @@ export function AuthorFilter({ label }: { label: string }) {
         id: 'author-name-input',
         label: `${t('authorName')}:`,
         queryParam: QueryParams.AuthorName,
+        placeholder: t('authorNamePlaceholder'),
       },
       {
         id: 'author-orcid-input',
         label: `${t('authorOrcid')}:`,
         queryParam: QueryParams.AuthorOrcid,
+        placeholder: t('authorOrcidPlaceholder'),
       },
     ],
     [t],

frontend/packages/data-portal/app/components/Filters/AuthorFilter.tsx

@@ -122,12 +122,13 @@ export function DropdownFilterButton({
         open={open}
         anchorOrigin={{ vertical: 40, horizontal: 'left' }}
       >
-        <div className="px-sds-l py-sds-default min-w-[278px] max-w-[320px] flex flex-col">
+        <div className="px-sds-l py-sds-default min-w-[278px] max-w-[350px] flex flex-col">
           {description}
           {children}
 
-          <div className="flex items-center gap-sds-default mt-sds-l">
+          <div className="flex items-center justify-stretch gap-sds-default mt-sds-l">
             <Button
+              className="w-full"
               disabled={disabled}
               sdsType="primary"
               sdsStyle="square"
@@ -140,6 +141,7 @@ export function DropdownFilterButton({
             </Button>
 
             <Button
+              className="w-full"
               sdsType="secondary"
               sdsStyle="square"
               onClick={() => {