KPMP-5217: clean up

KPMP · Mar 14, 2024 · 26ce54a · 26ce54a
1 parent 9887b06
commit 26ce54a
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 13 deletions.
diff --git a/src/components/DataViz/CellXGeneDropdown.js b/src/components/DataViz/CellXGeneDropdown.js
@@ -0,0 +1,34 @@
+import React, {Component} from 'react';
+import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
+
+class CellXGeneDropdown extends Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            dropdownOpen: false
+        }
+    }
+
+    toggle =() => {
+        this.setState({dropdownOpen: !this.state.dropdownOpen});
+    }
+
+    render() {
+        return (
+            <Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle} direction="down" className="cellxgene-dropdown">
+                <DropdownToggle caret className='float-end' color='primary'>View DiffEx in CellXGene</DropdownToggle>
+                <DropdownMenu>
+                    <DropdownItem tag="a" target="_blank" rel="noopener noreferrer" href={this.props.v1}>
+                        Version 1.0 (Nature 2023)
+                    </DropdownItem>
+                    <DropdownItem disabled>
+                        Version 1.5 (Coming Soon)
+                    </DropdownItem>
+                </DropdownMenu>
+            </Dropdown>
+        )
+    }
+}
+
+export default CellXGeneDropdown;
diff --git a/src/components/DataViz/DataTypeSelector.js b/src/components/DataViz/DataTypeSelector.js
@@ -7,6 +7,7 @@ import { fetchDataTypeSummaryInformation } from '../../helpers/ApolloClient';
 import { handleGoogleAnalyticsEvent } from '../../helpers/googleAnalyticsHelper';
 import { faChevronDown, faChevronUp } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {CellXGeneDropdown} from './CellXGeneDropdown';
 
 class DataTypeSelector extends Component {
     constructor(props) {
@@ -267,21 +268,10 @@ class DataTypeSelector extends Component {
                                     : <span className="a-button" onClick={this.toggleDataset}>Hide dataset details <FontAwesomeIcon icon={faChevronUp} /></span>
                                 }
                                 {(this.props.dataType === 'sc' ) &&
-                                    <span><a class='btn btn-primary float-end btn-sm' rel='noreferrer'target='_blank' href='https://cellxgene.cziscience.com/e/32b9bdce-2481-4c85-ba1b-6ad5fcea844c.cxg/'>Disease-specific DiffEx in cellxgene</a> </span>
+                                    <CellXGeneDropdown v1="https://cellxgene.cziscience.com/e/32b9bdce-2481-4c85-ba1b-6ad5fcea844c.cxg/"/>
                                 }
                                 { (this.props.dataType === 'sn') &&
-                                    <Dropdown isOpen={this.state.snDropdownOpen} toggle={this.toggleSnDropdown} direction="down" className="cellxgene-dropdown">
-                                        <DropdownToggle caret className='float-end' color='primary'>View DiffEx in CellXGene</DropdownToggle>
-                                        <DropdownMenu>
-                                            <DropdownItem tag="a" target="_blank" rel="noopener noreferrer" href="https://cellxgene.cziscience.com/e/07854d9c-5375-4a9b-ac34-fa919d3c3686.cxg/">
-                                                Version 1.0 (Nature 2023)
-                                            </DropdownItem>
-                                            <DropdownItem disabled>
-                                                Version 1.5 (Coming Soon)
-                                            </DropdownItem>
-                                        </DropdownMenu>
-                                    </Dropdown>
-
+                                    <CellXGeneDropdown v1="https://cellxgene.cziscience.com/e/07854d9c-5375-4a9b-ac34-fa919d3c3686.cxg/"/>
                                 }
                             </div>
                             }