chore: Move src/components/utils into src/utils

.infra/rdev/values.yaml

@@ -2,7 +2,7 @@ stack:
   services:
     explorer:
       image:
-        tag: sha-965c3509
+        tag: sha-542f7934
       replicaCount: 1
       env:
         # env vars common to all deployment stages

client/src/actions/index.ts

@@ -1,4 +1,9 @@
 import { AnyAction } from "redux";
+import {
+  storageGetTransient,
+  storageSetTransient,
+} from "util/transientLocalStorage";
+import { KEYS } from "util/localStorage";
 import type { Config } from "../globals";
 import * as globals from "../globals";
 import { AnnoMatrixLoader, AnnoMatrixObsCrossfilter } from "../annoMatrix";
@@ -24,11 +29,6 @@ import type {
   CellType,
 } from "../common/types/entities";
 import { postExplainNewTab } from "../components/framework/toasters";
-import { KEYS } from "../components/util/localStorage";
-import {
-  storageGetTransient,
-  storageSetTransient,
-} from "../components/util/transientLocalStorage";
 import { selectIsUserStateDirty } from "../selectors/global";
 import { DataframeValue, LabelArray, LabelIndex } from "../util/dataframe";
 import { packDiffExPdu, DiffExMode, DiffExArguments } from "../util/diffexpdu";

client/src/components/util/truncate.tsx → client/src/common/components/Truncate/Truncate.tsx

@@ -1,9 +1,9 @@
 import React, { CSSProperties, cloneElement } from "react";
 import { Tooltip } from "@blueprintjs/core";
 
