add local env

src/ui/.env.local

@@ -0,0 +1 @@
+NEXT_PUBLIC_JINJAT_URL=http://127.0.0.1:8581

src/ui/src/components/chart/JinjatECharts.tsx

@@ -21,7 +21,6 @@ export const JinjatECharts: React.FC<JinjatEChartsProps> = ({
                                                             }) => {
     // @ts-ignore
     const isRenderable = memoize(() => (Array.isArray(options?.dataset) && options?.dataset[0]?.source == null) || (options?.dataset?.source == null))
-
     const { data, isLoading, isError } = useCustom<[]>({
         url: `/_analysis/${dataset.analysis}`,
         method: "get",

src/ui/src/components/dashboard/dashboard.tsx

@@ -1,21 +1,16 @@
-import 'react-grid-layout/css/styles.css';
-import 'react-resizable/css/styles.css';
-import styles from './dashboard.module.css';
-import {Responsive, WidthProvider} from "react-grid-layout";
-
 import React, {useEffect, useState} from "react";
 import {JinjatExposureProps} from "@components/crud/utils";
 import {useJinjatProvider} from "@components/hooks/useSchemaProvider";
 import {DashboardItem} from "@components/hooks/schema";
-import {findComponentByName} from "../../interfaces/createComponents";
-
-const ResponsiveGridLayout = WidthProvider(Responsive);
+import {allComponents} from "../../interfaces/createComponents";
+import Grid from '@mui/material/Unstable_Grid2';
+import {ErrorBoundary} from "react-error-boundary";
+import {Alert, AlertTitle} from "@mui/material";
+import Paper from "@mui/material/Paper";
 
 export const JinjatDashboard: React.FC<JinjatExposureProps> = ({packageName, exposure}) => {
     const [items, setItems] = useState<Array<DashboardItem>>()
-
     const schemaProvider = useJinjatProvider();
-
     const dashboard = schemaProvider.getDashboard(packageName, exposure)
 
     useEffect(() => {
@@ -27,29 +22,37 @@ export const JinjatDashboard: React.FC<JinjatExposureProps> = ({packageName, exp
         })
     }, [])
 
-    if(items == null) {
+    if (items == null) {
         return <div>Loading..</div>
     }
 
+    function findComponentByName(componentName: string): any {
+        const internalComponentName = Object.keys(allComponents).find(name => name.toLowerCase() === componentName.toLowerCase());
+        return allComponents[internalComponentName!!]
+    }
+
+    function fallbackRender({error, resetErrorBoundary}) {
+        return (
+            <Alert severity="error">
+                <AlertTitle>Unable to render component</AlertTitle>
+                {error.message}
+            </Alert>
+        );
+    }
+
     return (
-        <ResponsiveGridLayout
-            className="layout"
-            cols={{lg: 10, md: 8, sm: 6, xs: 4, xxs: 2}}
-            rowHeight={90}
-            containerPadding={[10, 10]}
-            margin={[10, 10]}
-            isDraggable={false}
-            isResizable={false}
-        >
+        <Grid container spacing={2} columns={16}>
             {items.map((val, idx) => {
                 // @ts-ignore
                 const ComponentToRender = findComponentByName(val.component.name);
-
-                debugger
-                return <div key={idx} data-grid={{x: idx, y: idx, w: 2, h: 2}} className={styles.dashboardItem}>
-                    <ComponentToRender {...val.component.arguments} />
-                </div>;
+                return <Grid key={idx} xs={val.width} md={val.width}>
+                    <Paper variant={'outlined'}>
+                        <ErrorBoundary FallbackComponent={fallbackRender}>
+                            <ComponentToRender {...val.component.arguments} />
+                        </ErrorBoundary>
+                    </Paper>
+                </Grid>
             })}
-        </ResponsiveGridLayout>
+        </Grid>
     )
 }

src/ui/src/interfaces/createComponents.tsx

@@ -101,16 +101,7 @@ export const muiComponents = {
 };
 export const jinjatComponents = {Observe};
 
-type GenericObject = { [key: string]: any };
-export const allComponents: GenericObject = {...muiComponents, ...jinjatComponents, ...allChartComponents}
-
-
-const allComponentNames = Object.keys(allComponents)
-
-export function findComponentByName(name: string): any {
-    const componentName = allComponentNames.find(name => name.toLowerCase() === name.toLowerCase());
-    return allComponents[componentName!!]
-}
+export const allComponents = {...muiComponents, ...jinjatComponents, ...allChartComponents}
 
 const exposureIcons = {
     "create": BarsArrowUpIcon,