diff --git a/client/src/components/categorical/value/index.js b/client/src/components/categorical/value/index.js
index 40c44645..5ee7f37c 100644
--- a/client/src/components/categorical/value/index.js
+++ b/client/src/components/categorical/value/index.js
@@ -17,6 +17,7 @@ import AnnoDialog from "../annoDialog";
 import LabelInput from "../labelInput";
 
 import { AnnotationsHelpers } from "../../../util/stateManager";
+import maybeTruncateString from "../../../util/maybeTruncateString";
 import { labelPrompt, isLabelErroneous } from "../labelUtil";
 
 /* this is defined outside of the class so we can use it in connect() */
@@ -291,6 +292,7 @@ class CategoryValue extends React.Component {
       // our lint doesn't like jsx spread, we are version pinned to prevent api change on their part
       flippedProps,
       isDilated,
+      world,
     } = this.props;
     const ontologyEnabled = ontology?.enabled ?? false;
 
@@ -312,29 +314,12 @@ class CategoryValue extends React.Component {
       categories = schema.annotations.obsByName[colorAccessor]?.categories;
     }
 
-    let truncatedString = null;
-
-    if (
-      colorAccessor &&
-      !isColorBy &&
-      displayString.length > globals.categoryLabelDisplayStringShortLength
-    ) {
-      truncatedString = `${displayString.slice(
-        0,
-        globals.categoryLabelDisplayStringShortLength / 2
-      )}…${displayString.slice(
-        -globals.categoryLabelDisplayStringShortLength / 2
-      )}`;
-    } else if (
-      displayString.length > globals.categoryLabelDisplayStringLongLength
-    ) {
-      truncatedString = `${displayString.slice(
-        0,
-        globals.categoryLabelDisplayStringLongLength / 2
-      )}…${displayString.slice(
-        -globals.categoryLabelDisplayStringLongLength / 2
-      )}`;
-    }
+    const truncatedString = maybeTruncateString(
+      displayString,
+      colorAccessor && !isColorBy
+        ? globals.categoryLabelDisplayStringShortLength
+        : globals.categoryLabelDisplayStringLongLength
+    );
 
     const editModeActive =
       isUserAnno &&
@@ -464,8 +449,12 @@ class CategoryValue extends React.Component {
           <span style={{ flexShrink: 0 }}>
             {colorAccessor && !isColorBy && !annotations.isEditingLabelName ? (
               <Occupancy
-                category={category}
-                {...this.props} // eslint-disable-line react/jsx-props-no-spreading
+                categoryValue={value}
+                colorAccessor={colorAccessor}
+                metadataField={metadataField}
+                world={world}
+                colorScale={colorScale}
+                colorByIsCategorical={!!categoricalSelection[colorAccessor]}
               />
             ) : null}
           </span>
diff --git a/client/src/components/categorical/value/occupancy.js b/client/src/components/categorical/value/occupancy.js
index 7960164c..42e4d3bf 100644
--- a/client/src/components/categorical/value/occupancy.js
+++ b/client/src/components/categorical/value/occupancy.js
@@ -6,7 +6,7 @@ import {
   Popover,
   PopoverInteractionKind,
   Position,
-  Classes
+  Classes,
 } from "@blueprintjs/core";
 
 @connect()
@@ -21,13 +21,7 @@ class Occupancy extends React.PureComponent {
       createHistogram fetches the continous data in relation to the cells releveant to the catagory value.
       It then seperates that data into 50 bins for drawing the mini-histogram
     */
-    const {
-      world,
-      metadataField,
-      colorAccessor,
-      category,
-      categoryIndex
-    } = this.props;
+    const { world, metadataField, colorAccessor, categoryValue } = this.props;
 
     if (!this.canvas) return;
 
@@ -45,7 +39,7 @@ class Occupancy extends React.PureComponent {
       groupBy
     ); /* Because the signature changes we really need different names for histogram to differentiate signatures  */
 
-    const categoryValue = category.categoryValues[categoryIndex];
+    // const categoryValue = category.categoryValues[categoryIndex];
     const bins = histogramMap.has(categoryValue)
       ? histogramMap.get(categoryValue)
       : new Array(50).fill(0);
@@ -88,11 +82,10 @@ class Occupancy extends React.PureComponent {
       world,
       metadataField,
       colorAccessor,
-      category,
-      categoryIndex,
-      schema,
-      colorScale
+      categoryValue,
+      colorScale,
     } = this.props;
+    const { schema } = world;
 
     const ctx = this.canvas?.getContext("2d");
 
@@ -103,7 +96,7 @@ class Occupancy extends React.PureComponent {
       .col(colorAccessor)
       .histogramCategorical(groupBy);
 
-    const occupancy = occupancyMap.get(category.categoryValues[categoryIndex]);
+    const occupancy = occupancyMap.get(categoryValue);
 
     if (occupancy && occupancy.size > 0) {
       // not all categories have occupancy, so occupancy may be undefined.
@@ -137,19 +130,11 @@ class Occupancy extends React.PureComponent {
   };
 
   render() {
-    const {
-      colorAccessor,
-      categoricalSelection,
-      category,
-      categoryIndex
-    } = this.props;
-
+    const { colorAccessor, categoryValue, colorByIsCategorical } = this.props;
     const { canvas } = this;
     if (canvas)
       canvas.getContext("2d").clearRect(0, 0, this._WIDTH, this._HEIGHT);
 
-    const colorByIsCatagoricalData = !!categoricalSelection[colorAccessor];
-
     return (
       <Popover
         interactionKind={PopoverInteractionKind.HOVER_TARGET_ONLY}
@@ -158,11 +143,11 @@ class Occupancy extends React.PureComponent {
         position={Position.LEFT}
         modifiers={{
           preventOverflow: { enabled: false },
-          hide: { enabled: false }
+          hide: { enabled: false },
         }}
         lazy
         usePortal
-        disabled={colorByIsCatagoricalData}
+        disabled={colorByIsCategorical}
         popoverClassName={Classes.POPOVER_CONTENT_SIZING}
       >
         <canvas
@@ -171,15 +156,15 @@ class Occupancy extends React.PureComponent {
             marginRight: 5,
             width: this._WIDTH,
             height: this._HEIGHT,
-            borderBottom: colorByIsCatagoricalData
+            borderBottom: colorByIsCategorical
               ? ""
-              : "solid rgb(230, 230, 230) 0.25px"
+              : "solid rgb(230, 230, 230) 0.25px",
           }}
           width={this._WIDTH}
           height={this._HEIGHT}
-          ref={ref => {
+          ref={(ref) => {
             this.canvas = ref;
-            if (colorByIsCatagoricalData) this.createOccupancyStack();
+            if (colorByIsCategorical) this.createOccupancyStack();
             else this.createHistogram();
           }}
         />
@@ -187,7 +172,7 @@ class Occupancy extends React.PureComponent {
           <p style={{ margin: "0" }}>
             This histograms shows the distribution of{" "}
             <strong>{colorAccessor}</strong> within{" "}
-            <strong>{category.categoryValues[categoryIndex]}</strong>.
+            <strong>{categoryValue}</strong>.
             <br />
             <br />
             The x axis is the same for each histogram, while the y axis is