Migrate Redux bridge toward shared universe state

package.json

@@ -24,8 +24,8 @@
     "@fortawesome/react-fontawesome": "^0.2.2",
     "@isomorphic-git/lightning-fs": "^4.6.0",
     "@octokit/rest": "^21.1.1",
-    "@reduxjs/toolkit": "^2.2.7",
     "@redux-devtools/extension": "^3.3.0",
+    "@reduxjs/toolkit": "^2.2.7",
     "@rehooks/local-storage": "^2.4.5",
     "@sanity/image-url": "^1.1.0",
     "@svgr/webpack": "^8.1.0",
@@ -63,7 +63,7 @@
     "markdown-to-jsx": "^7.7.4",
     "marked": "^15.0.7",
     "micro-cors": "^0.1.1",
-    "next": "^15.2.3",
+    "next": "^15.5.19",
     "next-redux-wrapper": "8.1.0",
     "next-remove-imports": "^1.0.12",
     "node": "^20.19.0",

src/components/Modeller.tsx

@@ -4,7 +4,6 @@
 import React, { useState, useEffect, useRef, useImperativeHandle } from "react";
 import { useDispatch } from 'react-redux';
 import { TabContent, TabPane, Nav, NavItem, NavLink, Row, Col, Tooltip } from 'reactstrap';
-import { select } from "redux-saga/effects";
 import Modal from "react-bootstrap/Modal";
 import Button from "react-bootstrap/Button";
 
@@ -18,6 +17,7 @@ import { SaveAkmmUser } from "./utils/SaveAkmmUser";
 import ReportModule from "./export/ReportModule";
 import * as uib from '../akmm/ui_buildmodels';
 import { setColorsTopOSDUTypes } from "./utils/SetColorsTopOSDUTypes";
+import { loadLegacyUniverseSnapshot } from "../sharedUniverse";
 
 import classnames from 'classnames';
 
