Rebased seamless on TS. (#219)

This commit is contained in:
MillenniumFalconMechanic
2021-08-10 22:27:25 -07:00
parent fc60b2acef
commit 136ce42c20
31 changed files with 1650 additions and 422 deletions
@@ -0,0 +1,28 @@
/* core dependencies */
import { Classes } from "@blueprintjs/core";
import React from "react";
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types --- FIXME: disabled temporarily on migrate to TS.
function IconAbout() {
/*
TODO(cc) Generalize iconography into single component with icon prop.
*/
return (
<svg
className={Classes.ICON}
fill="none"
height="16"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M7.99999 2.00002C4.68628 2.00002 1.99999 4.68631 1.99999 8.00002C1.99999 11.3137 4.68628 14 7.99999 14C11.3137 14 14 11.3137 14 8.00002C14 4.68631 11.3137 2.00002 7.99999 2.00002ZM0.666656 8.00002C0.666656 3.94993 3.9499 0.666687 7.99999 0.666687C12.0501 0.666687 15.3333 3.94993 15.3333 8.00002C15.3333 12.0501 12.0501 15.3334 7.99999 15.3334C3.9499 15.3334 0.666656 12.0501 0.666656 8.00002ZM7.33332 5.33335C7.33332 4.96516 7.6318 4.66669 7.99999 4.66669H8.00666C8.37485 4.66669 8.67332 4.96516 8.67332 5.33335C8.67332 5.70154 8.37485 6.00002 8.00666 6.00002H7.99999C7.6318 6.00002 7.33332 5.70154 7.33332 5.33335ZM7.99999 7.33335C8.36818 7.33335 8.66666 7.63183 8.66666 8.00002V10.6667C8.66666 11.0349 8.36818 11.3334 7.99999 11.3334C7.6318 11.3334 7.33332 11.0349 7.33332 10.6667V8.00002C7.33332 7.63183 7.6318 7.33335 7.99999 7.33335Z"
fill="#5C7080"
/>
</svg>
);
}
export default IconAbout;
@@ -0,0 +1,28 @@
/* core dependencies */
import { Classes } from "@blueprintjs/core";
import React from "react";
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types --- FIXME: disabled temporarily on migrate to TS.
function IconDocument() {
/*
TODO(cc) Generalize iconography into single component with icon prop.
*/
return (
<svg
className={Classes.ICON}
fill="none"
height="16"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M2.58579 1.25244C2.96086 0.87737 3.46957 0.666656 4 0.666656H8.66667C8.84348 0.666656 9.01305 0.736894 9.13807 0.861919L13.8047 5.52858C13.9298 5.65361 14 5.82318 14 5.99999V13.3333C14 13.8638 13.7893 14.3725 13.4142 14.7475C13.0391 15.1226 12.5304 15.3333 12 15.3333H4C3.46957 15.3333 2.96086 15.1226 2.58579 14.7475C2.21071 14.3725 2 13.8638 2 13.3333V2.66666C2 2.13622 2.21071 1.62752 2.58579 1.25244ZM4 1.99999C3.82319 1.99999 3.65362 2.07023 3.5286 2.19525C3.40357 2.32028 3.33333 2.48985 3.33333 2.66666V13.3333C3.33333 13.5101 3.40357 13.6797 3.5286 13.8047C3.65362 13.9298 3.82319 14 4 14H12C12.1768 14 12.3464 13.9298 12.4714 13.8047C12.5964 13.6797 12.6667 13.5101 12.6667 13.3333V6.66666H8.66667C8.29848 6.66666 8 6.36818 8 5.99999V1.99999H4ZM9.33333 2.9428L11.7239 5.33332H9.33333V2.9428Z"
fill="#5C7080"
/>
</svg>
);
}
export default IconDocument;
@@ -0,0 +1,32 @@
/* core dependencies */
import { Classes } from "@blueprintjs/core";
import React from "react";
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types --- FIXME: disabled temporarily on migrate to TS.
function IconGitHub() {
/*
TODO(cc) Generalize iconography into single component with icon prop.
*/
return (
<svg
className={Classes.ICON}
fill="none"
height="16"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M8.00004 0.637878C3.83166 0.637878 0.451538 4.01725 0.451538 8.18638C0.451538 11.5216 2.61441 14.351 5.61366 15.3493C5.99079 15.4193 6.12929 15.1855 6.12929 14.9861C6.12929 14.8061 6.12229 14.2115 6.11904 13.5808C4.01904 14.0374 3.57591 12.6901 3.57591 12.6901C3.23254 11.8176 2.73779 11.5856 2.73779 11.5856C2.05279 11.1171 2.78941 11.1269 2.78941 11.1269C3.54729 11.18 3.94654 11.9048 3.94654 11.9048C4.61979 13.0585 5.71241 12.725 6.14316 12.5323C6.21091 12.0444 6.40654 11.7113 6.62241 11.5228C4.94579 11.3321 3.18316 10.6848 3.18316 7.79238C3.18316 6.96825 3.47816 6.29488 3.96104 5.76613C3.88254 5.57613 3.62416 4.80838 4.03404 3.76863C4.03404 3.76863 4.66779 3.56575 6.11029 4.54238C6.71254 4.375 7.35841 4.29088 8.00004 4.288C8.64129 4.29088 9.28754 4.37475 9.89091 4.54213C11.3317 3.5655 11.9647 3.76838 11.9647 3.76838C12.3755 4.808 12.1172 5.57588 12.0388 5.76588C12.5228 6.29463 12.8157 6.968 12.8157 7.79213C12.8157 10.6914 11.0498 11.3296 9.36891 11.5166C9.63979 11.7509 9.88104 12.2104 9.88104 12.9145C9.88104 13.9245 9.87229 14.7374 9.87229 14.986C9.87229 15.1869 10.0083 15.4223 10.3908 15.3481C13.3883 14.3489 15.5487 11.5204 15.5487 8.18638C15.5485 4.0175 12.1688 0.638003 8.00004 0.638003V0.637878Z"
fill="#181616"
/>
<path
d="M3.31057 11.4758C3.29395 11.5133 3.23495 11.5245 3.1812 11.4989C3.1262 11.4744 3.09557 11.4233 3.11332 11.3856C3.12957 11.3469 3.1887 11.3363 3.24332 11.3621C3.29832 11.3868 3.32957 11.4384 3.31045 11.4759L3.31057 11.4758ZM3.61632 11.8169C3.58045 11.8503 3.51007 11.8348 3.46232 11.7819C3.41282 11.7294 3.40357 11.659 3.4402 11.6251C3.47745 11.5919 3.5457 11.6076 3.5952 11.6601C3.64445 11.7134 3.6542 11.7831 3.61645 11.817L3.61632 11.8169ZM3.91407 12.2515C3.86782 12.2838 3.79207 12.2536 3.74532 12.1865C3.69907 12.1193 3.69907 12.0386 3.74657 12.0065C3.7932 11.9743 3.86782 12.0034 3.91532 12.0699C3.96132 12.138 3.96132 12.2186 3.91407 12.2514V12.2515ZM4.3217 12.6716C4.28045 12.7173 4.19219 12.705 4.12769 12.6429C4.06182 12.582 4.04345 12.4954 4.08482 12.4499C4.12682 12.4041 4.21544 12.4169 4.28032 12.4786C4.34619 12.5394 4.36607 12.6261 4.32194 12.6715L4.3217 12.6716ZM4.88419 12.9155C4.86582 12.9746 4.78107 13.0015 4.69544 12.9763C4.61007 12.9504 4.55419 12.8813 4.57169 12.8215C4.58919 12.7619 4.67457 12.734 4.76069 12.7609C4.84607 12.7866 4.90194 12.8554 4.88419 12.9155ZM5.50207 12.9606C5.50419 13.0229 5.43169 13.0744 5.34207 13.0756C5.25169 13.0778 5.17857 13.0273 5.17769 12.966C5.17769 12.9031 5.24869 12.8523 5.33894 12.8505C5.42857 12.8489 5.50219 12.8989 5.50219 12.9605L5.50207 12.9606ZM6.07682 12.8629C6.08757 12.9235 6.02519 12.9859 5.93607 13.0025C5.84857 13.0188 5.76732 12.981 5.75607 12.9209C5.74532 12.8586 5.80882 12.7963 5.89632 12.7801C5.98557 12.7648 6.06557 12.8014 6.07682 12.863V12.8629Z"
fill="#181616"
/>
</svg>
);
}
export default IconGitHub;
@@ -0,0 +1,54 @@
/* core dependencies */
import { Classes } from "@blueprintjs/core";
import React from "react";
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types --- FIXME: disabled temporarily on migrate to TS.
function IconSlack() {
/*
TODO(cc) Generalize iconography into single component with icon prop.
*/
return (
<svg
className={Classes.ICON}
fill="none"
height="16"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M1.60123 8.44999C1.32765 8.45681 1.05913 8.37541 0.835376 8.21784C0.611621 8.06026 0.444506 7.83488 0.358733 7.57499C0.351233 7.55374 0.346233 7.53374 0.339983 7.51374C0.246912 7.18295 0.284862 6.82901 0.445947 6.52546C0.607032 6.22191 0.878869 5.99209 1.20498 5.88375L12.125 2.225C12.2546 2.18729 12.3888 2.16752 12.5237 2.16625C12.804 2.15869 13.0793 2.24133 13.3091 2.40201C13.5388 2.56268 13.7109 2.7929 13.8 3.05875L13.8162 3.11125C14.02 3.825 13.5125 4.4625 12.905 4.66625L2.04498 8.37499C1.90203 8.42355 1.75221 8.44887 1.60123 8.44999Z"
fill="#80CADE"
/>
<path
d="M3.4212 13.8188C3.14802 13.8283 2.87899 13.7498 2.65389 13.5947C2.4288 13.4396 2.25956 13.2162 2.1712 12.9575C2.16495 12.9375 2.1587 12.9175 2.15245 12.8963C2.05699 12.563 2.09393 12.2056 2.25556 11.8989C2.4172 11.5922 2.69105 11.3597 3.01995 11.25L13.9375 7.55751C14.0773 7.51073 14.2237 7.48626 14.3712 7.48501C14.6502 7.47966 14.9237 7.56293 15.1523 7.72286C15.381 7.88279 15.553 8.11112 15.6437 8.37502L15.66 8.43002C15.7117 8.61519 15.7241 8.80913 15.6966 8.9994C15.669 9.18968 15.6021 9.37211 15.5 9.53502C15.3437 9.77877 14.8512 9.99252 14.8512 9.99252L3.8912 13.7425C3.74172 13.793 3.58522 13.8196 3.42745 13.8213L3.4212 13.8188Z"
fill="#DB015C"
/>
<path
d="M12.51 13.8425C12.2269 13.8453 11.9502 13.7584 11.7196 13.5943C11.489 13.4301 11.3162 13.1971 11.2262 12.9287L7.58247 2.10499L7.56372 2.04374C7.47896 1.71028 7.52546 1.357 7.69363 1.05684C7.8618 0.756674 8.13879 0.532532 8.46744 0.430683C8.79608 0.328834 9.15128 0.357052 9.45973 0.509513C9.76817 0.661973 10.0063 0.927038 10.125 1.24999L13.7687 12.0725L13.7787 12.1075C13.8403 12.3073 13.8543 12.5187 13.8197 12.7248C13.785 12.931 13.7026 13.1262 13.5791 13.2949C13.4556 13.4636 13.2944 13.601 13.1084 13.6963C12.9223 13.7916 12.7165 13.8421 12.5075 13.8437L12.51 13.8425Z"
fill="#E8A900"
/>
<path
d="M7.09375 15.6663C6.81042 15.6687 6.53359 15.5814 6.30297 15.4168C6.07235 15.2522 5.89977 15.0188 5.81 14.75L2.16625 3.92876L2.1475 3.86876C2.05234 3.53693 2.08892 3.18118 2.2496 2.87565C2.41028 2.57012 2.68267 2.33839 3.01 2.22876C3.14466 2.1838 3.28553 2.16018 3.4275 2.15876C3.71057 2.15594 3.98725 2.24284 4.21788 2.407C4.4485 2.57115 4.62122 2.80413 4.71125 3.07251L8.35375 13.8963C8.36 13.915 8.36625 13.9363 8.3725 13.9563C8.42934 14.155 8.43947 14.3642 8.4021 14.5675C8.36474 14.7708 8.28088 14.9627 8.15708 15.1283C8.03328 15.2938 7.8729 15.4285 7.68844 15.5219C7.50399 15.6152 7.30046 15.6646 7.09375 15.6663Z"
fill="#41B088"
/>
<path
d="M10.7137 11.405L13.25 10.5363L12.4237 8.07001L9.875 8.93001L10.7137 11.405Z"
fill="#CA161A"
/>
<path
d="M5.30619 13.25L7.84619 12.3812L7.00994 9.89999L4.46619 10.76L5.30619 13.25Z"
fill="#3B1D37"
/>
<path
d="M8.90496 6.03251L11.4462 5.16501L10.625 2.72751L8.07996 3.58001L8.90496 6.03251Z"
fill="#69852C"
/>
<path
d="M3.49988 7.87498L6.03738 7.01123L5.20613 4.54248L2.66113 5.39498L3.49988 7.87498Z"
fill="#118F79"
/>
</svg>
);
}
export default IconSlack;
+37 -33
View File
@@ -2,6 +2,12 @@ import React from "react";
import { Button, Menu, MenuItem, Popover, Position } from "@blueprintjs/core";
import { IconNames } from "@blueprintjs/icons";
/* app dependencies */
import IconAbout from "./iconAbout";
import IconDocument from "./iconDocument";
import IconGitHub from "./iconGitHub";
import IconSlack from "./iconSlack";
const InformationMenu = React.memo((props) => {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'libraryVersions' does not exist on type ... Remove this comment to see the full error message
const { libraryVersions, tosURL, privacyURL } = props;
@@ -11,60 +17,58 @@ const InformationMenu = React.memo((props) => {
<Menu>
<MenuItem
href="https://chanzuckerberg.github.io/cellxgene/"
target="_blank"
icon="book"
text="Documentation"
icon={<IconDocument />}
rel="noopener"
target="_blank"
text="Documentation"
/>
<MenuItem
href="https://join-cellxgene-users.herokuapp.com/"
icon={<IconSlack />}
target="_blank"
icon="chat"
text="Chat"
rel="noopener"
/>
<MenuItem
href="https://github.com/chanzuckerberg/cellxgene"
icon={<IconGitHub />}
target="_blank"
icon="git-branch"
text="Github"
rel="noopener"
/>
<MenuItem target="_blank" text={libraryVersions?.cellxgene || null} />
<MenuItem text="MIT License" />
{tosURL && (
<MenuItem
href={tosURL}
target="_blank"
text="Terms of Service"
rel="noopener"
/>
)}
{privacyURL && (
<MenuItem
href={privacyURL}
target="_blank"
text="Privacy Policy"
rel="noopener"
/>
)}
<MenuItem
icon={<IconAbout />}
popoverProps={{ openOnTargetFocus: false }}
text="About cellxgene"
>
<MenuItem text={libraryVersions?.cellxgene || null} />
<MenuItem text="MIT License" />
{tosURL && (
<MenuItem
href={tosURL}
rel="noopener"
target="_blank"
text="Terms of Service"
/>
)}
{privacyURL && (
<MenuItem
href={privacyURL}
rel="noopener"
target="_blank"
text="Privacy Policy"
/>
)}
</MenuItem>
</Menu>
}
position={Position.BOTTOM_RIGHT}
position={Position.BOTTOM_LEFT}
modifiers={{
preventOverflow: { enabled: false },
hide: { enabled: false },
}}
>
<Button
data-testid="menu"
type="button"
icon={IconNames.INFO_SIGN}
style={{
cursor: "pointer",
verticalAlign: "middle",
}}
/>
<Button data-testid="menu" icon={IconNames.MENU} minimal type="button" />
</Popover>
);
});
@@ -0,0 +1,66 @@
// Core dependencies
import { SKELETON } from "@blueprintjs/core/lib/esnext/common/classes";
import React from "react";
// App dependencies
import Logo from "../framework/logo";
import Title from "../framework/title";
import * as globals from "../../globals";
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types --- FIXME: disabled temporarily on migrate to TS.
function LeftSidebarSkeleton() {
/*
Skeleton of left side bar, to be displayed during data load.
TODO(cc)
- Remove dupe of LeftSidebar inline styles
- Remove dupe of TopLeftLogoAndTitle styles
*/
return (
<div
style={{
borderRight: `1px solid ${globals.lightGrey}`,
display: "flex",
flexDirection: "column",
height: "100%",
}}
>
{/* TopLeftLogoAndTitle */}
<div
style={{
paddingLeft: 8,
paddingRight: 5,
paddingTop: 8,
width: globals.leftSidebarWidth,
zIndex: 1,
borderBottom: `1px solid ${globals.lighterGrey}`,
display: "flex",
justifyContent: "space-between",
alignItems: "flex-start",
}}
>
<div>
<Logo size={28} />
<Title />
</div>
{/* Hamburger */}
<div style={{ height: 30, width: 30 }} className={SKELETON} />
</div>
{/* Categorical */}
<div style={{ padding: 8 }}>
{[...Array(10).keys()].map((i) => (
<div
key={i}
style={{ height: 30, marginBottom: 4 }}
className={SKELETON}
/>
))}
</div>
{/* Continuous */}
{[...Array(2).keys()].map((i) => (
<div key={i} style={{ height: 211 }} className={SKELETON} />
))}
</div>
);
}
export default LeftSidebarSkeleton;
@@ -1,49 +1,26 @@
import React from "react";
import { connect } from "react-redux";
import { Button } from "@blueprintjs/core";
import * as globals from "../../globals";
import Logo from "../framework/logo";
import Truncate from "../util/truncate";
import InfoDrawer from "../infoDrawer/infoDrawer";
import Title from "../framework/title";
import InformationMenu from "./infoMenu";
const DATASET_TITLE_FONT_SIZE = 14;
// @ts-expect-error ts-migrate(1238) FIXME: Unable to resolve signature of class decorator whe... Remove this comment to see the full error message
@connect((state) => {
@connect((state) => ({
// eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS.
const { corpora_props: corporaProps } = (state as any).config;
const correctVersion =
["1.0.0", "1.1.0"].indexOf(corporaProps?.version?.corpora_schema_version) >
-1;
return {
// eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS.
datasetTitle: (state as any).config?.displayNames?.dataset ?? "",
// eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS.
libraryVersions: (state as any).config?.library_versions,
// eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS.
aboutLink: (state as any).config?.links?.["about-dataset"],
// eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS.
tosURL: (state as any).config?.parameters?.about_legal_tos,
// eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS.
privacyURL: (state as any).config?.parameters?.about_legal_privacy,
title: correctVersion ? corporaProps?.title : undefined,
};
})
libraryVersions: (state as any).config?.library_versions,
// eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS.
aboutLink: (state as any).config?.links?.["about-dataset"],
// eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS.
tosURL: (state as any).config?.parameters?.about_legal_tos,
// eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS.
privacyURL: (state as any).config?.parameters?.about_legal_privacy,
}))
class LeftSideBar extends React.Component {
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types --- FIXME: disabled temporarily on migrate to TS.
handleClick = () => {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
const { dispatch } = this.props;
dispatch({ type: "toggle dataset drawer" });
};
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types --- FIXME: disabled temporarily on migrate to TS.
render() {
const {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'datasetTitle' does not exist on type 'Re... Remove this comment to see the full error message
datasetTitle,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'libraryVersions' does not exist on type ... Remove this comment to see the full error message
libraryVersions,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'aboutLink' does not exist on type 'Reado... Remove this comment to see the full error message
@@ -54,8 +31,6 @@ class LeftSideBar extends React.Component {
tosURL,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
dispatch,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'title' does not exist on type 'Readonly<... Remove this comment to see the full error message
title,
} = this.props;
return (
@@ -73,48 +48,9 @@ class LeftSideBar extends React.Component {
>
<div>
<Logo size={28} />
<span
style={{
fontSize: 24,
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>
<Title />
</div>
<div style={{ marginRight: 5, height: "100%" }}>
<Button
minimal
style={{
fontSize: DATASET_TITLE_FONT_SIZE,
position: "relative",
top: -1,
}}
onClick={this.handleClick}
>
<Truncate>
<span style={{ maxWidth: 155 }} data-testid="header">
{title ?? datasetTitle}
</span>
</Truncate>
</Button>
<InfoDrawer />
<InformationMenu
{...{
libraryVersions,