settled on typings. Now working on ui interaction flow.

2024-02-24 10:59:26 -08:00 · 2024-02-24 10:59:26 -08:00 · 50bd3eaf5c
commit 50bd3eaf5c
parent 5d7c53dd3c
10 changed files with 328 additions and 18815 deletions
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -8,6 +8,7 @@
    "@material-ui/core": "^4.12.4",
    "@mui/icons-material": "^5.15.10",
    "@mui/material": "^5.15.10",
+    "@nano-sql/core": "^2.3.7",
    "@reduxjs/toolkit": "^2.2.1",
    "@testing-library/dom": "^9.3.4",
    "@testing-library/jest-dom": "^5.17.0",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -20,6 +20,9 @@ dependencies:
  '@mui/material':
    specifier: ^5.15.10
    version: 5.15.10(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@types/react@18.2.57)(react-dom@18.2.0)(react@18.2.0)
+  '@nano-sql/core':
+    specifier: ^2.3.7
+    version: 2.3.7
  '@reduxjs/toolkit':
    specifier: ^2.2.1
    version: 2.2.1(react-redux@9.1.0)(react@18.2.0)
@ -2494,6 +2497,20 @@ packages:
      react-is: 18.2.0
    dev: false

+  /@nano-sql/core@2.3.7:
+    resolution: {integrity: sha512-B9nniPPRhPf5Hf2cyvy72SNEg4iKQEW6pig9nwrM4DJlmOMZudifOMPBoJuK6JcTaLATIOGRPkclfosNUALnLQ==}
+    hasBin: true
+    dependencies:
+      fast-deep-equal: 2.0.1
+      levenshtein-edit-distance: 2.0.5
+      really-small-events: 1.1.0
+      snap-db: 1.1.6
+    optionalDependencies:
+      chalk: 2.4.2
+      chokidar: 3.6.0
+      command-line-args: 5.2.1
+    dev: false
+
  /@nicolo-ribaudo/eslint-scope-5-internals@5.1.1-v1:
    resolution: {integrity: sha512-54/JRvkLIzzDWshCWfuhadfrfZVPiElY8Fcgmg1HroEly/EDSszzhBAsarCux+D/kOslTRquNzuyGSmUSTTHGg==}
    dependencies:
@ -3624,6 +3641,13 @@ packages:
      dequal: 2.0.3
    dev: false

+  /array-back@3.1.0:
+    resolution: {integrity: sha512-TkuxA4UCOvxuDK6NZYXCalszEzj+TLszyASooky+i742l9TqsOdYCMJJupxRic61hwquNtppB3hgcuq9SVSH1Q==}
+    engines: {node: '>=6'}
+    requiresBuild: true
+    dev: false
+    optional: true
+
  /array-buffer-byte-length@1.0.1:
    resolution: {integrity: sha512-ahC5W1xgou+KTXix4sAO8Ki12Q+jf4i0+tmk3sC+zgcynshkHxzpXdImBehiUYKKKDwvfFiJl1tZt6ewscS1Mg==}
    engines: {node: '>= 0.4'}
@ -3985,6 +4009,7 @@ packages:
  /binary-extensions@2.2.0:
    resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
    engines: {node: '>=8'}
+    requiresBuild: true
    dev: false

  /bluebird@3.7.2:
@ -4285,6 +4310,18 @@ packages:
      delayed-stream: 1.0.0
    dev: false

+  /command-line-args@5.2.1:
+    resolution: {integrity: sha512-H4UfQhZyakIjC74I9d34fGYDwk3XpSr17QhEd0Q3I9Xq1CETHo4Hcuo87WyWHpAF1aSLjLRf5lD9ZGX2qStUvg==}
+    engines: {node: '>=4.0.0'}
+    requiresBuild: true
+    dependencies:
+      array-back: 3.1.0
+      find-replace: 3.0.0
+      lodash.camelcase: 4.3.0
+      typical: 4.0.0
+    dev: false
+    optional: true
+
  /commander@2.20.3:
    resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
    dev: false
