add button for previewing and resetting selected display data

src/containers/ModelPanel/index.tsx

@@ -3,6 +3,7 @@ import { ActionCreator } from "redux";
 import { connect } from "react-redux";
 
 import { State } from "../../state/types";
+import { getDefaultUISettingsApplied } from "../../state/compoundSelectors";
 import { ViewerStatus } from "../../state/viewer/types";
 import { getStatus } from "../../state/viewer/selectors";
 import { RequestNetworkFileAction } from "../../state/trajectory/types";
@@ -17,13 +18,18 @@ import {
     SetVisibleAction,
     SetRecentColorsAction,
     HandleColorChangeAction,
+    ColorSetting,
+    SetCurrentColorSettingAction,
+    ResetAction,
 } from "../../state/selection/types";
 import {
     turnAgentsOnByDisplayKey,
     highlightAgentsByDisplayKey,
     setAgentsVisible,
     setRecentColors,
     handleColorChange,
+    setCurrentColorSetting,
+    clearUserSelectedColors,
 } from "../../state/selection/actions";
 import {
     getAgentVisibilityMap,
@@ -36,7 +42,8 @@ import NoTrajectoriesText from "../../components/NoTrajectoriesText";
 import NetworkFileFailedText from "../../components/NoTrajectoriesText/NetworkFileFailedText";
 import NoTypeMappingText from "../../components/NoTrajectoriesText/NoTypeMappingText";
 import SideBarContents from "../../components/SideBarContents";
-import { AgentMetadata } from "../../constants/interfaces";
+import NavButton from "../../components/NavButton";
+import { AgentMetadata, ButtonClass } from "../../constants/interfaces";
 import {
     getSelectAllVisibilityMap,
     getSelectNoneVisibilityMap,
@@ -63,6 +70,9 @@ interface ModelPanelProps {
     setRecentColors: ActionCreator<SetRecentColorsAction>;
     selectedAgentMetadata: AgentMetadata;
     handleColorChange: ActionCreator<HandleColorChangeAction>;
+    defaultUiSettingsApplied: boolean;
+    setCurrentColorSetting: ActionCreator<SetCurrentColorSettingAction>;
+    clearUserSelectedColors: ActionCreator<ResetAction>;
 }
 
 const ModelPanel: React.FC<ModelPanelProps> = ({
@@ -82,6 +92,9 @@ const ModelPanel: React.FC<ModelPanelProps> = ({
     setRecentColors,
     selectedAgentMetadata,
     handleColorChange,
+    defaultUiSettingsApplied,
+    setCurrentColorSetting,
+    clearUserSelectedColors,
 }): JSX.Element => {
     const checkboxTree = (
         <CheckBoxTree
@@ -112,11 +125,35 @@ const ModelPanel: React.FC<ModelPanelProps> = ({
         ),
     };
 
+    const handlePreviewDefaultColors = (colorSetting: ColorSetting) => {
+        if (!defaultUiSettingsApplied) {
+            setCurrentColorSetting({ currentColorSetting: colorSetting });
+        }
+    };
+
     return (
         <div className={styles.container}>
             <SideBarContents
                 mainTitle="Agents"
-                content={[contentMap[viewerStatus]]}
+                content={[
+                    <div key="molecules">
+                        {contentMap[viewerStatus]}
+                        <NavButton
+                            titleText={"Restore color defaults"}
+                            buttonType={ButtonClass.Action}
+                            isDisabled={defaultUiSettingsApplied}
+                            clickHandler={clearUserSelectedColors}
+                            onMouseEnter={() =>
+                                handlePreviewDefaultColors(ColorSetting.Default)
+                            }
+                            onMouseLeave={() =>
+                                handlePreviewDefaultColors(
+                                    ColorSetting.UserSelected
+                                )
+                            }
+                        />
+                    </div>,
+                ]}
                 selectedAgentMetadata={selectedAgentMetadata}
                 uiDisplayData={uiDisplayDataTree}
             />
@@ -136,6 +173,7 @@ function mapStateToProps(state: State) {
         isNetworkedFile: getIsNetworkedFile(state),
         recentColors: getRecentColors(state),
         selectedAgentMetadata: getSelectedAgentMetadata(state),
+        defaultUiSettingsApplied: getDefaultUISettingsApplied(state),
     };
 }
 
@@ -147,6 +185,8 @@ const dispatchToPropsMap = {
     setAgentsVisible,
     setRecentColors,
     handleColorChange,
+    setCurrentColorSetting,
+    clearUserSelectedColors,
 };
 
 export default connect(mapStateToProps, dispatchToPropsMap)(ModelPanel);

src/state/compoundSelectors/compoundSelectors.test.ts

@@ -1,4 +1,4 @@
-import { getCurrentUIData } from ".";
+import { getCurrentUIData, getDefaultUISettingsApplied } from ".";
 import { initialState } from "..";
 import { ColorSetting } from "../selection/types";
 
@@ -77,3 +77,76 @@ describe("getCurrentUIData", () => {
         ]);
     });
 });
+
+describe("getDefaultUISettingsApplied", () => {
+    it("returns false if selectedUIDisplayData contains selections and selectedUIDisplayData and defaultUIData are not equal", () => {
+        expect(
+            getDefaultUISettingsApplied({
+                ...initialState,
+                trajectory: {
+                    defaultUIData: [
+                        {
+                            name: "agent1",
+                            displayStates: [],
+                            color: "#bbbbbb",
+                        },
+                    ],
+                },
+                selection: {
+                    ...initialState.selection,
+                    selectedUIDisplayData: [
+                        {
+                            name: "agent1",
+                            displayStates: [],
+                            color: "#000",
+                        },
+                    ],
+                },
+            })
+        ).toBe(false);
+    });
+    it("returns true if selectedUIDisplayData contains no selections", () => {
+        expect(
+            getDefaultUISettingsApplied({
+                ...initialState,
+                trajectory: {
+                    defaultUIData: [
+                        {
+                            name: "agent1",
+                            displayStates: [],
+                            color: "#bbbbbb",
+                        },
+                    ],
+                },
+                selection: {
+                    selectedUIDisplayData: [],
+                },
+            })
+        ).toBe(true);
+    });
+    it("returns true if selectedUIDisplayData and defaultUIData are equal", () => {
+        expect(
+            getDefaultUISettingsApplied({
+                ...initialState,
+                trajectory: {
+                    defaultUIData: [
+                        {
+                            name: "agent1",
+                            displayStates: [],
+                            color: "#bbbbbb",
+                        },
+                    ],
+                },
+                selection: {
+                    selectedUIDisplayData: [
+                        {
+                            name: "agent1",
+                            displayStates: [],
+                            color: "#bbbbbb",
+                        },
+                    ],
+                },
+            })
+        ).toBe(true);
+    });
+});

src/state/compoundSelectors/index.ts

@@ -1,5 +1,6 @@
 import { createSelector } from "reselect";
 import { UIDisplayData } from "@aics/simularium-viewer";
+import { isEqual } from "lodash";
 
 import { getDefaultUIDisplayData } from "../trajectory/selectors";
 import {
@@ -20,3 +21,17 @@ export const getCurrentUIData = createSelector(
             : defaultData;
     }
 );
+
+export const getDefaultUISettingsApplied = createSelector(
+    [getSelectedUIDisplayData, getDefaultUIDisplayData],
+    (selectedUIDisplayData, defaultUIData) => {
+        /**
+         * we can't just check if currentColorSettings === ColorSettings.Default
+         * because that state can be used to preview settings
+         */
+        return (
+            selectedUIDisplayData.length === 0 ||
+            isEqual(selectedUIDisplayData, defaultUIData)
+        );
+    }
+);

src/state/selection/actions.ts

@@ -14,6 +14,7 @@ import {
     GET_DISPLAY_DATA_FROM_BROWSER,
     SET_CURRENT_COLOR_SETTINGS,
     HANDLE_COLOR_CHANGE,
+    CLEAR_UI_DATA_FROM_STATE,
 } from "./constants";
 import {
     ChangeAgentsRenderingStateAction,
@@ -136,3 +137,9 @@ export function setCurrentColorSetting(payload: {
         type: SET_CURRENT_COLOR_SETTINGS,
     };
 }
+
+export function clearUserSelectedColors(): ResetAction {
+    return {
+        type: CLEAR_UI_DATA_FROM_STATE,
+    };
+}

src/state/selection/constants.ts

@@ -32,3 +32,6 @@ export const GET_DISPLAY_DATA_FROM_BROWSER = makeSelectConstant(
 export const SET_CURRENT_COLOR_SETTINGS = makeSelectConstant(
     "set-current-color-settings"
 );
+export const CLEAR_UI_DATA_FROM_STATE = makeSelectConstant(
+    "clear-ui-data-from-state"
+);

src/state/selection/logics.ts

@@ -9,6 +9,7 @@ import { getCurrentUIData } from "../compoundSelectors";
 import {
     GET_DISPLAY_DATA_FROM_BROWSER,
     HANDLE_COLOR_CHANGE,
+    CLEAR_UI_DATA_FROM_STATE,
 } from "./constants";
 import { setCurrentColorSetting, setSelectedUIDisplayData } from "./actions";
 import { applyColorChangeToUiDisplayData, isSameAgentTree } from "../../util";
@@ -57,9 +58,6 @@ const getDisplayDataFromBrowserLogic = createLogic({
             );
             reject(action);
         }
-        setCurrentColorSetting({
-            currentColorSetting: ColorSetting.UserSelected,
-        });
         allow(setSelectedUIDisplayData(storedUIData));
     },
     process() {
@@ -70,4 +68,24 @@ const getDisplayDataFromBrowserLogic = createLogic({
     type: GET_DISPLAY_DATA_FROM_BROWSER,
 });
 
-export default [handleColorChangeLogic, getDisplayDataFromBrowserLogic];
+export const resetSelectedUIDisplayDataLogic = createLogic({
+    process(deps: ReduxLogicDeps, dispatch, done) {
+        const { getState } = deps;
+        const fileKey = getSimulariumFile(getState()).name;
+        localStorage.removeItem(fileKey);
+        dispatch(
+            setCurrentColorSetting({
+                currentColorSetting: ColorSetting.Default,
+            })
+        );
+        dispatch(setSelectedUIDisplayData([]));
+        done();
+    },
+    type: CLEAR_UI_DATA_FROM_STATE,
+});
+
+export default [
+    handleColorChangeLogic,
+    getDisplayDataFromBrowserLogic,
+    resetSelectedUIDisplayDataLogic,
+];