@@ -150,10 +150,7 @@ const Modeller = React.forwardRef((props: any, ref) => {
     const includeDeleted = (props.phUser?.focusUser) ? props.phUser?.focusUser?.diagram?.showDeleted : false;
 
     function dispatchLocalStore(locStore) {
-        dispatch({ type: 'LOAD_TOSTORE_PHDATA', data: locStore.phData })
-        dispatch({ type: 'LOAD_TOSTORE_PHFOCUS', data: locStore.phFocus })
-        dispatch({ type: 'LOAD_TOSTORE_PHSOURCE', data: locStore.phSource })
-        dispatch({ type: 'LOAD_TOSTORE_PHUSER', data: locStore.phUser })
+        dispatch(loadLegacyUniverseSnapshot(locStore))
     }
 
     // Function to toggle the expanded state

src/components/Modelling.tsx

@@ -34,6 +34,7 @@ import useSessionStorage from '../hooks/use-session-storage'
 import * as akm from '../akmm/metamodeller';
 import genGqlSchema from "../../pagestmp/genGqlSchema";
 import { setMymetisModel } from "../actions/actions";
+import { bindLegacyUniverseDispatch, selectSharedUniverseState } from "../sharedUniverse";
 
 const clog = console.log.bind(console, '%c %s', // green colored cosole log
   'background: blue; color: white');
@@ -68,7 +69,8 @@ const Modelling = (props: any) => {
   if (typeof window === 'undefined') return <></>
   // if (!props) return <></>
   if (debug) console.log('55 Modelling:', props)//, props);        
-  const dispatch = useDispatch();
+  const rawDispatch = useDispatch();
+  const dispatch = useMemo(() => bindLegacyUniverseDispatch(rawDispatch), [rawDispatch]);
   const store = useStore();
 
   const projectModalRef = useRef(null);
@@ -102,18 +104,32 @@ const Modelling = (props: any) => {
   // const [visibleContext, setVisibleContext] = useState(true)
   // const [visibleFocusDetails, setVisibleFocusDetails] = useState(true) // show/hide the focus details (right side)
 
-  let focusModel = useSelector(focusModel => props.phFocus?.focusModel)
-  let focusModelview = useSelector(focusModelview => props.phFocus?.focusModelview)
-  const focusObjectview = useSelector(focusObjectview => props.phFocus?.focusObjectview)
-  const focusRelshipview = useSelector(focusRelshipview => props.phFocus?.focusRelshipview)
-  const focusObjecttype = useSelector(focusObjecttype => props.phFocus?.focusObjecttype)
-  const focusRelshiptype = useSelector(focusRelshiptype => props.phFocus?.focusRelshiptype)
-  const phSource = useSelector(phSource => props.phSource)
+  const sharedUniverse = useSelector(selectSharedUniverseState);
+  const metis = sharedUniverse.world.worldModel.metis ?? props.phData?.metis;
+  const phFocus = sharedUniverse.world.focus ?? props.phFocus;
+  const phUser = sharedUniverse.user ?? props.phUser;
+  const phSource = sharedUniverse.source ?? props.phSource;
+  const phData = useMemo(() => ({
+    ...props.phData,
+    domain: sharedUniverse.world.worldDefinition.domain ?? props.phData?.domain,
+    metis,
+  }), [props.phData, sharedUniverse.world.worldDefinition.domain, metis]);
+  const compatibilityProps = useMemo(() => ({
+    ...props,
+    phData,
+    phFocus,
+    phUser,
+    phSource,
+  }), [props, phData, phFocus, phUser, phSource]);
+
+  let focusModel = phFocus?.focusModel
+  let focusModelview = phFocus?.focusModelview
+  const focusObjectview = phFocus?.focusObjectview
+  const focusRelshipview = phFocus?.focusRelshipview
+  const focusObjecttype = phFocus?.focusObjecttype
+  const focusRelshiptype = phFocus?.focusRelshiptype
   if (debug) console.log('69 Modelling', focusModel, focusModelview);
 
-  const ph = props
-  const metis = ph.phData?.metis
-
   const getPersistedState = () => {
     const state = store.getState();
     return trimPersistedStateForBrowserStorage({
@@ -137,8 +153,8 @@ const Modelling = (props: any) => {
 
   if (debug) console.log('130 Modelling curmodview', curmod, curmodview, models, focusModel?.name, focusModelview?.name);
 
-  const focusTargetModel = (props.phFocus) && props.phFocus.focusTargetModel
-  const focusTargetModelview = (props.phFocus) && props.phFocus.focusTargetModelview
+  const focusTargetModel = phFocus?.focusTargetModel
+  const focusTargetModelview = phFocus?.focusTargetModelview
   const curtargetmodel = (models && focusTargetModel?.id) && models.find((m: any) => m.id === curmod?.targetModelRef)
   const targetModelviews = Array.isArray(curtargetmodel?.modelviews) ? curtargetmodel.modelviews.filter((mv: any) => mv) : []
   const focustargetmodelview = (curtargetmodel && focusTargetModelview?.id) && targetModelviews.find((mv: any) => mv.id === focusTargetModelview?.id)
@@ -187,10 +203,10 @@ const Modelling = (props: any) => {
     if (debug) useEfflog('223 Modelling useEffect 1', myMetis)
     myMetis.modelType = 'Modelling';
     if (!debug) console.log('147 Modelling useEffect 2 ', myMetis, activeTab, activetabindex);
-    GenGojsModel(props, myMetis)
+    GenGojsModel(compatibilityProps, myMetis)
     setActiveTab(activetabindex)
     setMount(true);
-  }, [props.phFocus?.focusModel?.id, props.phFocus?.focusModelview?.id, refresh])
+  }, [phFocus?.focusModel?.id, phFocus?.focusModelview?.id, refresh])
 
   useEffect(() => {
     setActiveTab(activetabindex);
@@ -296,7 +312,7 @@ const Modelling = (props: any) => {
         modifiedDate: new Date().toISOString(),
       }
     });
-    if (props.phFocus?.focusModel?.id === model.id) {
+    if (phFocus?.focusModel?.id === model.id) {
       dispatch({ type: 'SET_FOCUS_MODEL', data: { id: model.id, name: nextName } });
     }
     handleCloseRenameModelModal();
@@ -324,7 +340,7 @@ const Modelling = (props: any) => {
       className={`projectModalOpen ${!projectModalOpen ? "d-block" : "d-none"}`} style={{ marginLeft: "200px", marginTop: "100px", backgroundColor: "#fee", zIndex: "9999" }} ref={projectModalRef}>
       <Modal.Header closeButton>GitHub Settings: </Modal.Header>
       <Modal.Body >
-        <ProjectDetailsForm props={props} onSubmit={handleSubmit} />
+        <ProjectDetailsForm props={compatibilityProps} onSubmit={handleSubmit} />
       </Modal.Body>
       <Modal.Footer>
         <Button color="link" onClick={handleCloseProjectModal} >Exit</Button>
@@ -335,26 +351,26 @@ const Modelling = (props: any) => {
   // Keep GitHub Settings modal closed by default; open explicitly via UI actions only.
 
   useEffect(() => {
-    if (debug) useEfflog('163 Modelling useEffect 3 [props.phSource]', props.phSource)
-    if (!props.phFocus?.focusRefresh?.id) return;
+    if (debug) useEfflog('163 Modelling useEffect 3 [phSource]', phSource)
+    if (!phFocus?.focusRefresh?.id) return;
     doRefresh();
-    if (debug) console.log('226 ', props.phFocus.focusModel?.name, props.phFocus.focusModelview?.name, props.phFocus?.focusRefresh?.name);
-  }, [props.phFocus?.focusRefresh?.id])
+    if (debug) console.log('226 ', phFocus.focusModel?.name, phFocus.focusModelview?.name, phFocus?.focusRefresh?.name);
+  }, [phFocus?.focusRefresh?.id])
 
   useEffect(() => { // Genereate GoJs node model when the focusRefresch.id changes
-    if (debug) useEfflog('223 Modelling useEffect 4 [props.phFocus?.focusModelview.id]', props.phFocus.focusModel?.name, props.phFocus.focusModelview?.name, props.phFocus?.focusRefresh?.name);
-    if (debug) console.log('226 ', props.phFocus.focusModel?.name, props.phFocus.focusModelview?.name, props.phFocus?.focusRefresh?.id);
+    if (debug) useEfflog('223 Modelling useEffect 4 [phFocus?.focusModelview.id]', phFocus.focusModel?.name, phFocus.focusModelview?.name, phFocus?.focusRefresh?.name);
+    if (debug) console.log('226 ', phFocus.focusModel?.name, phFocus.focusModelview?.name, phFocus?.focusRefresh?.id);
     setRefresh(prev => !prev)
-  }, [props.phFocus?.focusRefresh?.id])
+  }, [phFocus?.focusRefresh?.id])
 
   useEffect(() => {
     const persistedProps = getPersistedState();
     setMemorySessionState(persistedProps)
     setMemoryLocState(persistedProps)
-  }, [props.phData, props.phFocus, props.phSource, props.phUser])
+  }, [phData, phFocus, phSource, phUser])
 
   function doRefresh() { // 
-    if (!debug) console.log('207 Modelling doRefresh', props);
+    if (!debug) console.log('207 Modelling doRefresh', compatibilityProps);
     const persistedProps = getPersistedState();
     setMemorySessionState(persistedProps)
     setMemoryLocState(persistedProps)
@@ -375,10 +391,6 @@ const Modelling = (props: any) => {
   };
 
   if (mount) {
-    let phFocus = props.phFocus;
-    let phData = props.phData
-    let phUser = props.phUser
-
     if (debug) console.log('255 Modelling', metis.metamodels, metis.models, curmod, curmodview, focusModel);
     if (debug) console.log('256 Modelling', curmod, curmodview);
 
@@ -746,12 +758,12 @@ const Modelling = (props: any) => {
     )
 
     if (debug) console.log('583 Modelling', activeTab);
-    const loadjsonfile = (typeof window !== 'undefined') && <LoadJsonFile buttonLabel='OSDU Import' className='ContextModal' ph={props} refresh={refresh} setRefresh={setRefresh} />
-    const loadgithub = (typeof window !== 'undefined') && <LoadGitHub buttonLabel='GitHub' className='ContextModal' ph={props} refresh={refresh} setRefresh={setRefresh} />
-    const loadnewModelproject = (typeof window !== 'undefined') && <LoadNewModelProjectFromGithub buttonLabel='New Modelproject' className='ContextModal' ph={props} refresh={refresh} setRefresh={setRefresh} />
-    const loadMetamodel = (typeof window !== 'undefined') && <LoadMetamodelFromGithub buttonLabel='Load Metamodel' className='ContextModal' ph={props} refresh={refresh} setRefresh={setRefresh} />
-    const loadfile = (typeof window !== 'undefined') && <LoadFile buttonLabel='' className='ContextModal' ph={props} refresh={refresh} setRefresh={setRefresh} />
-    const loadrecovery = (typeof window !== 'undefined') && <LoadRecovery buttonLabel='Recovery' className='ContextModal' ph={props} refresh={refresh} setRefresh={setRefresh} />
+    const loadjsonfile = (typeof window !== 'undefined') && <LoadJsonFile buttonLabel='OSDU Import' className='ContextModal' ph={compatibilityProps} refresh={refresh} setRefresh={setRefresh} />
+    const loadgithub = (typeof window !== 'undefined') && <LoadGitHub buttonLabel='GitHub' className='ContextModal' ph={compatibilityProps} refresh={refresh} setRefresh={setRefresh} />
+    const loadnewModelproject = (typeof window !== 'undefined') && <LoadNewModelProjectFromGithub buttonLabel='New Modelproject' className='ContextModal' ph={compatibilityProps} refresh={refresh} setRefresh={setRefresh} />
+    const loadMetamodel = (typeof window !== 'undefined') && <LoadMetamodelFromGithub buttonLabel='Load Metamodel' className='ContextModal' ph={compatibilityProps} refresh={refresh} setRefresh={setRefresh} />
+    const loadfile = (typeof window !== 'undefined') && <LoadFile buttonLabel='' className='ContextModal' ph={compatibilityProps} refresh={refresh} setRefresh={setRefresh} />
+    const loadrecovery = (typeof window !== 'undefined') && <LoadRecovery buttonLabel='Recovery' className='ContextModal' ph={compatibilityProps} refresh={refresh} setRefresh={setRefresh} />
 
     const modellingDiv = // this is the button row and the modelling area with OSDU import and load options and Reload button
       <>

src/components/Project.tsx

@@ -11,6 +11,7 @@ import {
 import ProjectDetailsForm from "./forms/ProjectDetailsForm";
 import ModellingHeaderButtons from "./utils/ModellingHeaderButtons";
 import { get } from 'http';
+import { selectSharedUniverseState } from '../sharedUniverse';
 
 const debug = false;
 
@@ -22,6 +23,8 @@ const Project = (props) => {
   const router = useRouter();
   // const modeldata = useSelector((state: { phData: { metis: { models: any[], name: string, description: string } } }) => state);
   const modeldata = props.props;
+  const sharedUniverse = useSelector(selectSharedUniverseState);
+  const domain = sharedUniverse.world.worldDefinition.domain || {};
 
   if (debug) console.log('25 Tasks props', modeldata?.phData, props);
 
@@ -52,9 +55,9 @@ const Project = (props) => {
   // Add state for domain editing
   const [editingDomain, setEditingDomain] = useState(false);
   const [editedDomain, setEditedDomain] = useState({
-    name: modeldata?.phData?.domain?.name || '',
-    description: modeldata?.phData?.domain?.description || '',
-    presentation: modeldata?.phData?.domain?.presentation || ''
+    name: domain?.name || '',
+    description: domain?.description || '',
+    presentation: domain?.presentation || ''
   });
   const [isLoading, setIsLoading] = useState(true);
 
@@ -91,14 +94,14 @@ const Project = (props) => {
 
   // Reset edited domain data when domain changes
   useEffect(() => {
-    if (modeldata?.phData?.domain) {
+    if (domain) {
       setEditedDomain({
-        name: modeldata.phData.domain.name || '',
-        description: modeldata.phData.domain.description || '',
-        presentation: modeldata.phData.domain.presentation || ''
+        name: domain.name || '',
+        description: domain.description || '',
+        presentation: domain.presentation || ''
       });
     }
-  }, [modeldata?.phData?.domain]);
+  }, [domain]);
 
   // Handle domain field changes
   const handleDomainChange = (e) => {
@@ -121,9 +124,9 @@ const Project = (props) => {
   // Cancel domain editing
   const cancelDomainEditing = () => {
     setEditedDomain({
-      name: modeldata.phData.domain.name || '',
-      description: modeldata.phData.domain.description || '',
-      presentation: modeldata.phData.domain.presentation || ''
+      name: domain.name || '',
+      description: domain.description || '',
+      presentation: domain.presentation || ''
     });
     setEditingDomain(false);
     };
@@ -169,7 +172,7 @@ const Project = (props) => {
               {!editingDomain ? (
                 <>
                   <div className="d-flex justify-content-between align-items-center">
-                    <CardTitle className="card-title-bold nobreak">Domain : {modeldata.phData.domain?.name}</CardTitle>
+                    <CardTitle className="card-title-bold nobreak">Domain : {domain?.name}</CardTitle>
                     <Button
                       color="muted"
                       size="sm"
@@ -180,9 +183,9 @@ const Project = (props) => {
                       edit
                     </Button>
                   </div>
-                  <CardSubtitle className="card-subtitle-bold text-secondary">{modeldata.phData.domain?.description}</CardSubtitle>
+                  <CardSubtitle className="card-subtitle-bold text-secondary">{domain?.description}</CardSubtitle>
                   <CardText className="card-text"> </CardText>
-                  <div className="border fs-6 p-1">Summary: {modeldata.phData.domain?.presentation}</div>
+                  <div className="border fs-6 p-1">Summary: {domain?.presentation}</div>
                 </>
               ) : (
                 <>

src/components/Table.tsx

@@ -15,6 +15,7 @@ import LoadServer from '../components/LoadServer'
 import LoadLocal from '../components/LoadLocal'
 import EditFocusModal from '../components/EditFocusModal'
 import EditFocusMetamodel from '../components/EditFocusMetamodel'
+import { selectSharedUniverseState } from '../sharedUniverse';
 // import {loadDiagram} from './akmm/diagram/loadDiagram'
 
 const page = (props:any) => {
@@ -25,13 +26,16 @@ const page = (props:any) => {
   function toggleRefresh() { setRefresh(!refresh); }
 
   /**  * Get the state from the store  */
-  // const state = useSelector((state: any) => state) // Selecting the whole redux store
-  let focusModel = useSelector(focusModel => props.phFocus?.focusModel) 
-  let focusModelview = useSelector(focusModelview => props.phFocus?.focusModelview) 
-  const focusObjectview = useSelector(focusObjectview => props.phFocus?.focusObjectview) 
-  const focusRelshipview = useSelector(focusRelshipview => props.phFocus?.focusRelshipview) 
-  const focusObjecttype = useSelector(focusObjecttype => props.phFocus?.focusObjecttype) 
-  const focusRelshiptype = useSelector(focusRelshiptype => props.phFocus?.focusRelshiptype) 
+  const sharedUniverse = useSelector(selectSharedUniverseState);
+  const metis = sharedUniverse.world.worldModel.metis;
+  const phFocus = sharedUniverse.world.focus;
+  const phSource = sharedUniverse.source;
+  let focusModel = phFocus?.focusModel;
+  let focusModelview = phFocus?.focusModelview;
+  const focusObjectview = phFocus?.focusObjectview;
+  const focusRelshipview = phFocus?.focusRelshipview;
+  const focusObjecttype = phFocus?.focusObjecttype;
+  const focusRelshiptype = phFocus?.focusRelshiptype;
   // if (debug) console.log('37 Modelling', props.phFocus, focusRelshiptype?.name);
 
   let gojsmetamodelpalette =  props.phGojs?.gojsMetamodelPalette 
@@ -44,19 +48,17 @@ const page = (props:any) => {
 
   if (debug) console.log('49 Modelling', gojsmodel, gojsmodelobjects, props);
 
-  let metis = props.phData?.metis
   let myMetis = props.phMymetis?.myMetis
   let myGoModel = props.phMyGoModel?.myGoModel
   let myGoMetamodel = props.phMyGoMetamodel?.myGoMetamodel
   //let myGoMetamodel = props.phGojs?.gojsMetamodel
-  let phFocus = props.phFocus;
-  let phData = props.phData
+  let phData = { ...props.phData, metis }
 
-  const models = props.phData?.metis.models
-  const focusModelId = props.phFocus?.focusModel.id
+  const models = metis?.models
+  const focusModelId = focusModel?.id
   const curmod = models?.find(m => m.id === focusModelId)
 
-  if (debug)console.log('61 Table', curmod, focusModelId, models, props.phFocus);
+  if (debug)console.log('61 Table', curmod, focusModelId, models, phFocus);
 
     // useEffect(() => {
     //   console.log('80 Modelling useEffect 3', props); 
@@ -145,7 +147,7 @@ const page = (props:any) => {
         <div style={{ transform: "scale(0.9)"}}>
           <span className="sourceName pr-1 float-right mr-0 mt-1" 
             style={{ backgroundColor: "#fff", color: "#b00", transform: "scale(0.9)",  fontWeight: "bolder"}}>
-              Current source: {props.phSource}
+              Current source: {phSource}
           </span> 
           {/* <span className="loadmodel float-right" style={{ padding: "1px", backgroundColor: "#ccc", transform: "scale(0.7)",  fontWeight: "bolder"}}>
             {loadserver} {loadlocal}