add GraphQL queries, mutations, and fragments for PlotView and Scatte…

…rPlot; update styles and components for improved rendering

components.json

@@ -13,9 +13,8 @@
   "aliases": {
     "components": "@/components",
     "utils": "@/lib/utils",
-    "ui": "@/components/plate-ui",
+    "ui": "@/components/ui",
     "lib": "@/lib",
     "hooks": "@/hooks"
-  },
-  "url": "https://platejs.org/r"
+  }
 }

graphql/kraph/fragments/graph.graphql

@@ -18,6 +18,9 @@ fragment Graph on Graph {
   nodeViews {
     ...ListNodeView
   }
+  plotViews(pagination: { limit: 2 }) {
+    ...CarouselPlotView
+  }
 }
 
 fragment ListGraph on Graph {

graphql/kraph/fragments/graph_query.graphql

@@ -1,7 +1,16 @@
 fragment DetailGraphQuery on GraphQuery {
+  id
   name
   query
   description
+  ontology {
+    id
+    name
+  }
+  scatterPlots {
+    id
+    name
+  }
 }
 
 fragment ListGraphQuery on GraphQuery {

graphql/kraph/fragments/graph_view.graphql

@@ -15,6 +15,9 @@ fragment GraphView on GraphView {
     ...Pairs
     ...Table
   }
+  plotViews {
+    ...PlotView
+  }
 }
 
 fragment ListGraphView on GraphView {

graphql/kraph/fragments/plot_view.graphql

@@ -0,0 +1,39 @@
+fragment PlotView on PlotView {
+  id
+  name
+  view {
+    id 
+    label
+    render {
+      ...Table
+    }
+  }
+  plot {
+    ...ScatterPlot
+  }
+
+}
+
+fragment CarouselPlotView on PlotView {
+  id
+  name
+  view {
+    id 
+    label
+    render {
+      ...Table
+    }
+  }
+  plot {
+    ...ScatterPlot
+  }
+
+}
+
+fragment ListPlotView on PlotView {
+  id
+  name
+  plot {
+    ...ScatterPlot
+  }
+}

graphql/kraph/fragments/scatter_plot.graphql

@@ -0,0 +1,9 @@
+fragment ScatterPlot on ScatterPlot {
+    id 
+    name 
+    description
+    xColumn
+    yColumn
+    colorColumn
+    sizeColumn
+}

graphql/kraph/mutations/scatter_plot.graphql

@@ -0,0 +1,3 @@
+mutation DeleteScatterPlot($id: ID!) {
+  deleteScatterPlot(input: { id: $id })
+}

graphql/kraph/queries/graph_query.graphql

@@ -0,0 +1,15 @@
+query GetGraphQuery($id: ID!) {
+  graphQuery(id: $id) {
+    ...DetailGraphQuery
+  }
+}
+
+query SearchGraphQueries($search: String, $values: [ID!]) {
+  options: graphQueries(
+    filters: { search: $search, ids: $values }
+    pagination: { limit: 10 }
+  ) {
+    value: id
+    label: name
+  }
+}

graphql/kraph/queries/plot_view.graphql

@@ -0,0 +1,21 @@
+query GetPlotView($id: ID!) {
+  plotView(id: $id) {
+    ...PlotView
+  }
+}
+
+query LatestPlotViews {
+  plotViews(pagination: { limit: 10 }) {
+    ...CarouselPlotView
+  }
+}
+
+query SearchPlotViews($search: String, $values: [ID!]) {
+  options: plotViews(
+    filters: { search: $search, ids: $values }
+    pagination: { limit: 10 }
+  ) {
+    value: id
+    label: name
+  }
+}

package.json

@@ -163,10 +163,11 @@
     "input-otp": "^1.2.4",
     "livekit-client": "^2.3.2",
     "localforage": "^1.10.0",
-    "lucide-react": "^0.453.0",
+    "lucide-react": "^0.475.0",
     "match-sorter": "^6.3.1",
     "next-themes": "^0.3.0",
     "prismjs": "^1.29.0",
+    "react-charts": "^3.0.0-beta.57",
     "react-cytoscape": "^1.0.6",
     "react-cytoscapejs": "^2.0.0",
     "react-day-picker": "8.10.1",
@@ -187,6 +188,7 @@
     "react-tweet": "^3.2.1",
     "react-use-measure": "^2.1.1",
     "reactflow": "^11.10.4",
+    "recharts": "^2.15.1",
     "shadowrealm-api": "^0.8.3",
     "slate": "^0.110.2",
     "slate-history": "^0.110.3",

src/components/plate-ui/card.tsx

@@ -0,0 +1,79 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }