Spaces:

lynx-analytics
/

lynxkite

Running

App Files Files Community

darabos commited on Apr 5, 2024

Commit

01f62f3

1 Parent(s): a3bb72f

Throw out Baklava.js, use SvelteFlow.

Browse files

Files changed (18) hide show

web/.vscode/extensions.json +1 -1
web/README.md +23 -5
web/index.html +3 -3
web/package-lock.json +0 -0
web/package.json +14 -13
web/src/App.svelte +46 -0
web/src/App.vue +0 -117
web/src/app.css +5 -0
web/src/assets/favicon.ico +0 -0
web/src/assets/vue.svg +0 -1
web/src/components/GraphViz.vue +0 -19
web/src/main.ts +9 -4
web/src/style.css +0 -14
web/src/vite-env.d.ts +1 -0
web/svelte.config.js +7 -0
web/tsconfig.json +12 -17
web/tsconfig.node.json +1 -3
web/vite.config.ts +2 -5

web/.vscode/extensions.json CHANGED Viewed

@@ -1,3 +1,3 @@
 {
-  "recommendations": ["Vue.volar"]
 }

 {
+  "recommendations": ["svelte.svelte-vscode"]
 }

web/README.md CHANGED Viewed

@@ -1,9 +1,27 @@
-# Vue 3 + TypeScript + Vite
-This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
-## Recommended Setup
-- [VS Code](https://code.visualstudio.com/) + [Vue - Official](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (previously Volar) and disable Vetur
-- Use [vue-tsc](https://github.com/vuejs/language-tools/tree/master/packages/tsc) for performing the same type checking from the command line, or for generating d.ts files for SFCs.

+# Vite Svelte Flow Template
+This template creates a very basic [Svelte Flow](https://svelteflow.dev) app with [Vite](https://vite.dev).
+## Get it!
+```sh
+npx degit xyflow/vite-svelte-flow-template app-name
+```
+## Installation
+```sh
+npm install
+```
+## Development
+```sh
+npm run dev
+```
+## Build
+```sh
+npm run build
+```

web/index.html CHANGED Viewed

@@ -1,10 +1,10 @@
-<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + Vue + TS</title>
   </head>
   <body>
     <div id="app"></div>

+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Svelte Flow Starter</title>
   </head>
   <body>
     <div id="app"></div>

web/package-lock.json CHANGED Viewed

The diff for this file is too large to render. See raw diff

web/package.json CHANGED Viewed

@@ -1,23 +1,24 @@
 {
-  "name": "lynxkite-2000",
   "private": true,
   "version": "0.0.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "vue-tsc && vite build",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "baklavajs": "^2.4.3",
-    "graphology": "^0.25.4",
-    "sigma": "^3.0.0-beta.14",
-    "vue": "^3.4.21"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^5.0.4",
-    "typescript": "^5.2.2",
-    "vite": "^5.2.0",
-    "vue-tsc": "^2.0.6"
   }
 }

 {
+  "name": "vite-svelte-flow-template",
   "private": true,
   "version": "0.0.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-check --tsconfig ./tsconfig.json"
   },
   "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^3.0.2",
+    "@tsconfig/svelte": "^5.0.4",
+    "svelte": "^4.2.12",
+    "svelte-check": "^3.6.9",
+    "tslib": "^2.6.2",
+    "typescript": "^5.4.4",
+    "vite": "^5.2.8"
+  },
+  "dependencies": {
+    "@xyflow/svelte": "^0.0.40"
   }
 }

web/src/App.svelte ADDED Viewed

	@@ -0,0 +1,46 @@

+<script lang="ts">
+  import { writable } from 'svelte/store';
+  import {
+    SvelteFlow,
+    Controls,
+    Background,
+    MiniMap,
+    Position,
+    type Node,
+    type Edge,
+  } from '@xyflow/svelte';
+  import '@xyflow/svelte/dist/style.css';
+  const nodes = writable<Node[]>([
+    {
+      id: '1',
+      data: { label: 'Hello' },
+      position: { x: 0, y: 0 },
+      sourcePosition: Position.Left,
+      targetPosition: Position.Right,
+    },
+    {
+      id: '2',
+      data: { label: 'World' },
+      position: { x: 150, y: 150 },
+    },
+  ]);
+  const edges = writable<Edge[]>([
+    {
+      id: '1-2',
+      source: '1',
+      target: '2',
+    },
+  ]);
+</script>
+<div style:height="100vh">
+  <SvelteFlow {nodes} {edges} fitView>
+    <Background variant="dots" gap="6" size="1" />
+    <Controls />
+    <Background />
+    <MiniMap />
+  </SvelteFlow>
+</div>

