Merge pull request #6 from datavisyn/no_dist

Prepare no_dist version

app_template/__init__.py

@@ -7,9 +7,9 @@
 class VisynPlugin(AVisynPlugin):
     def init_app(self, app: FastAPI):
         # Register anything related the the FastAPI here, i.e. routers, middlewares, events, etc.
-        from .example_router import example_router
+        from .app_router import app_router
 
-        app.include_router(example_router, prefix="/api/app")
+        app.include_router(app_router, prefix="/api/v1/app")
 
     def register(self, registry: RegHelper):
         pass

app_template/app_router.py

@@ -0,0 +1,123 @@
+import asyncio
+import contextlib
+import json
+import logging
+from weakref import WeakSet
+from fastapi import APIRouter, FastAPI, Request
+from datetime import datetime
+import logging
+import uuid
+from sqlmodel import SQLModel, create_engine, Field
+from sqlalchemy.orm import sessionmaker
+from sse_starlette.sse import EventSourceResponse
+
+_log = logging.getLogger(__name__)
+app_router = APIRouter(tags=["app_template"])
+
+
+_log = logging.getLogger(__name__)
+
+class CampaignBase(SQLModel):
+    name: str
+    description: str | None = None
+
+
+class Campaign(CampaignBase, table=True):
+    __tablename__ = "campaign"
+
+    id: uuid.UUID | None = Field(default_factory=uuid.uuid4, primary_key=True)
+    creation_date: datetime = Field(default_factory=datetime.utcnow, nullable=False)
+    modification_date: datetime | None = Field(nullable=True)
+
+
+class CampaignRead(CampaignBase):
+    id: uuid.UUID
+    creation_date: datetime
+    modification_date: datetime | None
+
+
+class CampaignCreate(CampaignBase):
+    pass
+
+
+
+
+# Create all tables and stuff (use in development only)
+engine = create_engine("sqlite:///:memory:", echo=True, connect_args={"check_same_thread": False})
+SQLModel.metadata.drop_all(engine)
+SQLModel.metadata.create_all(engine)
+
+
+create_session = sessionmaker(engine)
+
+class StreamQueue:
+    def __init__(self) -> None:
+        self.queues = WeakSet[asyncio.Queue]()
+
+    async def subscribe(self, req: Request):
+        queue = await self.create_queue()
+
+        async def poll_queue():
+            with contextlib.suppress(asyncio.CancelledError):
+                yield json.dumps({"message": "start"})
+                while True:
+                    if await req.is_disconnected():
+                        break
+
+                    message = await queue.get()
+                    yield json.dumps(message)
+                    queue.task_done()
+
+        # The Cache-Control header is required to make it work with webpack-dev-server: https://stackoverflow.com/q/71783075
+        return EventSourceResponse(poll_queue(), headers={"Cache-Control": "no-transform"})  # type: ignore --> we are returning the response, but want it typed as SSEMessage
+
+    async def create_queue(self) -> asyncio.Queue:
+        queue = asyncio.Queue()
+        self.queues.add(queue)
+        return queue
+
+    async def publish(self, message: dict) -> None:
+        for queue in self.queues:
+            await queue.put(message)
+
+stream_queue = StreamQueue()
+
+
+with create_session() as session:
+    campaign = Campaign(name="My first campaign", description="This is the first campaign", type="test")
+    session.add(campaign)
+    session.commit()
+
+
+@app_router.get("/campaigns")
+async def get_campaigns() -> list[CampaignRead]:
+    with create_session() as session:
+        campaigns: list[Campaign] = session.query(Campaign).all()
+        return campaigns
+
+
+@app_router.post("/campaign")
+async def create_campaign(campaign: CampaignCreate) -> CampaignRead:
+    with create_session() as session:
+        campaign = Campaign.from_orm(campaign)
+        session.add(campaign)
+        session.commit()
+        session.refresh(campaign)
+        await stream_queue.publish({"type": "campaign_created", "message": str(campaign.id)})
+        return campaign
+
+
+@app_router.delete("/campaign/{campaign_id}")
+async def delete_campaign(campaign_id: uuid.UUID) -> CampaignRead:
+    with create_session() as session:
+        campaign: Campaign = session.get(Campaign, campaign_id)
+        session.delete(campaign)
+        session.commit()
+        await stream_queue.publish({"message": "campaign deleted"})
+        return campaign
+
+
+
+@app_router.get("/subscribe")
+async def subscribe(req: Request):
+    return await stream_queue.subscribe(req)

package.json

@@ -31,6 +31,7 @@
     "all": "yarn run lint:fix && yarn run test && yarn run build && yarn run dist",
     "build": "yarn run clean && yarn run compile && yarn run copy",
     "clean": "visyn_scripts clean build dist lib",
+    "codegen:openapi": "npx @rtk-query/codegen-openapi ./src/codegen.ts",
     "compile:watch": "visyn_scripts compile --watch",
     "compile": "visyn_scripts compile",
     "copy": "visyn_scripts copy",
