From 3818a9c386220d194869d608348ba4afd6794b64 Mon Sep 17 00:00:00 2001
From: yyassi-heartex <104568407+yyassi-heartex@users.noreply.github.com>
Date: Wed, 18 Dec 2024 06:21:53 -0500
Subject: [PATCH] fix: OPTIC-1178: Possible LS Memory Leak (#6704)

Co-authored-by: yyassi-heartex <yyassi-heartex@users.noreply.github.com>
---
 .../datamanager/src/components/App/App.jsx    | 26 +++++----
 .../CellViews/Agreement/Agreement.jsx         | 13 +++--
 .../CellViews/Annotators/Annotators.jsx       | 29 +++++-----
 .../AnnotationPreview/AnnotationPreview.jsx   |  6 +-
 .../Common/Dropdown/DropdownComponent.jsx     | 11 ++--
 .../src/components/Common/Form/Form.jsx       |  3 +-
 .../src/components/Common/Icon/Icon.jsx       |  6 +-
 .../src/components/Common/Menu/Menu.jsx       | 16 +++---
 .../src/components/Common/Table/Table.jsx     | 33 ++++++-----
 .../Common/Table/TableCell/TableCell.jsx      | 10 ++--
 .../components/Common/Table/TableContext.js   |  6 +-
 .../Common/Table/TableHead/TableHead.jsx      | 28 +++++-----
 .../Common/Table/TableRow/TableRow.jsx        | 23 ++++----
 .../src/components/Common/Tabs/Tabs.jsx       | 56 ++++++++++---------
 .../src/components/Common/Userpic/Userpic.jsx | 27 +++++----
 .../components/DataManager/DataManager.jsx    | 18 +++---
 .../components/MainView/GridView/GridView.jsx |  9 ++-
 web/libs/datamanager/src/sdk/lsf-sdk.js       |  5 --
 web/libs/datamanager/src/stores/AppStore.js   | 20 ++++---
 web/libs/datamanager/src/utils/bem.tsx        | 23 ++++----
 .../datamanager/src/utils/feature-flags.js    |  2 +
 web/libs/editor/src/components/App/App.jsx    |  8 ++-
 .../src/components/BottomBar/Controls.tsx     | 10 ++--
 .../InstructionsModal/InstructionsModal.tsx   |  2 +-
 .../src/components/Settings/Settings.jsx      |  2 +-
 25 files changed, 212 insertions(+), 180 deletions(-)

diff --git a/web/libs/datamanager/src/components/App/App.jsx b/web/libs/datamanager/src/components/App/App.jsx
index 9fdb0c21fb62..180fa82cd2b9 100644
--- a/web/libs/datamanager/src/components/App/App.jsx
+++ b/web/libs/datamanager/src/components/App/App.jsx
@@ -1,7 +1,8 @@
 import { observer, Provider } from "mobx-react";
 import React from "react";
+import clsx from "clsx";
 import { SDKProvider } from "../../providers/SDKProvider";
-import { Block, Elem } from "../../utils/bem";
+import { cn } from "../../utils/bem";
 import { Spinner } from "../Common/Spinner";
 import { DataManager } from "../DataManager/DataManager";
 import { Labeling } from "../Label/Label";
@@ -26,27 +27,32 @@ class ErrorBoundary extends React.Component {
  * @param {{app: import("../../stores/AppStore").AppStore} param0
  */
 const AppComponent = ({ app }) => {
+  const rootCN = cn("root");
+  const rootClassName = rootCN.mod({ mode: app.SDK.mode }).toString();
+  const crashCN = cn("crash");
   return (
     <ErrorBoundary>
       <Provider store={app}>
         <SDKProvider sdk={app.SDK}>
-          <Block name="root" mod={{ mode: app.SDK.mode }}>
+          <div className={rootClassName}>
             {app.crashed ? (
-              <Block name="crash">
-                <Elem name="header">Oops...</Elem>
-                <Elem name="description">Project has been deleted or not yet created.</Elem>
-              </Block>
+              <div className={clsx(rootCN.toString(), rootClassName)}>
+                <span className={rootCN.elem("header").toString()}>Oops...</span>
+                <span className={rootCN.elem("description").toString()}>
+                  Project has been deleted or not yet created.
+                </span>
+              </div>
             ) : app.loading ? (
-              <Block name="app-loader">
+              <div className={cn("app-loader").toString()}>
                 <Spinner size="large" />
-              </Block>
+              </div>
             ) : app.isLabeling ? (
               <Labeling />
             ) : (
               <DataManager />
             )}
-            <Block name={"offscreen"} />
-          </Block>
+            <div className={cn("offscreen").toString()} />
+          </div>
         </SDKProvider>
       </Provider>
     </ErrorBoundary>
diff --git a/web/libs/datamanager/src/components/CellViews/Agreement/Agreement.jsx b/web/libs/datamanager/src/components/CellViews/Agreement/Agreement.jsx
index eee6fc237f2e..d1896d7be987 100644
--- a/web/libs/datamanager/src/components/CellViews/Agreement/Agreement.jsx
+++ b/web/libs/datamanager/src/components/CellViews/Agreement/Agreement.jsx
@@ -1,4 +1,5 @@
-import { Block, Elem } from "../../../utils/bem";
+import clsx from "clsx";
+import { cn } from "../../../utils/bem";
 import { isDefined } from "../../../utils/utils";
 import "./Agreement.scss";
 
@@ -19,12 +20,14 @@ const formatNumber = (num) => {
 };
 
 export const Agreement = (column) => {
+  const agreementCN = cn("agreement");
+  const scoreElem = agreementCN.elem("score");
   return (
-    <Block name="agreement">
-      <Elem name="score" mod={{ [agreement(column.value)]: true }}>
+    <div className={agreementCN.toString()}>
+      <span className={clsx(scoreElem.toString(), scoreElem.mod({ [agreement(column.value)]: true }).toString())}>
         {isDefined(column.value) ? `${formatNumber(column.value)}%` : ""}
-      </Elem>
-    </Block>
+      </span>
+    </div>
   );
 };
 
diff --git a/web/libs/datamanager/src/components/CellViews/Annotators/Annotators.jsx b/web/libs/datamanager/src/components/CellViews/Annotators/Annotators.jsx
index 44c07e44e80a..c610bb78cbcf 100644
--- a/web/libs/datamanager/src/components/CellViews/Annotators/Annotators.jsx
+++ b/web/libs/datamanager/src/components/CellViews/Annotators/Annotators.jsx
@@ -1,7 +1,8 @@
 import { inject } from "mobx-react";
+import clsx from "clsx";
 import { LsCheckAlt, LsCrossAlt } from "../../../assets/icons";
 import { useSDK } from "../../../providers/SDKProvider";
-import { Block, Elem } from "../../../utils/bem";
+import { cn } from "../../../utils/bem";
 import { isDefined } from "../../../utils/utils";
 import { Space } from "../../Common/Space/Space";
 import { Tooltip } from "../../Common/Tooltip/Tooltip";
@@ -16,10 +17,12 @@ export const Annotators = (cell) => {
   const userList = Array.from(value);
   const renderable = userList.slice(0, 10);
   const extra = userList.length - renderable.length;
+  const userPickBadge = cn("userpic-badge");
+  const annotatorsCN = cn("annotators");
 
   return (
-    <Block name="annotators">
-      {renderable.map((item) => {
+    <div className={annotatorsCN.toString()}>
+      {renderable.map((item, index) => {
         const user = item.user ?? item;
         const { annotated, reviewed, review } = item;
 
@@ -28,9 +31,9 @@ export const Annotators = (cell) => {
         const suppressStats = column.alias === "comment_authors";
 
         return (
-          <Elem
-            key={`user-${user.id}`}
-            name="item"
+          <div
+            key={`user-${user.id}-${index}`}
+            className={annotatorsCN.elem("item").toString()}
             onClick={(e) => {
               e.preventDefault();
               e.stopPropagation();
@@ -43,19 +46,19 @@ export const Annotators = (cell) => {
                 faded={userpicIsFaded}
                 badge={{
                   bottomRight: review && (
-                    <Block name="userpic-badge" mod={{ [review]: true }}>
+                    <div className={clsx(userPickBadge.toString(), userPickBadge.mod({ [review]: true }).toString())}>
                       {review === "rejected" ? <LsCrossAlt /> : <LsCheckAlt />}
-                    </Block>
+                    </div>
                   ),
                 }}
               />
             </Tooltip>
-          </Elem>
+          </div>
         );
       })}
       {extra > 0 && (
-        <Elem
-          name="item"
+        <div
+          className={annotatorsCN.elem("item").toString()}
           onClick={(e) => {
             e.preventDefault();
             e.stopPropagation();
@@ -63,9 +66,9 @@ export const Annotators = (cell) => {
           }}
         >
           <Userpic username={`+${extra}`} />
-        </Elem>
+        </div>
       )}
-    </Block>
+    </div>
   );
 };
 
diff --git a/web/libs/datamanager/src/components/Common/AnnotationPreview/AnnotationPreview.jsx b/web/libs/datamanager/src/components/Common/AnnotationPreview/AnnotationPreview.jsx
index c60304897d3d..aec8b85f3bac 100644
--- a/web/libs/datamanager/src/components/Common/AnnotationPreview/AnnotationPreview.jsx
+++ b/web/libs/datamanager/src/components/Common/AnnotationPreview/AnnotationPreview.jsx
@@ -1,7 +1,7 @@
 import { inject, observer } from "mobx-react";
 import React from "react";
 import { taskToLSFormat } from "../../../sdk/lsf-utils";
-import { Block } from "../../../utils/bem";
+import { cn } from "../../../utils/bem";
 import { FF_LSDV_4711, isFF } from "../../../utils/feature-flags";
 import { Spinner } from "../Spinner";
 import "./AnnotationPreview.scss";
@@ -135,7 +135,7 @@ export const AnnotationPreview = injector(
         height={props.height}
       />
     ) : (
-      <Block name="annotation-preview" width={props.width} height={props.height}>
+      <div className={cn("annotation-preview").toString()} width={props.width} height={props.height}>
         <Spinner
           size={props.size ?? "default"}
           style={{
@@ -153,7 +153,7 @@ export const AnnotationPreview = injector(
           width={props.width}
           height={props.height}
         />
-      </Block>
+      </div>
     );
   }),
 );
diff --git a/web/libs/datamanager/src/components/Common/Dropdown/DropdownComponent.jsx b/web/libs/datamanager/src/components/Common/Dropdown/DropdownComponent.jsx
index c19305364b0d..8f7264f8b96d 100644
--- a/web/libs/datamanager/src/components/Common/Dropdown/DropdownComponent.jsx
+++ b/web/libs/datamanager/src/components/Common/Dropdown/DropdownComponent.jsx
@@ -1,6 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import { Block, cn } from "../../../utils/bem";
+import clsx from "clsx";
+import { cn } from "../../../utils/bem";
 import { alignElements } from "../../../utils/dom";
 import { aroundTransition } from "../../../utils/transition";
 import "./Dropdown.scss";
@@ -151,17 +152,15 @@ export const Dropdown = React.forwardRef(({ animated = true, visible = false, ..
     ...(offset ?? {}),
     zIndex: 1000 + dropdownIndex,
   };
-
   const result = (
-    <Block
+    <div
       ref={dropdown}
-      name="dropdown-dm"
-      mix={[props.className, visibilityClasses]}
+      className={clsx(rootName.toString(), rootName.mix([props.className, visibilityClasses]).toString())}
       style={compositeStyles}
       onClick={(e) => e.stopPropagation()}
     >
       {content}
-    </Block>
+    </div>
   );
 
   return props.inline === true ? result : ReactDOM.createPortal(result, document.body);
diff --git a/web/libs/datamanager/src/components/Common/Form/Form.jsx b/web/libs/datamanager/src/components/Common/Form/Form.jsx
index 1ec1fd459ff8..033cf5d6cf6b 100644
--- a/web/libs/datamanager/src/components/Common/Form/Form.jsx
+++ b/web/libs/datamanager/src/components/Common/Form/Form.jsx
@@ -474,8 +474,9 @@ Form.Builder = forwardRef(
     };
 
     const renderColumns = (columns) => {
+      const columnClassName = cn("form-dm").elem("column").toString();
       return columns.map((col, index) => (
-        <div className={cn("form-dm").elem("column")} key={index} style={{ width: col.width }}>
+        <div className={columnClassName} key={index} style={{ width: col.width }}>
           {renderFields(col.fields)}
         </div>
       ));
diff --git a/web/libs/datamanager/src/components/Common/Icon/Icon.jsx b/web/libs/datamanager/src/components/Common/Icon/Icon.jsx
index 28e599454201..f7123f2aafe8 100644
--- a/web/libs/datamanager/src/components/Common/Icon/Icon.jsx
+++ b/web/libs/datamanager/src/components/Common/Icon/Icon.jsx
@@ -1,11 +1,11 @@
 import React from "react";
-import { Block } from "../../../utils/bem";
+import { cn } from "../../../utils/bem";
 import "./Icon.scss";
 
 export const Icon = React.forwardRef(({ icon, ...props }, ref) => {
   return (
-    <Block tag="span" name="icon" ref={ref}>
+    <span className={cn("icon").toString()} ref={ref}>
       {React.createElement(icon, props)}
-    </Block>
+    </span>
   );
 });
diff --git a/web/libs/datamanager/src/components/Common/Menu/Menu.jsx b/web/libs/datamanager/src/components/Common/Menu/Menu.jsx
index eaca6b3991fa..2e7daa478017 100644
--- a/web/libs/datamanager/src/components/Common/Menu/Menu.jsx
+++ b/web/libs/datamanager/src/components/Common/Menu/Menu.jsx
@@ -1,10 +1,13 @@
 import React, { useCallback, useMemo } from "react";
-import { Block, cn } from "../../../utils/bem";
+import clsx from "clsx";
+import { cn } from "../../../utils/bem";
 import { useDropdown } from "../Dropdown/DropdownTrigger";
 import "./Menu.scss";
 import { MenuContext } from "./MenuContext";
 import { MenuItem } from "./MenuItem";
 
+const menuCN = cn("menu-dm");
+
 export const Menu = React.forwardRef(
   ({ children, className, style, size, selectedKeys, closeDropdownOnItemClick }, ref) => {
     const dropdown = useDropdown();
@@ -15,7 +18,7 @@ export const Menu = React.forwardRef(
 
     const clickHandler = useCallback(
       (e) => {
-        const elem = cn("menu-dm").elem("item").closest(e.target);
+        const elem = menuCN.elem("item").closest(e.target);
 
         if (dropdown && elem && closeDropdownOnItemClick !== false) {
           dropdown.close();
@@ -30,17 +33,14 @@ export const Menu = React.forwardRef(
 
     return (
       <MenuContext.Provider value={{ selected }}>
-        <Block
+        <ul
           ref={ref}
-          tag="ul"
-          name="menu-dm"
-          mod={{ size, collapsed }}
-          mix={className}
+          className={clsx(menuCN.toString(), menuCN.mod({ size, collapsed }).toString(), className)}
           style={style}
           onClick={clickHandler}
         >
           {children}
-        </Block>
+        </ul>
       </MenuContext.Provider>
     );
   },
diff --git a/web/libs/datamanager/src/components/Common/Table/Table.jsx b/web/libs/datamanager/src/components/Common/Table/Table.jsx
index 1e51f19f1cf6..4a0a62cd186b 100644
--- a/web/libs/datamanager/src/components/Common/Table/Table.jsx
+++ b/web/libs/datamanager/src/components/Common/Table/Table.jsx
@@ -13,11 +13,11 @@ import { modal } from "../Modal/Modal";
 import { Tooltip } from "../Tooltip/Tooltip";
 import "./Table.scss";
 import { TableCheckboxCell } from "./TableCheckbox";
-import { TableBlock, TableContext, TableElem } from "./TableContext";
+import { tableCN, TableContext } from "./TableContext";
 import { TableHead } from "./TableHead/TableHead";
 import { TableRow } from "./TableRow/TableRow";
 import { prepareColumns } from "./utils";
-import { Block } from "../../../utils/bem";
+import { cn } from "../../../utils/bem";
 import { FieldsButton } from "../FieldsButton";
 import { LsGear, LsGearNewUI } from "../../../assets/icons";
 import { FF_DEV_3873, FF_LOPS_E_10, FF_LOPS_E_3, isFF } from "../../../utils/feature-flags";
@@ -285,18 +285,19 @@ export const Table = observer(
       tableWrapper.current?.firstChild?.firstChild.offsetWidth -
         tableWrapper.current?.firstChild?.firstChild?.firstChild.offsetWidth || 0;
 
+    const columnsSelectorCN = cn("columns__selector");
     return (
       <>
         {view.root.isLabeling && (
-          <Block
-            name="columns__selector"
+          <div
+            className={columnsSelectorCN.toString()}
             style={{
               right,
             }}
           >
             {isFF(FF_DEV_3873) ? (
               <FieldsButton
-                className={"columns__selector__button-new"}
+                className={columnsSelectorCN.elem("button-new").toString()}
                 wrapper={FieldsButton.Checkbox}
                 icon={<LsGearNewUI />}
                 style={{ padding: "0" }}
@@ -316,9 +317,9 @@ export const Table = observer(
                 }}
               />
             )}
-          </Block>
+          </div>
         )}
-        <TableBlock ref={tableWrapper} name="table" mod={{ fit: props.fitToContent }}>
+        <div ref={tableWrapper} className={tableCN.mod({ fit: props.fitToContent }).toString()}>
           <TableContext.Provider value={contextValue}>
             <StickyList
               ref={listRef}
@@ -338,7 +339,7 @@ export const Table = observer(
               {renderRow}
             </StickyList>
           </TableContext.Provider>
-        </TableBlock>
+        </div>
       </>
     );
   },
@@ -388,7 +389,7 @@ const StickyList = observer(
 
     return (
       <StickyListContext.Provider value={itemData}>
-        <TableElem tag={AutoSizer} name="auto-size">
+        <AutoSizer className={tableCN.elem("auto-size")}>
           {({ width, height }) => (
             <InfiniteLoader
               ref={listRef}
@@ -399,9 +400,8 @@ const StickyList = observer(
               minimumBatchSize={30}
             >
               {({ onItemsRendered, ref }) => (
-                <TableElem
-                  name="virual"
-                  tag={VariableSizeList}
+                <VariableSizeList
+                  className={tableCN.elem("virual").toString()}
                   {...rest}
                   ref={ref}
                   width={width}
@@ -412,11 +412,11 @@ const StickyList = observer(
                   initialScrollOffset={initialScrollOffset?.(height) ?? 0}
                 >
                   {ItemWrapper}
-                </TableElem>
+                </VariableSizeList>
               )}
             </InfiniteLoader>
           )}
-        </TableElem>
+        </AutoSizer>
       </StickyListContext.Provider>
     );
   }),
@@ -430,9 +430,8 @@ const innerElementType = forwardRef(({ children, ...rest }, ref) => {
       {({ stickyItems, stickyItemsHeight, StickyComponent }) => (
         <div ref={ref} {...rest}>
           {stickyItems.map((index) => (
-            <TableElem
-              name="sticky-header"
-              tag={StickyComponent}
+            <StickyComponent
+              className={tableCN.elem("sticky-header").toString()}
               key={index}
               index={index}
               style={{
diff --git a/web/libs/datamanager/src/components/Common/Table/TableCell/TableCell.jsx b/web/libs/datamanager/src/components/Common/Table/TableCell/TableCell.jsx
index a1b49c4561f5..9cba3a881cfb 100644
--- a/web/libs/datamanager/src/components/Common/Table/TableCell/TableCell.jsx
+++ b/web/libs/datamanager/src/components/Common/Table/TableCell/TableCell.jsx
@@ -1,11 +1,11 @@
-import { TableElem } from "../TableContext";
+import { tableCN } from "../TableContext";
 
-export const TableCell = ({ ...props }) => {
-  return <TableElem {...props} name="cell" />;
+export const TableCell = ({ mix, mod, ...props }) => {
+  return <span {...props} className={tableCN.elem("cell").mod(mod).mix(mix).toString()} />;
 };
 TableCell.displayName = "TableCell";
 
-export const TableCellContent = ({ ...props }) => {
-  return <TableElem {...props} name="cell-content" />;
+export const TableCellContent = ({ mix, mod, ...props }) => {
+  return <span {...props} className={tableCN.elem("cell-content").mod(mod).mix(mix).toString()} />;
 };
 TableCellContent.displayName = "TableCellContent";
diff --git a/web/libs/datamanager/src/components/Common/Table/TableContext.js b/web/libs/datamanager/src/components/Common/Table/TableContext.js
index 2912f80fa176..9d62720081ee 100644
--- a/web/libs/datamanager/src/components/Common/Table/TableContext.js
+++ b/web/libs/datamanager/src/components/Common/Table/TableContext.js
@@ -1,6 +1,6 @@
 import React from "react";
-import { BemWithSpecifiContext } from "../../../utils/bem";
+import { cn } from "../../../utils/bem";
 
-export const TableContext = React.createContext();
+export const tableCN = cn("table");
 
-export const { Block: TableBlock, Elem: TableElem } = BemWithSpecifiContext();
+export const TableContext = React.createContext();
diff --git a/web/libs/datamanager/src/components/Common/Table/TableHead/TableHead.jsx b/web/libs/datamanager/src/components/Common/Table/TableHead/TableHead.jsx
index f4d58fbc0956..29033bb477b8 100644
--- a/web/libs/datamanager/src/components/Common/Table/TableHead/TableHead.jsx
+++ b/web/libs/datamanager/src/components/Common/Table/TableHead/TableHead.jsx
@@ -2,7 +2,6 @@ import { observer, useLocalStore } from "mobx-react";
 import { toJS } from "mobx";
 import React, { forwardRef, useCallback, useEffect, useRef } from "react";
 import { ViewColumnType, ViewColumnTypeName, ViewColumnTypeShort } from "../../../../stores/Tabs/tab_column";
-import { BemWithSpecifiContext } from "../../../../utils/bem";
 import { Button } from "../../Button/Button";
 import { Dropdown } from "../../Dropdown/Dropdown";
 import { Menu } from "../../Menu/Menu";
@@ -10,13 +9,14 @@ import { Resizer } from "../../Resizer/Resizer";
 import { Space } from "../../Space/Space";
 import { Tag } from "../../Tag/Tag";
 import { TableCell, TableCellContent } from "../TableCell/TableCell";
-import { TableContext, TableElem } from "../TableContext";
+import { TableContext, tableCN } from "../TableContext";
+import { cn } from "../../../../utils/bem";
 import { getStyle } from "../utils";
 import "./TableHead.scss";
 import { FF_DEV_3873, isFF } from "../../../../utils/feature-flags";
 import { getRoot } from "mobx-state-tree";
 
-const { Block, Elem } = BemWithSpecifiContext();
+const tableHeadCN = cn("table-head");
 
 const DropdownWrapper = observer(({ column, cellViews, children, onChange }) => {
   const types = ViewColumnType._types
@@ -93,9 +93,9 @@ const ColumnRenderer = observer(
       const { cellClassName: _, headerClassName, ...rest } = column;
 
       return (
-        <TableElem {...rest} name="cell" key={id} mix={["th", headerClassName]}>
+        <div {...rest} className={tableCN.elem("cell").mix(["th", headerClassName]).toString()} key={id}>
           <Header />
-        </TableElem>
+        </div>
       );
     }
 
@@ -113,7 +113,7 @@ const ColumnRenderer = observer(
           {content}
         </TableCellContent>
 
-        {extra && <Elem name="column-extra">{extra}</Elem>}
+        {extra && <span className={tableHeadCN.elem("column-extra").toString()}>{extra}</span>}
       </>
     );
 
@@ -218,15 +218,13 @@ export const TableHead = observer(
       }, []);
 
       return (
-        <Block
-          name="table-head"
+        <div
+          className={tableHeadCN.mod({ droppable: true }).mix("horizontal-shadow").toString()}
           ref={ref}
           style={{
             ...style,
             height: isFF(FF_DEV_3873) && 42,
           }}
-          mod={{ droppable: true }}
-          mix="horizontal-shadow"
           onDragOver={useCallback(
             (e) => {
               const draggedCol = states.getDraggedCol();
@@ -239,8 +237,8 @@ export const TableHead = observer(
         >
           {columns.map((col) => {
             return (
-              <Elem
-                name="draggable"
+              <span
+                className={tableHeadCN.elem("draggable").toString()}
                 draggable={true}
                 ref={(ele) => (colRefs.current[col.id] = ele)}
                 key={col.id}
@@ -288,11 +286,11 @@ export const TableHead = observer(
                   onResize={onResize}
                   onReset={onReset}
                 />
-              </Elem>
+              </span>
             );
           })}
-          <Elem name="extra">{extra}</Elem>
-        </Block>
+          <span className={tableHeadCN.elem("extra").toString()}>{extra}</span>
+        </div>
       );
     },
   ),
diff --git a/web/libs/datamanager/src/components/Common/Table/TableRow/TableRow.jsx b/web/libs/datamanager/src/components/Common/Table/TableRow/TableRow.jsx
index aad787749302..7ea7abf49d43 100644
--- a/web/libs/datamanager/src/components/Common/Table/TableRow/TableRow.jsx
+++ b/web/libs/datamanager/src/components/Common/Table/TableRow/TableRow.jsx
@@ -1,11 +1,11 @@
 import { observer } from "mobx-react";
 import React from "react";
-import { Block } from "../../../../utils/bem";
+import { cn } from "../../../../utils/bem";
 import { FF_LOPS_E_3, isFF } from "../../../../utils/feature-flags";
 import { normalizeCellAlias } from "../../../CellViews";
 import { SkeletonLoader } from "../../SkeletonLoader";
 import "./TableRow.scss";
-import { TableContext, TableElem } from "../TableContext";
+import { TableContext, tableCN } from "../TableContext";
 import { getProperty, getStyle } from "../utils";
 
 const CellRenderer = observer(({ col: colInput, data, decoration, cellViews }) => {
@@ -15,9 +15,9 @@ const CellRenderer = observer(({ col: colInput, data, decoration, cellViews }) =
     const { headerClassName: _, cellClassName, ...rest } = col;
 
     return (
-      <TableElem {...rest} name="cell" key={id} mix={cellClassName}>
+      <span className={tableCN.elem("cell").mix(cellClassName).toString()} {...rest} key={id}>
         <Cell data={data} />
-      </TableElem>
+      </span>
     );
   }
 
@@ -32,7 +32,7 @@ const CellRenderer = observer(({ col: colInput, data, decoration, cellViews }) =
   const cellIsLoading = isFF(FF_LOPS_E_3) && data.loading === colInput.alias;
 
   return (
-    <TableElem name="cell">
+    <div className={tableCN.elem("cell").toString()}>
       <div
         style={{
           ...(style ?? {}),
@@ -43,13 +43,14 @@ const CellRenderer = observer(({ col: colInput, data, decoration, cellViews }) =
       >
         {cellIsLoading ? <SkeletonLoader /> : Renderer ? <Renderer {...renderProps} /> : value}
       </div>
-    </TableElem>
+    </div>
   );
 });
 
 export const TableRow = observer(({ data, even, style, wrapperStyle, onClick, stopInteractions, decoration }) => {
   const { columns, cellViews } = React.useContext(TableContext);
-
+  const rowWrapperCN = tableCN.elem("row-wrapper");
+  const tableRowCN = cn("table-row");
   const mods = {
     even,
     selected: data.isSelected,
@@ -59,12 +60,12 @@ export const TableRow = observer(({ data, even, style, wrapperStyle, onClick, st
   };
 
   return (
-    <TableElem name="row-wrapper" mod={mods} style={wrapperStyle} onClick={(e) => onClick?.(data, e)}>
-      <Block name="table-row" style={style}>
+    <div className={rowWrapperCN.mod(mods).toString()} style={wrapperStyle} onClick={(e) => onClick?.(data, e)}>
+      <div className={tableRowCN.toString()} style={style}>
         {columns.map((col) => {
           return <CellRenderer key={col.id} col={col} data={data} cellViews={cellViews} decoration={decoration} />;
         })}
-      </Block>
-    </TableElem>
+      </div>
+    </div>
   );
 });
diff --git a/web/libs/datamanager/src/components/Common/Tabs/Tabs.jsx b/web/libs/datamanager/src/components/Common/Tabs/Tabs.jsx
index 0e087a9c9471..fbe7ef7bd3a6 100644
--- a/web/libs/datamanager/src/components/Common/Tabs/Tabs.jsx
+++ b/web/libs/datamanager/src/components/Common/Tabs/Tabs.jsx
@@ -1,7 +1,7 @@
 import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
 import { DragDropContext, Droppable } from "react-beautiful-dnd";
 import { FaEllipsisV } from "react-icons/fa";
-import { BemWithSpecifiContext } from "../../../utils/bem";
+import { cn } from "../../../utils/bem";
 import { Button } from "../Button/Button";
 import { Dropdown } from "../Dropdown/DropdownComponent";
 import { Icon } from "../Icon/Icon";
@@ -9,9 +9,8 @@ import Input from "../Input/Input";
 import "./Tabs.scss";
 import { TabsMenu } from "./TabsMenu";
 
-const { Block, Elem } = BemWithSpecifiContext();
-
 const TabsContext = createContext();
+export const tabsCN = cn("tabs-dm");
 
 export const Tabs = ({
   children,
@@ -45,22 +44,28 @@ export const Tabs = ({
 
   return (
     <TabsContext.Provider value={contextValue}>
-      <Block name="tabs-dm">
-        <Elem name="list">
+      <div className={tabsCN.toString()}>
+        <span className={tabsCN.elem("list").toString()}>
           <DragDropContext onDragEnd={onDragEnd}>
             <Droppable droppableId="droppable" direction="horizontal">
               {(provided) => (
-                <Elem ref={provided.innerRef} name="droppable" {...provided.droppableProps}>
+                <div
+                  className={tabsCN.elem("droppable").toString()}
+                  ref={provided.innerRef}
+                  {...provided.droppableProps}
+                >
                   {children}
                   {provided.placeholder}
-                </Elem>
+                </div>
               )}
             </Droppable>
           </DragDropContext>
-          {allowedActions.add !== false && <Elem tag={Button} name="add" type="text" onClick={onAdd} icon={addIcon} />}
-        </Elem>
-        <Elem name="extra">{tabBarExtraContent}</Elem>
-      </Block>
+          {allowedActions.add !== false && (
+            <Button className={tabsCN.elem("add").toString()} type="text" onClick={onAdd} icon={addIcon} />
+          )}
+        </span>
+        <span className={tabsCN.elem("extra").toString()}>{tabBarExtraContent}</span>
+      </div>
     </TabsContext.Provider>
   );
 };
@@ -121,18 +126,19 @@ export const TabsItem = ({
   );
 
   return (
-    <Elem
-      name="item"
-      mod={{ active, hover, virtual }}
+    <div
+      className={tabsCN.elem("item").mod({ active, hover, virtual }).toString()}
       onMouseEnter={() => setHover(true)}
       onMouseLeave={() => setHover(false)}
     >
-      <Elem
-        name="item-left"
+      <div
+        className={tabsCN
+          .elem("item-left")
+          .mod({
+            edit: renameMode,
+          })
+          .toString()}
         onClick={() => switchTab?.(tab)}
-        mod={{
-          edit: renameMode,
-        }}
         title={currentTitle}
       >
         {renameMode ? (
@@ -158,8 +164,8 @@ export const TabsItem = ({
             {currentTitle}
           </span>
         )}
-      </Elem>
-      <Elem name="item-right">
+      </div>
+      <div className={tabsCN.elem("item-right").toString()}>
         {showMenu && (
           <Dropdown.Trigger
             align="bottom-left"
@@ -185,17 +191,17 @@ export const TabsItem = ({
               />
             }
           >
-            <Elem name="item-right-button">
+            <div className={tabsCN.elem("item-right-button").toString()}>
               <Button
                 type="link"
                 size="small"
                 style={{ padding: "6px", margin: "auto", color: "#999" }}
                 icon={<Icon icon={FaEllipsisV} />}
               />
-            </Elem>
+            </div>
           </Dropdown.Trigger>
         )}
-      </Elem>
-    </Elem>
+      </div>
+    </div>
   );
 };
diff --git a/web/libs/datamanager/src/components/Common/Userpic/Userpic.jsx b/web/libs/datamanager/src/components/Common/Userpic/Userpic.jsx
index dfaac4009f97..d2baacd83963 100644
--- a/web/libs/datamanager/src/components/Common/Userpic/Userpic.jsx
+++ b/web/libs/datamanager/src/components/Common/Userpic/Userpic.jsx
@@ -1,5 +1,5 @@
 import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Block, Elem } from "../../../utils/bem";
+import { cn } from "../../../utils/bem";
 import { Tooltip } from "../Tooltip/Tooltip";
 import "./Userpic.scss";
 
@@ -13,6 +13,7 @@ export const Userpic = forwardRef(
     const [finalSrc, setFinalSrc] = useState(user?.avatar ?? src);
     const [imgVisible, setImgVisible] = useState(false);
     const [nameVisible, setNameVisible] = useState(true);
+    const userPicCN = cn("userpic-dm");
 
     if (size) {
       style = Object.assign({ width: size, height: size, fontSize: size * 0.4 }, style);
@@ -45,33 +46,35 @@ export const Userpic = forwardRef(
     }, [finalSrc]);
 
     const userpic = (
-      <Block ref={ref} name="userpic-dm" mix={className} mod={{ faded }} style={style} {...rest}>
-        <Elem
-          tag="img"
-          name="avatar"
+      <div ref={ref} className={userPicCN.mix(className).mod({ faded }).toString()} style={style} {...rest}>
+        <img
+          className={userPicCN.elem("avatar").mod({ faded }).toString()}
           ref={imgRef}
           src={finalSrc}
           alt={(finalUsername ?? "").toUpperCase()}
           style={{ opacity: imgVisible ? (faded ? 0.3 : 1) : 0 }}
           onLoad={onImageLoaded}
           onError={() => setFinalSrc(FALLBACK_IMAGE)}
-          mod={{ faded }}
         />
         {nameVisible && (
-          <Elem tag="span" name="username">
-            {(finalUsername ?? "").toUpperCase()}
-          </Elem>
+          <span className={userPicCN.elem("username").toString()}>{(finalUsername ?? "").toUpperCase()}</span>
         )}
 
         {badge &&
           Object.entries(badge).map(([align, content], i) => {
             return (
-              <Elem key={`badge-${i}`} name="badge" mod={{ [align]: true }}>
+              <span
+                key={`badge-${i}`}
+                className={userPicCN
+                  .elem("badge")
+                  .mod({ [align]: true })
+                  .toString()}
+              >
                 {content}
-              </Elem>
+              </span>
             );
           })}
-      </Block>
+      </div>
     );
 
     const userFullName = useMemo(() => {
diff --git a/web/libs/datamanager/src/components/DataManager/DataManager.jsx b/web/libs/datamanager/src/components/DataManager/DataManager.jsx
index 833b6417d9a9..0a2c6c831b86 100644
--- a/web/libs/datamanager/src/components/DataManager/DataManager.jsx
+++ b/web/libs/datamanager/src/components/DataManager/DataManager.jsx
@@ -2,7 +2,7 @@ import { inject, observer } from "mobx-react";
 import { useCallback } from "react";
 import { Draggable } from "react-beautiful-dnd";
 import { LSPlus } from "../../assets/icons";
-import { Block, Elem } from "../../utils/bem";
+import { cn } from "../../utils/bem";
 import { Interface } from "../Common/Interface";
 import { Space } from "../Common/Space/Space";
 import { Spinner } from "../Common/Spinner";
@@ -12,6 +12,8 @@ import { DataView } from "../MainView";
 import "./DataManager.scss";
 import { Toolbar } from "./Toolbar/Toolbar";
 
+const tabContentCN = cn("tabs-dm-content");
+
 const injector = inject(({ store }) => {
   const { sidebarEnabled, sidebarVisible } = store.viewsStore ?? {};
 
@@ -88,8 +90,8 @@ const TabsSwitch = switchInjector(
         {tabs.map((tab, index) => (
           <Draggable key={tab.key} draggableId={tab.key} index={index}>
             {(provided, snapshot) => (
-              <Elem
-                name={"draggable"}
+              <div
+                className={tabContentCN.elem("draggable").toString()}
                 ref={provided.innerRef}
                 {...provided.draggableProps}
                 {...provided.dragHandleProps}
@@ -114,7 +116,7 @@ const TabsSwitch = switchInjector(
                   deletable={tab.deletable}
                   virtual={tab.virtual}
                 />
-              </Elem>
+              </div>
             )}
           </Draggable>
         ))}
@@ -125,8 +127,8 @@ const TabsSwitch = switchInjector(
 
 export const DataManager = injector(({ shrinkWidth }) => {
   return (
-    <Block name="tabs-dm-content">
-      <Elem name="tab" mod={{ shrink: shrinkWidth }}>
+    <div className={tabContentCN.toString()}>
+      <div className={tabContentCN.elem("tab").mod({ shrink: shrinkWidth }).toString()}>
         <Interface name="tabs">
           <TabsSwitch />
         </Interface>
@@ -136,8 +138,8 @@ export const DataManager = injector(({ shrinkWidth }) => {
         </Interface>
 
         <DataView />
-      </Elem>
+      </div>
       <FiltersSidebar />
-    </Block>
+    </div>
   );
 });
diff --git a/web/libs/datamanager/src/components/MainView/GridView/GridView.jsx b/web/libs/datamanager/src/components/MainView/GridView/GridView.jsx
index c303869cb05f..6f38220d1c8b 100644
--- a/web/libs/datamanager/src/components/MainView/GridView/GridView.jsx
+++ b/web/libs/datamanager/src/components/MainView/GridView/GridView.jsx
@@ -17,7 +17,11 @@ const GridHeader = observer(({ row, selected }) => {
   return (
     <Elem name="cell-header">
       <Space>
-        <Checkbox checked={isSelected} ariaLabel={`${isSelected ? "Unselect" : "Select"} Task ${row.id}`} />
+        <Checkbox
+          checked={isSelected}
+          ariaLabel={`${isSelected ? "Unselect" : "Select"} Task ${row.id}`}
+          onChange={() => {}}
+        />
         <span>{row.id}</span>
       </Space>
     </Elem>
@@ -86,8 +90,7 @@ export const GridView = observer(({ data, view, loadMore, fields, onChange, hidd
   const renderItem = React.useCallback(
     ({ style, rowIndex, columnIndex }) => {
       const index = getCellIndex(rowIndex, columnIndex);
-      const row = data[index];
-
+      const row = data?.[index];
       if (!row) return null;
 
       const props = {
diff --git a/web/libs/datamanager/src/sdk/lsf-sdk.js b/web/libs/datamanager/src/sdk/lsf-sdk.js
index a695e2de78f5..9de0c966197e 100644
--- a/web/libs/datamanager/src/sdk/lsf-sdk.js
+++ b/web/libs/datamanager/src/sdk/lsf-sdk.js
@@ -167,17 +167,12 @@ export class LSFWrapper {
       interfaces = this.interfacesModifier(interfaces, this.labelStream);
     }
 
-    console.group("Interfaces");
-    console.log([...interfaces]);
-
     if (!this.shouldLoadNext()) {
       interfaces = interfaces.filter((item) => {
         return !["topbar:prevnext", "skip"].includes(item);
       });
     }
 
-    console.log([...interfaces]);
-    console.groupEnd();
     const queueTotal = dm.store.project.reviewer_queue_total || dm.store.project.queue_total;
     const queueDone = dm.store.project.queue_done;
     const queueLeft = dm.store.project.queue_left;
diff --git a/web/libs/datamanager/src/stores/AppStore.js b/web/libs/datamanager/src/stores/AppStore.js
index 7cd91a3c06de..78a914305576 100644
--- a/web/libs/datamanager/src/stores/AppStore.js
+++ b/web/libs/datamanager/src/stores/AppStore.js
@@ -204,7 +204,7 @@ export const AppStore = types
 
       if (!isDefined(taskID)) return;
 
-      self.loadingData = true;
+      self.setLoadingData(true);
 
       if (self.mode === "labelstream") {
         yield self.taskStore.loadNextTask({
@@ -217,19 +217,25 @@ export const AppStore = types
       } else {
         self.taskStore.setSelected(taskID);
 
-        yield self.taskStore.loadTask(taskID, {
+        const taskPromise = self.taskStore.loadTask(taskID, {
           select: !!taskID && !!annotationID,
         });
 
-        const annotation = self.LSF?.currentAnnotation;
-        const id = annotation?.pk ?? annotation?.id;
+        taskPromise.then(() => {
+          const annotation = self.LSF?.currentAnnotation;
+          const id = annotation?.pk ?? annotation?.id;
 
-        self.LSF?.setLSFTask(self.taskStore.selected, id);
+          self.LSF?.setLSFTask(self.taskStore.selected, id);
 
-        self.loadingData = false;
+          self.setLoadingData(false);
+        });
       }
     }),
 
+    setLoadingData(value) {
+      self.loadingData = value;
+    },
+
     unsetTask(options) {
       try {
         self.annotationStore.unset();
@@ -296,7 +302,7 @@ export const AppStore = types
       const nextAction = () => {
         self.SDK.setMode("labeling");
 
-        if (item && !item.isSelected) {
+        if (item?.id && !item.isSelected) {
           const labelingParams = {
             pushState: options?.pushState,
           };
diff --git a/web/libs/datamanager/src/utils/bem.tsx b/web/libs/datamanager/src/utils/bem.tsx
index 18b0ab2488f6..8fb6768bff0f 100644
--- a/web/libs/datamanager/src/utils/bem.tsx
+++ b/web/libs/datamanager/src/utils/bem.tsx
@@ -11,6 +11,7 @@ import {
   type ReactSVG,
   useContext,
 } from "react";
+import { FF_MEMORY_LEAK_FIX, isFF } from "./feature-flags";
 
 interface CNMod {
   [key: string]: unknown;
@@ -166,16 +167,18 @@ export const cn = (block: string, options: CNOptions = {}): CN => {
     },
   };
 
-  Object.defineProperty(classNameBuilder, "Block", { value: Block });
-  Object.defineProperty(classNameBuilder, "Elem", { value: Elem });
-  Object.defineProperty(classNameBuilder, "__class", {
-    value: {
-      block,
-      elem,
-      mix,
-      mod,
-    },
-  });
+  if (!isFF(FF_MEMORY_LEAK_FIX)) {
+    Object.defineProperty(classNameBuilder, "Block", { value: Block });
+    Object.defineProperty(classNameBuilder, "Elem", { value: Elem });
+    Object.defineProperty(classNameBuilder, "__class", {
+      value: {
+        block,
+        elem,
+        mix,
+        mod,
+      },
+    });
+  }
 
   return classNameBuilder;
 };
diff --git a/web/libs/datamanager/src/utils/feature-flags.js b/web/libs/datamanager/src/utils/feature-flags.js
index 4c0e30e80a3e..a3b1a84234ab 100644
--- a/web/libs/datamanager/src/utils/feature-flags.js
+++ b/web/libs/datamanager/src/utils/feature-flags.js
@@ -68,6 +68,8 @@ export const FF_LOPS_86 = "fflag_feat_front_lops_86_datasets_storage_edit_short"
  */
 export const FF_SELF_SERVE = "fflag_feat_front_leap_482_self_serve_short";
 
+export const FF_MEMORY_LEAK_FIX = "fflag_feat_all_optic_1178_reduce_memory_leak_short";
+
 // Customize flags
 const flags = {};
 
diff --git a/web/libs/editor/src/components/App/App.jsx b/web/libs/editor/src/components/App/App.jsx
index faa3c97cc72e..fa6f648f47fc 100644
--- a/web/libs/editor/src/components/App/App.jsx
+++ b/web/libs/editor/src/components/App/App.jsx
@@ -104,9 +104,11 @@ class App extends Component {
       >
         <Result status="success" title={getEnv(this.props.store).messages.NO_NEXT_TASK} />
         <Block name="sub__result">You have completed all tasks in the queue!</Block>
-        <Button onClick={(e) => store.prevTask(e, true)} look="outlined" style={{ margin: "16px 0" }}>
-          Go to Previous Task
-        </Button>
+        {store.taskHistory.length > 0 && (
+          <Button onClick={(e) => store.prevTask(e, true)} look="outlined" style={{ margin: "16px 0" }}>
+            Go to Previous Task
+          </Button>
+        )}
       </Block>
     );
   }
diff --git a/web/libs/editor/src/components/BottomBar/Controls.tsx b/web/libs/editor/src/components/BottomBar/Controls.tsx
index 4540cfde8f90..ff209c9ee197 100644
--- a/web/libs/editor/src/components/BottomBar/Controls.tsx
+++ b/web/libs/editor/src/components/BottomBar/Controls.tsx
@@ -122,7 +122,7 @@ export const Controls = controlsInjector<{ annotation: MSTAnnotation }>(
           if (customButton === "accept") {
             // just an example of internal button usage
             // @todo move buttons to separate components
-            buttons.push(<AcceptButton disabled={disabled} history={history} store={store} />);
+            buttons.push(<AcceptButton key={customButton} disabled={disabled} history={history} store={store} />);
           }
         } else {
           buttons.push(
@@ -163,23 +163,23 @@ export const Controls = controlsInjector<{ annotation: MSTAnnotation }>(
           }
         };
 
-        buttons.push(<ControlButton button={button} disabled={disabled} onClick={onReject} />);
+        buttons.push(<ControlButton key={button.name} button={button} disabled={disabled} onClick={onReject} />);
       });
-      buttons.push(<AcceptButton disabled={disabled} history={history} store={store} />);
+      buttons.push(<AcceptButton key="review-accept" disabled={disabled} history={history} store={store} />);
     } else if (annotation.skipped) {
       buttons.push(
         <Elem name="skipped-info" key="skipped">
           <IconBan color="#d00" /> Was skipped
         </Elem>,
       );
-      buttons.push(<UnskipButton disabled={disabled} store={store} />);
+      buttons.push(<UnskipButton key="unskip" disabled={disabled} store={store} />);
     } else {
       if (store.hasInterface("skip")) {
         const onSkipWithComment = (e: React.MouseEvent, action: () => any) => {
           handleActionWithComments(e, action, "Please enter a comment before skipping");
         };
 
-        buttons.push(<SkipButton disabled={disabled} store={store} onSkipWithComment={onSkipWithComment} />);
+        buttons.push(<SkipButton key="skip" disabled={disabled} store={store} onSkipWithComment={onSkipWithComment} />);
       }
 
       const isDisabled = disabled || submitDisabled;
diff --git a/web/libs/editor/src/components/InstructionsModal/InstructionsModal.tsx b/web/libs/editor/src/components/InstructionsModal/InstructionsModal.tsx
index cfba12b7b237..ba758b433e26 100644
--- a/web/libs/editor/src/components/InstructionsModal/InstructionsModal.tsx
+++ b/web/libs/editor/src/components/InstructionsModal/InstructionsModal.tsx
@@ -19,7 +19,7 @@ export const InstructionsModal = ({
     <>
       <Modal
         title=""
-        visible={visible}
+        open={visible}
         maskClosable
         footer={null}
         closable={true}
diff --git a/web/libs/editor/src/components/Settings/Settings.jsx b/web/libs/editor/src/components/Settings/Settings.jsx
index 27a45e2a3eda..7bce94a125a4 100644
--- a/web/libs/editor/src/components/Settings/Settings.jsx
+++ b/web/libs/editor/src/components/Settings/Settings.jsx
@@ -227,7 +227,7 @@ export default observer(({ store }) => {
   return (
     <Block
       tag={Modal}
-      visible={store.showingSettings}
+      open={store.showingSettings}
       onCancel={store.toggleSettings}
       footer=""
       {...DEFAULT_MODAL_SETTINGS}