web/src/App.vue DELETED Viewed

@@ -1,117 +0,0 @@
-// Baklava feature requests:
-// - Node search (https://github.com/newcat/baklavajs/issues/315)
-// - Check out sidebar
-// - Collapse node
-// - Customize toolbar
-// - Nicer styling for node palette, node categories
-// - Group nodes, like in Litegraph.
-// - Show param name for TextInputInterface.
-// - Resizable nodes. (Horizontally.)
-// - Put input and output on same line?
-<template>
-  <div style="width: 100vw; height: 100vh">
-    <BaklavaEditor :view-model="baklava" />
-  </div>
-</template>
-<script setup lang="ts">
-import { BaklavaEditor, useBaklava } from "@baklavajs/renderer-vue";
-import { BaklavaInterfaceTypes, NodeInterfaceType, setType } from "@baklavajs/interface-types";
-import * as BaklavaJS from "baklavajs";
-import "@baklavajs/themes/dist/syrup-dark.css";
-import { markRaw } from "vue";
-import { NodeInterface } from "baklavajs";
-import GraphViz from "./components/GraphViz.vue";
-const graphType = new NodeInterfaceType<string>("graph");
-const tableType = new NodeInterfaceType<string>("table");
-const ops = [
-  { name: 'Create scale-free graph', type: 'Creation', inputs: [], outputs: ['graph'], params: ['Number of nodes'] },
-  { name: 'Compute PageRank', type: 'Algorithms', inputs: ['graph'], outputs: ['graph'], params: ['Damping factor', 'Max iterations'] },
-  { name: 'SQL', type: 'Algorithms', inputs: ['graph'], outputs: ['table'], params: ['Query'] },
-  { name: 'Visualize graph', type: 'Visualization', inputs: ['graph'], outputs: ['graph-viz'],
-    params: ['Color by', 'Size by'],
-    calculate(inputs) {
-      console.log('Visualize graph', inputs);
-      return {
-        'graph-viz': 15,
-      };
-    }
-  },
-  { name: 'Num', type: 'Visualization', inputs: [], outputs: ['num'], params: [] },
-];
-function makeParam(param: string): NodeInterface {
-  return new BaklavaJS.TextInputInterface(param, "").setPort(false);
-}
-function makeOutput(output: string): NodeInterface {
-  if (output === 'graph-viz') {
-    return new NodeInterface(output, "asd").setComponent(markRaw(GraphViz)).setPort(false);
-  } else if (output === 'graph') {
-    return new BaklavaJS.NodeInterface(output, 0).use(setType, graphType);
-  } else if (output === 'table') {
-    return new BaklavaJS.NodeInterface(output, 0).use(setType, tableType);
-  } else {
-    return new BaklavaJS.NodeInterface(output, 0);
-  }
-}
-function makeInput(input: string): NodeInterface {
-  if (input === 'graph') {
-    return new BaklavaJS.NodeInterface(input, 0).use(setType, graphType);
-  } else if (input === 'table') {
-    return new BaklavaJS.NodeInterface(input, 0).use(setType, tableType);
-  } else {
-    return new BaklavaJS.NodeInterface(input, 0);
-  }
-}
-const baklava = useBaklava();
-const nodeInterfaceTypes = new BaklavaInterfaceTypes(baklava.editor, { viewPlugin: baklava });
-nodeInterfaceTypes.addTypes(graphType, tableType);
-for (const op of ops) {
-  baklava.editor.registerNodeType(BaklavaJS.defineNode({
-    type: op.name,
-    inputs: {
-      ...op.inputs.reduce((acc, input) => ({ ...acc, [input]: () => makeInput(input) }), {}),
-      ...op.params.reduce((acc, param) => ({ ...acc, [param]: () => makeParam(param) }), {}),
-    },
-    outputs: op.outputs.reduce((acc, output) => ({ ...acc, [output]: () => makeOutput(output) }), {}),
-    calculate: op.calculate,
-  }), { category: op.type });
-}
-import { DependencyEngine } from "@baklavajs/engine";
-// Needed?
-const engine = new DependencyEngine(baklava.editor);
-engine.start();
-import { applyResult } from "@baklavajs/engine";
-// Needed?
-const token = Symbol();
-engine.events.afterRun.subscribe(token, (result) => {
-    engine.pause();
-    applyResult(result, baklava.editor);
-    engine.resume();
-});
-let lastSave;
-baklava.editor.nodeEvents.update.subscribe(token, async (result) => {
-  const s = JSON.stringify(baklava.editor.save());
-  if (s !== lastSave) {
-    lastSave = s;
-    console.log('save', JSON.parse(s));
-    const res = await fetch('/api/save', {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: s,
-    });
-    const j = await res.json();
-    console.log('save response', j);
-  }
-});
-</script>

