<commit_before>import CX from "classnames";
import React from "react";
import styled from "styled-components";
import { Dropdown, FormControl, FormGroup, InputGroup, MenuItem } from "react-bootstrap";
import { connect } from "react-redux";
import { Button, Checkbox, Flex, FlexItem, Icon } from "../../../base";
import {
    collapseAnalysis,
    setPathoscopeFilter,
    setSortKey,
    togglePathoscopeSortDescending,
    toggleShowPathoscopeMedian,
    toggleShowPathoscopeReads
} from "../../actions";

export const PathoscopeToolbar = props => {
    const {
        className,
        filterIsolates,
        filterOTUs,
        onCollapse,
        onFilter,
        onSetSortKey,
        onToggleShowMedian,
        onToggleShowReads,
        onToggleSortDescending,
        showMedian,
        showReads,
        sortDescending,
        sortKey
    } = props;

    return (
        <div className={CX("toolbar", className)}>
            <FormGroup>
                <InputGroup>
                    <InputGroup.Button>
                        <Button title="Sort Direction" onClick={onToggleSortDescending} tip="Sort List">
                            <Icon name={sortDescending ? "sort-amount-down" : "sort-amount-up"} />
                        </Button>
                    </InputGroup.Button>
                    <FormControl componentClass="select" value={sortKey} onChange={onSetSortKey}>
                        <option className="text-primary" value="coverage">
                            Coverage
                        </option>
                        <option className="text-success" value="pi">
                            Weight
                        </option>
                        <option className="text-danger" value="depth">
                            Depth
                        </option>
                    </FormControl>
                </InputGroup>
            </FormGroup>

            <Button
                icon="compress"
                title="Collapse"
                tip="Collapse"
                onClick={onCollapse}
                className="hidden-xs"
                disabled={false}
            />

            <Button
                icon="chart-pie"
                title="Weight Format"
                tip="Weight Format"
                active={!showReads}
                className="hidden-xs"
                onClick={onToggleShowReads}
            />

            <Button
                icon="chart-bar"
                title="Median Depth"
                tip="Median Depth"
                active={showMedian}
                className="hidden-xs"
                onClick={onToggleShowMedian}
            />

            <Dropdown
                id="job-clear-dropdown"
                onSelect={onFilter}
                className="split-dropdown"
                pullRight
                style={{ zIndex: 1 }}
            >
                <Button title="Filter" tip="Filter Results" onClick={onFilter} active={filterOTUs || filterIsolates}>
                    <Icon name="filter" />
                </Button>
                <Dropdown.Toggle />
                <Dropdown.Menu>
                    <MenuItem eventKey="OTUs">
                        <Flex>
                            <FlexItem>
                                <Checkbox checked={filterOTUs} />
                            </FlexItem>
                            <FlexItem pad={5}>OTUs</FlexItem>
                        </Flex>
                    </MenuItem>
                    <MenuItem eventKey="isolates">
                        <Flex>
                            <FlexItem>
                                <Checkbox checked={filterIsolates} />
                            </FlexItem>
                            <FlexItem pad={5}>Isolates</FlexItem>
                        </Flex>
                    </MenuItem>
                </Dropdown.Menu>
            </Dropdown>
        </div>
    );
};

const mapStateToProps = state => ({
    ...state.analyses<commit_msg>Add analysis export button to Pathoscope view<commit_after>import CX from "classnames";
import React from "react";
import styled from "styled-components";
import { Dropdown, DropdownButton, FormControl, FormGroup, InputGroup, MenuItem } from "react-bootstrap";
import { connect } from "react-redux";
import { Button, Checkbox, Flex, FlexItem, Icon } from "../../../base";
import {
    collapseAnalysis,
    setPathoscopeFilter,
    setSortKey,
    togglePathoscopeSortDescending,
    toggleShowPathoscopeMedian,
    toggleShowPathoscopeReads
} from "../../actions";

const DownloadDropdownTitle = () => (
    <span>
        <Icon name="file-download" /> Export
    </span>
);

export const PathoscopeToolbar = props => {
    const {
        className,
        filterIsolates,
        filterOTUs,
        onCollapse,
        onFilter,
        onSetSortKey,
        onToggleShowMedian,
        onToggleShowReads,
        onToggleSortDescending,
        showMedian,
        showReads,
        sortDescending,
        sortKey
    } = props;

    const analysisId = props.detail.id;

    return (
        <div className={CX("toolbar", className)}>
            <FormGroup>
                <InputGroup>
                    <InputGroup.Button>
                        <Button title="Sort Direction" onClick={onToggleSortDescending} tip="Sort List">
                            <Icon name={sortDescending ? "sort-amount-down" : "sort-amount-up"} />
                        </Button>
                    </InputGroup.Button>
                    <FormControl componentClass="select" value={sortKey} onChange={onSetSortKey}>
                        <option className="text-primary" value="coverage">
                            Coverage
                        </option>
                        <option className="text-success" value="pi">
                            Weight
                        </option>
                        <option className="text-danger" value="depth">
                            Depth
                        </option>
                    </FormControl>
                </InputGroup>
            </FormGroup>

            <Button
                icon="compress"
                title="Collapse"
                tip="Collapse"
                onClick={onCollapse}
                className="hidden-xs"
                disabled={false}
            />

            <Button
                icon="chart-pie"
                title="Weight Format"
                tip="Weight Format"
                active={!showReads}
                className="hidden-xs"
                onClick={onToggleShowReads}
            />

            <Button
                icon="chart-bar"
                title="Median Depth"
                tip="Median Depth"
                active={showMedian}
                className="hidden-xs"
                onClick={onToggleShowMedian}
            />

            <Dropdown
                id="job-clear-dropdown"
                onSelect={onFilter}
                className="split-dropdown"
                pullRight
                style={{ zIndex: 1 }}
            >
                <Button title="Filter" tip="Filter Results" onClick={onFilter} active={filterOTUs || filterIsolates}>
                    <Icon name="filter" />
                </Button>
                <Dropdown.Toggle />
                <Dropdown.Menu>
                    <MenuItem eventKey="OTUs">
                        <Flex>
                            <FlexItem>
                                <Checkbox checked={filterOTUs} />
                            </FlexItem>
                            <FlexItem pad={5}>OTUs</FlexItem>
                        </Flex>
                    </MenuItem>
                    <MenuItem eventKey="isolates">
                        <Flex>
                            <FlexItem>
                                <Checkbox checked={filterIsolates} />
                            </FlexItem>
                            <FlexItem pad={5}>Isolates</FlexItem>
                        </Flex>
                    </MenuItem>
                </Dropdown.Menu>
            </Dropdown>

            <DropdownButton id="download-dropdown" title={<DownloadDropdownTitle />} pullRight style={{ zIndex: 1 }}>
                <MenuItem href={`/download/analyses/${analysisId}.csv`}>
                    <Icon name="file-csv" /> CSV
                </MenuItem>
                <MenuItem href={`/download/analyses/${analysisId}.xlsx`}>
                    <Icon name="file-excel" /> Excel
                </MenuItem>
            </DropdownButton>
        </div>
    );
};

const mapStateToProps = state => ({
    ...state.analyses
{'fraction_non_alphanumeric': 0.10277681760571494, 'fraction_numerical': 0.0008065445327802742, 'mean_word_length': 1.1886031265758952, 'pattern_counts': {'":': 0, '<': 111, '<?xml version=': 0, '>': 116, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 6, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1885489', 'n_tokens_mistral': 2163, 'n_tokens_neox': 1994, 'n_words': 386}