@ -5673,6 +5710,10 @@ packages:
      - supports-color
    dev: false

+  /fast-deep-equal@2.0.1:
+    resolution: {integrity: sha512-bCK/2Z4zLidyB4ReuIsvALH6w31YfAQDmXMqMx6FyfHqvBxtjC0eRumeSu4Bs3XtXwpyIywtSTrVT99BxY1f9w==}
+    dev: false
+
  /fast-deep-equal@3.1.3:
    resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
    dev: false
@ -5775,6 +5816,15 @@ packages:
      pkg-dir: 4.2.0
    dev: false

+  /find-replace@3.0.0:
+    resolution: {integrity: sha512-6Tb2myMioCAgv5kfvP5/PkZZ/ntTpVK39fHY7WkWBgvbeE+VHd/tZuZ4mrC+bxh4cfOZeYKVPaJIZtZXV7GNCQ==}
+    engines: {node: '>=4.0.0'}
+    requiresBuild: true
+    dependencies:
+      array-back: 3.1.0
+    dev: false
+    optional: true
+
  /find-root@1.1.0:
    resolution: {integrity: sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==}
    dev: false
@ -6472,6 +6522,7 @@ packages:
  /is-binary-path@2.1.0:
    resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
    engines: {node: '>=8'}
+    requiresBuild: true
    dependencies:
      binary-extensions: 2.2.0
    dev: false
@ -7559,6 +7610,11 @@ packages:
    engines: {node: '>=6'}
    dev: false

+  /levenshtein-edit-distance@2.0.5:
+    resolution: {integrity: sha512-Yuraz7QnMX/JENJU1HA6UtdsbhRzoSFnGpVGVryjQgHtl2s/YmVgmNYkVs5yzVZ9aAvQR9wPBUH3lG755ylxGA==}
+    hasBin: true
+    dev: false
+
  /levn@0.3.0:
    resolution: {integrity: sha512-0OO4y2iOHix2W6ujICbKIaEQXvFQHue65vUG3pb5EUomzPI90z9hsA1VsO/dbIIpC53J8gxM9Q4Oho0jrCM/yA==}
    engines: {node: '>= 0.8.0'}
@ -7630,6 +7686,12 @@ packages:
      p-locate: 5.0.0
    dev: false

+  /lodash.camelcase@4.3.0:
+    resolution: {integrity: sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==}
+    requiresBuild: true
+    dev: false
+    optional: true
+
  /lodash.debounce@4.0.8:
    resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==}
    dev: false
@ -9447,10 +9509,15 @@ packages:
  /readdirp@3.6.0:
    resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
    engines: {node: '>=8.10.0'}
+    requiresBuild: true
    dependencies:
      picomatch: 2.3.1
    dev: false

+  /really-small-events@1.1.0:
+    resolution: {integrity: sha512-iyh4pULyDYBMecekEYcP3ToJD3ZUdIPfZV9nx1C1lJfMguElkDAZvEMJegy8uE7eIROCuLsqh5r44fVro9nKFg==}
+    dev: false
+
  /recursive-readdir@2.2.3:
    resolution: {integrity: sha512-8HrF5ZsXk5FAH9dgsx3BlUer73nIhuj+9OrQwEbLTPOBzGkL1lsFCR01am+v+0m2Cmbs1nP12hLDl5FA7EszKA==}
    engines: {node: '>=6.0.0'}
@ -9962,6 +10029,10 @@ packages:
    engines: {node: '>=12'}
    dev: false

+  /snap-db@1.1.6:
+    resolution: {integrity: sha512-KxsO5RnY70J48f6poy0qVm2WS8ZbqG0PUVP2fjd7dvlaCMZ/DxtDv5fhhIVwkP2lOmNQ9QsTFfDuCA7N+TF3qg==}
+    dev: false
+
  /sockjs@0.3.24:
    resolution: {integrity: sha512-GJgLTZ7vYb/JtPSSZ10hsOYIvEYsjbNU+zPdIHcUaWVNUEPivzxku31865sSSud0Da0W4lEeOPlmw93zLQchuQ==}
    dependencies:
