feat(FOROME-300): add refiner filter to url

ForomePlatform · Jan 25, 2022 · dbb10d6 · dbb10d6
1 parent 3f16fec
commit dbb10d6
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 26 deletions.
diff --git a/src/pages/filter/ui/query-selected.tsx b/src/pages/filter/ui/query-selected.tsx
@@ -33,6 +33,16 @@ export const QuerySelected = observer(
         : datasetStore.filteredNo.length
 
     const handleClick = () => {
+      let conditionsUrl = ''
+
+      if (datasetStore.conditions.length > 0) {
+        datasetStore.conditions.forEach(condition => {
+          conditionsUrl += `&refiner=${condition[0]},${condition[1]},${
+            condition[2]
+          },${condition[3]![0]}`
+        })
+      }
+
       allVariants > 2600
         ? toast.error(t('filter.tooMuchVariants'), {
             position: 'bottom-right',
@@ -43,7 +53,7 @@ export const QuerySelected = observer(
             draggable: true,
             progress: 0,
           })
-        : history.push(`${Routes.WS}?ds=${params.get('ds')}`, {
+        : history.push(`${Routes.WS}?ds=${params.get('ds')}${conditionsUrl}`, {
             prevPage: 'refiner',
           })
     }

diff --git a/src/pages/ws/page.tsx b/src/pages/ws/page.tsx
@@ -11,11 +11,10 @@ import {
 } from 'use-query-params'
 
 import { HistoryLocationState } from '@declarations'
-import { FilterKindEnum } from '@core/enum/filter-kind.enum'
 import { useDatasetName } from '@core/hooks/use-dataset-name'
 import { useParams } from '@core/hooks/use-params'
 import { t } from '@i18n'
-import datasetStore from '@store/dataset'
+import datasetStore, { Condition } from '@store/dataset'
 import dtreeStore from '@store/dtree'
 import variantStore from '@store/variant'
 import { MainTableDataCy } from '@components/data-testid/main-table.cy'
@@ -43,30 +42,25 @@ const WSPage = observer(
 
     const [query] = useQueryParams({
       variant: NumberParam,
-      filters: withDefault(ArrayParam, []),
+      refiner: withDefault(ArrayParam, []),
     })
 
-    const { filters, variant } = query
+    const { variant, refiner } = query
 
     Number.isInteger(variant) && variantStore.setIndex(variant as number)
 
     useEffect(() => {
-      const initAsync = async () => {
-        const dsName = params.get('ds') || ''
+      const conditions: Condition[] = (refiner as string[]).map((c: string) => {
+        const item: string[] = c!.split(',')
+        const [name, group, symbol, value] = item
 
-        if (filters.length > 0) {
-          const conditions: any = []
+        return [name, group, symbol, [value]]
+      })
 
-          filters.forEach(filter => {
-            const splitted: any = filter?.split('=')
-            const name = splitted[0]
-            const value = splitted[1].split(',')
-            const condition = [FilterKindEnum.Enum, name, '', value]
+      datasetStore.setConditionsAsync(conditions)
 
-            conditions.push(condition)
-          })
-          datasetStore.setConditionsAsync(conditions)
-        }
+      const initAsync = async () => {
+        const dsName = params.get('ds') || ''
 
         if (dsName && !variantStore.dsName) {
           variantStore.setDsName(params.get('ds') ?? '')

diff --git a/src/pages/ws/ui/cell-gene.tsx b/src/pages/ws/ui/cell-gene.tsx
@@ -1,6 +1,7 @@
 import { Fragment, ReactElement } from 'react'
 import cn from 'classnames'
 import get from 'lodash/get'
+import { toJS } from 'mobx'
 import { observer } from 'mobx-react-lite'
 
 import { ViewTypeEnum } from '@core/enum/view-type-enum'
@@ -16,7 +17,8 @@ export const CellGene = observer(
     const value = get(cell, 'value[0]', []) as string[]
     const rowIndex = get(cell, 'row.index', -1)
 
-    const iconColor = datasetStore?.wsRecords?.[rowIndex]?.cl.split('-')[0]
+    const records = toJS(datasetStore?.wsRecords)
+    const iconColor = records?.[rowIndex]?.cl.split('-')[0]
 
     const geneCellHeight =
       columnsStore.viewType === ViewTypeEnum.Compact
@@ -25,9 +27,9 @@ export const CellGene = observer(
 
     return (
       <div className="flex items-center">
-        {datasetStore?.wsRecords?.[rowIndex]?.cl && (
+        {records?.[rowIndex]?.cl && (
           <Fragment>
-            {datasetStore?.wsRecords?.[rowIndex]?.cl.includes('cross') ? (
+            {records?.[rowIndex]?.cl.includes('cross') ? (
               <PlusIcon color={geneColorMap[iconColor]} />
             ) : (
               <div

diff --git a/src/store/dataset.ts b/src/store/dataset.ts
@@ -22,6 +22,8 @@ import operations from './operations'
 
 const INCREASE_INDEX = 50
 
+export type Condition = [string, string, unknown, string[]?, unknown?]
+
 class DatasetStore {
   dsStat: DsStatType = {}
   variantsAmount = 0
@@ -39,7 +41,7 @@ class DatasetStore {
   datasetName = ''
   activePreset = ''
   prevPreset = ''
-  conditions: any[] = []
+  conditions: Condition[] = []
   zone: any[] = []
   statAmount: number[] = []
 
@@ -140,7 +142,7 @@ class DatasetStore {
     this.zone = []
   }
 
-  async setConditionsAsync(conditions: any[][]) {
+  async setConditionsAsync(conditions: Condition[]) {
     if (!conditions[0]) {
       this.conditions = []
       await this.fetchDsStatAsync()
@@ -176,14 +178,16 @@ class DatasetStore {
       item => item[1] === subGroup,
     )
 
-    const conditionKind = cloneConditions.find(item => item[1] === subGroup)[0]
+    const conditionKind = cloneConditions.find(
+      item => item![1] === subGroup,
+    )![0]
 
     if (conditionKind === FilterKindEnum.Enum) {
-      const filteredItems = cloneConditions[subGroupIndex][3].filter(
+      const filteredItems = cloneConditions[subGroupIndex][3]?.filter(
         (item: string) => item !== itemName,
       )
 
-      if (filteredItems.length === 0) {
+      if (filteredItems?.length === 0) {
         cloneConditions.splice(subGroupIndex, 1)
       } else {
         cloneConditions[subGroupIndex][3] = filteredItems