feat(FOROME-1417): Adding a rubric select for solution create dialog

* feat(FOROME-1417): Adding a rubric select for solution create dialog

Co-authored-by: Vladislav <Lapk1n@yandex.ru>

Author: AndreyUstyumenko

src/components/solution-control/solution-create-dialog/solution-create-dialog.tsx

@@ -1,8 +1,14 @@
 import { ReactElement, useEffect, useState } from 'react'
 
+import {
+  ExploreGenomeTypesDictionary,
+  genomeTypesOptions,
+  TGenomeOptionsKeys,
+} from '@core/enum/explore-genome-types-enum'
 import { t } from '@i18n'
 import { Dialog } from '@ui/dialog'
 import { Input } from '@ui/input'
+import { Select } from '@ui/select'
 import { ISolutionEntryDescription } from '@service-providers/common'
 import { validatePresetName } from '@utils/validation/validatePresetName'
 
@@ -11,7 +17,7 @@ interface ISolutionCreateDialogProps {
   isOpen?: boolean
   controlName: string
   onClose: () => void
-  onCreate: (solutionName: string) => void
+  onCreate: (solutionName: string, rubric?: TGenomeOptionsKeys) => void
 }
 
 export const SolutionCreateDialog = ({
@@ -22,6 +28,9 @@ export const SolutionCreateDialog = ({
   onCreate,
 }: ISolutionCreateDialogProps): ReactElement => {
   const [solutionName, setSolutionName] = useState('')
+  const [rubric, setRubric] =
+    useState<TGenomeOptionsKeys | undefined>(undefined)
+  const [selectValue, setSelectValue] = useState<string | undefined>(undefined)
   const [isValidationError, setIsValidationError] = useState(false)
   const [isSameNameError, setIsSameNameError] = useState(false)
 
@@ -45,14 +54,30 @@ export const SolutionCreateDialog = ({
     )
   }, [solutionName, solutions])
 
+  const onChangeRubric = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const { value } = e.target
+    setSelectValue(value)
+
+    if (value === 'empty') {
+      setRubric(undefined)
+      return
+    }
+
+    const rubricKey = Object.entries(ExploreGenomeTypesDictionary).find(
+      ([, val]) => val === value,
+    )?.[0]
+
+    setRubric(rubricKey as TGenomeOptionsKeys)
+  }
+
   return (
     <Dialog
       isOpen={isOpen}
       onClose={onClose}
       title={t('solutionControl.createDialog.title', { controlName })}
       applyText={t('general.create')}
       isApplyDisabled={hasError || !solutionName}
-      onApply={() => onCreate(solutionName)}
+      onApply={() => onCreate(solutionName, rubric)}
     >
       <Input
         value={solutionName}
@@ -62,6 +87,19 @@ export const SolutionCreateDialog = ({
         })}
         onChange={event => setSolutionName(event.target.value)}
       />
+
+      <div className="flex flex-col mt-[16px] text-12">
+        <label>{t('solutionControl.createDialog.assignSolutionPack')}</label>
+        <Select
+          options={genomeTypesOptions}
+          className="py-[5px] px-[4px]"
+          value={selectValue}
+          onChange={onChangeRubric}
+          reset
+          resetText="Choose the type"
+        />
+      </div>
+
       {hasError && (
         <div className="text-red-secondary text-12">{errorText}</div>
       )}

src/core/enum/explore-genome-types-enum.ts

@@ -18,3 +18,21 @@ export const ExploreGenomeTypesDictionary = {
 } as const
 
 export type TExploreGenomeKeys = keyof typeof ExploreGenomeKeys
+
+export type TGenomeOptionsKeys = Exclude<
+  TExploreGenomeKeys,
+  'BuildInclusionExclusion' | 'ExploreData'
+>
+
+export type TGenomeOptionsValues =
+  typeof ExploreGenomeTypesDictionary[TGenomeOptionsKeys]
+
+export const genomeTypesOptions = Object.entries(ExploreGenomeTypesDictionary)
+  .filter(([key]) =>
+    [
+      ExploreGenomeKeys.ACMGSecondary,
+      ExploreGenomeKeys.PhenotypeBased,
+      ExploreGenomeKeys.GeneticFirst,
+    ].includes(key as any),
+  )
+  .map(([, value]) => value) as TGenomeOptionsValues[]

src/i18n/locales/en.ts

@@ -77,6 +77,7 @@ export const en = {
       controlNamePlaceholder: 'Enter {controlName} Name',
       solutionNameAlreadyExists:
         '{controlName} "{solutionName}" already exists',
+      assignSolutionPack: 'Assign Solution Pack',
     },
     deleteDialog: {
       title: 'Delete {controlName}',
@@ -219,7 +220,7 @@ export const en = {
     createDerivedDS: 'Create Derived DS',
     datasetCreation: 'Dataset Creation',
     addDatasetTitle: 'Add new dataset',
-    label: 'Dataset Name:',
+    label: 'Dataset Name',
     attention:
       'Attention: Zone filters (Gene, Gene List, Sample, Tags) do not participate in dataset creation',
     addDataset: 'Add dataset',

src/pages/filter/common/filter-control/create-entry-button/create-entry-button.tsx

@@ -1,24 +1,51 @@
-import { ReactElement } from 'react'
+import { ReactElement, useCallback } from 'react'
 
+import { TGenomeOptionsKeys } from '@core/enum/explore-genome-types-enum'
 import { useModal } from '@core/hooks/use-modal'
 import { t } from '@i18n'
+import filterStore from '@store/filter'
+import filterDtreesStore from '@store/filter-dtrees'
+import filterPresetsStore from '@store/filter-presets'
 import { Button } from '@ui/button'
 import { SolutionCreateDialog } from '@components/solution-control/solution-create-dialog'
+import presetsCardStore from '@pages/main/components/selected-dataset/build-flow/components/cards/presets-card/presets-card.store'
 import { ISolutionEntryDescription } from '@service-providers/common'
-
+import { FilterControlOptionsNames } from '../filter-control.const'
 interface ICreateEntryProps {
-  solutionName: string
+  pageName: FilterControlOptionsNames
   availableSolutionEntries: ISolutionEntryDescription[] | undefined
-  createSolutionEntry: (entryName: string) => void
 }
 
 export const CreateEntryButton = ({
-  solutionName,
+  pageName,
   availableSolutionEntries,
-  createSolutionEntry,
 }: ICreateEntryProps): ReactElement => {
   const [createDialog, openCreateDialog, closeCreateDialog] = useModal()
 
+  const solutionName =
+    pageName === FilterControlOptionsNames.dtree ? pageName : 'Preset'
+
+  const onCreateSolution = useCallback(
+    (entryName: string, rubric?: TGenomeOptionsKeys) => {
+      closeCreateDialog()
+
+      if (pageName === FilterControlOptionsNames.dtree) {
+        filterDtreesStore.createDtree(entryName, rubric)
+      } else if (pageName === FilterControlOptionsNames.refiner) {
+        filterPresetsStore.createPreset(
+          entryName,
+          filterStore.conditions,
+          rubric,
+        )
+      }
+
+      pageName === FilterControlOptionsNames.dtree
+        ? presetsCardStore.refreshDtrees()
+        : presetsCardStore.refreshPresets()
+    },
+    [closeCreateDialog, pageName],
+  )
+
   return (
     <>
       <Button
@@ -32,10 +59,7 @@ export const CreateEntryButton = ({
         solutions={availableSolutionEntries}
         onClose={closeCreateDialog}
         controlName={solutionName}
-        onCreate={entryName => {
-          closeCreateDialog()
-          createSolutionEntry(entryName)
-        }}
+        onCreate={onCreateSolution}
       />
     </>
   )

src/pages/filter/common/filter-control/filter-control.interface.tsx

@@ -4,7 +4,6 @@ import { FilterControlOptionsNames } from './filter-control.const'
 export interface IFilterControlProps {
   SolutionControl: React.ElementType
   TextEditorButton?: React.ElementType
-  createSolutionEntry: (entryName: string) => void
   availableSolutionEntries: ISolutionEntryDescription[] | undefined
   isForwardAllowed: boolean
   isBackwardAllowed: boolean

src/pages/filter/common/filter-control/filter-control.tsx

@@ -30,7 +30,6 @@ export const FilterControl = observer(
   ({
     SolutionControl,
     TextEditorButton,
-    createSolutionEntry,
     availableSolutionEntries,
     className,
     isForwardAllowed,
@@ -104,12 +103,7 @@ export const FilterControl = observer(
                 <Divider orientation="vertical" className="h-[75%]" />
 
                 <CreateEntryButton
-                  solutionName={
-                    pageName === FilterControlOptionsNames.dtree
-                      ? pageName
-                      : 'Preset'
-                  }
-                  createSolutionEntry={createSolutionEntry}
+                  pageName={pageName}
                   availableSolutionEntries={availableSolutionEntries}
                 />
               </>

src/pages/filter/dtree/components/modals/components/create-dataset-dialog.tsx

@@ -172,11 +172,10 @@ export const CreateDatasetDialog = observer(
       >
         <div className="flex flex-col">
           <div>
-            <span className="text-14">{t('dsCreation.label')}</span>
-
             <Input
               disabled={!operations.isCreationOver}
               value={value}
+              label={t('dsCreation.label')}
               onChange={e => handleChange(e.target.value)}
               className="mt-1"
               data-testid={DecisionTreesMenuDataCy.datasetNameInput}

src/pages/filter/dtree/dtree.page.tsx

@@ -40,10 +40,6 @@ export const DtreePage = observer((): ReactElement => {
 
   const { availableDtrees: availableSolutionEntries } = filterDtreesStore
 
-  const createDtree = (treeName: string): void => {
-    filterDtreesStore.createDtree(treeName)
-  }
-
   const modifiedDtree = dtreeStore.isDtreeModified
     ? dtreeStore.currentDtreeName
     : undefined
@@ -123,7 +119,6 @@ export const DtreePage = observer((): ReactElement => {
           }
           pageName={FilterControlOptionsNames[GlbPagesNames.Dtree]}
           SolutionControl={SolutionControlDtree}
-          createSolutionEntry={createDtree}
           availableSolutionEntries={availableSolutionEntries}
           isEntryCreationAllowed={isEntryCreationAllowed}
           isBackwardAllowed={dtreeStore.actionHistory.isBackwardAllowed}

src/pages/filter/refiner/refiner.page.tsx

@@ -43,10 +43,6 @@ export const RefinerPage = observer((): ReactElement => {
   const { availablePresets: availableSolutionEntries, activePreset } =
     filterPresetsStore
 
-  const createPreset = (presetName: string): void => {
-    filterPresetsStore.createPreset(presetName, filterStore.conditions)
-  }
-
   const filterCounts = filterStore.stat.filteredCounts
 
   const modifiedPreset = filterStore.isPresetModified
@@ -102,7 +98,6 @@ export const RefinerPage = observer((): ReactElement => {
         <FilterControl
           pageName={FilterControlOptionsNames[GlbPagesNames.Refiner]}
           SolutionControl={SolutionControlRefiner}
-          createSolutionEntry={createPreset}
           availableSolutionEntries={availableSolutionEntries}
           isBackwardAllowed={filterStore.actionHistory.isBackwardAllowed}
           isForwardAllowed={filterStore.actionHistory.isForwardAllowed}

src/pages/main/components/selected-dataset/build-flow/components/cards/presets-card/presets-card.store.ts

@@ -51,6 +51,14 @@ class PresetsCardStore {
     this.loadDTrees()
   }
 
+  public refreshDtrees() {
+    this._dtrees.invalidate()
+  }
+
+  public refreshPresets() {
+    this._presets.invalidate()
+  }
+
   public getSolutionsByRubric(rubric?: TExploreGenomeKeys) {
     if (rubric) {
       return this.solutions.filter(solution => solution.rubric === rubric)