Feature/restore default

src/components/ColorPicker/index.tsx

@@ -32,7 +32,7 @@ const ColorPicker = ({
 }: ColorPickerProps): JSX.Element => {
     const [currentColor, setCurrentColor] = useState(initialColor);
     const [debouncedColor] = useDebounce(currentColor, 250);
-    const isInitialRender = useRef(true);
+    const isUserInteraction = useRef(false);
     const [isColorPickerVisible, setColorPickerVisible] = useState(false);
     const [lastSelectedColor, setLastSelectedColor] = useState(initialColor);
 
@@ -51,21 +51,25 @@ const ColorPicker = ({
             color: newColor.toLowerCase(),
         };
         applyUserColor(colorChange);
+        updateRecentColors(newColor.toLowerCase());
     };
 
     useEffect(() => {
-        if (isInitialRender.current) {
-            isInitialRender.current = false;
-        } else {
+        if (isUserInteraction.current) {
             handleColorChange(debouncedColor);
-            updateRecentColors(debouncedColor);
+            isUserInteraction.current = false;
         }
     }, [debouncedColor]);
 
     useEffect(() => {
         setCurrentColor(initialColor);
     }, [initialColor]);
 
+    const onColorUpdate = (newColor: string) => {
+        isUserInteraction.current = true;
+        setCurrentColor(newColor);
+    };
+
     const updateRecentColors = (color: string) => {
         if (recentColors.includes(color)) {
             return;
@@ -79,15 +83,15 @@ const ColorPicker = ({
 
     const renderColorPickerComponent = () => (
         <div className={styles.colorPicker}>
-            <HexColorPicker color={currentColor} onChange={setCurrentColor} />
+            <HexColorPicker color={currentColor} onChange={onColorUpdate} />
             <div className={styles.selectionDisplay}>
                 <div className={styles.colorSelections}>
                     <div className={styles.selection}>
                         <div
                             className={styles.largeSwatch}
                             style={{ backgroundColor: lastSelectedColor }}
                             onClick={() => {
-                                setCurrentColor(lastSelectedColor);
+                                onColorUpdate(lastSelectedColor);
                             }}
                         ></div>
                         <label>
@@ -108,9 +112,7 @@ const ColorPicker = ({
                     <HexColorInput
                         className={styles.hexInput}
                         color={currentColor}
-                        onChange={(color) =>
-                            setCurrentColor(color.toLowerCase())
-                        }
+                        onChange={(color) => onColorUpdate(color.toLowerCase())}
                     />
                     <label>Hex</label>
                 </div>
@@ -132,7 +134,7 @@ const ColorPicker = ({
                             key={color}
                             className={styles.swatch}
                             style={{ background: color }}
-                            onClick={() => setCurrentColor(color)}
+                            onClick={() => onColorUpdate(color)}
                         />
                     </Tooltip>
                 ))}
@@ -144,7 +146,7 @@ const ColorPicker = ({
                         key={color}
                         className={styles.swatch}
                         style={{ background: color }}
-                        onClick={() => setCurrentColor(color)}
+                        onClick={() => onColorUpdate(color)}
                     />
                 ))}
             </div>

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 {
@@ -8,13 +9,6 @@ import {
 } from "../selection/selectors";
 import { ColorSetting } from "../selection/types";
 
-/**
- * compoundSelectors are selectors that consume state from multiple branches
- * of state, so don't belong in a particular branch's selectors file,
- * and are consumed by multiple containers, and so don't belong in a particular
- * container's selectors file.
- */
-
 export const getCurrentUIData = createSelector(
     [getCurrentColorSetting, getSelectedUIDisplayData, getDefaultUIDisplayData],
     (
@@ -27,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,
+];