Merge branch 'main' of https://github.com/simularium/simularium-website…

… into feature/fullscreen

src/containers/ViewerPanel/selectors.ts

@@ -6,20 +6,20 @@ import {
     getTimeStep,
     getFirstFrameTimeOfCachedSimulation,
     getSimulariumFile,
-    getDefaultUIDisplayData,
 } from "../../state/trajectory/selectors";
 import {
     getAgentsToHide,
     getCurrentTime,
     getHighlightedAgents,
+    getSelectedUIDisplayData,
 } from "../../state/selection/selectors";
 import { AgentRenderingCheckboxMap } from "../../state/selection/types";
 import { roundTimeForDisplay } from "../../util";
 import { DisplayTimes } from "./types";
 import { isNetworkSimFileInterface } from "../../state/trajectory/types";
 
 export const getSelectionStateInfoForViewer = createSelector(
-    [getHighlightedAgents, getAgentsToHide, getDefaultUIDisplayData],
+    [getHighlightedAgents, getAgentsToHide, getSelectedUIDisplayData],
     (highlightedAgents, hiddenAgents, appliedColors): SelectionStateInfo => ({
         highlightedAgents,
         hiddenAgents,

src/state/selection/actions.ts

@@ -1,3 +1,4 @@
+import { UIDisplayData } from "@aics/simularium-viewer";
 import { AgentMetadata, ColorChange } from "../../constants/interfaces";
 import {
     SELECT_METADATA,
@@ -10,6 +11,7 @@ import {
     SET_RECENT_COLORS,
     SET_SELECTED_AGENT,
     APPLY_USER_COLOR,
+    SET_SELECTED_DISPLAY_DATA,
 } from "./constants";
 import {
     ChangeAgentsRenderingStateAction,
@@ -21,6 +23,7 @@ import {
     ApplyUserColorAction,
     SetRecentColorsAction,
     SetSelectedAgentMetadataAction,
+    SetSelectedUIDisplayDataAction,
 } from "./types";
 
 export function changeTime(time: number): ChangeTimeAction {
@@ -103,3 +106,12 @@ export function setSelectedAgentMetadata(
         type: SET_SELECTED_AGENT,
     };
 }
+
+export function setSelectedUIDisplayData(
+    displayData: UIDisplayData
+): SetSelectedUIDisplayDataAction {
+    return {
+        payload: displayData,
+        type: SET_SELECTED_DISPLAY_DATA,
+    };
+}

src/state/selection/constants.ts

@@ -21,3 +21,6 @@ export const RESET_AGENT_SELECTIONS_AND_HIGHLIGHTS = makeSelectConstant(
 export const APPLY_USER_COLOR = makeSelectConstant("apply-user-color");
 export const SET_RECENT_COLORS = makeSelectConstant("set-recent-colors");
 export const SET_SELECTED_AGENT = makeSelectConstant("set-selected-agent");
+export const SET_SELECTED_DISPLAY_DATA = makeSelectConstant(
+    "set-selected-display-data"
+);

src/state/selection/logics.ts

@@ -2,14 +2,16 @@ import { createLogic } from "redux-logic";
 import { UIDisplayData } from "@aics/simularium-viewer";
 
 import { ReduxLogicDeps } from "../types";
-import { getDefaultUIDisplayData } from "../trajectory/selectors";
-import { setDefaultUIData } from "../trajectory/actions";
+import { getSimulariumFile } from "../trajectory/selectors";
+
 import { APPLY_USER_COLOR } from "./constants";
+import { getSelectedUIDisplayData } from "./selectors";
+import { setSelectedUIDisplayData } from "./actions";
 
 const storeColorsLogic = createLogic({
     process(deps: ReduxLogicDeps, dispatch, done) {
         const { action, getState } = deps;
-        const uiData: UIDisplayData = getDefaultUIDisplayData(getState());
+        const uiData: UIDisplayData = getSelectedUIDisplayData(getState());
         const colorChange = action.payload;
         const newUiData = uiData.map((agent) => {
             const newAgent = { ...agent };
@@ -32,7 +34,10 @@ const storeColorsLogic = createLogic({
             }
             return newAgent;
         });
-        dispatch(setDefaultUIData(newUiData));
+        dispatch(setSelectedUIDisplayData(newUiData));
+        // store color changes in local browser storage
+        const fileKey = getSimulariumFile(getState()).name;
+        localStorage.setItem(fileKey, JSON.stringify(newUiData));
         done();
     },
     type: APPLY_USER_COLOR,

src/state/selection/reducer.ts

@@ -13,6 +13,7 @@ import {
     RESET_AGENT_SELECTIONS_AND_HIGHLIGHTS,
     SET_RECENT_COLORS,
     SET_SELECTED_AGENT,
+    SET_SELECTED_DISPLAY_DATA,
 } from "./constants";
 import {
     ChangeAgentsRenderingStateAction,
@@ -24,6 +25,7 @@ import {
     ResetAction,
     SetRecentColorsAction,
     SetSelectedAgentMetadataAction,
+    SetSelectedUIDisplayDataAction,
 } from "./types";
 
 export const initialState = {
@@ -33,6 +35,7 @@ export const initialState = {
     agentHighlightMap: {},
     recentColors: [],
     selectedAgentMetadata: {},
+    selectedUIDisplayData: [],
 };
 
 const actionToConfigMap: TypeToDescriptionMap = {
@@ -154,6 +157,21 @@ const actionToConfigMap: TypeToDescriptionMap = {
             };
         },
     },
+    [SET_SELECTED_DISPLAY_DATA]: {
+        accepts: (
+            action: AnyAction
+        ): action is SetSelectedUIDisplayDataAction =>
+            action.type === SET_SELECTED_DISPLAY_DATA,
+        perform: (
+            state: SelectionStateBranch,
+            action: SetSelectedUIDisplayDataAction
+        ) => {
+            return {
+                ...state,
+                selectedUIDisplayData: action.payload,
+            };
+        },
+    },
 };
 
 export default makeReducer<SelectionStateBranch>(

src/state/selection/selectors/basic.ts

@@ -11,3 +11,5 @@ export const getNumberCollapsed = (state: State) =>
 export const getRecentColors = (state: State) => state.selection.recentColors;
 export const getSelectedAgentMetadata = (state: State) =>
     state.selection.selectedAgentMetadata;
+export const getSelectedUIDisplayData = (state: State) =>
+    state.selection.selectedUIDisplayData;

src/state/selection/types.ts

@@ -1,3 +1,4 @@
+import { UIDisplayData } from "@aics/simularium-viewer";
 import { AgentMetadata, ColorChange } from "../../constants/interfaces";
 import { TrajectoryStateBranch } from "../trajectory/types";
 
@@ -81,3 +82,8 @@ export interface SetSelectedAgentMetadataAction {
     payload: AgentMetadata;
     type: string;
 }
+
+export interface SetSelectedUIDisplayDataAction {
+    payload: UIDisplayData;
+    type: string;
+}

src/state/trajectory/logics.ts

@@ -28,6 +28,7 @@ import { ViewerStatus } from "../viewer/types";
 import {
     changeTime,
     resetAgentSelectionsAndHighlights,
+    setSelectedUIDisplayData,
 } from "../selection/actions";
 import { setSimulariumController } from "../simularium/actions";
 import { getSimulariumController } from "../simularium/selectors";
@@ -62,6 +63,7 @@ import {
     CONVERT_FILE,
     RECEIVE_CONVERTED_FILE,
     CANCEL_CONVERSION,
+    SET_DEFAULT_UI_DATA,
 } from "./constants";
 import {
     ReceiveAction,
@@ -638,6 +640,15 @@ const cancelConversionLogic = createLogic({
     type: CANCEL_CONVERSION,
 });
 
+const setInitialSelectedUIData = createLogic({
+    process(deps: ReduxLogicDeps, dispatch) {
+        const { action } = deps;
+        const uiData = action.payload;
+        dispatch(setSelectedUIDisplayData(uiData));
+    },
+    type: SET_DEFAULT_UI_DATA,
+});
+
 export default [
     requestPlotDataLogic,
     loadLocalFile,
@@ -650,4 +661,5 @@ export default [
     convertFileLogic,
     receiveConvertedFileLogic,
     cancelConversionLogic,
+    setInitialSelectedUIData,
 ];