1026 refactor sdk to allow for use in angular

.env

@@ -1,10 +1,11 @@
-ENDPOINT=../../../..
-MODULE=/Monolith
+# path to the backend
+MODULE=http://localhost:9090/Monolith
 
+# theming
 THEME_TITLE=SEMOSS
 THEME_FAVICON=./src/assets/favicon.svg
-
 DOCUMENTATION_URL=https://workshop.cfg.deloitte.com/docs/
 
+# development
 NODE_ENV=development
 NODE_OPTIONS=--max_old_space_size=8192  

.github/workflows/ci-pnpm-maven.yml

@@ -44,7 +44,7 @@ jobs:
               run: |
                   apt-get update
                   apt-get install -y maven
-                  npm install -g pnpm@8
+                  npm install -g pnpm@10
                   pnpm install
 
             - name: Build
@@ -105,7 +105,7 @@ jobs:
                   echo "keyserver keyserver.ubuntu.com" > ~/.gnupg/gpg.conf
                   cat ~/.gnupg/gpg.conf
                   gpg2 --refresh-key
-                  npm install -g pnpm@8
+                  npm install -g pnpm@10
                   pnpm install
 
             - name: Build
@@ -183,7 +183,7 @@ jobs:
                   echo "${{ secrets.GPG_PRIVATE_KEY }}" | gpg2 --batch --import
                   echo "keyserver keyserver.ubuntu.com" > ~/.gnupg/gpg.conf
                   gpg2 --refresh-key
-                  npm install -g pnpm@8
+                  npm install -g pnpm@10
                   pnpm install
 
             - name: Build

.gitlab-ci.yml

@@ -33,7 +33,7 @@ pnpm_build_dev:
         - apt-get update
         - apt-get install -y maven
         # - npm install webpack --save-dev
-        - npm install -g pnpm@8
+        - npm install -g pnpm@10
         - pnpm install
         - pnpm -v
         - NX_HEAD=$CI_COMMIT_SHA
@@ -71,7 +71,7 @@ pnpm_build_deploy:
         - echo "keyserver keyserver.ubuntu.com" > ~/.gnupg/gpg.conf
         - gpg2 --refresh-key
         # - npm install webpack --save-dev
-        - npm install -g pnpm@8
+        - npm install -g pnpm@10
         - pnpm install
         - pnpm -v
         # Likely need to add sdk as well

README.md

@@ -7,13 +7,12 @@
 
 1. Git clone this repository to your `webapps` folder. `git clone git@repo.semoss.org:semoss/semoss-ui.git`
 
-2. Ensure your BE server is running in eclipse and at a minimum running on a version of pnpm@8.
+2. Ensure your BE server is running in eclipse and at a minimum running on a version of pnpm@10.
 
 3. create a `.env.local` file and populate with the following. **Do not change the .env**
 
 ```
-    ENDPOINT=../../..
-    MODULE=/Monolith_Dev
+    MODULE=http://localhost:9090/Monolith_Dev
 
     THEME_TITLE=SEMOSS
     THEME_FAVICON=./src/assets/favicon.svg

libs/renderer/README.md

@@ -100,7 +100,8 @@ export const BLOCKS = {
 
 ```
 import { Renderer, ActionMessages, SerializedState } from '@semoss/renderer';