@ -10667,6 +10738,13 @@ packages:
    hasBin: true
    dev: false

+  /typical@4.0.0:
+    resolution: {integrity: sha512-VAH4IvQ7BDFYglMd7BPRDfLgxZZX4O4TFcRDA6EN5X7erNJJq+McIEp8np9aVtxrCJ6qx4GTYVfOWNjcqwZgRw==}
+    engines: {node: '>=8'}
+    requiresBuild: true
+    dev: false
+    optional: true
+
  /unbox-primitive@1.0.2:
    resolution: {integrity: sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==}
    dependencies:
--- a/src/components/LibraryItem.tsx
+++ b/src/components/LibraryItem.tsx
@ -0,0 +1,27 @@
+import { Composable } from "./IComposable";
+import { LibraryItem as LibItem } from "../lib/prompt";
+import AddCircleOutlineOutlinedIcon from '@mui/icons-material/AddCircleOutlineOutlined';
+import { Button } from "@material-ui/core";
+
+export interface StyleProps {
+    item: LibItem
+    onAddItem: (item: LibItem) => void;
+}
+
+export function LibraryItem(props: StyleProps) {
+    const { item, onAddItem } = props
+    return (
+        <div>
+            <Button onClick={() => onAddItem(item)}>
+                <AddCircleOutlineOutlinedIcon/>
+            </Button>
+            <span>
+                {
+                    item.name ? (
+                        <div className={`catetory-${item.category}`}>{item.name} - {item.prompt}</div>
+                    ) : (<div>{item.prompt}</div>)
+                }
+            </span>
+        </div>
+    ) as Composable;
+};
--- a/src/components/Nugget.tsx
+++ b/src/components/Nugget.tsx
@ -2,6 +2,7 @@ import { Button, ButtonGroup, Chip, Divider } from '@material-ui/core';
 import React, { Component, useState } from 'react';
 import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowUp';
+import {Composable} from "./IComposable"

 import "./Nugget.css";

@ -23,5 +24,5 @@ export default function Nugget({ text, initialScore }: { text: string, initialSc
            </ButtonGroup>
            </span>
        </div>
-    );
+    ) as Composable;
 }
--- a/src/components/Operation.tsx
+++ b/src/components/Operation.tsx
@ -3,69 +3,70 @@ import React, { Children, ReactNode } from 'react';
 import "./Operation.css";
 import { Op } from "../lib/operator";
 import { randomUUID } from "crypto";
+import { Composable } from "./IComposable";


