fix: workaround for graph optimization

src/pages/Questions/BranchingMap/CsComponent.tsx

@@ -308,6 +308,7 @@ function CsComponent  ({
 
 
   const readyLO = (e) => {
+    console.log('REAdy')
     if (e.cy.data('firstNode') === 'nonroot') {
       e.cy.data('firstNode', 'root')
       e.cy.nodes().sort((a, b) => (a.data('root') ? 1 : -1)).layout(lyopts).run()
@@ -415,12 +416,13 @@ function CsComponent  ({
     animate: false, // whether to transition the node positions
     animationDuration: 500, // duration of animation in ms if enabled
     animationEasing: undefined, // easing of animation if enabled
-    animateFilter: function (node, i) { return true; }, // a function that determines whether the node should be animated.  All nodes animated by default on animate enabled.  Non-animated nodes are positioned immediately when the layout starts
+    animateFilter: function (node, i) { return false; }, // a function that determines whether the node should be animated.  All nodes animated by default on animate enabled.  Non-animated nodes are positioned immediately when the layout starts
     ready: readyLO, // callback on layoutready
     transform: function (node, position) { return position; } // transform a given node position. Useful for changing flow direction in discrete layouts
   }
 
   useEffect(() => {
+    console.log('KEKEKE')
     document.querySelector("#root")?.addEventListener("mouseup", cleardragQuestionContentId);
     const cy = cyRef.current;
     const eles = cy?.add(storeToNodes(questions))
@@ -468,6 +470,7 @@ function CsComponent  ({
     if (!container) {
       return;
     }
+    console.log('POP')
 
     container.style.overflow = "hidden";
 
@@ -497,6 +500,7 @@ function CsComponent  ({
       const bb = n.boundingBox()
       return bb.x2 > ext.x1 && bb.x1 < ext.x2 && bb.y2 > ext.y1 && bb.y1 < ext.y2
     })
+    console.log('POPE')
 
     nodesInView
       .toArray()
@@ -509,6 +513,7 @@ function CsComponent  ({
             modifiers: [{ name: "flip", options: { boundary: node } }],
           },
           content: ([item]) => {
+    console.log('POPPER', item.id())
             const itemId = item.id();
             const itemElement = layoutsContainer.current?.querySelector(
               `.popper-layout[data-id='${itemId}']`
@@ -538,6 +543,7 @@ function CsComponent  ({
             modifiers: [{ name: "flip", options: { boundary: node } }],
           },
           content: ([item]) => {
+    console.log('POPPER+', item.id())
             const itemId = item.id();
             const itemElement = plusesContainer.current?.querySelector(
               `.popper-plus[data-id='${itemId}']`
@@ -566,6 +572,7 @@ function CsComponent  ({
             modifiers: [{ name: "flip", options: { boundary: node } }],
           },
           content: ([item]) => {
+    console.log('POPPERx', item.id())
             const itemId = item.id();
             const itemElement = crossesContainer.current?.querySelector(
               `.popper-cross[data-id='${itemId}']`
@@ -596,6 +603,7 @@ function CsComponent  ({
             modifiers: [{ name: "flip", options: { boundary: node } }],
           },
           content: ([item]) => {
+    console.log('POPPERg', item.id())
             const itemId = item.id();
             if (item.cy().edges(`[target="${itemId}"]`).sources().length === 0) {
               return;
@@ -622,6 +630,7 @@ function CsComponent  ({
         });
 
         const update = async () => {
+    console.log('POPPERi=u', item.id())
           await plusesPopper.update();
           await crossesPopper.update();
           await gearsPopper.update();
@@ -629,9 +638,10 @@ function CsComponent  ({
         };
 
         const onZoom = (event: AbstractEventObject) => {
+          console.log('ZOOOOM')
           const zoom = event.cy.zoom();
 
-          update();
+          //update();
 
           crossesPopper.setOptions({
             modifiers: [
@@ -684,8 +694,41 @@ function CsComponent  ({
             });
         };
 
-        node?.on("position", update);
+        //node?.on("position", update);
-        cy?.on("pan zoom resize render", onZoom);
+let pressed = false
+        let hide = false
+        cy?.on('mousedown',() => {pressed = true})
+        cy?.on('mouseup',() => {
+          pressed = false
+          hide = false
+          
+
+          const gc = gearsContainer.current
+          if (gc) gc.style.display = 'block'
+          const pc = plusesContainer.current
+          const xc = crossesContainer.current
+          const lc = layoutsContainer.current
+          if (pc) pc.style.display = 'block'
+          if (xc) xc.style.display = 'block'
+          if (lc) lc.style.display = 'block'
+            update()
+        })
+
+        cy?.on('mousemove',() => {
+          if (pressed && !hide) {
+            hide = true
+            const gc = gearsContainer.current
+            if (gc) gc.style.display = 'none'
+          const pc = plusesContainer.current
+          const xc = crossesContainer.current
+          const lc = layoutsContainer.current
+          if (pc) pc.style.display = 'none'
+          if (xc) xc.style.display = 'none'
+          if (lc) lc.style.display = 'block'
+          }
+          });
+ 
+        cy?.on("zoom render", onZoom);
       });
   };
 

src/pages/Questions/QuestionsPage.tsx

@@ -23,7 +23,7 @@ import { updateOpenBranchingPanel, updateEditSomeQuestion } from "@root/question
 export default function QuestionsPage() {
     const theme = useTheme();
     const { openedModalSettingsId, openBranchingPanel } = useQuestionsStore();
-    const isMobile = useMediaQuery(theme.breakpoints.down(660));
+    const isMobile = false//useMediaQuery(theme.breakpoints.down(660));
     const quiz = useCurrentQuiz();
     console.log(quiz)
     useLayoutEffect(() => {
@@ -116,4 +116,4 @@ export default function QuestionsPage() {
             {openedModalSettingsId !== null && <BranchingQuestions/>}
         </>
     );
-}
+}