feat: Add cytoscape and motif viz component

motifstudio-web/src/app/MotifVisualizer.tsx

@@ -0,0 +1,29 @@
+import CytoscapeComponent from "react-cytoscapejs";
+
+export const MotifVisualizer = ({
+    motifSource,
+    graph,
+    entities,
+}: {
+    motifSource: string;
+    graph: any;
+    entities: { [key: string]: string };
+}) => {
+    // Construct the motif graph:
+    console.log(motifSource);
+    return (
+        <CytoscapeComponent
+            elements={[
+                {
+                    data: {
+                        id: "motif",
+                        label: "hi",
+                    },
+                    position: { x: 100, y: 100 },
+                    classes: ["motif"],
+                },
+            ]}
+            style={{ width: "600px", height: "600px" }}
+        />
+    );
+};

motifstudio-web/src/app/api.tsx

@@ -1,9 +1,9 @@
 // Base URL based on dev status:
 // @ts-ignore
-// export const BASE_URL =
-//     process.env.NODE_ENV === "development" ? "http://localhost:5000" : "https://api.motifstudio.bossdb.org";
+export const BASE_URL =
+    process.env.NODE_ENV === "development" ? "http://localhost:8000" : "https://api.motifstudio.bossdb.org";
 
-export const BASE_URL = "https://api.motifstudio.bossdb.org";
+// export const BASE_URL = "https://api.motifstudio.bossdb.org";
 
 export const neuroglancerUrlFromHostVolumetricData = (
     segmentationUri: string,

server/src/models.py

@@ -1,4 +1,5 @@
 """Models for the motif studio database and API."""
+
 from typing import Any, Literal
 from pydantic import BaseModel, Field
 
@@ -96,6 +97,28 @@ class EdgeCountQueryResponse(_QueryResponseBase):
     edge_count: int
 
 
+class MotifParseQueryRequest(_QueryRequestBase):
+    """A request to parse a motif query."""
+
+    query: str = Field(
+        ...,
+        description="The motif query to execute, in the DotMotif query language",
+    )
+
+
+class MotifParseQueryResponse(_QueryResponseBase):
+    """A response with the motif parse results for a host graph."""
+
+    query: str
+    motif_entities: list[str]
+    motif_edges: list[str]
+    motif_nodelink_json: str
+    error: str | None = Field(
+        None,
+        description="If an error occurred, a message describing the error.",
+    )
+
+
 class MotifCountQueryRequest(_QueryRequestBase):
     """A request to count the number of motifs in a host graph."""
 

server/src/server/routers/queries.py

@@ -13,6 +13,8 @@
     EdgeCountQueryResponse,
     MotifCountQueryRequest,
     MotifCountQueryResponse,
+    MotifParseQueryRequest,
+    MotifParseQueryResponse,
     MotifQueryRequest,
     MotifQueryResponse,
     VertexCountQueryRequest,
@@ -250,6 +252,39 @@ def query_count_motifs(
         )
 
 
+@router.post("/motifs/_parse")
+def query_parse_motif(
+    motif_count_query_request: MotifParseQueryRequest,
+    commons: Annotated[HostProviderRouterGlobalDep, Depends(provider_router)],
+) -> MotifParseQueryResponse:
+    """Parse a motif and return the compiled query graph."""
+    tic = time.time()
+
+    try:
+        motif = Motif(motif_count_query_request.query)
+        return MotifParseQueryResponse(
+            query=motif_count_query_request.query,
+            motif_entities=[str(v) for v in motif.to_nx().nodes()],
+            motif_edges=[[str(u), str(v)] for u, v in motif.to_nx().edges()],
+            motif_nodelink_json=nx.readwrite.node_link_data(motif.to_nx()),
+            host_id=motif_count_query_request.host_id,
+            response_time=datetime.datetime.now().isoformat(),
+            response_duration_ms=(time.time() - tic) * 1000,
+            error=None,
+        )
+    except Exception as e:
+        return MotifParseQueryResponse(
+            query=motif_count_query_request.query,
+            motif_entities=[],
+            motif_edges=[],
+            motif_nodelink_json="",
+            host_id=motif_count_query_request.host_id,
+            response_time=datetime.datetime.now().isoformat(),
+            response_duration_ms=(time.time() - tic) * 1000,
+            error=str(e),
+        )
+
+
 @router.post("/motifs")
 def query_motifs(
     motif_query_request: MotifQueryRequest,