From fab18400bbefc0d77ec38c9654abd061da539b7f Mon Sep 17 00:00:00 2001
From: Joe Heffernan <interim17@gmail.com>
Date: Thu, 10 Aug 2023 12:23:15 -0700
Subject: [PATCH 01/27] implement orthographic camera

---
 src/assets/orthographic.svg             |   3 +
 src/assets/perspective.svg              |  17 +++
 src/components/CameraControls/index.tsx | 154 +++++++++++++++++-------
 src/containers/ViewerPanel/index.tsx    |   1 +
 4 files changed, 129 insertions(+), 46 deletions(-)
 create mode 100644 src/assets/orthographic.svg
 create mode 100644 src/assets/perspective.svg

diff --git a/src/assets/orthographic.svg b/src/assets/orthographic.svg
new file mode 100644
index 000000000..558fca8e7
--- /dev/null
+++ b/src/assets/orthographic.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.47727 3.27276L8.63636 15.4091M8.47727 3.27276L16.5 1.40912M8.47727 3.27276L1.5 1.34094M8.63636 15.4091L14.6591 9.97731L16.5 1.40912M8.63636 15.4091L3.22727 9.70458L1.5 1.34094M16.5 1.40912L8.97727 0.590942L1.5 1.34094" stroke="#D8D8D8"/>
+</svg>
diff --git a/src/assets/perspective.svg b/src/assets/perspective.svg
new file mode 100644
index 000000000..b22953160
--- /dev/null
+++ b/src/assets/perspective.svg
@@ -0,0 +1,17 @@
+<svg width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_87_536)">
+<path d="M1.05084 4.52966L8.21186 1.5L14.9491 4.72034M1.05084 4.52966L7.78813 7.72881M1.05084 4.52966V13.3432L7.78813 16.5M7.78813 7.72881L14.9491 4.72034M7.78813 7.72881V16.5M14.9491 4.72034V13.5339L7.78813 16.5" stroke="#D8D8D8" shape-rendering="crispEdges"/>
+</g>
+<defs>
+<filter id="filter0_d_87_536" x="0.550842" y="0.951782" width="15.6483" height="16.8446" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="0.5" dy="0.5"/>
+<feGaussianBlur stdDeviation="0.125"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_87_536"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_87_536" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/src/components/CameraControls/index.tsx b/src/components/CameraControls/index.tsx
index aed5086f5..5b16d5d39 100644
--- a/src/components/CameraControls/index.tsx
+++ b/src/components/CameraControls/index.tsx
@@ -10,12 +10,21 @@ import styles from "./style.css";
 
 const PAN = "pan";
 const ROTATE = "rotate";
+const ORTHOGRAPHIC = "o";
+const PERSPECTIVE = "p";
 const CAMERA_MODE_MODIFIER_KEYS = ["Meta", "Shift"];
 const ZOOM_IN_HK = "ArrowUp";
 const ZOOM_OUT_HK = "ArrowDown";
 const RESET_HK = "h";
 const FOCUS_HK = "f";
