Skip to content

Commit

Permalink
Merge branch 'main' of https://github.com/simularium/simularium-website…
Browse files Browse the repository at this point in the history 
… into fix/popstate
  • Loading branch information
@interim17
interim17 committed Dec 21, 2024
2 parents bc17198 + cd1df4d commit 76bf2a4
Show file tree
Hide file tree
Showing 10 changed files with 193 additions and 30 deletions.
20 changes: 11 additions & 9 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@
"webpack-dev-server": "^4.10.1"
},
"dependencies": {
"@aics/simularium-viewer": "^3.8.4",
"@aics/simularium-viewer": "^3.9.0",
"@ant-design/css-animation": "^1.7.3",
"@ant-design/icons": "^4.0.6",
"antd": "^4.23.6",
Expand Down
26 changes: 14 additions & 12 deletions src/components/ColorPicker/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand All @@ -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;
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -132,7 +134,7 @@ const ColorPicker = ({
key={color}
className={styles.swatch}
style={{ background: color }}
onClick={() => setCurrentColor(color)}
onClick={() => onColorUpdate(color)}
/>
</Tooltip>
))}
Expand All @@ -144,7 +146,7 @@ const ColorPicker = ({
key={color}
className={styles.swatch}
style={{ background: color }}
onClick={() => setCurrentColor(color)}
onClick={() => onColorUpdate(color)}
/>
))}
</div>
Expand Down
44 changes: 42 additions & 2 deletions src/containers/ModelPanel/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { ActionCreator } from "redux";
import { connect } from "react-redux";

import { State } from "../../state/types";
import { areDefaultUISettingsApplied } from "../../state/compoundSelectors";
import { ViewerStatus } from "../../state/viewer/types";
import { getStatus } from "../../state/viewer/selectors";
import { RequestNetworkFileAction } from "../../state/trajectory/types";
Expand All @@ -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,
Expand All @@ -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,
Expand All @@ -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> = ({
Expand All @@ -82,6 +92,9 @@ const ModelPanel: React.FC<ModelPanelProps> = ({
setRecentColors,
selectedAgentMetadata,
handleColorChange,
defaultUiSettingsApplied,
setCurrentColorSetting,
clearUserSelectedColors,
}): JSX.Element => {
const checkboxTree = (
<CheckBoxTree
Expand Down Expand Up @@ -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="content">
{contentMap[viewerStatus]}
<NavButton
titleText={"Restore color defaults"}
buttonType={ButtonClass.Action}
isDisabled={defaultUiSettingsApplied}
onClick={clearUserSelectedColors}
onMouseEnter={() =>
handlePreviewDefaultColors(ColorSetting.Default)
}
onMouseLeave={() =>
handlePreviewDefaultColors(
ColorSetting.UserSelected
)
}
/>
</div>,
]}
selectedAgentMetadata={selectedAgentMetadata}
uiDisplayData={uiDisplayDataTree}
/>
Expand All @@ -136,6 +173,7 @@ function mapStateToProps(state: State) {
isNetworkedFile: getIsNetworkedFile(state),
recentColors: getRecentColors(state),
selectedAgentMetadata: getSelectedAgentMetadata(state),
defaultUiSettingsApplied: areDefaultUISettingsApplied(state),
};
}

Expand All @@ -147,6 +185,8 @@ const dispatchToPropsMap = {
setAgentsVisible,
setRecentColors,
handleColorChange,
setCurrentColorSetting,
clearUserSelectedColors,
};

export default connect(mapStateToProps, dispatchToPropsMap)(ModelPanel);
5 changes: 4 additions & 1 deletion src/containers/Simularium/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -188,8 +188,11 @@ class App extends React.Component<AppProps, AppState> {
public handleDragOverViewer(event: DragEvent) {
const { dragOverViewer, fileIsDraggedOverViewer } = this.props;
event.preventDefault();

const hasFiles = event.dataTransfer?.types.includes("Files");

clearTimeout(this.endDragover);
if (!fileIsDraggedOverViewer) {
if (!fileIsDraggedOverViewer && hasFiles) {
dragOverViewer();
}
}
Expand Down
75 changes: 74 additions & 1 deletion src/state/compoundSelectors/compoundSelectors.test.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { getCurrentUIData } from ".";
import { getCurrentUIData, areDefaultUISettingsApplied } from ".";
import { initialState } from "..";
import { ColorSetting } from "../selection/types";

Expand Down Expand Up @@ -77,3 +77,76 @@ describe("getCurrentUIData", () => {
]);
});
});

describe("areDefaultUISettingsApplied", () => {
it("returns false if selectedUIDisplayData contains selections and selectedUIDisplayData and defaultUIData are not equal", () => {
expect(
areDefaultUISettingsApplied({
...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(
areDefaultUISettingsApplied({
...initialState,
trajectory: {
defaultUIData: [
{
name: "agent1",
displayStates: [],
color: "#bbbbbb",
},
],
},
selection: {
selectedUIDisplayData: [],
},
})
).toBe(true);
});
it("returns true if selectedUIDisplayData and defaultUIData are equal", () => {
expect(
areDefaultUISettingsApplied({
...initialState,
trajectory: {
defaultUIData: [
{
name: "agent1",
displayStates: [],
color: "#bbbbbb",
},
],
},
selection: {
selectedUIDisplayData: [
{
name: "agent1",
displayStates: [],
color: "#bbbbbb",
},
],
},
})
).toBe(true);
});
});
15 changes: 15 additions & 0 deletions src/state/compoundSelectors/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { createSelector } from "reselect";
import { UIDisplayData } from "@aics/simularium-viewer";
import { isEqual } from "lodash";

import { getDefaultUIDisplayData } from "../trajectory/selectors";
import {
Expand Down Expand Up @@ -27,3 +28,17 @@ export const getCurrentUIData = createSelector(
: defaultData;
}
);

export const areDefaultUISettingsApplied = 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)
);
}
);
7 changes: 7 additions & 0 deletions src/state/selection/actions.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -136,3 +137,9 @@ export function setCurrentColorSetting(payload: {
type: SET_CURRENT_COLOR_SETTINGS,
};
}

export function clearUserSelectedColors(): ResetAction {
return {
type: CLEAR_UI_DATA_FROM_STATE,
};
}
Loading

0 comments on commit 76bf2a4

Please sign in to comment.