Feature/color picker (#432)

* initial components and styling

* shrink checkbox to expose swatch

* shrink chexbox to make swatch clickable

* pass data into color swatch

* remove unused styling

* handleColorChange in picker

* pass props and helders to color picker modal

* add colorPicker to color swatch

* types actions constants selectors for colorChanges

* selector in viewer panel

* preserve initial color in swatch

* style parent swatch when children dont match

* recent colors into redux

* change modal to popover

* update import

* clean up stylesheets

* tidy css and imports

* bump viewer version

* remove extra ?

* update viewer

* viewerpanel selector test update

* update dependecies

* add tests for getColorChanges

* fix type imports in selectors

* web app version

* remove comment

* consolidate colorpicker and popover

* organize props and style rules

* pointer on color swatch

* formatting

* color picker tooltip color to constant

* swap replace for slice

* debounce color selection

* implement orthographic camera

* initial styling of camera controls

* ortho/perspective icons

* define viewer button color variables

* focus:hover state on home button

* playback control styling

* fix button exceeding border

* orth/persp icons swapped

* remove redundant ternary

* rename set camera

* audit fix (#437)

* 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

* Update ux_issue.md (#433)

* menu item and modal

* removing logs

* remove unneeded jsx fragment wrappers

* remove commented code

* styling update

* remove comments

* typo

* prevent bg color change after click

* Update src/components/HelpMenu/index.tsx

Co-authored-by: Megan Riel-Mehan <[email protected]>

* fix menus offsets (#440)

* fix menus offsets

* move version info

* update viewer to 3.6.3

* update viewer and fix types (#445)

* 0.10.0

* remove redunant line

* implement orthographic camera

* initial styling of camera controls

* define viewer button color variables

* focus:hover state on home button

* playback control styling

* orth/persp icons swapped

* remove redundant ternary

* install new viewer version

* rename set camera

* menu item and modal

* removing logs

* remove unneeded jsx fragment wrappers

* remove commented code

* styling update

* remove comments

* typo

* Update src/components/HelpMenu/index.tsx

Co-authored-by: Megan Riel-Mehan <[email protected]>

* fix menus offsets (#440)

* fix menus offsets

* move version info

* update viewer to 3.6.3

* update viewer and fix types (#445)

* pass down actions from model panel to picker

* add hover state rules

* pass in debouncedColor

* [to undo] - local install

* remove colorChangesMap

* prevent color assignment on first opening picker

* fix typing and save all color changes

* make color change an object

* install

* store colors for correct rendering

* add a done call

* change interface

* install viewer

* update viewer

* remove old style sheet

* clean up styles and change order on parents

* style children selection row

* style labels

* style sub menu better

* clean up styles

* revert change

* make sure colors are consistently cased

* fix imports

* wip - not have popover move up

* remove color swatch component and get color picker aligned with swatch

* flx classnames

* fix typo

* fix checkall button

* fix classname

* make render functions for colorpicker

* keep swatch constant until color is set, change label to "previous"

* adjusting labels

* Update src/components/CheckBoxTree/style.css

Co-authored-by: Peyton Lee <[email protected]>

* rename colors

* sync children remove log

* Fix/viewer imports (#453)

* fix imports to be from the top level

* update viewer

* Update src/components/SharedCheckbox/style.css

Co-authored-by: Cameron Fraser <[email protected]>

* remove return

* clean up styling

* change names of checkboxtree components

---------

Co-authored-by: Megan Riel-Mehan <[email protected]>
Co-authored-by: Lyndsay <[email protected]>
Co-authored-by: Blair Lyons <[email protected]>
Co-authored-by: Peyton Lee <[email protected]>
Co-authored-by: Cameron Fraser <[email protected]>

package.json

@@ -92,7 +92,7 @@
         "webpack-dev-server": "^4.10.1"
     },
     "dependencies": {
-        "@aics/simularium-viewer": "^3.6.3",
+        "@aics/simularium-viewer": "^3.6.4",
         "@ant-design/css-animation": "^1.7.3",
         "@ant-design/icons": "^4.0.6",
         "antd": "^4.23.6",
@@ -106,6 +106,7 @@
         "query-string": "^6.13.1",
         "raf": "^3.4.1",
         "react": "^16.9.0",
+        "react-colorful": "^5.6.1",
         "react-dom": "^16.9.0",
         "react-hotkeys-hook": "^3.3.2",
         "react-markdown": "^7.0.1",
@@ -115,7 +116,8 @@
         "react-waypoint": "^9.0.3",
         "redux": "4.2.0",
         "redux-logic": "^3.0.3",
-        "reselect": "4.0.0"
+        "reselect": "4.0.0",
+        "use-debounce": "^9.0.4"
     },
     "resolutions": {
         "react": "^16",

src/components/CheckBoxTree/style.css → src/components/AgentTree/style.css

@@ -1,91 +1,102 @@
+:root {
+    --text-label-margin: 8px;
+}
+
 .container {
     background-color: var(--dark);
 }
 
-.sub-menu {
-    flex-flow: row;
+.header-label {
+    margin-left: var(--text-label-margin);
+    max-width: 120px;
+    font-weight: 200;
 }
 
-.sub-menu :global(.ant-col-offset-3) {
-    margin-left: 13.4%;
+.container :global(.ant-typography-ellipsis) {
+    color: var(--dark-theme-sidebar-text)
 }
 
-.header-label {
-    margin-left: 8px;
-    max-width: 120px;
+.container :global(.ant-checkbox-inner) {
+    border-color: var(--warm-gray);
+}
+
+.container :global(.ant-checkbox-indeterminate .ant-checkbox-inner::after) {
+    background-color: var(--dark-theme-header-bg);
+    height: 2px;
 }
 
-.checkbox-set {
-    width: 53px;
+.check-all-checkbox {
+    width: 100%;
+    margin-left: 88px; /* to line up with the checkboxes below */
+    padding: 10px 0;
 }
 
-.checkbox-set :global(.ant-checkbox) {
-    top: 12px;
+.check-all-checkbox :global(.ant-checkbox) {
+    margin-right: var(--text-label-margin);
 }
 
-.container .checkbox-labels {
-    display: flex;
-    flex-direction: column;
+.no-children-row {
+    margin-left: 32px; /* keeps it in the same position as rows with dropdowns */
 }
 
-.row-label-container {
-    display: inline-block;
+.no-children-row :global(.ant-checkbox-wrapper) {
+    width: 30px;
     height: 40px;
-    padding: 2px 0;
 }
 
-.row-label {
-    margin-left: 8px;
-    font-weight: 200;
-    vertical-align: text-top;
-    display: inline-block;
-    height: 16px;
-    line-height: 1;
+.star-icon::after {
+    content: "\e902";
+    color: var(--dark-theme-sidebar-text);
 }
 
-.container .col-labels {
-    background-color: var(--dark-theme-sidebar-item-bg);
-    margin-bottom: 3px;
+.container :global(.header-checkbox .ant-checkbox) {
+    top: 3.5px;
 }
 
-.container .col-labels label {
-    font-size: 10px;
-    text-transform: uppercase;
+.sub-menu {
+    flex-flow: row;
 }
 
-.container :global(.ant-checkbox-inner) {
-    border-color: var(--warm-gray);
+.sub-menu :global(.ant-col-offset-3) {
+    margin-left: 13.4%;
 }
 
-.container :global(.ant-checkbox-indeterminate .ant-checkbox-inner::after) {
-    background-color: var(--dark-theme-header-bg);
-    height: 2px;
+.container .checkbox-column, .container .color-swatch-column  {
+    max-width: 20px;
 }
 
-.check-all-checkbox {
-    width: 100%;
-    margin-left: 60px;
-    padding: 10px 0;
+.color-swatch-column {
+    margin-left: 3px;
 }
 
-.no-children-row {
-    margin-left: 32px;
+.checkbox-column {
+    margin-left: 30px;
 }
 
-.no-children-row :global(.ant-checkbox-wrapper) {
-    width: 30px;
-    height: 40px;
+.container .agent-names-column {
+    display: flex;
+    flex-direction: column;
+    margin-left: var(--text-label-margin);
 }
 
-.check-all-checkbox :global(.ant-checkbox) {
-    margin-right: 12px;
+.row-label-container {
+    display: inline-block;
+    height: 40px;
+    padding: 2px 0;
 }
 
-.star-icon::after {
-    content: "\e902";
-    color: var(--white-two);
+/* Need to style these swatches differently than the ones that 
+are laid out in a row. These are the children swatches in the 
+dropdown laid out in a column. */
+.row-label-container :global(.agent-swatch-container) {
+    margin: 4px;
+    padding: 0px;
 }
 
-.container :global(.ant-typography-ellipsis) {
-    color: var(--dark-theme-sidebar-text)
+.agent-name-label {
+    font-weight: 200;
+    vertical-align: text-top;
+    display: inline-block;
+    height: 16px;
+    line-height: 1;
 }

src/components/CheckboxTreeSubmenu/index.tsx → src/components/AgentTreeSubmenu/index.tsx

@@ -8,20 +8,20 @@ const CheckboxGroup = AntdCheckbox.Group;
 import Checkbox from "../Checkbox";
 import { CHECKBOX_TYPE_STAR } from "../../constants";
 
-interface CheckboxTreeSubmenuProps {
+interface AgentTreeSubmenuProps {
     checkedAgents: string[];
     options: CheckboxOptionType[];
     onChange: (values: CheckboxValueType[]) => void;
     checkboxType?: CHECKBOX_TYPE_STAR;
 }
 import styles from "./style.css";
 
-const CheckboxTreeSubmenu = ({
+const AgentTreeSubmenu = ({
     checkedAgents,
     options,
     onChange,
     checkboxType,
-}: CheckboxTreeSubmenuProps): JSX.Element => {
+}: AgentTreeSubmenuProps): JSX.Element => {
     const onCheckboxChange = ({ target }: CheckboxChangeEvent) => {
         const allowedValues = map(options, "value");
         const optionIndex = checkedAgents.indexOf(target.value);
@@ -60,4 +60,4 @@ const CheckboxTreeSubmenu = ({
     );
 };
 
-export default CheckboxTreeSubmenu;
+export default AgentTreeSubmenu;

src/components/AgentTreeSubmenu/style.css

@@ -0,0 +1,12 @@
+.container :global(.ant-checkbox-wrapper) {
+    margin-left: 0;
+    height: 40px;
+}
+
+.container span {
+    top: 0;
+}
+
+.container :global(.ant-checkbox) {
+    top: 2px;
+}