chore: Rename Left Sidebar (#1113)

Co-authored-by: rainandbare <[email protected]>

.infra/rdev/values.yaml

@@ -2,7 +2,7 @@ stack:
   services:
     explorer:
       image:
-        tag: sha-b2a98a83
+        tag: sha-c15484e5
       replicaCount: 1
       env:
         # env vars common to all deployment stages

client/__tests__/e2e/e2e.test.ts

@@ -78,8 +78,8 @@ import {
 } from "../util/helpers";
 import { SCALE_MAX_HIRES } from "../../src/util/constants";
 import { PANEL_EMBEDDING_MINIMIZE_TOGGLE_TEST_ID } from "../../src/components/PanelEmbedding/constants";
-import { CONTINUOUS_SECTION_TEST_ID } from "../../src/components/continuous/constants";
-import { CATEGORICAL_SECTION_TEST_ID } from "../../src/components/categorical/constants";
+import { CONTINUOUS_SECTION_TEST_ID } from "../../src/components/LeftSidebar/components/Continuous/constants";
+import { CATEGORICAL_SECTION_TEST_ID } from "../../src/components/LeftSidebar/components/Categorical/constants";
 import { sidePanelAttributeNameChange } from "../../src/components/Graph/util";
 
 const { describe, skip } = test;

client/src/components/App/App.tsx

@@ -12,7 +12,7 @@ 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 LeftSideBar from "../LeftSidebar/LeftSidebar";
 import RightSideBar from "../rightSidebar";
 import Legend from "../Legend/Legend";
 import MenuBar from "../menubar";

client/src/components/leftSidebar/index.tsx → client/src/components/LeftSidebar/LeftSidebar.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
-import Categorical from "../categorical";
-import Continuous from "../continuous/continuous";
+import Categorical from "./components/Categorical/Categorical";
+import Continuous from "./components/Continuous/Continuous";
 import { LeftSidebarContainer, LeftSidebarWrapper } from "./style";
 
 function LeftSideBar() {

client/src/components/leftSidebar/leftSidebarSkeleton.tsx → client/src/components/LeftSidebar/LeftSidebarSkeleton.tsx

@@ -4,7 +4,7 @@ import React, { CSSProperties } from "react";
 
 /* Styles */
 import StillLoading from "common/components/BrushableHistogram/components/StillLoading/StillLoading";
-import { StillLoading as CategoryLoading } from "../categorical/category";
+import { StillLoading as CategoryLoading } from "./components/Categorical/components/Category/Category";
 import { LeftSidebarWrapper } from "./style";
 
 const STYLE_SUPER_CATEGORY: CSSProperties = {

client/src/components/categorical/index.tsx → client/src/components/LeftSidebar/components/Categorical/Categorical.tsx

@@ -1,25 +1,22 @@
 import React from "react";
 import { connect } from "react-redux";
-import * as globals from "../../globals";
-import Category from "./category";
 import {
   EXCLUDED_CATEGORY_NAMES,
   STANDARD_CATEGORY_NAMES,
-} from "../../common/types/entities";
-import {
-  CategoricalAnnotationColumnSchema,
-  Schema,
-} from "../../common/types/schema";
-import Collapse from "../../util/collapse";
-import { ControlsHelpers } from "../../util/stateManager";
-import { track } from "../../analytics";
-import { EVENTS } from "../../analytics/events";
+} from "common/types/entities";
+import { CategoricalAnnotationColumnSchema, Schema } from "common/types/schema";
+import Collapse from "util/collapse";
+import { ControlsHelpers } from "util/stateManager";
+import { track } from "analytics";
+import { EVENTS } from "analytics/events";
+import { RootState } from "reducers";
+import { toggleCategoryExpansion } from "actions/controls";
+import Category from "./components/Category/Category";
+import * as globals from "~/globals";
 import { CATEGORICAL_SECTION_TEST_ID } from "./constants";
-import { RootState } from "../../reducers";
-import { toggleCategoryExpansion } from "../../actions/controls";
 import { Props, StateProps } from "./types";
 
-class Categories extends React.Component<Props> {
+class Categorical extends React.Component<Props> {
   onExpansionChange = async (catName: string) => {
     const { expandedCategories, dispatch } = this.props;
 
@@ -190,4 +187,4 @@ function mapStateToProps(state: RootState): StateProps {
   };
 }
 
-export default connect(mapStateToProps)(Categories);
+export default connect(mapStateToProps)(Categorical);

client/src/components/categorical/categoryContext.ts → client/src/components/LeftSidebar/components/Categorical/categoryContext.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { AnnoMatrixObsCrossfilter } from "../../annoMatrix";
+import { AnnoMatrixObsCrossfilter } from "annoMatrix";
 
 /*
 CategoryCrossfilterContext is used to pass a snapshot of the crossfilter

client/src/components/categorical/category/index.tsx → client/src/components/LeftSidebar/components/Categorical/components/Category/Category.tsx

@@ -6,21 +6,20 @@ 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 { CategoryCrossfilterContext } from "../categoryContext";
-
-import * as globals from "../../../globals";
-import { createCategorySummaryFromDfCol } from "../../../util/stateManager/controlsHelpers";
+import { createCategorySummaryFromDfCol } from "util/stateManager/controlsHelpers";
 import {
   createColorTable,
   createColorQuery,
   ColorTable,
-} from "../../../util/stateManager/colorHelpers";
-import actions from "../../../actions";
-import { Dataframe } from "../../../util/dataframe";
-import { track } from "../../../analytics";
-import { EVENTS } from "../../../analytics/events";
-import { RootState } from "../../../reducers";
+} from "util/stateManager/colorHelpers";
+import actions from "actions";
+import { Dataframe } from "util/dataframe";
+import { track } from "analytics";
+import { EVENTS } from "analytics/events";
+import { RootState } from "reducers";
+import * as globals from "~/globals";
+import { CategoryCrossfilterContext } from "../../categoryContext";
+import CategoryValue from "./components/CategoryValue/CategoryValue";
 import {
   thunkTrackColorByCategoryExpand,
   thunkTrackColorByCategoryHighlightHistogram,
@@ -403,14 +402,21 @@ const ErrorLoading = ({ metadataField, error }: any) => {
 };
 
 interface CategoryHeaderProps {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS.
   metadataField: any;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS.
   checkboxID: any;
   isColorAccessor: boolean;
   isExpanded: boolean;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS.
   selectionState: any;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS.
   onColorChangeClick: (isColorAccessor: boolean) => void;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS.
   onCategoryMenuClick: any;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS.
   onCategoryMenuKeyPress: any;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS.
   onCategoryToggleAllClick: any;
 }
 
@@ -626,11 +632,16 @@ const CategoryRender = React.memo(
 );
 
 interface CategoryValueListProps {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS.
   metadataField: any;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS.
   categoryData: any;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS.
   categorySummary: any;
   colorAccessor: string;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS.
   colorData: any;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS.
   colorTable: any;
   colorMode: string;
 }
@@ -686,7 +697,7 @@ const CategoryValueList = React.memo(
     return (
       <>
         {tuples.map(([value, index]) => (
-          <Value
+          <CategoryValue
             key={value}
             metadataField={metadataField}
             categoryIndex={index}

client/src/components/categorical/category/analytics.ts → client/src/components/LeftSidebar/components/Categorical/components/Category/analytics.ts

@@ -1,8 +1,8 @@
 import {
   trackColorByCategoryExpand,
   trackColorByCategoryHighlightHistogram,
-} from "../../../analytics";
-import { GetState } from "../../../reducers";
+} from "analytics";
+import { GetState } from "reducers";
 
 export function thunkTrackColorByCategoryExpand(isColorByCategory: boolean) {
   return (_: unknown, getState: GetState) => {

client/src/components/categorical/value/index.tsx → client/src/components/LeftSidebar/components/Categorical/components/Category/components/CategoryValue/CategoryValue.tsx

@@ -3,24 +3,24 @@ 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";
+import { AnnotationsHelpers } from "util/stateManager";
+import actions from "actions";
+import { Dataframe, ContinuousHistogram } from "util/dataframe";
+import { track } from "analytics";
+import { EVENTS } from "analytics/events";
+import { RootState, AppDispatch } from "reducers";
+import { Schema, Category } from "common/types/schema";
+import { isDataframeDictEncodedColumn } from "util/dataframe/types";
+import { CategorySummary } from "util/stateManager/controlsHelpers";
+import { ColorTable } from "util/stateManager/colorHelpers";
+import { ActiveTab } from "common/types/entities";
+import { InfoButton, InfoButtonWrapper } from "common/style";
+import MiniStackedBar from "./components/MiniStackedBar/MiniStackedBar";
+import MiniHistogram from "./components/MiniHistogram/MiniHistogram";
+import { labelPrompt, isLabelErroneous } from "./labelUtil";
 // @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 { AnnotationsHelpers } from "../../../util/stateManager";
-import { labelPrompt, isLabelErroneous } from "../labelUtil";
-import actions from "../../../actions";
-import MiniHistogram from "../../miniHistogram";
-import MiniStackedBar from "../../miniStackedBar";
-import { Dataframe, ContinuousHistogram } from "../../../util/dataframe";
-import { track } from "../../../analytics";
-import { EVENTS } from "../../../analytics/events";
-import { RootState, AppDispatch } from "../../../reducers";
-import { Schema, Category } from "../../../common/types/schema";
-import { isDataframeDictEncodedColumn } from "../../../util/dataframe/types";
-import { CategorySummary } from "../../../util/stateManager/controlsHelpers";
-import { ColorTable } from "../../../util/stateManager/colorHelpers";
-import { ActiveTab } from "../../../common/types/entities";
-import { InfoButton, InfoButtonWrapper } from "../../../common/style";
+import styles from "../../../../categorical.css";
+import * as globals from "~/globals";
 
 const STACKED_BAR_HEIGHT = 11;
 const STACKED_BAR_WIDTH = 100;
@@ -391,6 +391,7 @@ class CategoryValue extends React.Component<Props, InternalStateProps> {
     return _currentLabelAsString(labelName);
   }
 
+  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any -- - FIXME: disabled temporarily on migrate to TS.
   isAddCurrentSelectionDisabled(crossfilter: any, category: any, value: any) {
     /*
     disable "add current selection to label", if one of the following is true:

client/src/components/categorical/labelUtil.tsx → client/src/components/LeftSidebar/components/Categorical/components/Category/components/CategoryValue/labelUtil.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Colors } from "@blueprintjs/core";
 
-import { AnnotationsHelpers } from "../../util/stateManager";
+import { AnnotationsHelpers } from "util/stateManager";
 
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any -- - FIXME: disabled temporarily on migrate to TS.
 export function isLabelErroneous(label: any, metadataField: any, schema: any) {

client/src/components/categorical/types.ts → client/src/components/LeftSidebar/components/Categorical/types.ts

@@ -1,6 +1,6 @@
-import { Schema } from "../../common/types/schema";
+import { Schema } from "common/types/schema";
 
-import { AppDispatch, RootState } from "../../reducers";
+import { AppDispatch, RootState } from "reducers";
 
 export interface DispatchProps {
   dispatch: AppDispatch;

client/src/components/NavBar/information.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { connect } from "react-redux";
 
 /* App dependencies */
-import InformationMenu from "../leftSidebar/infoMenu";
+import InformationMenu from "./infoMenu";
 import { RootState } from "../../reducers";
 
 // @ts-expect-error ts-migrate(1238) FIXME: Unable to resolve signature of class decorator whe... Remove this comment to see the full error message

client/src/components/framework/layoutSkeleton.tsx

@@ -5,7 +5,7 @@ import React from "react";
 /* App dependencies */
 import Controls from "common/components/Controls/Controls";
 import Layout from "./layout";
-import LeftSidebarSkeleton from "../leftSidebar/leftSidebarSkeleton";
+import LeftSidebarSkeleton from "../LeftSidebar/LeftSidebarSkeleton";
 import RightSidebarSkeleton from "../rightSidebar/rightSidebarSkeleton";
 
 /**