CORS and async issues resolved

Author: Kris Brown

packages/algjulia-interop/scripts/endpoint.jl

@@ -10,6 +10,26 @@ using CatColabInterop
 using Oxygen
 using HTTP
 
+const CORS_HEADERS = [
+    "Access-Control-Allow-Origin" => "*",
+    "Access-Control-Allow-Headers" => "*",
+    "Access-Control-Allow-Methods" => "POST, GET, OPTIONS"
+]
+
+function CorsHandler(handle)
+    return function (req::HTTP.Request)
+        # return headers on OPTIONS request
+        if HTTP.method(req) == "OPTIONS"
+            return HTTP.Response(200, CORS_HEADERS)
+        else
+            r = handle(req)
+            append!(r.headers, ["Access-Control-Allow-Origin" => "*"])
+            r
+
+        end
+    end
+end
+
 defaults = [:Catlab,:ACSets] # all extensions to date
 
 for pkg in (isempty(ARGS) ? defaults : ARGS )
@@ -27,4 +47,4 @@ for m in methods(CatColabInterop.endpoint)
   invoke(fntype.instance, Tuple{argtypes...}, Val(name))
 end
 
-serve()
+serve(middleware=[CorsHandler])

packages/frontend/src/stdlib/analyses/tabular_view.tsx

@@ -1,8 +1,10 @@
 
 import type { DiagramAnalysisProps } from "../../analysis";
 import type { GraphLayoutConfig } from "../../visualization";
-import { GraphVisualization } from "./graph_visualization";
-import { diagramToGraphviz } from "./diagram_graph";
+// import { GraphVisualization } from "./graph_visualization";
+// import { diagramToGraphviz } from "./diagram_graph";
+import { createResource, Switch, Match } from "solid-js";
+
 import axios from 'axios';
 
 const config = {
@@ -27,34 +29,32 @@ export default function TabularView(
         title?: string;
     },
 ) {
-    const graph = () => {
-        const theory = props.liveDiagram.liveModel.theory();
-        const model = props.liveDiagram.liveModel.elaboratedModel();
-        const diagram = props.liveDiagram.elaboratedDiagram();
-        if (theory && model && diagram) {
-            return diagramToGraphviz(diagram, model, theory);
-        }
-    };
-
-    // const call = async (data: string) => {return await ;}
-
-    const res = () => {
-        const model = props.liveDiagram.liveModel.elaboratedModel();
-        const diagram = props.liveDiagram.elaboratedDiagram();
-        const data = axios.post("http://127.0.0.1:8080/acsetcolim", {
-            model:model?.presentation(), diagram:diagram?.presentation()
-        }, config);
-        return data.then(res => { 
-    console.log(res); // getting a value
-    return res});
-   }
 
+    const [res] = createResource(
+        () => {
+            const model = props.liveDiagram.liveModel.elaboratedModel();
+            const diagram = props.liveDiagram.elaboratedDiagram();
+            return model && diagram && [model, diagram];
+        },
+        async ([model, diagram]) => {
+        const response = await axios.post("http://127.0.0.1:8080/acsetcolim", {
+                model: model?.presentation(), diagram: diagram?.presentation()
+            }, config);
+        // console.log(response.data);
+        return response.data;
+        }
+    );
     return (
-        <GraphVisualization
-            title={"TABULAR VIEW: "+res()}
-            graph={graph()}
-            config={props.content}
-            changeConfig={props.changeContent}
-        />
+            <Switch>
+                <Match when={res.loading}>
+                    <div>⏳ Loading model...</div>
+                </Match>
+                <Match when={res.error}>
+                    <div>❌ Error loading model: {res.error?.message || "Unknown error"}</div>
+                </Match>
+                <Match when={res()}>
+                    {(res) => <div>Tabular Instance: {JSON.stringify(res())}</div>}
+                </Match>
+            </Switch>
     );
 }