wip

plotly · jcuypers · Feb 21, 2023 · Feb 21, 2023 · Feb 21, 2023 · Feb 24, 2023
commit acca08adcfe3048710446d34db3335643b6475d2
@@ -56,7 +56,6 @@ def _set_react_version(v_react, v_reactdom=None):
 _env_react_version = os.getenv("REACT_VERSION")
 if _env_react_version:
     _set_react_version(_env_react_version)
-    print(f"EXPERIMENTAL: Using react version from env: {_env_react_version}")
 else:
     _set_react_version("16.14.0", "16.14.0")
 

@@ -23,8 +23,10 @@
   "dependencies": {
     "@babel/polyfill": "^7.12.1",
     "@plotly/dash-component-plugins": "^1.2.3",
+    "ag-grid-community": "^29.1.0",
+    "ag-grid-react": "^29.1.0",
     "cookie": "^0.5.0",
-    "cytoscape": "^3.23.0",
+    "cytoscape": "file:../../../cytoscape.js/cytoscape-3.2.22.tgz",
     "cytoscape-dagre": "^2.4.0",
     "cytoscape-fcose": "^2.1.0",
     "dependency-graph": "^0.11.0",
@@ -33,7 +35,7 @@
     "prop-types": "15.8.1",
     "ramda": "^0.28.0",
     "react": "16.14.0",
-    "react-cytoscapejs": "^2.0.0",
+    "react-cytoscapejs": "file:../../../react-cytoscapejs/react-cytoscapejs-2.0.0.tgz",
     "react-dom": "16.14.0",
     "react-hook-mousetrap": "^2.0.4",
     "react-json-tree": "^0.17.0",

@@ -1,3 +1,20 @@
+.dash-callback-dag--container-portal {
+    border-radius: 4px;
+    /* position: fixed; */
+    bottom: 16px;
+    right: 16px;
+    width: calc(100vw - 32px);
+    height: calc(100vh - 32px);
+    overflow: auto;
+    box-sizing: border-box;
+    background: #ffffff;
+    display: inline-block;
+    /* shadow-1 */
+    box-shadow: 0px 6px 16px rgba(80, 103, 132, 0.165),
+        0px 2px 6px rgba(80, 103, 132, 0.12),
+        0px 0px 1px rgba(80, 103, 132, 0.32);
+}
+
 .dash-callback-dag--container {
     border-radius: 4px;
     position: fixed;

@@ -8,7 +8,8 @@ import fcose from 'cytoscape-fcose';
 import {JSONTree} from 'react-json-tree';
 import {keys, mergeRight, omit, path, values} from 'ramda';
 
-import {SearchBox} from './Search/SearchBox.react';
+//import {MemoSearchBox, SearchBox} from './Search/SearchBox.react';
+import {MemoSearchBox} from './Search/SearchBox.react';
 
 import {getPath} from '../../../actions/paths';
 import {stringifyId} from '../../../actions/dependencies';
@@ -24,10 +25,16 @@ import {
     focusOnSearchItem
 } from './CallbackGraphEffects';
 
+//import {NewWindow} from '../menu/NewWindow.react';
+
 import {NewWindow} from '../menu/NewWindow.react';
 
+//import { CallbackTable } from '../CallbackTable/CallbackTable.react';
+
 import {layouts} from './CallbackGraphLayouts';
 
+//import { Counter } from './Counter/Counter.react';
+
 /* import useMousetrap from 'react-hook-mousetrap'; */
 
 Cytoscape.use(dagre);
@@ -297,7 +304,7 @@ function CallbackGraph() {
             cytoscape.on('zoom', setPresetLayout);
             cytoscape.on('pan', setPresetLayout);
             cytoscape.nodes().on('position', setPresetLayout);
-            cytoscape.removeAllListeners();
+            //cytoscape.removeAllListeners();
         },
         [cytoscape]
     );
@@ -310,26 +317,45 @@ function CallbackGraph() {
         setSearchBoxActive(!searchBoxActive);
     };
 
-    const rebindCyEvents = () => {
-        //^^^ does not work
-        //console.log('PORTAL MODE - listeners - Before clear');
-        //console.log(cytoscape);
-        // the actual window stops working ---  confirmed
-        //cytoscape.nodes().removeAllListeners();
-        // ** whatever i do here just adds them back to the main window
-        //cytoscape.on('tap', 'node', e => { setSelected(e.target) });
-        //cytoscape.on('tap', e => {
-        //    if (e.target === cy) {
-        //        setSelected(null);
-        //    }
-        //console.log('PORTAL MODE - listeners - After clear');
-        //console.log(cytoscape);
-        //cytoscape.on('zoom', setPresetLayout(cytoscape));
-        // cytoscape.on('pan', setPresetLayout(cytoscape));
-        //cytoscape.nodes().on('position', setPresetLayout(cytoscape));
-    };
+    //    const rebindCyEvents = () => {
+    //^^^ does not work
+    //console.log('PORTAL MODE - listeners - Before clear');
+    //console.log(cytoscape);
+    // the actual window stops working ---  confirmed
+    //cytoscape.nodes().removeAllListeners();
+    // ** whatever i do here just adds them back to the main window
+    //cytoscape.on('tap', 'node', e => { setSelected(e.target) });
+    //cytoscape.on('tap', e => {
+    //    if (e.target === cy) {
+    //        setSelected(null);
+    //    }
+    //console.log('PORTAL MODE - listeners - After clear');
+    //console.log(cytoscape);
+    //cytoscape.on('zoom', setPresetLayout(cytoscape));
+    // cytoscape.on('pan', setPresetLayout(cytoscape));
+    //cytoscape.nodes().on('position', setPresetLayout(cytoscape));
+    //   };
 
     const togglePortalMode = () => {
+        /*         console.log('############# togglePortalMode')
+
+
+        console.log('Before -----')
+        console.log(cytoscape._private.emitter.listeners);
+        console.log(cytoscape._private.renderer.bindings);
+
+        cytoscape.off('tap');
+
+        console.log('After -----')
+        console.log(cytoscape._private.emitter.listeners);
+        console.log(cytoscape._private.renderer.bindings);
+ */
+
+        setTimeout(() => {
+            //         console.log('RESET LISTENERS');
+            cytoscape.resetListeners();
+        }, 2000);
+
         setPortalMode(!portalMode);
     };
 
@@ -469,26 +495,53 @@ function CallbackGraph() {
             ? graphLayout
             : mergeRight(layouts[layoutType], {ready: setPresetLayout});
 
+    const findCSS = () => {
+        return document.querySelectorAll('link, style');
+    };
+
+    /*     const [counter, setCounter] = useState(0);
+
+    useEffect(() => {
+      const interval = setInterval(() => {
+        setCounter(prevCounter => prevCounter + 1);
+      }, 1000);
+
+      return () => {
+        clearInterval(interval);
+      };
+    },[]);
+ */
     return (
-        <>
+        <React.StrictMode>
             <NewWindow
                 open={portalMode}
-                rebindEvents={rebindCyEvents}
+                css={findCSS()}
                 name='dash' /* css={findCSS()} */
             >
-                <div id='testtest' className='dash-callback-dag--container'>
+                {/* <Counter counter={counter}/> */}
+
+                <div
+                    id='cytoscapeContainer'
+                    className={
+                        portalMode
+                            ? 'dash-callback-dag--container-portal'
+                            : 'dash-callback-dag--container'
+                    }
+                >
                     <CytoscapeComponent
                         style={{width: '100%', height: '100%'}}
                         cy={setCytoscape}
                         elements={elements}
                         layout={cyLayout}
                         stylesheet={stylesheet}
+                        //key="Cytoscape"
+                        //hideZeroOnly={hideZeroOnly}
                     />
 
                     <div className='menu-bar-container'>
                         <div className='menu-bar'>
                             <div className='search-bar'>
-                                <SearchBox
+                                <MemoSearchBox
                                     //   ref={searchbox}
                                     data={elements}
                                     active={searchBoxActive}
@@ -499,6 +552,7 @@ function CallbackGraph() {
                                             e.currentTarget.dataset.id
                                         )
                                     }
+                                    /* key="searchBox" */
                                 />
                             </div>
                             <div className='filter-bar'>
@@ -511,15 +565,15 @@ function CallbackGraph() {
                                         e.target.blur();
                                     }}
                                 />
-                                <button >
-                                    Portal
-                                </button>
                                 <label
                                     className='hideZeroOnlyLabel'
                                     htmlFor='chkb_non_zero'
                                 >
                                     Hide zero values
                                 </label>
+                                <button >
+                                    Portal
+                                </button>
                                 {/* <button id="enlarge"  */}
                             </div>
                             <div className='layout-bar'>
@@ -565,9 +619,13 @@ function CallbackGraph() {
                             />
                         </div>
                     ) : null}
+                    {/* 
+                    <CallbackTable>
+F
+                    </CallbackTable> */}
                 </div>
             </NewWindow>
-        </>
+        </React.StrictMode>
     );
 }