@@ -41,18 +42,24 @@
     "docs": "visyn_scripts docs",
     "lint:fix": "visyn_scripts lint --fix",
     "lint": "visyn_scripts lint",
-    "prepack": "yarn run build",
     "predist": "yarn run lint && yarn run test && yarn run build",
     "start": "visyn_scripts start --env workspace_mode=single",
     "test": "visyn_scripts test",
     "webpack:dev": "visyn_scripts build --mode development --env workspace_mode=single",
     "webpack:prod": "visyn_scripts build --mode production --env workspace_mode=single"
   },
   "dependencies": {
+    "@mantine/core": "^5.5.5",
+    "@mantine/form": "^5.5.5",
+    "@mantine/hooks": "^5.5.5",
+    "@mantine/notifications": "^5.5.5",
+    "@reduxjs/toolkit": "^1.8.2",
+    "react-redux": "^8.0.2",
     "visyn_core": "git+ssh://[email protected]:datavisyn/visyn_core#develop",
     "visyn_scripts": "git+ssh://[email protected]/datavisyn/visyn_scripts#develop"
   },
   "devDependencies": {
+    "@rtk-query/codegen-openapi": "^1.0.0",
     "cypress": "^12.0.1"
   },
   "resolutions": {

requirements.txt

@@ -1 +1,4 @@
 visyn_core@git+https://github.com/datavisyn/visyn_core.git@develop#egg=visyn_core
+pandas==2.0.1
+sqlmodel==0.0.8
+sse-starlette==1.6.1

src/App.tsx

@@ -0,0 +1,96 @@
+import { Button, Card, Group, SimpleGrid, Stack, TextInput } from '@mantine/core';
+import * as React from 'react';
+import { VisynApp, VisynHeader } from 'visyn_core/app';
+import { useForm } from '@mantine/form';
+import { showNotification } from '@mantine/notifications';
+import { appApi, useCreateCampaign, useDeleteCampaign, useGetCampaigns } from './store/store';
+import { useAppDispatch } from './store/hooks';
+
+export function App() {
+  const { data: campaigns } = useGetCampaigns();
+  const [deleteCampaign, { isLoading }] = useDeleteCampaign();
+  const [createCampaign, { isLoading: isCreateLoading }] = useCreateCampaign();
+  const dispatch = useAppDispatch();
+
+  const form = useForm({
+    initialValues: {
+      name: '',
+      description: '',
+    },
+
+    validate: {
+      name: (value) => (value.trim().length > 0 ? null : 'Name is required'),
+      description: (value) => (value.trim().length > 0 ? null : 'Description is required'),
+    },
+  });
+
+  React.useEffect(() => {
+    const evtSource = new EventSource('/api/v1/app/subscribe');
+
+    evtSource.onmessage = (event) => {
+      console.log(`message: ${event.data}`);
+      // refetch my stuff
+      dispatch(appApi.util.invalidateTags(['Campaign']));
+    };
+
+    return () => {
+      evtSource.close();
+    };
+  }, [dispatch]);
+
+  return (
+    <VisynApp header={<VisynHeader />} loginMenu={null}>
+      <SimpleGrid cols={2}>
+        <form
+          onSubmit={form.onSubmit(async (values) => {
+            await createCampaign({
+              campaignCreate: {
+                name: values.name,
+                description: values.description,
+              },
+            }).unwrap();
+
+            form.reset();
+          })}
+        >
+          <Stack m="sm">
+            <TextInput placeholder="Campaign name" {...form.getInputProps('name')} />
+
+            <TextInput placeholder="Campaign description" {...form.getInputProps('description')} />
+
+            <Button loading={isCreateLoading} type="submit">
+              Create campaign
+            </Button>
+          </Stack>
+        </form>
+        <Stack style={{ overflowY: 'auto' }} m="md">
+          {campaigns?.map((c) => (
+            <Card key={c.id} withBorder shadow="sm">
+              <Group position="apart">
+                {c.name}
+
+                <Button
+                  onClick={async () => {
+                    try {
+                      await deleteCampaign({ campaignId: c.id }).unwrap();
+                    } catch (e) {
+                      showNotification({
+                        title: 'Error deleting campaign',
+                        color: 'red',
+                        message: `${e.data.detail}`,
+                      });
+                    }
+                  }}
+                  color="red"
+                  loading={isLoading}
+                >
+                  Delete
+                </Button>
+              </Group>
+            </Card>
+          ))}
+        </Stack>
+      </SimpleGrid>
+    </VisynApp>
+  );
+}

src/codegen.ts

@@ -0,0 +1,14 @@
+import type { ConfigFile } from '@rtk-query/codegen-openapi';
+
+const config: ConfigFile = {
+  schemaFile: 'http://localhost:9000/api/openapi.json',
+  apiFile: './store/appBaseApi.ts',
+  apiImport: 'emptySplitApi',
+  outputFile: './store/generatedAppApi.ts',
+  exportName: 'generatedAppApi',
+  tag: false, // TODO: when true, his will refetch everything with every mutation as we only have one tag.
+  filterEndpoints: (endpoint, definition) => definition?.path?.startsWith('/api/v1/app'),
+  hooks: { queries: true, lazyQueries: true, mutations: true },
+};
+
+export default config;

src/index.initialize.tsx

@@ -1,11 +1,16 @@
 import * as React from 'react';
 import { createRoot } from 'react-dom/client';
-import { VisynApp, VisynAppProvider } from 'visyn_core/app';
+import { Provider } from 'react-redux';
+import { VisynAppProvider } from 'visyn_core/app';
+import { store } from './store/store';
+import { App } from './App';
 
 createRoot(document.getElementById('root')).render(
   <React.StrictMode>
-    <VisynAppProvider appName="App Template">
-      <VisynApp loginMenu={null}>Hello app_template!</VisynApp>
-    </VisynAppProvider>
+    <Provider store={store}>
+      <VisynAppProvider appName="App Template">
+        <App />
+      </VisynAppProvider>
+    </Provider>
   </React.StrictMode>,
 );

src/store/appBaseApi.ts

@@ -0,0 +1,8 @@
+// Or from '@reduxjs/toolkit/query' if not using the auto-generated hooks
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
+
+// initialize an empty api service that we'll inject endpoints into later as needed
+export const emptySplitApi = createApi({
+  baseQuery: fetchBaseQuery({ baseUrl: '/' }),
+  endpoints: () => ({}),
+});

src/store/generatedAppApi.ts

@@ -0,0 +1,55 @@
+import { emptySplitApi as api } from './appBaseApi';
+
+const injectedRtkApi = api.injectEndpoints({
+  endpoints: (build) => ({
+    getCampaignsApiV1AppCampaignsGet: build.query<GetCampaignsApiV1AppCampaignsGetApiResponse, GetCampaignsApiV1AppCampaignsGetApiArg>({
+      query: () => ({ url: `/api/v1/app/campaigns` }),
+    }),
+    createCampaignApiV1AppCampaignPost: build.mutation<CreateCampaignApiV1AppCampaignPostApiResponse, CreateCampaignApiV1AppCampaignPostApiArg>({
+      query: (queryArg) => ({ url: `/api/v1/app/campaign`, method: 'POST', body: queryArg.campaignCreate }),
+    }),
+    deleteCampaignApiV1AppCampaignCampaignIdDelete: build.mutation<
+      DeleteCampaignApiV1AppCampaignCampaignIdDeleteApiResponse,
+      DeleteCampaignApiV1AppCampaignCampaignIdDeleteApiArg
+    >({
+      query: (queryArg) => ({ url: `/api/v1/app/campaign/${queryArg.campaignId}`, method: 'DELETE' }),
+    }),
+  }),
+  overrideExisting: false,
+});
+export { injectedRtkApi as generatedAppApi };
+export type GetCampaignsApiV1AppCampaignsGetApiResponse = /** status 200 Successful Response */ CampaignRead[];
+export type GetCampaignsApiV1AppCampaignsGetApiArg = void;
+export type CreateCampaignApiV1AppCampaignPostApiResponse = /** status 200 Successful Response */ CampaignRead;
+export type CreateCampaignApiV1AppCampaignPostApiArg = {
+  campaignCreate: CampaignCreate;
+};
+export type DeleteCampaignApiV1AppCampaignCampaignIdDeleteApiResponse = /** status 200 Successful Response */ CampaignRead;
+export type DeleteCampaignApiV1AppCampaignCampaignIdDeleteApiArg = {
+  campaignId: string;
+};
+export type CampaignRead = {
+  name: string;
+  description?: string;
+  id: string;
+  creation_date: string;
+  modification_date?: string;
+};
+export type ValidationError = {
+  loc: (string | number)[];
+  msg: string;
+  type: string;
+};
+export type HttpValidationError = {
+  detail?: ValidationError[];
+};
+export type CampaignCreate = {
+  name: string;
+  description?: string;
+};
+export const {
+  useGetCampaignsApiV1AppCampaignsGetQuery,
+  useLazyGetCampaignsApiV1AppCampaignsGetQuery,
+  useCreateCampaignApiV1AppCampaignPostMutation,
+  useDeleteCampaignApiV1AppCampaignCampaignIdDeleteMutation,
+} = injectedRtkApi;

src/store/hooks.ts

@@ -0,0 +1,7 @@
+import { useDispatch, useSelector } from 'react-redux';
+import type { TypedUseSelectorHook } from 'react-redux';
+import type { AppDispatch, AppState } from './store';
+
+// Use throughout your app instead of plain `useDispatch` and `useSelector`
+export const useAppDispatch: () => AppDispatch = useDispatch;
+export const useAppSelector: TypedUseSelectorHook<AppState> = useSelector;