-import { Env, InsightProvider } from '@semoss/sdk';
+import { Env, InsightProvider } from '@semoss/sdk/react';
+
 import { BLOCKS } from './constants.ts
 ```
 

libs/renderer/src/Renderer.tsx

@@ -2,13 +2,8 @@ import { useEffect, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { useSearchParams, useLocation } from "react-router-dom";
 
-import { runPixel, useInsight } from "@semoss/sdk";
-import {
-    Backdrop,
-    Notification,
-    Typography,
-    useNotification,
-} from "@semoss/ui";
+import { runPixel } from "@semoss/sdk/react";
+import { Backdrop, Notification, Typography } from "@semoss/ui";
 
 import { Blocks, RendererEngine } from "./components/blocks";
 import { DefaultBlocks } from "./components/block-defaults";
@@ -27,7 +22,7 @@ import { CircularProgress, Stack } from "@mui/material";
 export interface RendererProps {
     /** App to render */
     appId?: string;
-    
+
     /** Insight to tie all pixels that are ran to */
     insightId?: string;
 
@@ -39,7 +34,6 @@ export interface RendererProps {
      * Do we want to see load screen. Ex: preview on tooltip
      * */
     preview?: boolean;
-
 }
 
 /**
@@ -58,106 +52,105 @@ export const Renderer = observer((props: RendererProps) => {
 
     useEffect(() => {
         // if (isAuthorized) {
-            // start the loading
-            setIsLoading(true);
+        // start the loading
+        setIsLoading(true);
 
-            let stateFilter;
+        let stateFilter;
 
-            searchParams.forEach((value, key) => {
-                if (key === "state") {
-                    stateFilter = JSON.parse(value);
-                }
-            });
-
-            // initialize a new insight
-            let pixel = "";
-            if (appId && !stateFilter) {
-                pixel = `GetAppBlocksJson ( project=["${appId}"]);`;
-            } else if (state || stateFilter) {
-                pixel = `true`;
-            } else {
-                console.error("Missing appId or state");
+        searchParams.forEach((value, key) => {
+            if (key === "state") {
+                stateFilter = JSON.parse(value);
             }
+        });
+
+        // initialize a new insight
+        let pixel = "";
+        if (appId && !stateFilter) {
+            pixel = `GetAppBlocksJson ( project=["${appId}"]);`;
+        } else if (state || stateFilter) {
+            pixel = `true`;
+        } else {
+            console.error("Missing appId or state");
+        }
 
-            // ignore if there is not pixel
-            if (!pixel) {
-                return;
-            }
-
-            // load the app
-            runPixel<[SerializedState]>(pixel, insightId ? insightId : "new")
-                .then(async ({ pixelReturn, errors, insightId }) => {
-                    if (errors.length) {
-                        throw new Error(errors.join(""));
-                    }
+        // ignore if there is not pixel
+        if (!pixel) {
+            return;
+        }
 
-                    // set the state
-                    let s: SerializedState;
-                    if (appId && !stateFilter) {
-                        s = pixelReturn[0].output;
-                    } else if (state || stateFilter) {
-                        if (stateFilter) {
-                            s = stateFilter;
-                        } else {
-                            s = state;
-                        }
-                    } else {
-                        return;
-                    }
+        // load the app
+        runPixel<[SerializedState]>(pixel, insightId ? insightId : "new")
+            .then(async ({ pixelReturn, errors, insightId }) => {
+                if (errors.length) {
+                    throw new Error(errors.join(""));
+                }
 
-                    // ignore if there is state
-                    if (!s) {
-                        return;
+                // set the state
+                let s: SerializedState;
+                if (appId && !stateFilter) {
+                    s = pixelReturn[0].output;
+                } else if (state || stateFilter) {
+                    if (stateFilter) {
+                        s = stateFilter;
+                    } else {
+                        s = state;
                     }
+                } else {
+                    return;
+                }
 
-                    // run migration if not up to date
-                    if (s.version !== STATE_VERSION) {
-                        const migration = new MigrationManager();
-                        s = await migration.run(s);
-                    }
+                // ignore if there is state
+                if (!s) {
+                    return;
+                }
 
-                    const active = await getHomePage(s);
-                    setHomePage(active);
+                // run migration if not up to date
+                if (s.version !== STATE_VERSION) {
+                    const migration = new MigrationManager();
+                    s = await migration.run(s);
+                }
 
-                    // Replace variable values with query params
-                    const params = {};
-                    queryStringParams.forEach((value, key) => {
-                        params[key] = value;
-                    });
+                const active = await getHomePage(s);
+                setHomePage(active);
 
-                    // create a new state store
-                    const store = new StateStore({
-                        mode: "interactive",
-                        insightId: insightId,
-                        state: s,
-                        cellRegistry: DefaultCells,
-                        initialParams: params,
-                    });
+                // Replace variable values with query params
+                const params = {};
+                queryStringParams.forEach((value, key) => {
+                    params[key] = value;
+                });
 
-                    // set it
-                    setStateStore(store);
+                // create a new state store
+                const store = new StateStore({
+                    mode: "interactive",
+                    insightId: insightId,
+                    state: s,
+                    cellRegistry: DefaultCells,
+                    initialParams: params,
+                });
 
+                // set it
+                setStateStore(store);
 
-                    if (stateFilter) {
-                        // notification.add({
-                        //     color: "warning",
-                        //     message:
-                        //         "Please be mindful this may not represent the current state of the app, due to the filters present in the URL",
-                        // });
-                    }
-                })
-                .catch((e) => {
+                if (stateFilter) {
                     // notification.add({
-                    //     color: "error",
-                    //     message: e.message,
+                    //     color: "warning",
+                    //     message:
+                    //         "Please be mindful this may not represent the current state of the app, due to the filters present in the URL",
                     // });
-
-                    console.log(e);
-                })
-                .finally(() => {
-                    // close the loading screen
-                    setIsLoading(false);
-                });
+                }
+            })
+            .catch((e) => {
+                // notification.add({
+                //     color: "error",
+                //     message: e.message,
+                // });
+
+                console.log(e);
+            })
+            .finally(() => {
+                // close the loading screen
+                setIsLoading(false);
+            });
         // }
     }, [state, appId, insightId]);
 
@@ -171,7 +164,7 @@ export const Renderer = observer((props: RendererProps) => {
                         zIndex: 1501,
                         position: "relative",
                         width: "100%",
-                        height: "100%"
+                        height: "100%",
                     }}
                 >
                     <Stack

libs/renderer/src/components/block-defaults/llm-comparison-block/LLMComparisonMenu.tsx

@@ -2,7 +2,7 @@ import { useState, useEffect, useRef } from "react";
 import { useForm } from "react-hook-form";
 import { observer } from "mobx-react-lite";
 
-import { runPixel } from "@semoss/sdk";
+import { runPixel } from "@semoss/sdk/react";
 import { styled, ToggleTabsGroup, useNotification } from "@semoss/ui";
 
 import { LLMComparisonContext } from "./context/LLMComparisonContext";

libs/renderer/src/components/block-defaults/pdfViewer-block/PDFViewerBlock.tsx

@@ -5,8 +5,7 @@ import { Typography, CircularProgress, Paper, Box } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import IconButton from "@mui/material/IconButton";
 import ClearIcon from "@mui/icons-material/Clear";
-
-import { Env, runPixel } from "@semoss/sdk";
+import { Env, runPixel } from "@semoss/sdk/react";
 
 import { BlockComponent, BlockDef } from "../../../store";
 import { useBlock, useBlocks } from "../../../hooks";