diff --git a/client/__tests__/e2e/__snapshots__/e2e.test.js.snap b/client/__tests__/e2e/__snapshots__/e2e.test.js.snap
index 9f866bf8..6c411b0f 100644
--- a/client/__tests__/e2e/__snapshots__/e2e.test.js.snap
+++ b/client/__tests__/e2e/__snapshots__/e2e.test.js.snap
@@ -1,5 +1,5 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`did launch page launched 1`] = `"pbmc3kc3k"`;
+exports[`did launch page launched 1`] = `"pbmc3kc3k"`;
-exports[`metadata loads categories and values from dataset appear 1`] = `""`;
+exports[`metadata loads categories and values from dataset appear 1`] = `""`;
diff --git a/client/src/components/categorical/value/index.js b/client/src/components/categorical/value/index.js
index ae23a737..39644210 100644
--- a/client/src/components/categorical/value/index.js
+++ b/client/src/components/categorical/value/index.js
@@ -456,11 +456,11 @@ class CategoryValue extends React.Component {
const valueToggleLabel = `value-toggle-checkbox-${displayString}`;
const VALUE_HEIGHT = 11;
- const LEFT_MARGIN = 33;
+ const LEFT_MARGIN = 60;
const CHECKBOX = 26;
- const CELL_NUMBER = 61;
+ const CELL_NUMBER = 50;
const ANNO_MENU = 26;
- const LABEL_MARGIN = 24;
+ const LABEL_MARGIN = 16;
const otherElementsWidth =
LEFT_MARGIN +
@@ -470,10 +470,14 @@ class CategoryValue extends React.Component {
(isUserAnno ? ANNO_MENU : 0);
const CHART_WIDTH = 100;
+ const CHART_MARGIN = 24;
const labelWidth =
colorAccessor && !isColorBy
- ? globals.leftSidebarWidth - otherElementsWidth - CHART_WIDTH
+ ? globals.leftSidebarWidth -
+ otherElementsWidth -
+ CHART_WIDTH -
+ CHART_MARGIN
: globals.leftSidebarWidth - otherElementsWidth;
return (
diff --git a/client/src/components/util/truncate.js b/client/src/components/util/truncate.js
index 618c7831..81ab3158 100644
--- a/client/src/components/util/truncate.js
+++ b/client/src/components/util/truncate.js
@@ -16,17 +16,19 @@ const FIRST_HALF_STYLE = {
flexShrink: 1,
minWidth: "5px",
};
+const SECOND_HALF_STYLE = {
+ position: "relative",
+ overflow: "hidden",
+ whiteSpace: "nowrap",
+};
+const SECOND_HALF_SPACING_STYLE = {
+ color: "transparent",
+};
const SECOND_HALF_INNER_STYLE = {
position: "absolute",
right: 0,
};
-const SECOND_HALF_STYLE = {
- color: "transparent",
- position: "relative",
- overflow: "hidden",
- whiteSpace: "nowrap",
-};
export default (props) => {
const { children } = props;
@@ -46,17 +48,17 @@ export default (props) => {
const inheritedColor = children.props.style.color;
const splitStyle = { ...children.props.style, ...SPLIT_STYLE };
- const secondHalfInnerStyle = {
+ const secondHalfContentStyle = {
...SECOND_HALF_INNER_STYLE,
- color: inheritedColor || "initial",
+ color: inheritedColor || "inherit",
};
const truncatedJSX = (
{firstString}
- {secondString}
- {secondString}
+ {secondString}
+ {secondString}
);