-import { tooltipHoverOpenDelayQuick } from "../../globals";
-import { getFeatureFlag } from "../../util/featureFlags/featureFlags";
-import { FEATURES } from "../../util/featureFlags/features";
+import { getFeatureFlag } from "util/featureFlags/featureFlags";
+import { FEATURES } from "util/featureFlags/features";
+import { tooltipHoverOpenDelayQuick } from "~/globals";
 
 const SPLIT_STYLE = {
   display: "flex",

client/src/components/app.tsx → client/src/components/App/App.tsx

@@ -2,28 +2,27 @@ import React from "react";
 import { connect } from "react-redux";
 import { ThemeProvider as EmotionThemeProvider } from "@emotion/react";
 import { StyledEngineProvider, ThemeProvider } from "@mui/material/styles";
-import { theme } from "./theme";
-import BottomBanner from "./BottomBanner/BottomBanner";
-
-import Controls from "./controls";
-import DatasetSelector from "./datasetSelector/datasetSelector";
-import Container from "./framework/container";
-import Layout from "./framework/layout";
-import LayoutSkeleton from "./framework/layoutSkeleton";
-import LeftSideBar from "./leftSidebar";
-import RightSideBar from "./rightSidebar";
-import Legend from "./continuousLegend";
-import MenuBar from "./menubar";
-import Header from "./NavBar";
-import actions from "../actions";
-import { RootState, AppDispatch } from "../reducers";
-import GlobalHotkeys from "./hotkeys";
-import { selectIsSeamlessEnabled } from "../selectors/datasetMetadata";
-import Graph from "./graph/graph";
-import DiffexNotice from "./diffexNotice";
-import Scatterplot from "./scatterplot/scatterplot";
-import PanelEmbedding from "./PanelEmbedding";
-import { BANNER_FEEDBACK_SURVEY_LINK } from "./BottomBanner/constants";
+import actions from "actions";
+import { RootState, AppDispatch } from "reducers";
+import Controls from "common/components/Controls/Controls";
+import { theme } from "util/theme";
+import DatasetSelector from "components/DatasetSelectorTempFolder/DatasetSelector";
+import DiffexNotice from "components/DiffexNoticeTempFolder/DiffexNotice";
+import BottomBanner from "../BottomBanner/BottomBanner";
+import Container from "../framework/container";
+import Layout from "../framework/layout";
+import LayoutSkeleton from "../framework/layoutSkeleton";
+import LeftSideBar from "../leftSidebar";
+import RightSideBar from "../rightSidebar";
+import Legend from "../Legend/Legend";
+import MenuBar from "../menubar";
+import Header from "../NavBar";
+import GlobalHotkeys from "../hotkeys";
+import { selectIsSeamlessEnabled } from "../../selectors/datasetMetadata";
+import Graph from "../graph/graph";
+import Scatterplot from "../scatterplot/scatterplot";
+import PanelEmbedding from "../PanelEmbedding";
+import { BANNER_FEEDBACK_SURVEY_LINK } from "../BottomBanner/constants";
 
 interface StateProps {
   loading: RootState["controls"]["loading"];

client/src/components/BottomBanner/style.ts

@@ -1,6 +1,6 @@
 import styled from "@emotion/styled";
 import { Banner, Icon } from "@czi-sds/components";
-import { beta100, beta400, gray500 } from "../theme";
+import { beta100, beta400, gray500 } from "util/theme";
 
 export const SKINNY_MODE_BREAKPOINT_WIDTH = 960;
 export const BOTTOM_BANNER_ID = "bottom-banner";

client/src/components/datasetSelector/datasetSelector.tsx → client/src/components/DatasetSelectorTempFolder/DatasetSelector.tsx

@@ -5,15 +5,17 @@ import React, { FC, useEffect, useState } from "react";
 import { connect } from "react-redux";
 
 /* App dependencies */
-import actions from "../../actions";
-import { DatasetMetadata, Dataset } from "../../common/types/entities";
-import DatasetMenu, { DatasetSelectedFn } from "./datasetMenu";
-import { AppDispatch, RootState } from "../../reducers";
-import { selectIsSeamlessEnabled } from "../../selectors/datasetMetadata";
-import TruncatingBreadcrumb from "./truncatingBreadcrumb";
+import actions from "actions";
+import { DatasetMetadata, Dataset } from "common/types/entities";
+import { AppDispatch, RootState } from "reducers";
+import { selectIsSeamlessEnabled } from "selectors/datasetMetadata";
+import DatasetMenu, {
+  DatasetSelectedFn,
+} from "./components/DatasetMenu/DatasetMenu";
+import TruncatingBreadcrumb from "./components/TruncatingBreadcrumb/TruncatingBreadcrumb";
 import TruncatingBreadcrumbs, {
   TruncatingBreadcrumbProps,
-} from "./truncatingBreadcrumbs";
+} from "./components/TruncatingBreadcrumbs/TruncatingBreadcrumbs";
 
 /**
  * Actions dispatched by dataset selector.

client/src/components/datasetSelector/datasetMenu.tsx → client/src/components/DatasetSelectorTempFolder/components/DatasetMenu/DatasetMenu.tsx

@@ -3,12 +3,12 @@ import { Menu, MenuItem, Position, Popover } from "@blueprintjs/core";
 import React from "react";
 
 /* App dependencies */
-import { Dataset } from "../../common/types/entities";
-import { maxMenuItemCount } from "../../globals";
+import { Dataset } from "common/types/entities";
+import { maxMenuItemCount } from "~/globals";
 
 /* Styles */
 // @ts-expect-error --- TODO fix import
-import styles from "./datasetSelector.css";
+import styles from "../../datasetSelector.css";
 
 /**
  * Function invoked on select of dataset.

client/src/components/datasetSelector/truncatingBreadcrumb.tsx → client/src/components/DatasetSelectorTempFolder/components/TruncatingBreadcrumb/TruncatingBreadcrumb.tsx

@@ -1,13 +1,10 @@
-/* Core dependencies */
 import { Breadcrumb } from "@blueprintjs/core";
 import React from "react";
-
-/* App dependencies */
-import { TruncatingBreadcrumbProps } from "./truncatingBreadcrumbs";
+import { TruncatingBreadcrumbProps } from "../TruncatingBreadcrumbs/TruncatingBreadcrumbs";
 
 // Styles
 // @ts-expect-error --- TODO fix import
-import styles from "./datasetSelector.css";
+import styles from "../../datasetSelector.css";
 
 interface Props {
   children?: React.ReactNode;

client/src/components/datasetSelector/truncatingBreadcrumbs.tsx → client/src/components/DatasetSelectorTempFolder/components/TruncatingBreadcrumbs/TruncatingBreadcrumbs.tsx

@@ -8,7 +8,7 @@ import {
 import React, { CSSProperties, useCallback, useEffect, useState } from "react";
 
 /* App dependencies */
-import Truncate from "../util/truncate";
+import Truncate from "common/components/Truncate/Truncate";
 
 interface Props {
   breadcrumbRenderer: (item: TruncatingBreadcrumbProps) => JSX.Element;

client/src/components/continuousLegend/index.tsx → client/src/components/Legend/Legend.tsx

@@ -4,24 +4,24 @@ import { connect, shallowEqual } from "react-redux";
 import * as d3 from "d3";
 import { interpolateCool } from "d3-scale-chromatic";
 import Async, { AsyncProps } from "react-async";
-import { AppDispatch, RootState } from "../../reducers";
-
 import {
   createColorTable,
   createColorQuery,
   ColorTable,
   ColorRange,
-} from "../../util/stateManager/colorHelpers";
-import { ColorsState } from "../../reducers/colors";
-import { Genesets } from "../../reducers/genesets";
-import * as globals from "../../globals";
+} from "util/stateManager/colorHelpers";
+import { ColorsState } from "reducers/colors";
+import { Genesets } from "reducers/genesets";
+import { AppDispatch, RootState } from "reducers";
+import * as globals from "~/globals";
 
 /**
  * (thuang): The legend needs to be positioned below the cell count element
  */
 const CELL_COUNT_ELEMENT_HEIGHT_PX = 20;
 
 // create continuous color legend
+// eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS.
 const continuous = (selectorId: any, colorScale: any, colorAccessor: any) => {
   const legendHeight = 200;
   const legendWidth = 80;
@@ -150,6 +150,7 @@ const mapDispatchToProps = (dispatch: AppDispatch): DispatchProps => ({
 type Props = StateProps & DispatchProps;
 
 class ContinuousLegend extends React.Component<Props> {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS.
   static watchAsync(props: any, prevProps: any) {
     return !shallowEqual(props.watchProps, prevProps.watchProps);
   }

client/src/components/NavBar/components/NavDivider/style.ts

@@ -1,6 +1,6 @@
 import { Divider } from "@mui/material";
 import styled from "@emotion/styled";
-import { gray500 } from "../../../theme";
+import { gray500 } from "util/theme";
 
 export const NavDivider = styled(Divider)`
   background-color: ${gray500};

client/src/components/NavBar/style.ts

@@ -2,16 +2,16 @@ import { Classes } from "@blueprintjs/core";
 import styled from "@emotion/styled";
 import { css } from "@emotion/react";
 import { Tag, CommonThemeProps, fontCapsXxxs } from "@czi-sds/components";
-import { PT_TEXT_COLOR } from "./theme";
-import { HEADER_HEIGHT_PX } from "../../globals";
 import {
   fontWeightBold,
   fontWeightSemibold,
   gray300,
   gray500,
   grayWhite,
   spacesL,
-} from "../theme";
+} from "util/theme";
+import { PT_TEXT_COLOR } from "./theme";
+import { HEADER_HEIGHT_PX } from "~/globals";
 
 export const Wrapper = styled.div`
   background-color: ${PT_TEXT_COLOR};

client/src/components/PanelEmbedding/index.tsx

@@ -2,14 +2,13 @@ import React, { useState } from "react";
 import { connect } from "react-redux";
 import { IconNames } from "@blueprintjs/icons";
 import { Button } from "@blueprintjs/core";
-
-import * as globals from "../../globals";
+import Controls from "common/components/Controls/Controls";
+import { AppDispatch, RootState } from "reducers";
+import actions from "actions";
+import * as globals from "~/globals";
 import { height, width } from "./util";
 import Graph from "../graph/graph";
-import Controls from "../controls";
 import Embedding from "../embedding";
-import { AppDispatch, RootState } from "../../reducers";
-import actions from "../../actions";
 import { PANEL_EMBEDDING_MINIMIZE_TOGGLE_TEST_ID } from "./constants";
 
 interface StateProps {

client/src/components/categorical/category/index.tsx

@@ -5,9 +5,8 @@ import { FaChevronRight, FaChevronDown } from "react-icons/fa";
 import { Button, Classes, Position, Tooltip } from "@blueprintjs/core";
 import Async, { AsyncProps } from "react-async";
 import memoize from "memoize-one";
-
+import Truncate from "common/components/Truncate/Truncate";
 import Value from "../value";
-import Truncate from "../../util/truncate";
 import { CategoryCrossfilterContext } from "../categoryContext";
 
 import * as globals from "../../../globals";

client/src/components/categorical/value/index.tsx

@@ -2,11 +2,10 @@ import { connect } from "react-redux";
 import React from "react";
 import * as d3 from "d3";
 import { Checkbox } from "@blueprintjs/core";
+import Truncate from "common/components/Truncate/Truncate";
 import * as globals from "../../../globals";
 // @ts-expect-error ts-migrate(2307) FIXME: Cannot find module '../categorical.css' or its cor... Remove this comment to see the full error message
 import styles from "../categorical.css";
-import Truncate from "../../util/truncate";
-
 import { AnnotationsHelpers } from "../../../util/stateManager";
 import { labelPrompt, isLabelErroneous } from "../labelUtil";
 import actions from "../../../actions";

client/src/components/embedding/components/Opacities/components/Opacity/style.ts

@@ -6,7 +6,7 @@ import {
   spacesS,
   spacesXs,
   textSecondary,
-} from "../../../../../theme";
+} from "util/theme";
 
 export const Mark = styled.span`
   color: ${textSecondary};

client/src/components/embedding/components/Opacities/style.ts

@@ -1,5 +1,5 @@
 import styled from "@emotion/styled";
-import { spacesM, spacesS } from "../../../theme";
+import { spacesM, spacesS } from "util/theme";
 
 export const Wrapper = styled.div`
   padding: ${spacesS}px ${spacesM}px;

client/src/components/framework/layoutSkeleton.tsx

@@ -3,7 +3,7 @@ import { SKELETON } from "@blueprintjs/core/lib/esnext/common/classes";
 import React from "react";
 
 /* App dependencies */
-import Controls from "../controls";
+import Controls from "common/components/Controls/Controls";
 import Layout from "./layout";
 import LeftSidebarSkeleton from "../leftSidebar/leftSidebarSkeleton";
 import RightSidebarSkeleton from "../rightSidebar/rightSidebarSkeleton";

client/src/components/geneExpression/gene/index.tsx

@@ -11,9 +11,9 @@ import {
 import { EVENTS } from "analytics/events";
 import { ActiveTab } from "common/types/entities";
 import { InfoButton, InfoButtonWrapper } from "common/style";
+import Truncate from "common/components/Truncate/Truncate";
 import { State, Props, mapStateToProps, mapDispatchToProps } from "./types";
 import { MINI_HISTOGRAM_WIDTH } from "../constants";
-import Truncate from "../../util/truncate";
 
 class Gene extends React.Component<Props, State> {
   constructor(props: Props) {

client/src/components/geneExpression/geneSet.tsx

@@ -3,8 +3,8 @@ import { FaChevronRight, FaChevronDown } from "react-icons/fa";
 import BrushableHistogram from "common/components/BrushableHistogram/BrushableHistogram";
 import { track } from "analytics";
 import { EVENTS } from "analytics/events";
+import Truncate from "common/components/Truncate/Truncate";
 import Gene from "./gene";
-import Truncate from "../util/truncate";
 import * as globals from "~/globals";
 import GenesetMenus from "./menus/genesetMenus";
 import EditGenesetNameDialogue from "./menus/editGenesetNameDialogue";

client/src/components/geneExpression/infoPanel/common/style.ts

@@ -6,9 +6,6 @@ import {
   fontHeaderM,
 } from "@czi-sds/components";
 import { Icon } from "@blueprintjs/core";
-
-import * as globals from "../../../../globals";
-import * as styles from "../../util";
 import {
   fontWeightRegular,
   fontWeightSemibold,
@@ -18,7 +15,9 @@ import {
   spacesM,
   warning100,
   warning400,
-} from "../../../theme";
+} from "util/theme";
+import * as styles from "../../util";
+import * as globals from "~/globals";
 
 export const InfoWrapper = styled.div`
   display: flex;

client/src/components/geneExpression/infoPanel/infoPanelDataset/datasetInfoFormat.tsx

@@ -3,6 +3,7 @@ import { H3, HTMLTable, Classes } from "@blueprintjs/core";
 import React, { CSSProperties } from "react";
 
 // App dependencies
+import Truncate from "common/components/Truncate/Truncate";
 import {
   Author,
   Consortium,
@@ -12,7 +13,6 @@ import {
 import { Category } from "../../../../common/types/schema";
 import * as globals from "../../../../globals";
 import { RootState } from "../../../../reducers";
-import Truncate from "../../../util/truncate";
 
 const COLLECTION_LINK_ORDER_BY = [
   "DOI",

client/src/components/geneExpression/infoPanel/style.ts

@@ -1,5 +1,5 @@
 import styled from "@emotion/styled";
-import { gray300 } from "../../theme";
+import { gray300 } from "util/theme";
 
 interface InfoPanelWrapperProps {
   isHidden: boolean;

client/src/components/menubar/style.ts

@@ -1,7 +1,7 @@
 import styled from "@emotion/styled";
-import { spacesS } from "../theme";
-import { getFeatureFlag } from "../../util/featureFlags/featureFlags";
-import { FEATURES } from "../../util/featureFlags/features";
+import { spacesS } from "util/theme";
+import { getFeatureFlag } from "util/featureFlags/featureFlags";
+import { FEATURES } from "util/featureFlags/features";
 
 export const MAX_VERTICAL_THRESHOLD_WIDTH_PX = 500;
 const isTest = getFeatureFlag(FEATURES.TEST);

client/src/index.tsx

@@ -6,7 +6,7 @@ import { HotkeysProvider, FocusStyleManager } from "@blueprintjs/core";
 import "./index.css";
 
 /* our code */
-import App from "./components/app";
+import App from "./components/App/App";
 import store from "./reducers";
 
 /**

client/src/util/featureFlags/featureFlags.ts

@@ -1,4 +1,4 @@
-import { storageGet, storageSet } from "../../components/util/localStorage";
+import { storageGet, storageSet } from "util/localStorage";
 import { FEATURES } from "./features";
 
 const FEATURE_FLAG_PREFIX = "cxg-ff-";

client/src/components/util/version.ts → client/src/util/version.ts

@@ -1,4 +1,4 @@
-import { DataPortalProps } from "../../common/types/entities";
+import { DataPortalProps } from "common/types/entities";
 
 const VERSION_ONES = ["1.0.0", "1.1.0"];
 const VERSION_TWOS = ["2.0.0"];