feat(api): define REST API for graph entity

docker-compose.yml

@@ -65,7 +65,7 @@ services:
       - fra1.space.liexp.dev
     volumes:
       - api-node-modules:/app/node_modules
-      - ./packages/@liexp:/app/packages/@liexp:ro
+      - ./packages/@liexp:/app/packages/@liexp
       - ./services/api:/app/services/api:ro
       - ./services/api/temp:/app/services/api/temp:rw
     tty: true
@@ -100,7 +100,7 @@ services:
       - ./packages/@liexp:/app/packages/@liexp:ro
       - ./services/web:/app/services/web:cached
     working_dir: /app/services/web
-    command: yarn dev
+    command: yarn docker:dev
     mem_limit: 2G
     tty: true
     stdin_open: true

packages/@liexp/core/src/eslint/base.config.ts

@@ -49,7 +49,7 @@ export default tseslint.config(
         "error",
         "ignorePackages",
         {
-          js: "never",
+          js: "always",
           jsx: "never",
           ts: "never",
           tsx: "never",

packages/@liexp/shared/src/endpoints/graph.endpoints.ts

@@ -1,43 +1,26 @@
 import * as t from "io-ts";
 import { Endpoint } from "ts-endpoint";
+import { ListOutput, Output } from "../io/http/Common/Output.js";
+import { UUID } from "../io/http/Common/UUID.js";
 import { GetNetworkQuery } from "../io/http/Network.js";
 import { GetListQuery } from "../io/http/Query/index.js";
 import {
   FlowGraphOutput,
   GetFlowGraphParams,
 } from "../io/http/graphs/FlowGraph.js";
-import { GraphData, GraphId } from "../io/http/graphs/Graph.js";
+import { CreateGraphData, Graph } from "../io/http/graphs/Graph.js";
 import { ResourceEndpoints } from "./types.js";
 
-export const GetGraph = Endpoint({
-  Method: "GET",
-  getPath: () => `/graphs`,
-  Input: {
-    Query: t.type({ id: GraphId }),
-  },
-  Output: t.strict({ data: GraphData }),
-});
+const SingleGraphOutput = Output(Graph, "Graph");
+const ListGraphsOutput = ListOutput(Graph, "Graphs");
 
-export const GetFlowGraph = Endpoint({
+export const GetGraph = Endpoint({
   Method: "GET",
-  getPath: ({ id, type }) => `/graphs/flows/${type}/${id}`,
-  Input: {
-    Params: GetFlowGraphParams,
-    Query: GetNetworkQuery,
-  },
-  Output: t.strict({ data: FlowGraphOutput }),
-});
-
-export const EditFlowGraph = Endpoint({
-  Method: "PUT",
-  getPath: ({ id, type }) => `/graphs/flows/${type}/${id}`,
+  getPath: ({ id }) => `/graphs/${id}`,
   Input: {
-    Params: GetFlowGraphParams,
-    Body: t.strict({
-      regenerate: t.boolean,
-    }),
+    Params: t.type({ id: UUID }),
   },
-  Output: t.strict({ data: FlowGraphOutput }),
+  Output: SingleGraphOutput,
 });
 
 export const ListGraphs = Endpoint({
@@ -48,38 +31,61 @@ export const ListGraphs = Endpoint({
       ...GetListQuery.props,
     }),
   },
-  Output: t.strict({ data: t.array(GraphData) }),
+  Output: ListGraphsOutput,
 });
 
 export const CreateGraph = Endpoint({
   Method: "POST",
   getPath: () => `/graphs`,
   Input: {
-    Body: t.unknown,
+    Body: CreateGraphData,
   },
-  Output: t.strict({ data: GraphData }),
+  Output: SingleGraphOutput,
 });
 
 export const EditGraph = Endpoint({
   Method: "PUT",
-  getPath: () => `/graphs`,
+  getPath: ({ id }) => `/graphs/${id}`,
   Input: {
-    Query: t.type({
-      id: GraphId,
+    Params: t.type({
+      id: UUID,
     }),
+    Body: CreateGraphData,
   },
-  Output: t.strict({ data: GraphData }),
+  Output: SingleGraphOutput,
 });
 
 export const DeleteGraph = Endpoint({
   Method: "DELETE",
-  getPath: () => `/graphs`,
+  getPath: ({ id }) => `/graphs/${id}`,
+  Input: {
+    Params: t.type({
+      id: UUID,
+    }),
+  },
+  Output: SingleGraphOutput,
+});
+
+export const GetFlowGraph = Endpoint({
+  Method: "GET",
+  getPath: ({ id, type }) => `/graphs/flows/${type}/${id}`,
+  Input: {
+    Params: GetFlowGraphParams,
+    Query: GetNetworkQuery,
+  },
+  Output: t.strict({ data: FlowGraphOutput }),
+});
+
+export const EditFlowGraph = Endpoint({
+  Method: "PUT",
+  getPath: ({ id, type }) => `/graphs/flows/${type}/${id}`,
   Input: {
-    Query: t.type({
-      id: GraphId,
+    Params: GetFlowGraphParams,
+    Body: t.strict({
+      regenerate: t.boolean,
     }),
   },
-  Output: t.strict({ data: GraphData }),
+  Output: t.strict({ data: FlowGraphOutput }),
 });
 
 export const graphs = ResourceEndpoints({

packages/@liexp/shared/src/endpoints/index.ts

@@ -76,6 +76,8 @@ const Endpoints: Endpoints = {
 
   // stories
   Story: Story.stories,
+
+  // graphs
   Graph: Graph.graphs,
 
   // events
@@ -113,4 +115,4 @@ const AddEndpoint = GetEndpointSubscriber((e): IOError => {
 
 export const UserLogin = User.UserLogin;
 export const PageDeleteMany = Page.DeleteManyPage;
-export { AddEndpoint, Endpoints, Graph, Uploads };
+export { AddEndpoint, Endpoints, Uploads };

packages/@liexp/shared/src/io/http/graphs/Graph.ts

@@ -1,4 +1,5 @@
 import * as t from "io-ts";
+import { UUID } from "io-ts-types/lib/UUID.js";
 import { Forecast } from "../climate-change/Forecast.js";
 import { SummitEvent } from "../climate-change/SummitEvent.js";
 import { WHOCovid19GlobalData } from "../covid/COVIDDailyDatum.js";
@@ -86,3 +87,30 @@ export const GraphData = t.union(
 );
 
 export type GraphId = t.TypeOf<typeof GraphId>;
+
+export const GraphType = t.union(
+  [t.literal("reactflow"), t.literal("AxisGraph")],
+  "GraphType",
+);
+export type GraphType = t.TypeOf<typeof GraphType>;
+
+export const CreateGraphData = t.strict(
+  {
+    type: GraphType,
+    label: t.string,
+    slug: t.string,
+    data: t.any,
+    options: t.any,
+  },
+  "CreateGraphData",
+);
+export type CreateGraphData = t.TypeOf<typeof CreateGraphData>;
+
+export const Graph = t.strict(
+  {
+    ...CreateGraphData.type.props,
+    id: UUID,
+  },
+  "Graph",
+);
+export type Graph = t.TypeOf<typeof Graph>;

packages/@liexp/shared/src/io/http/index.ts

@@ -21,6 +21,7 @@ import * as Story from "./Story.js";
 import * as Topic from "./Topic.js";
 import * as User from "./User.js";
 import * as Video from "./Video.js";
+import * as Graph from "./graphs/Graph.js";
 
 export {
   Actor,
@@ -29,6 +30,7 @@ export {
   Error,
   EventSuggestion,
   Events,
+  Graph,
   Group,
   GroupMember,
   Keyword,

packages/@liexp/shared/src/tests/arbitrary/events/BookEvent.arbitrary.ts

@@ -28,8 +28,8 @@ export const BookEventArb = getArbitrary(
   createdAt: fc.sample(DateArb, 1)[0],
   updatedAt: fc.sample(DateArb, 1)[0],
   deletedAt: undefined,
-  excerpt: {},
-  body: {},
+  excerpt: undefined,
+  body: undefined,
   media: fc.sample(fc.uuid(), 5) as any[],
   keywords: fc.sample(fc.uuid(), 5) as any[],
   links: fc.sample(fc.uuid(), 5) as any[],

packages/@liexp/ui/src/components/Cards/Events/EventCard.tsx

@@ -66,7 +66,11 @@ const EventCard: React.FC<EventCardProps> = ({
           width={"100%"}
         >
           {showMedia ? (
-            <Stack display="flex" width={isVertical ? "100%" : "150px"} direction={"row"}>
+            <Stack
+              display="flex"
+              width={isVertical ? "100%" : "150px"}
+              direction={"row"}
+            >
               <CardMedia
                 component="img"
                 image={image}

packages/@liexp/ui/src/components/Cards/Events/EventCardGrid.tsx

@@ -13,7 +13,7 @@ interface EventCardGridProps {
   showItemRelations?: boolean;
   style?: React.CSSProperties;
   itemStyle?: React.CSSProperties;
-  cardLayout?: EventCardProps['layout'];
+  cardLayout?: EventCardProps["layout"];
 }
 
 const PREFIX = "EventCardGrid";

packages/@liexp/ui/src/components/Common/BlockNote/Editor.tsx

@@ -36,16 +36,18 @@ export interface BNEditorProps {
   onChange?: (content: BNESchemaEditor["document"]) => void;
 }
 
-// eslint-disable-next-line react/display-name
-const ThemedBlockNoteView = (theme: "light" | "dark"): React.FC<any> => (props) => (
-  <BlockNoteView {...props} theme={theme} />
-);
+const ThemedBlockNoteView =
+  (theme: "light" | "dark"): React.FC<any> =>
+  // eslint-disable-next-line react/display-name
+  (props) => <BlockNoteView {...props} theme={theme} />;
 
-const StyledBlockNoteView = styled(ThemedBlockNoteView("light"))(({ editable }) => ({
-  [".bn-editor"]: {
-    padding: !editable ? 0 : 54,
-  },
-}));
+const StyledBlockNoteView = styled(ThemedBlockNoteView("light"))(
+  ({ editable }) => ({
+    [".bn-editor"]: {
+      padding: !editable ? 0 : 54,
+    },
+  }),
+);
 
 export const BNEditor: React.FC<BNEditorProps> = ({
   content,

packages/@liexp/ui/src/components/Common/Graph/FlowGraph.tsx

@@ -9,7 +9,6 @@ import {
   type FitViewOptions,
   type ReactFlowProps,
 } from "reactflow";
-
 import "reactflow/dist/style.css";
 
 export type FlowGraphProps = ReactFlowProps;

packages/@liexp/ui/src/components/Common/Icons/FAIcon.tsx

@@ -31,7 +31,8 @@ export interface FAIconProps extends FontAwesomeIconProps {
     | "person-half-dress"
     | "users-between-lines"
     | "share-nodes"
-    | "map-location";
+    | "map-location"
+    | "chart-line";
 }
 
 export const FAIcon: React.FC<FAIconProps> = ({ icon, ...props }) => {
@@ -96,3 +97,11 @@ export const MediaIcon: FAIconFC = (props) => (
     icon={"file-image"}
   />
 );
+
+export const GraphIcon: FAIconFC = (props) => (
+  <FAIcon
+    color={toColorHash(generateRandomColor())}
+    {...props}
+    icon={"chart-line"}
+  />
+);