feat(FOROME-1425): Reworking wizard scenarios (#865)

Author: AndreyUstyumenko

src/i18n/locales/en.ts

@@ -145,13 +145,18 @@ export const en = {
       startWith: 'Start with',
       prevWorkSection: 'In this section your previous work will be displayed',
       prevWorkWith: 'You previously worked with',
+      candidateIsUnavailable: 'Existing candidates are unavailable',
+      genomeIsUnavailable: 'Whole genome/exome is unavailable',
     },
     buildFlow: {
       candidateSet: 'Existing candidate sets',
       candidateName: 'Candidate set name',
       whatsNext: "What's next?",
       relevantPresets: 'Relevant presets',
       additionalPresetFilter: 'Additional preset filters',
+      simpleFilter: 'Simple Filter',
+      inclusionExclusion: 'Inclusion/Exclusion Criteria',
+      viewVariants: 'View Variants',
     },
   },
   ds: {

src/pages/main/components/selected-dataset/build-flow/components/build-flow-left-column.tsx

@@ -3,4 +3,12 @@ export interface ICardRadioItem<T extends string> {
   value: T
 }
 
-export type TDisabledOptions<T extends string> = Record<T, boolean>
+export interface IDisabledOption {
+  isDisabled: boolean
+  placeholder: () => JSX.Element
+}
+
+export type TDisabledOptions<T extends string> = Record<
+  T,
+  boolean | IDisabledOption
+>

src/pages/main/components/selected-dataset/build-flow/components/build-flow-right-column.tsx

@@ -1,4 +1,5 @@
 import { Radio } from '@ui/radio'
+import { disabledOptionIsObject } from './card-radio.utils'
 import { ICardRadioItem, TDisabledOptions } from './card-radio-list.interface'
 
 interface ICardRadioListProps<T extends string> {
@@ -18,18 +19,37 @@ export const CardRadioList = function <T extends string>({
 }: ICardRadioListProps<T>) {
   return (
     <>
-      {data.map(({ label, value }) => (
-        <div className="flex mb-2" key={value}>
-          <Radio
-            className="flex items-center"
-            checked={value === selectedOption}
-            onChange={() => onChange(value)}
-            disabled={isOptionsDisabled || disabledOptions?.[value]}
-          >
-            <div className="ml-1.5">{label}</div>
-          </Radio>
-        </div>
-      ))}
+      {data.map(({ label, value }) => {
+        const disabledOption = disabledOptions?.[value]
+        if (
+          disabledOptionIsObject(disabledOption) &&
+          disabledOption.isDisabled
+        ) {
+          return (
+            <div className="flex mb-2" key={value}>
+              {disabledOption.placeholder()}
+            </div>
+          )
+        } else {
+          return (
+            <div className="flex mb-2" key={value}>
+              <Radio
+                className="flex items-center"
+                checked={value === selectedOption}
+                onChange={() => onChange(value)}
+                disabled={
+                  !!isOptionsDisabled ||
+                  (disabledOptionIsObject(disabledOption)
+                    ? disabledOption.isDisabled
+                    : disabledOption)
+                }
+              >
+                <div className="ml-1.5">{label}</div>
+              </Radio>
+            </div>
+          )
+        }
+      })}
     </>
   )
 }

src/pages/main/components/selected-dataset/build-flow/components/cards/components/card-radio-list.interface.ts

@@ -0,0 +1,7 @@
+import { IDisabledOption } from './card-radio-list.interface'
+
+export const disabledOptionIsObject = (
+  value: boolean | IDisabledOption | undefined,
+): value is IDisabledOption => {
+  return typeof value === 'object'
+}

src/pages/main/components/selected-dataset/build-flow/components/cards/components/card-radio-list.tsx

@@ -34,6 +34,7 @@ export const DescriptionCard = observer(
       continueDisabled,
       contentDisabled,
       editDisabled,
+      position,
     } = props
     const history = useHistory()
     const ds = title || datasetStore.datasetName
@@ -60,7 +61,6 @@ export const DescriptionCard = observer(
     }
 
     useEffect(() => {
-      wizardStore.wizardScenario[id].title = ds
       wizardStore.updateSelectedDataset(ds)
       setDsName(ds)
       // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -73,16 +73,17 @@ export const DescriptionCard = observer(
     return (
       <Card
         isNeedToAnimate={wizardStore.isNeedToAnimateCard(id)}
-        className={cn(styles.descriptionCard, 'mt-4')}
+        className={cn(styles.descriptionCard)}
+        position={position}
       >
         <CardTitleWithEdit
           title={ds}
-          isEditShown={editDisabled}
+          isEditShown={!editDisabled}
           onEdit={() => wizardStore.editCard(id)}
         />
 
         <div className="mb-4">
-          <Card className="w-full mt-4 bg-grey-tertiary">
+          <Card className="w-full mt-4 bg-grey-tertiary" position="stretch">
             <div className="flex items-center mb-2">
               <span className="font-bold">Description</span>
               <Button

src/pages/main/components/selected-dataset/build-flow/components/cards/components/card-radio.utils.ts

@@ -6,7 +6,7 @@ import { ICardProps } from '../wizard/wizard.interface'
 import wizardStore from '../wizard/wizard.store'
 
 export const ExistingCandidatesCard = observer((props: ICardProps) => {
-  const { title, id, maxHeight } = props
+  const { title, id, maxHeight, position } = props
   const secodaryDatasets = wizardStore.secondaryDatasets
   const onSelect = (ds: string) => {
     wizardStore.setSelectedDataset(ds, id)
@@ -17,6 +17,7 @@ export const ExistingCandidatesCard = observer((props: ICardProps) => {
       isNeedToAnimate={wizardStore.isNeedToAnimateCard(id)}
       className="mt-4"
       style={{ paddingLeft: 0, paddingRight: 0 }}
+      position={position}
     >
       <CardTitle text={title} className="px-4" />
 

src/pages/main/components/selected-dataset/build-flow/components/cards/description-card/description-card.tsx

@@ -14,87 +14,88 @@ import wizardStore from '../../wizard/wizard.store'
 import { memorizeLocation } from '../../wizard/wizard.utils'
 import presetsCardStore from './presets-card.store'
 
-export const PresetsCard = observer((props: ICardProps) => {
-  const history = useHistory()
-  const { title, id, selectedValue, maxHeight } = props
+export const PresetsCard = observer(
+  ({ title, id, selectedValue, maxHeight, position }: ICardProps) => {
+    const history = useHistory()
 
-  useEffect(() => {
-    presetsCardStore.loadSolutions()
-  }, [])
+    useEffect(() => {
+      presetsCardStore.loadSolutions()
+    }, [])
 
-  const onClickOpen = () => {
-    if (!wizardStore.selectedPreset) return
+    const onClickOpen = () => {
+      if (!wizardStore.selectedPreset) return
 
-    const { kind, name } = wizardStore.selectedPreset
-    let location = ''
+      const { kind, name } = wizardStore.selectedPreset
+      let location = ''
 
-    if (kind === 'preset') {
-      location = `${Routes.Refiner}?ds=${datasetStore.datasetName}&preset=${name}`
-    } else if (kind === 'dtree') {
-      location = `${Routes.Dtree}?ds=${datasetStore.datasetName}&dtree=${name}`
-    }
+      if (kind === 'preset') {
+        location = `${Routes.Refiner}?ds=${datasetStore.datasetName}&preset=${name}`
+      } else if (kind === 'dtree') {
+        location = `${Routes.Dtree}?ds=${datasetStore.datasetName}&dtree=${name}`
+      }
 
-    memorizeLocation(location)
-    history.push(location)
-  }
+      memorizeLocation(location)
+      history.push(location)
+    }
 
-  const renderPresets = () => {
-    return presetsCardStore
-      .getSolutionsByRubric(wizardStore.whatsNextOption)
-      .map(preset => {
-        const isSelected = selectedValue === preset.name
+    const renderPresets = () => {
+      return presetsCardStore
+        .getSolutionsByRubric(wizardStore.whatsNextOption)
+        .map(preset => {
+          const isSelected = selectedValue === preset.name
 
-        return (
-          <div
-            key={preset.name}
-            onClick={() => wizardStore.setSelectedPreset(preset, id)}
-          >
+          return (
             <div
-              className={cn(
-                'w-full flex items-center py-2 leading-5 cursor-pointer px-4',
-                isSelected
-                  ? 'bg-blue-bright text-white'
-                  : 'hover:bg-blue-light',
-              )}
+              key={preset.name}
+              onClick={() => wizardStore.setSelectedPreset(preset, id)}
             >
-              <Icon
-                name="File"
-                className={cn(isSelected ? 'text-white' : 'text-blue-bright')}
-              />
+              <div
+                className={cn(
+                  'w-full flex items-center py-2 leading-5 cursor-pointer px-4',
+                  isSelected
+                    ? 'bg-blue-bright text-white'
+                    : 'hover:bg-blue-light',
+                )}
+              >
+                <Icon
+                  name="File"
+                  className={cn(isSelected ? 'text-white' : 'text-blue-bright')}
+                />
 
-              <div className="ml-1.5">{preset.name}</div>
+                <div className="ml-1.5">{preset.name}</div>
+              </div>
             </div>
-          </div>
-        )
-      })
-  }
-
-  return (
-    <Card
-      isNeedToAnimate={wizardStore.isNeedToAnimateCard(id)}
-      className="mt-4"
-      style={{ paddingLeft: 0, paddingRight: 0 }}
-    >
-      <CardTitle text={title} className="px-4" />
+          )
+        })
+    }
 
-      <div
-        className="mb-4 mt-2 text-14 overflow-y-auto"
-        style={{ maxHeight: maxHeight }}
+    return (
+      <Card
+        isNeedToAnimate={wizardStore.isNeedToAnimateCard(id)}
+        style={{ paddingLeft: 0, paddingRight: 0 }}
+        position={position}
       >
-        {presetsCardStore.isFetchingSolutions ? (
-          <Loader size="m" />
-        ) : (
-          renderPresets()
-        )}
-      </div>
+        <CardTitle text={title} className="px-4" />
+
+        <div
+          className="mb-4 mt-2 text-14 overflow-y-auto"
+          style={{ maxHeight: maxHeight }}
+        >
+          {presetsCardStore.isFetchingSolutions ? (
+            <Loader size="m" />
+          ) : (
+            renderPresets()
+          )}
+        </div>
 
-      <div className="flex justify-end px-4">
-        <Button
-          onClick={onClickOpen}
-          text="Open"
-          disabled={!wizardStore.selectedPreset}
-        />
-      </div>
-    </Card>
-  )
-})
+        <div className="flex justify-end px-4">
+          <Button
+            onClick={onClickOpen}
+            text="Open"
+            disabled={!wizardStore.selectedPreset}
+          />
+        </div>
+      </Card>
+    )
+  },
+)