web/src/app.css ADDED Viewed

	@@ -0,0 +1,5 @@

+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+}

web/src/assets/favicon.ico ADDED Viewed

web/src/assets/vue.svg DELETED Viewed

web/src/components/GraphViz.vue DELETED Viewed

@@ -1,19 +0,0 @@
-<template>
-    <div ref="container" class="graph-viz"></div>
-</template>
-<script setup>
-import { ref, onMounted } from 'vue';
-import Sigma from 'sigma';
-import * as graphology from 'graphology';
-const container = ref(null);
-onMounted(() => {
-  const sigmaInstance = new Sigma(graph, container.value);
-  console.log(props.modelValue);
-});
-const props = defineProps(['modelValue']);
-const graph = new graphology.Graph();
-graph.addNode("1", { label: "Node 1", x: 0, y: 0, size: 10, color: "blue" });
-graph.addNode("2", { label: "Node 2", x: 1, y: 1, size: 20, color: "red" });
-graph.addEdge("1", "2", { size: 5, color: "purple" });
-</script>

web/src/main.ts CHANGED Viewed

@@ -1,4 +1,9 @@
-import { createApp } from 'vue'
-import './style.css'
-import App from './App.vue'
-createApp(App).mount('#app')

+import App from './App.svelte';
+import './app.css';
+const app = new App({
+  target: document.getElementById('app')!,
+});
+export default app;

web/src/style.css DELETED Viewed

@@ -1,14 +0,0 @@
-body {
-  margin: 0;
-}
-.graph-viz {
-  width: 100%;
-  height: 100px;
-  background: white;
-  text-align: left;
-}
-.baklava-node-interface[data-interface-type="graph"] .__port {
-  background-color: #39bcf3;
-}

web/src/vite-env.d.ts CHANGED Viewed

	@@ -1 +1,2 @@

1	/// <reference types="vite/client" />


1	+ /// <reference types="svelte" />
2	/// <reference types="vite/client" />

web/svelte.config.js ADDED Viewed

	@@ -0,0 +1,7 @@

+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
+export default {
+  // Consult https://svelte.dev/docs#compile-time-svelte-preprocess
+  // for more information about preprocessors
+  preprocess: vitePreprocess(),
+}

web/tsconfig.json CHANGED Viewed

@@ -1,25 +1,20 @@
 {
   "compilerOptions": {
-    "target": "ES2020",
     "useDefineForClassFields": true,
     "module": "ESNext",
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "skipLibCheck": true,
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
     "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "preserve",
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
   },
-  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }

 {
+  "extends": "@tsconfig/svelte/tsconfig.json",
   "compilerOptions": {
+    "target": "ESNext",
     "useDefineForClassFields": true,
     "module": "ESNext",
     "resolveJsonModule": true,
+    /**
+     * Typecheck JS in `.svelte` and `.js` files by default.
+     * Disable checkJs if you'd like to use dynamic types in JS.
+     * Note that setting allowJs false does not prevent the use
+     * of JS in `.svelte` files.
+     */
+    "allowJs": true,
+    "checkJs": true,
+    "isolatedModules": true
   },
+  "include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }

web/tsconfig.node.json CHANGED Viewed

@@ -3,9 +3,7 @@
     "composite": true,
     "skipLibCheck": true,
     "module": "ESNext",
-    "moduleResolution": "bundler",
-    "allowSyntheticDefaultImports": true,
-    "strict": true
   },
   "include": ["vite.config.ts"]
 }

     "composite": true,
     "skipLibCheck": true,
     "module": "ESNext",
+    "moduleResolution": "bundler"
   },
   "include": ["vite.config.ts"]
 }

web/vite.config.ts CHANGED Viewed

@@ -1,10 +1,7 @@
 import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue()],
-  server: {
-    proxy: { '/api': 'http://127.0.0.1:8000' },
-  },
 })

 import { defineConfig } from 'vite'
+import { svelte } from '@sveltejs/vite-plugin-svelte'
 // https://vitejs.dev/config/
 export default defineConfig({
+  plugins: [svelte()],
 })