realized lazy component, refactoring

src/pages/Questions/BranchingMap/CsNodeButtons.tsx

@@ -100,6 +100,10 @@ export default function CsNodeButtons({ csElements, cyRef }: Props) {
               const buttonData = buttonRefsById.current[csElement.data.id];
               if (buttonData) buttonData.select = r;
             }}
+            onClick={() => {
+              setModalQuestionParentContentId(csElement.data.id);
+              setOpenedModalQuestions(canAddChildToQuestion(csElement.data.id));
+            }}
           />,
         ])}
       </Box>
@@ -343,7 +347,12 @@ const CsSettingsButton = forwardRef<
 const SELECT_BUTTON_WIDTH = 130;
 const SELECT_BUTTON_HEIGHT = SELECT_BUTTON_WIDTH;
 
-const CsSelectButton = forwardRef<HTMLButtonElement>(({}, ref) => (
+const CsSelectButton = forwardRef<
+  HTMLButtonElement,
+  {
+    onClick: () => void;
+  }
+>(({ onClick }, ref) => (
   <IconButton
     ref={ref}
     sx={{
@@ -356,6 +365,7 @@ const CsSelectButton = forwardRef<HTMLButtonElement>(({}, ref) => (
       p: 0,
       zIndex: 0,
     }}
+    onClick={onClick}
     onMouseDownCapture={(event) => event.stopPropagation()}
     onTouchStartCapture={(event) => event.stopPropagation()}
   />

src/pages/Questions/BranchingMap/helper.ts

@@ -65,7 +65,8 @@ export const storeToNodes = (questions: AnyTypedQuizQuestion[]) => {
         question.title === "" || question.title === " "
           ? "noname"
           : question.title;
-      if (label.length > 17) label = label.slice(0, 17).toLowerCase() + "…";
+      label = label.trim().replace(/\s+/g, " ");
+      if (label.length > 20) label = label.slice(0, 20).toLowerCase() + "…";
 
       nodes.push({
         data: {

src/pages/Questions/BranchingQuestionsModal/index.tsx

@@ -122,8 +122,8 @@ export const BranchingQuestionsModal = () => {
               label={question.title || "нет заголовка"}
               disabled={!!question.content.rule.parentId}
               sx={{
-                padding: "8px 20px",
-                lineHeight: "20px",
+                padding: "8px 12px",
+                margin: 0,
                 width: "100%",
                 backgroundColor:
                   index % 2 === 0

src/pages/Questions/QuestionSwitchWindowTool.tsx

@@ -1,10 +1,12 @@
-import { Box, useMediaQuery, useTheme } from "@mui/material";
+import { Box, Skeleton, useMediaQuery, useTheme } from "@mui/material";
 import { deleteTimeoutedQuestions } from "@utils/deleteTimeoutedQuestions";
-import { useCallback } from "react";
-import { BranchingMap } from "./BranchingMap";
+import { lazy, Suspense, useCallback } from "react";
 import { DraggableList } from "./DraggableList";
 import { SwitchBranchingPanel } from "./SwitchBranchingPanel";
 
+const BranchingMap = lazy(() =>
+  import("./BranchingMap").then((module) => ({ default: module.BranchingMap })),
+);
 interface Props {
   openBranchingPage: boolean;
   setOpenBranchingPage: (a: boolean) => void;
@@ -31,13 +33,26 @@ export const QuestionSwitchWindowTool = ({
     <Box
       sx={{
         display: "flex",
-        gap: "20px",
+        flexWrap: "wrap",
         marginBottom: isMobile ? "25px" : "30px",
       }}
     >
       <Box sx={{ width: isTablet ? "100%" : "796px" }}>
         {openBranchingPage ? (
-          <BranchingMap />
+          <Suspense
+            fallback={
+              <Skeleton
+                sx={{
+                  maxWidth: "796px",
+                  width: "100%",
+                  height: isMobile ? "357px" : "521px",
+                  transform: "none",
+                }}
+              />
+            }
+          >
+            <BranchingMap />
+          </Suspense>
         ) : (
           <DraggableList
             openBranchingPage={openBranchingPage}