fix: #3071 fix table layout (#3072)

* fix: #3071 fix table layout * fix * fix types * fix types Co-authored-by: Francis Lavoie <flavoie@ferlab.bio>
kids-first · Apr 12, 2021 · 82bb73a · 82bb73a
1 parent a1918e3
commit 82bb73a
Show file tree

Hide file tree

Showing 8 changed files with 132 additions and 96 deletions.
diff --git a/src/components/ExpandableCell.module.scss b/src/components/ExpandableCell.module.scss
@@ -0,0 +1,18 @@
+.tableCellButton {
+  flex-direction: row-reverse;
+  display: flex;
+  align-items: center;
+
+  &:global(.ant-btn) > span {
+    margin-left: 0;
+  }
+
+  :first-child {
+    align-items: center;
+    display: flex;
+  }
+
+  > * {
+    height: 22px;
+  }
+}
diff --git a/src/components/ExpandableCell.tsx b/src/components/ExpandableCell.tsx
@@ -1,42 +1,44 @@
-import React, { useState } from 'react';
-import { Button, List, Space } from 'antd';
-import { ListProps } from 'antd/lib/list';
+import React, { useState, ReactNode } from 'react';
+import { Button } from 'antd';
 import { CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons';
+import styles from './ExpandableCell.module.scss';
 
-type OwnProps = ListProps<any> & {
+type OwnProps = {
   nOfElementsWhenCollapsed?: number;
+  dataSource: (string[] | string[][]) | React.ReactNode[];
+  renderItem?: (
+    item: (string | string[] | string[][]) | (React.ReactNode | React.ReactNode[]),
+  ) => React.ReactNode;
 };
 
 const DEFAULT_NUM_COLLAPSED = 3;
 
+const renderItemDefault = (item: React.ReactNode | React.ReactNode[]) => <span>{item}</span>;
+
 const ExpandableCell = ({
   nOfElementsWhenCollapsed = DEFAULT_NUM_COLLAPSED,
-  dataSource,
-  renderItem = (item) => <List.Item>{item}</List.Item>,
-  ...listProps
+  dataSource = [],
+  renderItem = renderItemDefault,
 }: OwnProps) => {
   const [showAll, setShowAll] = useState(false);
   const dataTotalLength = dataSource?.length || 0;
   const sliceNum = showAll ? dataTotalLength : nOfElementsWhenCollapsed;
   const showButton = dataTotalLength > nOfElementsWhenCollapsed;
+  const slicedData = dataSource.slice(0, sliceNum);
   return (
-    <Space direction="vertical" align={'start'}>
-      <List
-        dataSource={(dataSource || []).slice(0, sliceNum)}
-        renderItem={renderItem}
-        split={false}
-        {...(listProps || {})}
-      />
+    <>
+      {slicedData.map((item) => renderItem(item))}
       {showButton && (
         <Button
+          className={styles.tableCellButton}
           type={'link'}
           icon={showAll ? <CaretUpOutlined /> : <CaretDownOutlined />}
           onClick={() => setShowAll(!showAll)}
         >
           {showAll ? 'Less' : 'More'}
         </Button>
       )}
-    </Space>
+    </>
   );
 };
 

diff --git a/src/pages/variantEntity/TabSummary.tsx b/src/pages/variantEntity/TabSummary.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable react/display-name */
 import React from 'react';
 import { useTabSummaryData } from 'store/graphql/variants/tabActions';
-import { Card, List, Space, Spin, Tag, Typography } from 'antd';
+import { Card, Space, Spin, Tag, Typography } from 'antd';
 import Summary from './Summary';
 import StackLayout from '@ferlab/ui/core/layout/StackLayout';
 import { Consequence, Impact, VariantEntity } from 'store/graphql/variants/models';
@@ -12,6 +12,8 @@ import capitalize from 'lodash/capitalize';
 import style from 'style/themes/default/_colors.scss';
 import ExpandableTable from 'components/ExpandableTable';
 
+import styles from './tables.module.scss';
+
 const { Text } = Typography;
 
 type OwnProps = {
@@ -98,9 +100,7 @@ const columns = [
   {
     title: 'Consequence',
     dataIndex: 'consequences',
-    render: (consequences: string[]) => (
-      <ExpandableCell dataSource={consequences} />
-    ),
+    render: (consequences: string[]) => <ExpandableCell dataSource={consequences} />,
   },
   {
     title: 'Coding Dna',
@@ -116,6 +116,7 @@ const columns = [
       }
       return strand > 0 ? <PlusOutlined /> : <MinusOutlined />;
     },
+    width: 60,
   },
   {
     title: 'VEP',
@@ -124,6 +125,7 @@ const columns = [
       const loweredCaseVep = vep.toLowerCase();
       return <Tag color={style[`${loweredCaseVep}Impact`]}>{capitalize(loweredCaseVep)}</Tag>;
     },
+    width: 120,
   },
 
   {
@@ -138,23 +140,22 @@ const columns = [
         <ExpandableCell
           nOfElementsWhenCollapsed={2}
           dataSource={impacts}
-          renderItem={(itemImpact: string[]) => {
-            const title = itemImpact[INDEX_IMPACT_TITLE];
-            const label = itemImpact[INDEX_IMPACT_LABEL];
-            const score = itemImpact[INDEX_IMPACT_SCORE];
+          renderItem={(item: any): React.ReactNode => {
+            const title = item[INDEX_IMPACT_TITLE];
+            const label = item[INDEX_IMPACT_LABEL];
+            const score = item[INDEX_IMPACT_SCORE];
             const description = label ? `${label} - ${score}` : score;
             return (
-              <List.Item>
-                <Space>
-                  <Text type={'secondary'}>{title}:</Text>
-                  <Text>{description}</Text>
-                </Space>
-              </List.Item>
+              <StackLayout horizontal className={styles.cellList}>
+                <Text type={'secondary'}>{title}:</Text>
+                <Text>{description}</Text>
+              </StackLayout>
             );
           }}
         />
       );
     },
+    width: 270,
   },
   {
     title: 'Conservations',

diff --git a/src/pages/variantEntity/tables.module.scss b/src/pages/variantEntity/tables.module.scss
@@ -0,0 +1,5 @@
+.cellList {
+  :first-child {
+    padding-right: 20px;
+  }
+}
diff --git a/src/style/dist/themes/default/_colors.scss b/src/style/dist/themes/default/_colors.scss
@@ -42,6 +42,9 @@ $layout-bg-base: #f4f5f8;
 $layout-sider-background: $gray-3;
 $card-background: $gray-1;
 
+// Text
+$text-color-secondary: $body-2;
+
 // BODY
 $layout-body-background: $gray-3;