-const HOT_KEYS = [ZOOM_IN_HK, ZOOM_OUT_HK, RESET_HK, FOCUS_HK];
+const HOT_KEYS = [
+    ZOOM_IN_HK,
+    ZOOM_OUT_HK,
+    RESET_HK,
+    FOCUS_HK,
+    ORTHOGRAPHIC,
+    PERSPECTIVE,
+];
 
 interface CameraControlsProps {
     resetCamera: () => void;
@@ -23,6 +32,7 @@ interface CameraControlsProps {
     zoomOut: () => void;
     setPanningMode: (value: boolean) => void;
     setFocusMode: (value: boolean) => void;
+    setCameraType: (value: boolean) => void;
 }
 
 const CameraControls = ({
@@ -31,9 +41,11 @@ const CameraControls = ({
     zoomOut,
     setPanningMode,
     setFocusMode,
+    setCameraType,
 }: CameraControlsProps): JSX.Element => {
     const [isFocused, saveFocusMode] = useState(true);
     const [mode, setMode] = useState(ROTATE);
+    const [camera, setCamera] = useState(PERSPECTIVE);
     const [keyPressed, setKeyPressed] = useState("");
     const lastKeyPressed = useRef("");
 
@@ -91,6 +103,10 @@ const CameraControls = ({
         }
     }, [mode]);
 
+    useEffect(() => {
+        setCameraType(camera === ORTHOGRAPHIC);
+    }, [camera]);
+
     useEffect(() => {
         if (
             (isModifierKey(keyPressed) && !lastKeyPressed.current) ||
@@ -113,6 +129,12 @@ const CameraControls = ({
             case FOCUS_HK:
                 saveFocusMode(!isFocused);
                 break;
+            case ORTHOGRAPHIC:
+                setCamera(ORTHOGRAPHIC);
+                break;
+            case PERSPECTIVE:
+                setCamera(PERSPECTIVE);
+                break;
             default:
                 break;
         }
@@ -120,6 +142,30 @@ const CameraControls = ({
     }, [keyPressed]);
     return (
         <div className={styles.container}>
+            <div className={styles.zoomButtons}>
+                <Tooltip
+                    placement="left"
+                    title="Zoom in ( &uarr; )"
+                    color={TOOLTIP_COLOR}
+                >
+                    <Button
+                        className={styles.btn}
+                        icon={Icons.ZoomIn}
+                        onClick={zoomIn}
+                    />
+                </Tooltip>
+                <Tooltip
+                    placement="left"
+                    title="Zoom out ( &darr; )"
+                    color={TOOLTIP_COLOR}
+                >
+                    <Button
+                        className={styles.btn}
+                        icon={Icons.ZoomOut}
+                        onClick={zoomOut}
+                    />
+                </Tooltip>
+            </div>
             <div className={styles.moveButtons}>
                 <div className={styles.radioGroup}>
                     <Tooltip
@@ -169,56 +215,73 @@ const CameraControls = ({
                         </Button>
                     </Tooltip>
                 </div>
-                <Tooltip
-                    placement="left"
-                    title="Focus (F)"
-                    color={TOOLTIP_COLOR}
-                >
-                    <Button
-                        size="small"
-                        className={classNames([
-                            { [styles.active]: isFocused },
-                            styles.radioBtn,
-                        ])}
-                        onClick={() => saveFocusMode(!isFocused)}
+            </div>
+            <div className={styles.moveButtons}>
+                <div className={styles.radioGroup}>
+                    <Tooltip
+                        placement="left"
+                        title={
+                            mode === ROTATE
+                                ? "Orthographic Camera"
+                                : "Orthographic Camera"
+                        }
+                        color={TOOLTIP_COLOR}
                     >
-                        <span
+                        {/* Should be radio buttons, but using radio buttons 
+                        detaches keypressed listener after the button is pressed */}
+                        <Button
                             className={classNames([
-                                "icon-moon",
-                                "anticon",
-                                styles.focus,
+                                { [styles.active]: camera === ORTHOGRAPHIC },
+                                styles.radioBtn,
                             ])}
-                        />
-                    </Button>
-                </Tooltip>
+                            onClick={() => {
+                                setCamera(ORTHOGRAPHIC);
+                            }}
+                            icon={Icons.OrthographicCamera}
+                        ></Button>
+                    </Tooltip>
+                    <Tooltip
+                        placement="left"
+                        title={"Perspective Camera"}
+                        color={TOOLTIP_COLOR}
+                    >
+                        <Button
+                            className={classNames([
+                                { [styles.active]: camera === PERSPECTIVE },
+                                styles.radioBtn,
+                            ])}
+                            onClick={() => {
+                                setCamera(PERSPECTIVE);
+                            }}
+                            icon={Icons.PerspectiveCamera}
+                        ></Button>
+                    </Tooltip>
+                </div>
             </div>
-
-            <div className={styles.zoomButtons}>
-                <Tooltip
-                    placement="left"
-                    title="Zoom in ( &uarr; )"
-                    color={TOOLTIP_COLOR}
-                >
-                    <Button
-                        className={styles.btn}
-                        size="small"
-                        icon={Icons.ZoomIn}
-                        onClick={zoomIn}
-                    />
-                </Tooltip>
-                <Tooltip
-                    placement="left"
-                    title="Zoom out ( &darr; )"
-                    color={TOOLTIP_COLOR}
+            {/* focus */}
+            <Tooltip placement="left" title="Focus (F)" color={TOOLTIP_COLOR}>
+                <Button
+                    className={classNames([
+                        { [styles.active]: isFocused },
+                        styles.radioBtn,
+                    ])}
+                    onClick={() => {
+                        console.log(isFocused);
+                        saveFocusMode(!isFocused);
+                        console.log(isFocused);
+                    }}
                 >
-                    <Button
-                        className={styles.btn}
-                        size="small"
-                        icon={Icons.ZoomOut}
-                        onClick={zoomOut}
+                    <span
+                        className={classNames([
+                            "icon-moon",
+                            "anticon",
+                            styles.focus,
+                        ])}
                     />
-                </Tooltip>
-            </div>
+                </Button>
+            </Tooltip>
+
+            {/* home */}
             <Tooltip
                 placement="left"
                 title="Home view (H)"
@@ -226,7 +289,6 @@ const CameraControls = ({
             >
                 <Button
                     className={styles.btn}
-                    size="small"
                     icon={Icons.Reset}
                     onClick={resetCamera}
                 />
diff --git a/src/containers/ViewerPanel/index.tsx b/src/containers/ViewerPanel/index.tsx
index 5ceec4991..b6da7dbc4 100644
--- a/src/containers/ViewerPanel/index.tsx
+++ b/src/containers/ViewerPanel/index.tsx
@@ -432,6 +432,7 @@ class ViewerPanel extends React.Component<ViewerPanelProps, ViewerPanelState> {
                     zoomOut={simulariumController.zoomOut}
                     setPanningMode={simulariumController.setPanningMode}
                     setFocusMode={simulariumController.setFocusMode}
+                    setCameraType={simulariumController.setCameraType}
                 />
             </div>
         );

From b23d847486f97313b163895ca4fdd28014e9ea7a Mon Sep 17 00:00:00 2001
From: Joe Heffernan <interim17@gmail.com>
Date: Thu, 10 Aug 2023 12:25:26 -0700
Subject: [PATCH 02/27] initial styling of camera controls

---
 src/components/CameraControls/style.css | 73 ++++++++++++++-----------
 1 file changed, 40 insertions(+), 33 deletions(-)

diff --git a/src/components/CameraControls/style.css b/src/components/CameraControls/style.css
index 4ba5ecdb2..41cb1faab 100644
--- a/src/components/CameraControls/style.css
+++ b/src/components/CameraControls/style.css
@@ -5,72 +5,73 @@
     bottom: 0;
     right: 20px;
     justify-content: space-evenly;
+    gap: 12px;
     margin-bottom: 20px;
 }
 
+.container :global(.ant-btn) {
+    height: 26px;
+    width: 26px;
+    background-color: var(--viewer-btn-bg-default);
+}
+
 .radio-group {
     display: flex;
     flex-flow: column;
+    justify-content: space-evenly;
 }
+
 .zoom-buttons {
     display: flex;
     flex-direction: column;
     justify-content: space-evenly;
     height: 60px;
-    margin-bottom: 4px;
-
-}
-
-.move-buttons {
-    display: flex;
-    height: 84px;
-    flex-flow: column;
-    justify-content: space-evenly;
 }
 
 .btn {
-    background-color: var(--dark-theme-btn-bg);
-    color: var(--dark-theme-btn-color);
+    background-color: var(--viewer-btn-bg-default);
+    color: var(--viewer-btn-color-default);
     border-radius: 3px!important;
+    height: 26px !important;
+    width: 26px !important;
 }
 
 .radio-btn {
-    border-color: var(--dark-theme-btn-bg)!important;
-    background-color: black!important;
     padding: 0 2px!important;
-    width: 24px;
-    height: 24px;
+    width: 26px;
+    height: 26px;
     font-size: 18px;
     line-height: 18px;
     border-left-width: 1px;
+    border: none;
 }
 
-.radio-group .radio-btn:first-child {
-    border-radius: 3px 3px 0px 0px;
+.radio-btn.active {
+    color: var(--viewer-btn-color-default) !important;
+    background-color: var(--viewer-btn-bg-default) !important;
+    border: 1px solid var(--viewer-btn-border-active) !important;
 }
 
-.radio-group .radio-btn:last-child {
-    border-radius: 0px 0px 3px 3px;
-}
- 
-.radio-btn.active {
-    color: var(--dark-theme-btn-color) !important;
-    background-color: var(--dark-theme-btn-bg) !important;
+.radio-btn:hover {
+    color: var(--viewer-btn-color-default);
+    background-color: var(--viewer-btn-bg-hover)!important;
 }
 
 .radio-group .radio-btn:not(:first-child) {
     border-top: 0px;
 }
 
-.radio-btn:hover {
-    color: var(--dark-theme-btn-color);
-    background-color: var(--dark-theme-btn-hover-bg)!important;
+.radio-group .radio-btn:first-child {
+    border-radius: 3px 3px 0px 0px;
 }
 
-.btn:hover,
-.btn:active {
-    color: var(--dark-theme-btn-color);
-    background-color: var(--dark-theme-btn-hover-bg);
+.radio-group .radio-btn:last-child {
+    border-radius: 0px 0px 3px 3px;
+}
+.btn:hover {
+    color: var(--viewer-btn-color-default);
+    background-color: var(--viewer-btn-bg-hover);
+    border: 1px solid var(--viewer-btn-border-active) !important;
 }
 
 .btn:focus {
@@ -79,11 +80,17 @@
 }
 
 .btn[disabled] {
-    background-color: var(--dark-theme-btn-disabled-bg);
-    color: var(--dark-theme-btn-disabled-color);
+    background-color: var(--viewer-btn-bg-disabled);
+    color: var(--viewer-btn-color-disabled);
 
 }
 
+.container .anticon svg {
+    height: 24px;
+    width: 24px;
+    color: var(--viewer-btn-color-default);
+}
+
 .rotate::after {
     content: "\e909";
 }

From f3cc830f8f9aa341b57a7da9459ab2cbab7d63ed Mon Sep 17 00:00:00 2001
From: Joe Heffernan <interim17@gmail.com>
Date: Thu, 10 Aug 2023 12:25:50 -0700
Subject: [PATCH 03/27] ortho/perspective icons

---
 src/components/Icons/index.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/components/Icons/index.tsx b/src/components/Icons/index.tsx
index 03f8f94d0..7b3b7a367 100644
--- a/src/components/Icons/index.tsx
+++ b/src/components/Icons/index.tsx
@@ -18,6 +18,8 @@ import AicsLogoWhite from "../../assets/AICS-logo-full.png";
 import ClockwiseArrow from "../../assets/step-forward.svg";
 import CounterClockwiseArrow from "../../assets/step-back.svg";
 import Beta from "../../assets/beta.svg";
+import Orthographic from "../../assets/orthographic.svg";
+import Perspective from "../../assets/perspective.svg";
 
 export const Loading = <LoadingOutlined style={{ fontSize: 40 }} spin />;
 export const Play = <CaretRightOutlined />;
@@ -37,6 +39,8 @@ export const AicsLogo = <img src={AicsLogoWhite} style={{ width: "140px" }} />;
 export const StepForward = <img src={ClockwiseArrow} />;
 export const StepBack = <img src={CounterClockwiseArrow} />;
 export const BetaTag = <img src={Beta} style={{ width: "42px" }} />;
+export const OrthographicCamera = <img src={Orthographic} />;
+export const PerspectiveCamera = <img src={Perspective} />;
 
 export default {
     StepBack,
@@ -57,4 +61,6 @@ export default {
     BetaTag,
     Download,
     LoopOutlined,
+    OrthographicCamera,
+    PerspectiveCamera,
 };

From 4506ce9a66fd55978cbdc27d4bf08dbacce98fcb Mon Sep 17 00:00:00 2001
From: Joe Heffernan <interim17@gmail.com>
Date: Thu, 10 Aug 2023 12:26:56 -0700
Subject: [PATCH 04/27] define viewer button color variables

---
 src/styles/colors.css | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/styles/colors.css b/src/styles/colors.css
index 6b2d4ccb2..1b6b76ec0 100644
--- a/src/styles/colors.css
+++ b/src/styles/colors.css
@@ -13,10 +13,12 @@
     --white-six: #e7e7e7;
     --transparent-white: rgba(255, 255, 255, 0.65);
     --dim-gray: #383838;
+    --dim-gray-two: #6E6E6E;
+    --purplish-gray: #4A4658;
     --pale-grey: #ddd9ec;
     --heather: #bab5c9;
     --text-gray: #a0a0a0;
-    --greyish-brown: #4a4a4a;
+    --grayish-brown: #4a4a4a;
     --warm-gray: #979797;
     --charcoal-grey: #3b3649;
     --dark-blue-grey: #2d224d;
@@ -70,5 +72,12 @@
     --light-theme-modal-supplemental-text: var(--charcoal-grey);
     --light-theme-modal-btn-default-color: var(--dark-four);
     --light-theme-btn-default-disabled-bg: var(--heather);
+    --viewer-btn-bg-default: var(--dark-three);
+    --viewer-btn-bg-hover: var(--purplish-gray);
+    --viewer-btn-bg-disabled: var(--dark-three);
+    --viewer-btn-border-active: var( --white-three);
+    --viewer-btn-border-on: var(--dim-gray-two);
+    --viewer-btn-color-default: var(--white-three);
+    --viewer-btn-color-disabled: var(--grayish-brown);
 }
 

From 8756d054f27ed2c5e14af0d2f0f9410e81a9dd53 Mon Sep 17 00:00:00 2001
From: Joe Heffernan <interim17@gmail.com>
Date: Mon, 14 Aug 2023 13:00:59 -0700
Subject: [PATCH 05/27] focus:hover state on home button

---
 src/components/CameraControls/index.tsx | 5 -----
 src/components/CameraControls/style.css | 6 ++++++
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/CameraControls/index.tsx b/src/components/CameraControls/index.tsx
index 5b16d5d39..4228dc7a6 100644
--- a/src/components/CameraControls/index.tsx
+++ b/src/components/CameraControls/index.tsx
@@ -258,7 +258,6 @@ const CameraControls = ({
                     </Tooltip>
                 </div>
             </div>
-            {/* focus */}
             <Tooltip placement="left" title="Focus (F)" color={TOOLTIP_COLOR}>
                 <Button
                     className={classNames([
@@ -266,9 +265,7 @@ const CameraControls = ({
                         styles.radioBtn,
                     ])}
                     onClick={() => {
-                        console.log(isFocused);
                         saveFocusMode(!isFocused);
-                        console.log(isFocused);
                     }}
                 >
                     <span
@@ -280,8 +277,6 @@ const CameraControls = ({
                     />
                 </Button>
             </Tooltip>
-
-            {/* home */}
             <Tooltip
                 placement="left"
                 title="Home view (H)"
diff --git a/src/components/CameraControls/style.css b/src/components/CameraControls/style.css
index 41cb1faab..672b9c233 100644
--- a/src/components/CameraControls/style.css
+++ b/src/components/CameraControls/style.css
@@ -68,6 +68,7 @@
 .radio-group .radio-btn:last-child {
     border-radius: 0px 0px 3px 3px;
 }
+
 .btn:hover {
     color: var(--viewer-btn-color-default);
     background-color: var(--viewer-btn-bg-hover);
@@ -79,6 +80,11 @@
     color: var(--dark-theme-btn-color);
 }
 
+.btn:hover:focus {
+    color: var(--viewer-btn-color-default);
+    background-color: var(--viewer-btn-bg-hover);
+}
+
 .btn[disabled] {
     background-color: var(--viewer-btn-bg-disabled);
     color: var(--viewer-btn-color-disabled);

From 29137a35c6bc9bc8b03c2da7c639da36d390a3ed Mon Sep 17 00:00:00 2001
From: Joe Heffernan <interim17@gmail.com>
Date: Mon, 14 Aug 2023 13:01:55 -0700
Subject: [PATCH 06/27] playback control styling

---
 src/components/PlaybackControls/index.tsx | 22 +++---
 src/components/PlaybackControls/style.css | 86 +++++++++++++++--------
 2 files changed, 64 insertions(+), 44 deletions(-)

diff --git a/src/components/PlaybackControls/index.tsx b/src/components/PlaybackControls/index.tsx
index 7643a7e59..5100eafc4 100644
--- a/src/components/PlaybackControls/index.tsx
+++ b/src/components/PlaybackControls/index.tsx
@@ -129,7 +129,6 @@ const PlayBackControls = ({
                         btnClassNames,
                         { [styles.customStepButton]: !loading },
                     ])}
-                    size="small"
                     onClick={prevHandler}
                     disabled={isStepBackDisabled || loading || isEmpty}
                     loading={loading}
@@ -152,8 +151,10 @@ const PlayBackControls = ({
                 color={TOOLTIP_COLOR}
             >
                 <Button
-                    className={btnClassNames}
-                    size="small"
+                    className={classNames([
+                        btnClassNames,
+                        styles.buttonSpacing,
+                    ])}
                     icon={isPlaying ? Icons.Pause : Icons.Play}
                     onClick={isPlaying ? pauseHandler : () => playHandler()}
                     loading={loading}
@@ -170,7 +171,6 @@ const PlayBackControls = ({
                         btnClassNames,
                         { [styles.customStepButton]: !loading },
                     ])}
-                    size="small"
                     onClick={nextHandler}
                     disabled={isStepForwardDisabled || loading || isEmpty}
                     loading={loading}
@@ -221,16 +221,10 @@ const PlayBackControls = ({
                 arrowPointAtCenter
             >
                 <Button
-                    className={
-                        isLooping
-                            ? btnClassNames
-                            : classNames([
-                                  styles.item,
-                                  styles.btn,
-                                  styles.removeBorder,
-                              ])
-                    }
-                    size="small"
+                    className={classNames([
+                        btnClassNames,
+                        { [styles.active]: isLooping },
+                    ])}
                     icon={Icons.LoopOutlined}
                     onClick={loopHandler}
                     loading={loading}
diff --git a/src/components/PlaybackControls/style.css b/src/components/PlaybackControls/style.css
index 2e7c212d6..b335b2213 100644
--- a/src/components/PlaybackControls/style.css
+++ b/src/components/PlaybackControls/style.css
@@ -13,7 +13,7 @@
 }
 
 .container :global(.ant-input-number input) {
-    color: var(--dark-theme-btn-color);
+    color: var(--viewer-btn-color-default);
     padding: 0 3px;
 }
 
@@ -22,56 +22,74 @@
     display: none;
 }
 
-.item {
-    margin: auto 2px;
+.container .btn, .container :global(.ant-btn) {
+    /* this works to set height and other qualties  */
+    height: 26px;
+    width: 26px;
+    border-radius: 3px;
+    background-color: var(--viewer-btn-bg-default);
+    color: var(--viewer-btn-color-default);
+    border: none;
 }
 
-.btn, .btn:focus {
-    background-color: var(--dark-theme-btn-bg);
-    color: var(--dark-theme-btn-color);
-    border-radius: 3px!important;
+.container .btn:hover {
+    color: var(--viewer-btn-color-default);
+    background-color: var(--viewer-btn-bg-hover);
+    border: 1px solid var(--viewer-btn-border-active);
 }
 
-.btn:hover, .btn:active {
-    color: var(--dark-theme-btn-color);
-    background-color: var(--dark-theme-btn-hover-bg);
+.container .btn.active {
+    color: var(--viewer-btn-color-default);
+    background-color: var(--viewer-btn-bg-default);
+    border: 1px solid var(--viewer-btn-border-active);
 }
 
-.btn button[disabled] {
-    border-radius: 3px;
-    background-color: var(--dark-theme-btn-bg);
-    border-color: transparent!important;
+.container .btn.active:hover {
+    color: var(--viewer-btn-color-default);
+    background-color: var(--viewer-btn-bg-hover);
+    border: 1px solid var(--viewer-btn-border-active);
+}
+
+.container .btn button[disabled] {
+    background-color: var(--viewer-btn-bg-disabled);
+    color: var(--viewer-btn-color-disabled);
+}
+
+.container .button-spacing {
+    margin-left: 4px;
+    margin-right: 4px;
 }
-.slider {
+
+.container .slider {
     flex: 3;
     margin: auto 10px;
 }
 
-.slider :global(.ant-slider-track) {
-    background-color: var(--dark-theme-slider-color);
+.container .slider :global(.ant-slider-track) {
+    background-color: var(--viewer-btn-color-default);
 }
 
-.slider :global(.ant-slider-track),
-.slider :global(.ant-slider-rail) {
+.container .slider :global(.ant-slider-track),
+.container .slider :global(.ant-slider-rail) {
     border-radius: 3px;
 }
 
-.slider :global(.ant-slider-handle) {
-    background-color: var(--dark-theme-slider-color);
+.container .slider :global(.ant-slider-handle) {
+    background-color: var(--viewer-btn-color-default);
     border: none;
     height: 10px;
     width: 10px;
-    margin-top: -3.5px
+    margin-top: -3.5px;
 }
 
-.slider :global(.ant-slider-handle):focus {
+.container .slider :global(.ant-slider-handle):focus {
     box-shadow: none;
 }
 
 .time {
     font-weight: 300;
-    background-color: var(--dark-theme-btn-bg);
-    color: var(--dark-theme-btn-color);
+    background-color: var(--viewer-btn-bg-default);
+    color: var(--viewer-btn-color-default);
     height: 26px;
     min-width: 100px;
     padding: 1px 7px 4px 7px;
@@ -84,19 +102,27 @@
     color: var(--dark-theme-btn-color-dim);
 }
 
-.custom-step-button, .custom-step-button :global(.ant-btn) {
+.custom-step-button,
+.custom-step-button :global(.ant-btn) {
     padding: 0;
     width: 24px;
 }
 
+.container .anticon svg {
+    height: 24px;
+    width: 24px;
+    color: var(--viewer-btn-color-default);
+}
+
+.container :global(.ant-btn-loading-icon) {
+    color: var(--viewer-btn-color-default);
+    margin: auto 2px;
+}
+
 .step-back::after {
     content: "\e906";
 }
 
 .step-forward::after {
     content: "\e907";
-}
-
-.remove-border{
-    border: none;
 }
\ No newline at end of file

From 1b92d704738a9cee82e5b102f46890790d72d23c Mon Sep 17 00:00:00 2001
From: Joe Heffernan <interim17@gmail.com>
Date: Wed, 16 Aug 2023 13:50:33 -0700
Subject: [PATCH 07/27] fix button exceeding border

---
 src/components/PlaybackControls/style.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/PlaybackControls/style.css b/src/components/PlaybackControls/style.css
index b335b2213..9ab3d073c 100644
--- a/src/components/PlaybackControls/style.css
+++ b/src/components/PlaybackControls/style.css
@@ -106,6 +106,7 @@
 .custom-step-button :global(.ant-btn) {
     padding: 0;
     width: 24px;
+    height: 24px;
 }
 
 .container .anticon svg {

From aa0fc41db95e9c76ee400f8f8a236d9acc23bd02 Mon Sep 17 00:00:00 2001
From: Joe Heffernan <interim17@gmail.com>
Date: Thu, 17 Aug 2023 16:15:09 -0700
Subject: [PATCH 08/27] orth/persp icons swapped

---
 src/assets/orthographic.svg | 18 ++++++++++++++++--
 src/assets/perspective.svg  | 18 ++----------------
 2 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/assets/orthographic.svg b/src/assets/orthographic.svg
index 558fca8e7..b22953160 100644
--- a/src/assets/orthographic.svg
+++ b/src/assets/orthographic.svg
@@ -1,3 +1,17 @@
-<svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8.47727 3.27276L8.63636 15.4091M8.47727 3.27276L16.5 1.40912M8.47727 3.27276L1.5 1.34094M8.63636 15.4091L14.6591 9.97731L16.5 1.40912M8.63636 15.4091L3.22727 9.70458L1.5 1.34094M16.5 1.40912L8.97727 0.590942L1.5 1.34094" stroke="#D8D8D8"/>
+<svg width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_87_536)">
+<path d="M1.05084 4.52966L8.21186 1.5L14.9491 4.72034M1.05084 4.52966L7.78813 7.72881M1.05084 4.52966V13.3432L7.78813 16.5M7.78813 7.72881L14.9491 4.72034M7.78813 7.72881V16.5M14.9491 4.72034V13.5339L7.78813 16.5" stroke="#D8D8D8" shape-rendering="crispEdges"/>
+</g>
+<defs>
+<filter id="filter0_d_87_536" x="0.550842" y="0.951782" width="15.6483" height="16.8446" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="0.5" dy="0.5"/>
+<feGaussianBlur stdDeviation="0.125"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_87_536"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_87_536" result="shape"/>
+</filter>
+</defs>
 </svg>
diff --git a/src/assets/perspective.svg b/src/assets/perspective.svg
index b22953160..558fca8e7 100644
--- a/src/assets/perspective.svg
+++ b/src/assets/perspective.svg
@@ -1,17 +1,3 @@
-<svg width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g filter="url(#filter0_d_87_536)">
-<path d="M1.05084 4.52966L8.21186 1.5L14.9491 4.72034M1.05084 4.52966L7.78813 7.72881M1.05084 4.52966V13.3432L7.78813 16.5M7.78813 7.72881L14.9491 4.72034M7.78813 7.72881V16.5M14.9491 4.72034V13.5339L7.78813 16.5" stroke="#D8D8D8" shape-rendering="crispEdges"/>
-</g>
-<defs>
-<filter id="filter0_d_87_536" x="0.550842" y="0.951782" width="15.6483" height="16.8446" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dx="0.5" dy="0.5"/>
-<feGaussianBlur stdDeviation="0.125"/>
-<feComposite in2="hardAlpha" operator="out"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_87_536"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_87_536" result="shape"/>
-</filter>
-</defs>
+<svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.47727 3.27276L8.63636 15.4091M8.47727 3.27276L16.5 1.40912M8.47727 3.27276L1.5 1.34094M8.63636 15.4091L14.6591 9.97731L16.5 1.40912M8.63636 15.4091L3.22727 9.70458L1.5 1.34094M16.5 1.40912L8.97727 0.590942L1.5 1.34094" stroke="#D8D8D8"/>
 </svg>

From d5b84407f5bcb81e3d7391b14ee69d286a0d4924 Mon Sep 17 00:00:00 2001
From: Joe Heffernan <interim17@gmail.com>
Date: Thu, 17 Aug 2023 16:16:45 -0700
Subject: [PATCH 09/27] remove redundant ternary

---
 src/components/CameraControls/index.tsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/components/CameraControls/index.tsx b/src/components/CameraControls/index.tsx
index 4228dc7a6..62e0e8d27 100644
--- a/src/components/CameraControls/index.tsx
+++ b/src/components/CameraControls/index.tsx
@@ -220,11 +220,7 @@ const CameraControls = ({
                 <div className={styles.radioGroup}>
                     <Tooltip
                         placement="left"
-                        title={
-                            mode === ROTATE
-                                ? "Orthographic Camera"
-                                : "Orthographic Camera"
-                        }
+                        title={"Orthographic Camera"}
                         color={TOOLTIP_COLOR}
                     >
                         {/* Should be radio buttons, but using radio buttons 

From 49598cce511597bd3a4e0c15d55349f20ffb5226 Mon Sep 17 00:00:00 2001
From: Joe Heffernan <interim17@gmail.com>
Date: Mon, 28 Aug 2023 19:00:29 -0700
Subject: [PATCH 10/27] install new viewer version

---
 package-lock.json | 14 +++++++-------
 package.json      |  2 +-
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 149426d05..88b208ac9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
             "version": "0.9.0",
             "license": "ISC",
             "dependencies": {
-                "@aics/simularium-viewer": "^3.6.1",
+                "@aics/simularium-viewer": "^3.6.2",
                 "@ant-design/css-animation": "^1.7.3",
                 "@ant-design/icons": "^4.0.6",
                 "antd": "^4.23.6",
@@ -111,9 +111,9 @@
             "dev": true
         },
         "node_modules/@aics/simularium-viewer": {
-            "version": "3.6.1",
-            "resolved": "https://registry.npmjs.org/@aics/simularium-viewer/-/simularium-viewer-3.6.1.tgz",
-            "integrity": "sha512-vP5PsMHc8J3BJg7D2bXz7eeSKom+TSkgs6gr5OKSqcZif4OljOgQEowEZH6MaYLviY+Xpyt1KSO3bg8BB2ExkQ==",
+            "version": "3.6.2",
+            "resolved": "https://registry.npmjs.org/@aics/simularium-viewer/-/simularium-viewer-3.6.2.tgz",
+            "integrity": "sha512-QTuxtExeqFYhAmfr4VFqpu9QKVqd0Vg1znaDFUyV4qGEr9W1hDlA2evxK3c3PXnNn/wNCWEE1SnrWRjSzjesIA==",
             "dependencies": {
                 "@fortawesome/fontawesome-free": "^5.15.2",
                 "@fortawesome/fontawesome-svg-core": "~1.2.34",
@@ -24354,9 +24354,9 @@
             "dev": true
         },
         "@aics/simularium-viewer": {
-            "version": "3.6.1",
-            "resolved": "https://registry.npmjs.org/@aics/simularium-viewer/-/simularium-viewer-3.6.1.tgz",
-            "integrity": "sha512-vP5PsMHc8J3BJg7D2bXz7eeSKom+TSkgs6gr5OKSqcZif4OljOgQEowEZH6MaYLviY+Xpyt1KSO3bg8BB2ExkQ==",
+            "version": "3.6.2",
+            "resolved": "https://registry.npmjs.org/@aics/simularium-viewer/-/simularium-viewer-3.6.2.tgz",
+            "integrity": "sha512-QTuxtExeqFYhAmfr4VFqpu9QKVqd0Vg1znaDFUyV4qGEr9W1hDlA2evxK3c3PXnNn/wNCWEE1SnrWRjSzjesIA==",
             "requires": {
                 "@fortawesome/fontawesome-free": "^5.15.2",
                 "@fortawesome/fontawesome-svg-core": "~1.2.34",
diff --git a/package.json b/package.json
index 9ed9b5d9e..f71e7e5a1 100644
--- a/package.json
+++ b/package.json
@@ -92,7 +92,7 @@
         "webpack-dev-server": "^4.10.1"
     },
     "dependencies": {
-        "@aics/simularium-viewer": "^3.6.1",
+        "@aics/simularium-viewer": "^3.6.2",
         "@ant-design/css-animation": "^1.7.3",
         "@ant-design/icons": "^4.0.6",
         "antd": "^4.23.6",

From a78dee40c3be10ee554e2e13e0aef260845d4775 Mon Sep 17 00:00:00 2001
From: Joe Heffernan <interim17@gmail.com>
Date: Fri, 8 Sep 2023 09:21:09 -0700
Subject: [PATCH 11/27] rename set camera

---
 src/components/CameraControls/index.tsx | 25 ++++++++++++++++---------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/components/CameraControls/index.tsx b/src/components/CameraControls/index.tsx
index 62e0e8d27..565a4a65e 100644
--- a/src/components/CameraControls/index.tsx
+++ b/src/components/CameraControls/index.tsx
@@ -45,7 +45,8 @@ const CameraControls = ({
 }: CameraControlsProps): JSX.Element => {
     const [isFocused, saveFocusMode] = useState(true);
     const [mode, setMode] = useState(ROTATE);
-    const [camera, setCamera] = useState(PERSPECTIVE);
+    const [cameraProjectionType, setCameraProjectionType] =
+        useState(PERSPECTIVE);
     const [keyPressed, setKeyPressed] = useState("");
     const lastKeyPressed = useRef("");
 
@@ -104,8 +105,8 @@ const CameraControls = ({
     }, [mode]);
 
     useEffect(() => {
-        setCameraType(camera === ORTHOGRAPHIC);
-    }, [camera]);
+        setCameraType(cameraProjectionType === ORTHOGRAPHIC);
+    }, [cameraProjectionType]);
 
     useEffect(() => {
         if (
@@ -130,10 +131,10 @@ const CameraControls = ({
                 saveFocusMode(!isFocused);
                 break;
             case ORTHOGRAPHIC:
-                setCamera(ORTHOGRAPHIC);
+                setCameraProjectionType(ORTHOGRAPHIC);
                 break;
             case PERSPECTIVE:
-                setCamera(PERSPECTIVE);
+                setCameraProjectionType(PERSPECTIVE);
                 break;
             default:
                 break;
@@ -227,11 +228,14 @@ const CameraControls = ({
                         detaches keypressed listener after the button is pressed */}
                         <Button
                             className={classNames([
-                                { [styles.active]: camera === ORTHOGRAPHIC },
+                                {
+                                    [styles.active]:
+                                        cameraProjectionType === ORTHOGRAPHIC,
+                                },
                                 styles.radioBtn,
                             ])}
                             onClick={() => {
-                                setCamera(ORTHOGRAPHIC);
+                                setCameraProjectionType(ORTHOGRAPHIC);
                             }}
                             icon={Icons.OrthographicCamera}
                         ></Button>
@@ -243,11 +247,14 @@ const CameraControls = ({
                     >
                         <Button
                             className={classNames([
-                                { [styles.active]: camera === PERSPECTIVE },
+                                {
+                                    [styles.active]:
+                                        cameraProjectionType === PERSPECTIVE,
+                                },
                                 styles.radioBtn,
                             ])}
                             onClick={() => {
-                                setCamera(PERSPECTIVE);
+                                setCameraProjectionType(PERSPECTIVE);
                             }}
                             icon={Icons.PerspectiveCamera}
                         ></Button>

From 67f2f582cffb3537bd1d47ad37caf0866f1137bf Mon Sep 17 00:00:00 2001
From: Megan Riel-Mehan <meganrm@gmail.com>
Date: Thu, 5 Oct 2023 13:28:50 -0700
Subject: [PATCH 12/27] audit fix (#437)

---
 package-lock.json | 242 ++++++++++++++++++++++++----------------------
 1 file changed, 126 insertions(+), 116 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 88b208ac9..5cf084145 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -105,9 +105,9 @@
             }
         },
         "node_modules/@adobe/css-tools": {
-            "version": "4.2.0",
-            "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.2.0.tgz",
-            "integrity": "sha512-E09FiIft46CmH5Qnjb0wsW54/YQd69LsxeKUOWawmws1XWvyFGURnAChH0mlr7YPFR1ofwvUQfcL0J3lMxXqPA==",
+            "version": "4.3.1",
+            "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.3.1.tgz",
+            "integrity": "sha512-/62yikz7NLScCGAAST5SHdnjaDJQBDq0M2muyRTpf2VQhw6StBg2ALiu73zSJQ4fMVLA+0uBhBHAle7Wg+2kSg==",
             "dev": true
         },
         "node_modules/@aics/simularium-viewer": {
@@ -4182,9 +4182,9 @@
             }
         },
         "node_modules/@typescript-eslint/eslint-plugin/node_modules/semver": {
-            "version": "7.3.8",
-            "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
-            "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
+            "version": "7.5.4",
+            "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+            "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
             "dev": true,
             "dependencies": {
                 "lru-cache": "^6.0.0"
@@ -4308,9 +4308,9 @@
             }
         },
         "node_modules/@typescript-eslint/typescript-estree/node_modules/semver": {
-            "version": "7.3.8",
-            "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
-            "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
+            "version": "7.5.4",
+            "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+            "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
             "dev": true,
             "dependencies": {
                 "lru-cache": "^6.0.0"
@@ -4349,9 +4349,9 @@
             }
         },
         "node_modules/@typescript-eslint/utils/node_modules/semver": {
-            "version": "7.3.8",
-            "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
-            "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
+            "version": "7.5.4",
+            "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+            "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
             "dev": true,
             "dependencies": {
                 "lru-cache": "^6.0.0"
@@ -5183,9 +5183,9 @@
             }
         },
         "node_modules/auto-changelog/node_modules/semver": {
-            "version": "7.3.8",
-            "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
-            "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
+            "version": "7.5.4",
+            "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+            "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
             "dev": true,
             "dependencies": {
                 "lru-cache": "^6.0.0"
@@ -6769,9 +6769,9 @@
             }
         },
         "node_modules/css-loader/node_modules/semver": {
-            "version": "7.3.8",
-            "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
-            "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
+            "version": "7.5.4",
+            "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+            "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
             "dev": true,
             "dependencies": {
                 "lru-cache": "^6.0.0"
@@ -8835,9 +8835,9 @@
             }
         },
         "node_modules/eslint/node_modules/semver": {
-            "version": "7.3.8",
-            "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
-            "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
+            "version": "7.5.4",
+            "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+            "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
             "dev": true,
             "dependencies": {
                 "lru-cache": "^6.0.0"
@@ -9022,9 +9022,9 @@
             }
         },
         "node_modules/execa/node_modules/semver": {
-            "version": "5.7.1",
-            "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-            "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+            "version": "5.7.2",
+            "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+            "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
             "dev": true,
             "bin": {
                 "semver": "bin/semver"
@@ -9847,9 +9847,9 @@
             }
         },
         "node_modules/fork-ts-checker-webpack-plugin/node_modules/semver": {
-            "version": "7.3.8",
-            "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
-            "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
+            "version": "7.5.4",
+            "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+            "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
             "dev": true,
             "dependencies": {
                 "lru-cache": "^6.0.0"
@@ -14026,9 +14026,9 @@
             "dev": true
         },
         "node_modules/jest-snapshot/node_modules/semver": {
-            "version": "7.3.8",
-            "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
-            "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
+            "version": "7.5.4",
+            "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+            "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
             "dev": true,
             "dependencies": {
                 "lru-cache": "^6.0.0"
@@ -15159,9 +15159,9 @@
             }
         },
         "node_modules/make-dir/node_modules/semver": {
-            "version": "5.7.1",
-            "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-            "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+            "version": "5.7.2",
+            "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+            "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
             "dev": true,
             "bin": {
                 "semver": "bin/semver"
@@ -16074,10 +16074,16 @@
             "integrity": "sha512-TvmkNhkv8yct0SVBSy+o8wYzXjE4Zz3PCesbfs8HiCXXdcTuocApFv11UWlNFWKYsP2okqrhb7JNlSm9InBhIw=="
         },
         "node_modules/nanoid": {
-            "version": "3.3.4",
-            "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
-            "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
+            "version": "3.3.6",
+            "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
+            "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
             "dev": true,
+            "funding": [
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/ai"
+                }
+            ],
             "bin": {
                 "nanoid": "bin/nanoid.cjs"
             },
@@ -16320,9 +16326,9 @@
             }
         },
         "node_modules/normalize-package-data/node_modules/semver": {
-            "version": "5.7.1",
-            "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-            "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+            "version": "5.7.2",
+            "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+            "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
             "dev": true,
             "bin": {
                 "semver": "bin/semver"
@@ -17277,9 +17283,9 @@
             }
         },
         "node_modules/postcss": {
-            "version": "8.4.21",
-            "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz",
-            "integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==",
+            "version": "8.4.31",
+            "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+            "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
             "dev": true,
             "funding": [
                 {
@@ -17289,10 +17295,14 @@
                 {
                     "type": "tidelift",
                     "url": "https://tidelift.com/funding/github/npm/postcss"
+                },
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/ai"
                 }
             ],
             "dependencies": {
-                "nanoid": "^3.3.4",
+                "nanoid": "^3.3.6",
                 "picocolors": "^1.0.0",
                 "source-map-js": "^1.0.2"
             },
@@ -17666,9 +17676,9 @@
             }
         },
         "node_modules/postcss-loader/node_modules/semver": {
-            "version": "7.3.8",
-            "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
-            "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
+            "version": "7.5.4",
+            "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+            "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
             "dev": true,
             "dependencies": {
                 "lru-cache": "^6.0.0"
@@ -20491,9 +20501,9 @@
             }
         },
         "node_modules/semver": {
-            "version": "6.3.0",
-            "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-            "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+            "version": "6.3.1",
+            "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+            "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
             "dev": true,
             "bin": {
                 "semver": "bin/semver.js"
@@ -22324,9 +22334,9 @@
             }
         },
         "node_modules/tough-cookie": {
-            "version": "4.1.2",
-            "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.2.tgz",
-            "integrity": "sha512-G9fqXWoYFZgTc2z8Q5zaHy/vJMjm+WV0AkAeHxVCQiEB1b+dGvWzFW6QV07cY5jQ5gRkeid2qIkzkxUnmoQZUQ==",
+            "version": "4.1.3",
+            "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.3.tgz",
+            "integrity": "sha512-aX/y5pVRkfRnfmuX+OdbSdXvPe6ieKX/G2s7e98f4poJHnqH3281gDPm/metm6E/WRamfx7WC4HUqkWHfQHprw==",
             "dev": true,
             "dependencies": {
                 "psl": "^1.1.33",
@@ -22424,9 +22434,9 @@
             }
         },
         "node_modules/ts-jest/node_modules/semver": {
-            "version": "7.3.8",
-            "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
-            "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
+            "version": "7.5.4",
+            "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+            "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
             "dev": true,
             "dependencies": {
                 "lru-cache": "^6.0.0"
@@ -24143,9 +24153,9 @@
             "dev": true
         },
         "node_modules/word-wrap": {
-            "version": "1.2.3",
-            "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
-            "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==",
+            "version": "1.2.5",
+            "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
+            "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
             "engines": {
                 "node": ">=0.10.0"
             }
@@ -24348,9 +24358,9 @@
     },
     "dependencies": {
         "@adobe/css-tools": {
-            "version": "4.2.0",
-            "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.2.0.tgz",
-            "integrity": "sha512-E09FiIft46CmH5Qnjb0wsW54/YQd69LsxeKUOWawmws1XWvyFGURnAChH0mlr7YPFR1ofwvUQfcL0J3lMxXqPA==",
+            "version": "4.3.1",
+            "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.3.1.tgz",
+            "integrity": "sha512-/62yikz7NLScCGAAST5SHdnjaDJQBDq0M2muyRTpf2VQhw6StBg2ALiu73zSJQ4fMVLA+0uBhBHAle7Wg+2kSg==",
             "dev": true
         },
         "@aics/simularium-viewer": {
@@ -27398,9 +27408,9 @@
             },
             "dependencies": {
                 "semver": {
-                    "version": "7.3.8",
-                    "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
-                    "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
+                    "version": "7.5.4",
+                    "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+                    "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
                     "dev": true,
                     "requires": {
                         "lru-cache": "^6.0.0"
@@ -27464,9 +27474,9 @@
             },
             "dependencies": {
                 "semver": {
-                    "version": "7.3.8",
-                    "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
-                    "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
+                    "version": "7.5.4",
+                    "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+                    "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
                     "dev": true,
                     "requires": {
                         "lru-cache": "^6.0.0"
@@ -27491,9 +27501,9 @@
             },
             "dependencies": {
                 "semver": {
-                    "version": "7.3.8",
-                    "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
-                    "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
+                    "version": "7.5.4",
+                    "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+                    "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
                     "dev": true,
                     "requires": {
                         "lru-cache": "^6.0.0"
@@ -28160,9 +28170,9 @@
                     "dev": true
                 },
                 "semver": {
-                    "version": "7.3.8",
-                    "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
-                    "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
+                    "version": "7.5.4",
+                    "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+                    "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
                     "dev": true,
                     "requires": {
                         "lru-cache": "^6.0.0"
@@ -29407,9 +29417,9 @@
             },
             "dependencies": {
                 "semver": {
-                    "version": "7.3.8",
-                    "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
-                    "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
+                    "version": "7.5.4",
+                    "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+                    "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
                     "dev": true,
                     "requires": {
                         "lru-cache": "^6.0.0"
@@ -30860,9 +30870,9 @@
                     "dev": true
                 },
                 "semver": {
-                    "version": "7.3.8",
-                    "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
-                    "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
+                    "version": "7.5.4",
+                    "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+                    "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
                     "dev": true,
                     "requires": {
                         "lru-cache": "^6.0.0"
@@ -31098,9 +31108,9 @@
                     "dev": true
                 },
                 "semver": {
-                    "version": "5.7.1",
-                    "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-                    "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+                    "version": "5.7.2",
+                    "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+                    "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
                     "dev": true
                 },
                 "shebang-command": {
@@ -31755,9 +31765,9 @@
                     "dev": true
                 },
                 "semver": {
-                    "version": "7.3.8",
-                    "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
-                    "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
+                    "version": "7.5.4",
+                    "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+                    "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
                     "dev": true,
                     "requires": {
                         "lru-cache": "^6.0.0"
@@ -34898,9 +34908,9 @@
                     "dev": true
                 },
                 "semver": {
-                    "version": "7.3.8",
-                    "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
-                    "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
+                    "version": "7.5.4",
+                    "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+                    "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
                     "dev": true,
                     "requires": {
                         "lru-cache": "^6.0.0"
@@ -35758,9 +35768,9 @@
             },
             "dependencies": {
                 "semver": {
-                    "version": "5.7.1",
-                    "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-                    "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+                    "version": "5.7.2",
+                    "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+                    "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
                     "dev": true
                 }
             }
@@ -36359,9 +36369,9 @@
             "integrity": "sha512-TvmkNhkv8yct0SVBSy+o8wYzXjE4Zz3PCesbfs8HiCXXdcTuocApFv11UWlNFWKYsP2okqrhb7JNlSm9InBhIw=="
         },
         "nanoid": {
-            "version": "3.3.4",
-            "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
-            "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
+            "version": "3.3.6",
+            "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
+            "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
             "dev": true
         },
         "nanomatch": {
@@ -36571,9 +36581,9 @@
             },
             "dependencies": {
                 "semver": {
-                    "version": "5.7.1",
-                    "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-                    "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+                    "version": "5.7.2",
+                    "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+                    "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
                     "dev": true
                 }
             }
@@ -37310,12 +37320,12 @@
             "dev": true
         },
         "postcss": {
-            "version": "8.4.21",
-            "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz",
-            "integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==",
+            "version": "8.4.31",
+            "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+            "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
             "dev": true,
             "requires": {
-                "nanoid": "^3.3.4",
+                "nanoid": "^3.3.6",
                 "picocolors": "^1.0.0",
                 "source-map-js": "^1.0.2"
             }
@@ -37507,9 +37517,9 @@
             },
             "dependencies": {
                 "semver": {
-                    "version": "7.3.8",
-                    "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
-                    "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
+                    "version": "7.5.4",
+                    "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+                    "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
                     "dev": true,
                     "requires": {
                         "lru-cache": "^6.0.0"
@@ -39643,9 +39653,9 @@
             }
         },
         "semver": {
-            "version": "6.3.0",
-            "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-            "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+            "version": "6.3.1",
+            "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+            "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
             "dev": true
         },
         "semver-compare": {
@@ -41146,9 +41156,9 @@
             "dev": true
         },
         "tough-cookie": {
-            "version": "4.1.2",
-            "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.2.tgz",
-            "integrity": "sha512-G9fqXWoYFZgTc2z8Q5zaHy/vJMjm+WV0AkAeHxVCQiEB1b+dGvWzFW6QV07cY5jQ5gRkeid2qIkzkxUnmoQZUQ==",
+            "version": "4.1.3",
+            "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.3.tgz",
+            "integrity": "sha512-aX/y5pVRkfRnfmuX+OdbSdXvPe6ieKX/G2s7e98f4poJHnqH3281gDPm/metm6E/WRamfx7WC4HUqkWHfQHprw==",
             "dev": true,
             "requires": {
                 "psl": "^1.1.33",
@@ -41205,9 +41215,9 @@
             },
             "dependencies": {
                 "semver": {
-                    "version": "7.3.8",
-                    "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
-                    "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
+                    "version": "7.5.4",
+                    "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+                    "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
                     "dev": true,
                     "requires": {
                         "lru-cache": "^6.0.0"
@@ -42474,9 +42484,9 @@
             "dev": true
         },
         "word-wrap": {
-            "version": "1.2.3",
-            "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
-            "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ=="
+            "version": "1.2.5",
+            "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
+            "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA=="
         },
         "wordwrap": {
             "version": "1.0.0",

From 72f1a233d73b64eabc86b30426cace6c727bee2c Mon Sep 17 00:00:00 2001
From: Megan Riel-Mehan <meganrm@gmail.com>
Date: Mon, 9 Oct 2023 12:57:08 -0700
Subject: [PATCH 13/27] change check for if a file is shareable (#439)

* change check for if a file is shareable

* use constant for trajFileName

* use selector instead of type guard

* add unit test

* remove accidental auto import
---
 .../DownloadTrajectoryMenu/index.tsx          | 13 +++++----
 .../ShareTrajectoryButton/index.tsx           | 11 +++-----
 src/components/ShareTrajectoryModal/index.tsx | 22 +++++++--------
 src/components/ViewerTitle/index.tsx          |  6 ++++-
 src/containers/AppHeader/index.tsx            |  5 ++++
 src/state/trajectory/types.ts                 |  1 +
 src/util/test/index.test.ts                   | 24 ++++++++++++++++-
 src/util/userUrlHandling.ts                   | 27 ++++++++++++-------
 8 files changed, 73 insertions(+), 36 deletions(-)

diff --git a/src/components/DownloadTrajectoryMenu/index.tsx b/src/components/DownloadTrajectoryMenu/index.tsx
index 9908711a2..1ff696a02 100644
--- a/src/components/DownloadTrajectoryMenu/index.tsx
+++ b/src/components/DownloadTrajectoryMenu/index.tsx
@@ -3,23 +3,21 @@ import { Button, Tooltip } from "antd";
 import { ISimulariumFile } from "@aics/simularium-viewer/type-declarations";
 
 import { DATA_BUCKET_URL, TOOLTIP_COLOR } from "../../constants";
-import {
-    NetworkedSimFile,
-    LocalSimFile,
-    isNetworkSimFileInterface,
-} from "../../state/trajectory/types";
+import { NetworkedSimFile, LocalSimFile } from "../../state/trajectory/types";
 import { Download } from "../Icons";
 
 import styles from "./style.css";
 
 interface DownloadTrajectoryMenuProps {
     isBuffering: boolean;
+    isNetworkedFile: boolean;
     simulariumFile: LocalSimFile | NetworkedSimFile;
 }
 
 const DownloadTrajectoryMenu = ({
     isBuffering,
     simulariumFile,
+    isNetworkedFile,
 }: DownloadTrajectoryMenuProps): JSX.Element => {
     const fileIsLoaded = () => !!simulariumFile.name;
 
@@ -27,10 +25,11 @@ const DownloadTrajectoryMenu = ({
         if (!fileIsLoaded()) {
             return "";
         }
-        if (isNetworkSimFileInterface(simulariumFile)) {
+        if (isNetworkedFile) {
             return `${DATA_BUCKET_URL}/trajectory/${simulariumFile.name}`;
         } else {
-            const data: ISimulariumFile = simulariumFile.data;
+            const localFile = simulariumFile as LocalSimFile; // isNetworkedFile checks for this
+            const data: ISimulariumFile = localFile.data;
             const blob = data.getAsBlob();
             return URL.createObjectURL(blob);
         }
diff --git a/src/components/ShareTrajectoryButton/index.tsx b/src/components/ShareTrajectoryButton/index.tsx
index e26038f18..021675efa 100644
--- a/src/components/ShareTrajectoryButton/index.tsx
+++ b/src/components/ShareTrajectoryButton/index.tsx
@@ -2,15 +2,12 @@ import React from "react";
 import { Button, Tooltip } from "antd";
 
 import { TOOLTIP_COLOR } from "../../constants";
-import {
-    NetworkedSimFile,
-    LocalSimFile,
-    isLocalFileInterface,
-} from "../../state/trajectory/types";
+import { NetworkedSimFile, LocalSimFile } from "../../state/trajectory/types";
 import { Share } from "../Icons";
 import ShareTrajectoryModal from "../ShareTrajectoryModal";
 
 import styles from "./style.css";
+import { isOnlineTrajectory } from "../../util/userUrlHandling";
 
 interface ShareTrajectoryButtonProps {
     simulariumFile: LocalSimFile | NetworkedSimFile;
@@ -21,7 +18,7 @@ const ShareTrajectoryButton = ({
 }: ShareTrajectoryButtonProps): JSX.Element => {
     const [isSharing, setIsSharing] = React.useState(false);
 
-    const isLocalFile = isLocalFileInterface(simulariumFile);
+    const trajectoryIsSharable = isOnlineTrajectory(location.href);
 
     const handleShare = () => {
         setIsSharing(!isSharing);
@@ -42,7 +39,7 @@ const ShareTrajectoryButton = ({
                 {isSharing ? (
                     <div className={styles.overlay}>
                         <ShareTrajectoryModal
-                            isLocalFile={isLocalFile}
+                            trajectoryIsSharable={trajectoryIsSharable}
                             closeModal={handleShare}
                         />
                     </div>
diff --git a/src/components/ShareTrajectoryModal/index.tsx b/src/components/ShareTrajectoryModal/index.tsx
index da38ad2ea..e10c64d12 100644
--- a/src/components/ShareTrajectoryModal/index.tsx
+++ b/src/components/ShareTrajectoryModal/index.tsx
@@ -17,14 +17,14 @@ import styles from "./style.css";
 import theme from "../theme/light-theme.css";
 
 interface ShareTrajectoryModalProps {
-    isLocalFile: boolean;
+    trajectoryIsSharable: boolean;
     closeModal: () => void;
     timeUnits: TimeUnits;
     displayTimes: DisplayTimes;
 }
 
 const ShareTrajectoryModal = ({
-    isLocalFile,
+    trajectoryIsSharable,
     closeModal,
     timeUnits,
     displayTimes,
@@ -102,7 +102,7 @@ const ShareTrajectoryModal = ({
     };
 
     const modalOptions = {
-        localFile: {
+        errorMessage: {
             content: (
                 <>
                     <h4>{Warn} The current file is stored on your device.</h4>
@@ -134,7 +134,7 @@ const ShareTrajectoryModal = ({
                 </Button>
             ),
         },
-        networkedFile: {
+        isSharable: {
             content: (
                 <>
                     <div>
@@ -177,20 +177,20 @@ const ShareTrajectoryModal = ({
         <CustomModal
             className={classNames(styles.uploadModal, theme.lightTheme)}
             title="Share Trajectory"
-            width={isLocalFile ? 611 : 550}
+            width={trajectoryIsSharable ? 550 : 611}
             onCancel={closeModal}
             mask={false}
             centered
             open
             footer={
-                isLocalFile
-                    ? modalOptions.localFile.footer
-                    : modalOptions.networkedFile.footer
+                trajectoryIsSharable
+                    ? modalOptions.isSharable.footer
+                    : modalOptions.errorMessage.footer
             }
         >
-            {isLocalFile
-                ? modalOptions.localFile.content
-                : modalOptions.networkedFile.content}
+            {trajectoryIsSharable
+                ? modalOptions.isSharable.content
+                : modalOptions.errorMessage.content}
             <Divider />
         </CustomModal>
     );
diff --git a/src/components/ViewerTitle/index.tsx b/src/components/ViewerTitle/index.tsx
index 9df3e7dfa..e2f370f62 100644
--- a/src/components/ViewerTitle/index.tsx
+++ b/src/components/ViewerTitle/index.tsx
@@ -7,6 +7,7 @@ import { VIEWER_PATHNAME } from "../../routes";
 import TRAJECTORIES from "../../constants/networked-trajectories";
 
 import styles from "./style.css";
+import { URL_PARAM_KEY_FILE_NAME } from "../../constants";
 
 interface ViewerTitleProps {
     simulariumFileName: string;
@@ -27,7 +28,10 @@ const ViewerTitle: React.FunctionComponent<ViewerTitleProps> = (
     // networked-trajectories.ts to get its version info
     // TODO: Eventually we should put all the contents of networked-trajectories.ts in the
     // Simularium files themselves
-    const trajectoryId = location.search.replace("?trajFileName=", "");
+    const trajectoryId = location.search.replace(
+        `?${URL_PARAM_KEY_FILE_NAME}=`,
+        ""
+    );
     const currentTrajectory = TRAJECTORIES.find(
         (trajectory) => trajectory.id === trajectoryId
     );
diff --git a/src/containers/AppHeader/index.tsx b/src/containers/AppHeader/index.tsx
index 85f7a220f..57aef1852 100644
--- a/src/containers/AppHeader/index.tsx
+++ b/src/containers/AppHeader/index.tsx
@@ -31,6 +31,7 @@ import DownloadTrajectoryMenu from "../../components/DownloadTrajectoryMenu";
 interface AppHeaderProps {
     simulariumFile: LocalSimFile | NetworkedSimFile;
     isBuffering: boolean;
+    isNetworkedFile: boolean;
     clearSimulariumFile: ActionCreator<ClearSimFileDataAction>;
     changeToLocalSimulariumFile: ActionCreator<RequestLocalFileAction>;
     changeToNetworkedFile: ActionCreator<RequestNetworkFileAction>;
@@ -48,6 +49,7 @@ class AppHeader extends React.Component<AppHeaderProps> {
             setViewerStatus,
             clearSimulariumFile,
             setError,
+            isNetworkedFile,
         } = this.props;
         let lastModified = 0;
         let displayName = "";
@@ -89,6 +91,7 @@ class AppHeader extends React.Component<AppHeaderProps> {
                     <DownloadTrajectoryMenu
                         isBuffering={isBuffering}
                         simulariumFile={simulariumFile}
+                        isNetworkedFile={isNetworkedFile}
                     />
                 </div>
             </div>
@@ -101,6 +104,8 @@ function mapStateToProps(state: State) {
         simulariumFile:
             trajectoryStateBranch.selectors.getSimulariumFile(state),
         isBuffering: viewerStateBranch.selectors.getIsBuffering(state),
+        isNetworkedFile:
+            trajectoryStateBranch.selectors.getIsNetworkedFile(state),
     };
 }
 
diff --git a/src/state/trajectory/types.ts b/src/state/trajectory/types.ts
index d05b58504..f0238d050 100644
--- a/src/state/trajectory/types.ts
+++ b/src/state/trajectory/types.ts
@@ -60,6 +60,7 @@ export interface NetworkedSimFile {
 }
 export const isLocalFileInterface = (file: any): file is LocalSimFile =>
     !!file.lastModified;
+
 export const isNetworkSimFileInterface = (
     file: any
 ): file is NetworkedSimFile => !!file.title;
diff --git a/src/util/test/index.test.ts b/src/util/test/index.test.ts
index 0352c4910..cdb7040b2 100644
--- a/src/util/test/index.test.ts
+++ b/src/util/test/index.test.ts
@@ -1,6 +1,10 @@
 import * as React from "react";
 
-import { USER_TRAJ_REDIRECTS } from "../../constants";
+import {
+    URL_PARAM_KEY_FILE_NAME,
+    URL_PARAM_KEY_USER_URL,
+    USER_TRAJ_REDIRECTS,
+} from "../../constants";
 import {
     bindAll,
     convertToSentenceCase,
@@ -16,6 +20,7 @@ import {
     getRedirectUrl,
     getUserTrajectoryUrl,
     isGoogleDriveUrl,
+    isOnlineTrajectory,
     urlCheck,
 } from "../userUrlHandling";
 
@@ -373,4 +378,21 @@ describe("User Url handling", () => {
             expect(result).toEqual("dl.dropboxusercontent.com/path");
         });
     });
+    describe("isOnlineTrajectory", () => {
+        it("it returns true if the trajectory is hosted online", () => {
+            const cloudTrajectoryUrl = `simularium?${URL_PARAM_KEY_USER_URL}=url`;
+            const result = isOnlineTrajectory(cloudTrajectoryUrl);
+            expect(result).toBeTruthy;
+        });
+        it("true if the trajectory is one of our networked models", () => {
+            const networkedUrl = `simularium?${URL_PARAM_KEY_FILE_NAME}=url`;
+            const result = isOnlineTrajectory(networkedUrl);
+            expect(result).toBeTruthy;
+        });
+        it("it returns false if no relevant url params are present", () => {
+            const url = `simularium?other_url_param=value`;
+            const result = isOnlineTrajectory(url);
+            expect(result).toBeFalsy;
+        });
+    });
 });
diff --git a/src/util/userUrlHandling.ts b/src/util/userUrlHandling.ts
index ea827b83f..26a85e8f6 100644
--- a/src/util/userUrlHandling.ts
+++ b/src/util/userUrlHandling.ts
@@ -1,8 +1,13 @@
 import { isString } from "lodash";
 
-import { USER_TRAJ_REDIRECTS } from "../constants";
+import {
+    URL_PARAM_KEY_FILE_NAME,
+    URL_PARAM_KEY_USER_URL,
+    USER_TRAJ_REDIRECTS,
+} from "../constants";
 
-const googleDriveUrlRegEx = /(?:drive.google\.com\/file\/d\/)(.*)(?=\/)|(?:drive.google\.com\/file\/d\/)(.*)/g;
+const googleDriveUrlRegEx =
+    /(?:drive.google\.com\/file\/d\/)(.*)(?=\/)|(?:drive.google\.com\/file\/d\/)(.*)/g;
 const googleDriveUrlExcludingIdRegEx = /(drive.google\.com\/file\/d\/)(?=.*)/g;
 
 export const urlCheck = (urlToCheck: any): string => {
@@ -14,7 +19,8 @@ export const urlCheck = (urlToCheck: any): string => {
      * I had to modify the original to allow s3 buckets which have multiple `.letters-letters.` in them
      * and I made the http(s) required
      */
-    const regEx = /(https?:\/\/)([\w\-]){0,200}(\.[a-zA-Z][^\-])([\/\w]*)*\/?\??([^\n\r]*)?([^\n\r]*)/g;
+    const regEx =
+        /(https?:\/\/)([\w\-]){0,200}(\.[a-zA-Z][^\-])([\/\w]*)*\/?\??([^\n\r]*)?([^\n\r]*)/g;
     if (regEx.test(urlToCheck)) {
         return urlToCheck;
     }
@@ -68,18 +74,14 @@ export const getFileIdFromUrl = (
 export const getRedirectUrl = (url: string, fileName: string | undefined) => {
     if (url && fileName && USER_TRAJ_REDIRECTS.includes(url)) {
         // ex) simularium.allencell.org/viewer?trajFileName=endocytosis.simularium
-        return `${location.origin}${
-            location.pathname
-        }?trajFileName=${fileName}`;
+        return `${location.origin}${location.pathname}?${URL_PARAM_KEY_FILE_NAME}=${fileName}`;
     } else {
         return "";
     }
 };
 
 export const getGoogleApiUrl = (id: string) => {
-    return `https://www.googleapis.com/drive/v2/files/${id}?alt=media&key=${
-        process.env.GOOGLE_API_KEY
-    }`;
+    return `https://www.googleapis.com/drive/v2/files/${id}?alt=media&key=${process.env.GOOGLE_API_KEY}`;
 };
 
 export const getUserTrajectoryUrl = (url: string, fileId?: string) => {
@@ -89,3 +91,10 @@ export const getUserTrajectoryUrl = (url: string, fileId?: string) => {
         return url.replace("dropbox.com", "dl.dropboxusercontent.com");
     }
 };
+
+export const isOnlineTrajectory = (url: string) => {
+    return (
+        url.includes(URL_PARAM_KEY_USER_URL) ||
+        url.includes(URL_PARAM_KEY_FILE_NAME)
+    );
+};

From 60326cfa9649737d21bae5388626c5fd1bfa0d65 Mon Sep 17 00:00:00 2001
From: Lyndsay <93954795+lynwilhelm@users.noreply.github.com>
Date: Mon, 9 Oct 2023 12:57:20 -0700
Subject: [PATCH 14/27] Update ux_issue.md (#433)

---
 .github/ISSUE_TEMPLATE/ux_issue.md | 41 ++++++++++--------------------
 1 file changed, 14 insertions(+), 27 deletions(-)

diff --git a/.github/ISSUE_TEMPLATE/ux_issue.md b/.github/ISSUE_TEMPLATE/ux_issue.md
index 1b085a6d6..7364f6e19 100644
--- a/.github/ISSUE_TEMPLATE/ux_issue.md
+++ b/.github/ISSUE_TEMPLATE/ux_issue.md
@@ -1,40 +1,27 @@
 ---
-name: Usability Issue/Improvement
-about: '"UX work to be done"'
+name: UX Issue
+about: 'UX work to be done'
 title: ''
 labels: ux
 assignees: ''
 
 ---
 
-### Background
-_Context, goals, known challenges, technical risks, unknowns, etc_
+### Description
+- _Type of UX work needed (research, discovery and/or design_
+- _Problem(s) to solve_
 
-### User needs statement(s)
-As a _[type of user]_, I need/want to _[action(s)]_, so that I can _[goal]_.
+***
+_Below to be filled out by UX during kickoff Q&A to the best of current understanding_
 
 ### Size
-_Expected level of user research, discovery and design effort (xs, sm, m, lg, xl)_
-
-### Requirements
-_Examples:_
-- _UI for ability to add, edit, and save_
-- _Error messaging for error states_
-- _Solution for responsive design on small screen sizes_
-- _Align new feature to exising style_
-
-### Deliverables
-_Examples:_
-- _High-fi designs + dev specifications_
-- _Interactive prototype (for testing)_
-- _User testing and analysis of findings before implementation_
+_Effort level (xs, sm, m, lg, xl)_
 
-### Stakeholder(s)
-_Who is directly involved? (developers, main points of contact, final approver)_
+### Scope
+_What will we do? What will we NOT do?_
 
-### Timeline
-_Add completion date to ticket and any time specific notes here_
-
-### Notes
-_Additional notes here_
+### User needs statement(s)
+As a _[type of user]_, I need/want to _[action(s)]_, so that I can _[goal]_.
 
+### Additional notes
+_Knowns/unknowns, stakeholders, time/dependency considerations, deliverables_

From 3e9d57898ff065c37ea5bc2dcacf9deda19442af Mon Sep 17 00:00:00 2001
From: Joe Heffernan <interim17@gmail.com>
Date: Tue, 23 May 2023 10:56:42 -0700
Subject: [PATCH 15/27] menu item and modal

---
 src/components/HelpMenu/index.tsx     | 18 +++++++++
 src/components/VersionModal/index.tsx | 57 +++++++++++++++++++++++++++
 src/components/VersionModal/style.css | 12 ++++++
 3 files changed, 87 insertions(+)
 create mode 100644 src/components/VersionModal/index.tsx
 create mode 100644 src/components/VersionModal/style.css

diff --git a/src/components/HelpMenu/index.tsx b/src/components/HelpMenu/index.tsx
index 32b559c1b..e90027590 100644
--- a/src/components/HelpMenu/index.tsx
+++ b/src/components/HelpMenu/index.tsx
@@ -13,6 +13,8 @@ import {
 
 import styles from "./style.css";
 
+import VersionModal from "../VersionModal";
+
 const HelpMenu = (): JSX.Element => {
     const location = useLocation();
     const tutorialLink =
@@ -27,8 +29,15 @@ const HelpMenu = (): JSX.Element => {
         ) : (
             <Link to={TUTORIAL_PATHNAME}>Quick start</Link>
         );
+
+    const [modalVisible, setModalVisible] = React.useState(false);
+
     const menu = (
         <Menu theme="dark" className={styles.menu}>
+            {/* <VersionModal /> */}
+            {modalVisible ? (
+                <VersionModal setModalVisible={setModalVisible} />
+            ) : null}
             <Menu.Item key="tutorial">{tutorialLink}</Menu.Item>
             <Menu.Item key="forum">
                 <a href={FORUM_URL} target="_blank" rel="noopener noreferrer">
@@ -65,6 +74,15 @@ const HelpMenu = (): JSX.Element => {
                     </a>
                 </Menu.Item>
             </Menu.SubMenu>
+            <Menu.Item
+                key="version"
+                onClick={() => {
+                    console.log("firing");
+                    setModalVisible(!modalVisible);
+                }}
+            >
+                <>Version Info</>
+            </Menu.Item>
         </Menu>
     );
 
diff --git a/src/components/VersionModal/index.tsx b/src/components/VersionModal/index.tsx
new file mode 100644
index 000000000..57514aeb9
--- /dev/null
+++ b/src/components/VersionModal/index.tsx
@@ -0,0 +1,57 @@
+import { Button } from "antd";
+import React from "react";
+
+import CustomModal from "../CustomModal";
+
+import styles from "./style.css";
+
+interface VersionModalProps {
+    setModalVisible: (isModalVisible: boolean) => void;
+}
+
+const VersionModal: React.FC<VersionModalProps> = ({ setModalVisible }) => {
+    const closeModal = () => {
+        setModalVisible(false);
+    };
+
+    const footerButton = (
+        <>
+            <Button type="primary" onClick={closeModal}>
+                Close
+            </Button>
+        </>
+    );
+    console.log("VersionModal");
+    return (
+        <CustomModal
+            className={styles.container}
+            onCancel={closeModal}
+            open
+            footer={footerButton}
+            centered
+            title="Version Info"
+            width={425}
+        >
+            <div>
+                {" "}
+                Application:{" "}
+                <span className={styles.blueText}>
+                    {" "}
+                    simularium-website v{SIMULARIUM_WEBSITE_VERSION}{" "}
+                </span>
+            </div>
+            <div>
+                {" "}
+                Viewer:{" "}
+                <span className={styles.blueText}>
+                    {" "}
+                    simulairum-viewer v{SIMULARIUM_VIEWER_VERSION}{" "}
+                </span>
+            </div>
+            {/* TODO what should this content be */}
+            <span> Engine: not connected to server </span>
+        </CustomModal>
+    );
+};
+
+export default VersionModal;
diff --git a/src/components/VersionModal/style.css b/src/components/VersionModal/style.css
new file mode 100644
index 000000000..00499ca7a
--- /dev/null
+++ b/src/components/VersionModal/style.css
@@ -0,0 +1,12 @@
+
+.blue-text {
+    color: var(--blue);
+}
+
+.container :global(.ant-modal-footer) {
+    background-color: var(--modal-content-bg);
+}
+
+.container :global(.ant-modal-body) {
+    padding: 12px 12px 0px 12px;
+}
\ No newline at end of file

From dcff5c8b8fd4842b72e53e100c76e1b79d23c178 Mon Sep 17 00:00:00 2001
From: Joe Heffernan <interim17@gmail.com>
Date: Thu, 1 Jun 2023 11:27:55 -0700
Subject: [PATCH 16/27] removing logs

---
 src/components/HelpMenu/index.tsx     | 1 -
 src/components/VersionModal/index.tsx | 5 ++---
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/HelpMenu/index.tsx b/src/components/HelpMenu/index.tsx
index e90027590..7951e87dc 100644
--- a/src/components/HelpMenu/index.tsx
+++ b/src/components/HelpMenu/index.tsx
@@ -77,7 +77,6 @@ const HelpMenu = (): JSX.Element => {
             <Menu.Item
                 key="version"
                 onClick={() => {
-                    console.log("firing");
                     setModalVisible(!modalVisible);
                 }}
             >
diff --git a/src/components/VersionModal/index.tsx b/src/components/VersionModal/index.tsx
index 57514aeb9..05a7a614b 100644
--- a/src/components/VersionModal/index.tsx
+++ b/src/components/VersionModal/index.tsx
@@ -21,7 +21,6 @@ const VersionModal: React.FC<VersionModalProps> = ({ setModalVisible }) => {
             </Button>
         </>
     );
-    console.log("VersionModal");
     return (
         <CustomModal
             className={styles.container}
@@ -48,8 +47,8 @@ const VersionModal: React.FC<VersionModalProps> = ({ setModalVisible }) => {
                     simulairum-viewer v{SIMULARIUM_VIEWER_VERSION}{" "}
                 </span>
             </div>
-            {/* TODO what should this content be */}
-            <span> Engine: not connected to server </span>
+            {/* TODO add enginge when we switch to Octopus?/}
+            {/* <span> Engine: not connected to server </span> */}
         </CustomModal>
     );
 };

From 72c2e8d2ab548ee36829775a608e0dda5d3116f4 Mon Sep 17 00:00:00 2001
From: Joe Heffernan <interim17@gmail.com>
Date: Mon, 9 Oct 2023 14:10:35 -0700
Subject: [PATCH 17/27] remove unneeded jsx fragment wrappers

---
 src/components/VersionModal/index.tsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/components/VersionModal/index.tsx b/src/components/VersionModal/index.tsx
index 05a7a614b..062ad115d 100644
--- a/src/components/VersionModal/index.tsx
+++ b/src/components/VersionModal/index.tsx
@@ -15,12 +15,11 @@ const VersionModal: React.FC<VersionModalProps> = ({ setModalVisible }) => {
     };
 
     const footerButton = (
-        <>
-            <Button type="primary" onClick={closeModal}>
-                Close
-            </Button>
-        </>
+        <Button type="primary" onClick={closeModal}>
+            Close
+        </Button>
     );
+
     return (
         <CustomModal
             className={styles.container}

From 4c215c7ab876e546ec546b3712d88a83cfa79393 Mon Sep 17 00:00:00 2001
From: Joe Heffernan <interim17@gmail.com>
Date: Mon, 9 Oct 2023 14:14:01 -0700
Subject: [PATCH 18/27] remove commented code

---
 src/components/HelpMenu/index.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/HelpMenu/index.tsx b/src/components/HelpMenu/index.tsx
index 7951e87dc..524c734c9 100644
--- a/src/components/HelpMenu/index.tsx
+++ b/src/components/HelpMenu/index.tsx
@@ -34,7 +34,6 @@ const HelpMenu = (): JSX.Element => {
 
     const menu = (
         <Menu theme="dark" className={styles.menu}>
-            {/* <VersionModal /> */}
             {modalVisible ? (
                 <VersionModal setModalVisible={setModalVisible} />
             ) : null}

From 8dcccc1a3688e7528923670aa8f0611ae7283376 Mon Sep 17 00:00:00 2001
From: Joe Heffernan <interim17@gmail.com>
Date: Mon, 9 Oct 2023 14:34:28 -0700
Subject: [PATCH 19/27] styling update

---
 src/components/HelpMenu/index.tsx     |  2 +-
 src/components/VersionModal/index.tsx |  2 +-
 src/components/VersionModal/style.css | 14 ++++++++++----
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/components/HelpMenu/index.tsx b/src/components/HelpMenu/index.tsx
index 524c734c9..a576d3531 100644
--- a/src/components/HelpMenu/index.tsx
+++ b/src/components/HelpMenu/index.tsx
@@ -79,7 +79,7 @@ const HelpMenu = (): JSX.Element => {
                     setModalVisible(!modalVisible);
                 }}
             >
-                <>Version Info</>
+                <>Version info</>
             </Menu.Item>
         </Menu>
     );
diff --git a/src/components/VersionModal/index.tsx b/src/components/VersionModal/index.tsx
index 062ad115d..1fb55901a 100644
--- a/src/components/VersionModal/index.tsx
+++ b/src/components/VersionModal/index.tsx
@@ -27,7 +27,7 @@ const VersionModal: React.FC<VersionModalProps> = ({ setModalVisible }) => {
             open
             footer={footerButton}
             centered
-            title="Version Info"
+            title="Version Information"
             width={425}
         >
             <div>
diff --git a/src/components/VersionModal/style.css b/src/components/VersionModal/style.css
index 00499ca7a..90d9306a1 100644
--- a/src/components/VersionModal/style.css
+++ b/src/components/VersionModal/style.css
@@ -1,12 +1,18 @@
-
-.blue-text {
+.container .blue-text {
     color: var(--blue);
 }
 
-.container :global(.ant-modal-footer) {
-    background-color: var(--modal-content-bg);
+.container :global(.ant-modal-header) {
+    padding: 12px 24px;
+}
+.container :global(.ant-modal-title) {
+    font-weight: 400;
 }
 
 .container :global(.ant-modal-body) {
     padding: 12px 12px 0px 12px;
+}
+
+.container :global(.ant-modal-footer) {
+    background-color: var(--modal-content-bg);
 }
\ No newline at end of file

From 141b0370f42b3ee2b4345d56fe2e4db9e6fff2ab Mon Sep 17 00:00:00 2001
From: Joe Heffernan <interim17@gmail.com>
Date: Mon, 9 Oct 2023 14:34:44 -0700
Subject: [PATCH 20/27] remove comments

---
 src/components/VersionModal/index.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/VersionModal/index.tsx b/src/components/VersionModal/index.tsx
index 1fb55901a..04da902a2 100644
--- a/src/components/VersionModal/index.tsx
+++ b/src/components/VersionModal/index.tsx
@@ -46,8 +46,6 @@ const VersionModal: React.FC<VersionModalProps> = ({ setModalVisible }) => {
                     simulairum-viewer v{SIMULARIUM_VIEWER_VERSION}{" "}
                 </span>
             </div>
-            {/* TODO add enginge when we switch to Octopus?/}
-            {/* <span> Engine: not connected to server </span> */}
         </CustomModal>
     );
 };

From 23be0d4f7ed526a3853889940727a9dd21cbbc19 Mon Sep 17 00:00:00 2001
From: Joe Heffernan <interim17@gmail.com>
Date: Mon, 9 Oct 2023 15:27:12 -0700
Subject: [PATCH 21/27] typo

---
 src/components/VersionModal/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/VersionModal/index.tsx b/src/components/VersionModal/index.tsx
index 04da902a2..61f847822 100644
--- a/src/components/VersionModal/index.tsx
+++ b/src/components/VersionModal/index.tsx
@@ -43,7 +43,7 @@ const VersionModal: React.FC<VersionModalProps> = ({ setModalVisible }) => {
                 Viewer:{" "}
                 <span className={styles.blueText}>
                     {" "}
-                    simulairum-viewer v{SIMULARIUM_VIEWER_VERSION}{" "}
+                    simularium-viewer v{SIMULARIUM_VIEWER_VERSION}{" "}
                 </span>
             </div>
         </CustomModal>

From caac57be991dc3dfaf79ff426e13ba6854c6ab03 Mon Sep 17 00:00:00 2001
From: Joe Heffernan <interim17@gmail.com>
Date: Tue, 10 Oct 2023 12:51:42 -0700
Subject: [PATCH 22/27] prevent bg color change after click

---
 src/components/HelpMenu/style.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/HelpMenu/style.css b/src/components/HelpMenu/style.css
index 3b9cd371d..260de5fa0 100644
--- a/src/components/HelpMenu/style.css
+++ b/src/components/HelpMenu/style.css
@@ -13,4 +13,8 @@
     width: fit-content;
     right: 160px !important;
     left: auto !important;
+}
+
+.menu :global(.ant-dropdown-menu-item-active){
+    background-color: transparent !important;
 }
\ No newline at end of file

From 836510a92366a61ef1dbc455f17838f92a638322 Mon Sep 17 00:00:00 2001
From: Joe Heffernan <interim17@gmail.com>
Date: Wed, 11 Oct 2023 11:47:54 -0700
Subject: [PATCH 23/27] Update src/components/HelpMenu/index.tsx

Co-authored-by: Megan Riel-Mehan <meganrm@gmail.com>
---
 src/components/HelpMenu/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/HelpMenu/index.tsx b/src/components/HelpMenu/index.tsx
index a576d3531..1eee77cb7 100644
--- a/src/components/HelpMenu/index.tsx
+++ b/src/components/HelpMenu/index.tsx
@@ -34,9 +34,9 @@ const HelpMenu = (): JSX.Element => {
 
     const menu = (
         <Menu theme="dark" className={styles.menu}>
-            {modalVisible ? (
+            {modalVisible && (
                 <VersionModal setModalVisible={setModalVisible} />
-            ) : null}
+            )}
             <Menu.Item key="tutorial">{tutorialLink}</Menu.Item>
             <Menu.Item key="forum">
                 <a href={FORUM_URL} target="_blank" rel="noopener noreferrer">

From ca5ac248433cc26a66fa09a546332cae8d80c2b5 Mon Sep 17 00:00:00 2001
From: Megan Riel-Mehan <meganrm@gmail.com>
Date: Mon, 16 Oct 2023 10:41:45 -0700
Subject: [PATCH 24/27] fix menus offsets (#440)

* fix menus offsets

* move version info
---
 src/components/HelpMenu/index.tsx     | 124 +++++++++++++++-----------
 src/components/HelpMenu/style.css     |   2 -
 src/components/LoadFileMenu/style.css |   2 -
 3 files changed, 71 insertions(+), 57 deletions(-)

diff --git a/src/components/HelpMenu/index.tsx b/src/components/HelpMenu/index.tsx
index 1eee77cb7..10ca28dac 100644
--- a/src/components/HelpMenu/index.tsx
+++ b/src/components/HelpMenu/index.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import { useLocation, Link } from "react-router-dom";
-import { Menu, Dropdown, Button } from "antd";
+import { Dropdown, Button, MenuProps } from "antd";
 
 import { TUTORIAL_PATHNAME } from "../../routes";
 import { DownArrow } from "../Icons";
@@ -16,6 +16,8 @@ import styles from "./style.css";
 import VersionModal from "../VersionModal";
 
 const HelpMenu = (): JSX.Element => {
+    const [modalVisible, setModalVisible] = React.useState(false);
+
     const location = useLocation();
     const tutorialLink =
         location.pathname === "/viewer" ? (
@@ -30,66 +32,82 @@ const HelpMenu = (): JSX.Element => {
             <Link to={TUTORIAL_PATHNAME}>Quick start</Link>
         );
 
-    const [modalVisible, setModalVisible] = React.useState(false);
-
-    const menu = (
-        <Menu theme="dark" className={styles.menu}>
-            {modalVisible && (
-                <VersionModal setModalVisible={setModalVisible} />
-            )}
-            <Menu.Item key="tutorial">{tutorialLink}</Menu.Item>
-            <Menu.Item key="forum">
+    const items: MenuProps["items"] = [
+        {
+            key: "tutorial",
+            label: tutorialLink,
+        },
+        {
+            key: "forum",
+            label: (
                 <a href={FORUM_URL} target="_blank" rel="noopener noreferrer">
                     Forum
                 </a>
-            </Menu.Item>
-            <Menu.Item key="github">
+            ),
+        },
+        {
+            key: "github",
+            label: (
                 <a href={GITHUB_URL} target="_blank" rel="noopener noreferrer">
                     GitHub
                 </a>
-            </Menu.Item>
-            <Menu.SubMenu
-                title="Submit issue"
-                popupClassName={styles.submenu}
-                popupOffset={[-0.45, -4]}
-                key="submit-issue"
-            >
-                <Menu.Item key="submit-issue-github">
-                    <a
-                        href={ISSUE_URL}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                    >
-                        via GitHub (preferred)
-                    </a>
-                </Menu.Item>
-                <Menu.Item key="web-form">
-                    <a
-                        href={FORUM_BUG_REPORT_URL}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                    >
-                        via Forum (for non-GitHub users)
-                    </a>
-                </Menu.Item>
-            </Menu.SubMenu>
-            <Menu.Item
-                key="version"
-                onClick={() => {
-                    setModalVisible(!modalVisible);
-                }}
-            >
-                <>Version info</>
-            </Menu.Item>
-        </Menu>
-    );
+            ),
+        },
+        {
+            key: "submit-issue",
+            label: "Submit issue",
+            popupClassName: styles.submenu,
+            popupOffset: [-0.45, -4],
+            children: [
+                {
+                    key: "via-github",
+                    label: (
+                        <a
+                            href={ISSUE_URL}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                        >
+                            via GitHub (preferred)
+                        </a>
+                    ),
+                },
+                {
+                    key: "via-forum",
+                    label: (
+                        <a
+                            href={FORUM_BUG_REPORT_URL}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                        >
+                            via Forum (for non-GitHub users)
+                        </a>
+                    ),
+                },
+            ],
+        },
+        {
+            key: "version",
+            label: (
+                <a
+                    onClick={() => {
+                        setModalVisible(!modalVisible);
+                    }}
+                >
+                    Version info
+                </a>
+            ),
+        },
+    ];
 
     return (
-        <Dropdown overlay={menu} placement="bottomRight">
-            <Button onClick={(e) => e.preventDefault()} type="ghost">
-                Help {DownArrow}
-            </Button>
-        </Dropdown>
+        <>
+            <Dropdown menu={{ items, theme: "dark", className: styles.menu }}>
+                <Button onClick={(e) => e.preventDefault()} type="ghost">
+                    Help {DownArrow}
+                </Button>
+            </Dropdown>
+            {modalVisible && <VersionModal setModalVisible={setModalVisible} />}
+        </>
     );
 };
 
diff --git a/src/components/HelpMenu/style.css b/src/components/HelpMenu/style.css
index 260de5fa0..3e4bb0605 100644
--- a/src/components/HelpMenu/style.css
+++ b/src/components/HelpMenu/style.css
@@ -11,8 +11,6 @@
     box-shadow: 0 1px 3px black;
     padding: 0;
     width: fit-content;
-    right: 160px !important;
-    left: auto !important;
 }
 
 .menu :global(.ant-dropdown-menu-item-active){
diff --git a/src/components/LoadFileMenu/style.css b/src/components/LoadFileMenu/style.css
index 7ba5c1b34..25a7889df 100644
--- a/src/components/LoadFileMenu/style.css
+++ b/src/components/LoadFileMenu/style.css
@@ -28,6 +28,4 @@
     box-shadow: 0 1px 3px black;
     padding: 0;
     width: fit-content;
-    right: 300px !important;
-    left: auto !important;
 }
\ No newline at end of file

From 4baff29420c6a06647a08b5c57e64ad88ad09a86 Mon Sep 17 00:00:00 2001
From: Blair Lyons <blair208@gmail.com>
Date: Thu, 19 Oct 2023 14:49:46 -0700
Subject: [PATCH 25/27] update viewer to 3.6.3

---
 package-lock.json | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 5cf084145..37b727768 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
             "version": "0.9.0",
             "license": "ISC",
             "dependencies": {
-                "@aics/simularium-viewer": "^3.6.2",
+                "@aics/simularium-viewer": "^3.6.3",
                 "@ant-design/css-animation": "^1.7.3",
                 "@ant-design/icons": "^4.0.6",
                 "antd": "^4.23.6",
@@ -111,9 +111,9 @@
             "dev": true
         },
         "node_modules/@aics/simularium-viewer": {
-            "version": "3.6.2",
-            "resolved": "https://registry.npmjs.org/@aics/simularium-viewer/-/simularium-viewer-3.6.2.tgz",
-            "integrity": "sha512-QTuxtExeqFYhAmfr4VFqpu9QKVqd0Vg1znaDFUyV4qGEr9W1hDlA2evxK3c3PXnNn/wNCWEE1SnrWRjSzjesIA==",
+            "version": "3.6.3",
+            "resolved": "https://registry.npmjs.org/@aics/simularium-viewer/-/simularium-viewer-3.6.3.tgz",
+            "integrity": "sha512-8g/DQqEip5MatFJE65jx+hQuKuesrKkpGu112ioEwPDn5TaqxbkGu2w1mhLNIquXUP7B72+UoEozAzcUmSFncA==",
             "dependencies": {
                 "@fortawesome/fontawesome-free": "^5.15.2",
                 "@fortawesome/fontawesome-svg-core": "~1.2.34",
@@ -24364,9 +24364,9 @@
             "dev": true
         },
         "@aics/simularium-viewer": {
-            "version": "3.6.2",
-            "resolved": "https://registry.npmjs.org/@aics/simularium-viewer/-/simularium-viewer-3.6.2.tgz",
-            "integrity": "sha512-QTuxtExeqFYhAmfr4VFqpu9QKVqd0Vg1znaDFUyV4qGEr9W1hDlA2evxK3c3PXnNn/wNCWEE1SnrWRjSzjesIA==",
+            "version": "3.6.3",
+            "resolved": "https://registry.npmjs.org/@aics/simularium-viewer/-/simularium-viewer-3.6.3.tgz",
+            "integrity": "sha512-8g/DQqEip5MatFJE65jx+hQuKuesrKkpGu112ioEwPDn5TaqxbkGu2w1mhLNIquXUP7B72+UoEozAzcUmSFncA==",
             "requires": {
                 "@fortawesome/fontawesome-free": "^5.15.2",
                 "@fortawesome/fontawesome-svg-core": "~1.2.34",

From f13dcb01b32c16f2d0f5853c7f890ab566a06244 Mon Sep 17 00:00:00 2001
From: Megan Riel-Mehan <meganrm@gmail.com>
Date: Fri, 20 Oct 2023 12:46:48 -0700
Subject: [PATCH 26/27] update viewer and fix types (#445)

---
 package.json                                 | 2 +-
 src/containers/ViewerPanel/selectors.test.ts | 1 +
 src/containers/ViewerPanel/selectors.ts      | 1 +
 3 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index f71e7e5a1..e835dcc80 100644
--- a/package.json
+++ b/package.json
@@ -92,7 +92,7 @@
         "webpack-dev-server": "^4.10.1"
     },
     "dependencies": {
-        "@aics/simularium-viewer": "^3.6.2",
+        "@aics/simularium-viewer": "^3.6.3",
         "@ant-design/css-animation": "^1.7.3",
         "@ant-design/icons": "^4.0.6",
         "antd": "^4.23.6",
diff --git a/src/containers/ViewerPanel/selectors.test.ts b/src/containers/ViewerPanel/selectors.test.ts
index 6cf1ebd3e..22bf2e731 100644
--- a/src/containers/ViewerPanel/selectors.test.ts
+++ b/src/containers/ViewerPanel/selectors.test.ts
@@ -26,6 +26,7 @@ describe("ViewerPanel selectors", () => {
             expect(result).toEqual({
                 hiddenAgents: [],
                 highlightedAgents: [],
+                colorChanges: [],
             });
         });
     });
diff --git a/src/containers/ViewerPanel/selectors.ts b/src/containers/ViewerPanel/selectors.ts
index 4e03a040c..325c611ae 100644
--- a/src/containers/ViewerPanel/selectors.ts
+++ b/src/containers/ViewerPanel/selectors.ts
@@ -20,6 +20,7 @@ export const getSelectionStateInfoForViewer = createSelector(
     (highlightedAgents, hiddenAgents) => ({
         highlightedAgents,
         hiddenAgents,
+        colorChanges: [],
     })
 );
 

From c6eaea3d3c81c88c240ee1e8c1e4825d8fe5545e Mon Sep 17 00:00:00 2001
From: Blair Lyons <blair208@gmail.com>
Date: Mon, 23 Oct 2023 11:06:47 -0700
Subject: [PATCH 27/27] 0.10.0

---
 CHANGELOG.md      | 27 +++++++++++++++++++++++++++
 package-lock.json |  4 ++--
 package.json      |  2 +-
 3 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f2231630b..3675d5cb1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,8 +4,35 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [v0.10.0](https://github.com/simularium/simularium-website/compare/v0.9.0...v0.10.0)
+
+- update viewer and fix types [`#445`](https://github.com/simularium/simularium-website/pull/445)
+- fix menus offsets [`#440`](https://github.com/simularium/simularium-website/pull/440)
+- Feature/version info [`#423`](https://github.com/simularium/simularium-website/pull/423)
+- Update ux_issue.md [`#433`](https://github.com/simularium/simularium-website/pull/433)
+- change check for if a file is shareable [`#439`](https://github.com/simularium/simularium-website/pull/439)
+- audit fix [`#437`](https://github.com/simularium/simularium-website/pull/437)
+- Feature/orthographic UI [`#430`](https://github.com/simularium/simularium-website/pull/430)
+- Feature/share time url [`#424`](https://github.com/simularium/simularium-website/pull/424)
+- change gh-deploy to be a dev build [`#426`](https://github.com/simularium/simularium-website/pull/426)
+- Update CONTRIBUTING.md [`#425`](https://github.com/simularium/simularium-website/pull/425)
+- Feature/download trajectory [`#422`](https://github.com/simularium/simularium-website/pull/422)
+- looping playback and tooltip styling [`#417`](https://github.com/simularium/simularium-website/pull/417)
+- Bump json5 from 1.0.1 to 1.0.2 [`#404`](https://github.com/simularium/simularium-website/pull/404)
+- Bump webpack from 5.75.0 to 5.76.0 [`#401`](https://github.com/simularium/simularium-website/pull/401)
+- Bump d3-color and plotly.js [`#399`](https://github.com/simularium/simularium-website/pull/399)
+- Bump loader-utils and typescript-plugin-css-modules [`#398`](https://github.com/simularium/simularium-website/pull/398)
+- Bump decode-uri-component from 0.2.0 to 0.2.2 [`#382`](https://github.com/simularium/simularium-website/pull/382)
+- Update ux_issue.md [`#393`](https://github.com/simularium/simularium-website/pull/393)
+- File upload modal rework and styling [`#392`](https://github.com/simularium/simularium-website/pull/392)
+- ui components for share time in url [`9e50b00`](https://github.com/simularium/simularium-website/commit/9e50b00371b6d0edd98f266ac83c233154551932)
+- remove now-unused `LocalFileUpload` component [`2a1c111`](https://github.com/simularium/simularium-website/commit/2a1c11130033c4a9f48d3f2ae17ce14544529dd6)
+- shift style rules, add light theme, remove buffer [`225ebfd`](https://github.com/simularium/simularium-website/commit/225ebfd1395622c5b5a27e7b721c787c3f08ecc3)
+
 #### [v0.9.0](https://github.com/simularium/simularium-website/compare/v0.8.2...v0.9.0)
 
+> 19 February 2023
+
 - add a default collapsed [`#397`](https://github.com/simularium/simularium-website/pull/397)
 - Url Upload Auto Focus [`#373`](https://github.com/simularium/simularium-website/pull/373)
 - Clean up [`3c66ae3`](https://github.com/simularium/simularium-website/commit/3c66ae3aade3a50abba7a524b24978e6154bf268)
diff --git a/package-lock.json b/package-lock.json
index 37b727768..6d2eeff7b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "simularium-webapp",
-    "version": "0.9.0",
+    "version": "0.10.0",
     "lockfileVersion": 2,
     "requires": true,
     "packages": {
         "": {
             "name": "simularium-webapp",
-            "version": "0.9.0",
+            "version": "0.10.0",
             "license": "ISC",
             "dependencies": {
                 "@aics/simularium-viewer": "^3.6.3",
diff --git a/package.json b/package.json
index e835dcc80..42aa438e6 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "simularium-webapp",
-    "version": "0.9.0",
+    "version": "0.10.0",
     "description": "",
     "main": "src/index.tsx",
     "repository": {