Tree mode option addded for API embeded Iframe

src/pages/widget.tsx

@@ -5,18 +5,24 @@ import { useRouter } from "next/router";
 import { useMantineColorScheme } from "@mantine/core";
 import { ThemeProvider } from "styled-components";
 import toast from "react-hot-toast";
+import { CanvasDirection } from "reaflow/dist/layout/elkLayout";
 import { darkTheme, lightTheme } from "src/constants/theme";
 import { Toolbar } from "src/containers/Toolbar";
+import { TreeView } from "src/containers/Views/TreeView";
+import { ViewMode } from "src/enums/viewMode.enum";
+import useConfig from "src/store/useConfig";
 import useGraph from "src/modules/GraphView/stores/useGraph";
 import useFile from "src/store/useFile";
 
+type Options = {
+  theme: "light" | "dark";
+  direction: CanvasDirection;
+  viewMode: ViewMode.Graph | ViewMode.Tree;
+};
 interface EmbedMessage {
   data: {
     json?: string;
-    options?: {
-      theme?: "light" | "dark";
-      direction?: "LEFT" | "RIGHT" | "DOWN" | "UP";
-    };
+    options?: Options;
   };
 }
 
@@ -28,10 +34,12 @@ const WidgetPage = () => {
   const { query, push, isReady } = useRouter();
   const { setColorScheme } = useMantineColorScheme();
   const [theme, setTheme] = React.useState<"dark" | "light">("dark");
+  const viewMode = useConfig(state => state.viewMode);
   const checkEditorSession = useFile(state => state.checkEditorSession);
   const setContents = useFile(state => state.setContents);
   const setDirection = useGraph(state => state.setDirection);
   const clearGraph = useGraph(state => state.clearGraph);
+  const setViewMode = useConfig(state => state.setViewMode);
 
   React.useEffect(() => {
     if (isReady) {
@@ -50,6 +58,13 @@ const WidgetPage = () => {
           setTheme(event.data.options.theme);
         }
 
+        if (
+          event.data?.options?.viewMode === ViewMode.Graph ||
+          event.data?.options?.viewMode === ViewMode.Tree
+        ) {
+          setViewMode(event.data?.options.viewMode);
+        }
+
         setContents({ contents: event.data.json, hasChanges: false });
         setDirection(event.data.options?.direction || "RIGHT");
       } catch (error) {
@@ -60,7 +75,7 @@ const WidgetPage = () => {
 
     window.addEventListener("message", handler);
     return () => window.removeEventListener("message", handler);
-  }, [setColorScheme, setContents, setDirection, theme]);
+  }, [setColorScheme, setContents, setDirection, setViewMode, theme]);
 
   React.useEffect(() => {
     setColorScheme(theme);
@@ -73,7 +88,8 @@ const WidgetPage = () => {
       </Head>
       <ThemeProvider theme={theme === "dark" ? darkTheme : lightTheme}>
         <Toolbar isWidget />
-        <GraphView isWidget />
+        {viewMode === ViewMode.Graph && <GraphView isWidget />}
+        {viewMode === ViewMode.Tree && <TreeView />}
       </ThemeProvider>
     </>
   );