mirror of
https://github.com/chanzuckerberg/cellxgene.git
synced 2026-09-24 03:28:12 +08:00
Severiano Badajoz
89b68723cc
* create infoDrawer * create read/writes to redux store * reimplement reducer that vanished * remove aboutURL stuff from title * add formatting and style * s/length/size and make metadata items list items * remove comment * remove empty singletons * refactor into async react component * Clean up skeleton * swap out for loop for map * add comment * replace placeholder * switch ternary for `&&` * event handling fixes and PR feedback * add button and move click handler to button * ditch empty categories * move drawer button handling to redux * remove categorical move note * PR feedback from colin * update snapshot * remove hover state
84 lines
1.9 KiB
JavaScript
84 lines
1.9 KiB
JavaScript
// jshint esversion: 6
|
||
import React from "react";
|
||
import { connect } from "react-redux";
|
||
import { Button } from "@blueprintjs/core";
|
||
import { IconNames } from "@blueprintjs/icons";
|
||
|
||
import * as globals from "../../globals";
|
||
import Logo from "../framework/logo";
|
||
import Truncate from "../util/truncate";
|
||
import InfoDrawer from "../infoDrawer/infoDrawer";
|
||
|
||
const DATASET_TITLE_FONT_SIZE = 14;
|
||
|
||
@connect((state) => ({
|
||
datasetTitle: state.config?.displayNames?.dataset ?? "",
|
||
}))
|
||
class LeftSideBar extends React.Component {
|
||
handleClick = () => {
|
||
const { dispatch } = this.props;
|
||
dispatch({ type: "toggle dataset drawer" });
|
||
};
|
||
|
||
render() {
|
||
const { datasetTitle } = this.props;
|
||
|
||
return (
|
||
<div
|
||
style={{
|
||
paddingLeft: 8,
|
||
paddingTop: 8,
|
||
width: globals.leftSidebarWidth,
|
||
zIndex: 1,
|
||
borderBottom: `1px solid ${globals.lighterGrey}`,
|
||
}}
|
||
>
|
||
<Logo size={30} />
|
||
<span
|
||
style={{
|
||
fontSize: 28,
|
||
position: "relative",
|
||
top: -6,
|
||
fontWeight: "bold",
|
||
marginLeft: 5,
|
||
color: globals.logoColor,
|
||
userSelect: "none",
|
||
}}
|
||
>
|
||
cell
|
||
<span
|
||
style={{
|
||
position: "relative",
|
||
top: 1,
|
||
fontWeight: 300,
|
||
fontSize: 24,
|
||
}}
|
||
>
|
||
×
|
||
</span>
|
||
gene
|
||
</span>
|
||
<Button
|
||
minimal
|
||
icon={IconNames.BOOK}
|
||
style={{
|
||
fontSize: DATASET_TITLE_FONT_SIZE,
|
||
position: "absolute",
|
||
right: 10,
|
||
}}
|
||
onClick={this.handleClick}
|
||
>
|
||
<Truncate>
|
||
<span style={{ maxWidth: 155 }} data-testid="header">
|
||
{datasetTitle}
|
||
</span>
|
||
</Truncate>
|
||
</Button>
|
||
<InfoDrawer />
|
||
</div>
|
||
);
|
||
}
|
||
}
|
||
|
||
export default LeftSideBar;
|