WIP: connect to cluster component

src/hooks/useInterval.ts

@@ -0,0 +1,27 @@
+/*
+ * Taken directly from: https://usehooks-typescript.com/react-hook/use-interval
+ * */
+import { useEffect, useRef } from 'react';
+
+function useInterval(callback: () => void, delay: number | null) {
+  const savedCallback = useRef(callback);
+
+  // Remember the latest callback if it changes.
+  useEffect(() => {
+    savedCallback.current = callback;
+  }, [callback]);
+
+  // Set up the interval.
+  useEffect(() => {
+    // Don't schedule if no delay is specified.
+    if (delay === null) {
+      return;
+    }
+
+    const id = setInterval(() => savedCallback.current(), delay);
+
+    return () => clearInterval(id);
+  }, [delay]);
+}
+
+export default useInterval;

src/pages/variants/VariantTable.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/display-name */
 import React, { FunctionComponent, useState, useEffect } from 'react';
-import { Table, Tooltip } from 'antd';
+import { Button, Table, Tooltip } from 'antd';
 import style from './VariantTable.module.scss';
 import ConsequencesCell from './ConsequencesCell';
 import { useVariantTableData } from 'store/graphql/variants/actions';
@@ -10,101 +10,145 @@ import {
   Frequencies,
   SelectedSuggestion,
 } from 'store/graphql/variants/models';
+import { setSqons } from 'store/actionCreators/virtualStudies';
+import { connect, ConnectedProps } from 'react-redux';
+import { DispatchVirtualStudies } from 'store/virtualStudiesTypes';
+import { Sqon } from 'store/sqon';
+import { withHistory } from 'services/history';
+// @ts-ignore
+import { compose } from 'recompose';
+import { RouteComponentProps } from 'react-router-dom';
+import { generateKfIdsSqon } from 'store/sqonUtils';
+import ROUTES from '../../common/routes';
 
 const DEFAULT_PAGE_NUM = 1;
 
-const columns = [
-  {
-    title: 'Variant',
-    dataIndex: 'hgvsg',
-    sorter: true,
-    ellipsis: true,
-    width: '10%',
-    render: (hgvsg: string) =>
-      hgvsg ? (
-        <Tooltip placement="topLeft" title={hgvsg} color={'#2b388f'}>
-          {hgvsg}
-        </Tooltip>
-      ) : (
-        ''
-      ),
-  },
-  {
-    title: 'Type',
-    dataIndex: 'variant_class',
-  },
-  {
-    title: 'dbSnp',
-    dataIndex: 'rsnumber',
-    render: (rsNumber: string) =>
-      rsNumber ? (
-        <a target="_blank" rel="noopener noreferrer" href={`https://www.ncbi.nlm.nih.gov/snp/${rsNumber}`}>
-          {rsNumber}
-        </a>
-      ) : (
-        ''
-      ),
-  },
-  {
-    title: 'Consequences',
-    dataIndex: 'consequences',
-    width: '20%',
-    render: (consequences: { hits: { edges: Consequence[] } }) => (
-      <ConsequencesCell consequences={consequences?.hits?.edges || []} />
-    ),
-  },
+const isEven = (n: number) => n % 2 === 0;
 
-  {
-    title: 'CLINVAR',
-    dataIndex: 'clinvar',
-    render: (clinVar: ClinVar) =>
-      clinVar?.clin_sig && clinVar.clinvar_id ? (
-        <a
-          href={`https://www.ncbi.nlm.nih.gov/clinvar/variation/${clinVar.clinvar_id}`}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          {clinVar.clin_sig}
-        </a>
-      ) : (
-        ''
-      ),
-    sorter: true,
-  },
-  {
-    title: '# Studies',
-    dataIndex: 'studies',
-    render: (studies: { hits: { total: number } }) => studies?.hits?.total || 0,
-  },
-  {
-    title: 'Participant',
-    dataIndex: 'participant_number',
-  },
-  {
-    title: 'ALT Allele',
-    dataIndex: 'frequencies',
-    render: (frequencies: Frequencies) => frequencies?.internal?.combined?.ac,
-  },
-  {
-    title: 'Total Allele',
-    dataIndex: 'frequencies',
-    render: (frequencies: Frequencies) => frequencies?.internal?.combined?.an,
-  },
-  {
-    title: 'Allele Freq.',
-    dataIndex: 'frequencies',
-    render: (frequencies: Frequencies) => frequencies?.internal?.combined?.af,
-  },
-  {
-    title: 'Homozygote',
-    dataIndex: 'frequencies',
-    render: (frequencies: Frequencies) => frequencies?.internal?.combined?.homozygotes,
-  },
-].map((el, index: number) => ({ ...el, key: `${el.dataIndex}-${index}` }));
+const mapDispatch = (dispatch: DispatchVirtualStudies) => ({
+  setSqons: (sqons: Sqon | Sqon[]) => dispatch(setSqons(sqons)),
+});
 
