feat(FOROME-353): add modals for table samples

* feat(FOROME-353): add modals for table samples

.github/workflows/sandbox.yaml

@@ -9,7 +9,7 @@ on:
       - '*FOROME-*'
       - '!main'
       - '!develop'
-    tags: [ stage ]
+    tags: [ dev ]
 
 jobs:
   build:

src/pages/ws/ui/cell-sample.tsx

@@ -0,0 +1,62 @@
+import { ReactElement } from 'react'
+import cn from 'classnames'
+
+import { useToggle } from '@core/hooks/use-toggle'
+import filterZone from '@store/filterZone'
+import { IQualities } from './cell-samples'
+import { ModalTooltip } from './modal-tooltip'
+
+interface ICellSamplesProps {
+  qualities: IQualities
+  sample: string
+  samplesAmount: number
+  index: number
+}
+
+export const CellSample = ({
+  qualities,
+  sample,
+  samplesAmount,
+  index,
+}: ICellSamplesProps): ReactElement => {
+  const genotype: string = qualities[sample].genotype
+  const quality: number = qualities[sample].g_quality
+
+  const [isTooltipVisible, showTooltip, hideTooltip] = useToggle()
+
+  const isTruncated = qualities[sample].genotype.length > 10
+
+  const shouldTooltipBeVisible =
+    isTooltipVisible && isTruncated && samplesAmount < 4
+
+  return (
+    <div
+      onMouseEnter={showTooltip}
+      onMouseLeave={hideTooltip}
+      key={sample}
+      className={cn('relative w-1/3 px-4 py-4', {
+        'bg-orange-light': filterZone.isFather && index === 2,
+        'bg-yellow-light': filterZone.isMother && index === 1,
+        'bg-purple-light': filterZone.isProband && index === 0,
+      })}
+    >
+      <div>{sample}</div>
+
+      <div className="truncate">{genotype}</div>
+
+      <div>{quality}</div>
+
+      {shouldTooltipBeVisible && (
+        <ModalTooltip>
+          <div className="flex flex-wrap justify-start">
+            <div>{sample}</div>
+
+            <div className="w-full">{genotype}</div>
+
+            <div>{quality}</div>
+          </div>
+        </ModalTooltip>
+      )}
+    </div>
+  )
+}

src/pages/ws/ui/cell-samples.tsx

@@ -1,31 +1,32 @@
 import { ReactElement } from 'react'
-import cn from 'classnames'
 import get from 'lodash/get'
 import { observer } from 'mobx-react-lite'
 
-import filterZone from '@store/filterZone'
 import { CellI } from './cell-interfaces'
+import { CellSample } from './cell-sample'
+
+export interface IQualities {
+  [key: string]: {
+    genotype: string
+    g_quality: number
+  }
+}
 
 export const CellSamples = observer(({ cell }: CellI): ReactElement => {
-  const qualities = get(cell, 'value', {}) as any
+  const qualities = get(cell, 'value', {}) as IQualities
+
+  const samplesAmount: number = Object.keys(cell.value).length
 
   return (
     <div className="h-full flex text-10">
       {Object.keys(qualities).map((item, index) => (
-        <div
-          key={item}
-          className={cn('w-1/3 px-4 py-4', {
-            'bg-orange-light': filterZone.isFather && index === 2,
-            'bg-yellow-light': filterZone.isMother && index === 1,
-            'bg-purple-light': filterZone.isProband && index === 0,
-          })}
-        >
-          <div>{item}</div>
-
-          <div className="truncate">{qualities[item].genotype}</div>
-
-          <div>{qualities[item].g_quality}</div>
-        </div>
+        <CellSample
+          key={item + index}
+          qualities={qualities}
+          sample={item}
+          samplesAmount={samplesAmount}
+          index={index}
+        />
       ))}
     </div>
   )

src/pages/ws/ui/modal-tooltip.tsx

@@ -0,0 +1,9 @@
+import { PropsWithChildren, ReactElement, ReactNode } from 'react'
+
+export const ModalTooltip = ({
+  children,
+}: PropsWithChildren<unknown>): ReactElement => (
+  <div className="absolute flex flex-wrap items-center h-full px-2 top-0 z-50 shadow-dark rounded-md bg-white">
+    {children}
+  </div>
+)

src/pages/ws/ui/table/table.tsx

@@ -231,7 +231,7 @@ export const Table = observer(({ columns, data }: Props): ReactElement => {
                 <div
                   {...cell.getCellProps()}
                   key={Math.random()}
-                  className={cn('td overflow-hidden', {
+                  className={cn('td ', {
                     'py-1':
                       cell.column.Header !== tableColumnMap.samples &&
                       columnsStore.viewType === ViewTypeEnum.Compact,
@@ -242,13 +242,15 @@ export const Table = observer(({ columns, data }: Props): ReactElement => {
                       cell.column.Header === tableColumnMap.samples &&
                       columnsStore.viewType !== ViewTypeEnum.Compact,
                     'px-4': cell.column.Header !== tableColumnMap.samples,
+                    'overflow-hidden': !isSampleColumn,
                   })}
                 >
                   {isSampleColumn ? (
                     <div onClick={stopPropagation}>
                       <ScrollContainer
                         style={{
-                          cursor: `${valueNumber > 3 ? 'grabbing' : 'auto'}`,
+                          cursor: `${valueNumber > 3 ? 'grabbing' : 'pointer'}`,
+                          overflow: `${valueNumber > 3 ? 'hidden' : 'visible'}`,
                         }}
                       >
                         {cell.render('Cell')}