import { Button, Classes, H5, MenuItem } from "@blueprintjs/core"; import { IconNames } from "@blueprintjs/icons"; import { ItemRenderer, Select } from "@blueprintjs/select"; import * as numeral from "numeral"; import React from "react"; import styled from "styled-components"; import { FloatingCard, InstanceType } from "."; import { QUANTITATIVE_COLOR_SCHEME } from "../../constants"; import { ColorScheme } from "../../types"; const ColorSchemeSelect = Select.ofType(); const StyledLi = styled.li` margin-top: 2px; `; const StyledKeyContainer = styled.div` margin-top: 10px; `; const ColorKeyContainer = styled.div` display: flex; flex-direction: row; height: 100px; `; const ColorBarContainer = styled.div` width: 10px; display: flex; flex-direction: column; margin-right: 10px; `; interface ColorBarProps { color: string; } const ColorBar = styled.div` width: 10px; background-color: ${(props) => props.color}; flex: 1; `; const TextContainer = styled.div` display: flex; flex-direction: column; justify-content: space-between; `; const renderItem: ItemRenderer = (colorScheme, { handleClick, modifiers }) => { if (!modifiers.matchesPredicate) { return null; } return ; }; const renderQualitativeKey = (values: string[]) => (
    {values.map((v) => ( ))}
); const renderQuantitativeKey = (range: number[]) => { const [min, max] = range; return ( {QUANTITATIVE_COLOR_SCHEME.map((color) => ( ))} {numeral.default(min).format("0")} {numeral.default(max).format("0")} ); }; interface GraphKeyProps { current?: ColorScheme; colorSchemes: ColorScheme[]; ranges?: { [key: string]: [number, number] }; onItemSelect: (colorScheme?: ColorScheme) => void; } const GraphKey: React.FC = ({ current, colorSchemes, ranges, onItemSelect }) => { const unsetColorScheme = () => { onItemSelect(undefined); }; let key; if (current) { if (current.type === "qualitative") { key = renderQualitativeKey(current.values); } else if (current.type === "quantitative") { key = renderQuantitativeKey(ranges![current.cytoscapeDataKey]); } } return (
Color coding