moved filtered events into a separate tab on the case report detail page

Author: xanthopoulakis

src/components/filteredEventModal/index.js

@@ -14,7 +14,6 @@ import {
   Avatar,
   Typography,
   Tabs,
-  Input,
 } from "antd";
 import NotesModal from "../notesModal";
 import { withTranslation } from "react-i18next";

src/containers/detailView/index.js

@@ -5,6 +5,7 @@ import { withRouter } from "react-router-dom";
 import { Skeleton, Affix, Tabs } from "antd";
 import HeaderPanel from "../../components/headerPanel";
 import SummaryTab from "../../tabs/summaryTab";
+import FilteredEventsTab from "../../tabs/filteredEventsTab";
 import TracksTab from "../../tabs/tracksTab";
 import Wrapper from "./index.style";
 import PopulationTab from "../../tabs/populationTab";
@@ -26,14 +27,16 @@ class DetailView extends Component {
     if (!pair) {
       return null;
     }
-    const tabs = [
-      <SummaryTab />,
-      <TracksTab />,
-      <PopulationTab />,
-      <SageQcTab />,
-      <BinQCTab />,
-      <SignaturesTab />,
-    ];
+    const tabs = {
+      0: <SummaryTab />,
+      1: <FilteredEventsTab />,
+      2: <TracksTab />,
+      3: <PopulationTab />,
+      4: <SageQcTab />,
+      5: <BinQCTab />,
+      6: <SignaturesTab />,
+    };
+    let tabsOrder = [0, 1, 2, 3, 4, 5, 6];
     return (
       <Wrapper>
         <Skeleton active loading={loading}>
@@ -44,14 +47,14 @@ class DetailView extends Component {
           </Affix>
           <div className="ant-home-content-container">
             <Tabs
-                defaultActiveKey="1"
-                activeKey={tab.toString()}
-                onChange={(tab) => this.handleTabChanged(tab)}
-                items={tabs.map((Component, i) => ({
-                  key: (i + 1).toString(),
-                  label: t(`containers.detail-view.tabs.tab${i + 1}`),
-                  children: Component,
-                }))}
+              defaultActiveKey="1"
+              activeKey={tab.toString()}
+              onChange={(tab) => this.handleTabChanged(tab)}
+              items={tabsOrder.map((key) => ({
+                key: key.toString(),
+                label: t(`containers.detail-view.tabs.tab${key}`),
+                children: tabs[key],
+              }))}
             />
           </div>
         </Skeleton>

src/tabs/filteredEventsTab/index.js

@@ -0,0 +1,23 @@
+import { Component } from "react";
+import { withTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import Wrapper from "./index.style";
+import FilteredEventsListPanel from "../../components/filteredEventsListPanel";
+
+class FilteredEventsTab extends Component {
+  render() {
+    return (
+      <Wrapper>
+        <FilteredEventsListPanel />
+      </Wrapper>
+    );
+  }
+}
+FilteredEventsTab.propTypes = {};
+FilteredEventsTab.defaultProps = {};
+const mapDispatchToProps = (dispatch) => ({});
+const mapStateToProps = (state) => ({});
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(withTranslation("common")(FilteredEventsTab));

src/tabs/filteredEventsTab/index.style.js

@@ -0,0 +1,14 @@
+import styled from "styled-components";
+
+const Wrapper = styled.div`
+  .ant-home-header-container {
+    margin: 0px;
+    background: white;
+    border: 1px solid rgb(235, 237, 240);
+  }
+  .ant-home-content-container {
+    margin: 24px;
+  }
+`;
+
+export default Wrapper;

src/translations/en/common.json

@@ -373,7 +373,8 @@
     },
     "detail-view": {
       "tabs": {
-        "tab1": "Overall",
+        "tab0": "Overall",
+        "tab1": "Filtered Events",
         "tab2": "Genome View",
         "tab3": "Population View",
         "tab4": "Variant QC",