From 8fdb499dbda7d3d2f890195db28d1cab03868962 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Burak=20Kabakc=C4=B1?= <emrekabakci@gmail.com>
Date: Mon, 30 Oct 2023 13:32:45 +0000
Subject: [PATCH] add local env

---
 src/ui/.env.local                             |  1 +
 src/ui/src/components/chart/JinjatECharts.tsx |  1 -
 .../components/dashboard/dashboard.module.css |  3 -
 src/ui/src/components/dashboard/dashboard.tsx | 55 ++++++++++---------
 src/ui/src/interfaces/createComponents.tsx    | 11 +---
 5 files changed, 31 insertions(+), 40 deletions(-)
 create mode 100644 src/ui/.env.local
 delete mode 100644 src/ui/src/components/dashboard/dashboard.module.css

diff --git a/src/ui/.env.local b/src/ui/.env.local
new file mode 100644
index 0000000..3036649
--- /dev/null
+++ b/src/ui/.env.local
@@ -0,0 +1 @@
+NEXT_PUBLIC_JINJAT_URL=http://127.0.0.1:8581
\ No newline at end of file
diff --git a/src/ui/src/components/chart/JinjatECharts.tsx b/src/ui/src/components/chart/JinjatECharts.tsx
index 720e6aa..9f792e7 100644
--- a/src/ui/src/components/chart/JinjatECharts.tsx
+++ b/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",
diff --git a/src/ui/src/components/dashboard/dashboard.module.css b/src/ui/src/components/dashboard/dashboard.module.css
deleted file mode 100644
index 4e33b4e..0000000
--- a/src/ui/src/components/dashboard/dashboard.module.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.dashboardItem {
-    box-shadow: 0px 1px 2px #bcbbbb;
-}
\ No newline at end of file
diff --git a/src/ui/src/components/dashboard/dashboard.tsx b/src/ui/src/components/dashboard/dashboard.tsx
index 27f7dbb..4a0fbb2 100644
--- a/src/ui/src/components/dashboard/dashboard.tsx
+++ b/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>
     )
 }
\ No newline at end of file
diff --git a/src/ui/src/interfaces/createComponents.tsx b/src/ui/src/interfaces/createComponents.tsx
index a2df169..fe57efc 100644
--- a/src/ui/src/interfaces/createComponents.tsx
+++ b/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,