idea for organizing state and files

src/components/CheckBoxTree/index.tsx

@@ -41,6 +41,7 @@ interface CheckBoxTreeProps {
     payloadForSelectAll: VisibilitySelectionMap;
     payloadForSelectNone: VisibilitySelectionMap;
     isSharedCheckboxIndeterminate: boolean;
+    colorInfoForPicker: any; //TODO: type this
 }
 const CHECKBOX_SPAN_NO = 2;
 const LABEL_SPAN_NO = 6;
@@ -211,7 +212,12 @@ class CheckBoxTree extends React.Component<CheckBoxTreeProps> {
         </Row>
     );
     render() {
-        const { agentsHighlighted, treeData, agentsChecked } = this.props;
+        const {
+            agentsHighlighted,
+            treeData,
+            agentsChecked,
+            colorInfoForPicker,
+        } = this.props;
         return treeData.length > 0 ? (
             <div className={styles.container}>
                 <Row className={styles.colLabels}>
@@ -252,6 +258,7 @@ class CheckBoxTree extends React.Component<CheckBoxTreeProps> {
                                         color={nodeData.color}
                                         agentName={nodeData.title}
                                         tags={this.getAgentTags(nodeData.title)}
+                                        colorInfoForPicker={colorInfoForPicker}
                                     />
                                     <Text
                                         style={{ maxWidth: 143 }}

src/components/ColorPicker/index.tsx

@@ -21,6 +21,7 @@ interface ColorPickerProps {
     setColorChanges: ActionCreator<SetColorChangesAction>;
     setRecentColors: ActionCreator<SetRecentColorsAction>;
     recentColors: string[];
+    infoForPicker: any; // TODO: type this
 }
 
 const ColorPicker = ({
@@ -30,6 +31,7 @@ const ColorPicker = ({
     tags,
     recentColors,
     setRecentColors,
+    infoForPicker,
 }: ColorPickerProps) => {
     const [color, setColor] = useState(oldColor);
 
@@ -133,6 +135,9 @@ const ColorPicker = ({
             </div>
         </div>
     );
+    // TODO: move the render function from popover to here,
+    // encapsulate this stuff into a function called "render picker content" or something and call
+    // that in content of popover
 };
 
 const mapStateToProps = (state: any) => ({

src/components/ColorPickerPopover/index.tsx

@@ -10,6 +10,7 @@ interface ColorPickerPopoverProps {
     closeModal: () => void;
     agentName: string;
     tags: string[];
+    colorInfoForPicker: any; // TODO: type this
 }
 
 const ColorPickerPopover = ({
@@ -18,6 +19,7 @@ const ColorPickerPopover = ({
     closeModal,
     agentName,
     tags,
+    colorInfoForPicker,
 }: ColorPickerPopoverProps) => {
     return (
         <Popover
@@ -28,6 +30,7 @@ const ColorPickerPopover = ({
                     agentName={agentName}
                     tags={tags}
                     oldColor={oldColor}
+                    colorInfoForPicker={colorInfoForPicker}
                 />
             }
             placement="right"

src/components/ColorSwatch/index.tsx

@@ -8,13 +8,15 @@ interface ColorSwatchProps {
     color: string;
     agentName: string;
     tags: string[];
+    colorInfoForPicker: any; // TODO: type this
 }
 
 const ColorSwatch = ({
     childrenHaveDifferentColors,
     color,
     agentName,
     tags,
+    colorInfoForPicker,
 }: ColorSwatchProps): JSX.Element => {
     const [isColorPickerVisible, setColorPickerVisible] = useState(false);
     const [initialColor, setInitialColor] = useState(color);
@@ -44,15 +46,14 @@ const ColorSwatch = ({
                     openModal();
                 }}
             />
-            {isColorPickerVisible ? (
-                <ColorPickerPopover
-                    agentName={agentName}
-                    tags={tags}
-                    oldColor={initialColor}
-                    isOpen={isColorPickerVisible}
-                    closeModal={closeModal}
-                />
-            ) : null}
+            <ColorPickerPopover
+                agentName={agentName}
+                tags={tags}
+                oldColor={initialColor}
+                isOpen={isColorPickerVisible}
+                closeModal={closeModal}
+                colorInfoForPicker={colorInfoForPicker}
+            />
         </>
     );
 };

src/containers/ModelPanel/index.tsx

@@ -32,6 +32,7 @@ import {
     getSelectAllVisibilityMap,
     getSelectNoneVisibilityMap,
     getIsSharedCheckboxIndeterminate,
+    getColorInfoForPicker,
 } from "./selectors";
 import {
     VIEWER_EMPTY,
@@ -60,6 +61,7 @@ interface ModelPanelProps {
     viewerStatus: ViewerStatus;
     isNetworkedFile: boolean;
     changeToNetworkedFile: ActionCreator<RequestNetworkFileAction>;
+    colorInfoForPicker: any; // TODO: type this
 }
 
 class ModelPanel extends React.Component<ModelPanelProps> {
@@ -77,6 +79,7 @@ class ModelPanel extends React.Component<ModelPanelProps> {
             viewerStatus,
             isNetworkedFile,
             changeToNetworkedFile: loadNetworkFile,
+            colorInfoForPicker,
         } = this.props;
         const checkboxTree = (
             <CheckBoxTree
@@ -89,6 +92,7 @@ class ModelPanel extends React.Component<ModelPanelProps> {
                 payloadForSelectAll={payloadForSelectAll}
                 payloadForSelectNone={payloadForSelectNone}
                 isSharedCheckboxIndeterminate={isSharedCheckboxIndeterminate}
+                colorInfoForPicker={colorInfoForPicker}
             />
         );
         const contentMap = {
@@ -128,6 +132,7 @@ function mapStateToProps(state: State) {
         isSharedCheckboxIndeterminate: getIsSharedCheckboxIndeterminate(state),
         viewerStatus: getStatus(state),
         isNetworkedFile: getIsNetworkedFile(state),
+        colorInfoForPicker: getColorInfoForPicker(state),
     };
 }
 

src/containers/ModelPanel/selectors.ts

@@ -3,7 +3,11 @@ import { isEmpty } from "lodash";
 
 import { AgentDisplayNode } from "../../components/CheckBoxTree";
 import { getUiDisplayDataTree } from "../../state/trajectory/selectors";
-import { getAgentVisibilityMap } from "../../state/selection/selectors";
+import {
+    getAgentVisibilityMap,
+    getColorChanges,
+    getRecentColors,
+} from "../../state/selection/selectors";
 import { VisibilitySelectionMap } from "../../state/selection/types";
 
 // Returns an agent visibility map that indicates all states should be visible
@@ -56,9 +60,7 @@ export const getIsSharedCheckboxIndeterminate = createSelector(
             if (visibleStates === undefined) {
                 // This should theoretically never happen
                 console.warn(
-                    `Skipping agent ${
-                        agent.key
-                    } in getIsSharedCheckboxIndeterminate because it doesn't exist in agentVisibilityMap`
+                    `Skipping agent ${agent.key} in getIsSharedCheckboxIndeterminate because it doesn't exist in agentVisibilityMap`
                 );
                 continue;
             }
@@ -74,3 +76,8 @@ export const getIsSharedCheckboxIndeterminate = createSelector(
         return numInvisibleAgents > 0 && numInvisibleAgents < allAgents.length;
     }
 );
+
+export const getColorInfoForPicker = createSelector(
+    [getColorChanges, getRecentColors],
+    (colorChanges, recentColors) => ({ colorChanges, recentColors })
+);

src/state/selection/selectors/index.ts

@@ -1,10 +1,10 @@
 import { createSelector } from "reselect";
 import { reduce } from "lodash";
-import { UIDisplayData } from "@aics/simularium-viewer/type-declarations";
 import {
-    ColorChanges,
-    SelectionEntry,
-} from "@aics/simularium-viewer/type-declarations/simularium/SelectionInterface";
+    UIDisplayData,
+    // ColorChanges,
+    // SelectionEntry,
+} from "@aics/simularium-viewer/type-declarations";
 
 import { getAgentDisplayNamesAndStates } from "../../trajectory/selectors";
 import { ColorChangesMap, VisibilitySelectionMap } from "../types";
@@ -17,11 +17,8 @@ import {
 
 export const getHighlightedAgents = createSelector(
     [getAgentHighlightMap, getAgentDisplayNamesAndStates],
-    (
-        highlightedAgents: VisibilitySelectionMap,
-        allAgents: UIDisplayData
-    ): SelectionEntry[] => {
-        const init: SelectionEntry[] = [];
+    (highlightedAgents: VisibilitySelectionMap, allAgents: UIDisplayData) => {
+        const init: any = [];
         return reduce(
             allAgents,
             (acc, agent) => {
@@ -66,8 +63,8 @@ export const getAgentsToHide = createSelector(
     (
         agentVisibilityMap: VisibilitySelectionMap,
         agentDisplayData: UIDisplayData
-    ): SelectionEntry[] => {
-        const init: SelectionEntry[] = [];
+    ) => {
+        const init: any = [];
         return reduce(
             agentDisplayData,
             (acc, agent) => {
@@ -112,15 +109,12 @@ export const getAgentsToHide = createSelector(
 
 export const getColorChanges = createSelector(
     [getColorChangesMap, getAgentDisplayNamesAndStates],
-    (
-        colorChangesMap: ColorChangesMap,
-        agentDisplayData: UIDisplayData
-    ): ColorChanges[] => {
-        const colorArray: ColorChanges[] = [];
+    (colorChangesMap: ColorChangesMap, agentDisplayData: UIDisplayData) => {
+        const colorArray: any = [];
 
-        const agentColorChanges: SelectionEntry[] = reduce(
+        const agentColorChanges = reduce(
             agentDisplayData,
-            (acc: SelectionEntry[], agent) => {
+            (acc: any, agent) => {
                 if (!colorChangesMap.agents[agent.name]) {
                     return acc;
                 }

webpack/plugins.js

@@ -66,7 +66,7 @@ const PLUGINS_BY_ENV = {
     [Env.DEVELOPMENT]: [
         new webpack.EnvironmentPlugin({
             // FIXME: make a dev server
-            BACKEND_SERVER_IP: `staging-node1-agentviz-backend.cellexplore.net`,
+            BACKEND_SERVER_IP: `production-node1-agentviz-backend.cellexplore.net`,
         }),
     ],
 };