starred/windmill
1
0
Fork 0
mirror of https://github.com/windmill-labs/windmill.git synced 2026-09-05 08:02:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(frontend): merge main

Browse Source
This commit is contained in:
Faton Ramadani
2024-08-19 09:28:02 +02:00
parent 31ab0f1aea 632bd18a2e
commit 28a1288ebc
93 changed files with 684 additions and 4291 deletions
Download Patch File Download Diff File Expand all files Collapse all files
CHANGELOG.md
+18
View File
@@ -1,5 +1,23 @@
# Changelog
## [1.381.0](https://github.com/windmill-labs/windmill/compare/v1.380.0...v1.381.0) (2024-08-16)
### Features
* add env to refresh cgroup readings ([#4250](https://github.com/windmill-labs/windmill/issues/4250)) ([e23c3fa](https://github.com/windmill-labs/windmill/commit/e23c3fad628cc718314472f3cb53c0f257c4c9e5))
* cache common hub scripts in image ([#4249](https://github.com/windmill-labs/windmill/issues/4249)) ([99f7828](https://github.com/windmill-labs/windmill/commit/99f7828ebb5fddf799afb52af7214ba4119e57b9))
### Bug Fixes
* **cli:** add inject and define options ([dffd5f7](https://github.com/windmill-labs/windmill/commit/dffd5f7f7d5c84624953bf8c778b14586a14e2d4))
* **frontend:** improve UI for email triggers ([#4243](https://github.com/windmill-labs/windmill/issues/4243)) ([6c9e32a](https://github.com/windmill-labs/windmill/commit/6c9e32af104a897e5c2a5b41867d2ffbbacc8acb))
* improve password field lifetime incorrectly recycled too early ([5a8fa1d](https://github.com/windmill-labs/windmill/commit/5a8fa1d72487ac2a29dca8833b8c92b8cac3726e))
* improve row update of aggrid table actions II ([3cf4f00](https://github.com/windmill-labs/windmill/commit/3cf4f00dca677fc592d5dde8a7b8fdcac5f08e0a))
* **typescript-client:** add runFlow and runFlowAsync ([c9ef2c8](https://github.com/windmill-labs/windmill/commit/c9ef2c8e97bdecb16b9a54805f1c90523e3b406f))
* workspace specific default tags do not override step level custom tags ([49835ca](https://github.com/windmill-labs/windmill/commit/49835ca6ca65e569ea2915b2ef4f7ce1c4988cae))
## [1.380.0](https://github.com/windmill-labs/windmill/compare/v1.379.4...v1.380.0) (2024-08-14)
Dockerfile
+5 -1
View File
@@ -175,7 +175,11 @@ WORKDIR ${APP}
RUN ln -s ${APP}/windmill /usr/local/bin/windmill
RUN windmill cache
COPY ./frontend/src/lib/hubPaths.json ${APP}/hubPaths.json
RUN windmill cache ${APP}/hubPaths.json
RUN rm ${APP}/hubPaths.json
EXPOSE 8000
backend/.sqlx/query-bac12eff366f6b76f97d1a44041e0c1b5fdcb2c4205c1c1c0026b71ce404f089.json → backend/.sqlx/query-b0c2f470f7d2df567eca550db1ae638fcb554622b61a5f4fb6b6696f6283516a.json
Generated
+2 -2
View File
@@ -1,6 +1,6 @@
{
"db_name": "PostgreSQL",
"query": "DELETE FROM variable WHERE expires_at IS NOT NULL AND expires_at > now() RETURNING path",
"query": "DELETE FROM variable WHERE expires_at IS NOT NULL AND expires_at < now() RETURNING path",
"describe": {
"columns": [
{
@@ -16,5 +16,5 @@
false
]
},
"hash": "bac12eff366f6b76f97d1a44041e0c1b5fdcb2c4205c1c1c0026b71ce404f089"
"hash": "b0c2f470f7d2df567eca550db1ae638fcb554622b61a5f4fb6b6696f6283516a"
}
backend/Cargo.lock
Generated
+50 -50
View File
@@ -845,9 +845,9 @@ dependencies = [
[[package]]
name = "aws-sdk-sso"
version = "1.37.0"
version = "1.38.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "1074e818fbe4f9169242d78448b15be8916a79daa38ea1231f2e2e10d993fcd2"
checksum = "fca5e0b9fb285638f1007e9d961d963b9e504ab968fe5a3807cce94070bd0ce3"
dependencies = [
"aws-credential-types",
"aws-runtime",
@@ -867,9 +867,9 @@ dependencies = [
[[package]]
name = "aws-sdk-ssooidc"
version = "1.38.0"
version = "1.39.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "29755c51e33fa3f678598f64324a169cf4b7d3c4865d2709d4308f53366a92a4"
checksum = "bc3e48ec239bb734db029ceef83599f4c9b3ce5d25c961b5bcd3f031c15bed54"
dependencies = [
"aws-credential-types",
"aws-runtime",
@@ -889,9 +889,9 @@ dependencies = [
[[package]]
name = "aws-sdk-sts"
version = "1.37.0"
version = "1.38.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "6e52dc3fd7dfa6c01a69cf3903e00aa467261639138a05b06cd92314d2c8fb07"
checksum = "ede095dfcc5c92b224813c24a82b65005a475c98d737e2726a898cf583e2e8bd"
dependencies = [
"aws-credential-types",
"aws-runtime",
@@ -985,9 +985,9 @@ dependencies = [
[[package]]
name = "aws-smithy-runtime"
version = "1.6.2"
version = "1.6.3"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "ce87155eba55e11768b8c1afa607f3e864ae82f03caf63258b37455b0ad02537"
checksum = "0abbf454960d0db2ad12684a1640120e7557294b0ff8e2f11236290a1b293225"
dependencies = [
"aws-smithy-async",
"aws-smithy-http",
@@ -1029,9 +1029,9 @@ dependencies = [
[[package]]
name = "aws-smithy-types"
version = "1.2.0"
version = "1.2.2"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "cfe321a6b21f5d8eabd0ade9c55d3d0335f3c3157fc2b3e87f05f34b539e4df5"
checksum = "6cee7cadb433c781d3299b916fbf620fea813bf38f49db282fb6858141a05cc8"
dependencies = [
"base64-simd 0.8.0",
"bytes",
@@ -1483,18 +1483,18 @@ dependencies = [
[[package]]
name = "bytemuck"
version = "1.16.3"
version = "1.17.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "102087e286b4677862ea56cf8fc58bb2cdfa8725c40ffb80fe3a008eb7f2fc83"
checksum = "6fd4c6dcc3b0aea2f5c0b4b82c2b15fe39ddbc76041a310848f4706edf76bb31"
dependencies = [
"bytemuck_derive",
]
[[package]]
name = "bytemuck_derive"
version = "1.7.0"
version = "1.7.1"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "1ee891b04274a59bd38b412188e24b849617b2e45a0fd8d057deb63e7403761b"
checksum = "0cc8b54b395f2fcfbb3d90c47b01c7f444d94d05bdeb775811dec868ac3bbc26"
dependencies = [
"proc-macro2",
"quote",
@@ -1613,9 +1613,9 @@ dependencies = [
[[package]]
name = "cc"
version = "1.1.11"
version = "1.1.13"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "5fb8dd288a69fc53a1996d7ecfbf4a20d59065bff137ce7e56bbd620de191189"
checksum = "72db2f7947ecee9b03b510377e8bb9077afa27176fdbff55c51027e976fdcc48"
dependencies = [
"jobserver",
"libc",
@@ -1718,9 +1718,9 @@ dependencies = [
[[package]]
name = "clap"
version = "4.5.15"
version = "4.5.16"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "11d8838454fda655dafd3accb2b6e2bea645b9e4078abe84a22ceb947235c5cc"
checksum = "ed6719fffa43d0d87e5fd8caeab59be1554fb028cd30edc88fc4369b17971019"
dependencies = [
"clap_builder",
"clap_derive",
@@ -1758,9 +1758,9 @@ checksum = "1462739cb27611015575c0c11df5df7601141071f07518d56fcc1be504cbec97"
[[package]]
name = "cmake"
version = "0.1.50"
version = "0.1.51"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "a31c789563b815f77f4250caee12365734369f942439b7defd71e18a48197130"
checksum = "fb1e43aa7fd152b1f968787f7dbcdeb306d1867ff373c69955211876c053f91a"
dependencies = [
"cc",
]
@@ -4660,9 +4660,9 @@ dependencies = [
[[package]]
name = "libc"
version = "0.2.155"
version = "0.2.156"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "97b3888a4aecf77e811145cadf6eef5901f4782c53886191b2f693f24761847c"
checksum = "a5f43f184355eefb8d17fc948dbecf6c13be3c141f20d834ae842193a448c72a"
[[package]]
name = "libgit2-sys"
@@ -7466,9 +7466,9 @@ checksum = "a3f0bf26fd526d2a95683cd0f87bf103b8539e2ca1ef48ce002d67aad59aa0b4"
[[package]]
name = "serde"
version = "1.0.207"
version = "1.0.208"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "5665e14a49a4ea1b91029ba7d3bca9f299e1f7cfa194388ccc20f14743e784f2"
checksum = "cff085d2cb684faa248efb494c39b68e522822ac0de72ccf08109abde717cfb2"
dependencies = [
"serde_derive",
]
@@ -7507,9 +7507,9 @@ dependencies = [
[[package]]
name = "serde_derive"
version = "1.0.207"
version = "1.0.208"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "6aea2634c86b0e8ef2cfdc0c340baede54ec27b1e46febd7f80dffb2aa44a00e"
checksum = "24008e81ff7613ed8e5ba0cfaf24e2c2f1e5b8a0495711e44fcd4882fca62bcf"
dependencies = [
"proc-macro2",
"quote",
@@ -7529,9 +7529,9 @@ dependencies = [
[[package]]
name = "serde_json"
version = "1.0.124"
version = "1.0.125"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "66ad62847a56b3dba58cc891acd13884b9c61138d330c0d7b6181713d4fce38d"
checksum = "83c8e735a073ccf5be70aa8066aa984eaf2fa000db6c8d0100ae605b366d31ed"
dependencies = [
"indexmap 2.4.0",
"itoa",
@@ -7592,9 +7592,9 @@ dependencies = [
[[package]]
name = "serde_tokenstream"
version = "0.2.1"
version = "0.2.2"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "8790a7c3fe883e443eaa2af6f705952bc5d6e8671a220b9335c8cae92c037e74"
checksum = "64060d864397305347a78851c51588fd283767e7e7589829e8121d65512340f1"
dependencies = [
"proc-macro2",
"quote",
@@ -10409,7 +10409,7 @@ checksum = "712e227841d057c1ee1cd2fb22fa7e5a5461ae8e48fa2ca79ec42cfc1931183f"
[[package]]
name = "windmill"
version = "1.380.0"
version = "1.381.0"
dependencies = [
"anyhow",
"axum",
@@ -10449,7 +10449,7 @@ dependencies = [
[[package]]
name = "windmill-api"
version = "1.380.0"
version = "1.381.0"
dependencies = [
"anyhow",
"argon2",
@@ -10533,7 +10533,7 @@ dependencies = [
[[package]]
name = "windmill-api-client"
version = "1.380.0"
version = "1.381.0"
dependencies = [
"base64 0.21.7",
"chrono",
@@ -10551,7 +10551,7 @@ dependencies = [
[[package]]
name = "windmill-audit"
version = "1.380.0"
version = "1.381.0"
dependencies = [
"chrono",
"serde",
@@ -10564,7 +10564,7 @@ dependencies = [
[[package]]
name = "windmill-common"
version = "1.380.0"
version = "1.381.0"
dependencies = [
"anyhow",
"async-stream",
@@ -10605,7 +10605,7 @@ dependencies = [
[[package]]
name = "windmill-git-sync"
version = "1.380.0"
version = "1.381.0"
dependencies = [
"regex",
"rsmq_async",
@@ -10620,7 +10620,7 @@ dependencies = [
[[package]]
name = "windmill-indexer"
version = "1.380.0"
version = "1.381.0"
dependencies = [
"anyhow",
"bytes",
@@ -10641,7 +10641,7 @@ dependencies = [
[[package]]
name = "windmill-parser"
version = "1.380.0"
version = "1.381.0"
dependencies = [
"serde",
"serde_json",
@@ -10649,7 +10649,7 @@ dependencies = [
[[package]]
name = "windmill-parser-bash"
version = "1.380.0"
version = "1.381.0"
dependencies = [
"anyhow",
"lazy_static",
@@ -10660,7 +10660,7 @@ dependencies = [
[[package]]
name = "windmill-parser-go"
version = "1.380.0"
version = "1.381.0"
dependencies = [
"anyhow",
"gosyn",
@@ -10672,7 +10672,7 @@ dependencies = [
[[package]]
name = "windmill-parser-graphql"
version = "1.380.0"
version = "1.381.0"
dependencies = [
"anyhow",
"lazy_static",
@@ -10683,7 +10683,7 @@ dependencies = [
[[package]]
name = "windmill-parser-php"
version = "1.380.0"
version = "1.381.0"
dependencies = [
"anyhow",
"convert_case 0.6.0",
@@ -10697,7 +10697,7 @@ dependencies = [
[[package]]
name = "windmill-parser-py"
version = "1.380.0"
version = "1.381.0"
dependencies = [
"anyhow",
"itertools 0.13.0",
@@ -10708,7 +10708,7 @@ dependencies = [
[[package]]
name = "windmill-parser-py-imports"
version = "1.380.0"
version = "1.381.0"
dependencies = [
"anyhow",
"async-recursion",
@@ -10725,7 +10725,7 @@ dependencies = [
[[package]]
name = "windmill-parser-sql"
version = "1.380.0"
version = "1.381.0"
dependencies = [
"anyhow",
"lazy_static",
@@ -10736,7 +10736,7 @@ dependencies = [
[[package]]
name = "windmill-parser-ts"
version = "1.380.0"
version = "1.381.0"
dependencies = [
"anyhow",
"convert_case 0.6.0",
@@ -10755,7 +10755,7 @@ dependencies = [
[[package]]
name = "windmill-parser-wasm"
version = "1.380.0"
version = "1.381.0"
dependencies = [
"anyhow",
"getrandom 0.2.15",
@@ -10774,7 +10774,7 @@ dependencies = [
[[package]]
name = "windmill-queue"
version = "1.380.0"
version = "1.381.0"
dependencies = [
"anyhow",
"async-recursion",
@@ -10807,7 +10807,7 @@ dependencies = [
[[package]]
name = "windmill-sql-datatype-parser-wasm"
version = "1.380.0"
version = "1.381.0"
dependencies = [
"wasm-bindgen",
"wasm-bindgen-test",
@@ -10817,7 +10817,7 @@ dependencies = [
[[package]]
name = "windmill-worker"
version = "1.380.0"
version = "1.381.0"
dependencies = [
"anyhow",
"async-recursion",
backend/Cargo.toml
+2 -2
View File
@@ -1,6 +1,6 @@
[package]
name = "windmill"
version = "1.380.0"
version = "1.381.0"
authors.workspace = true
edition.workspace = true
@@ -25,7 +25,7 @@ members = [
]
[workspace.package]
version = "1.380.0"
version = "1.381.0"
authors = ["Ruben Fiszel <ruben@windmill.dev>"]
edition = "2021"
backend/src/main.rs
+35 -4
View File
@@ -6,15 +6,20 @@
* LICENSE-AGPL for a copy of the license.
*/
use anyhow::Context;
use gethostname::gethostname;
use git_version::git_version;
use rand::Rng;
use sqlx::{postgres::PgListener, Pool, Postgres};
use std::{
collections::HashMap,
net::{IpAddr, Ipv4Addr, SocketAddr},
time::Duration,
};
use tokio::fs::DirBuilder;
use tokio::{
fs::{create_dir_all, DirBuilder, File},
io::AsyncReadExt,
};
use windmill_api::HTTP_CLIENT;
#[cfg(feature = "enterprise")]
@@ -54,9 +59,10 @@ use windmill_common::METRICS_ADDR;
use windmill_common::global_settings::OBJECT_STORE_CACHE_CONFIG_SETTING;
use windmill_worker::{
BUN_BUNDLE_CACHE_DIR, BUN_CACHE_DIR, BUN_DEPSTAR_CACHE_DIR, DENO_CACHE_DIR,
DENO_CACHE_DIR_DEPS, DENO_CACHE_DIR_NPM, GO_BIN_CACHE_DIR, GO_CACHE_DIR, HUB_CACHE_DIR,
LOCK_CACHE_DIR, PIP_CACHE_DIR, POWERSHELL_CACHE_DIR, TAR_PIP_CACHE_DIR, TMP_LOGS_DIR,
get_hub_script_content_and_requirements, BUN_BUNDLE_CACHE_DIR, BUN_CACHE_DIR,
BUN_DEPSTAR_CACHE_DIR, DENO_CACHE_DIR, DENO_CACHE_DIR_DEPS, DENO_CACHE_DIR_NPM,
GO_BIN_CACHE_DIR, GO_CACHE_DIR, HUB_CACHE_DIR, LOCK_CACHE_DIR, PIP_CACHE_DIR,
POWERSHELL_CACHE_DIR, TAR_PIP_CACHE_DIR, TMP_LOGS_DIR,
};
use crate::monitor::{
@@ -111,6 +117,28 @@ pub fn main() -> anyhow::Result<()> {
create_and_run_current_thread_inner(windmill_main())
}
async fn cache_hub_scripts(file_path: Option<String>) -> anyhow::Result<()> {
let file_path = file_path.unwrap_or("./hubPaths.json".to_string());
let mut file = File::open(&file_path)
.await
.with_context(|| format!("Could not open {}, make sure it exists", &file_path))?;
let mut contents = String::new();
file.read_to_string(&mut contents).await?;
let paths = serde_json::from_str::<HashMap<String, String>>(&contents).with_context(|| {
format!(
"Could not parse {}, make sure it is a valid JSON object with string keys and values",
&file_path
)
})?;
create_dir_all(HUB_CACHE_DIR).await?;
for path in paths.values() {
get_hub_script_content_and_requirements(Some(path.to_string()), None).await?;
}
Ok(())
}
async fn windmill_main() -> anyhow::Result<()> {
dotenv::dotenv().ok();
@@ -141,6 +169,9 @@ async fn windmill_main() -> anyhow::Result<()> {
{
tracing::warn!("Embeddings are not enabled, ignoring...");
}
cache_hub_scripts(std::env::args().nth(2)).await?;
return Ok(());
}
"-v" | "--version" | "version" => {
backend/src/monitor.rs
+1 -1
View File
@@ -407,7 +407,7 @@ pub async fn delete_expired_items(db: &DB) -> () {
}
let deleted_expired_variables = sqlx::query_scalar!(
"DELETE FROM variable WHERE expires_at IS NOT NULL AND expires_at > now() RETURNING path",
"DELETE FROM variable WHERE expires_at IS NOT NULL AND expires_at < now() RETURNING path",
)
.fetch_all(db)
.await;
backend/windmill-api/openapi.yaml
+1 -1
View File
@@ -1,7 +1,7 @@
openapi: "3.0.3"
info:
version: 1.380.0
version: 1.381.0
title: Windmill API
contact:
backend/windmill-api/src/apps.rs
+1 -1
View File
@@ -705,7 +705,7 @@ pub async fn get_hub_app_by_id(
&format!("{}/apps/{}/json", *HUB_BASE_URL.read().await, id),
false,
None,
&db,
Some(&db),
)
.await?
.json()
backend/windmill-api/src/embeddings.rs
+4 -4
View File
@@ -313,7 +313,7 @@ impl EmbeddingsDb {
&format!("{}/scripts/embeddings", hub_base_url),
false,
None,
pg_db,
Some(pg_db),
)
.await?
} else {
@@ -326,7 +326,7 @@ impl EmbeddingsDb {
&format!("{}/scripts/embeddings", hub_base_url),
false,
None,
pg_db,
Some(pg_db),
)
.await?
}
@@ -375,7 +375,7 @@ impl EmbeddingsDb {
&format!("{}/resource_types/embeddings", hub_base_url),
false,
None,
pg_db,
Some(pg_db),
)
.await?
} else {
@@ -388,7 +388,7 @@ impl EmbeddingsDb {
&format!("{}/resource_types/embeddings", hub_base_url),
false,
None,
pg_db,
Some(pg_db),
)
.await?
}
backend/windmill-api/src/flows.rs
+1 -1
View File
@@ -230,7 +230,7 @@ pub async fn get_hub_flow_by_id(
&format!("{}/flows/{}/json", *HUB_BASE_URL.read().await, id),
false,
None,
&db,
Some(&db),
)
.await?
.json()
backend/windmill-api/src/scripts.rs
+2 -1
View File
@@ -817,7 +817,8 @@ pub async fn get_full_hub_script_by_path(
Extension(db): Extension<DB>,
) -> JsonResult<HubScript> {
Ok(Json(
windmill_common::scripts::get_full_hub_script_by_path(path, &HTTP_CLIENT, &db).await?,
windmill_common::scripts::get_full_hub_script_by_path(path, &HTTP_CLIENT, Some(&db))
.await?,
))
}
backend/windmill-common/src/scripts.rs
+3 -3
View File
@@ -384,7 +384,7 @@ pub async fn get_hub_script_by_path(
&format!("{}/raw/{}.ts", hub_base_url, path),
true,
None,
db,
Some(db),
)
.await?
.text()
@@ -409,7 +409,7 @@ pub async fn get_hub_script_by_path(
&format!("{}/raw/{}.ts", DEFAULT_HUB_BASE_URL, path),
true,
None,
db,
Some(db),
)
.await?
.text()
@@ -427,7 +427,7 @@ pub async fn get_hub_script_by_path(
pub async fn get_full_hub_script_by_path(
path: StripPath,
http_client: &reqwest::Client,
db: &DB,
db: Option<&DB>,
) -> crate::error::Result<HubScript> {
let path = path
.to_path()
backend/windmill-common/src/utils.rs
+13 -6
View File
@@ -96,7 +96,7 @@ pub async fn query_elems_from_hub(
reqwest::header::HeaderMap,
axum::body::Body,
)> {
let response = http_get_from_hub(http_client, url, false, query_params, db).await?;
let response = http_get_from_hub(http_client, url, false, query_params, Some(db)).await?;
let status = response.status();
@@ -112,9 +112,18 @@ pub async fn http_get_from_hub(
url: &str,
plain: bool,
query_params: Option<Vec<(&str, String)>>,
db: &Pool<Postgres>,
db: Option<&Pool<Postgres>>,
) -> Result<reqwest::Response> {
let uid = get_uid(db).await;
let uid = match db {
Some(db) => match get_uid(db).await {
Ok(uid) => Some(uid),
Err(err) => {
tracing::info!("No valid uid found: {}", err);
None
}
},
None => None,
};
let mut request = http_client.get(url).header(
"Accept",
@@ -125,10 +134,8 @@ pub async fn http_get_from_hub(
},
);
if let Ok(uid) = uid {
if let Some(uid) = uid {
request = request.header("X-uid", uid);
} else {
tracing::info!("No valid uid found: {}", uid.err().unwrap())
}
if let Some(query_params) = query_params {
backend/windmill-queue/src/jobs.rs
+2 -21
View File
@@ -53,7 +53,6 @@ use windmill_common::{
jobs::{
get_payload_tag_from_prefixed_path, CompletedJob, JobKind, JobPayload, QueuedJob, RawCode,
},
oauth2::WORKSPACE_SLACK_BOT_TOKEN_PATH,
schedule::Schedule,
scripts::{get_full_hub_script_by_path, ScriptHash, ScriptLang},
users::{SUPERADMIN_NOTIFICATION_EMAIL, SUPERADMIN_SECRET_EMAIL},
@@ -1479,16 +1478,6 @@ pub async fn push_error_handler<
}
}
// TODO(gbouv): REMOVE THIS after December 1st 2023 and ping users to re-save their error handlers
if on_failure_path
.to_string()
.eq("script/hub/5792/workspace-or-schedule-error-handler-slack")
{
// default slack error handler being used -> we need to inject the slack token
let slack_resource = format!("$res:{WORKSPACE_SLACK_BOT_TOKEN_PATH}");
extra.insert("slack".to_string(), to_raw_value(&slack_resource));
}
let result = sanitize_result(result);
let tx = PushIsolationLevel::IsolatedRoot(db.clone(), rsmq);
@@ -1602,15 +1591,6 @@ async fn handle_recovered_schedule<
));
}
}
// TODO(gbouv): REMOVE THIS after December 1st 2023 and ping users to re-save their error handlers
if on_recovery_path
.to_string()
.eq("script/hub/2430/slack/schedule-recovery-handler-slack")
{
// default slack error handler being used -> we need to inject the slack token
let slack_resource = format!("$res:{WORKSPACE_SLACK_BOT_TOKEN_PATH}");
extra.insert("slack".to_string(), to_raw_value(&slack_resource));
}
let args = error_job
.result
@@ -3137,7 +3117,8 @@ pub async fn push<'c, 'd, R: rsmq_async::RsmqConnection + Send + 'c>(
}
let hub_script =
get_full_hub_script_by_path(StripPath(path.clone()), &HTTP_CLIENT, _db).await?;
get_full_hub_script_by_path(StripPath(path.clone()), &HTTP_CLIENT, Some(_db))
.await?;
(
None,
backend/windmill-worker/src/worker.rs
+4 -4
View File
@@ -2736,9 +2736,9 @@ pub struct ContentReqLangEnvs {
pub codebase: Option<String>,
}
async fn get_hub_script_content_and_requirements(
pub async fn get_hub_script_content_and_requirements(
script_path: Option<String>,
db: &DB,
db: Option<&DB>,
) -> error::Result<ContentReqLangEnvs> {
let script_path = script_path
.clone()
@@ -2783,7 +2783,7 @@ async fn get_script_content_by_path(
.clone()
.ok_or_else(|| Error::InternalErr(format!("expected script path")))?;
return if script_path.starts_with("hub/") {
get_hub_script_content_and_requirements(Some(script_path), db).await
get_hub_script_content_and_requirements(Some(script_path), Some(db)).await
} else {
let (script_hash, ..) =
get_latest_deployed_hash_for_path(db, w_id, script_path.as_str()).await?;
@@ -2870,7 +2870,7 @@ async fn handle_code_execution_job(
codebase
}},
JobKind::Script_Hub => {
get_hub_script_content_and_requirements(job.script_path.clone(), db).await?
get_hub_script_content_and_requirements(job.script_path.clone(), Some(db)).await?
}
JobKind::Script => {
get_script_content_by_hash(
backend/windmill-worker/src/worker_flow.rs
+1 -1
View File
@@ -2379,7 +2379,7 @@ async fn push_next_flow_job<R: rsmq_async::RsmqConnection + Send + Sync + Clone>
continue_on_same_worker,
err,
flow_job.visible_to_owner,
if flow_job.tag == "flow" {
if flow_job.tag == "flow" || flow_job.tag == format!("flow-{}", flow_job.workspace_id) {
payload_tag.tag
} else {
Some(flow_job.tag.clone())
benchmarks/lib.ts
+1 -1
View File
@@ -2,7 +2,7 @@ import { sleep } from "https://deno.land/x/sleep@v1.2.1/mod.ts";
import * as windmill from "https://deno.land/x/windmill@v1.174.0/mod.ts";
import * as api from "https://deno.land/x/windmill@v1.174.0/windmill-api/index.ts";
export const VERSION = "v1.380.0";
export const VERSION = "v1.381.0";
export async function login(email: string, password: string): Promise<string> {
return await windmill.UserService.login({
cli/main.ts
+1 -1
View File
@@ -34,7 +34,7 @@ addEventListener("error", (event) => {
}
});
export const VERSION = "v1.380.0";
export const VERSION = "v1.381.0";
let command: any = new Command()
.name("wmill")
docker/DockerfileSlim
+5 -1
View File
@@ -27,7 +27,11 @@ COPY --from=denoland/deno:1.44.4 --chmod=755 /usr/bin/deno /usr/bin/deno
RUN ln -s ${APP}/windmill /usr/local/bin/windmill
RUN windmill cache
COPY ./frontend/src/lib/hubPaths.json ${APP}/hubPaths.json
RUN windmill cache ${APP}/hubPaths.json
RUN rm ${APP}/hubPaths.json
EXPOSE 8000
frontend/package-lock.json
Generated
+2 -2
View File
@@ -1,12 +1,12 @@
{
"name": "windmill-components",
"version": "1.380.0",
"version": "1.381.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "windmill-components",
"version": "1.380.0",
"version": "1.381.0",
"license": "AGPL-3.0",
"dependencies": {
"@aws-crypto/sha256-js": "^4.0.0",
frontend/package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "windmill-components",
"version": "1.380.0",
"version": "1.381.0",
"scripts": {
"dev": "vite dev",
"build": "vite build",
frontend/src/lib/components/ErrorOrRecoveryHandler.svelte
+3 -2
View File
@@ -19,9 +19,10 @@
import { hubBaseUrlStore } from '$lib/stores'
import { CheckCircle2, Loader2, RotateCw, XCircle } from 'lucide-svelte'
import { hubPaths } from '$lib/hub'
const slackRecoveryHandler = 'hub/2430/slack/schedule-recovery-handler-slack'
const slackHandlerScriptPath = 'hub/6512/workspace-or-schedule-error-handler-slack'
const slackRecoveryHandler = hubPaths.slackRecoveryHandler
const slackHandlerScriptPath = hubPaths.slackErrorHandler
export let errorOrRecovery: 'error' | 'recovery'
export let isEditable: boolean
frontend/src/lib/components/FlowGraphViewer.svelte
-1
View File
@@ -38,7 +38,6 @@
stepDetail = e.detail
dispatch('select', stepDetail)
}}
rebuildOnChange={flow}
/>
</div>
{/if}
frontend/src/lib/components/FlowJobResult.svelte
+4 -2
View File
@@ -10,6 +10,7 @@
import type { DurationStatus } from './graph'
import type { Writable } from 'svelte/store'
export let waitingForExecutor: boolean = false
export let result: any
export let logs: string | undefined
export let col: boolean = false
@@ -17,6 +18,7 @@
export let loading: boolean
export let filename: string | undefined = undefined
export let jobId: string | undefined = undefined
export let tag: string | undefined = undefined
export let workspaceId: string | undefined = undefined
export let refreshLog: boolean = false
export let durationStates: Writable<Record<string, DurationStatus>> | undefined
@@ -79,9 +81,9 @@
{/if}
</div>
<div class="overflow-auto {col ? '' : 'max-h-80'} relative">
<div class="absolute z-40 text-sm top-1.5 left-2"
<div class="absolute z-40 text-xs top-0 left-1"
><button class="" on:click={drawer.openDrawer}>explore all steps' logs</button></div
>
<LogViewer content={logs ?? ''} {jobId} isLoading={false} tag={undefined} />
<LogViewer content={logs ?? ''} {jobId} isLoading={waitingForExecutor} {tag} />
</div>
</div>
frontend/src/lib/components/FlowStatusViewerInner.svelte
+10 -2
View File
@@ -167,7 +167,7 @@
mod.type === 'WaitingForEvents' &&
$localModuleStates?.[innerModules?.[i - 1]?.id ?? '']?.type == 'Success'
) {
setModuleState(mod.id ?? '', { type: mod.type, args: job?.args })
setModuleState(mod.id ?? '', { type: mod.type, args: job?.args, tag: job?.tag })
} else if (
mod.type === 'WaitingForExecutor' &&
$localModuleStates[mod.id ?? '']?.scheduled_for == undefined
@@ -183,7 +183,8 @@
scheduled_for: job?.['scheduled_for'],
job_id: job?.id,
parent_module: mod['parent_module'],
args: job?.args
args: job?.args,
tag: job?.tag
}
setModuleState(mod.id ?? '', newState)
})
@@ -395,6 +396,7 @@
job_id: job.id,
logs: job.logs,
args: job.args,
tag: job.tag,
started_at,
parent_module: mod['parent_module']
},
@@ -413,6 +415,7 @@
logs: job.logs,
result: job['result'],
job_id: job.id,
tag: job.tag,
parent_module: mod['parent_module'],
duration_ms: job['duration_ms'],
started_at: started_at,
@@ -645,6 +648,7 @@
<FlowJobResult
workspaceId={job?.workspace_id}
jobId={job?.id}
tag={job?.tag}
loading={job['running'] == true}
result={job.result}
logs={job.logs}
@@ -985,6 +989,7 @@
jobId={job?.id}
filename={job.id}
loading={job['running']}
tag={job?.tag}
noBorder
col
result={job['result']}
@@ -1048,14 +1053,17 @@
/>
</div>
{/if}
<FlowJobResult
workspaceId={job?.workspace_id}
jobId={node.job_id}
noBorder
loading={node.type != 'Success' && node.type != 'Failure'}
waitingForExecutor={node.type == 'WaitingForExecutor'}
refreshLog={node.type == 'InProgress'}
col
result={node.result}
tag={node.tag}
logs={node.logs}
durationStates={localDurationStatuses}
/>
frontend/src/lib/components/apps/editor/AppReportsDrawer.svelte
+4 -3
View File
@@ -24,6 +24,7 @@
import { RotateCw, Save } from 'lucide-svelte'
import { CUSTOM_TAGS_SETTING, WORKSPACE_SLACK_BOT_TOKEN_PATH } from '$lib/consts'
import { loadSchemaFromPath } from '$lib/infer'
import { hubPaths } from '$lib/hub'
export let appPath: string
export let open = false
@@ -187,7 +188,7 @@ export async function main(app_path: string, startup_duration = 5, kind: 'pdf' |
const notificationScripts = {
discord: {
path: 'hub/7838/discord',
path: hubPaths.discordReport,
schema: {
type: 'object',
properties: {
@@ -203,7 +204,7 @@ export async function main(app_path: string, startup_duration = 5, kind: 'pdf' |
}
},
slack: {
path: 'hub/7836/slack', // if to be updated, also update it in in backend/windmill-queue/src/jobs.rs
path: hubPaths.slackReport, // if to be updated, also update it in in backend/windmill-queue/src/jobs.rs
schema: {
type: 'object',
properties: {
@@ -216,7 +217,7 @@ export async function main(app_path: string, startup_duration = 5, kind: 'pdf' |
}
},
email: {
path: 'hub/7837/smtp',
path: hubPaths.smtpReport,
schema: {
type: 'object',
properties: {
frontend/src/lib/components/apps/editor/settingsPanel/DecisionTreeGraphEditor.svelte
-1
View File
@@ -46,7 +46,6 @@
<DecisionTreePreview
bind:nodes
bind:component
{rebuildOnChange}
{paneHeight}
{paneWidth}
on:render={() => {
frontend/src/lib/components/apps/editor/settingsPanel/DecisionTreeGraphHeader.svelte
+66 -50
View File
@@ -1,65 +1,81 @@
<script lang="ts">
import { createEventDispatcher } from 'svelte'
import type { DecisionTreeNode } from '../component'
import { twMerge } from 'tailwind-merge'
import InsertDecisionTreeNode from './decisionTree/InsertDecisionTreeNode.svelte'
import { X } from 'lucide-svelte'
import NodeWrapper from '$lib/components/graph/renderers/nodes/NodeWrapper.svelte'
export let node: DecisionTreeNode
export let editable: boolean = true
export let canDelete: boolean = true
export let label: string = ''
export let data: {
node: DecisionTreeNode
canDelete: boolean
nodeCallbackHandler: (
event: string,
detail: string,
graphNode: DecisionTreeNode | undefined,
parentIds: string[],
branchInsert: boolean
) => void
parentIds: string[]
branchHeader: boolean
}
let open: boolean = false
const dispatch = createEventDispatcher<{
nodeInsert: void
delete: void
addBranch: void
removeBranch: void
}>()
</script>
<div class="relative h-full">
<div
class={twMerge(
'w-full h-full border border-gray-400',
'flex flex-row gap-2 items-center justify-between rounded-sm overflow-hidden'
)}
style="min-width: 275px; max-height: 80px; background-color: {document.documentElement.classList.contains(
'dark'
)
? '#2e3440'
: '#dfe6ee'}"
>
<div class="ml-4 text-xs font-normal text-primary"> {label} </div>
</div>
{#if canDelete}
<div class="w-[27px] absolute -top-[32px] left-[50%] right-[50%] -translate-x-1/2">
<button
title="Delete branch"
on:click|preventDefault|stopPropagation={() => dispatch('removeBranch')}
type="button"
class="text-primary bg-surface border mx-[1px] border-gray-300 dark:border-gray-500 focus:outline-none hover:bg-surface-hover focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-[25px] h-[25px] flex items-center justify-center"
>
<X class="m-[5px]" size={15} />
</button>
</div>
{/if}
{#if node.id !== 'end' && editable}
<NodeWrapper>
<div class="relative h-full">
<div
class={twMerge(
'absolute -bottom-10 left-1/2 transform -translate-x-1/2 flex items-center',
open ? 'z-20' : ''
'w-full h-full border border-gray-400',
'flex flex-row gap-2 items-center justify-between rounded-sm overflow-hidden'
)}
style="width: 275px; height: 34px; background-color: {document.documentElement.classList.contains(
'dark'
)
? '#2e3440'
: '#dfe6ee'}"
>
<InsertDecisionTreeNode
on:node={() => dispatch('nodeInsert')}
on:addBranch={() => dispatch('addBranch')}
canAddBranch={false}
/>
<div class="ml-4 text-xs font-normal text-primary"> {data.node.label} </div>
</div>
{/if}
</div>
{#if data.canDelete}
<div class="w-[27px] absolute -top-[32px] left-[50%] right-[50%] -translate-x-1/2">
<button
title="Delete branch"
on:click|preventDefault|stopPropagation={() => {
data.nodeCallbackHandler('removeBranch', data.node.id, data.node, data.parentIds, false)
}}
type="button"
class="text-primary bg-surface border mx-[1px] border-gray-300 dark:border-gray-500 focus:outline-none hover:bg-surface-hover focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-[25px] h-[25px] flex items-center justify-center"
>
<X class="m-[5px]" size={15} />
</button>
</div>
{/if}
{#if data.node.id !== 'end'}
<div
class={twMerge(
'absolute -bottom-10 left-1/2 transform -translate-x-1/2 flex items-center',
open ? 'z-20' : ''
)}
>
<InsertDecisionTreeNode
on:node={() => {
data.nodeCallbackHandler(
'nodeInsert',
data.node.id,
data.node,
data.parentIds ?? [],
data.branchHeader
)
}}
on:addBranch={() => {
data.nodeCallbackHandler('addBranch', data.node.id, data.node, data.parentIds, true)
}}
canAddBranch={false}
/>
</div>
{/if}
</div>
</NodeWrapper>
frontend/src/lib/components/apps/editor/settingsPanel/DecisionTreeGraphNode.svelte
+81 -65
View File
@@ -1,5 +1,5 @@
<script lang="ts">
import { createEventDispatcher, getContext } from 'svelte'
import { getContext } from 'svelte'
import type { DecisionTreeNode } from '../component'
import Button from '$lib/components/common/button/Button.svelte'
import { twMerge } from 'tailwind-merge'
@@ -9,80 +9,96 @@
import { X } from 'lucide-svelte'
import { getStateColor } from '$lib/components/graph'
import Tooltip from '$lib/components/Tooltip.svelte'
import NodeWrapper from '$lib/components/graph/renderers/nodes/NodeWrapper.svelte'
export let data: {
node: DecisionTreeNode
canDelete: boolean
canAddBranch: boolean
selected: boolean
index: number
nodeCallbackHandler: (
event: string,
detail: string,
graphNode: DecisionTreeNode | undefined,
parentIds: string[],
branchInsert: boolean
) => void
parentIds: string[]
}
export let node: DecisionTreeNode
export let selected = false
export let canDelete: boolean = true
export let canAddBranch: boolean = true
export let index: number
export let darkMode: boolean
let open: boolean = false
const dispatch = createEventDispatcher<{
select: string
nodeInsert: void
delete: void
addBranch: void
}>()
const { selectedNodeId } = getContext<{
selectedNodeId: Writable<string | undefined>
}>('DecisionTreeEditor')
$: selected = $selectedNodeId === node.id
$: selected = $selectedNodeId === data.node.id
</script>
<div class="relative rounded-sm group">
<Button
class={twMerge(
'p-2 bg-surface w-full h-8 relative rounded-sm border border-gray-400',
selected ? 'outline outline-2 outline-offset-2 outline-gray-600' : '',
'flex flex-row gap-2 items-center justify-between'
)}
style="width: 275px; height: 34px; background-color: {getStateColor(undefined, darkMode)};"
on:click={() => {
selected = true
dispatch('select', node.id)
}}
>
<div class="ml-2 text-xs font-normal text-primary truncate">
{node.label === '' ? `Tab: ${node.id}` : node.label}
</div>
<Badge color="indigo" small>
Tab index: {index}
<Tooltip>
You can manually select a node using the <b>setTab</b> function with this index in a frontend
runnable.
</Tooltip>
</Badge>
</Button>
{#if canDelete}
<button
<NodeWrapper let:darkMode>
<div class="rounded-sm group">
<Button
class={twMerge(
'absolute -top-[10px] -right-[10px] rounded-full h-[20px] w-[20px] trash center-center text-primary',
'border-[1.5px] border-gray-700 bg-surface duration-150 hover:bg-red-400 hover:text-white hover:border-red-700',
'group-hover:opacity-100 opacity-0'
'p-2 bg-surface w-full h-8 relative rounded-sm border border-gray-400',
selected ? 'outline outline-2 outline-offset-2 outline-gray-600' : '',
'flex flex-row gap-2 items-center justify-between'
)}
on:click|preventDefault|stopPropagation={() => dispatch('delete')}
style="width: 275px; height: 34px; background-color: {getStateColor(
undefined,
darkMode,
'#fff'
)};"
on:click={() => {
selected = true
data.nodeCallbackHandler('select', data.node.id, data.node, data.parentIds, false)
}}
>
<X class="mx-[3px]" size={14} strokeWidth={2} />
</button>
{/if}
<div class="ml-2 text-xs font-normal text-primary truncate">
{data.node.label === '' ? `Tab: ${data.node.id}` : data.node.label}
</div>
<Badge color="indigo" small>
Tab index: {data.index}
<Tooltip>
You can manually select a node using the <b>setTab</b> function with this index in a frontend
runnable.
</Tooltip>
</Badge>
</Button>
{#if node.id !== 'end'}
<div
class={twMerge(
'absolute -bottom-10 left-1/2 transform -translate-x-1/2 flex items-center',
open ? 'z-20' : ''
)}
>
<InsertDecisionTreeNode
on:node={() => dispatch('nodeInsert')}
on:addBranch={() => dispatch('addBranch')}
canAddBranch={canAddBranch || node.next.length > 1}
canAddNode={node.next.length <= 1}
/>
</div>
{/if}
</div>
{#if data.canDelete}
<button
class={twMerge(
'absolute -top-[10px] -right-[10px] rounded-full h-[20px] w-[20px] trash center-center text-primary',
'border-[1.5px] border-gray-700 bg-surface duration-150 hover:bg-red-400 hover:text-white hover:border-red-700',
'group-hover:opacity-100 opacity-0'
)}
on:click|preventDefault|stopPropagation={() => {
data.nodeCallbackHandler('delete', data.node.id, data.node, data.parentIds, false)
}}
>
<X class="mx-[3px]" size={14} strokeWidth={2} />
</button>
{/if}
{#if data.node.id !== 'end'}
<div
class={twMerge(
'absolute -bottom-10 left-1/2 transform -translate-x-1/2 flex items-center',
open ? 'z-20' : ''
)}
>
<InsertDecisionTreeNode
on:node={() => {
data.nodeCallbackHandler('nodeInsert', data.node.id, data.node, data.parentIds, false)
}}
on:addBranch={() => {
data.nodeCallbackHandler('addBranch', data.node.id, data.node, data.parentIds, true)
}}
canAddBranch={data.canAddBranch || data.node.next.length > 1}
canAddNode={data.node.next.length <= 1}
/>
</div>
{/if}
</div>
</NodeWrapper>
frontend/src/lib/components/apps/editor/settingsPanel/decisionTree/DecisionTreePreview.svelte
+276 -305
View File
@@ -1,16 +1,15 @@
<script lang="ts">
import Svelvet from '$lib/components/graph/svelvet/container/views/Svelvet.svelte'
import type { UserEdgeType } from '$lib/components/graph/svelvet/types'
import { NODE, type Node } from '$lib/components/graph'
import { createEventDispatcher, getContext, onMount } from 'svelte'
import { NODE } from '$lib/components/graph'
import { sugiyama, dagStratify, decrossOpt, coordCenter } from 'd3-dag'
import { deepEqual } from 'fast-equals'
import {
SvelteFlow,
type Node,
type Edge,
ConnectionLineType,
type Viewport,
Controls
} from '@xyflow/svelte'
import DecisionTreeGraphNode from '../DecisionTreeGraphNode.svelte'
import DecisionTreeGraphHeader from '../DecisionTreeGraphHeader.svelte'
import type { Writable } from 'svelte/store'
import type { AppComponent, DecisionTreeNode } from '../../component'
import {
addNewBranch,
addNode,
@@ -20,22 +19,23 @@
removeBranch,
removeNode
} from './utils'
import { createEdge, createNode } from './nodeHelpers'
import DecisionTreeGraphNode from '../DecisionTreeGraphNode.svelte'
import DecisionTreeGraphHeader from '../DecisionTreeGraphHeader.svelte'
import { writable, type Writable } from 'svelte/store'
import type { AppComponent, DecisionTreeNode } from '../../component'
import { createEventDispatcher, getContext } from 'svelte'
import type { AppViewerContext } from '$lib/components/apps/types'
import { deleteGridItem } from '../../appUtils'
import DarkModeObserver from '$lib/components/DarkModeObserver.svelte'
export let nodes: DecisionTreeNode[]
export let rebuildOnChange: any = undefined
export let paneWidth = 0
export let paneHeight = 0
export let component: AppComponent
let displayedNodes: Node[] = []
let edges: UserEdgeType[] = []
let scroll = false
let darkMode = false
const nodesStore = writable<Node[]>([])
const edgesStore = writable<Edge[]>([])
const dispatch = createEventDispatcher()
@@ -43,109 +43,9 @@
selectedNodeId: Writable<string | undefined>
}>('DecisionTreeEditor')
$: rebuildOnChange && triggerRebuild()
let oldRebuildOnChange = rebuildOnChange ? JSON.parse(JSON.stringify(rebuildOnChange)) : undefined
function triggerRebuild() {
if (!deepEqual(oldRebuildOnChange, rebuildOnChange)) {
oldRebuildOnChange = JSON.parse(JSON.stringify(rebuildOnChange))
createGraph()
}
}
function buildStartNode() {
const firstNode = getFirstNode(nodes)
if (!firstNode) {
return
}
const startNodeConfig = {
id: 'start',
data: {
custom: {
component: DecisionTreeGraphHeader,
props: {
node: {
id: 'start',
label: 'Start',
next: {
id: firstNode.id,
condition: {
type: 'evalv2',
expr: 'true',
fieldType: 'boolean'
}
}
},
canDelete: false,
label: 'Start'
},
cb: (e: string, detail: any) => nodeCallbackHandler(e, detail, undefined, [], false)
}
}
}
const startNode = createNode(startNodeConfig)
displayedNodes.push(startNode)
edges.push(
createEdge({
id: `start-${firstNode?.id}`,
source: 'start',
target: firstNode?.id
})
)
}
const { app, runnableComponents, componentControl, debuggingComponents } =
getContext<AppViewerContext>('AppViewerContext')
function buildEndNode() {
const lastNodesIds = nodes
.filter((node) => {
return node.next.length == 0
})
.map((node) => node.id)
displayedNodes.push(
createNode({
id: 'end',
data: {
custom: {
component: DecisionTreeGraphHeader,
props: {
node: {
id: 'end',
label: 'End',
next: []
},
canDelete: false,
isTail: true,
label: 'End'
},
cb: (e: string, detail: any) => {
if (e == 'select') {
$selectedNodeId = detail
}
}
}
},
parentIds: lastNodesIds
})
)
lastNodesIds.forEach((lastNodeId) => {
edges.push(
createEdge({
id: `${lastNodeId}-end`,
source: lastNodeId,
target: 'end'
})
)
})
}
function addSubGrid() {
const numberOfPanes = nodes.length
if (!$app.subgrids) {
@@ -258,149 +158,231 @@
dispatch('render')
}
function buildGraphNodes() {
nodes?.forEach((graphNode, index) => {
const parentIds = getParents(nodes, graphNode.id)
const parentNext = nodes.find((node) => node.id == parentIds[0])?.next
const hasParentBranches = parentNext ? parentNext.length > 1 : false
function graphBuilder(decisionTreeNodes: DecisionTreeNode[]) {
const nodes: Node[] = []
const edges: Edge[] = []
if (hasParentBranches) {
const positionRelativeToParent = parentNext?.findIndex((next) => next.id == graphNode.id)
const branchHeaderId = `${parentIds[0]}-${graphNode.id}-branch-header`
function addNode(
node: DecisionTreeNode,
type: string = 'step',
data: {
canDelete: boolean
canAddBranch: boolean
index: number
parentIds?: string[]
},
x = nodeCallbackHandler
) {
nodes.push({
id: node.id,
type,
position: { x: -1, y: -1 },
data: {
node,
nodeCallbackHandler: x,
...data
}
})
}
// We create a header node for the branch, which will be the parent of the actual node
displayedNodes.push(
createNode({
const parents: { [key: string]: string[] } = {}
function addEdge(source: string, target: string) {
parents[target] = [...(parents[target] ?? []), source]
edges.push({
id: `${source}-${target}`,
source,
target,
type: 'edge'
})
}
function processNodes(decisionTreeNodes: DecisionTreeNode[]) {
decisionTreeNodes.forEach((graphNode, index) => {
const parentIds = getParents(decisionTreeNodes, graphNode.id)
const parentNext = decisionTreeNodes.find((node) => node.id == parentIds[0])?.next
const hasParentBranches = parentNext ? parentNext.length > 1 : false
if (hasParentBranches) {
const positionRelativeToParent = parentNext?.findIndex((next) => next.id == graphNode.id)
const branchHeaderId = `${parentIds[0]}-${graphNode.id}-branch-header`
// We create a header node for the branch, which will be the parent of the actual node
const header = {
id: branchHeaderId,
type: 'start',
position: { x: -1, y: -1 },
data: {
custom: {
component: DecisionTreeGraphHeader,
props: {
node: graphNode,
canDelete: true,
label:
positionRelativeToParent === 0
? 'Default branch'
: `Branch ${positionRelativeToParent}`
},
cb: (e: string, detail: any) => {
nodeCallbackHandler(e, detail, graphNode, parentIds, true)
}
}
node: {
label:
positionRelativeToParent === 0
? 'Default branch'
: `Branch ${positionRelativeToParent}`,
id: branchHeaderId,
allowed: undefined,
next: [],
parentIds: [parentIds[0]]
},
canDelete: true,
nodeCallbackHandler: (e, d) => {
nodeCallbackHandler(e, d, graphNode, parentIds, true)
},
branchHeader: true
}
}
nodes.push(header)
const cannotAddBranch =
graphNode.next.length === 0 ||
(graphNode.next.length === 1 &&
getParents(decisionTreeNodes, graphNode.next[0].id).length > 1)
// We create the actual node
addNode(
graphNode,
'step',
{
canDelete: !(graphNode.next.length > 1 && parentIds.length > 1),
canAddBranch: !cannotAddBranch,
index,
parentIds: [
branchHeaderId,
...parentIds.filter((pId) => {
const firstLetter = branchHeaderId.split('-')[0]
return pId !== firstLetter
})
]
},
parentIds: [parentIds[0]]
})
)
const cannotAddBranch =
graphNode.next.length === 0 ||
(graphNode.next.length === 1 && getParents(nodes, graphNode.next[0].id).length > 1)
// We create the actual node
displayedNodes.push(
createNode({
id: graphNode.id,
data: {
custom: {
component: DecisionTreeGraphNode,
props: {
node: graphNode,
canDelete: !(graphNode.next.length > 1 && parentIds.length > 1),
canAddBranch: !cannotAddBranch,
index,
darkMode
},
cb: (e: string, detail: any) =>
nodeCallbackHandler(e, detail, graphNode, parentIds, false)
}
},
parentIds: [
branchHeaderId,
...parentIds.filter((pId) => {
const firstLetter = branchHeaderId.split('-')[0]
return pId !== firstLetter
})
]
})
)
// Edge between branch header and node
edges.push(
createEdge({
id: `${graphNode.id}-${branchHeaderId}`,
source: branchHeaderId,
target: graphNode.id
})
)
if (graphNode.next.length === 1) {
edges.push(
createEdge({
id: `${branchHeaderId}-${graphNode.next[0].id}`,
source: graphNode.id,
target: graphNode.next[0].id
})
(e, d) => {
nodeCallbackHandler(e, d, graphNode, parentIds, false)
return undefined
}
)
addEdge(branchHeaderId, graphNode.id)
if (graphNode.next.length === 1) {
addEdge(graphNode.id, graphNode.next[0].id)
} else {
graphNode.next.forEach((nextNode) => {
addEdge(graphNode.id, `${graphNode.id}-${nextNode.id}-branch-header`)
})
}
} else {
const cannotAddBranch =
graphNode.next.length === 0 ||
(graphNode.next.length === 1 &&
getParents(decisionTreeNodes, graphNode.next[0].id).length > 1)
addNode(
graphNode,
'step',
{
canDelete:
!cannotAddBranch && (graphNode.next.length == 1 || !parentIds.includes('start')),
canAddBranch: !cannotAddBranch,
index,
parentIds: parentIds
},
(e, d) => {
nodeCallbackHandler(e, d, graphNode, parentIds, false)
return undefined
}
)
// if node has multiple next, it means it needs to be connected to a branch header
const hasMultipleNext = graphNode.next.length > 1
graphNode.next.forEach((nextNode) => {
edges.push(
createEdge({
id: `${graphNode.id}-${nextNode.id}-branch-header-${nextNode.id}`,
source: graphNode.id,
target: `${graphNode.id}-${nextNode.id}-branch-header`
})
)
const target = hasMultipleNext
? `${graphNode.id}-${nextNode.id}-branch-header`
: nextNode.id
addEdge(graphNode.id, target)
})
}
} else {
const cannotAddBranch =
graphNode.next.length === 0 ||
(graphNode.next.length === 1 && getParents(nodes, graphNode.next[0].id).length > 1)
})
}
displayedNodes.push(
createNode({
id: graphNode.id,
data: {
custom: {
component: DecisionTreeGraphNode,
props: {
node: graphNode,
canDelete:
!cannotAddBranch &&
(graphNode.next.length == 1 || !parentIds.includes('start')),
canAddBranch: !cannotAddBranch,
index,
darkMode
},
cb: (e: string, detail: any) =>
nodeCallbackHandler(e, detail, graphNode, parentIds, false)
const firstNode = getFirstNode(decisionTreeNodes)
if (firstNode) {
const startNode = {
id: 'start',
type: 'start',
position: { x: -1, y: -1 },
data: {
node: {
id: 'start',
label: 'Start',
allowed: undefined,
next: [
{
id: firstNode.id,
condition: {
type: 'evalv2',
expr: 'true',
fieldType: 'boolean'
}
}
},
parentIds: parentIds
})
)
]
},
canDelete: false,
nodeCallbackHandler
}
}
nodes.push(startNode)
addEdge('start', firstNode.id)
}
// if node has multiple next, it means it needs to be connected to a branch header
const hasMultipleNext = graphNode.next.length > 1
processNodes(decisionTreeNodes)
graphNode.next.forEach((nextNode) => {
const target = hasMultipleNext
? `${graphNode.id}-${nextNode.id}-branch-header`
: nextNode.id
const endNode = {
id: 'end',
type: 'end',
position: { x: -1, y: -1 },
data: {
node: {
id: 'end',
label: 'End',
allowed: undefined,
next: []
},
canDelete: false,
nodeCallbackHandler
}
}
edges.push(
createEdge({
id: `${graphNode.id}-${nextNode.id}`,
source: graphNode.id,
target
})
)
})
const lastNodesIds = decisionTreeNodes
.filter((node) => {
return node.next.length == 0
})
.map((node) => node.id)
lastNodesIds.forEach((id) => {
addEdge(id, endNode.id)
})
nodes.push(endNode)
Object.keys(parents).forEach((key) => {
const node = nodes.find((n) => n.id === key)
if (node) {
node.data.parentIds = parents[key]
}
})
$nodesStore = layoutNodes(nodes)
$edgesStore = edges
}
function layoutNodes(nodes: Node[]): { nodes: Node[]; height: number; width: number } {
$: graphBuilder(nodes)
function layoutNodes(nodes: Node[]): Node[] {
let seenId: string[] = []
for (const n of nodes) {
if (seenId.includes(n.id)) {
@@ -408,8 +390,14 @@
}
seenId.push(n.id)
}
const flattenParentIds = nodes.map((n) => ({
...n,
parentIds: n.data?.parentIds ?? []
})) as any
const stratify = dagStratify().id(({ id }: Node) => id)
const dag = stratify(nodes)
const dag = stratify(flattenParentIds)
let boxSize: any
try {
@@ -425,73 +413,56 @@
boxSize = layout(dag)
}
return {
nodes: dag.descendants().map((des) => {
return {
...des.data,
id: des.data.id,
position: {
x: des.x ? des.x + paneWidth / 2 - boxSize.width / 2 - NODE.width / 2 : 0,
y: des.y || 0
}
}
}),
height: boxSize.height + NODE.height,
width: boxSize.width + NODE.width
}
const newNodes = dag.descendants().map((des) => ({
...des.data,
id: des.data.id,
position: {
x: des.x ? des.x - boxSize.width / 2 - NODE.width / 2 : 0,
y: des.y || 0
}
}))
return newNodes
}
function resetGraphData() {
displayedNodes = []
edges = []
}
function createGraph() {
try {
resetGraphData()
buildStartNode()
buildGraphNodes()
buildEndNode()
applyLayoutToNodes()
} catch (e) {
console.error(e)
}
}
function applyLayoutToNodes() {
const layered = layoutNodes(displayedNodes)
displayedNodes = layered.nodes
}
let mounted = false
onMount(() => {
setTimeout(() => {
createGraph()
}, 10)
mounted = true
const viewport = writable<Viewport>({
x: 0,
y: 5,
zoom: 1
})
$: if (nodes.length > 0 && !$selectedNodeId) {
$selectedNodeId = getFirstNode(nodes)?.id
function centerViewport(width: number) {
viewport.update((vp) => ({
...vp,
x: width / 2,
y: vp.y
}))
}
$: paneWidth && centerViewport(paneWidth)
const nodeTypes = {
step: DecisionTreeGraphNode,
start: DecisionTreeGraphHeader,
end: DecisionTreeGraphHeader
} as any
</script>
<DarkModeObserver bind:darkMode />
<SvelteFlow
nodes={nodesStore}
edges={edgesStore}
{nodeTypes}
{viewport}
height={paneHeight}
minZoom={0.5}
connectionLineType={ConnectionLineType.SmoothStep}
defaultEdgeOptions={{ type: 'smoothstep' }}
zoomOnDoubleClick={false}
elementsSelectable={false}
proOptions={{ hideAttribution: true }}
nodesDraggable={false}
>
<div class="absolute inset-0 !bg-surface-secondary" />
{#if mounted}
<Svelvet
download={false}
highlightEdges={false}
locked
dataflow={false}
nodes={displayedNodes}
{edges}
height={paneHeight}
{scroll}
nodeSelected={false}
background={false}
width={paneWidth}
/>
{/if}
<Controls position="top-right" orientation="horizontal" showLock={false} />
</SvelteFlow>
frontend/src/lib/components/apps/editor/settingsPanel/decisionTree/nodeHelpers.ts
+3 -7
View File
@@ -1,4 +1,5 @@
import { NODE, type Node } from '$lib/components/graph'
import { NODE } from '$lib/components/graph'
import { type Node } from '@xyflow/svelte'
interface NodeConfig {
id: string
@@ -35,12 +36,7 @@ export function createNode(nodeConfig: NodeConfig): Node {
position: nodeConfig.position || { x: -1, y: -1 },
data: nodeConfig.data,
width: nodeConfig.width || NODE.width,
height: nodeConfig.height || NODE.height,
borderColor: nodeConfig.borderColor || '#999',
sourcePosition: 'bottom',
targetPosition: 'top',
parentIds: nodeConfig.parentIds || [],
loopDepth: nodeConfig.loopDepth || 0
height: nodeConfig.height || NODE.height
}
}
frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte
-3
View File
@@ -258,7 +258,6 @@
scroll
{minHeight}
moving={$moving?.module.id}
rebuildOnChange={$flowStore}
maxHeight={minHeight}
modules={$flowStore.value?.modules}
{selectedId}
@@ -269,8 +268,6 @@
const cb = () => {
push(history, $flowStore)
console.log('deleting node', e.id)
selectNextId(e.id)
removeAtId($flowStore.value.modules, e.id)
frontend/src/lib/components/flows/map/VirtualItem.svelte
+5 -100
View File
@@ -1,25 +1,16 @@
<script lang="ts">
import { base } from '$lib/base'
import { Badge } from '$lib/components/common'
import type { FlowModule } from '$lib/gen'
import { classNames } from '$lib/utils'
import { ExternalLink, Wand2, X } from 'lucide-svelte'
import { createEventDispatcher, getContext } from 'svelte'
import type { FlowCopilotContext } from '$lib/components/copilot/flow'
import { copilotInfo } from '$lib/stores'
import Menu from '$lib/components/common/menu/Menu.svelte'
import InsertTriggerButton from './InsertTriggerButton.svelte'
export let label: string
export let modules: FlowModule[] | undefined
export let insertable: boolean
export let bgColor: string = ''
export let selected: boolean
export let selectable: boolean
export let deleteBranch: { module: FlowModule; index: number } | undefined = undefined
export let id: string | undefined = undefined
export let center = true
export let disableAi: boolean = false
export let borderColor: string | undefined = undefined
export let hideId: boolean = false
@@ -31,31 +22,12 @@
index: number
}
select: string
deleteBranch: { module: FlowModule; index: number }
}>()
let triggerOpenMenu = false
let openNoCopilot = false
const { drawerStore: copilotDrawerStore, currentStepStore: copilotCurrentStepStore } =
const { currentStepStore: copilotCurrentStepStore } =
getContext<FlowCopilotContext | undefined>('FlowCopilotContext') || {}
</script>
{#if insertable && deleteBranch}
<div class="w-[27px] absolute -top-[40px] left-[50%] right-[50%] -translate-x-1/2">
<button
title="Delete branch"
on:click|stopPropagation={() => {
if (deleteBranch) {
dispatch('deleteBranch', deleteBranch)
}
}}
type="button"
class="text-primary bg-surface border mx-[1px] 'border-gray-300 dark:border-gray-500 focus:outline-none hover:bg-surface-hover focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-[25px] h-[25px] flex items-center justify-center"
>
<X class="m-[5px]" size={15} />
</button>
</div>
{/if}
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div
@@ -66,12 +38,12 @@
label === 'Input' && $copilotCurrentStepStore === 'Input' ? 'z-[901]' : '',
'bg-surface'
)}
<<<<<<< HEAD
style="min-width: 275px; max-height: 80px; background-color: {bgColor} !important;"
on:click={() => {
if (selectable) {
if (id) {
=======
style="width: 275px; max-height: 34px; background-color: {bgColor} !important;"
>>>>>>> main
dispatch('select', id)
} else {
dispatch('select', label)
}
}
@@ -97,70 +69,3 @@
</div>
</div>
</div>
{#if insertable && modules && label == 'Input'}
{#if !disableAi}
<div
class="{openNoCopilot
? 'z-10'
: ''} w-9 absolute -top-10 left-[50%] right-[50%] -translate-x-1/2"
>
<Menu pointerDown noMinW placement="bottom-center" let:close bind:show={openNoCopilot}>
<button
title="AI Flow Builder"
on:pointerdown={$copilotInfo.exists_openai_resource_path
? (ev) => {
ev.preventDefault()
ev.stopPropagation()
$copilotDrawerStore?.openDrawer()
}
: undefined}
slot="trigger"
type="button"
class=" bg-surface text-violet-800 dark:text-violet-400 border mx-0.5 focus:outline-none hover:bg-surface-hover focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-8 h-8 flex items-center justify-center"
>
<Wand2 size={16} />
</button>
{#if !$copilotInfo.exists_openai_resource_path}
<div class="text-primary p-4">
<p class="text-sm w-80">
Enable Windmill AI in the
<a
href="{base}/workspace_settings?tab=openai"
target="_blank"
class="inline-flex flex-row items-center gap-1"
on:click={() => {
close()
}}
>
workspace settings
<ExternalLink size={16} />
</a>
</p>
</div>
{/if}
</Menu>
</div>
{/if}
<div
class="{triggerOpenMenu
? 'z-10'
: ''} w-[27px] absolute top-[50px] left-[65%] right-[35%] -translate-x-1/2"
>
<InsertTriggerButton
{disableAi}
bind:open={triggerOpenMenu}
on:new={(e) => {
if (modules) {
dispatch('insert', {
modules,
index: 0,
detail: e.detail
})
}
}}
index={0}
modules={modules ?? []}
/>
</div>
{/if}
frontend/src/lib/components/graph/FlowGraph.svelte
-893
View File
@@ -1,893 +0,0 @@
<script lang="ts">
import { sugiyama, dagStratify, decrossOpt, coordCenter } from 'd3-dag'
import { type FlowModule, type FlowStatusModule } from '../../gen'
import {
NODE,
createIdGenerator,
isNode,
isLoop,
isBranch,
type GraphItem,
type Node,
type Loop,
type Branch,
type NestedNodes,
type GraphModuleState,
getStateColor
} from '.'
import { defaultIfEmptyString, encodeState } from '$lib/utils'
import { createEventDispatcher, onMount, setContext } from 'svelte'
import Svelvet from './svelvet/container/views/Svelvet.svelte'
import type { UserEdgeType } from './svelvet/types'
import MapItem from '../flows/map/MapItem.svelte'
import VirtualItem from '../flows/map/VirtualItem.svelte'
import { writable, type Writable } from 'svelte/store'
import { getDependeeAndDependentComponents } from '../flows/flowExplorer'
import { deepEqual } from 'fast-equals'
import DarkModeObserver from '../DarkModeObserver.svelte'
import type { FlowInput } from '../flows/types'
import { dfsByModule } from '../flows/previousResults'
export let success: boolean | undefined = undefined
export let modules: FlowModule[] | undefined = []
export let failureModule: FlowModule | undefined = undefined
export let minHeight: number = 0
export let maxHeight: number | undefined = undefined
export let notSelectable = false
export let flowModuleStates: Record<string, GraphModuleState> | undefined = undefined
export let rebuildOnChange: any = undefined
export let selectedId: Writable<string | undefined> = writable<string | undefined>(undefined)
export let insertable = false
export let moving: string | undefined = undefined
export let scroll = false
export let download = false
export let fullSize = false
export let disableAi = false
export let flowInputsStore: Writable<FlowInput | undefined> = writable<FlowInput | undefined>(
undefined
)
setContext<{
selectedId: Writable<string | undefined>
flowInputsStore: Writable<FlowInput | undefined>
}>('FlowGraphContext', { selectedId, flowInputsStore })
let idGenerator: Generator
let nestedNodes: NestedNodes
let nodes: Node[] = []
let edges: UserEdgeType[] = []
let width: number, height: number
let fullWidth: number
let errorHandlers: Record<string, string> = {}
let containerHeight = window.innerHeight
let error: string | undefined = undefined
$: showDataflow =
$selectedId != undefined &&
!$selectedId.startsWith('constants') &&
!$selectedId.startsWith('settings') &&
$selectedId !== 'failure' &&
$selectedId !== 'Result'
let dataflow = false
let dispatch = createEventDispatcher()
let renderCount = 1
$: {
dataflow
moving
success
width && height && minHeight && $selectedId && flowModuleStates && renderCount
createGraph()
}
$: rebuildOnChange && triggerRebuild()
let oldRebuildOnChange = rebuildOnChange ? JSON.parse(JSON.stringify(rebuildOnChange)) : undefined
let darkMode = false
function triggerRebuild() {
if (!deepEqual(oldRebuildOnChange, rebuildOnChange)) {
oldRebuildOnChange = JSON.parse(JSON.stringify(rebuildOnChange))
createGraph()
}
}
async function createGraph() {
try {
// console.log(JSON.stringify(modules))
// return
nodes = []
edges = []
errorHandlers = {}
if (modules) {
idGenerator = createIdGenerator()
} else {
nodes = edges = []
return
}
nestedNodes = nodes = []
nestedNodes.push(
createVirtualNode(
getParentIds(),
'Input',
modules,
undefined,
undefined,
0,
0,
true,
undefined,
undefined,
'Input',
undefined,
undefined
)
)
modules.forEach((m, i) => {
const item = getConvertedFlowModule(
m,
undefined,
undefined,
0,
i + 1 == modules?.length,
modules!
)
item && nestedNodes.push(item)
})
nestedNodes.push(
createVirtualNode(
getParentIds(),
'Result',
undefined,
undefined,
undefined,
0,
modules.length,
true,
undefined,
undefined,
undefined,
success == undefined ? undefined : success ? 'Success' : 'Failure',
undefined
)
)
if (!flowModuleStates) {
if (failureModule) nestedNodes.push(createErrorHandler(failureModule))
} else {
Object.entries(flowModuleStates ?? [])
.filter(([k, v]) => k.startsWith('failure'))
.forEach(([k, v]) => {
nestedNodes.push(createErrorHandler({ id: k } as FlowModule, v.parent_module, k))
})
}
const flatNodes = flattenNestedNodes(nestedNodes)
const layered = layoutNodes(flatNodes)
nodes = layered.nodes
let hfull = Math.max(layered.height, minHeight)
fullWidth = layered.width
height = fullSize ? hfull : Math.max(hfull, maxHeight ?? containerHeight)
let useDataflow = dataflow && showDataflow
edges = useDataflow ? [] : createEdges(nodes)
if (useDataflow && $selectedId) {
let deps = getDependeeAndDependentComponents($selectedId, modules ?? [], failureModule)
if (deps) {
Object.entries(deps.dependees).forEach((x, i) => {
const inputs = x[1]
inputs?.forEach((input, index) => {
let pid = x[0]
if (input?.startsWith('flow_input.iter')) {
const parent = dfsByModule($selectedId!, modules ?? [])?.pop()
if (parent?.id) {
pid = parent.id
}
}
edges.push({
id: `dep-${pid}-${$selectedId}-${input}`,
source: pid,
target: $selectedId!,
labelBgColor: darkMode ? '#999' : 'white',
edgeColor: darkMode ? 'white' : 'black',
arrow: false,
animate: true,
noHandle: true,
label: pid,
type: 'bezier',
offset: index * 20
})
})
})
Object.entries(deps.dependents).forEach((x, i) => {
let pid = x[0]
edges.push({
id: `dep-${pid}-${$selectedId}`,
source: $selectedId!,
target: pid,
labelBgColor: darkMode ? '#999' : 'white',
edgeColor: darkMode ? 'white' : 'black',
arrow: false,
animate: true,
noHandle: true,
label: pid,
type: 'bezier',
offset: i * 10
})
})
}
}
if (error) error = undefined
} catch (e) {
error = e.message
}
}
function getConvertedFlowModule(
module: FlowModule,
parent: NestedNodes | string | undefined,
edgeLabel: string | undefined,
loopDepth: number,
insertableEnd: boolean,
modules: FlowModule[],
wrapper: FlowModule | undefined = undefined
): GraphItem | undefined {
const type = module.value.type
const parentIds = getParentIds(parent)
if (type === 'forloopflow' || type == 'whileloopflow') {
//@ts-ignore
return flowModuleToLoop(modules, module, parent, loopDepth)
} else if (type === 'branchone') {
const branches = [
{ summary: 'Default Branch', modules: module.value.default, removable: false },
...module.value.branches.map((b, i) => ({
summary: defaultIfEmptyString(b.summary, 'Branch ' + (i + 1)) + '\n`' + b.expr + '`',
modules: b.modules,
removable: true
}))
]
return flowModuleToBranch(
module,
modules,
branches,
[], //['', ...module.value.branches.map((x) => `${truncateRev(x.expr, 20)}`)],
parent,
loopDepth,
false
)
} else if (type === 'branchall') {
const branches = module.value.branches.map((b, i) => ({
summary: defaultIfEmptyString(b.summary, `Branch ${i + 1}`),
modules: b.modules,
removable: true
}))
return flowModuleToBranch(module, modules, branches, [], parent, loopDepth, true)
}
return flowModuleToNode(
parentIds,
module,
edgeLabel,
undefined,
loopDepth,
insertableEnd,
false,
modules,
wrapper,
undefined
)
}
function getParentIds(items: string | NestedNodes | undefined = undefined): string[] {
if (typeof items == 'string') {
return [items]
}
const item = items?.at(-1) || nestedNodes.at(-1)
if (!item) return []
if (isNode(item)) {
const id = item.id
return [id]
} else if (isLoop(item)) {
return getParentIds(item.items)
} else if (isBranch(item)) {
return [item.nodeEnd.id]
}
return []
}
function flowModuleToNode(
parentIds: string[],
mod: FlowModule,
edgeLabel: string | undefined,
annotation: string | undefined,
loopDepth: number,
insertableEnd: boolean,
branchable: boolean,
modules: FlowModule[],
wrapper: FlowModule | undefined,
flowJobs:
| { flowJobs: string[]; selected: number; flowJobsSuccess?: (boolean | undefined)[] }
| undefined
): Node {
let type = flowModuleStates?.[mod.id]?.type
if (!type && flowJobs) {
type = 'InProgress'
}
return {
type: 'node',
id: mod.id,
position: { x: -1, y: -1 },
data: {
custom: {
component: MapItem,
props: {
trigger: parentIds.length == 0,
mod,
insertable,
insertableEnd,
branchable,
retries: flowModuleStates?.[mod.id]?.retries,
duration_ms: flowModuleStates?.[mod.id]?.duration_ms,
bgColor: getStateColor(type, darkMode),
annotation: annotation,
modules,
moving,
disableAi,
wrapperId: wrapper?.id,
flowJobs
},
cb: (e: string, detail: any) => {
if (e == 'delete') {
dispatch('delete', detail)
} else if (e == 'select') {
if (!notSelectable) {
if ($selectedId != mod.id) {
$selectedId = mod.id
}
dispatch('select', mod)
}
} else if (e == 'insert') {
dispatch('insert', detail)
} else if (e == 'newBranch') {
dispatch('newBranch', detail)
} else if (e == 'move') {
dispatch('move', { module: mod, modules })
} else if (e == 'selectedIteration') {
dispatch('selectedIteration', { ...detail, moduleId: mod.id })
}
}
}
},
width: NODE.width,
height: NODE.height,
parentIds,
sourcePosition: 'bottom',
targetPosition: 'top',
edgeLabel,
loopDepth
}
}
function flowModuleToLoop(
modules: FlowModule[],
module: FlowModule & { value: { type: 'forloopflow' | 'whileloopflow' } },
parent: NestedNodes | string | undefined,
loopDepth: number
): Loop {
let state = flowModuleStates?.[module.id]
const loop: Loop = {
type: 'loop',
items: [
flowModuleToNode(
getParentIds(parent),
module,
undefined,
state?.flow_jobs
? 'iterations ' + state?.flow_jobs?.length + '/' + (state?.iteration_total ?? '?')
: '',
loopDepth,
false,
false,
modules,
undefined,
state?.flow_jobs
? {
flowJobs: state?.flow_jobs,
selected: state?.selectedForloopIndex ?? -1,
flowJobsSuccess: state?.flow_jobs_success
}
: undefined
)
]
}
const innerModules = module.value.modules
let borderStatus: FlowStatusModule['type'] | undefined = undefined
let success = state?.flow_jobs_success?.[state?.selectedForloopIndex ?? 0]
if (success != undefined) {
borderStatus = success ? 'Success' : 'Failure'
}
loop.items.push(
createVirtualNode(
getParentIds(loop.items),
`Do one iteration`,
innerModules,
undefined,
1000,
loopDepth + 1,
0,
false,
undefined,
undefined,
undefined,
undefined,
borderStatus,
true,
module
)
)
innerModules.forEach((innerModule, i) => {
const item = getConvertedFlowModule(
innerModule,
loop.items,
undefined,
loopDepth + 1,
i + 1 == innerModules?.length,
innerModules,
module
)
item && loop.items.push(item)
})
loop.items.push(
createVirtualNode(
getParentIds(loop.items),
`Collect result of each iteration`,
modules,
undefined,
1000,
loopDepth,
modules.findIndex((m) => m.id == module.id) + 1,
true,
undefined,
module.id,
undefined,
undefined,
flowModuleStates?.[module.id]?.type
)
)
return loop
}
function flowModuleToBranch(
module: FlowModule,
modules: FlowModule[],
branches: { summary: string; modules: FlowModule[]; removable: boolean }[],
edgesLabel: string[],
parent: string | NestedNodes | undefined = undefined,
loopDepth: number,
branchall: boolean
): Branch | Node {
const wrapper = JSON.parse(JSON.stringify(module))
const node = flowModuleToNode(
getParentIds(parent),
module,
undefined,
undefined,
loopDepth,
false,
true,
modules,
undefined,
undefined
)
const bitems: NestedNodes[] = []
const branchParent = [node.id]
if (branches.length == 0) {
bitems.push([
createVirtualNode(
branchParent,
'No branches',
undefined,
undefined,
0,
loopDepth,
0,
false,
undefined,
undefined,
undefined,
undefined,
undefined
)
])
}
branches.forEach(({ summary, modules, removable }, i) => {
const items: NestedNodes = []
let borderStatus: FlowStatusModule['type'] | undefined = undefined
if (module.value.type == 'branchall' || module.value.type == 'forloopflow') {
let flow_jobs_success = flowModuleStates?.[module.id]?.flow_jobs_success
if (!flow_jobs_success) {
borderStatus = 'WaitingForPriorSteps'
} else {
let status = flow_jobs_success?.[i]
if (status == undefined) {
borderStatus = 'WaitingForExecutor'
} else {
borderStatus = status ? 'Success' : 'Failure'
}
}
} else if (module.value.type == 'branchone') {
if (flowModuleStates?.[module.id]?.branchChosen == i) {
borderStatus = flowModuleStates?.[module.id]?.type
}
}
items.push(
createVirtualNode(
branchParent,
summary,
modules,
edgesLabel[i],
undefined,
loopDepth,
0,
true,
removable ? { module, index: i } : undefined,
module.id,
undefined,
undefined,
borderStatus,
false,
wrapper,
true
)
)
if (modules.length) {
modules.forEach((innerModule, j) => {
const item = getConvertedFlowModule(
innerModule,
items,
undefined,
loopDepth,
j + 1 == modules?.length,
modules,
module
)
item && items.push(item)
})
}
items.length && bitems.push(items)
})
return {
type: 'branch',
node,
nodeEnd: createVirtualNode(
bitems.map((i) => getParentIds(i)).flat(),
branchall ? 'Collect result of each branch' : 'Result of the chosen branch',
modules,
undefined,
0,
loopDepth,
modules.findIndex((m) => m.id == module.id) + 1,
true,
undefined,
module.id,
undefined,
undefined,
flowModuleStates?.[module.id]?.type
),
items: bitems
}
}
function flattenNestedNodes(nestedNodes: NestedNodes, nodes: Node[] = []): Node[] {
const array = nodes
nestedNodes.forEach((node) => {
if (isNode(node)) {
array.push(node)
} else if (isLoop(node)) {
flattenNestedNodes(node.items, array)
} else if (isBranch(node)) {
array.push(node.node)
node.items.forEach((item) => {
flattenNestedNodes(item, array)
})
array.push(node.nodeEnd)
}
})
return array
}
function layoutNodes(nodes: Node[]): { nodes: Node[]; height: number; width: number } {
let seenId: string[] = []
for (const n of nodes) {
if (seenId.includes(n.id)) {
n.id = n.id + '_dup'
}
seenId.push(n.id)
}
const stratify = dagStratify().id(({ id }: Node) => id)
const dag = stratify(nodes)
let boxSize: any
try {
const layout = sugiyama()
.decross(decrossOpt())
.coord(coordCenter())
.nodeSize(() => [NODE.width + NODE.gap.horizontal, NODE.height + NODE.gap.vertical])
boxSize = layout(dag)
} catch {
const layout = sugiyama()
.coord(coordCenter())
.nodeSize(() => [NODE.width + NODE.gap.horizontal, NODE.height + NODE.gap.vertical])
boxSize = layout(dag)
}
return {
nodes: dag.descendants().map((des) => ({
...des.data,
id: des.data.id,
position: {
x: des.x
? des.data.loopDepth * 50 +
des.x +
(fullSize ? fullWidth : width) / 2 -
boxSize.width / 2 -
NODE.width / 2
: 0,
y: des.y || 0
}
})),
height: boxSize.height + NODE.height,
width: boxSize.width + NODE.width
}
}
function createEdges(nodes: Node[]): UserEdgeType[] {
const edges: UserEdgeType[] = []
nodes.forEach((node) => {
node.parentIds.forEach((pid, i) => {
// skip virtual nodes such as collect result
if (
false &&
errorHandlers[pid] &&
parseInt(node.id) < 900 &&
nodes.find((x) => x.id == errorHandlers[pid])
) {
edges.push({
id: `e-${pid}-${node.id}`,
source: pid,
target: errorHandlers[pid],
labelBgColor: 'white',
arrow: false,
animate: false,
noHandle: true,
label: node.edgeLabel,
type: 'bezier'
})
edges.push({
id: `e-${pid}-${node.id}`,
source: errorHandlers[pid],
target: node.id,
labelBgColor: 'white',
arrow: false,
animate: false,
noHandle: true,
label: node.edgeLabel,
type: 'bezier'
})
} else {
edges.push({
id: `e-${pid}-${node.id}`,
source: pid,
target: node.id,
labelBgColor: 'white',
arrow: false,
animate: false,
noHandle: true,
label: node.edgeLabel,
edgeColor: '#999',
type: 'bezier'
})
}
})
})
return edges
}
function createVirtualNode(
parentIds: string[],
label: string,
modules: FlowModule[] | undefined,
edgeLabel: string | undefined,
offset: number | undefined,
loopDepth: number,
index: number,
selectable: boolean,
deleteBranch: { module: FlowModule; index: number } | undefined,
mid: string | undefined,
fixed_id: string | undefined,
module_status: FlowStatusModule['type'] | undefined,
borderStatus: FlowStatusModule['type'] | undefined,
center: boolean = true,
wrapperNode: FlowModule | undefined = undefined,
hideId: boolean = false
): Node {
const id = fixed_id ?? -idGenerator.next().value - 2 + (offset ?? 0)
let bgColor
if (module_status) {
bgColor = getStateColor(module_status, darkMode)
} else {
bgColor = darkMode ? '#2e3440' : '#dfe6ee'
}
return {
type: 'node',
id: id.toString(),
position: { x: -1, y: -1 },
data: {
// html: `
// <div class="w-full max-h-full text-center ellipsize-multi-line text-2xs [-webkit-line-clamp:2] px-1">
// ${label}
// </div>
// `
custom: {
component: VirtualItem,
props: {
label,
insertable,
modules,
bgColor,
borderColor: borderStatus
? getStateColor(borderStatus, darkMode) + (!darkMode ? '; border-width: 3px' : '')
: undefined,
selected: $selectedId == label,
index,
selectable,
deleteBranch,
id: mid,
moving,
center,
disableAi,
wrapperNode,
hideId
},
cb: (e: string, detail: any) => {
if (e == 'insert') {
dispatch('insert', detail)
} else if (e == 'select') {
$selectedId = detail
dispatch('select', detail)
} else if (e == 'deleteBranch') {
$selectedId = label
dispatch('deleteBranch', detail)
}
}
}
},
width: NODE.width,
height: NODE.height,
borderColor: $selectedId == label ? 'black' : '#999',
sourcePosition: 'bottom',
targetPosition: 'top',
parentIds,
edgeLabel,
loopDepth
}
}
function createErrorHandler(
mod: FlowModule,
parent_module?: string,
customNodeId?: string | undefined
): Node {
// When needed, we can add a custom node id to the error handler
// used for nested error handlers in for loop for example
const nId = customNodeId ?? 'failure'
parent_module && (errorHandlers[parent_module] = nId)
let label = 'Error handler'
return {
type: 'node',
id: nId,
position: { x: -1, y: -1 },
data: {
custom: {
component: VirtualItem,
props: {
label,
insertable: false,
modules: undefined,
bgColor: getStateColor(flowModuleStates?.[mod.id]?.type, darkMode),
selected: $selectedId == mod.id,
index: 0,
selectable: true,
id: mod.id,
disableAi
},
cb: (e: string, detail: any) => {
if (e == 'select') {
$selectedId = detail
dispatch('select', detail)
}
}
}
},
width: NODE.width,
height: NODE.height,
sourcePosition: 'bottom',
targetPosition: 'top',
parentIds: parent_module ? [parent_module] : [],
loopDepth: 0
}
}
function onThemeChange() {
renderCount++
}
onMount(() => {
onThemeChange()
})
</script>
<DarkModeObserver bind:darkMode on:change={onThemeChange} />
<!-- {JSON.stringify(flowModuleStates)} -->
<div
bind:clientWidth={width}
bind:clientHeight={containerHeight}
class={fullSize ? '' : 'w-full h-full overflow-hidden relative'}
id="flow-graph"
>
{#if !error}
{#if width && height}
{#key renderCount}
<Svelvet
on:expand={() => {
try {
localStorage.setItem('svelvet', encodeState({ modules, failureModule }))
} catch (e) {
console.error('error interacting with local storage', e)
}
window.open('/view_graph', '_blank')
}}
{download}
highlightEdges={false}
locked
bind:dataflow
{nodes}
width={fullSize ? fullWidth : width}
{edges}
{height}
{scroll}
nodeSelected={showDataflow}
background={false}
/>
{/key}
{/if}
{:else}
<div class="p-4 text-center text-xl text-red-600">
Error computing the graph: {error}
</div>
{/if}
</div>
frontend/src/lib/components/graph/FlowGraphV2.svelte
+4 -16
View File
@@ -40,7 +40,6 @@
export let maxHeight: number | undefined = undefined
export let notSelectable = false
export let flowModuleStates: Record<string, GraphModuleState> | undefined = undefined
export let rebuildOnChange: any = undefined
export let selectedId: Writable<string | undefined> = writable<string | undefined>(undefined)
@@ -177,7 +176,7 @@
$nodes = layoutNodes(graph?.nodes)
$edges = graph.edges
height = Math.max(...$nodes.map((n) => n.position.y + NODE.height), minHeight)
height = Math.max(...$nodes.map((n) => n.position.y + NODE.height + 40), minHeight)
}
$: graph && updateStores()
@@ -205,17 +204,6 @@
const proOptions = { hideAttribution: true }
function handleNodeClick(e: CustomEvent) {
const mod = e.detail.node.data.module as FlowModule
if (!notSelectable && mod) {
if ($selectedId != mod.id) {
$selectedId = mod.id
}
dispatch('select', mod)
}
}
$: showDataflow =
$selectedId != undefined &&
!$selectedId.startsWith('constants') &&
@@ -225,7 +213,7 @@
const viewport = writable<Viewport>({
x: 0,
y: 100,
y: 5,
zoom: 1
})
@@ -240,7 +228,7 @@
$: width && centerViewport(width)
</script>
<div style={`height: ${height}px; `} bind:clientWidth={width}>
<div style={`height: ${height}px; max-height: ${maxHeight}px;`} bind:clientWidth={width}>
<SvelteFlow
{nodes}
{edges}
@@ -253,9 +241,9 @@
defaultEdgeOptions={{ type: 'smoothstep' }}
preventScrolling={scroll}
zoomOnDoubleClick={false}
elementsSelectable={false}
{proOptions}
nodesDraggable={false}
on:nodeclick={(e) => handleNodeClick(e)}
>
<div class="absolute inset-0 !bg-surface-secondary" />
<Controls position="top-right" orientation="horizontal" showLock={false}>
frontend/src/lib/components/graph/index.ts
-2
View File
@@ -1,4 +1,2 @@
export { default as FlowGraph } from './FlowGraph.svelte'
export * from './model'
export * from './util'
frontend/src/lib/components/graph/model.ts
+1 -9
View File
@@ -1,18 +1,9 @@
import type { FlowStatusModule, Job } from '$lib/gen'
import type { Writable } from 'svelte/store'
import type { UserNodeType } from './svelvet/types'
import type { FlowState } from '../flows/flowState'
export type ModuleHost = 'workspace' | 'inline' | 'hub'
export type Node = UserNodeType & {
parentIds: string[]
edgeLabel?: string
host?: ModuleHost
type: 'node'
loopDepth: number
}
export type Loop = {
type: 'loop'
items: NestedNodes
@@ -50,6 +41,7 @@ export type GraphModuleState = {
flow_jobs_results?: any
branchChosen?: number
result?: any
tag?: string
scheduled_for?: Date
job_id?: string
parent_module?: string
frontend/src/lib/components/graph/renderers/edges/BaseEdge.svelte
+8 -5
View File
@@ -29,7 +29,7 @@
disableMoveIds: string[]
}
$: [edgePath, labelX, labelY] = getBezierPath({
$: [edgePath] = getBezierPath({
sourceX,
sourceY: targetY - sourceY > 100 ? targetY - 100 : sourceY,
sourcePosition,
@@ -47,13 +47,15 @@
const { useDataflow } = getContext<{
useDataflow: Writable<boolean | undefined>
}>('FlowGraphContext')
let menuOpen = false
</script>
<EdgeLabelRenderer>
{#if data?.insertable && !$useDataflow && !data?.moving}
<div
class="edgeButtonContainer nodrag nopan"
style:transform="translate(-50%, -50%) translate({labelX}px,{labelY}px)"
class={twMerge('edgeButtonContainer nodrag nopan top-0', menuOpen ? 'z-50' : '')}
style:transform="translate(-50%, 50%) translate({sourceX}px,{sourceY}px)"
>
<InsertModuleButton
disableAi={data.disableAi}
@@ -63,12 +65,13 @@
on:new={(e) => {
data?.eventHandlers.insert({ modules: data.modules, index: data.index, detail: e.detail })
}}
bind:open={menuOpen}
/>
</div>
{#if data.enableTrigger}
<div
class="edgeButtonContainer nodrag nopan"
style:transform="translate(100%, -50%) translate({labelX}px,{labelY}px)"
style:transform="translate(100%, 50%) translate({sourceX}px,{sourceY}px)"
>
<InsertTriggerButton
disableAi={data.disableAi}
@@ -89,7 +92,7 @@
{#if data?.moving}
<div
class="edgeButtonContainer nodrag nopan"
style:transform="translate(-50%, -50%) translate({labelX}px,{labelY}px)"
style:transform="translate(-50%, 50%) translate({sourceX}px,{sourceY}px)"
>
{#if data.moving && !data.disableMoveIds?.includes(data.moving)}
<button
frontend/src/lib/components/graph/renderers/nodes/BranchAllStart.svelte
+5 -3
View File
@@ -20,16 +20,18 @@
offset: number
}
$: borderStatus = computeBorderStatus(data.branchIndex, data.flowModuleStates?.[data.id])
$: borderStatus = computeBorderStatus(
data.branchIndex,
'branchall',
data.flowModuleStates?.[data.id]
)
</script>
<NodeWrapper let:darkMode offset={data.offset}>
<VirtualItem
label={data.label}
modules={data.modules}
selectable
selected={data.selected}
insertable={data.insertable}
bgColor={getStateColor(undefined, darkMode)}
borderColor={borderStatus
? getStateColor(borderStatus, darkMode) + (!darkMode ? '; border-width: 3px' : '')
frontend/src/lib/components/graph/renderers/nodes/BranchOneStart.svelte
+5 -3
View File
@@ -20,16 +20,18 @@
offset: number
}
$: borderStatus = computeBorderStatus(data.branchIndex, data.flowModuleStates?.[data.id])
$: borderStatus = computeBorderStatus(
data.branchIndex,
'branchone',
data.flowModuleStates?.[data.id]
)
</script>
<NodeWrapper let:darkMode offset={data.offset}>
<VirtualItem
label={data.label}
modules={data.modules}
selectable
selected={data.selected}
insertable={data.insertable}
bgColor={getStateColor(undefined, darkMode)}
borderColor={borderStatus
? getStateColor(borderStatus, darkMode) + (!darkMode ? '; border-width: 3px' : '')
frontend/src/lib/components/graph/renderers/nodes/ForLoopEndNode.svelte
-4
View File
@@ -1,7 +1,6 @@
<script lang="ts">
import VirtualItem from '$lib/components/flows/map/VirtualItem.svelte'
import NodeWrapper from './NodeWrapper.svelte'
import type { FlowModule } from '$lib/gen'
import type { GraphModuleState } from '../../model'
import { getStateColor } from '../../util'
import type { GraphEventHandlers } from '../../graphBuilder'
@@ -10,7 +9,6 @@
offset: number
id: string
insertable: boolean
modules: FlowModule[]
flowModuleStates: Record<string, GraphModuleState> | undefined
eventHandlers: GraphEventHandlers
}
@@ -19,10 +17,8 @@
<NodeWrapper offset={data.offset} let:darkMode>
<VirtualItem
label={'Collect result of each iteration'}
modules={data.modules}
selectable={true}
selected={false}
insertable={data.insertable}
id={data.id}
bgColor={getStateColor(undefined, darkMode)}
borderColor={getStateColor(data.flowModuleStates?.[data.id]?.type, darkMode)}
frontend/src/lib/components/graph/renderers/nodes/ForLoopStartNode.svelte
-2
View File
@@ -18,9 +18,7 @@
<NodeWrapper let:darkMode offset={data.offset}>
<VirtualItem
label={'Do one iteration'}
modules={data.modules}
selectable={false}
insertable={false}
selected={false}
id={data.id}
hideId
frontend/src/lib/components/graph/renderers/nodes/InputNode.svelte
+1 -3
View File
@@ -1,6 +1,6 @@
<script lang="ts">
import VirtualItem from '$lib/components/flows/map/VirtualItem.svelte'
import { Calendar, ExternalLink, Split, Wand2, Webhook } from 'lucide-svelte'
import { ExternalLink, Wand2 } from 'lucide-svelte'
import NodeWrapper from './NodeWrapper.svelte'
import Popover from '$lib/components/Popover.svelte'
import type { GraphEventHandlers } from '../../graphBuilder'
@@ -82,10 +82,8 @@
{/if}
<VirtualItem
label="Input"
modules={data.modules}
selectable
selected={$selectedId === 'Input'}
insertable={false}
bgColor={getStateColor(undefined, darkMode)}
on:insert={(e) => {
data.eventHandlers?.insert(e.detail)
frontend/src/lib/components/graph/renderers/nodes/NoBranchNode.svelte
-2
View File
@@ -20,12 +20,10 @@
<NodeWrapper offset={data.offset} let:darkMode enableSourceHandle enableTargetHandle>
<VirtualItem
label={data.label ?? 'No branches'}
modules={data.modules}
id={data.id}
hideId={true}
selectable={true}
selected={false}
insertable={false}
bgColor={getStateColor(undefined, darkMode)}
borderColor={getStateColor(data?.flowModuleStates?.[data?.id]?.type, darkMode)}
on:select={(e) => {
frontend/src/lib/components/graph/renderers/nodes/ResultNode.svelte
-2
View File
@@ -22,10 +22,8 @@
<VirtualItem
id={'Result'}
label={'Result'}
modules={undefined}
selectable={true}
selected={$selectedId === 'Result'}
insertable={false}
hideId={true}
bgColor={getStateColor(
data.success == undefined ? undefined : data.success ? 'Success' : 'Failure',
frontend/src/lib/components/graph/renderers/nodes/branchAllEndNode.svelte
-2
View File
@@ -19,11 +19,9 @@
<NodeWrapper offset={data.offset} let:darkMode enableSourceHandle enableTargetHandle>
<VirtualItem
label={'Collect result from all branches'}
modules={data.modules}
id={data.id}
selectable={true}
selected={false}
insertable={false}
bgColor={getStateColor(undefined, darkMode)}
borderColor={getStateColor(data?.flowModuleStates?.[data?.id]?.type, darkMode)}
on:select={(e) => {
frontend/src/lib/components/graph/renderers/nodes/branchOneEndNode.svelte
+1 -3
View File
@@ -1,10 +1,10 @@
<script lang="ts">
import VirtualItem from '$lib/components/flows/map/VirtualItem.svelte'
import NodeWrapper from './NodeWrapper.svelte'
import type { FlowModule } from '$lib/gen'
import type { GraphEventHandlers } from '../../graphBuilder'
import { getStateColor } from '../../util'
import type { GraphModuleState } from '../../model'
import type { FlowModule } from '$lib/gen'
export let data: {
id: string
@@ -19,11 +19,9 @@
<NodeWrapper let:darkMode offset={data.offset}>
<VirtualItem
label={'Collect result from all branches'}
modules={data.modules}
id={data.id}
selectable={true}
selected={false}
insertable={false}
bgColor={getStateColor(undefined, darkMode)}
borderColor={getStateColor(data?.flowModuleStates?.[data?.id]?.type, darkMode)}
on:select={(e) => {
frontend/src/lib/components/graph/renderers/utils.ts
+18 -11
View File
@@ -7,19 +7,26 @@ export function getStraightLinePath({ sourceX, sourceY, targetY }) {
export function computeBorderStatus(
branchIndex: number,
type: 'branchone' | 'branchall',
graphModuleState: GraphModuleState | undefined
): FlowStatusModule['type'] | undefined {
const flowJobSuccess = graphModuleState?.flow_jobs_success
if (type === 'branchone') {
const branchChosen = graphModuleState?.branchChosen
if (!Array.isArray(flowJobSuccess)) {
return 'WaitingForPriorSteps'
if (branchChosen === branchIndex) {
return graphModuleState?.type
}
} else {
let flow_jobs_success = graphModuleState?.flow_jobs_success
if (!flow_jobs_success) {
return 'WaitingForPriorSteps'
} else {
let status = flow_jobs_success?.[branchIndex]
if (status == undefined) {
return 'WaitingForExecutor'
} else {
return status ? 'Success' : 'Failure'
}
}
}
const jobStatus = flowJobSuccess[branchIndex]
if (jobStatus === undefined) {
return 'WaitingForExecutor'
}
return jobStatus ? 'Success' : 'Failure'
}
frontend/src/lib/components/graph/svelvet/LICENSE
-21
View File
@@ -1,21 +0,0 @@
MIT License
Copyright (c) 2022 OSLabs Beta
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
frontend/src/lib/components/graph/svelvet/container/README.md
-7
View File
@@ -1,7 +0,0 @@
# Container
This folder contains two containers: Svelvet and Canvas.
## Svelvet.svelte
Svelvet.svelte is the top level component
frontend/src/lib/components/graph/svelvet/container/controllers/middleware.ts
-91
View File
@@ -1,91 +0,0 @@
/*
This file contains "middleware" functions that sanitize user input (UserNodeType and UserEdgeType). Put functions that
maintain consistency between previous
*/
import { bottomCb, leftCb, rightCb, topCb } from '../../edges/controllers/anchorCbUser'
import type { UserEdgeType, UserNodeType } from '../../types/types'
/**
* sanitizeUserNodesAndEdges will sanitize the data initially passed in to Svelvet component. For example, the node that user specified have an integar as its id but to instantiate a Node and be compatible with uuid we will need to convert the integar id to a string.
* @param userNodes The array of nodes that have a UserNodeType
* @param userEdges The array of edges that have a UserEdgeType
* @returns An object of sanitized userNodes and userEdges
*/
export function sanitizeUserNodesAndEdges(userNodes: UserNodeType[], userEdges: UserEdgeType[]) {
convertIdToString(userNodes)
convertEdgeIdsToString(userEdges)
convertAnchorPositionsToCallbacks(userNodes, userEdges)
setDefaultEdgeType(userEdges)
return { userNodes, userEdges }
}
/**
* setDefaultEdgeType ensures a default edge type of 'bezier' if the user does not set one, or sets a nonsense type.
* @param userEdges The array of edges that have a UserEdgeType
* @returns No return, the function edits the objects in place
*/
function setDefaultEdgeType(userEdges) {
for (let userEdge of userEdges) {
if (!['smoothstep', 'step', 'bezier', 'straight'].includes(userEdge.type))
userEdge.type = 'bezier'
}
}
/**
* convertAnchorPositionsToCallbacks
* @description
* WHY: This function is in order to maintain compliance with earlier versions of Svelvet.
* HISTORY: In Svelvet<=5, anchor points were hard-coded onto each node. Each node had a "sourcePosition"
* "targetPosition" where the edges would be attached. In Svelvet6, the store was re-designed
* from the ground up into an object-relational data model where anchor points could be attached
* at any point on the node using callbacks. This enabled features such as custom edge position,
* adaptive edge positioning, and dynamic edges.
* The purpose of this function is to parse the old way of specifying edge positions (as two source/target
* anchors on the node) into the Svelvet6 (where anchors are separate objects) in order to maintain a
* consistent user experience. However, we suggest that this functionality (parsing Svelvet5 syntax into
* Svelvet6 syntax) be removed completely in favor of only using Svelvet6 syntax in order to reduce edge cases.
*/
function convertAnchorPositionsToCallbacks(userNodes: UserNodeType[], userEdges: UserEdgeType[]) {
// convert userNodes array into object for constant time lookup by id
const userNodesObj: { [key: string]: UserNodeType } = {}
for (let userNode of userNodes) userNodesObj[userNode.id] = userNode
// iterate through userEdges, and check the source/target nodes.
for (let userEdge of userEdges) {
const userNodeSource = userNodesObj[userEdge.source]
const userNodeTarget = userNodesObj[userEdge.target]
if (!userNodeSource || !userNodeTarget) continue
const sourcePosition = userNodeSource.sourcePosition
const targetPosition = userNodeTarget.targetPosition
const cbs = { left: leftCb, right: rightCb, top: topCb, bottom: bottomCb }
if (sourcePosition) userEdge.sourceAnchorCb = cbs[sourcePosition]
if (targetPosition) userEdge.targetAnchorCb = cbs[targetPosition]
}
}
/**
* Converts node id's to strings. For Svelvet<6, node id's were numbers. These were switched to strings for compatibility with uuid. This function does not return a new array, instead it mutates and sanitizes the original array.
* @param userNodes The array of userNodes (not yet sanitized)
*/
function convertIdToString(userNodes: UserNodeType[]) {
userNodes = userNodes.map((node) => {
node.id = node.id.toString()
node.childNodes =
node.childNodes === undefined ? [] : node.childNodes.map((childId) => childId.toString())
return node
})
}
/**
* Converts source/target node id's to string. For Svelvet<6, id's were numbers. These were switched to strings for compatibility with uuid. This function does not return a new array, instead it mutates and sanitizes the original array.
* @param userEdges The array of userEdges (not yet sanitized)
*/
function convertEdgeIdsToString(userEdges: UserEdgeType[]) {
userEdges = userEdges.map((edge) => {
edge.source = edge.source.toString()
edge.target = edge.target.toString()
return edge
})
}
frontend/src/lib/components/graph/svelvet/container/models/index.ts
View File
frontend/src/lib/components/graph/svelvet/container/views/GraphView.svelte
-304
View File
@@ -1,304 +0,0 @@
<script lang="ts">
import { pointer, select, selectAll } from 'd3-selection'
import { zoom, zoomIdentity, zoomTransform } from 'd3-zoom'
import { createEventDispatcher, getContext, onMount } from 'svelte'
import SimpleBezierEdge from '../../edges/views/Edges/SimpleBezierEdge.svelte'
import SmoothStepEdge from '../../edges/views/Edges/SmoothStepEdge.svelte'
import StepEdge from '../../edges/views/Edges/StepEdge.svelte'
import Node from '../../nodes/views/Node.svelte'
import { determineD3Instance } from '../..//d3/controllers/d3'
import { findStore } from '../../store/models/store'
import { Expand, Minus, Plus } from 'lucide-svelte'
import Toggle from '$lib/components/Toggle.svelte'
import type { FlowCopilotContext } from '$lib/components/copilot/flow'
import { fade } from 'svelte/transition'
//these are typscripted as any, however they have been transformed inside of store.ts
export let canvasId: string
export let width: number
export let height: number
export let boundary = false
export let scroll = false
export let dataflow = false
export let download = false
export let showDataflowToggle: boolean = false
// here we lookup the store using the unique key
const store = findStore(canvasId)
const {
edgesStore,
nodesStore,
nodeSelected,
backgroundStore,
movementStore,
widthStore,
heightStore,
d3Scale
} = store
$: nodes = Object.values($nodesStore)
$: edges = Object.values($edgesStore)
// declaring the grid and dot size for d3's transformations and zoom
const gridSize = 15
const dotSize = 10
const dispatch = createEventDispatcher()
// leveraging d3 library to zoom/pan
let d3 = {
zoom,
zoomTransform,
zoomIdentity,
select,
selectAll,
pointer
}
let d3Zoom = determineD3Instance(
boundary,
d3,
nodeSelected,
width,
height,
movementStore,
backgroundStore,
gridSize,
dotSize,
canvasId,
d3Scale,
handleZoom
)
// d3Translate is used for the minimap
onMount(() => {
// actualizes the d3 instance
const nodes = d3.select(`#zoomable-${canvasId}`).call(d3Zoom).on('dblclick.zoom', null)
if (!scroll) {
;[nodes].forEach((d3Instance) => {
d3Instance
.on('wheel.zoom', null)
.on('mousewheel.zoom', null)
.on('mousemove.zoom', null)
.on('DOMMouseScroll.zoom', null)
})
}
d3.select(`#zoom_in_${canvasId}`).on('click', function () {
try {
// @ts-ignore
d3Zoom.scaleBy(nodes.transition().duration(250), 1.4)
} catch (e) {
console.log('error', e)
}
})
d3.select(`#zoom_out_${canvasId}`).on('click', function () {
try {
// @ts-ignore
d3Zoom.scaleBy(nodes.transition().duration(250), 0.714)
} catch (e) {
console.log('error', e)
}
})
})
function handleZoom(e) {
if (!$movementStore) return
//add a store that contains the current value of the d3-zoom's scale to be used in onMouseMove function
d3Scale.set(e.transform.k)
// transform 'g' SVG elements (edge, edge text, edge anchor)
d3.select(`.Edges-${canvasId} g`).attr('transform', e.transform)
// transform div elements (nodes)
//@ts-ignore
let transform = d3.zoomTransform(this)
store.d3ZoomParameters.set({ ...transform }) // record x,y position of pan, and zoom level
// selects and transforms all node divs from class 'Node' and performs transformation
d3.select(`.Node-${canvasId}`)
.style(
'transform',
'translate(' + transform.x + 'px,' + transform.y + 'px) scale(' + transform.k + ')'
)
.style('transform-origin', '0 0')
}
const { currentStepStore: copilotCurrentStepStore } =
getContext<FlowCopilotContext | undefined>('FlowCopilotContext') || {}
$: {
if ($copilotCurrentStepStore !== undefined) {
// reset zoom
d3.select(`#zoomable-${canvasId}`).call(d3Zoom.transform, d3.zoomIdentity)
}
}
</script>
<div class="zoomable" id={`zoomable-${canvasId}`}>
<!-- This is the container that holds GraphView and we have disabled right click functionality to prevent a sticking behavior -->
<div id="graphview-container">
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div class={`Nodes Nodes-${canvasId}`} on:contextmenu|preventDefault>
<!-- This container is transformed by d3zoom -->
<div class={`Node Node-${canvasId}`}>
{#if $copilotCurrentStepStore !== undefined}
<div transition:fade class="fixed inset-0 bg-gray-500 bg-opacity-75 z-[900] !m-0" />
{/if}
{#each nodes as node}
{#if node.data.html}
<Node {node} {canvasId}>{@html node.data.html}</Node>
{:else if node.data.custom}
<Node isCustom {node} {canvasId}>
<svelte:component
this={node.data.custom.component}
on:new={(e) => node?.data?.custom?.cb?.('new', e.detail)}
on:delete={(e) => node?.data?.custom?.cb?.('delete', e.detail)}
on:select={(e) => node?.data?.custom?.cb?.('select', e.detail)}
on:insert={(e) => node?.data?.custom?.cb?.('insert', e.detail)}
on:newBranch={(e) => node?.data?.custom?.cb?.('newBranch', e.detail)}
on:deleteBranch={(e) => node?.data?.custom?.cb?.('deleteBranch', e.detail)}
on:move={(e) => node?.data?.custom?.cb?.('move', e.detail)}
on:nodeInsert={(e) => node?.data?.custom?.cb?.('nodeInsert', e.detail)}
on:addBranch={(e) => node?.data?.custom?.cb?.('addBranch', e.detail)}
on:removeBranch={(e) => node?.data?.custom?.cb?.('removeBranch', e.detail)}
on:selectedIteration={(e) =>
node?.data?.custom?.cb?.('selectedIteration', e.detail)}
{...node.data.custom.props}
/>
</Node>
{:else}
<Node {node} {canvasId}>{node.data.label}</Node>
{/if}
{/each}
</div>
</div>
</div>
<!-- rendering dots on the background depending on the zoom level -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
<svg
class={`Edges Edges-${canvasId}`}
viewBox="0 0 {$widthStore} {$heightStore}"
on:contextmenu|preventDefault
>
<defs>
<pattern
id={`background-${canvasId}`}
x="0"
y="0"
width={gridSize}
height={gridSize}
patternUnits="userSpaceOnUse"
>
<circle
id="dot"
cx={gridSize / 2 - dotSize / 2}
cy={gridSize / 2 - dotSize / 2}
r="0.5"
style="fill: gray"
/>
</pattern>
</defs>
<!-- <g> tag defines which edge type to render depending on properties of edge object -->
<g>
{#each edges as edge}
{#if edge.type === 'smoothstep'}
<SmoothStepEdge {edge} {canvasId} />
{:else if edge.type === 'step'}
<StepEdge {edge} {canvasId} />
{:else}
<SimpleBezierEdge edgeId={edge.id} {canvasId} />
{/if}
{/each}
<!-- {#each filteredAnchors as anchor} -->
<!-- note that these are SVG -->
<!-- <EdgeAnchor x={anchor.positionX} y={anchor.positionY} /> -->
<!-- {/each} -->
</g>
</svg>
</div>
{#if showDataflowToggle}
<div id="dataflow_toggle">
<Toggle
disabled={$copilotCurrentStepStore !== undefined}
textClass="!text-secondary"
size="xs"
bind:checked={dataflow}
options={{
right: 'dataflow'
}}
/>
</div>
{/if}
<div id="buttons">
<button
title="Zoom In"
id={`zoom_in_${canvasId}`}
class={'relative overflow-hidden ' +
($copilotCurrentStepStore !== undefined
? '!bg-gray-400/20 text-black/20 border-gray-400/20'
: '')}
>
<Plus size="14" class="flex justify-start m-1" />
</button>
<button
title="Zoom Out"
id={`zoom_out_${canvasId}`}
class={'relative overflow-hidden ' +
($copilotCurrentStepStore !== undefined
? '!bg-gray-400/20 text-black/20 border-gray-400/20'
: '')}
>
<Minus size="14" class="flex justify-start m-1" />
</button>
{#if download}
<button on:click={() => dispatch('expand')}>
<Expand size="14" class="flex justify-start m-1" />
</button>
{/if}
</div>
<style>
#dataflow_toggle {
position: absolute;
top: 3px;
left: 8px;
}
#buttons {
position: absolute;
top: 8px;
right: 8px;
z-index: 20;
}
#buttons > button {
border-radius: 4px;
@apply bg-surface;
@apply border;
transition: all;
}
.Nodes {
position: absolute;
width: 100%;
height: 100%;
}
.Node {
color: black; /* remove this once color is set to default via types */
width: 100%;
height: 100%;
}
#graphview-container {
pointer-events: none;
}
.pointer-events-auto {
pointer-events: auto;
}
</style>
frontend/src/lib/components/graph/svelvet/container/views/Svelvet.svelte
-131
View File
@@ -1,131 +0,0 @@
<script lang="ts">
const pkStringGenerator = () => (Math.random() + 1).toString(36).substring(7)
import type { UserEdgeType, UserNodeType } from '../../types/types'
import {
createStoreEmpty,
populateSvelvetStoreFromUserInput
} from '../../store/controllers/storeApi'
import { afterUpdate, onMount } from 'svelte'
import GraphView from './GraphView.svelte'
import { sanitizeUserNodesAndEdges } from '../controllers/middleware'
export let nodes: UserNodeType[]
export let edges: UserEdgeType[]
export let width: number = 600
export let height: number = 600
export let background: boolean = true
export let movement: boolean = true
export let canvasId: string = pkStringGenerator()
export let snap: boolean = false
export let snapTo: number = 30
export let nodeCreate: boolean = false
export let boundary = false
export let locked: boolean = false // if true, node movement is disabled
export let editable: boolean = false
export let highlightEdges: boolean = true
export let scroll: boolean = false
export let download: boolean = false
export let dataflow: boolean = false
export let nodeSelected: boolean = false
// generates a unique string for each svelvet component's unique store instance
// creates a store that uses the unique sting as the key to create and look up the corresponding store
// this way we can have multiple Svelvet Components on the same page and prevent overlap of information
const store = createStoreEmpty(canvasId)
// stores (state) within stores, so that we cannot access values from everywhere
// const { widthStore, heightStore, nodesStore, derivedEdges } = svelvetStore;
let error = ''
// sets the state of the store to the values passed in from the Svelvet Component on initial render
onMount(() => {
try {
// sanitize user input
let output = sanitizeUserNodesAndEdges(nodes, edges)
const userNodes = output['userNodes']
const userEdges = output['userEdges']
// set canvas related stores. you need to do this before setting node/edge related stores because
// initializing nodes/edges might read relevant options from the store.
store.widthStore.set(width)
store.heightStore.set(height)
store.backgroundStore.set(background)
store.movementStore.set(movement)
const optionsObj = { snap, snapTo } // TODO: rename to snap
store.options.set(optionsObj) //
store.nodeCreate.set(nodeCreate)
store.boundary.set(boundary)
store.lockedOption.set(locked)
store.editableOption.set(editable)
store.highlightEdgesOption.set(highlightEdges)
// set node/edge related stores
populateSvelvetStoreFromUserInput(canvasId, userNodes, userEdges)
error = ''
} catch (e) {
error = 'There was an error displaying the flow. Please report the error.' + e.message
console.error(e)
}
})
// // enables data reactivity. TODO: this needs to be added back in
// Probably need to use findStore, not create store
afterUpdate(() => {
try {
// sanitize user input
let output = sanitizeUserNodesAndEdges(nodes, edges)
const userNodes = output['userNodes']
const userEdges = output['userEdges']
// set canvas related stores. you need to do this before setting node/edge related stores because
// initializing nodes/edges might read relevant options from the store.
store.widthStore.set(width)
store.heightStore.set(height)
store.backgroundStore.set(background)
store.movementStore.set(movement)
const optionsObj = { snap, snapTo } // TODO: rename to snap
store.options.set(optionsObj) //
store.nodeCreate.set(nodeCreate)
store.boundary.set(boundary)
store.lockedOption.set(locked)
store.editableOption.set(editable)
store.highlightEdgesOption.set(highlightEdges)
// set node/edge related stores
populateSvelvetStoreFromUserInput(canvasId, userNodes, userEdges)
error = ''
} catch (e) {
error = 'There was an error displaying the flow. Please report the error.' + e.message
console.error(e)
}
})
</script>
<!-- Now that a store has been created from the initial nodes and initial edges we drill props from the store down to the D3 GraphView along with the unique key -->
<div
class="Svelvet bg-surface-secondary"
style={`width: ${width}px; min-height: 100%; height: ${height}px;`}
>
{#if error != ''}
<div class="error text-red-600 center-center p-4">{error}</div>
{:else}
<GraphView
showDataflowToggle={nodeSelected}
bind:dataflow
on:expand
{download}
{scroll}
{canvasId}
{width}
{height}
{boundary}
/>
{/if}
</div>
<style>
.Svelvet {
position: relative;
overflow: hidden;
display: grid;
font-family: 'Segoe UI', sans-serif;
z-index: 1;
}
</style>
frontend/src/lib/components/graph/svelvet/customCss/controllers/getCss.ts
-50
View File
@@ -1,50 +0,0 @@
// Required for "custom css" feature
import type { NodeType, StoreType } from '../../store/types/types'
// WHAT: For a given node with a user-defined classname, see if there are any css properties for height and width
// Get that height and width and set properties in node store. This is necessary for
export const forceCssHeightAndWidth = (store: StoreType, node: NodeType) => {
let width, height, innerText
// Look through each CSS rule to find the one the user defined
for (let i = 0; i < document.styleSheets.length; i++) {
const styleSheet = document.styleSheets[i]
const styleRules = styleSheet.cssRules
for (let j = 0; j < styleRules.length; j++) {
const rule = styleRules[j]
// this is necessary to get rid of typescript warning for rule.selectorText
if (!(rule instanceof CSSStyleRule)) continue
if (rule.selectorText === `.${node.className}`) {
const initialText = rule.cssText // getting the full text of the CSS rule
const i = initialText.indexOf('{') // finding index of first bracket
innerText = initialText.substring(i + 1, initialText.length - 1) // extracting the CSS to insert into inline style
// Adjusting the width and height if they are set via the custom class
const arr = innerText.split(' ')
arr.forEach((str, i) => {
if (str === 'width:') {
width = str.concat(arr[i + 1]) // go through the array and join width and the number
const w = parseInt(arr[i + 1]) // getting the number for the width
width = w
}
if (str === 'height:') {
height = str.concat(arr[i + 1]) // same as with the width
const h = parseInt(arr[i + 1])
height = h
}
})
}
}
}
// update the width/height of the node
store.nodesStore.update((nodes) => {
if (width !== undefined) nodes[node.id].width = width
if (height !== undefined) nodes[node.id].height = height
return { ...nodes }
})
// move the node a bit to force update to anchors, potential anchors
node.setPositionFromMovement(0, 0)
}
frontend/src/lib/components/graph/svelvet/d3/controllers/d3.ts
-91
View File
@@ -1,91 +0,0 @@
// import { zoom, zoomTransform } from 'd3-zoom';
// import { select, selectAll } from 'd3-selection';
import type { ZoomBehavior } from 'd3-zoom';
import { get } from 'svelte/store';
export function zoomInit(
d3,
canvasId,
d3Zoom,
d3Translate,
initialLocation,
initialZoom,
d3Scale
) {
//set default zoom logic
d3.select(`.Edges-${canvasId}`)
//makes sure translation is default at center coordinates
.transition()
.duration(0)
.call(d3Zoom.translateTo, 0, 0)
//moves camera to coordinates
.transition()
.duration(0)
.call(
d3Zoom.translateTo,
initialLocation.x / initialZoom,
initialLocation.y / initialZoom
)
// zooms in on selected point
.transition()
.duration(0)
.call(d3Zoom.scaleTo, initialZoom.toFixed(2));
// updates d3Translate with d3 object with x, y, and k values to be sent down to the minimap to be further calculated further
d3Translate = d3.zoomIdentity
.translate(initialLocation.x, initialLocation.y)
.scale(initialZoom.toFixed(2));
d3.select(`.Nodes-${canvasId}`)
.transition()
.duration(0)
.call(d3Zoom.translateTo, 0, 0)
.transition()
.duration(0)
.call(
d3Zoom.translateTo,
initialLocation.x / initialZoom,
initialLocation.y / initialZoom
)
.transition()
.duration(0)
.call(d3Zoom.scaleTo, initialZoom.toFixed(2));
// sets D3 scale to current k of object
d3Scale.set(d3.zoomTransform(d3.select(`.Nodes-${canvasId}`)).k);
return d3Translate;
}
// create d3 instance conditionally based on boundary prop
export function determineD3Instance(
boundary,
d3: { zoom: () => ZoomBehavior<any, any> },
nodeSelected,
width,
height,
movementStore,
backgroundStore,
gridSize,
dotSize,
canvasId,
d3Scale,
handleZoom
): ZoomBehavior<any, any> {
if (boundary) {
return d3
.zoom()
.filter(() => !get(nodeSelected))
.scaleExtent([0.4, 4]) // limits for zooming in/out
.translateExtent([
[0, 0],
[boundary.x, boundary.y],
]) // world extent
.extent([
[0, 0],
[width, height],
])
.on('zoom', handleZoom);
} else {
return d3
.zoom()
.filter(() => !get(nodeSelected))
.scaleExtent([0.4, 2])
.on('zoom', handleZoom);
}
}
frontend/src/lib/components/graph/svelvet/edges/controllers/anchorCbDev.ts
-119
View File
@@ -1,119 +0,0 @@
import { rightCb, leftCb, topCb, bottomCb } from './anchorCbUser' // these are callbacks used to calculate anchor position relative to node
import type { AnchorCbType } from '../../edges/types/types'
import type { StoreType } from '../../store/types/types'
import { getAnchors } from './util'
import { getNodeById } from '../../nodes/controllers/util'
export function fixedCbCreator(
store: StoreType,
edgeId: string,
anchorId: string,
userNodeId: string,
positionCb: Function // positionCb should be a function that takes 4 arguments (x,y,width,height) and returns a 3-array [x,y,angle] that represents the x,y position of the anchor as well as it's angle with respect to it's node.
) {
const rn = <AnchorCbType>fixedCb
rn.type = 'fixed'
return rn
function fixedCb() {
// get the two anchors
const anchors = getAnchors(store, { edgeId: edgeId })
if (anchors.length !== 2) throw `there should be two anchors per edge, have: ${anchors.length}`
let [anchorSelf, anchorOther] = anchors
if (anchorSelf.id !== anchorId) [anchorSelf, anchorOther] = [anchorOther, anchorSelf]
const node = getNodeById(store, userNodeId)
const { positionX, positionY, width, height } = node
const [x, y, angle] = positionCb(positionX, positionY, width, height)
anchorSelf.positionX = x
anchorSelf.positionY = y
anchorSelf.angle = angle
// update the other anchor if it is a dynamic anchor
// Note dyanamic anchor callbacks have a check that prevents an infinite loop
if (anchorOther.callback.type === 'dynamic') anchorOther.callback()
}
}
export function dynamicCbCreator(store: StoreType, edgeId: string, anchorId: string) {
const rn = <AnchorCbType>dynamicCb
rn.type = 'dynamic'
return rn
function dynamicCb() {
// get the two anchors
const anchors = getAnchors(store, { edgeId: edgeId })
if (anchors.length !== 2) throw `there should be two anchors per edge, have: ${anchors.length}`
let [anchorSelf, anchorOther] = anchors
if (anchorSelf.id !== anchorId) [anchorSelf, anchorOther] = [anchorOther, anchorSelf]
// get the two nodes
const nodeSelf = getNodeById(store, anchorSelf.nodeId)
const nodeOther = getNodeById(store, anchorOther.nodeId)
// get the midpoints
const [xSelf, ySelf, xOther, yOther] = [
nodeSelf.positionX + nodeSelf.width / 2,
nodeSelf.positionY + nodeSelf.height / 2,
nodeOther.positionX + nodeOther.width / 2,
nodeOther.positionY + nodeOther.height / 2
]
// record angle for later. We use this so we don't have an infinite loop
let prevAngle = anchorSelf.angle
// calculate the slope
const slope = (ySelf - yOther) / (xSelf - xOther)
// slope<1 means -45 to 45 degrees so left/right anchors
if (Math.abs(slope) < 1) {
// self node is on the left, other node is on the right
if (nodeSelf.positionX < nodeOther.positionX) {
const [selfX, selfY] = rightCb(
nodeSelf.positionX,
nodeSelf.positionY,
nodeSelf.width,
nodeSelf.height
)
leftCb(nodeOther.positionX, nodeOther.positionY, nodeOther.width, nodeOther.height)
anchorSelf.setPosition(selfX, selfY)
anchorSelf.angle = 0 // if the self node is on the left, the anchor should have orientation of 0 degrees on the unit circle
} else {
// in this case, the self node is on the right and the other node is on the left
const [selfX, selfY] = leftCb(
nodeSelf.positionX,
nodeSelf.positionY,
nodeSelf.width,
nodeSelf.height
)
rightCb(nodeOther.positionX, nodeOther.positionY, nodeOther.width, nodeOther.height)
anchorSelf.setPosition(selfX, selfY)
anchorSelf.angle = 180
}
} else {
if (nodeSelf.positionY < nodeOther.positionY) {
// here the self node is above the other node
const [selfX, selfY] = bottomCb(
nodeSelf.positionX,
nodeSelf.positionY,
nodeSelf.width,
nodeSelf.height
)
topCb(nodeOther.positionX, nodeOther.positionY, nodeOther.width, nodeOther.height)
anchorSelf.setPosition(selfX, selfY)
anchorSelf.angle = 270
} else {
const [selfX, selfY] = topCb(
nodeSelf.positionX,
nodeSelf.positionY,
nodeSelf.width,
nodeSelf.height
)
bottomCb(nodeOther.positionX, nodeOther.positionY, nodeOther.width, nodeOther.height)
anchorSelf.setPosition(selfX, selfY)
anchorSelf.angle = 90
}
}
// if the anchor changed position, then do operation for other anchor
// otherwise, don't do anything. This check is so we don't have an infinite loop
if (prevAngle !== anchorSelf.angle) anchorOther.callback()
}
}
frontend/src/lib/components/graph/svelvet/edges/controllers/anchorCbUser.ts
-98
View File
@@ -1,98 +0,0 @@
/**
* These are callbacks used to define anchor positions relative to the node they are attached to.
* These may be provided to developers as examples of how to write their own custom callbacks for adjustable anchors
* It calculates the position of an anchor (x,y) coordinates given a node parameterized by (x,y,width, height)
*/
/**
* @function rightCb - This is a callback function to define the anchor position on the node to be on the right side of the node.
* @param xNode - positionX of the attached node
* @param yNode - positionY of the attached node
* @param widthNode - width of the attached node
* @param heightNode - height of the attached node
* @returns [xAnchor, yAnchor, 0]
* xAnchor - positionX for the anchor
* yAnchor - positionY for the anchor
* 0 - this is angle of the anchor with respect to the node. The right anchor should fall at 0 degrees on the unit circle.
* @export rightCb
*/
export const rightCb = (
xNode: number,
yNode: number,
widthNode: number,
heightNode: number
) => {
const xAnchor = xNode + widthNode;
const yAnchor = yNode + heightNode / 2;
return [xAnchor, yAnchor, 0];
};
/**
* @function leftCb - This is a callback function to define the anchor position on the node to be on the left side of the node.
* @param xNode - positionX of the attached node
* @param yNode - positionY of the attached node
* @param widthNode - width of the attached node
* @param heightNode - height of the attached node
* @returns [xAnchor, yAnchor, 180]
* xAnchor - positionX for the anchor
* yAnchor - positionY for the anchor
* 180 - this is angle of the anchor with respect to the node. The left anchor should fall at 180 degrees on the unit circle.
* @export leftCb
*/
export const leftCb = (
xNode: number,
yNode: number,
widthNode: number,
heightNode: number
) => {
const xAnchor = xNode;
const yAnchor = yNode + heightNode / 2;
return [xAnchor, yAnchor, 180];
};
/**
* @function topCb - This is a callback function to define the anchor position on the node to be on the top of the node.
* @param xNode - positionX of the attached node
* @param yNode - positionY of the attached node
* @param widthNode - width of the attached node
* @param heightNode - height of the attached node
* @returns [xAnchor, yAnchor, 90]
* xAnchor - positionX for the anchor
* yAnchor - positionY for the anchor
* 90 - this is angle of the anchor with respect to the node. The top anchor should fall at 90 degrees on the unit circle.
* @export topCb
*/
export const topCb = (
xNode: number,
yNode: number,
widthNode: number,
heightNode: number
) => {
const xAnchor = xNode + widthNode / 2;
const yAnchor = yNode;
return [xAnchor, yAnchor, 90];
};
/**
* @function bottomCb - This is a callback function to define the anchor position on the node to be on the bottom of the node.
* @param xNode - positionX of the attached node
* @param yNode - positionY of the attached node
* @param widthNode - width of the attached node
* @param heightNode - height of the attached node
* @returns - [xAnchor, yAnchor, 90]
* xAnchor - positionX for the anchor
* yAnchor - positionY for the anchor
* 270 - this is angle of the anchor with respect to the node. The bottom anchor should fall at 270 degrees on the unit circle.
* @export bottomCb
*/
export const bottomCb = (
xNode: number,
yNode: number,
widthNode: number,
heightNode: number
) => {
const xAnchor = xNode + widthNode / 2;
const yAnchor = yNode + heightNode;
return [xAnchor, yAnchor, 270];
};
frontend/src/lib/components/graph/svelvet/edges/controllers/util.ts
-78
View File
@@ -1,78 +0,0 @@
import type { StoreType } from '../../store/types/types'
import { get } from 'svelte/store'
import type { AnchorType } from '../types/types'
/**
* Finds all Anchors that matches the conditions specified in the filter parameter from a Svelvet store and returns these Anchors in an array.
*
* @param store The Svelvet store containing the state of a Svelvet component
* @param filter An object to specify conditions. Example: if filter = \{ sourceOrTarget: 'source', positionX: 35 \} then we will return all anchors with sourceOrTarget = source AND poxitionX = 35
* @returns An array of Anchors that matches the conditions specified in the filter parameter
*/
export function getAnchors(store: StoreType, filter?: { [key: string]: any }) {
let anchors = Object.values(get(store.anchorsStore))
// filter the array of anchors for elements that match filter
// Example: if filter = {sourceOrTarget: 'source', positionX: 35} then we will
//return all anchors with sourceOrTarget = source AND poxitionX = 35
if (filter !== undefined) {
anchors = anchors.filter((anchor) => {
for (let filterKey in filter) {
const filterValue = filter[filterKey]
if (anchor[filterKey as keyof AnchorType] !== filterValue) return false
}
return true
})
}
// return list of anchors
return anchors
}
/**
* Gets one anchor (source anchor or target anchor) from a given edge
*
* @param store The Svelvet store containing the state of the Svelvet component
* @param edgeId The id of a given edge
* @param sourceOrTarget A string of 'source' or 'target' to specify which anchor the function should return
* @returns The source or target Anchor object of a given edge
*/
export function getAnchorFromEdge(
store: StoreType,
edgeId: string,
sourceOrTarget: 'source' | 'target'
): AnchorType {
getEdgeById(store, edgeId)
const anchors = getAnchors(store, { edgeId: edgeId })
if (anchors.length !== 2)
throw `there should be two anchors for a given edge, there are ${anchors.length}`
// there should be one source anchor and one target anchor. Return the source anchor
const anchor = anchors.filter((anchor) => anchor.sourceOrTarget === sourceOrTarget)
if (anchor.length !== 1) throw `there should only be one source/target anchor`
return anchor[0]
}
/**
* getEdgeById will look for the targeted Edge that has the same id provided in the Svelvet component store.
*
* @param store The Svelvet store containing the state of a Svelvet component
* @param id The id of the targeted Node
* @returns The targeted Edge object in store.edgesStore
*/
export function getEdgeById(store: StoreType, id: string) {
const edgesStore = get(store.edgesStore)
const edge = edgesStore[id]
if (edge === undefined) throw 'edge not found'
return edge
}
/**
* getAnchorById will look for the targeted Anchor that has the same id in the Svelvet component store.
*
* @param store The Svelvet store containing the state of a Svelvet component
* @param id The id of the targeted Anchor
* @returns The target Anchor object in store.anchorsStore
*/
export function getAnchorById(store: StoreType, id: string) {
const anchorsStore = get(store.anchorsStore)
const anchor = anchorsStore[id]
return anchor
}
frontend/src/lib/components/graph/svelvet/edges/models/Anchor.ts
-119
View File
@@ -1,119 +0,0 @@
/**
* This is where we create, update the Anchor store.
*/
import type { AnchorCbType, AnchorType } from '../../edges/types/types';
import { stores } from '../../store/models/store';
import { getAnchors } from '../controllers/util';
/** Class representing an Anchor that implements Anchortype.
* @param {string} id The id of the Anchor
* @param {string} nodeId The id of the Node which the instantiated Anchor will be attached to
* @param {string} edgeId The id of the Edge which connects to the instantiated Anchor
* @param {'source' | 'target'} sourceOrTarget Specify the Anchor is a source or target
* @param {number} positionX The 'X' coordinate of the Anchor
* @param {number} positionY The 'Y' coordinate of the Anchor
* @param {function} callback The callback function that will determine the position of this Anchor
* @param {string} canvasId The canvasId of the Svelvet component that will hold this Anchor
* @param { number } angle This is the orientation of the anchor and is used to make sure bezier/step curves are rendered perpendicular to the node. Angles are defined along the unit circle. EX: 0 = right side of node, 180 = left side of node.
*/
export class Anchor implements AnchorType {
constructor(
public id: string,
public nodeId: string,
public edgeId: string,
public sourceOrTarget: 'source' | 'target',
public positionX: number,
public positionY: number,
public callback: AnchorCbType,
public canvasId: string,
public angle: 0 | 90 | 180 | 270
) {}
getOtherAnchorId() {
const store = stores[this.canvasId];
const anchors = getAnchors(store, { edgeId: this.edgeId });
if (anchors.length !== 2)
throw 'something is wrong, every anchor should have exactly one other associated anchor';
const anchor = anchors.filter((anchor) => anchor.id !== this.id)[0];
return anchor.id;
}
/**
* setPositionFromNode will invoke the user-defined callback to calculate the position of the Anchor, set the position of the Anchor in the anchorsStore, and also update the Edge position accordingly.
*/
setPositionFromNode() {
// calculate the new position of the anchor using user-defined callback
this.callback();
const { edgesStore } = stores[this.canvasId];
// update edges
edgesStore.update((edges) => {
const edge = edges[this.edgeId];
if (this.sourceOrTarget === 'source') {
edge.sourceX = this.positionX;
edge.sourceY = this.positionY;
} else {
edge.targetX = this.positionX;
edge.targetY = this.positionY;
}
return { ...edges };
});
}
/**
* updateEdges will update the edgesStore based on Anchor's change.
*/
updateEdges() {
const { edgesStore } = stores[this.canvasId];
/** update edges by deconstructing edges store and setting its new vlue to stores[this.canvasID] */
edgesStore.update((edges) => {
const edge = edges[this.edgeId];
// this means that no edge was found, just return without doing anything
if (edge === undefined) {
return { ...edges };
}
if (this.sourceOrTarget === 'source') {
edge.sourceX = this.positionX;
edge.sourceY = this.positionY;
} else {
edge.targetX = this.positionX;
edge.targetY = this.positionY;
}
return { ...edges };
});
}
/**
* setPosition will update the positionX and positionY of the Anchor and also cascade changes to related Edge.
* @param x The X coordinate of the new position for the Anchor
* @param y The Y coordinate of the new position for the Anchor
*/
setPosition(x: number, y: number) {
this.positionX = x;
this.positionY = y;
this.updateEdges();
}
/**
* Anchor.setPositionFromMovement works similarly to Anchor.setPosition. But setPosition is more powerful and we recommend using setPosition whenever possible and in the future, setPositionFromMovement can be removed.
* @param movementX The mouse movement value on the X-axis
* @param movementY The mouse movement value on the Y-axis
*/
setPositionFromMovement(movementX: number, movementY: number) {
this.positionX += movementX;
this.positionY += movementY;
const { edgesStore } = stores[this.canvasId];
edgesStore.update((edges) => {
const edge = edges[this.edgeId];
if (this.sourceOrTarget === 'source') {
edge.sourceX += movementX;
edge.sourceY += movementY;
} else {
edge.targetX += movementX;
edge.targetY += movementY;
}
return { ...edges };
});
}
}
frontend/src/lib/components/graph/svelvet/edges/models/Edge.ts
-95
View File
@@ -1,95 +0,0 @@
import { findStore } from '../../store/models/store'
import type { UserEdgeType } from '../../types/types'
import type { EdgeType } from '../../store/types/types'
import { stores } from '../../store/models/store'
import { getAnchors, getAnchorFromEdge } from '../../edges/controllers/util'
/**
* Class Edge that implements EdgeType.
* @param id The id of the Edge
* @param sourceX The X coordinate of the source Anchor
* @param sourceY The Y coordinate of the source Anchor
* @param targetX The X coordinate of the target Anchor
* @param targetY The Y coordinate of the target Anchor
* @param canvasId The canvasId of the Svelvet component that holds the instantiated Edge
* @param label The label of the Edge
* @param type The type of the Edge (options: 'straight', 'smoothstep', 'step', or 'bezier'). If user doesn't specify, the type will default to 'bezier'.
* @param labelBgColor The background color of the Edge label
* @param labelTextColor The text color of the Edge label
* @param edgeColor The color of the Edge
* @param animate Boolean value to specify whether the Edge should be animated
* @param noHandle Boolean value but looks like it is already depracated and can be removed without damage
* @param arraw Boolean value to specify whether the Edge displays an arrow near its target Anchor
*/
export class Edge implements EdgeType {
constructor(
public id: string,
public sourceX: number,
public sourceY: number,
public targetX: number,
public targetY: number,
public canvasId: string,
public label: string,
public type: 'straight' | 'smoothstep' | 'step' | 'bezier',
public labelBgColor: string,
public labelTextColor: string,
public edgeColor: string,
public animate: boolean,
public noHandle: boolean,
public arrow: boolean,
public clickCallback: Function,
public className: string,
public offset?: number
) {}
/**
* delete is going to delete the Edge and also delete associated Anchors
*/
delete() {
const store = stores[this.canvasId]
const { anchorsStore, edgesStore } = store
const sourceAnchor = getAnchorFromEdge(store, this.id, 'source') // this is a bit wasteful
const targetAnchor = getAnchorFromEdge(store, this.id, 'target')
anchorsStore.update((anchors) => {
for (const anchorId in anchors) {
if (anchorId === sourceAnchor.id || anchorId == targetAnchor.id) delete anchors[anchorId]
}
return { ...anchors }
})
edgesStore.update((edges) => {
delete edges[this.id]
return { ...edges }
})
}
/**
* setExportableData will construct an object that holds all the edge data that can be exported. This is needed for the Exporting Diagram feature.
* @returns The object of exportable edge data. The format of the object should be as close as what user initially passes in to Svelvet.
*/
setExportableData() {
const exportableData: UserEdgeType = {
id: this.id,
label: this.label,
type: this.type,
labelBgColor: this.labelBgColor,
labelTextColor: this.labelTextColor,
edgeColor: this.edgeColor,
animate: this.animate,
noHandle: this.noHandle,
arrow: this.arrow,
source: 'dummy', // these will be set later
target: 'dummy' // these will be set later
}
// set source, target on exportableData
const store = findStore(this.canvasId)
const anchors = getAnchors(store, { edgeId: this.id })
if (anchors.length !== 2) throw 'there should be two anchors per edge'
for (const anchor of anchors) {
if (anchor.sourceOrTarget === 'target') exportableData.target = anchor.nodeId
if (anchor.sourceOrTarget === 'source') exportableData.source = anchor.nodeId
}
return exportableData
}
}
frontend/src/lib/components/graph/svelvet/edges/types/types.ts
-19
View File
@@ -1,19 +0,0 @@
export type AnchorCbType = {
(): void;
type: 'dynamic' | 'fixed';
};
export interface AnchorType {
id: string; // note that the user never specifies an anchor and they are generated dynamically. id will be a random string.
nodeId: string;
edgeId: string;
sourceOrTarget: 'source' | 'target';
positionX: number;
positionY: number;
callback: AnchorCbType; // callback is used to calculate positionX, positionY based on parent node's data, and set the anchor position // TODO: rename to something better
angle: number;
setPositionFromNode: Function;
setPosition: Function;
updateEdges: Function;
getOtherAnchorId: Function;
}
frontend/src/lib/components/graph/svelvet/edges/views/Edges/BaseEdge.svelte
-108
View File
@@ -1,108 +0,0 @@
<script lang="ts">
import { findStore } from '../../../store/models/store'
import { getEdgeById } from '../../../edges/controllers/util'
import EdgeText from '../Edges/EdgeText.svelte'
import { get } from 'svelte/store'
import type { EdgeProps } from '../Edges/types'
export let baseEdgeProps: EdgeProps
export let canvasId
// destructuring the props passed in from the parent component
$: ({ path, animate, arrow, label, labelBgColor, labelTextColor, edgeColor, centerX, centerY } =
baseEdgeProps)
// setting edge text props
$: edgeTextProps = {
label: label,
labelBgColor: labelBgColor,
labelTextColor: labelTextColor,
centerX: centerX,
centerY: centerY
}
// Click event handlers
// At some point in the future, it would be good to refactor event handling to use the flux architecture
// ie, events will create an action that will be dispatched to some centralized reducer.
// or in other words, the creators of Redux knew what they were doing.
// The advantage of this re-design would be greater modularity; views would be agnostic to the exact features implmemented,
// and they would be only responsible to detecting events and dispatch actions.
const edgeId = baseEdgeProps.id
const store = findStore(canvasId)
const edge = getEdgeById(store, edgeId)
const highlightEdgesOption = get(store.highlightEdgesOption)
const handleRightClick = () => {
const store = findStore(canvasId)
const { editableOption } = store
// handles edgeEdit feature
if (get(editableOption)) store.edgeEditModal.set(edgeId)
}
const handleClick = () => {
const store = findStore(canvasId)
const edge = getEdgeById(store, edgeId)
// handles edge clickCallback feature
if (edge.clickCallback) edge.clickCallback(edge)
}
const defaultArrow = `0 0, 9 4.5, 0 9`
</script>
<defs>
<marker id="arrow" markerWidth="9" markerHeight="9" refX="8" refY="4" orient="auto">
<polygon points={defaultArrow} fill="gray" />
</marker>
</defs>
<!-- This is an invisible edge that is used to implement event events, because the visible edge is thin and hard to click on. It
highlights on hover -->
{#if highlightEdgesOption}
<path
id={`edgeSelector`}
d={path}
fill="transparent"
stroke={'red'}
stroke-opacity="0"
stroke-width="10"
on:contextmenu={handleRightClick}
on:click={handleClick}
on:keypress={() => {}}
/>
{/if}
{#if arrow}
<path
class={animate ? `animate ${edge.className}` : `${edge.className}`}
d={path}
fill="transparent"
stroke={edgeColor ? edgeColor : 'gray'}
marker-end="url(#arrow)"
aria-label="svg-path"
/>
{:else}
<path
class={animate ? `animate ${edge.className}` : `${edge.className}`}
d={path}
fill="transparent"
stroke={edgeColor ? edgeColor : 'gray'}
aria-label="svg-path"
/>
{/if}
{#if edgeTextProps.label}
<EdgeText {edgeTextProps} />
{/if}
<style>
.animate {
stroke-dasharray: 5;
animation: dash 50000s linear;
}
@keyframes dash {
from {
stroke-dashoffset: 1000000;
}
}
#edgeSelector:hover {
stroke: 'red';
stroke-opacity: 0.5;
}
</style>
frontend/src/lib/components/graph/svelvet/edges/views/Edges/EdgeText.svelte
-48
View File
@@ -1,48 +0,0 @@
<script lang="ts">
import type { EdgeTextProps } from './types'
// destructuring props to pass into BaseEdge component
export let edgeTextProps: EdgeTextProps
$: ({ label, labelBgColor, labelTextColor, centerX, centerY } = edgeTextProps)
const shiftRectY: number = 7
$: pxRatio = label.length < 3 ? 9 : 7
// determine the center point of the edge to be used in the EdgeText component
$: textCenterX = centerX
$: textCenterY = centerY
// determine width of rect to render based on label.length (removing spaces)
// pxRatio is an estimate of how many pixels 1 character might take up
// pxRatio not 100% accurate as font is not monospace
$: spaces = label.split(' ').length - 1
$: newLength = label.length - spaces
$: labelPx = newLength * pxRatio
</script>
{#if typeof label === 'undefined' || !label}
{null}
{:else}
<g>
<rect
class="EdgeTextBg"
data-testid="edge-text-bg"
fill={labelBgColor ? labelBgColor : 'white'}
x={textCenterX - labelPx / 2}
y={textCenterY - shiftRectY}
width={labelPx}
height={16}
/>
<text
class="EdgeText"
x={textCenterX}
y={textCenterY}
font-size="12px"
dominant-baseline="central"
text-anchor="middle"
fill={labelTextColor ? labelTextColor : 'black'}
>
{label}
</text>
</g>
{/if}
frontend/src/lib/components/graph/svelvet/edges/views/Edges/SimpleBezierEdge.svelte
-175
View File
@@ -1,175 +0,0 @@
<script lang="ts">
import BaseEdge from './BaseEdge.svelte'
const Position = { Left: 'left', Right: 'right', Top: 'top', Bottom: 'bottom' }
import { findStore } from '../../../store/models/store'
import { getAnchorFromEdge } from '../../../edges/controllers/util'
function calculateControlOffset(distance, curvature) {
if (distance >= 0) {
return 0.9 * distance
} else {
return curvature * 25 * Math.sqrt(-distance)
}
}
// get the control point for the bezier curve (in the middle of the edge)
function getControlWithCurvature({ pos, x1, y1, x2, y2, c }) {
let ctX, ctY
switch (pos) {
case Position.Left:
{
ctX = x1 - calculateControlOffset(x1 - x2, c)
ctY = y1
}
break
case Position.Right:
{
ctX = x1 + calculateControlOffset(x2 - x1, c)
ctY = y1
}
break
case Position.Top:
{
ctX = x1
ctY = y1 - calculateControlOffset(y1 - y2, c)
}
break
case Position.Bottom:
{
ctX = x1
ctY = y1 + calculateControlOffset(y2 - y1, c)
}
break
}
return [ctX, ctY]
}
// returns string to pass into edge 'path' svg d attribute (where to be drawn)
// referenced from ReactFlow.dev
function getSimpleBezierPath({
sourceX,
sourceY,
sourcePosition = Position.Bottom,
targetX,
targetY,
targetPosition = Position.Top,
curvature = 0.25
}) {
const [sourceControlX, sourceControlY] = getControlWithCurvature({
pos: sourcePosition,
x1: sourceX,
y1: sourceY,
x2: targetX,
y2: targetY,
c: curvature
})
const [targetControlX, targetControlY] = getControlWithCurvature({
pos: targetPosition,
x1: targetX,
y1: targetY,
x2: sourceX,
y2: sourceY,
c: curvature
})
return `M${sourceX},${sourceY} C${sourceControlX},${sourceControlY} ${targetControlX},${targetControlY} ${targetX},${targetY}`
}
// returns string to pass into edge 'path' svg d attribute for the straight line
function getStraightLinePath({ sourceX, sourceY, targetX, targetY }) {
return `M${sourceX},${sourceY} L${sourceX},${targetY - 50}`
}
// determining center of the bezier curve to know where to place the bezier edge text label
function getSimpleBezierCenter({
sourceX,
sourceY,
sourcePosition = Position.Bottom,
targetX,
targetY,
targetPosition = Position.Top,
curvature = 0.25
}) {
const [sourceControlX, sourceControlY] = getControlWithCurvature({
pos: sourcePosition,
x1: sourceX,
y1: sourceY,
x2: targetX,
y2: targetY,
c: curvature
})
const [targetControlX, targetControlY] = getControlWithCurvature({
pos: targetPosition,
x1: targetX,
y1: targetY,
x2: sourceX,
y2: sourceY,
c: curvature
})
// cubic bezier t=0.5 mid point, not the actual mid point, but easy to calculate
// https://stackoverflow.com/questions/67516101/how-to-find-distance-mid-point-of-bezier-curve
const centerX =
sourceX * 0.125 + sourceControlX * 0.375 + targetControlX * 0.375 + targetX * 0.125
const centerY =
sourceY * 0.125 + sourceControlY * 0.375 + targetControlY * 0.375 + targetY * 0.125
const xOffset = Math.abs(centerX - sourceX)
const yOffset = Math.abs(centerY - sourceY)
return [centerX, centerY, xOffset, yOffset]
}
export let canvasId: string
export let edgeId: string
const store = findStore(canvasId)
const { edgesStore } = store
let edge
$: edge = $edgesStore[edgeId]
let bezierParams, lineParams
$: {
const store = findStore(canvasId)
const sourceAnchor = getAnchorFromEdge(store, edge.id, 'source')
const targetAnchor = getAnchorFromEdge(store, edge.id, 'target')
const mapAngle = { 0: 'right', 90: 'top', 180: 'left', 270: 'bottom' }
if (edge.targetY - edge.sourceY > 100) {
bezierParams = {
sourceX: edge.sourceX + (edge.offset ?? 0),
sourceY: edge.targetY - 100,
sourcePosition: mapAngle[sourceAnchor.angle],
targetX: edge.targetX + (edge.offset ?? 0),
targetY: edge.targetY,
targetPosition: mapAngle[targetAnchor.angle],
curvature: 0.25
}
lineParams = {
sourceX: edge.sourceX + (edge.offset ?? 0),
sourceY: edge.sourceY,
targetX: edge.targetX + (edge.offset ?? 0),
targetY: edge.targetY - 50
}
} else {
bezierParams = {
sourceX: edge.sourceX + (edge.offset ?? 0),
sourceY: edge.sourceY,
sourcePosition: mapAngle[sourceAnchor.angle],
targetX: edge.targetX + (edge.offset ?? 0),
targetY: edge.targetY,
targetPosition: mapAngle[targetAnchor.angle],
curvature: 0.25
}
lineParams = {}
}
}
// pass in params to function that returns a string value for SVG path d attribute (where to be drawn)
$: bezierPath = getSimpleBezierPath(bezierParams)
$: linePath = lineParams ? getStraightLinePath(lineParams) : ''
$: [bezierCenterX, bezierCenterY] = getSimpleBezierCenter(bezierParams)
// pass necessary values to BaseEdge component
// BaseEdge renders a 'base' path that can be customized by parent Edge components
$: baseEdgeProps = {
...edge,
path: `${bezierPath} ${linePath}`,
centerX: bezierCenterX,
centerY: bezierCenterY
}
</script>
<BaseEdge {baseEdgeProps} {canvasId} />
frontend/src/lib/components/graph/svelvet/edges/views/Edges/SmoothStepEdge.svelte
-157
View File
@@ -1,157 +0,0 @@
<script>
import BaseEdge from './BaseEdge.svelte'
import { getCenter } from './utils'
const Position = {}
Position['Left'] = 'left'
Position['Right'] = 'right'
Position['Top'] = 'top'
Position['Bottom'] = 'bottom'
// These are some helper methods for drawing the round corners
// The name indicates the direction of the path. "bottomLeftCorner" goes
// from bottom to the left and "leftBottomCorner" goes from left to the bottom.
// We have to consider the direction of the paths because of the animated lines.
const bottomLeftCorner = (x, y, size) => `L ${x},${y - size}Q ${x},${y} ${x + size},${y}`
const leftBottomCorner = (x, y, size) => `L ${x + size},${y}Q ${x},${y} ${x},${y - size}`
const bottomRightCorner = (x, y, size) => `L ${x},${y - size}Q ${x},${y} ${x - size},${y}`
const rightBottomCorner = (x, y, size) => `L ${x - size},${y}Q ${x},${y} ${x},${y - size}`
const leftTopCorner = (x, y, size) => `L ${x + size},${y}Q ${x},${y} ${x},${y + size}`
const topLeftCorner = (x, y, size) => `L ${x},${y + size}Q ${x},${y} ${x + size},${y}`
const topRightCorner = (x, y, size) => `L ${x},${y + size}Q ${x},${y} ${x - size},${y}`
const rightTopCorner = (x, y, size) => `L ${x - size},${y}Q ${x},${y} ${x},${y + size}`
// returns string to pass into edge 'path' svg d attribute (where to be drawn)
export function getSmoothStepPath({
sourceX,
sourceY,
sourcePosition = Position.Bottom,
targetX,
targetY,
targetPosition = Position.Top,
borderRadius = 5,
centerX,
centerY
}) {
const [_centerX, _centerY, offsetX, offsetY] = getCenter({
sourceX,
sourceY,
targetX,
targetY
})
const cornerWidth = Math.min(borderRadius, Math.abs(targetX - sourceX))
const cornerHeight = Math.min(borderRadius, Math.abs(targetY - sourceY))
const cornerSize = Math.min(cornerWidth, cornerHeight, offsetX, offsetY)
const leftAndRight = [Position.Left, Position.Right]
const cX = typeof centerX !== 'undefined' ? centerX : _centerX
const cY = typeof centerY !== 'undefined' ? centerY : _centerY
let firstCornerPath = null
let secondCornerPath = null
// for non-mixed edge top/bottom
if (sourceX <= targetX) {
firstCornerPath =
sourceY <= targetY
? bottomLeftCorner(sourceX, cY, cornerSize)
: topLeftCorner(sourceX, cY, cornerSize)
secondCornerPath =
sourceY <= targetY
? rightTopCorner(targetX, cY, cornerSize)
: rightBottomCorner(targetX, cY, cornerSize)
} else {
firstCornerPath =
sourceY < targetY
? bottomRightCorner(sourceX, cY, cornerSize)
: topRightCorner(sourceX, cY, cornerSize)
secondCornerPath =
sourceY < targetY
? leftTopCorner(targetX, cY, cornerSize)
: leftBottomCorner(targetX, cY, cornerSize)
}
// for non-mixed edge left/right
if (leftAndRight.includes(sourcePosition) && leftAndRight.includes(targetPosition)) {
if (sourceX <= targetX) {
firstCornerPath =
sourceY <= targetY
? rightTopCorner(cX, sourceY, cornerSize)
: rightBottomCorner(cX, sourceY, cornerSize)
secondCornerPath =
sourceY <= targetY
? bottomLeftCorner(cX, targetY, cornerSize)
: topLeftCorner(cX, targetY, cornerSize)
} else if (
(sourcePosition === Position.Right && targetPosition === Position.Left) ||
(sourcePosition === Position.Left && targetPosition === Position.Right) ||
(sourcePosition === Position.Left && targetPosition === Position.Left)
) {
// and sourceX > targetX
firstCornerPath =
sourceY <= targetY
? leftTopCorner(cX, sourceY, cornerSize)
: leftBottomCorner(cX, sourceY, cornerSize)
secondCornerPath =
sourceY <= targetY
? bottomRightCorner(cX, targetY, cornerSize)
: topRightCorner(cX, targetY, cornerSize)
}
// for mixed edges (top/bottom to left/right) OR (left/right to top/bottom)
} else if (leftAndRight.includes(sourcePosition) && !leftAndRight.includes(targetPosition)) {
if (sourceX <= targetX) {
firstCornerPath =
sourceY <= targetY
? rightTopCorner(targetX, sourceY, cornerSize)
: rightBottomCorner(targetX, sourceY, cornerSize)
} else {
firstCornerPath =
sourceY <= targetY
? leftTopCorner(targetX, sourceY, cornerSize)
: leftBottomCorner(targetX, sourceY, cornerSize)
}
secondCornerPath = ''
} else if (!leftAndRight.includes(sourcePosition) && leftAndRight.includes(targetPosition)) {
if (sourceX <= targetX) {
firstCornerPath =
sourceY <= targetY
? bottomLeftCorner(sourceX, targetY, cornerSize)
: topLeftCorner(sourceX, targetY, cornerSize)
} else {
firstCornerPath =
sourceY <= targetY
? bottomRightCorner(sourceX, targetY, cornerSize)
: topRightCorner(sourceX, targetY, cornerSize)
}
secondCornerPath = ''
}
return `M ${sourceX},${sourceY}${firstCornerPath}${secondCornerPath}L ${targetX},${targetY}`
}
export let edge
export let borderRadius = 5
export let canvasId
import { findStore } from '../../../store/models/store'
import { getAnchorFromEdge } from '../../../edges/controllers/util'
let params
$: {
const store = findStore(canvasId)
const sourceAnchor = getAnchorFromEdge(store, edge.id, 'source')
const targetAnchor = getAnchorFromEdge(store, edge.id, 'target')
const mapAngle = { 0: 'right', 90: 'top', 180: 'left', 270: 'bottom' }
params = {
sourceX: edge.sourceX,
sourceY: edge.sourceY,
targetX: edge.targetX,
targetY: edge.targetY,
sourcePosition: mapAngle[sourceAnchor.angle],
targetPosition: mapAngle[targetAnchor.angle],
borderRadius: borderRadius
}
}
$: [centerX, centerY] = getCenter(params)
$: path = getSmoothStepPath(params)
$: baseEdgeProps = {
...edge,
path: path,
centerX: centerX,
centerY: centerY
}
</script>
<BaseEdge {baseEdgeProps} {canvasId} />
frontend/src/lib/components/graph/svelvet/edges/views/Edges/StepEdge.svelte
-8
View File
@@ -1,8 +0,0 @@
<script>
import SmoothStepEdge from './SmoothStepEdge.svelte';
export let edge;
export let canvasId;
</script>
<!-- Utilizes the SmoothStepEdge Component and sets borderRadius to zero to give a sharp edge -->
<SmoothStepEdge {edge} borderRadius={0} {canvasId} />
frontend/src/lib/components/graph/svelvet/edges/views/Edges/types.ts
-58
View File
@@ -1,58 +0,0 @@
import type { XYPosition, Position } from './utils';
export interface Node<T = any> {
id: number;
position: XYPosition;
data: T;
width: number;
height: number;
bgColor?: string;
fontSize?: number;
borderColor?: string;
borderRadius?: number;
textColor?: string;
clickCallback?: Function;
image?: boolean;
src?: string;
sourcePosition?: 'left' | 'right' | 'top' | 'bottom';
targetPosition?: 'left' | 'right' | 'top' | 'bottom';
}
export interface Edge {
id: string;
source: number;
target: number;
label?: string;
labelBgColor?: string;
labelTextColor?: string;
edgeColor?: string;
type?: string;
animate?: boolean;
noHandle?: boolean;
arrow?: boolean;
}
export interface DerivedEdge extends Edge {
sourceX: number;
sourceY: number;
sourcePosition: Position;
targetX: number;
targetY: number;
targetPosition: Position;
}
export interface EdgeProps extends DerivedEdge {
path: string;
centerX: number;
centerY: number;
}
export interface EdgeTextProps {
label?: any;
labelBgColor?: string;
labelTextColor?: string;
centerX: number;
centerY: number;
}
export type HandleType = 'source' | 'target';
frontend/src/lib/components/graph/svelvet/edges/views/Edges/utils.ts
-84
View File
@@ -1,84 +0,0 @@
// enumerable values (static) set for Position
export enum Position {
Left = 'left',
Right = 'right',
Top = 'top',
Bottom = 'bottom',
}
// interface for XYPosition to use in nodes and edges
export interface XYPosition {
x: number;
y: number;
}
// type for z axis positioning with D3
export type XYZPosition = XYPosition & { z: number };
// interface for changing dimensions of Viewport
export interface Dimensions {
width: number;
height: number;
}
// interface of Rect divs in zoompane
export interface Rect extends Dimensions, XYPosition {}
// interface of Box using XYPosition of nodes
export interface Box extends XYPosition {
x2: number;
y2: number;
}
// D3 type array for Transform
export type Transform = [number, number, number];
//
// export type CoordinateExtent = [[number, number], [number, number]];
export interface GetCenterParams {
sourceX: number;
sourceY: number;
targetX: number;
targetY: number;
sourcePosition?: Position;
targetPosition?: Position;
}
//needed for getCenter funciotn
const LeftOrRight = [Position.Left, Position.Right];
//used to determine the position for edge text on a Smooth or Step Edge
export const getCenter = ({
sourceX,
sourceY,
targetX,
targetY,
sourcePosition = Position.Bottom,
targetPosition = Position.Top,
}: GetCenterParams): [number, number, number, number] => {
const sourceIsLeftOrRight = LeftOrRight.includes(sourcePosition);
const targetIsLeftOrRight = LeftOrRight.includes(targetPosition);
// we expect flows to be horizontal or vertical (all handles left or right respectively top or bottom)
// a mixed edge is when one the source is on the left and the target is on the top for example.
const mixedEdge =
(sourceIsLeftOrRight && !targetIsLeftOrRight) ||
(targetIsLeftOrRight && !sourceIsLeftOrRight);
if (mixedEdge) {
const xOffset = sourceIsLeftOrRight ? Math.abs(targetX - sourceX) : 0;
const centerX = sourceX > targetX ? sourceX - xOffset : sourceX + xOffset;
const yOffset = sourceIsLeftOrRight ? 0 : Math.abs(targetY - sourceY);
const centerY = sourceY < targetY ? sourceY + yOffset : sourceY - yOffset;
return [centerX, centerY, xOffset, yOffset];
}
const xOffset = Math.abs(targetX - sourceX) / 2;
const centerX = targetX < sourceX ? targetX + xOffset : targetX - xOffset;
const yOffset = Math.abs(targetY - sourceY) / 2;
const centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset;
return [centerX, centerY, xOffset, yOffset];
};
frontend/src/lib/components/graph/svelvet/nodes/controllers/util.ts
-16
View File
@@ -1,16 +0,0 @@
import type { StoreType } from '../../store/types/types';
import { get } from 'svelte/store';
/**
* getNodeById will look for the targeted Node that has the same id provided in the Svelvet component store.
*
* @param store The Svelvet store containing the state of a Svelvet component
* @param id The id of the targeted Node
* @returns The targeted Node object in store.nodesStore
*/
export function getNodeById(store: StoreType, id: string) {
const nodesStore = get(store.nodesStore);
const node = nodesStore[id];
return node;
}
frontend/src/lib/components/graph/svelvet/nodes/models/Node.ts
-156
View File
@@ -1,156 +0,0 @@
/** this is where we create our node store */
import type { NodeType } from '../../store/types/types'
import { get } from 'svelte/store'
import { stores } from '../../store/models/store'
/** A Node class that implements NodeType interface
* @param {string} id The id of the Node
* @param {number} positionX The X-axis position of the Node (left top corner of the Node)
* @param {number} positionY The Y-axis position of the Node (left top corner of the Node)
* @param {number} width The width of the Node
* @param {number} height The height of the Node
* @param {string} bgColor The background color of the node
* @param {object} data A data object that user can specify; possible keys are 'label' and 'custom';
* @param {string} canvasId The canvasId of the Svelvet component that the instantiated Node will be on.
* @param {string} borderColor The border color of the Node
* @param {boolean} image A boolean set to true if the Node needs to display an image
* @param {string} src The src link for the image; image and src are closely tied and a src link is only needed when image sets to true
* @param {string} textColor The color of the text in the Node
* @param {string} borderRadius The border radius of the Node
* @param {string} childNodes An array of node ids that will be grouped as child nodes of this Node. This is for the GroupNodes feature. The current implementation of this feature works one way but not the other (when you drag the parent node, the child nodes will move as a group but when you drag the child node, the parent node would not move along)
* @param {string} className The custom class name if user specifies. This is for the custom className feature for Node.
*/
export class Node implements NodeType {
constructor(
public id: string,
public positionX: number,
public positionY: number,
public width: number,
public height: number,
public bgColor: string,
public data: object,
public canvasId: string,
public borderColor: string,
public image: boolean,
public src: string,
public textColor: string,
public borderRadius: number,
public childNodes: string[],
public className: string,
public clickCallback: Function
) {}
/**
* setPositionFromMovement will update the positionX and positionY of the Node when user drags a Node around on the canvas, reflect the changes in real time in the nodesStore, and also cascade the changes to all relative elements like Anchors and Edges.
* @param {number} movementX The mouse movement value on the X-axis
* @param {number} movementY The mouse movement value on the Y-axis
*/
setPositionFromMovement(movementX: number, movementY: number) {
const { nodesStore, anchorsStore, potentialAnchorsStore, boundary, lockedOption } =
stores[this.canvasId]
if (get(lockedOption)) return // don't do anything if locked is enabled
// boundary sets the boundary of the canvas, or else it is false if their is no boundary
// check if out of bounds, and if so return without doing anything
const boundaryObj = get(boundary)
if (
typeof boundaryObj === 'object' &&
(this.positionX + this.width + movementX >= boundaryObj.x ||
this.positionY + this.height + movementY >= boundaryObj.y ||
this.positionY + movementY <= 0 ||
this.positionX + movementX <= 0)
)
return
//update all necessary data
this.positionX += movementX
this.positionY += movementY
// update children
nodesStore.update((nodes) => {
if (this.childNodes)
for (const childNodeId of this.childNodes)
nodes[childNodeId].setPositionFromMovement(movementX, movementY)
return { ...nodes }
})
//update all the anchors on the node in the anchorsStore
anchorsStore.update((anchors) => {
for (const anchorId in anchors) {
if (anchors[anchorId].nodeId === this.id) {
anchors[anchorId].setPositionFromNode()
}
}
return { ...anchors }
})
//update all the anchors on the node in the anchorsStore
potentialAnchorsStore.update((anchors) => {
for (const anchorId in anchors) {
if (anchors[anchorId].nodeId === this.id) {
anchors[anchorId].callback() // we don't have to worry about setting partner anchors/etc;
}
}
return { ...anchors }
})
}
/**
* setSizeFromMovement will update the width and height of the Node when user resizes the Node by dragging at the right bottom corner (where the ResizedNode attached), reflect the changes in real time in the nodesStore, and also cascade the changes to all relative elements like Anchors and potential Anchors.
*
* @param movementX The mouse movement value on the X-axis
* @param movementY The mouse movement value on the Y-axis
*/
setSizeFromMovement(movementX: number, movementY: number) {
this.width += movementX
this.height += movementY
const { anchorsStore, potentialAnchorsStore } = stores[this.canvasId]
//Updates the anchor so it follows the node's position as the dimensions change
anchorsStore.update((anchors) => {
for (const anchorId in anchors) {
if (anchors[anchorId].nodeId === this.id) {
anchors[anchorId].setPositionFromNode()
//anchors[anchorId].setPosition(movementX, movementY);
}
}
return { ...anchors }
})
//update all the anchors on the node in the anchorsStore
potentialAnchorsStore.update((anchors) => {
for (const anchorId in anchors) {
if (anchors[anchorId].nodeId === this.id) {
anchors[anchorId].callback() // we don't have to worry about setting partner anchors/etc;
}
}
return { ...anchors }
})
}
/**
* setExportableData is going to construct an object that holds all the node data that can be exported. This method is used for Exporting Diagrams feature.
*
* @returns An object with all the exportable data of the Node. The format of this object should align with the original format of node data user provided.
*/
setExportableData() {
const exportableData = {
id: this.id,
// canvasId: this.canvasId,
width: this.width,
height: this.height,
position: { x: this.positionX, y: this.positionY },
data: this.data,
bgColor: this.bgColor,
borderColor: this.borderColor,
textColor: this.textColor,
borderRadius: this.borderRadius,
image: this.image,
src: this.src,
childNodes: this.childNodes,
customClassName: this.className
}
return exportableData
}
}
frontend/src/lib/components/graph/svelvet/nodes/views/Node.svelte
-91
View File
@@ -1,91 +0,0 @@
<script lang="ts">
import { afterUpdate } from 'svelte'
import { findStore } from '../../store/models/store'
import type { NodeType } from '../../store/types/types'
import { forceCssHeightAndWidth } from '../../customCss/controllers/getCss'
export let node: NodeType
export let canvasId: string
export let isCustom = false
const store = findStore(canvasId)
const { lockedOption } = store
// forceCssHeightAndWidth forces the size of the node to be defined by CSS
afterUpdate(() => {
if (node.className) forceCssHeightAndWidth(store, node)
})
const mousedown = (e) => {
if (node.clickCallback) node.clickCallback(node)
}
</script>
<!-- on:wheel prevents page scroll when using mousewheel in the Node -->
<div
on:mousedown={mousedown}
on:touchstart={mousedown}
class="{isCustom ? 'CustomNode' : 'Node'} {node.className}"
style="left: {node.positionX}px;
top: {node.positionY}px;
width: {node.width}px;
height: {node.height}px;
{isCustom
? ''
: `
background-color: ${node.bgColor ?? 'white'};
border-color: ${node.borderColor};
border-radius: ${node.borderRadius}px;
color: ${node.textColor};
cursor: ${$lockedOption ? 'default' : 'grab'};`}"
id="svelvet-{node.id}"
>
<!-- This executes if node.image is present without node.label -->
{#if node.image}
<img
src={node.src}
alt=""
style="width: {node.width * 0.75}px;
height: {node.height * 0.75}px;
overflow: hidden;"
/>
{/if}
<slot />
</div>
<style>
.CustomNode {
position: absolute;
display: grid;
justify-content: center;
align-items: center;
font-size: 14px;
text-align: center;
pointer-events: auto;
box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.2);
}
.Node {
position: absolute;
display: grid;
user-select: none;
justify-content: center;
overscroll-behavior: auto;
align-items: center;
font-size: 14px;
text-align: center;
border: solid 1px black;
border-radius: 5px;
box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.2);
pointer-events: auto; /* this is needed for pointer events to work since we disable them in graphview */
}
/* the default behavior when click/dragging an image is to move it. This interferes with node dragging. We disable pointer events on img to prevent this */
/* Alternatively, we could use e.preventDefault() on mouseDown. However, this interferes with embedded Svelvet forms */
img {
pointer-events: none;
}
</style>
frontend/src/lib/components/graph/svelvet/store/controllers/storeApi.ts
-103
View File
@@ -1,103 +0,0 @@
/*
Important functions (in order of how likely I think you are to use them):
findStore(canvasId: string)
- Input: canvasId. There can be multiple Svelvet canvases on the same page, and each has their own store
- Returns: store
- Notes: You will need to call this function on every component you make
getNodes(store, filter)
- Description: this function returns of list of Node objects
- Input: store: the store where you get the list of Node objects from
- filter: an object where you can filter the array. For example, if you want to find nodes with an id of 'sdf-2d3fs' and positionX=35, then you
would set filter = {id: 'sdf-2d3fs, positionX: 35}.
Right now, you can only test for equality.
- Notes: This is a very mongoose way of retrieving information. Given the relational nature of our stores, maybe it would be better to use an SQL-like syntax
This array is non-reactive (ie, you cannot use information from this array to force a re-render of a Svelte component)
createStoreEmpty(canvasId: string)
- Input: canvasId.
- Returns: store
- Notes. This should be called once every time you initialize a new Svelvet canvas, (ie, only in the Svelvet.svelte file)
populateSvelvetStoreFromUserInput(canvasId, nodes, edges)
- canvasId: this the the canvasId of the Svelvet component you are creating a store for
- nodes: this is an array of objects containing node info that is defined by the user. NOTE THAT THE STRUCTURE DIFFERS FROM THE NODES CLASS
The whole point of populateSvelvetStoreFromUserInput is to convert nodes into proper Svelvet Node objects. An example of nodes is in
$routes/testingplayground/index.svelte
- edges: same as nodes, this is an array of objects containing edge info THAT IS DIFFERENT FROM THE EDGE CLASS.
- Returns: store
*/
import { findStore, stores } from '../models/store'
import { writable } from 'svelte/store'
import type { StoreType } from '../types/types'
import type { UserNodeType, UserEdgeType } from '../../types/types'
import { populateAnchorsStore, populateNodesStore, populateEdgesStore } from './util'
/**
* createStoreEmpty will initialize a new Svelvet store with a unique canvasId.
* If you have multiple Svelvet components on the page, the stores object will look like the following example:
* const stores = \{
* canvasId-1: store of Svelvet component 1,
* canvasId-2: store of Svelvet component 2,
* canvasId-3: store of Svelvet component 3,
* \}
* Notes: This should be called once every time you initialize a new Svelvet canvas, (ie, only in the Svelvet.svelte file).
* This function will initialize an empty store for the Svelvet component and should be followed by invoking populateSvelvetStoreFromUserInput to populate all the initial state from the user input.
*
* @param canvasId The canvasId of the newly created Svelvet component
* @returns An empty store for the newly created Svelvet component.
*/
export function createStoreEmpty(canvasId: string): StoreType {
stores[canvasId] = {
nodesStore: writable({}),
edgesStore: writable({}),
anchorsStore: writable({}),
potentialAnchorsStore: writable({}),
widthStore: writable(600),
heightStore: writable(600),
backgroundStore: writable(false),
movementStore: writable(true),
nodeSelected: writable(false),
nodeIdSelected: writable(-1),
d3Scale: writable(1),
options: writable({}),
temporaryEdgeStore: writable([]),
nodeCreate: writable(false), // this option sets whether the "nodeEdit" feature is enabled
boundary: writable(false),
edgeEditModal: writable(null), // this is used for edgeEditModal feature. When an edge is right clicked, store.edgeEditModal is set to the edgeId string. This causes a modal to be rendered
lockedOption: writable(false),
editableOption: writable(false), // true if you want nodes/edges to be editable. See feature editEdges
d3ZoomParameters: writable({}), // this stores d3 parameters x, y, and zoom. This isn't used for anything other than giving users a way to access d3 zoom parameters if they want to build on top of Svelvet
highlightEdgesOption: writable(true) // option to turn on/off highlightable edges
}
return stores[canvasId]
}
/**
* populateSvelvetStoreFromUserInput will populate all the states and set these states into the Svelvet store initialized by invoking createStoreEmpty
*
* @param canvasId The canvasId of the Svelvet component you are creating a store for
* @param nodes This is an array of objects containing node info that is defined by the user. NOTE THAT THE STRUCTURE DIFFERS FROM THE NODES CLASS. The whole point of populateSvelvetStoreFromUserInput is to convert nodes into proper Svelvet Node objects. An example of nodes is in $routes/testingplayground/index.svelte
* @param edges Same as nodes, this is an array of objects containing edge info THAT IS DIFFERENT FROM THE EDGE CLASS.
*/
export function populateSvelvetStoreFromUserInput(
canvasId: string,
nodes: UserNodeType[],
edges: UserEdgeType[]
): void {
// find the store
const store = findStore(canvasId)
// populate store.nodesStore with user nodes
populateNodesStore(store, nodes, canvasId)
// populate store.anchorsStore with anchors. Note the userdoes not explictly define anchors; anchors are calculated from the edges
populateAnchorsStore(store, nodes, edges, canvasId)
// populate edges
populateEdgesStore(store, edges, canvasId)
}
frontend/src/lib/components/graph/svelvet/store/controllers/userApi.ts
-18
View File
@@ -1,18 +0,0 @@
import { findStore } from '../models/store';
import { get } from 'svelte/store';
export function getD3PositionX(canvasId) {
const store = findStore(canvasId);
const width = get(store.widthStore);
const x = width / 2 - get(store.d3ZoomParameters).x; // user input is shifted so that x=0, y=0 occurs in the center
return x;
}
export function getD3PositionY(canvasId) {
const store = findStore(canvasId);
const height = get(store.heightStore);
const y = height / 2 - get(store.d3ZoomParameters).y; // user input is shifted so that x=0, y=0 occurs in the center
return y;
}
export function getD3Zoom(canvasId) {
const store = findStore(canvasId);
return get(store.d3ZoomParameters).k;
}
frontend/src/lib/components/graph/svelvet/store/controllers/util.ts
-215
View File
@@ -1,215 +0,0 @@
const pkStringGenerator = () => (Math.random() + 1).toString(36).substring(7) // these are callbacks used to calculate anchor position relative to node
import { dynamicCbCreator, fixedCbCreator } from '../../edges/controllers/anchorCbDev'
import type { AnchorCbType, AnchorType } from '../../edges/types/types'
import type { UserEdgeType, UserNodeType } from '../../types/types'
import type { EdgeType, NodeType, StoreType } from '../types/types'
import { getAnchors } from '../../edges/controllers/util'
import { Anchor } from '../../edges/models/Anchor'
import { Edge } from '../../edges/models/Edge'
import { Node } from '../../nodes/models/Node'
/**
* Creates an Anchor on the targeted Node with infomation the userNode holds
* @param store An object containing the state of the Svelvet component. You can access the following through `store`: nodesStore, edgesStore, anchorsStore, etc.
* @param userNode A node that the user specifies. This is NOT the same as a Node object.
* @param sourceOrTarget User specified information of source or target
* @param canvasId The id of the canvas that holds the Anchor and its attached Node
* @param edge An edge that the user specifies. It should target the userNode as source or target. This is NOT the same as an Edge object
* @returns An Anchor object
*/
function createAnchor(
store: StoreType,
userNode: UserNodeType | null,
sourceOrTarget: 'source' | 'target',
canvasId: string,
edge: UserEdgeType
) {
// edge case
if (userNode === null) throw `you cannot create an anchor without a user node (for now)`
const edgeId = edge.id
const anchorId = pkStringGenerator()
// userCb is the appropriate source or taret callback from userEdge object. It is
// possible the user to NOT set userCb in which case userCb will be undefined
let userCb: Function | undefined
if (sourceOrTarget === 'target') userCb = edge.targetAnchorCb
else userCb = edge.sourceAnchorCb
// create anchor callbacks
let cb: AnchorCbType
if (userCb === undefined) cb = dynamicCbCreator(store, edgeId, anchorId)
else cb = fixedCbCreator(store, edgeId, anchorId, userNode.id, userCb)
// Create a new anchor.
const anchor = new Anchor(
anchorId,
userNode.id,
edgeId,
sourceOrTarget,
-1, // dummy variables for x,y,angle for now
-1, // dummy variables for x,y,angle for now
cb,
canvasId,
0 // dummy variables for x,y,angle for now
)
// return
return anchor
}
/**
* Populates edgesStore of Edges. This function does not return the edgesStore. Instead it sets the nodesStore of Svelvet store.
* @param store An object containing the state of the Svelvet component. You can access the following through `store`: nodesStore, edgesStore, anchorsStore, etc.
* @param edges An edge that the user specifies. This is NOT the same as a Edge object.
* @param canvasId The canvasId of the Svelvet component that holds the Edges
*/
export function populateEdgesStore(store: StoreType, edges: UserEdgeType[], canvasId: string) {
const edgesStore: { [key: string]: EdgeType } = {}
for (let i = 0; i < edges.length; i++) {
const userEdge = edges[i]
// { id: 'e1-2', source: 1, type: 'straight', target: 2, label: 'e1-2' },
// source is node.id for the source node
// target is node.id for the target node
// We need to get the anchors
const { id: edgeId } = userEdge
const anchors = getAnchors(store, { edgeId: edgeId })
// check that we have two anchors for every edge
if (anchors.length !== 2) throw 'We should have two anchors for every node'
// check that we have 1 source anchor and 1 target anchor. Since sourceOrTarget is typed to be either 'source'
// or 'target', it suffices to check whether there are two unique elements
if (new Set(anchors.map((e) => e.sourceOrTarget)).size !== 2)
throw 'we should have one source and one target anchor'
// get source and target anchor
let sourceAnchor, targetAnchor
if (anchors[0].sourceOrTarget === 'source') {
sourceAnchor = anchors[0]
targetAnchor = anchors[1]
} else {
sourceAnchor = anchors[1]
targetAnchor = anchors[0]
}
edgesStore[edgeId] = new Edge(
edgeId,
sourceAnchor.positionX,
sourceAnchor.positionY,
targetAnchor.positionX,
targetAnchor.positionY,
canvasId,
userEdge.label === undefined ? '' : userEdge.label,
userEdge.type === undefined ? 'bezier' : userEdge.type,
userEdge.labelBgColor === undefined ? 'white' : userEdge.labelBgColor,
userEdge.labelTextColor === undefined ? 'black' : userEdge.labelTextColor,
userEdge.edgeColor === undefined ? 'black' : userEdge.edgeColor,
userEdge.animate === undefined ? false : userEdge.animate,
userEdge.noHandle === undefined ? false : userEdge.noHandle,
userEdge.arrow === undefined ? false : userEdge.arrow,
userEdge.clickCallback === undefined ? () => {} : userEdge.clickCallback,
userEdge.className === undefined ? '' : userEdge.className,
userEdge.offset
)
}
store.edgesStore.set(edgesStore)
}
/**
* Finds userNode (with UserNodeType; Not the same as the Node) by the node id from nodesStore
* @param id The id of the Node in its nodesStore
* @param userNodes The array of userNodes (NOT the same as Node object)
* @returns The node that user specified or null if not found
*/
function findUserNodeById(id: string, userNodes: UserNodeType[]): UserNodeType | null {
for (let i = 0; i < userNodes.length; i++) {
const userNode = userNodes[i]
if (userNode.id === id) return userNode
}
return null
}
/**
* Populates the anchorsStore. This will overwrite any data in the AnchorsStore.
* @param store The Svelvet store containing the state of the Svelvet component
* @param nodes An array of user specified nodes
* @param edges An array of user specified edges
* @param canvasId The canvasId of the Svelvet component that holds the nodes and edges
*/
export function populateAnchorsStore(
store: StoreType,
nodes: UserNodeType[],
edges: UserEdgeType[],
canvasId: string
) {
// anchorsStore will populated and eventaully synchronized to store.anchorsStore
const anchorsStore: { [key: string]: AnchorType } = {}
// iterate through user edges. Note the user never explicitly defines anchors; we calculate anchors
// from the user edge/node information
for (let i = 0; i < edges.length; i++) {
const userEdge = edges[i]
// find the source and target userNodes. These will be used to create the nodeId foreign key and
// determine placement of the anchor based on userNode.targetPosition, useNode.sourcePosition
const { source: sourceNodeId, target: targetNodeId } = userEdge
const sourceUserNode = findUserNodeById(sourceNodeId, nodes)
const targetUserNode = findUserNodeById(targetNodeId, nodes)
// create source anchor
const sourceAnchor = createAnchor(store, sourceUserNode, 'source', canvasId, userEdge)
// create target anchor
const targetAnchor = createAnchor(store, targetUserNode, 'target', canvasId, userEdge)
// store source and target anchors
anchorsStore[sourceAnchor.id] = sourceAnchor
anchorsStore[targetAnchor.id] = targetAnchor
}
//populates the anchorsStore
store.anchorsStore.set(anchorsStore)
// set anchor positions. We can only set anchor positions after anchorsStore and nodesStore
// has been populated. TODO: maybe add a check to see that anchorsStore and NodesStore populated?
const anchors = getAnchors(store)
for (const anchor of anchors) anchor.callback()
}
/**
* Populates the nodesStore. This will overwrite any data in the nodesStore.
* @param store The Svelvet store containing the state of the Svelvet component
* @param nodes An array of user specifed nodes
* @param canvasId The canvasId of the Svelvet component that holds the nodes
*/
export function populateNodesStore(store: StoreType, nodes: UserNodeType[], canvasId: string) {
// this is the nodesStore object. THIS IS NOT THE SAME AS A NODESTORE
const nodesStore: { [key: string]: NodeType } = {}
// iterate through user nodes and create node objects
for (let i = 0; i < nodes.length; i++) {
const userNode: UserNodeType = nodes[i]
const nodeId = userNode.id
// TODO: move sanitizing default values to middleware
const node = new Node(
nodeId.toString(),
userNode.position.x,
userNode.position.y,
userNode.width,
userNode.height,
userNode.bgColor ?? 'white',
userNode.data,
canvasId,
userNode.borderColor === undefined ? 'black' : userNode.borderColor,
userNode.image === undefined ? false : userNode.image,
userNode.src === undefined ? '' : userNode.src,
userNode.textColor === undefined ? '' : userNode.textColor,
userNode.borderRadius === undefined ? 0 : userNode.borderRadius,
userNode.childNodes === undefined ? [] : userNode.childNodes,
userNode.className === undefined ? '' : userNode.className,
userNode.clickCallback === undefined ? () => {} : userNode.clickCallback
)
nodesStore[nodeId] = node
}
// This is actually what sets the store
store.nodesStore.set(nodesStore)
}
frontend/src/lib/components/graph/svelvet/store/models/store.ts
-15
View File
@@ -1,15 +0,0 @@
import type { StoreType } from '../types/types';
export function findStore(canvasId: string): StoreType {
return stores[canvasId]
}
/**
`store` is a dictionary of Svelvet stores.
* The reason why we have multiple Svelvet stores is to handle multiple canvases on the same page.
* A Svelvet store is the single source of truth for a canvas state.
* We discourage developers from interacting with stores directly; instead use the api methods in
`src/lib/controllers/storeApi.ts`. However, if need to direct access you can do so by importing:
`import { store } from 'src/lib/models/store';`
*/
export const stores: { [key: string]: StoreType } = {};
frontend/src/lib/components/graph/svelvet/store/types/types.ts
-122
View File
@@ -1,122 +0,0 @@
import type { Writable } from 'svelte/store'
import type { AnchorType } from '../../edges/types/types'
export interface ResizeNodeType {
id: string
nodeId: string
edgeId?: string
canvasId: string
anchorId?: string
positionX: number
positionY: number
setPositionAndCascade: Function
setPosition: Function
delete: Function
}
/*
Type for a single svelvet store
*/
export interface StoreType {
nodesStore: Writable<{ [key: string]: NodeType }>
edgesStore: Writable<{ [key: string]: EdgeType }>
anchorsStore: Writable<{ [key: string]: AnchorType }>
potentialAnchorsStore: Writable<{ [key: string]: PotentialAnchorType }>
widthStore: Writable<number>
heightStore: Writable<number>
backgroundStore: Writable<boolean>
movementStore: Writable<boolean>
nodeIdSelected: Writable<number>
nodeSelected: Writable<boolean> // this is used to stop d3 panning when node is being dragged
d3Scale: Writable<number> // for zoom and pan
options: Writable<{ [key: string]: any }>
temporaryEdgeStore: Writable<TemporaryEdgeType[]>
nodeCreate: Writable<boolean> // this option sets whether the "nodeEdit" feature is enabled
boundary: Writable<boolean | PositionType>
edgeEditModal: Writable<null | string> // this options is used to place the edgeEdit modal when an edge is right-clicked. null is no modal, positionType if modal should be placed at position defined by postionType.x, positionType.y
lockedOption: Writable<boolean>
editableOption: Writable<boolean>
d3ZoomParameters: Writable<{
[key: string]: number
}>
highlightEdgesOption: Writable<boolean>
}
export interface PositionType {
x: number
y: number
}
export interface NodeType {
id: string
width: number
height: number
positionX: number
positionY: number
bgColor: string
data: {
html?: any
custom?: { component: any; props?: any; cb?: (e: string, detail: any) => void }
img?: any
label?: string
}
canvasId: string
setPositionFromMovement: Function
setSizeFromMovement: Function
setExportableData: Function
borderColor: string
image: boolean
src: string
textColor: string
borderRadius: number
childNodes: string[]
className: string //This is for custom className for node
clickCallback: Function // user-supplied callback that executes when the node is clicked
}
export interface EdgeType {
id: string
sourceX: number
sourceY: number
targetX: number
targetY: number
canvasId: string
label: string
type: 'straight' | 'smoothstep' | 'step' | 'bezier'
labelBgColor: string
labelTextColor: string
edgeColor: string
animate: boolean
noHandle: boolean
arrow: boolean
clickCallback: Function
className: string
delete: Function
setExportableData: Function
}
export interface PotentialAnchorType {
id: string
nodeId: string
callback: Function // callback is used to calculate positionX, positionY based on parent node's data, and set the anchor position // TODO: rename to something better
positionX: number
positionY: number
angle: number
canvasId: string
delete: Function
}
export interface TemporaryEdgeType {
id: string
sourcePotentialAnchorId: string // this will always be set
sourceX: number
sourceY: number
targetPotentialAnchorId: string | null // this will be null until the temporary edge reaches another temporary anchor
targetX: number
targetY: number
canvasId: string
type: string
edgeColor: string
createEdge: Function
createNode: Function
}
frontend/src/lib/components/graph/svelvet/types/README.md
-3
View File
@@ -1,3 +0,0 @@
# Types
This folder contains types exported to the user, as decribed in feature: `https://www.svelvet.io/docs/typescript/`
frontend/src/lib/components/graph/svelvet/types/index.ts
-3
View File
@@ -1,3 +0,0 @@
// this file exports user types
import type { UserEdgeType, UserNodeType } from './types'
export type { UserEdgeType, UserNodeType }
frontend/src/lib/components/graph/svelvet/types/types.ts
-60
View File
@@ -1,60 +0,0 @@
export interface UserNodeType {
id: string
width: number
height: number
bgColor?: string
data: {
html?: any
custom?: { component: any; props?: any; cb?: (e: string, detail: any) => void }
img?: any
}
position: { x: number; y: number }
borderColor?: string | undefined
image?: boolean
src?: string
textColor?: string
targetPosition?: 'left' | 'right' | 'top' | 'bottom'
sourcePosition?: 'left' | 'right' | 'top' | 'bottom'
borderRadius?: number
childNodes?: string[]
className?: string
clickCallback?: Function
}
export interface UserEdgeType {
id: string
source: string
target: string
sourceAnchorCb?: Function
targetAnchorCb?: Function
label?: string
labelBgColor?: string
labelTextColor?: string
edgeColor?: string
type?: 'straight' | 'smoothstep' | 'step' | 'bezier' | undefined
animate?: boolean
noHandle?: boolean
arrow?: boolean
clickCallback?: Function
className?: string
offset?: number
}
import { findStore } from '../store/models/store'
import { get } from 'svelte/store'
export function getD3PositionX(canvasId: string) {
const store = findStore(canvasId)
const width = get(store.widthStore)
const x = width / 2 - get(store.d3ZoomParameters).x // user input is shifted so that x=0, y=0 occurs in the center
return x
}
export function getD3PositionY(canvasId: string) {
const store = findStore(canvasId)
const height = get(store.heightStore)
const y = height / 2 - get(store.d3ZoomParameters).y // user input is shifted so that x=0, y=0 occurs in the center
return y
}
export function getD3Zoom(canvasId: string) {
const store = findStore(canvasId)
return get(store.d3ZoomParameters).k
}
frontend/src/lib/components/graph/util.ts
-7
View File
@@ -9,13 +9,6 @@ export const NODE = {
}
}
export function* createIdGenerator(): Generator<number, number, unknown> {
let id = 0
while (true) {
yield id++
}
}
export function getStateColor(
state: FlowStatusModule['type'] | undefined,
isDark: boolean,
frontend/src/lib/hub.ts
+13
View File
@@ -1,6 +1,7 @@
import type { Schema } from './common'
import { AppService, FlowService, type Flow, type Script } from './gen'
import { encodeState } from './utils'
import rawHubPaths from './hubPaths.json?raw'
export function scriptToHubUrl(
content: string,
@@ -55,3 +56,15 @@ export function appToHubUrl(staticApp: any, hubBaseUrl: string): URL {
url.searchParams.append('app', encodeState(staticApp))
return url
}
type HubPaths = {
gitSync: string
gitSyncTest: string
slackErrorHandler: string
slackRecoveryHandler: string
slackReport: string
discordReport: string
smtpReport: string
}
export const hubPaths = JSON.parse(rawHubPaths) as HubPaths
frontend/src/lib/hubPaths.json
+9
View File
@@ -0,0 +1,9 @@
{
"gitSync": "hub/8931/sync-script-to-git-repo-windmill",
"gitSyncTest": "hub/8944/git-repo-test-read-write-windmill",
"slackErrorHandler": "hub/6512/workspace-or-schedule-error-handler-slack",
"slackRecoveryHandler": "hub/2430/slack/schedule-recovery-handler-slack",
"slackReport": "hub/7836/slack",
"discordReport": "hub/7838/discord",
"smtpReport": "hub/7837/smtp"
}
frontend/src/routes/(root)/(logged)/workspace_settings/+page.svelte
+3 -2
View File
@@ -55,6 +55,7 @@
type S3ResourceSettings
} from '$lib/workspace_settings'
import { base } from '$lib/base'
import { hubPaths } from '$lib/hub'
type GitSyncTypeMap = {
scripts: boolean
@@ -138,7 +139,7 @@
| 'error_handler') ?? 'users'
let usingOpenaiClientCredentialsOauth = false
const latestGitSyncHubScript = `hub/8931/sync-script-to-git-repo-windmill`
const latestGitSyncHubScript = hubPaths.gitSync
// function getDropDownItems(username: string): DropdownItem[] {
// return [
// {
@@ -566,7 +567,7 @@
}
let jobId = await JobService.runScriptByPath({
workspace: $workspaceStore!,
path: 'hub/8944/git-repo-test-read-write-windmill',
path: hubPaths.gitSyncTest,
requestBody: {
repo_url_resource_path: gitSyncRepository.git_repo_resource_path.replace('$res:', '')
}
lsp/Pipfile
+2 -2
View File
@@ -4,8 +4,8 @@ verify_ssl = true
name = "pypi"
[packages]
wmill = ">=1.380.0"
wmill_pg = ">=1.380.0"
wmill = ">=1.381.0"
wmill_pg = ">=1.381.0"
sendgrid = "*"
mysql-connector-python = "*"
pymongo = "*"
openflow.openapi.yaml
+1 -1
View File
@@ -1,7 +1,7 @@
openapi: "3.0.3"
info:
version: 1.380.0
version: 1.381.0
title: OpenFlow Spec
contact:
name: Ruben Fiszel
powershell-client/WindmillClient/WindmillClient.psd1
+1 -1
View File
@@ -12,7 +12,7 @@
RootModule = 'WindmillClient.psm1'
# Version number of this module.
ModuleVersion = '1.380.0'
ModuleVersion = '1.381.0'
# Supported PSEditions
# CompatiblePSEditions = @()
python-client/wmill/pyproject.toml
+1 -1
View File
@@ -1,6 +1,6 @@
[tool.poetry]
name = "wmill"
version = "1.380.0"
version = "1.381.0"
description = "A client library for accessing Windmill server wrapping the Windmill client API"
license = "Apache-2.0"
homepage = "https://windmill.dev"
python-client/wmill_pg/pyproject.toml
+1 -1
View File
@@ -1,6 +1,6 @@
[tool.poetry]
name = "wmill-pg"
version = "1.380.0"
version = "1.381.0"
description = "An extension client for the wmill client library focused on pg"
license = "Apache-2.0"
homepage = "https://windmill.dev"
typescript-client/jsr.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "@windmill/windmill",
"version": "1.380.0",
"version": "1.381.0",
"exports": "./src/index.ts",
"publish": {
"exclude": ["!src", "./s3Types.ts", "./client.ts"]
typescript-client/package.json
+1 -1
View File
@@ -1,7 +1,7 @@
{
"name": "windmill-client",
"description": "Windmill SDK client for browsers and Node.js",
"version": "1.380.0",
"version": "1.381.0",
"author": "Ruben Fiszel",
"license": "Apache 2.0",
"devDependencies": {
version.txt
+1 -1
View File
@@ -1 +1 @@
1.380.0
1.381.0