fork/cellxgene
1
0
Fork 0
mirror of https://github.com/chanzuckerberg/cellxgene.git synced 2026-10-06 14:28:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor in truncate component

Browse Source
This commit is contained in:
Severiano Badajoz
2020-05-26 16:01:19 -07:00
parent 136d515504
commit 7dc211feab
1 changed files with 27 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/categorical/value/index.js
+27 -41
View File
@@ -9,7 +9,6 @@ import {
Position, Position,
Icon, Icon,
PopoverInteractionKind, PopoverInteractionKind,
Tooltip,
} from "@blueprintjs/core"; } from "@blueprintjs/core";
import Occupancy from "./occupancy"; import Occupancy from "./occupancy";
import * as globals from "../../../globals"; import * as globals from "../../../globals";
@@ -18,8 +17,8 @@ import AnnoDialog from "../annoDialog";
import LabelInput from "../labelInput"; import LabelInput from "../labelInput";
import { AnnotationsHelpers } from "../../../util/stateManager"; import { AnnotationsHelpers } from "../../../util/stateManager";
import maybeTruncateString from "../../../util/maybeTruncateString";
import { labelPrompt, isLabelErroneous } from "../labelUtil"; import { labelPrompt, isLabelErroneous } from "../labelUtil";
import Truncate from "../../util/truncate";
/* this is defined outside of the class so we can use it in connect() */ /* this is defined outside of the class so we can use it in connect() */
function _currentLabel(ownProps, categoricalSelection) { function _currentLabel(ownProps, categoricalSelection) {
@@ -317,13 +316,6 @@ class CategoryValue extends React.Component {
categories = schema.annotations.obsByName[colorAccessor]?.categories; categories = schema.annotations.obsByName[colorAccessor]?.categories;
} }
const truncatedString = maybeTruncateString(
displayString,
colorAccessor && !isColorBy
? globals.categoryLabelDisplayStringShortLength
: globals.categoryLabelDisplayStringLongLength
);
const editModeActive = const editModeActive =
isUserAnno && isUserAnno &&
annotations.labelEditable.category === metadataField && annotations.labelEditable.category === metadataField &&
@@ -384,40 +376,34 @@ class CategoryValue extends React.Component {
onMouseLeave={this.handleMouseEnter} onMouseLeave={this.handleMouseEnter}
/> />
</label> </label>
<Tooltip <Truncate
content={displayString} size={
disabled={truncatedString === null} colorAccessor && !isColorBy
hoverOpenDelay={globals.tooltipHoverOpenDelayQuick} ? globals.leftSidebarWidth - 145 - 26 - 120
position={Position.LEFT} : globals.leftSidebarWidth - 145 - 26
usePortal }
modifiers={{ fontSize={12}
preventOverflow: { enabled: false }, data-testid={`categorical-value-${metadataField}-${displayString}`}
hide: { enabled: false }, data-testclass="categorical-value"
style={{
color:
displayString === globals.unassignedCategoryLabel
? "#ababab"
: "black",
fontStyle:
displayString === globals.unassignedCategoryLabel
? "italic"
: "normal",
display: "inline-block",
overflow: "hidden",
lineHeight: "1.1em",
height: "1.1em",
wordBreak: "break-all",
verticalAlign: "middle",
}} }}
> >
<span {displayString}
data-testid={`categorical-value-${metadataField}-${displayString}`} </Truncate>
data-testclass="categorical-value"
style={{
color:
displayString === globals.unassignedCategoryLabel
? "#ababab"
: "black",
fontStyle:
displayString === globals.unassignedCategoryLabel
? "italic"
: "normal",
display: "inline-block",
overflow: "hidden",
lineHeight: "1.1em",
height: "1.1em",
wordBreak: "break-all",
verticalAlign: "middle",
}}
>
{truncatedString || displayString}
</span>
</Tooltip>
{editModeActive ? ( {editModeActive ? (
<div> <div>
<AnnoDialog <AnnoDialog