-const isEven = (n: number) => n % 2 === 0;
+const connector = connect(null, mapDispatch);
+
+type PropsFromRedux = ConnectedProps<typeof connector>;
+
+type Props = {
+  selectedSuggestion: SelectedSuggestion;
+  history: RouteComponentProps['history'];
+} & PropsFromRedux;
+
+const generateColumns = (props: Props) =>
+  [
+    {
+      title: 'Variant',
+      dataIndex: 'hgvsg',
+      sorter: true,
+      ellipsis: true,
+      width: '10%',
+      render: (hgvsg: string) =>
+        hgvsg ? (
+          <Tooltip placement="topLeft" title={hgvsg} color={'#2b388f'}>
+            {hgvsg}
+          </Tooltip>
+        ) : (
+          ''
+        ),
+    },
+    {
+      title: 'Type',
+      dataIndex: 'variant_class',
+    },
+    {
+      title: 'dbSnp',
+      dataIndex: 'rsnumber',
+      render: (rsNumber: string) =>
+        rsNumber ? (
+          <a
+            target="_blank"
+            rel="noopener noreferrer"
+            href={`https://www.ncbi.nlm.nih.gov/snp/${rsNumber}`}
+          >
+            {rsNumber}
+          </a>
+        ) : (
+          ''
+        ),
+    },
+    {
+      title: 'Consequences',
+      dataIndex: 'consequences',
+      width: '20%',
+      render: (consequences: { hits: { edges: Consequence[] } }) => (
+        <ConsequencesCell consequences={consequences?.hits?.edges || []} />
+      ),
+    },
 
-type Props = { selectedSuggestion: SelectedSuggestion };
+    {
+      title: 'CLINVAR',
+      dataIndex: 'clinvar',
+      render: (clinVar: ClinVar) =>
+        clinVar?.clin_sig && clinVar.clinvar_id ? (
+          <a
+            href={`https://www.ncbi.nlm.nih.gov/clinvar/variation/${clinVar.clinvar_id}`}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            {clinVar.clin_sig}
+          </a>
+        ) : (
+          ''
+        ),
+      sorter: true,
+    },
+    {
+      title: '# Studies',
+      dataIndex: 'studies',
+      render: (studies: { hits: { total: number } }) => studies?.hits?.total || 0,
+    },
+    {
+      title: 'Participant',
+      dataIndex: 'participant_ids',
+      render: (participantIds: string[]) => {
+        const size = participantIds?.length || 0;
+        return (
+          <Button
+            onClick={
+              size
+                ? () => {
+                    props.setSqons([generateKfIdsSqon(participantIds)]);
+                    props.history.push(ROUTES.cohortBuilder);
+                  }
+                : undefined
+            }
+            type="link"
+          >
+            [{size}]
+          </Button>
+        );
+      },
+    },
+    {
+      title: 'ALT Allele',
+      dataIndex: 'frequencies',
+      render: (frequencies: Frequencies) => frequencies?.internal?.combined?.ac,
+    },
+    {
+      title: 'Total Allele',
+      dataIndex: 'frequencies',
+      render: (frequencies: Frequencies) => frequencies?.internal?.combined?.an,
+    },
+    {
+      title: 'Allele Freq.',
+      dataIndex: 'frequencies',
+      render: (frequencies: Frequencies) => frequencies?.internal?.combined?.af,
+    },
+    {
+      title: 'Homozygote',
+      dataIndex: 'frequencies',
+      render: (frequencies: Frequencies) => frequencies?.internal?.combined?.homozygotes,
+    },
+  ].map((el, index: number) => ({ ...el, key: `${el.dataIndex}-${index}` }));
 
 const VariantTable: FunctionComponent<Props> = (props) => {
   const [currentPageNum, setCurrentPageNum] = useState(DEFAULT_PAGE_NUM);
@@ -133,11 +177,11 @@ const VariantTable: FunctionComponent<Props> = (props) => {
       loading={loadingData}
       bordered
       dataSource={data.nodes}
-      columns={columns}
+      columns={generateColumns(props)}
       className={style.table}
       rowClassName={(_, index) => (isEven(index) ? '' : style.rowOdd)}
     />
   );
 };
 
-export default VariantTable;
+export default compose(withHistory, connector)(VariantTable);

src/pages/variants/Variants.module.scss

@@ -3,4 +3,5 @@
 .statsAndZepplinContainer {
   width: 100%;
   margin-bottom: 24px;
+  height: 160px;
 }

src/pages/variants/WorkBench.module.scss

@@ -0,0 +1,22 @@
+.zeppelinImg {
+  width: 144px;
+  height: 79px;
+}
+
+.imgContainer {
+  padding: 16px;
+  margin-right: 12px;
+}
+
+.textAndBtnContainer {
+  margin-left: 12px;
+  width: 378px;
+}
+
+.textContainer {
+  height: 24px;
+}
+
+.alert {
+  min-height: 40px;
+}