{isExpanded ? this.renderCategoryItems() : null}
diff --git a/client/src/components/categorical/occupancy.js b/client/src/components/categorical/occupancy.js
index aeb61553..68f6e269 100644
--- a/client/src/components/categorical/occupancy.js
+++ b/client/src/components/categorical/occupancy.js
@@ -45,7 +45,10 @@ class Occupancy extends React.Component {
groupBy
); /* Because the signature changes we really need different names for histogram to differentiate signatures */
- const bins = histogramMap.get(category.categoryValues[categoryIndex]);
+ const categoryValue = category.categoryValues[categoryIndex];
+ const bins = histogramMap.has(categoryValue)
+ ? histogramMap.get(categoryValue)
+ : new Array(50).fill(0);
const xScale = d3
.scaleLinear()
@@ -102,30 +105,34 @@ class Occupancy extends React.Component {
const occupancy = occupancyMap.get(category.categoryValues[categoryIndex]);
- const x = d3
- .scaleLinear()
- /* get all the keys d[1] as an array, then find the sum */
- .domain([0, d3.sum(Array.from(occupancy.values()))])
- .range([0, this._WIDTH]);
- const categories = schema.annotations.obsByName[colorAccessor]?.categories;
+ if (occupancy && occupancy.size > 0) {
+ // not all categories have occupancy, so occupancy may be undefined.
+ const x = d3
+ .scaleLinear()
+ /* get all the keys d[1] as an array, then find the sum */
+ .domain([0, d3.sum(Array.from(occupancy.values()))])
+ .range([0, this._WIDTH]);
+ const categories =
+ schema.annotations.obsByName[colorAccessor]?.categories;
- let currentOffset = 0;
- const dfColumn = world.obsAnnotations.col(colorAccessor);
- const categoryValues = dfColumn.summarize().categories;
+ let currentOffset = 0;
+ const dfColumn = world.obsAnnotations.col(colorAccessor);
+ const categoryValues = dfColumn.summarize().categories;
- let o;
- let scaledValue;
- let value;
+ let o;
+ let scaledValue;
+ let value;
- for (let i = 0, { length } = categoryValues; i < length; i += 1) {
- value = categoryValues[i];
- o = occupancy.get(value);
- scaledValue = x(o);
- ctx.fillStyle = o
- ? colorScale(categories.indexOf(value))
- : "rgb(255,255,255)";
- ctx.fillRect(currentOffset, 0, o ? scaledValue : 0, this._HEIGHT);
- currentOffset += o ? scaledValue : 0;
+ for (let i = 0, { length } = categoryValues; i < length; i += 1) {
+ value = categoryValues[i];
+ o = occupancy.get(value);
+ scaledValue = x(o);
+ ctx.fillStyle = o
+ ? colorScale(categories.indexOf(value))
+ : "rgb(255,255,255)";
+ ctx.fillRect(currentOffset, 0, o ? scaledValue : 0, this._HEIGHT);
+ currentOffset += o ? scaledValue : 0;
+ }
}
};
diff --git a/client/src/components/categorical/value.js b/client/src/components/categorical/value.js
index 713964e3..fbb6cd4c 100644
--- a/client/src/components/categorical/value.js
+++ b/client/src/components/categorical/value.js
@@ -1,18 +1,108 @@
// jshint esversion: 6
import { connect } from "react-redux";
import React from "react";
+
+import {
+ Button,
+ InputGroup,
+ Menu,
+ MenuItem,
+ Popover,
+ Position,
+ Icon,
+ PopoverInteractionKind
+} from "@blueprintjs/core";
import Occupancy from "./occupancy";
import * as globals from "../../globals";
import styles from "./categorical.css";
@connect(state => ({
categoricalSelection: state.categoricalSelection,
+ annotations: state.annotations,
colorScale: state.colors.scale,
colorAccessor: state.colors.colorAccessor,
schema: state.world?.schema,
world: state.world
}))
class CategoryValue extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ editedLabelText: ""
+ };
+ }
+
+ handleDeleteValue = () => {
+ const {
+ dispatch,
+ metadataField,
+ categoryIndex,
+ categoricalSelection
+ } = this.props;
+ const category = categoricalSelection[metadataField];
+ const label = category.categoryValues[categoryIndex];
+ dispatch({
+ type: "annotation: delete label",
+ metadataField,
+ label
+ });
+ };
+
+ handleAddCurrentSelectionToThisLabel = () => {
+ const {
+ dispatch,
+ metadataField,
+ categoryIndex,
+ categoricalSelection
+ } = this.props;
+ const category = categoricalSelection[metadataField];
+ const label = category.categoryValues[categoryIndex];
+ dispatch({
+ type: "annotation: label current cell selection",
+ metadataField,
+ categoryIndex,
+ label
+ });
+ };
+
+ handleEditValue = () => {
+ const {
+ dispatch,
+ metadataField,
+ categoryIndex,
+ categoricalSelection
+ } = this.props;
+ const { editedLabelText } = this.state;
+ const category = categoricalSelection[metadataField];
+ const label = category.categoryValues[categoryIndex];
+ dispatch({
+ type: "annotation: label edited",
+ editedLabel: editedLabelText,
+ metadataField,
+ categoryIndex,
+ label
+ });
+ this.setState({ editedLabelText: "" });
+ };
+
+ activateEditLabelMode = () => {
+ const { dispatch, metadataField, categoryIndex } = this.props;
+ dispatch({
+ type: "annotation: activate edit label mode",
+ metadataField,
+ categoryIndex
+ });
+ };
+
+ cancelEdit = () => {
+ const { dispatch, metadataField, categoryIndex } = this.props;
+ dispatch({
+ type: "annotation: cancel edit label mode",
+ metadataField,
+ categoryIndex
+ });
+ };
+
toggleOff = () => {
const { dispatch, metadataField, categoryIndex } = this.props;
dispatch({
@@ -23,12 +113,12 @@ class CategoryValue extends React.Component {
};
shouldComponentUpdate = nextProps => {
- /*
+ /*
Checks to see if at least one of the following changed:
* world state
* the color accessor (what is currently being colored by)
* if this catagorical value's selection status has changed
-
+
If and only if true, update the component
*/
const { props } = this;
@@ -45,8 +135,14 @@ class CategoryValue extends React.Component {
const worldChange = props.world !== nextProps.world;
const colorAccessorChange = props.colorAccessor !== nextProps.colorAccessor;
+ const annotationsChange = props.annotations !== nextProps.annotations;
- return valueSelectionChange || worldChange || colorAccessorChange;
+ return (
+ valueSelectionChange ||
+ worldChange ||
+ colorAccessorChange ||
+ annotationsChange
+ );
};
toggleOn = () => {
@@ -84,7 +180,9 @@ class CategoryValue extends React.Component {
colorAccessor,
colorScale,
i,
- schema
+ schema,
+ isUserAnno,
+ annotations
} = this.props;
if (!categoricalSelection) return null;
@@ -121,41 +219,103 @@ class CategoryValue extends React.Component {
onMouseEnter={this.handleMouseEnter}
onMouseLeave={this.handleMouseExit}
>
-
-
-