diff --git a/src/simularium/SelectionInterface.ts b/src/simularium/SelectionInterface.ts
index 3222bcd5..ed5dc7c0 100644
--- a/src/simularium/SelectionInterface.ts
+++ b/src/simularium/SelectionInterface.ts
@@ -314,7 +314,7 @@ class SelectionInterface {
     public setInitialAgentColors(
         uiDisplayData: UIDisplayData,
         colors: (string | number)[],
-        setColorForIds: (setting: ColorSetting) => void
+        setColorForIds: (agentIds: number[], color: string | number) => void
     ): (string | number)[] {
         let defaultColorIndex = 0;
         uiDisplayData.forEach((group) => {
@@ -330,10 +330,7 @@ class SelectionInterface {
             if (!hasNewColors) {
                 // if no colors have been set by the user for this name,
                 // just give all states of this agent name the same color
-                setColorForIds({
-                    agentIds: ids,
-                    color: colors[defaultColorIndex],
-                });
+                setColorForIds(ids, colors[defaultColorIndex]);
                 this.updateUiDataColor(
                     ids,
                     colors[defaultColorIndex],
@@ -359,8 +356,7 @@ class SelectionInterface {
                         // need update the display data with the default color being used
                         this.updateUiDataColor(
                             [ids[index]],
-                            colors[groupColorIndex],
-                            group.name
+                            colors[groupColorIndex]
                         );
                     }
                     // if the user used all the same colors for all states of this agent,
@@ -371,10 +367,7 @@ class SelectionInterface {
                     } else {
                         groupColorIndex = -1;
                     }
-                    setColorForIds({
-                        agentIds: [ids[index]],
-                        color: colors[agentColorIndex],
-                    });
+                    setColorForIds([ids[index]], colors[agentColorIndex]);
                 });
             }
             if (groupColorIndex > -1) {
@@ -410,7 +403,6 @@ class SelectionInterface {
                 color: agent.color,
                 name: agent.name,
             });
-            // }
 
             agent.displayStates.forEach((newState) => {
                 settings.push({
@@ -418,7 +410,6 @@ class SelectionInterface {
                         { name: agent.name, tags: [newState.name] },
                     ]),
                     color: newState.color,
-                    name: newState.name,
                 });
             });
         });
diff --git a/src/viewport/index.tsx b/src/viewport/index.tsx
index 8871e9b4..ca417cdc 100644
--- a/src/viewport/index.tsx
+++ b/src/viewport/index.tsx
@@ -35,9 +35,7 @@ type ViewportProps = {
     onTrajectoryFileInfoChanged: (
         cachedData: TrajectoryFileInfo
     ) => void | undefined;
-    onUIDisplayDataChanged: (
-        data: UIDisplayData
-    ) => void | undefined;
+    onUIDisplayDataChanged: (data: UIDisplayData) => void | undefined;
     loadInitialData: boolean;
     hideAllAgents: boolean;
     showPaths: boolean;
@@ -235,9 +233,7 @@ class Viewport extends React.Component<
         if (!isEqual(updatedColors, agentColors)) {
             this.visGeometry.createMaterials(updatedColors);
         }
-        onUIDisplayDataChanged(
-            this.selectionInterface.getUIDisplayData()
-        );
+        onUIDisplayDataChanged(this.selectionInterface.getUIDisplayData());
     }
 
     public componentDidMount(): void {
@@ -352,7 +348,7 @@ class Viewport extends React.Component<
                 ) &&
                 selectionStateInfo.colorSettings.length > 0
             ) {
-                this.handleColorSettings(selectionStateInfo.colorSettings);
+                this.changeAgentsColor(selectionStateInfo.colorSettings);
             }
         }
 
@@ -601,12 +597,19 @@ class Viewport extends React.Component<
         }
     }
 
-    public changeAgentsColor(colorSettings: ColorSetting[]): void {
-        if (colorSettings.length === 0) {
+    public changeAgentsColor(newData: UIDisplayData): void {
+        console.log("changeAgentsColor, newData", newData);
+        if (newData.length === 0) {
             return;
         }
+        const colorSettings =
+            this.selectionInterface.deriveColorSettingsFromUIData(newData);
+console.log("colorSettings in changeAgentsColor", colorSettings);
         colorSettings.forEach((setting) => {
-            this.visGeometry.applyColorToAgents(setting);
+            this.visGeometry.applyColorToAgents(
+                setting.agentIds,
+                setting.color
+            );
             this.selectionInterface.updateUiDataColor(
                 setting.agentIds,
                 setting.color,
@@ -615,14 +618,6 @@ class Viewport extends React.Component<
         });
     }
 
-    private handleColorSettings(newData: UIDisplayData): void {
-        // color sessions to do: 
-        // only process necessary changes
-        const colorSettings =
-            this.selectionInterface.deriveColorSettingsFromUIData(newData);
-        this.changeAgentsColor(colorSettings);
-    }
-
     public stopAnimate(): void {
         if (this.animationRequestID !== 0) {
             cancelAnimationFrame(this.animationRequestID);
diff --git a/src/visGeometry/index.ts b/src/visGeometry/index.ts
index fc957e52..25cc66e6 100644
--- a/src/visGeometry/index.ts
+++ b/src/visGeometry/index.ts
@@ -1117,8 +1117,10 @@ class VisGeometry {
         this.setAgentColors();
     }
 
-    public applyColorToAgents(setting: ColorSetting): void {
-        const { agentIds, color } = setting;
+    public applyColorToAgents(
+        agentIds: number[],
+        color: string | number
+    ): void {
         const newColorData = this.colorHandler.setColorForAgentTypes(
             agentIds,
             color