feat(FOROME-1227): add loading in zones

ForomePlatform · Jun 27, 2022 · 88b57db · 88b57db
1 parent 3e3ee5b
commit 88b57db
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 11 deletions.
diff --git a/src/pages/ws/ui/control-panel/zones/components/zone-popover.tsx b/src/pages/ws/ui/control-panel/zones/components/zone-popover.tsx
@@ -1,6 +1,7 @@
 import { ChangeEvent, ReactElement } from 'react'
 
 import { t } from '@i18n'
+import { Loader } from '@ui/loader'
 import { Popover } from '@ui/popover'
 import { IPopoverBaseProps } from '@ui/popover/popover.interface'
 import { InputSearch } from '@components/input-search'
@@ -15,6 +16,7 @@ interface IZonePopoverProps extends IPopoverBaseProps {
   selectedZoneItems: string[]
   searchValue: string
   isTags?: boolean
+  isFetching: boolean
   onChange: (e: ChangeEvent<HTMLInputElement>) => void
   onAdd: (value: string) => void
   onRemove: (value: string, type: string) => void
@@ -29,6 +31,7 @@ export const ZonePopover = ({
   searchValue,
   anchorEl,
   isOpen,
+  isFetching,
   isTags,
   onChange,
   onAdd,
@@ -66,14 +69,18 @@ export const ZonePopover = ({
 
       <div className="h-px w-full bg-blue-light mt-4" />
 
-      <ZoneList
-        zoneItems={zoneList.filter(item =>
-          item.toLocaleLowerCase().includes(searchValue.toLocaleLowerCase()),
-        )}
-        selectedItems={selectedZoneItems}
-        onAdd={onAdd}
-        onRemove={onRemove}
-      />
+      {isFetching && <Loader size="m" />}
+
+      {!isFetching && (
+        <ZoneList
+          zoneItems={zoneList.filter(item =>
+            item.toLocaleLowerCase().includes(searchValue.toLocaleLowerCase()),
+          )}
+          selectedItems={selectedZoneItems}
+          onAdd={onAdd}
+          onRemove={onRemove}
+        />
+      )}
     </PopupCard>
   </Popover>
 )
diff --git a/src/pages/ws/ui/control-panel/zones/genes-list-zone.tsx b/src/pages/ws/ui/control-panel/zones/genes-list-zone.tsx
@@ -52,6 +52,7 @@ export const GenesListZone = observer(() => {
       />
 
       <ZonePopover
+        isFetching={zoneStore.fetchingGenesList}
         zoneList={zoneStore.genesList}
         title={t('ds.geneList')}
         selectedZoneItems={zoneStore.localGenesList}

diff --git a/src/pages/ws/ui/control-panel/zones/genes-zone.tsx b/src/pages/ws/ui/control-panel/zones/genes-zone.tsx
@@ -54,6 +54,7 @@ export const GenesZone = observer(() => {
       />
 
       <ZonePopover
+        isFetching={zoneStore.fetchingGenes}
         zoneList={zoneStore.genes}
         title={t('ds.gene')}
         selectedZoneItems={zoneStore.localGenes}

diff --git a/src/pages/ws/ui/control-panel/zones/samples-zone.tsx b/src/pages/ws/ui/control-panel/zones/samples-zone.tsx
@@ -54,6 +54,7 @@ export const SamplesZone = observer(() => {
       />
 
       <ZonePopover
+        isFetching={zoneStore.fetchingSamples}
         zoneList={zoneStore.samples}
         title={t('ds.samples')}
         selectedZoneItems={zoneStore.localSamples}

diff --git a/src/pages/ws/ui/control-panel/zones/tags-zone.tsx b/src/pages/ws/ui/control-panel/zones/tags-zone.tsx
@@ -63,6 +63,7 @@ export const TagsZone = observer(() => {
       />
 
       <ZonePopover
+        isFetching={zoneStore.fetchingTags}
         zoneList={zoneStore.tags}
         title={t('ds.tags')}
         selectedZoneItems={zoneStore.localTags}

diff --git a/src/store/ws/zone.store.ts b/src/store/ws/zone.store.ts
@@ -14,6 +14,11 @@ class ZoneStore {
   samples: string[] = []
   zone: any[] = []
 
+  private _fetchingGenes: boolean = false
+  private _fetchingGenesList: boolean = false
+  private _fetchingTags: boolean = false
+  private _fetchingSamples: boolean = false
+
   selectedGenes: string[] = []
   selectedGenesList: string[] = []
   selectedSamples: string[] = []
@@ -37,6 +42,22 @@ class ZoneStore {
     makeAutoObservable(this)
   }
 
+  public get fetchingGenes(): boolean {
+    return this._fetchingGenes
+  }
+
+  public get fetchingGenesList(): boolean {
+    return this._fetchingGenesList
+  }
+
+  public get fetchingTags(): boolean {
+    return this._fetchingTags
+  }
+
+  public get fetchingSamples(): boolean {
+    return this._fetchingSamples
+  }
+
   get specialSamples(): [boolean, boolean, boolean] {
     let proband = false
     let mother = false
@@ -94,36 +115,52 @@ class ZoneStore {
   }
 
   public async fetchZoneListAsync(zone: string) {
+    if (zone === 'Symbol') {
+      this._fetchingGenes = true
+    } else {
+      this._fetchingGenesList = true
+    }
+
     const zoneList = (await wsDatasetProvider.getZoneList({
       ds: datasetStore.datasetName,
       zone,
     })) as IZoneDescriptor
 
     runInAction(() => {
-      zone === 'Symbol'
-        ? (this.genes = zoneList.variants)
-        : (this.genesList = zoneList.variants)
+      if (zone === 'Symbol') {
+        this.genes = zoneList.variants
+        this._fetchingGenes = false
+
+        return
+      }
+
+      this.genesList = zoneList.variants
+      this._fetchingGenesList = false
     })
   }
 
   public async fetchZoneSamplesAsync() {
+    this._fetchingSamples = true
     const zoneList = (await wsDatasetProvider.getZoneList({
       ds: datasetStore.datasetName,
       zone: 'Has_Variant',
     })) as IZoneDescriptor
 
     runInAction(() => {
+      this._fetchingSamples = false
       this.samples = zoneList.variants
     })
   }
 
   public async fetchZoneTagsAsync() {
+    this._fetchingTags = true
     const tagSelect = await wsDatasetProvider.getTagSelect({
       ds: datasetStore.datasetName,
     })
 
     runInAction(() => {
       this.tags = [...tagSelect['tag-list']].filter(item => item !== '_note')
+      this._fetchingTags = false
     })
   }