Feature/set agent color

examples/Viewer.tsx

@@ -31,6 +31,7 @@ import ConversionForm from "./ConversionForm";
 import MetaballSimulator from "./MetaballSimulator";
 import { TrajectoryType } from "../src/constants";
 import { NetConnectionParams } from "../src/simularium";
+import { SelectionEntry } from "../src/simularium/SelectionInterface";
 
 let playbackFile = "TEST_LIVEMODE_API"; //"medyan_paper_M:A_0.675.simularium";
 let queryStringFile = "";
@@ -85,6 +86,12 @@ interface ViewerState {
         name: string;
         data: ISimulariumFile | null;
     } | null;
+    selectedColor: string;
+    customColor: string;
+    assignedColor: string;
+    selectedAgent: string;
+    subAgentNames: string[];
+    selectedSubAgent: string;
 }
 
 interface BaseType {
@@ -139,9 +146,15 @@ const initialState: ViewerState = {
     selectionStateInfo: {
         highlightedAgents: [],
         hiddenAgents: [],
+        colorChangeAgents: [],
     },
     filePending: null,
     simulariumFile: null,
+    selectedColor: "",
+    selectedAgent: "",
+    customColor: "",
+    subAgentNames: [],
+    selectedSubAgent: "",
 };
 
 type FrontEndError = typeof FrontEndError;
@@ -590,6 +603,76 @@ class Viewer extends React.Component<InputParams, ViewerState> {
         URL.revokeObjectURL(downloadLink.href);
     }
 
+    public handleColorSelection = (event) => {
+        this.setState({ selectedColor: event.target.value });
+    };
+
+    public handleAgentSelection = (event) => {
+        const value = event.target.value;
+        this.setState({ selectedAgent: value });
+        const subAgents = this.getSubAgentsforAgent(value);
+        if (subAgents) {
+            this.setState({ subAgentNames: subAgents });
+        }
+    };
+
+    public handleSubAgentSelection = (event) => {
+        const value = event.target.value;
+        this.setState({ selectedSubAgent: value });
+    };
+
+    public getSubAgentsforAgent = (agentName: string) => {
+        const agent = this.state.uiDisplayData.find(
+            (element) => element.name === agentName
+        );
+        if (!agent) {
+            throw new Error("No agent found");
+            return;
+        }
+        return agent.displayStates.map((element) => element.id);
+    };
+
+    public assignColorToAgent = () => {
+        if (!this.state.selectedAgent) {
+            throw new Error("No agent selected");
+            return;
+        } else if (!this.state.selectedColor) {
+            throw new Error("No color selected");
+            return;
+        } else {
+            const subAgent: string[] = this.state.selectedSubAgent ? [this.state.selectedSubAgent] : [];
+            const entry: SelectionEntry[] = [{
+                name: this.state.selectedAgent,
+                tags: subAgent,
+            }];
+            this.setState({
+                ...this.state,
+                selectionStateInfo: {
+                    ...this.state.selectionStateInfo,
+                    colorChangeAgents: entry,
+                },
+                assignedColor: this.state.selectedColor,
+            });
+        }
+    };
+
+    public receiveNewColorInput = (event) => {
+        const value = event.target.value;
+        this.setState({ customColor: value });
+    };
+
+    public addColorToColorArray = (event) => {
+        const hexColorCodeRegex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
+        const color = this.state.customColor;
+        if (hexColorCodeRegex.test(color)) {
+            this.setState({
+                agentColors: [...this.state.agentColors, color] as string[],
+            });
+        } else {
+            alert("Please enter a valid hex color code");
+        }
+    };
+
     public render(): JSX.Element {
         if (this.state.filePending) {
             const fileType = this.state.filePending.type;
@@ -624,15 +707,33 @@ class Viewer extends React.Component<InputParams, ViewerState> {
                     <option value="microtubules30_1.h5">MT 30</option>
                     <option value="endocytosis.simularium">Endocytosis</option>
                     <option value="pc4covid19.simularium">COVIDLUNG</option>
-                    <option value="nanoparticle_wrapping.simularium">Nanoparticle wrapping</option>
-                    <option value="smoldyn_min1.simularium">Smoldyn min1</option>
-                    <option value="smoldyn_spine.simularium">Smoldyn spine</option>
-                    <option value="medyan_Chandrasekaran_2019_UNI_alphaA_0.1_MA_0.675.simularium">medyan 625</option>
-                    <option value="medyan_Chandrasekaran_2019_UNI_alphaA_0.1_MA_0.0225.simularium">medyan 0225</option>
-                    <option value="springsalad_condensate_formation_Below_Ksp.simularium">springsalad below ksp</option>
-                    <option value="springsalad_condensate_formation_At_Ksp.simularium">springsalad at ksp</option>
-                    <option value="springsalad_condensate_formation_Above_Ksp.simularium">springsalad above ksp</option>
-                    <option value="blood-plasma-1.0.simularium">blood plasma</option>
+                    <option value="nanoparticle_wrapping.simularium">
+                        Nanoparticle wrapping
+                    </option>
+                    <option value="smoldyn_min1.simularium">
+                        Smoldyn min1
+                    </option>
+                    <option value="smoldyn_spine.simularium">
+                        Smoldyn spine
+                    </option>
+                    <option value="medyan_Chandrasekaran_2019_UNI_alphaA_0.1_MA_0.675.simularium">
+                        medyan 625
+                    </option>
+                    <option value="medyan_Chandrasekaran_2019_UNI_alphaA_0.1_MA_0.0225.simularium">
+                        medyan 0225
+                    </option>
+                    <option value="springsalad_condensate_formation_Below_Ksp.simularium">
+                        springsalad below ksp
+                    </option>
+                    <option value="springsalad_condensate_formation_At_Ksp.simularium">
+                        springsalad at ksp
+                    </option>
+                    <option value="springsalad_condensate_formation_Above_Ksp.simularium">
+                        springsalad above ksp
+                    </option>
+                    <option value="blood-plasma-1.0.simularium">
+                        blood plasma
+                    </option>
                     <option value="TEST_SINGLE_PDB">TEST SINGLE PDB</option>
                     <option value="TEST_PDB">TEST PDB</option>
                     <option value="TEST_FIBERS">TEST FIBERS</option>
@@ -795,7 +896,9 @@ class Viewer extends React.Component<InputParams, ViewerState> {
                 <br />
                 <button
                     onClick={() =>
-                        simulariumController.getMetrics(this.netConnectionSettings)
+                        simulariumController.getMetrics(
+                            this.netConnectionSettings
+                        )
                     }
                 >
                     Get available metrics
@@ -828,6 +931,50 @@ class Viewer extends React.Component<InputParams, ViewerState> {
                     Tick interval length:{" "}
                     {simulariumController.tickIntervalLength}
                 </span>
+                <br></br>
+                <span>Color change agent selections:</span>
+                <select
+                    id="agentSelect"
+                    onChange={this.handleAgentSelection}
+                >
+                    <option value="Select Agent"> Select Agent</option>
+                    {this.state.particleTypeNames.map((name) => (
+                        <option value={name}>{name}</option>
+                    ))}
+                </select>
+                <select
+                    id="subAgentSelect"
+                    onChange={this.handleSubAgentSelection}
+                >
+                    <option value="Select Sub-Agent"> Select Sub-Agent</option>
+                    {this.state.subAgentNames.map((name) => (
+                        <option value={name}>{name}</option>
+                    ))}
+                </select>
+                <select
+                    id="colorSelect"
+                    onChange={this.handleColorSelection}
+                    defaultValue={this.state.selectedColor}
+                    style={{ backgroundColor: this.state.selectedColor }}
+                >
+                    <option value="Select Color"> Select Color</option>
+                    {this.state.agentColors.map((name) => (
+                        <option value={name}>{name}</option>
+                    ))}
+                </select>
+                <button onClick={this.assignColorToAgent}>
+                    {" "}
+                    Apply Color to Agent
+                </button>
+                <input
+                    id="colorAddition"
+                    type="text"
+                    placeholder="add Hex Color"
+                    onChange={this.receiveNewColorInput}
+                ></input>
+                <button onClick={this.addColorToColorArray}>
+                    Add color to color array
+                </button>
                 <div className="viewer-container">
                     <SimulariumViewer
                         ref={this.viewerRef}
@@ -851,6 +998,7 @@ class Viewer extends React.Component<InputParams, ViewerState> {
                         showPaths={this.state.showPaths}
                         onError={this.onError}
                         backgroundColor={[0, 0, 0]}
+                        assignedColor={this.state.assignedColor}
                     />
                 </div>
             </div>

src/simularium/SelectionInterface.ts

@@ -18,6 +18,7 @@ export interface SelectionEntry {
 export interface SelectionStateInfo {
     highlightedAgents: SelectionEntry[];
     hiddenAgents: SelectionEntry[];
+    colorChangeAgents: SelectionEntry[];
 }
 
 interface DisplayStateEntry {
@@ -218,6 +219,18 @@ class SelectionInterface {
         return indices;
     }
 
+    public getColorChangeAgentIds(info: SelectionEntry[]): number[] {
+        const requests = info;
+        let indices: number[] = [];
+
+        requests.forEach((r) => {
+            const name = r.name;
+            const tags = r.tags;
+            indices = [...indices, ...this.getIds(name, tags)];
+        });
+        return indices;
+    }
+
     public clear(): void {
         this.entries = new Map<string, DecodedTypeEntry>();
     }

src/test/SelectionInterface.test.ts

@@ -231,6 +231,7 @@ describe("SelectionInterface module", () => {
                     { name: "D", tags: [] },
                 ],
                 hiddenAgents: [],
+                colorChangeAgents: [],
             };
             const ids = si.getHighlightedIds(selectionStateHighlight);
             const allAs = [0, 1, 2, 3];
@@ -250,6 +251,7 @@ describe("SelectionInterface module", () => {
                     { name: "D", tags: [""] },
                 ],
                 hiddenAgents: [],
+                colorChangeAgents: [],
             };
             const ids = si.getHighlightedIds(selectionStateHighlight);
 
@@ -266,6 +268,7 @@ describe("SelectionInterface module", () => {
                     { name: "E", tags: ["t1000"] },
                 ],
                 hiddenAgents: [],
+                colorChangeAgents: [],
             };
             const ids = si.getHighlightedIds(selectionStateHighlight);
 
@@ -278,6 +281,7 @@ describe("SelectionInterface module", () => {
             const selectionStateHighlight = {
                 highlightedAgents: [{ name: "E", tags: [""] }],
                 hiddenAgents: [],
+                colorChangeAgents: [],
             };
             const ids = si.getHighlightedIds(selectionStateHighlight);
 
@@ -295,6 +299,7 @@ describe("SelectionInterface module", () => {
                     { name: "A", tags: [] },
                     { name: "C", tags: [] },
                 ],
+                colorChangeAgents: [],
             };
             const ids = si.getHiddenIds(selectionStateHide);
 
@@ -310,6 +315,7 @@ describe("SelectionInterface module", () => {
                     { name: "A", tags: ["t1", "t2"] },
                     { name: "B", tags: ["t1"] },
                 ],
+                colorChangeAgents: [],
             };
             const ids = si.getHiddenIds(selectionStateHide);
             expect(ids).toEqual([1, 2, 3, 5, 7]);
@@ -325,13 +331,70 @@ describe("SelectionInterface module", () => {
                     { name: "A", tags: [""] },
                     { name: "C", tags: ["", "t1", "t2"] },
                 ],
+                colorChangeAgents: [],
             };
             const ids = si.getHiddenIds(selectionStateHide);
 
             expect(ids).toEqual([0, 8, 9, 10, 11]);
         });
     });
 
+    describe("getColorChangeIds", () => {
+        test("Color change: select multiple by name", () => {
+            const si = new SelectionInterface();
+            si.parse(idMapping);
+            const selectionStateColor = {
+                highlightedAgents: [],
+                hiddenAgents: [],
+                colorChangeAgents: [
+                    { name: "A", tags: [] },
+                    { name: "C", tags: [] },
+                ],
+            };
+            const ids = si.getColorChangeAgentIds(
+                selectionStateColor.colorChangeAgents
+            );
+
+            expect(ids).toEqual([0, 1, 2, 3, 8, 9, 10, 11]);
+        });
+
+        test("Color change: change color by name & tags", () => {
+            const si = new SelectionInterface();
+            si.parse(idMapping);
+            const selectionStateColor = {
+                highlightedAgents: [],
+                hiddenAgents: [],
+                colorChangeAgents: [
+                    { name: "A", tags: ["t1", "t2"] },
+                    { name: "B", tags: ["t1"] },
+                ],
+            };
+            const ids = si.getColorChangeAgentIds(
+                selectionStateColor.colorChangeAgents
+            );
+            expect(ids).toEqual([1, 2, 3, 5, 7]);
+        });
+
+        test("Color change: change color by name & null tag", () => {
+            const si = new SelectionInterface();
+            si.parse(idMapping);
+
+            const selectionStateColor = {
+                highlightedAgents: [],
+                hiddenAgents: [],
+                colorChangeAgents: [
+                    { name: "A", tags: [""] },
+                    { name: "C", tags: ["", "t1", "t2"] },
+                ],
+            };
+            const ids = si.getColorChangeAgentIds(
+                selectionStateColor.colorChangeAgents
+            );
+
+            expect(ids).toEqual([0, 8, 9, 10, 11]);
+        });
+    });
+
     describe("getUIDisplayData", () => {
         test("Doesn't crash", () => {
             const si = new SelectionInterface();
@@ -406,6 +469,8 @@ describe("SelectionInterface module", () => {
         });
     });
 
+    describe("changeAgentColors", () => {});
+
     describe("setAgentColors", () => {
         const defaultColor = "#0";
         const defaultColorListLength = 6;