-function Operation({ children, initialOp }: { children: ReactNode[], initialOp: Op}) {
-    const [op, setOp] = React.useState(initialOp);
-    const [contextMenu, setContextMenu] = React.useState<{
-        mouseX: number;
-        mouseY: number;
-      } | null>(null);
+function Operation({ children, initialOp }: { children: ReactNode[], initialOp: Op }) {
+  const [op, setOp] = React.useState(initialOp);
+  const [contextMenu, setContextMenu] = React.useState<{
+    mouseX: number;
+    mouseY: number;
+  } | null>(null);

-      const [id, ] = React.useState(randomUUID);
+  const [id,] = React.useState(randomUUID);

-      const handleContextMenu = (event: React.MouseEvent) => {
-        event.preventDefault();
-        setContextMenu(
-          contextMenu === null
-            ? {
-                mouseX: event.clientX + 2,
-                mouseY: event.clientY - 6,
-              }
-            : // repeated contextmenu when it is already open closes it with Chrome 84 on Ubuntu
-              // Other native context menus might behave different.
-              // With this behavior we prevent contextmenu from the backdrop to re-locale existing context menus.
-              null,
-        );
-      };
-    
-      const handleClose = () => {
-        setContextMenu(null);
-      };
+  const handleContextMenu = (event: React.MouseEvent) => {
+    event.preventDefault();
+    setContextMenu(
+      contextMenu === null
+        ? {
+          mouseX: event.clientX + 2,
+          mouseY: event.clientY - 6,
+        }
+        : // repeated contextmenu when it is already open closes it with Chrome 84 on Ubuntu
+        // Other native context menus might behave different.
+        // With this behavior we prevent contextmenu from the backdrop to re-locale existing context menus.
+        null,
+    );
+  };

-      const changeOperator = (opV : string) => {
-        setOp(opV as unknown as Op);
-        handleClose();
-      }
+  const handleClose = () => {
+    setContextMenu(null);
+  };

-    return (
-        <div className="operation" onContextMenu={handleContextMenu}>
-            <div className="title">{op}</div>
-            <div className="nuggets">
-                {Children.map(children, child => {
-                    return (<div>
-                        {child}
-                    </div>)
-                })}
-            </div>
-            <Menu
-            open={contextMenu !== null}
-            onClose={handleClose}
-            anchorReference="anchorPosition"
-            anchorPosition={
-            contextMenu !== null
-                ? { top: contextMenu.mouseY, left: contextMenu.mouseX }
-                : undefined
-            }
-        >
-            {Object.values(Op).map((v) => {
-                return (
-                    <MenuItem onClick={() => changeOperator(v)}>{v}</MenuItem>
-                )
-            })}
-        </Menu>
-        </div>
-);
+  const changeOperator = (opV: string) => {
+    setOp(opV as unknown as Op);
+    handleClose();
+  }
+
+  return (
+    <div className="operation" onContextMenu={handleContextMenu}>
+      <div className="title">{op}</div>
+      <div className="nuggets">
+        {Children.map(children, child => {
+          return (<div>
+            {child}
+          </div>)
+        })}
+      </div>
+      <Menu
+        open={contextMenu !== null}
+        onClose={handleClose}
+        anchorReference="anchorPosition"
+        anchorPosition={
+          contextMenu !== null
+            ? { top: contextMenu.mouseY, left: contextMenu.mouseX }
+            : undefined
+        }
+      >
+        {Object.values(Op).map((v) => {
+          return (
+            <MenuItem onClick={() => changeOperator(v)}>{v}</MenuItem>
+          )
+        })}
+      </Menu>
+    </div>
+  ) as Composable;
 }

 export { Operation, Op };
--- a/src/components/PromptArea.tsx
+++ b/src/components/PromptArea.tsx
@ -18,9 +18,13 @@ export default function PromptArea({ children }: { children?: any }) {

  const handleClose = (value: string) => {
    setOpen(false);
-    setSelectedValue(value);
+    // setSelectedValue(value);
  };

+  const handleComposableClicked = (composable : Composable) => {
+    setSelectedComposable(composable);
+  }
+
    return (
        <div>
            <Button className="add-button">
--- a/src/components/PromptLibrary.tsx
+++ b/src/components/PromptLibrary.tsx
@ -1,42 +1,36 @@
-import { Dialog, DialogTitle, List, ListItem, ListItemAvatar, Avatar, ListItemText } from "@material-ui/core";
-import { blue } from "@material-ui/core/colors";
-import ListItemButton from "@mui/material/ListItemButton";
-
-export type Category = {
-    id: string,
-    label: string,
-    color?: string,
-}
-
-const categories = [
-    { id: "style", label: "Styles", color: "blue" },
-    { id: "subject", label: "Subjects", color: "black" },
-    { id: "vibes", label: "Vibes", color: "gold" },
-    { id: "mediums", label: "Mediums", color: "black" },
-] as Category[];
+import { Dialog, DialogTitle } from "@material-ui/core";
+import { Composable } from "./IComposable";
+import { Library as PromptLibraryType, LibraryItem as LibItemType } from "../lib/prompt";
+import { LibraryItem } from "./LibraryItem";

 export interface SimpleDialogProps {
    open: boolean;
-    selectedValue: string;
-    onClose: (value: string) => void;
+    onClose: (composable: Composable) => void,
+    library: PromptLibraryType,
+    onAddItem : (item : LibItemType) => void,
 }

 export function PromptLibrary(props: SimpleDialogProps) {
-    const { onClose, selectedValue, open } = props;
+    const { onClose, library, open, onAddItem } = props;

    const handleClose = () => {
-        onClose(selectedValue);
+        // onClose(selectedValue);
    };

-    const handleNuggetClick = (value: string) => {
-        onClose(value);
+    const handleNuggetClick = (composable : Composable) => {
+        onClose(composable);
    };

+    const handleOnAddItem = (item : LibItemType) => {
+    }
+
    return (
        <Dialog onClose={handleClose} open={open}>
            <DialogTitle>Prompt Library</DialogTitle>
            <div>
-                Prompt Library
+                {
+                    library.map(item => <LibraryItem item={item} onAddItem={handleOnAddItem} />)
+                }
            </div>
        </Dialog>
    );
--- a/src/lib/prompt.ts
+++ b/src/lib/prompt.ts
@ -0,0 +1,113 @@
+import { nSQL } from "@nano-sql/core";
+import { Op } from "./operator";
+import { RocksDB } from "@nano-sql/adapter-rocksdb";
+import tables from "./schema.json";
+import { uuid } from "@nano-sql/core/lib/utilities";
+
+type Id = string;
+
+type IdAble = {
+    id: Id,
+}
+
+export enum Category {
+    subject = "subject",
+    style = "style",
+    vibes = "vibes",
+    medium = "medium",
+}
+
+export type LibraryItem = {
+    id: Id,
+    name?: string,
+    prompt: string,
+    category: Category,
+}
+
+export type Library = Array<LibraryItem>;
+
+export type Nugget = IdAble & {
+    item: LibraryItem,
+    score: number,
+}
+
+export type Operation = IdAble & {
+    op: Op,
+    items: Array<Nugget>
+}
+
+export type PromptItem = Operation | Nugget
+
+export type PromptArea = Array<PromptItem>;
+
+export async function getDb() {
+    return new Promise((resolve, reject) => {
+        // typical setup
+        nSQL().createDatabase({
+            id: "my_db", // can be anything that's a string
+            mode: new RocksDB(),
+            tables: [
+                {
+                    "name": "library_item",
+                    "model": {
+                        "id:uuid": { "pk": true },
+                        "name:string": {},
+                        "prompt:string": { notNull: true },
+                        "category:string": { notNull: true, }
+                    }
+                },
+                {
+                    "name": "nugget",
+                    "model": {
+                        "id:uuid": { "pk": true },
+                        "library_item:uuid": {},
+                        "score:number": {}
+                    }
+                },
+                {
+                    "name": "operation",
+                    "model": {
+                        "id:uuid": { pk: true },
+                        "op:string": {},
+                        "items:array": {}
+                    }
+                },
+                {
+                    "name": "library",
+                    "model": {
+                        "item:uuid": {},
+                    }
+                },
+                {
+                    "name": "prompt_area",
+                    "model": {
+                        "type:string": {notNull: true},
+                        "item:obj": {notNull: true},
+                    }
+                }
+            ],
+            version: 1, // current schema/database version
+            onVersionUpdate: (prevVersion) => { // migrate versions
+                return new Promise((res, rej) => {
+                    switch (prevVersion) {
+                        case 1:
+                            // migrate v1 to v2
+                            res(2);
+                            break;
+                        case 2:
+                            // migrate v2 to v3
+                            res(3);
+                            break;
+                    }
+
+                });
+
+            }
+        }).then((db) => {
+            resolve(db)
+        }).catch((err) => {
+            reject(err);
+        })
+    });
+
+}
--- a/src/lib/schema.json
+++ b/src/lib/schema.json
@ -0,0 +1,27 @@
+[
+    {
+        "name": "library_item",
+        "model": {
+            "id:uuid": {"pk": true},
+            "name:string": {},
+            "prompt:string": {},
+            "type:string": {}
+        }
+    },
+    {
+        "name": "nugget",
+        "model": {
+            "id:uuid": {"pk": true},
+            "library_item:uuid": {},
+            "score:number": {}
+        }
+    },
+    {
+        "name": "operation",
+        "model": {
+            "id:uuid": {"pk": true},
+            "op:string": {},
+            "items:array": {}
+        }
+    }
+]