diff --git a/changelog/index.html b/changelog/index.html
index e5968579..053ce9a8 100644
--- a/changelog/index.html
+++ b/changelog/index.html
@@ -73,7 +73,7 @@
     <div data-md-component="skip">
       
         
-        <a href="#1110" class="md-skip">
+        <a href="#unreleased" class="md-skip">
           Skip to content
         </a>
       
@@ -554,6 +554,13 @@
 
 
 <p><em>Note: Numbers like (#123) point to closed Pull Requests on the fractal-web repository.</em></p>
+<h1 id="unreleased">Unreleased<a class="headerlink" href="#unreleased" title="Permanent link">&para;</a></h1>
+<ul>
+<li>Added tasks search filters (#658);</li>
+<li>Split standard-user tasks page into "tasks page" vs "tasks management page" (#658);</li>
+<li>Added alive endpoint (#658);</li>
+<li>Added user column and sorted users by email in <code>/v2/admin/task-groups/activities</code> (#658);</li>
+</ul>
 <h1 id="1110">1.11.0<a class="headerlink" href="#1110" title="Permanent link">&para;</a></h1>
 <ul>
 <li>Alignment with fractal-server 2.9.0 (#640, #643, #652, #655):<ul>
diff --git a/sandbox/_app/immutable/chunks/entry.CQp4sx6U.js b/sandbox/_app/immutable/chunks/entry.CQp4sx6U.js
deleted file mode 100644
index bb6711d9..00000000
--- a/sandbox/_app/immutable/chunks/entry.CQp4sx6U.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import{n as le,s as ft,z as ut}from"./scheduler.iSOZDcen.js";new URL("sveltekit-internal://");function dt(e,n){return e==="/"||n==="ignore"?e:n==="never"?e.endsWith("/")?e.slice(0,-1):e:n==="always"&&!e.endsWith("/")?e+"/":e}function ht(e){return e.split("%25").map(decodeURI).join("%25")}function pt(e){for(const n in e)e[n]=decodeURIComponent(e[n]);return e}function fe({href:e}){return e.split("#")[0]}const gt=["href","pathname","search","toString","toJSON"];function mt(e,n,t){const r=new URL(e);Object.defineProperty(r,"searchParams",{value:new Proxy(r.searchParams,{get(a,o){if(o==="get"||o==="getAll"||o==="has")return s=>(t(s),a[o](s));n();const i=Reflect.get(a,o);return typeof i=="function"?i.bind(a):i}}),enumerable:!0,configurable:!0});for(const a of gt)Object.defineProperty(r,a,{get(){return n(),e[a]},enumerable:!0,configurable:!0});return r}const yt="/__data.json",_t=".html__data.json";function wt(e){return e.endsWith(".html")?e.replace(/\.html$/,_t):e.replace(/\/$/,"")+yt}function bt(...e){let n=5381;for(const t of e)if(typeof t=="string"){let r=t.length;for(;r;)n=n*33^t.charCodeAt(--r)}else if(ArrayBuffer.isView(t)){const r=new Uint8Array(t.buffer,t.byteOffset,t.byteLength);let a=r.length;for(;a;)n=n*33^r[--a]}else throw new TypeError("value must be a string or TypedArray");return(n>>>0).toString(36)}function vt(e){const n=atob(e),t=new Uint8Array(n.length);for(let r=0;r<n.length;r++)t[r]=n.charCodeAt(r);return t.buffer}const Ve=window.fetch;window.fetch=(e,n)=>((e instanceof Request?e.method:(n==null?void 0:n.method)||"GET")!=="GET"&&q.delete(me(e)),Ve(e,n));const q=new Map;function At(e,n){const t=me(e,n),r=document.querySelector(t);if(r!=null&&r.textContent){let{body:a,...o}=JSON.parse(r.textContent);const i=r.getAttribute("data-ttl");return i&&q.set(t,{body:a,init:o,ttl:1e3*Number(i)}),r.getAttribute("data-b64")!==null&&(a=vt(a)),Promise.resolve(new Response(a,o))}return window.fetch(e,n)}function kt(e,n,t){if(q.size>0){const r=me(e,t),a=q.get(r);if(a){if(performance.now()<a.ttl&&["default","force-cache","only-if-cached",void 0].includes(t==null?void 0:t.cache))return new Response(a.body,a.init);q.delete(r)}}return window.fetch(n,t)}function me(e,n){let r=`script[data-sveltekit-fetched][data-url=${JSON.stringify(e instanceof Request?e.url:e)}]`;if(n!=null&&n.headers||n!=null&&n.body){const a=[];n.headers&&a.push([...new Headers(n.headers)].join(",")),n.body&&(typeof n.body=="string"||ArrayBuffer.isView(n.body))&&a.push(n.body),r+=`[data-hash="${bt(...a)}"]`}return r}const Et=/^(\[)?(\.\.\.)?(\w+)(?:=(\w+))?(\])?$/;function St(e){const n=[];return{pattern:e==="/"?/^\/$/:new RegExp(`^${It(e).map(r=>{const a=/^\[\.\.\.(\w+)(?:=(\w+))?\]$/.exec(r);if(a)return n.push({name:a[1],matcher:a[2],optional:!1,rest:!0,chained:!0}),"(?:/(.*))?";const o=/^\[\[(\w+)(?:=(\w+))?\]\]$/.exec(r);if(o)return n.push({name:o[1],matcher:o[2],optional:!0,rest:!1,chained:!0}),"(?:/([^/]+))?";if(!r)return;const i=r.split(/\[(.+?)\](?!\])/);return"/"+i.map((c,l)=>{if(l%2){if(c.startsWith("x+"))return ue(String.fromCharCode(parseInt(c.slice(2),16)));if(c.startsWith("u+"))return ue(String.fromCharCode(...c.slice(2).split("-").map(f=>parseInt(f,16))));const d=Et.exec(c),[,h,g,u,m]=d;return n.push({name:u,matcher:m,optional:!!h,rest:!!g,chained:g?l===1&&i[0]==="":!1}),g?"(.*?)":h?"([^/]*)?":"([^/]+?)"}return ue(c)}).join("")}).join("")}/?$`),params:n}}function Rt(e){return!/^\([^)]+\)$/.test(e)}function It(e){return e.slice(1).split("/").filter(Rt)}function Tt(e,n,t){const r={},a=e.slice(1),o=a.filter(s=>s!==void 0);let i=0;for(let s=0;s<n.length;s+=1){const c=n[s];let l=a[s-i];if(c.chained&&c.rest&&i&&(l=a.slice(s-i,s+1).filter(d=>d).join("/"),i=0),l===void 0){c.rest&&(r[c.name]="");continue}if(!c.matcher||t[c.matcher](l)){r[c.name]=l;const d=n[s+1],h=a[s+1];d&&!d.rest&&d.optional&&h&&c.chained&&(i=0),!d&&!h&&Object.keys(r).length===o.length&&(i=0);continue}if(c.optional&&c.chained){i++;continue}return}if(!i)return r}function ue(e){return e.normalize().replace(/[[\]]/g,"\\$&").replace(/%/g,"%25").replace(/\//g,"%2[Ff]").replace(/\?/g,"%3[Ff]").replace(/#/g,"%23").replace(/[.*+?^${}()|\\]/g,"\\$&")}function Lt({nodes:e,server_loads:n,dictionary:t,matchers:r}){const a=new Set(n);return Object.entries(t).map(([s,[c,l,d]])=>{const{pattern:h,params:g}=St(s),u={id:s,exec:m=>{const f=h.exec(m);if(f)return Tt(f,g,r)},errors:[1,...d||[]].map(m=>e[m]),layouts:[0,...l||[]].map(i),leaf:o(c)};return u.errors.length=u.layouts.length=Math.max(u.errors.length,u.layouts.length),u});function o(s){const c=s<0;return c&&(s=~s),[c,e[s]]}function i(s){return s===void 0?s:[a.has(s),e[s]]}}function Be(e,n=JSON.parse){try{return n(sessionStorage[e])}catch{}}function Le(e,n,t=JSON.stringify){const r=t(n);try{sessionStorage[e]=r}catch{}}const N=[];function ye(e,n=le){let t;const r=new Set;function a(s){if(ft(e,s)&&(e=s,t)){const c=!N.length;for(const l of r)l[1](),N.push(l,e);if(c){for(let l=0;l<N.length;l+=2)N[l][0](N[l+1]);N.length=0}}}function o(s){a(s(e))}function i(s,c=le){const l=[s,c];return r.add(l),r.size===1&&(t=n(a,o)||le),s(e),()=>{r.delete(l),r.size===0&&t&&(t(),t=null)}}return{set:a,update:o,subscribe:i}}var $e;const L=(($e=globalThis.__sveltekit_16jifrm)==null?void 0:$e.base)??"/fractal-web/sandbox";var Fe;const Ut=((Fe=globalThis.__sveltekit_16jifrm)==null?void 0:Fe.assets)??L,xt="1732696142439",qe="sveltekit:snapshot",Ge="sveltekit:scroll",Me="sveltekit:states",Pt="sveltekit:pageurl",D="sveltekit:history",M="sveltekit:navigation",J={tap:1,hover:2,viewport:3,eager:4,off:-1,false:-1},z=location.origin;function He(e){if(e instanceof URL)return e;let n=document.baseURI;if(!n){const t=document.getElementsByTagName("base");n=t.length?t[0].href:document.URL}return new URL(e,n)}function _e(){return{x:pageXOffset,y:pageYOffset}}function O(e,n){return e.getAttribute(`data-sveltekit-${n}`)}const Ue={...J,"":J.hover};function Ke(e){let n=e.assignedSlot??e.parentNode;return(n==null?void 0:n.nodeType)===11&&(n=n.host),n}function ze(e,n){for(;e&&e!==n;){if(e.nodeName.toUpperCase()==="A"&&e.hasAttribute("href"))return e;e=Ke(e)}}function he(e,n){let t;try{t=new URL(e instanceof SVGAElement?e.href.baseVal:e.href,document.baseURI)}catch{}const r=e instanceof SVGAElement?e.target.baseVal:e.target,a=!t||!!r||re(t,n)||(e.getAttribute("rel")||"").split(/\s+/).includes("external"),o=(t==null?void 0:t.origin)===z&&e.hasAttribute("download");return{url:t,external:a,target:r,download:o}}function W(e){let n=null,t=null,r=null,a=null,o=null,i=null,s=e;for(;s&&s!==document.documentElement;)r===null&&(r=O(s,"preload-code")),a===null&&(a=O(s,"preload-data")),n===null&&(n=O(s,"keepfocus")),t===null&&(t=O(s,"noscroll")),o===null&&(o=O(s,"reload")),i===null&&(i=O(s,"replacestate")),s=Ke(s);function c(l){switch(l){case"":case"true":return!0;case"off":case"false":return!1;default:return}}return{preload_code:Ue[r??"off"],preload_data:Ue[a??"off"],keepfocus:c(n),noscroll:c(t),reload:c(o),replace_state:c(i)}}function xe(e){const n=ye(e);let t=!0;function r(){t=!0,n.update(i=>i)}function a(i){t=!1,n.set(i)}function o(i){let s;return n.subscribe(c=>{(s===void 0||t&&c!==s)&&i(s=c)})}return{notify:r,set:a,subscribe:o}}function Ct(){const{set:e,subscribe:n}=ye(!1);let t;async function r(){clearTimeout(t);try{const a=await fetch(`${Ut}/_app/version.json`,{headers:{pragma:"no-cache","cache-control":"no-cache"}});if(!a.ok)return!1;const i=(await a.json()).version!==xt;return i&&(e(!0),clearTimeout(t)),i}catch{return!1}}return{subscribe:n,check:r}}function re(e,n){return e.origin!==z||!e.pathname.startsWith(n)}function Pe(e){const n=Ot(e),t=new ArrayBuffer(n.length),r=new DataView(t);for(let a=0;a<t.byteLength;a++)r.setUint8(a,n.charCodeAt(a));return t}const Nt="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";function Ot(e){e.length%4===0&&(e=e.replace(/==?$/,""));let n="",t=0,r=0;for(let a=0;a<e.length;a++)t<<=6,t|=Nt.indexOf(e[a]),r+=6,r===24&&(n+=String.fromCharCode((t&16711680)>>16),n+=String.fromCharCode((t&65280)>>8),n+=String.fromCharCode(t&255),t=r=0);return r===12?(t>>=4,n+=String.fromCharCode(t)):r===18&&(t>>=2,n+=String.fromCharCode((t&65280)>>8),n+=String.fromCharCode(t&255)),n}const jt=-1,Dt=-2,$t=-3,Ft=-4,Vt=-5,Bt=-6;function qt(e,n){if(typeof e=="number")return a(e,!0);if(!Array.isArray(e)||e.length===0)throw new Error("Invalid input");const t=e,r=Array(t.length);function a(o,i=!1){if(o===jt)return;if(o===$t)return NaN;if(o===Ft)return 1/0;if(o===Vt)return-1/0;if(o===Bt)return-0;if(i)throw new Error("Invalid input");if(o in r)return r[o];const s=t[o];if(!s||typeof s!="object")r[o]=s;else if(Array.isArray(s))if(typeof s[0]=="string"){const c=s[0],l=n==null?void 0:n[c];if(l)return r[o]=l(a(s[1]));switch(c){case"Date":r[o]=new Date(s[1]);break;case"Set":const d=new Set;r[o]=d;for(let u=1;u<s.length;u+=1)d.add(a(s[u]));break;case"Map":const h=new Map;r[o]=h;for(let u=1;u<s.length;u+=2)h.set(a(s[u]),a(s[u+1]));break;case"RegExp":r[o]=new RegExp(s[1],s[2]);break;case"Object":r[o]=Object(s[1]);break;case"BigInt":r[o]=BigInt(s[1]);break;case"null":const g=Object.create(null);r[o]=g;for(let u=1;u<s.length;u+=2)g[s[u]]=a(s[u+1]);break;case"Int8Array":case"Uint8Array":case"Uint8ClampedArray":case"Int16Array":case"Uint16Array":case"Int32Array":case"Uint32Array":case"Float32Array":case"Float64Array":case"BigInt64Array":case"BigUint64Array":{const u=globalThis[c],m=s[1],f=Pe(m),y=new u(f);r[o]=y;break}case"ArrayBuffer":{const u=s[1],m=Pe(u);r[o]=m;break}default:throw new Error(`Unknown type ${c}`)}}else{const c=new Array(s.length);r[o]=c;for(let l=0;l<s.length;l+=1){const d=s[l];d!==Dt&&(c[l]=a(d))}}else{const c={};r[o]=c;for(const l in s){const d=s[l];c[l]=a(d)}}return r[o]}return a(0)}const Ye=new Set(["load","prerender","csr","ssr","trailingSlash","config"]);[...Ye];const Gt=new Set([...Ye]);[...Gt];function Mt(e){return e.filter(n=>n!=null)}class ae{constructor(n,t){this.status=n,typeof t=="string"?this.body={message:t}:t?this.body=t:this.body={message:`Error: ${n}`}}toString(){return JSON.stringify(this.body)}}class Je{constructor(n,t){this.status=n,this.location=t}}class we extends Error{constructor(n,t,r){super(r),this.status=n,this.text=t}}const Ht="x-sveltekit-invalidated",Kt="x-sveltekit-trailing-slash";function X(e){return e instanceof ae||e instanceof we?e.status:500}function zt(e){return e instanceof we?e.text:"Internal Error"}const C=Be(Ge)??{},H=Be(qe)??{},x={url:xe({}),page:xe({}),navigating:ye(null),updated:Ct()};function be(e){C[e]=_e()}function Yt(e,n){let t=e+1;for(;C[t];)delete C[t],t+=1;for(t=n+1;H[t];)delete H[t],t+=1}function F(e){return location.href=e.href,new Promise(()=>{})}function Ce(){}let oe,pe,Z,U,ge,V;const We=[],Q=[];let R=null;const Xe=[],Jt=[];let j=[],_={branch:[],error:null,url:null},ve=!1,ee=!1,Ne=!0,K=!1,B=!1,Ze=!1,Ae=!1,ke,E,T,I,te;const G=new Set;async function sn(e,n,t){var a,o;document.URL!==location.href&&(location.href=location.href),V=e,oe=Lt(e),U=document.documentElement,ge=n,pe=e.nodes[0],Z=e.nodes[1],pe(),Z(),E=(a=history.state)==null?void 0:a[D],T=(o=history.state)==null?void 0:o[M],E||(E=T=Date.now(),history.replaceState({...history.state,[D]:E,[M]:T},""));const r=C[E];r&&(history.scrollRestoration="manual",scrollTo(r.x,r.y)),t?await rn(ge,t):tn(location.href,{replaceState:!0}),nn()}function Wt(){We.length=0,Ae=!1}function Qe(e){Q.some(n=>n==null?void 0:n.snapshot)&&(H[e]=Q.map(n=>{var t;return(t=n==null?void 0:n.snapshot)==null?void 0:t.capture()}))}function et(e){var n;(n=H[e])==null||n.forEach((t,r)=>{var a,o;(o=(a=Q[r])==null?void 0:a.snapshot)==null||o.restore(t)})}function Oe(){be(E),Le(Ge,C),Qe(T),Le(qe,H)}async function tt(e,n,t,r){return Y({type:"goto",url:He(e),keepfocus:n.keepFocus,noscroll:n.noScroll,replace_state:n.replaceState,state:n.state,redirect_count:t,nav_token:r,accept:()=>{n.invalidateAll&&(Ae=!0)}})}async function Xt(e){if(e.id!==(R==null?void 0:R.id)){const n={};G.add(n),R={id:e.id,token:n,promise:rt({...e,preload:n}).then(t=>(G.delete(n),t.type==="loaded"&&t.state.error&&(R=null),t))}}return R.promise}async function de(e){const n=oe.find(t=>t.exec(at(e)));n&&await Promise.all([...n.layouts,n.leaf].map(t=>t==null?void 0:t[1]()))}function nt(e,n,t){var o;_=e.state;const r=document.querySelector("style[data-sveltekit]");r&&r.remove(),I=e.props.page,ke=new V.root({target:n,props:{...e.props,stores:x,components:Q},hydrate:t,sync:!1}),et(T);const a={from:null,to:{params:_.params,route:{id:((o=_.route)==null?void 0:o.id)??null},url:new URL(location.href)},willUnload:!1,type:"enter",complete:Promise.resolve()};j.forEach(i=>i(a)),ee=!0}function ne({url:e,params:n,branch:t,status:r,error:a,route:o,form:i}){let s="never";if(L&&(e.pathname===L||e.pathname===L+"/"))s="always";else for(const u of t)(u==null?void 0:u.slash)!==void 0&&(s=u.slash);e.pathname=dt(e.pathname,s),e.search=e.search;const c={type:"loaded",state:{url:e,params:n,branch:t,error:a,route:o},props:{constructors:Mt(t).map(u=>u.node.component),page:I}};i!==void 0&&(c.props.form=i);let l={},d=!I,h=0;for(let u=0;u<Math.max(t.length,_.branch.length);u+=1){const m=t[u],f=_.branch[u];(m==null?void 0:m.data)!==(f==null?void 0:f.data)&&(d=!0),m&&(l={...l,...m.data},d&&(c.props[`data_${h}`]=l),h+=1)}return(!_.url||e.href!==_.url.href||_.error!==a||i!==void 0&&i!==I.form||d)&&(c.props.page={error:a,params:n,route:{id:(o==null?void 0:o.id)??null},state:{},status:r,url:new URL(e),form:i??null,data:d?l:I.data}),c}async function Ee({loader:e,parent:n,url:t,params:r,route:a,server_data_node:o}){var d,h,g;let i=null,s=!0;const c={dependencies:new Set,params:new Set,parent:!1,route:!1,url:!1,search_params:new Set},l=await e();if((d=l.universal)!=null&&d.load){let u=function(...f){for(const y of f){const{href:v}=new URL(y,t);c.dependencies.add(v)}};const m={route:new Proxy(a,{get:(f,y)=>(s&&(c.route=!0),f[y])}),params:new Proxy(r,{get:(f,y)=>(s&&c.params.add(y),f[y])}),data:(o==null?void 0:o.data)??null,url:mt(t,()=>{s&&(c.url=!0)},f=>{s&&c.search_params.add(f)}),async fetch(f,y){let v;f instanceof Request?(v=f.url,y={body:f.method==="GET"||f.method==="HEAD"?void 0:await f.blob(),cache:f.cache,credentials:f.credentials,headers:f.headers,integrity:f.integrity,keepalive:f.keepalive,method:f.method,mode:f.mode,redirect:f.redirect,referrer:f.referrer,referrerPolicy:f.referrerPolicy,signal:f.signal,...y}):v=f;const S=new URL(v,t);return s&&u(S.href),S.origin===t.origin&&(v=S.href.slice(t.origin.length)),ee?kt(v,S.href,y):At(v,y)},setHeaders:()=>{},depends:u,parent(){return s&&(c.parent=!0),n()},untrack(f){s=!1;try{return f()}finally{s=!0}}};i=await l.universal.load.call(null,m)??null}return{node:l,loader:e,server:o,universal:(h=l.universal)!=null&&h.load?{type:"data",data:i,uses:c}:null,data:i??(o==null?void 0:o.data)??null,slash:((g=l.universal)==null?void 0:g.trailingSlash)??(o==null?void 0:o.slash)}}function je(e,n,t,r,a,o){if(Ae)return!0;if(!a)return!1;if(a.parent&&e||a.route&&n||a.url&&t)return!0;for(const i of a.search_params)if(r.has(i))return!0;for(const i of a.params)if(o[i]!==_.params[i])return!0;for(const i of a.dependencies)if(We.some(s=>s(new URL(i))))return!0;return!1}function Se(e,n){return(e==null?void 0:e.type)==="data"?e:(e==null?void 0:e.type)==="skip"?n??null:null}function Zt(e,n){if(!e)return new Set(n.searchParams.keys());const t=new Set([...e.searchParams.keys(),...n.searchParams.keys()]);for(const r of t){const a=e.searchParams.getAll(r),o=n.searchParams.getAll(r);a.every(i=>o.includes(i))&&o.every(i=>a.includes(i))&&t.delete(r)}return t}function De({error:e,url:n,route:t,params:r}){return{type:"loaded",state:{error:e,url:n,route:t,params:r,branch:[]},props:{page:I,constructors:[]}}}async function rt({id:e,invalidating:n,url:t,params:r,route:a,preload:o}){if((R==null?void 0:R.id)===e)return G.delete(R.token),R.promise;const{errors:i,layouts:s,leaf:c}=a,l=[...s,c];i.forEach(p=>p==null?void 0:p().catch(()=>{})),l.forEach(p=>p==null?void 0:p[1]().catch(()=>{}));let d=null;const h=_.url?e!==_.url.pathname+_.url.search:!1,g=_.route?a.id!==_.route.id:!1,u=Zt(_.url,t);let m=!1;const f=l.map((p,b)=>{var P;const A=_.branch[b],k=!!(p!=null&&p[0])&&((A==null?void 0:A.loader)!==p[1]||je(m,g,h,u,(P=A.server)==null?void 0:P.uses,r));return k&&(m=!0),k});if(f.some(Boolean)){try{d=await it(t,f)}catch(p){const b=await $(p,{url:t,params:r,route:{id:e}});return G.has(o)?De({error:b,url:t,params:r,route:a}):se({status:X(p),error:b,url:t,route:a})}if(d.type==="redirect")return d}const y=d==null?void 0:d.nodes;let v=!1;const S=l.map(async(p,b)=>{var ie;if(!p)return;const A=_.branch[b],k=y==null?void 0:y[b];if((!k||k.type==="skip")&&p[1]===(A==null?void 0:A.loader)&&!je(v,g,h,u,(ie=A.universal)==null?void 0:ie.uses,r))return A;if(v=!0,(k==null?void 0:k.type)==="error")throw k;return Ee({loader:p[1],url:t,params:r,route:a,parent:async()=>{var Te;const Ie={};for(let ce=0;ce<b;ce+=1)Object.assign(Ie,(Te=await S[ce])==null?void 0:Te.data);return Ie},server_data_node:Se(k===void 0&&p[0]?{type:"skip"}:k??null,p[0]?A==null?void 0:A.server:void 0)})});for(const p of S)p.catch(()=>{});const w=[];for(let p=0;p<l.length;p+=1)if(l[p])try{w.push(await S[p])}catch(b){if(b instanceof Je)return{type:"redirect",location:b.location};if(G.has(o))return De({error:await $(b,{params:r,url:t,route:{id:a.id}}),url:t,params:r,route:a});let A=X(b),k;if(y!=null&&y.includes(b))A=b.status??A,k=b.error;else if(b instanceof ae)k=b.body;else{if(await x.updated.check())return await F(t);k=await $(b,{params:r,url:t,route:{id:a.id}})}const P=await Qt(p,w,i);return P?ne({url:t,params:r,branch:w.slice(0,P.idx).concat(P.node),status:A,error:k,route:a}):await st(t,{id:a.id},k,A)}else w.push(void 0);return ne({url:t,params:r,branch:w,status:200,error:null,route:a,form:n?void 0:null})}async function Qt(e,n,t){for(;e--;)if(t[e]){let r=e;for(;!n[r];)r-=1;try{return{idx:r+1,node:{node:await t[e](),loader:t[e],data:{},server:null,universal:null}}}catch{continue}}}async function se({status:e,error:n,url:t,route:r}){const a={};let o=null;if(V.server_loads[0]===0)try{const l=await it(t,[!0]);if(l.type!=="data"||l.nodes[0]&&l.nodes[0].type!=="data")throw 0;o=l.nodes[0]??null}catch{(t.origin!==z||t.pathname!==location.pathname||ve)&&await F(t)}const s=await Ee({loader:pe,url:t,params:a,route:r,parent:()=>Promise.resolve({}),server_data_node:Se(o)}),c={node:await Z(),loader:Z,universal:null,server:null,data:null};return ne({url:t,params:a,branch:[s,c],status:e,error:n,route:null})}function Re(e,n){if(!e||re(e,L))return;let t;try{t=V.hooks.reroute({url:new URL(e)})??e.pathname}catch{return}const r=at(t);for(const a of oe){const o=a.exec(r);if(o)return{id:e.pathname+e.search,invalidating:n,route:a,params:pt(o),url:e}}}function at(e){return ht(e.slice(L.length)||"/")}function ot({url:e,type:n,intent:t,delta:r}){let a=!1;const o=lt(_,t,e,n);r!==void 0&&(o.navigation.delta=r);const i={...o.navigation,cancel:()=>{a=!0,o.reject(new Error("navigation cancelled"))}};return K||Xe.forEach(s=>s(i)),a?null:o}async function Y({type:e,url:n,popped:t,keepfocus:r,noscroll:a,replace_state:o,state:i={},redirect_count:s=0,nav_token:c={},accept:l=Ce,block:d=Ce}){const h=Re(n,!1),g=ot({url:n,type:e,delta:t==null?void 0:t.delta,intent:h});if(!g){d();return}const u=E,m=T;l(),K=!0,ee&&x.navigating.set(g.navigation),te=c;let f=h&&await rt(h);if(!f){if(re(n,L))return await F(n);f=await st(n,{id:null},await $(new we(404,"Not Found",`Not found: ${n.pathname}`),{url:n,params:{},route:{id:null}}),404)}if(n=(h==null?void 0:h.url)||n,te!==c)return g.reject(new Error("navigation aborted")),!1;if(f.type==="redirect")if(s>=20)f=await se({status:500,error:await $(new Error("Redirect loop"),{url:n,params:{},route:{id:null}}),url:n,route:{id:null}});else return tt(new URL(f.location,n).href,{},s+1,c),!1;else f.props.page.status>=400&&await x.updated.check()&&await F(n);if(Wt(),be(u),Qe(m),f.props.page.url.pathname!==n.pathname&&(n.pathname=f.props.page.url.pathname),i=t?t.state:i,!t){const w=o?0:1,p={[D]:E+=w,[M]:T+=w,[Me]:i};(o?history.replaceState:history.pushState).call(history,p,"",n),o||Yt(E,T)}if(R=null,f.props.page.state=i,ee){_=f.state,f.props.page&&(f.props.page.url=n);const w=(await Promise.all(Jt.map(p=>p(g.navigation)))).filter(p=>typeof p=="function");if(w.length>0){let p=function(){j=j.filter(b=>!w.includes(b))};w.push(p),j.push(...w)}ke.$set(f.props),Ze=!0}else nt(f,ge,!1);const{activeElement:y}=document;await ut();const v=t?t.scroll:a?_e():null;if(Ne){const w=n.hash&&document.getElementById(decodeURIComponent(n.hash.slice(1)));v?scrollTo(v.x,v.y):w?w.scrollIntoView():scrollTo(0,0)}const S=document.activeElement!==y&&document.activeElement!==document.body;!r&&!S&&an(),Ne=!0,f.props.page&&(I=f.props.page),K=!1,e==="popstate"&&et(T),g.fulfil(void 0),j.forEach(w=>w(g.navigation)),x.navigating.set(null)}async function st(e,n,t,r){return e.origin===z&&e.pathname===location.pathname&&!ve?await se({status:r,error:t,url:e,route:n}):await F(e)}function en(){let e;U.addEventListener("mousemove",o=>{const i=o.target;clearTimeout(e),e=setTimeout(()=>{r(i,2)},20)});function n(o){r(o.composedPath()[0],1)}U.addEventListener("mousedown",n),U.addEventListener("touchstart",n,{passive:!0});const t=new IntersectionObserver(o=>{for(const i of o)i.isIntersecting&&(de(i.target.href),t.unobserve(i.target))},{threshold:0});function r(o,i){const s=ze(o,U);if(!s)return;const{url:c,external:l,download:d}=he(s,L);if(l||d)return;const h=W(s);if(!h.reload)if(i<=h.preload_data){const g=Re(c,!1);g&&Xt(g)}else i<=h.preload_code&&de(c.pathname)}function a(){t.disconnect();for(const o of U.querySelectorAll("a")){const{url:i,external:s,download:c}=he(o,L);if(s||c)continue;const l=W(o);l.reload||(l.preload_code===J.viewport&&t.observe(o),l.preload_code===J.eager&&de(i.pathname))}}j.push(a),a()}function $(e,n){if(e instanceof ae)return e.body;const t=X(e),r=zt(e);return V.hooks.handleError({error:e,event:n,status:t,message:r})??{message:r}}function tn(e,n={}){return e=He(e),e.origin!==z?Promise.reject(new Error("goto: invalid URL")):tt(e,n,0)}function nn(){var n;history.scrollRestoration="manual",addEventListener("beforeunload",t=>{let r=!1;if(Oe(),!K){const a=lt(_,void 0,null,"leave"),o={...a.navigation,cancel:()=>{r=!0,a.reject(new Error("navigation cancelled"))}};Xe.forEach(i=>i(o))}r?(t.preventDefault(),t.returnValue=""):history.scrollRestoration="auto"}),addEventListener("visibilitychange",()=>{document.visibilityState==="hidden"&&Oe()}),(n=navigator.connection)!=null&&n.saveData||en(),U.addEventListener("click",async t=>{var g;if(t.button||t.which!==1||t.metaKey||t.ctrlKey||t.shiftKey||t.altKey||t.defaultPrevented)return;const r=ze(t.composedPath()[0],U);if(!r)return;const{url:a,external:o,target:i,download:s}=he(r,L);if(!a)return;if(i==="_parent"||i==="_top"){if(window.parent!==window)return}else if(i&&i!=="_self")return;const c=W(r);if(!(r instanceof SVGAElement)&&a.protocol!==location.protocol&&!(a.protocol==="https:"||a.protocol==="http:")||s)return;if(o||c.reload){ot({url:a,type:"link"})?K=!0:t.preventDefault();return}const[d,h]=a.href.split("#");if(h!==void 0&&d===fe(location)){const[,u]=_.url.href.split("#");if(u===h){t.preventDefault(),h===""||h==="top"&&r.ownerDocument.getElementById("top")===null?window.scrollTo({top:0}):(g=r.ownerDocument.getElementById(h))==null||g.scrollIntoView();return}if(B=!0,be(E),e(a),!c.replace_state)return;B=!1}t.preventDefault(),await new Promise(u=>{requestAnimationFrame(()=>{setTimeout(u,0)}),setTimeout(u,100)}),Y({type:"link",url:a,keepfocus:c.keepfocus,noscroll:c.noscroll,replace_state:c.replace_state??a.href===location.href})}),U.addEventListener("submit",t=>{if(t.defaultPrevented)return;const r=HTMLFormElement.prototype.cloneNode.call(t.target),a=t.submitter;if(((a==null?void 0:a.formTarget)||r.target)==="_blank"||((a==null?void 0:a.formMethod)||r.method)!=="get")return;const s=new URL((a==null?void 0:a.hasAttribute("formaction"))&&(a==null?void 0:a.formAction)||r.action);if(re(s,L))return;const c=t.target,l=W(c);if(l.reload)return;t.preventDefault(),t.stopPropagation();const d=new FormData(c),h=a==null?void 0:a.getAttribute("name");h&&d.append(h,(a==null?void 0:a.getAttribute("value"))??""),s.search=new URLSearchParams(d).toString(),Y({type:"form",url:s,keepfocus:l.keepfocus,noscroll:l.noscroll,replace_state:l.replace_state??s.href===location.href})}),addEventListener("popstate",async t=>{var r;if((r=t.state)!=null&&r[D]){const a=t.state[D];if(te={},a===E)return;const o=C[a],i=t.state[Me]??{},s=new URL(t.state[Pt]??location.href),c=t.state[M],l=fe(location)===fe(_.url);if(c===T&&(Ze||l)){e(s),C[E]=_e(),o&&scrollTo(o.x,o.y),i!==I.state&&(I={...I,state:i},ke.$set({page:I})),E=a;return}const h=a-E;await Y({type:"popstate",url:s,popped:{state:i,scroll:o,delta:h},accept:()=>{E=a,T=c},block:()=>{history.go(-h)},nav_token:te})}else if(!B){const a=new URL(location.href);e(a)}}),addEventListener("hashchange",()=>{B&&(B=!1,history.replaceState({...history.state,[D]:++E,[M]:T},"",location.href))});for(const t of document.querySelectorAll("link"))t.rel==="icon"&&(t.href=t.href);addEventListener("pageshow",t=>{t.persisted&&x.navigating.set(null)});function e(t){_.url=t,x.page.set({...I,url:t}),x.page.notify()}}async function rn(e,{status:n=200,error:t,node_ids:r,params:a,route:o,data:i,form:s}){ve=!0;const c=new URL(location.href);({params:a={},route:o={id:null}}=Re(c,!1)||{});let l;try{const d=r.map(async(u,m)=>{const f=i[m];return f!=null&&f.uses&&(f.uses=ct(f.uses)),Ee({loader:V.nodes[u],url:c,params:a,route:o,parent:async()=>{const y={};for(let v=0;v<m;v+=1)Object.assign(y,(await d[v]).data);return y},server_data_node:Se(f)})}),h=await Promise.all(d),g=oe.find(({id:u})=>u===o.id);if(g){const u=g.layouts;for(let m=0;m<u.length;m++)u[m]||h.splice(m,0,void 0)}l=ne({url:c,params:a,branch:h,status:n,error:t,form:s,route:g??null})}catch(d){if(d instanceof Je){await F(new URL(d.location,location.href));return}l=await se({status:X(d),error:await $(d,{url:c,params:a,route:o}),url:c,route:o})}l.props.page&&(l.props.page.state={}),nt(l,e,!0)}async function it(e,n){var a;const t=new URL(e);t.pathname=wt(e.pathname),e.pathname.endsWith("/")&&t.searchParams.append(Kt,"1"),t.searchParams.append(Ht,n.map(o=>o?"1":"0").join(""));const r=await Ve(t.href);if(!r.ok){let o;throw(a=r.headers.get("content-type"))!=null&&a.includes("application/json")?o=await r.json():r.status===404?o="Not Found":r.status===500&&(o="Internal Error"),new ae(r.status,o)}return new Promise(async o=>{var h;const i=new Map,s=r.body.getReader(),c=new TextDecoder;function l(g){return qt(g,{Promise:u=>new Promise((m,f)=>{i.set(u,{fulfil:m,reject:f})})})}let d="";for(;;){const{done:g,value:u}=await s.read();if(g&&!d)break;for(d+=!u&&d?`
-`:c.decode(u,{stream:!0});;){const m=d.indexOf(`
-`);if(m===-1)break;const f=JSON.parse(d.slice(0,m));if(d=d.slice(m+1),f.type==="redirect")return o(f);if(f.type==="data")(h=f.nodes)==null||h.forEach(y=>{(y==null?void 0:y.type)==="data"&&(y.uses=ct(y.uses),y.data=l(y.data))}),o(f);else if(f.type==="chunk"){const{id:y,data:v,error:S}=f,w=i.get(y);i.delete(y),S?w.reject(l(S)):w.fulfil(l(v))}}}})}function ct(e){return{dependencies:new Set((e==null?void 0:e.dependencies)??[]),params:new Set((e==null?void 0:e.params)??[]),parent:!!(e!=null&&e.parent),route:!!(e!=null&&e.route),url:!!(e!=null&&e.url),search_params:new Set((e==null?void 0:e.search_params)??[])}}function an(){const e=document.querySelector("[autofocus]");if(e)e.focus();else{const n=document.body,t=n.getAttribute("tabindex");n.tabIndex=-1,n.focus({preventScroll:!0,focusVisible:!1}),t!==null?n.setAttribute("tabindex",t):n.removeAttribute("tabindex");const r=getSelection();if(r&&r.type!=="None"){const a=[];for(let o=0;o<r.rangeCount;o+=1)a.push(r.getRangeAt(o));setTimeout(()=>{if(r.rangeCount===a.length){for(let o=0;o<r.rangeCount;o+=1){const i=a[o],s=r.getRangeAt(o);if(i.commonAncestorContainer!==s.commonAncestorContainer||i.startContainer!==s.startContainer||i.endContainer!==s.endContainer||i.startOffset!==s.startOffset||i.endOffset!==s.endOffset)return}r.removeAllRanges()}})}}}function lt(e,n,t,r){var c,l;let a,o;const i=new Promise((d,h)=>{a=d,o=h});return i.catch(()=>{}),{navigation:{from:{params:e.params,route:{id:((c=e.route)==null?void 0:c.id)??null},url:e.url},to:t&&{params:(n==null?void 0:n.params)??null,route:{id:((l=n==null?void 0:n.route)==null?void 0:l.id)??null},url:t},willUnload:!n,type:r,complete:i},fulfil:a,reject:o}}export{sn as a,x as s};
diff --git a/sandbox/_app/immutable/chunks/entry.DlSSSUcQ.js b/sandbox/_app/immutable/chunks/entry.DlSSSUcQ.js
new file mode 100644
index 00000000..9648517a
--- /dev/null
+++ b/sandbox/_app/immutable/chunks/entry.DlSSSUcQ.js
@@ -0,0 +1,3 @@
+import{n as le,s as ft,z as ut}from"./scheduler.iSOZDcen.js";new URL("sveltekit-internal://");function dt(e,n){return e==="/"||n==="ignore"?e:n==="never"?e.endsWith("/")?e.slice(0,-1):e:n==="always"&&!e.endsWith("/")?e+"/":e}function ht(e){return e.split("%25").map(decodeURI).join("%25")}function pt(e){for(const n in e)e[n]=decodeURIComponent(e[n]);return e}function fe({href:e}){return e.split("#")[0]}const gt=["href","pathname","search","toString","toJSON"];function mt(e,n,t){const r=new URL(e);Object.defineProperty(r,"searchParams",{value:new Proxy(r.searchParams,{get(a,o){if(o==="get"||o==="getAll"||o==="has")return s=>(t(s),a[o](s));n();const i=Reflect.get(a,o);return typeof i=="function"?i.bind(a):i}}),enumerable:!0,configurable:!0});for(const a of gt)Object.defineProperty(r,a,{get(){return n(),e[a]},enumerable:!0,configurable:!0});return r}const yt="/__data.json",_t=".html__data.json";function wt(e){return e.endsWith(".html")?e.replace(/\.html$/,_t):e.replace(/\/$/,"")+yt}function bt(...e){let n=5381;for(const t of e)if(typeof t=="string"){let r=t.length;for(;r;)n=n*33^t.charCodeAt(--r)}else if(ArrayBuffer.isView(t)){const r=new Uint8Array(t.buffer,t.byteOffset,t.byteLength);let a=r.length;for(;a;)n=n*33^r[--a]}else throw new TypeError("value must be a string or TypedArray");return(n>>>0).toString(36)}function vt(e){const n=atob(e),t=new Uint8Array(n.length);for(let r=0;r<n.length;r++)t[r]=n.charCodeAt(r);return t.buffer}const Ve=window.fetch;window.fetch=(e,n)=>((e instanceof Request?e.method:(n==null?void 0:n.method)||"GET")!=="GET"&&B.delete(me(e)),Ve(e,n));const B=new Map;function At(e,n){const t=me(e,n),r=document.querySelector(t);if(r!=null&&r.textContent){let{body:a,...o}=JSON.parse(r.textContent);const i=r.getAttribute("data-ttl");return i&&B.set(t,{body:a,init:o,ttl:1e3*Number(i)}),r.getAttribute("data-b64")!==null&&(a=vt(a)),Promise.resolve(new Response(a,o))}return window.fetch(e,n)}function kt(e,n,t){if(B.size>0){const r=me(e,t),a=B.get(r);if(a){if(performance.now()<a.ttl&&["default","force-cache","only-if-cached",void 0].includes(t==null?void 0:t.cache))return new Response(a.body,a.init);B.delete(r)}}return window.fetch(n,t)}function me(e,n){let r=`script[data-sveltekit-fetched][data-url=${JSON.stringify(e instanceof Request?e.url:e)}]`;if(n!=null&&n.headers||n!=null&&n.body){const a=[];n.headers&&a.push([...new Headers(n.headers)].join(",")),n.body&&(typeof n.body=="string"||ArrayBuffer.isView(n.body))&&a.push(n.body),r+=`[data-hash="${bt(...a)}"]`}return r}const Et=/^(\[)?(\.\.\.)?(\w+)(?:=(\w+))?(\])?$/;function St(e){const n=[];return{pattern:e==="/"?/^\/$/:new RegExp(`^${It(e).map(r=>{const a=/^\[\.\.\.(\w+)(?:=(\w+))?\]$/.exec(r);if(a)return n.push({name:a[1],matcher:a[2],optional:!1,rest:!0,chained:!0}),"(?:/(.*))?";const o=/^\[\[(\w+)(?:=(\w+))?\]\]$/.exec(r);if(o)return n.push({name:o[1],matcher:o[2],optional:!0,rest:!1,chained:!0}),"(?:/([^/]+))?";if(!r)return;const i=r.split(/\[(.+?)\](?!\])/);return"/"+i.map((c,l)=>{if(l%2){if(c.startsWith("x+"))return ue(String.fromCharCode(parseInt(c.slice(2),16)));if(c.startsWith("u+"))return ue(String.fromCharCode(...c.slice(2).split("-").map(f=>parseInt(f,16))));const d=Et.exec(c),[,h,g,u,m]=d;return n.push({name:u,matcher:m,optional:!!h,rest:!!g,chained:g?l===1&&i[0]==="":!1}),g?"(.*?)":h?"([^/]*)?":"([^/]+?)"}return ue(c)}).join("")}).join("")}/?$`),params:n}}function Rt(e){return!/^\([^)]+\)$/.test(e)}function It(e){return e.slice(1).split("/").filter(Rt)}function Tt(e,n,t){const r={},a=e.slice(1),o=a.filter(s=>s!==void 0);let i=0;for(let s=0;s<n.length;s+=1){const c=n[s];let l=a[s-i];if(c.chained&&c.rest&&i&&(l=a.slice(s-i,s+1).filter(d=>d).join("/"),i=0),l===void 0){c.rest&&(r[c.name]="");continue}if(!c.matcher||t[c.matcher](l)){r[c.name]=l;const d=n[s+1],h=a[s+1];d&&!d.rest&&d.optional&&h&&c.chained&&(i=0),!d&&!h&&Object.keys(r).length===o.length&&(i=0);continue}if(c.optional&&c.chained){i++;continue}return}if(!i)return r}function ue(e){return e.normalize().replace(/[[\]]/g,"\\$&").replace(/%/g,"%25").replace(/\//g,"%2[Ff]").replace(/\?/g,"%3[Ff]").replace(/#/g,"%23").replace(/[.*+?^${}()|\\]/g,"\\$&")}function Lt({nodes:e,server_loads:n,dictionary:t,matchers:r}){const a=new Set(n);return Object.entries(t).map(([s,[c,l,d]])=>{const{pattern:h,params:g}=St(s),u={id:s,exec:m=>{const f=h.exec(m);if(f)return Tt(f,g,r)},errors:[1,...d||[]].map(m=>e[m]),layouts:[0,...l||[]].map(i),leaf:o(c)};return u.errors.length=u.layouts.length=Math.max(u.errors.length,u.layouts.length),u});function o(s){const c=s<0;return c&&(s=~s),[c,e[s]]}function i(s){return s===void 0?s:[a.has(s),e[s]]}}function qe(e,n=JSON.parse){try{return n(sessionStorage[e])}catch{}}function Le(e,n,t=JSON.stringify){const r=t(n);try{sessionStorage[e]=r}catch{}}const N=[];function ye(e,n=le){let t;const r=new Set;function a(s){if(ft(e,s)&&(e=s,t)){const c=!N.length;for(const l of r)l[1](),N.push(l,e);if(c){for(let l=0;l<N.length;l+=2)N[l][0](N[l+1]);N.length=0}}}function o(s){a(s(e))}function i(s,c=le){const l=[s,c];return r.add(l),r.size===1&&(t=n(a,o)||le),s(e),()=>{r.delete(l),r.size===0&&t&&(t(),t=null)}}return{set:a,update:o,subscribe:i}}var $e;const L=(($e=globalThis.__sveltekit_n38cpq)==null?void 0:$e.base)??"/fractal-web/sandbox";var Fe;const Ut=((Fe=globalThis.__sveltekit_n38cpq)==null?void 0:Fe.assets)??L,xt="1733230400796",Be="sveltekit:snapshot",Ge="sveltekit:scroll",Me="sveltekit:states",Pt="sveltekit:pageurl",D="sveltekit:history",M="sveltekit:navigation",J={tap:1,hover:2,viewport:3,eager:4,off:-1,false:-1},z=location.origin;function He(e){if(e instanceof URL)return e;let n=document.baseURI;if(!n){const t=document.getElementsByTagName("base");n=t.length?t[0].href:document.URL}return new URL(e,n)}function _e(){return{x:pageXOffset,y:pageYOffset}}function O(e,n){return e.getAttribute(`data-sveltekit-${n}`)}const Ue={...J,"":J.hover};function Ke(e){let n=e.assignedSlot??e.parentNode;return(n==null?void 0:n.nodeType)===11&&(n=n.host),n}function ze(e,n){for(;e&&e!==n;){if(e.nodeName.toUpperCase()==="A"&&e.hasAttribute("href"))return e;e=Ke(e)}}function he(e,n){let t;try{t=new URL(e instanceof SVGAElement?e.href.baseVal:e.href,document.baseURI)}catch{}const r=e instanceof SVGAElement?e.target.baseVal:e.target,a=!t||!!r||re(t,n)||(e.getAttribute("rel")||"").split(/\s+/).includes("external"),o=(t==null?void 0:t.origin)===z&&e.hasAttribute("download");return{url:t,external:a,target:r,download:o}}function W(e){let n=null,t=null,r=null,a=null,o=null,i=null,s=e;for(;s&&s!==document.documentElement;)r===null&&(r=O(s,"preload-code")),a===null&&(a=O(s,"preload-data")),n===null&&(n=O(s,"keepfocus")),t===null&&(t=O(s,"noscroll")),o===null&&(o=O(s,"reload")),i===null&&(i=O(s,"replacestate")),s=Ke(s);function c(l){switch(l){case"":case"true":return!0;case"off":case"false":return!1;default:return}}return{preload_code:Ue[r??"off"],preload_data:Ue[a??"off"],keepfocus:c(n),noscroll:c(t),reload:c(o),replace_state:c(i)}}function xe(e){const n=ye(e);let t=!0;function r(){t=!0,n.update(i=>i)}function a(i){t=!1,n.set(i)}function o(i){let s;return n.subscribe(c=>{(s===void 0||t&&c!==s)&&i(s=c)})}return{notify:r,set:a,subscribe:o}}function Ct(){const{set:e,subscribe:n}=ye(!1);let t;async function r(){clearTimeout(t);try{const a=await fetch(`${Ut}/_app/version.json`,{headers:{pragma:"no-cache","cache-control":"no-cache"}});if(!a.ok)return!1;const i=(await a.json()).version!==xt;return i&&(e(!0),clearTimeout(t)),i}catch{return!1}}return{subscribe:n,check:r}}function re(e,n){return e.origin!==z||!e.pathname.startsWith(n)}function Pe(e){const n=Ot(e),t=new ArrayBuffer(n.length),r=new DataView(t);for(let a=0;a<t.byteLength;a++)r.setUint8(a,n.charCodeAt(a));return t}const Nt="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";function Ot(e){e.length%4===0&&(e=e.replace(/==?$/,""));let n="",t=0,r=0;for(let a=0;a<e.length;a++)t<<=6,t|=Nt.indexOf(e[a]),r+=6,r===24&&(n+=String.fromCharCode((t&16711680)>>16),n+=String.fromCharCode((t&65280)>>8),n+=String.fromCharCode(t&255),t=r=0);return r===12?(t>>=4,n+=String.fromCharCode(t)):r===18&&(t>>=2,n+=String.fromCharCode((t&65280)>>8),n+=String.fromCharCode(t&255)),n}const jt=-1,Dt=-2,$t=-3,Ft=-4,Vt=-5,qt=-6;function Bt(e,n){if(typeof e=="number")return a(e,!0);if(!Array.isArray(e)||e.length===0)throw new Error("Invalid input");const t=e,r=Array(t.length);function a(o,i=!1){if(o===jt)return;if(o===$t)return NaN;if(o===Ft)return 1/0;if(o===Vt)return-1/0;if(o===qt)return-0;if(i)throw new Error("Invalid input");if(o in r)return r[o];const s=t[o];if(!s||typeof s!="object")r[o]=s;else if(Array.isArray(s))if(typeof s[0]=="string"){const c=s[0],l=n==null?void 0:n[c];if(l)return r[o]=l(a(s[1]));switch(c){case"Date":r[o]=new Date(s[1]);break;case"Set":const d=new Set;r[o]=d;for(let u=1;u<s.length;u+=1)d.add(a(s[u]));break;case"Map":const h=new Map;r[o]=h;for(let u=1;u<s.length;u+=2)h.set(a(s[u]),a(s[u+1]));break;case"RegExp":r[o]=new RegExp(s[1],s[2]);break;case"Object":r[o]=Object(s[1]);break;case"BigInt":r[o]=BigInt(s[1]);break;case"null":const g=Object.create(null);r[o]=g;for(let u=1;u<s.length;u+=2)g[s[u]]=a(s[u+1]);break;case"Int8Array":case"Uint8Array":case"Uint8ClampedArray":case"Int16Array":case"Uint16Array":case"Int32Array":case"Uint32Array":case"Float32Array":case"Float64Array":case"BigInt64Array":case"BigUint64Array":{const u=globalThis[c],m=s[1],f=Pe(m),y=new u(f);r[o]=y;break}case"ArrayBuffer":{const u=s[1],m=Pe(u);r[o]=m;break}default:throw new Error(`Unknown type ${c}`)}}else{const c=new Array(s.length);r[o]=c;for(let l=0;l<s.length;l+=1){const d=s[l];d!==Dt&&(c[l]=a(d))}}else{const c={};r[o]=c;for(const l in s){const d=s[l];c[l]=a(d)}}return r[o]}return a(0)}const Ye=new Set(["load","prerender","csr","ssr","trailingSlash","config"]);[...Ye];const Gt=new Set([...Ye]);[...Gt];function Mt(e){return e.filter(n=>n!=null)}class ae{constructor(n,t){this.status=n,typeof t=="string"?this.body={message:t}:t?this.body=t:this.body={message:`Error: ${n}`}}toString(){return JSON.stringify(this.body)}}class Je{constructor(n,t){this.status=n,this.location=t}}class we extends Error{constructor(n,t,r){super(r),this.status=n,this.text=t}}const Ht="x-sveltekit-invalidated",Kt="x-sveltekit-trailing-slash";function X(e){return e instanceof ae||e instanceof we?e.status:500}function zt(e){return e instanceof we?e.text:"Internal Error"}const C=qe(Ge)??{},H=qe(Be)??{},x={url:xe({}),page:xe({}),navigating:ye(null),updated:Ct()};function be(e){C[e]=_e()}function Yt(e,n){let t=e+1;for(;C[t];)delete C[t],t+=1;for(t=n+1;H[t];)delete H[t],t+=1}function F(e){return location.href=e.href,new Promise(()=>{})}function Ce(){}let oe,pe,Z,U,ge,V;const We=[],Q=[];let R=null;const Xe=[],Jt=[];let j=[],_={branch:[],error:null,url:null},ve=!1,ee=!1,Ne=!0,K=!1,q=!1,Ze=!1,Ae=!1,ke,E,T,I,te;const G=new Set;async function sn(e,n,t){var a,o;document.URL!==location.href&&(location.href=location.href),V=e,oe=Lt(e),U=document.documentElement,ge=n,pe=e.nodes[0],Z=e.nodes[1],pe(),Z(),E=(a=history.state)==null?void 0:a[D],T=(o=history.state)==null?void 0:o[M],E||(E=T=Date.now(),history.replaceState({...history.state,[D]:E,[M]:T},""));const r=C[E];r&&(history.scrollRestoration="manual",scrollTo(r.x,r.y)),t?await rn(ge,t):tn(location.href,{replaceState:!0}),nn()}function Wt(){We.length=0,Ae=!1}function Qe(e){Q.some(n=>n==null?void 0:n.snapshot)&&(H[e]=Q.map(n=>{var t;return(t=n==null?void 0:n.snapshot)==null?void 0:t.capture()}))}function et(e){var n;(n=H[e])==null||n.forEach((t,r)=>{var a,o;(o=(a=Q[r])==null?void 0:a.snapshot)==null||o.restore(t)})}function Oe(){be(E),Le(Ge,C),Qe(T),Le(Be,H)}async function tt(e,n,t,r){return Y({type:"goto",url:He(e),keepfocus:n.keepFocus,noscroll:n.noScroll,replace_state:n.replaceState,state:n.state,redirect_count:t,nav_token:r,accept:()=>{n.invalidateAll&&(Ae=!0)}})}async function Xt(e){if(e.id!==(R==null?void 0:R.id)){const n={};G.add(n),R={id:e.id,token:n,promise:rt({...e,preload:n}).then(t=>(G.delete(n),t.type==="loaded"&&t.state.error&&(R=null),t))}}return R.promise}async function de(e){const n=oe.find(t=>t.exec(at(e)));n&&await Promise.all([...n.layouts,n.leaf].map(t=>t==null?void 0:t[1]()))}function nt(e,n,t){var o;_=e.state;const r=document.querySelector("style[data-sveltekit]");r&&r.remove(),I=e.props.page,ke=new V.root({target:n,props:{...e.props,stores:x,components:Q},hydrate:t,sync:!1}),et(T);const a={from:null,to:{params:_.params,route:{id:((o=_.route)==null?void 0:o.id)??null},url:new URL(location.href)},willUnload:!1,type:"enter",complete:Promise.resolve()};j.forEach(i=>i(a)),ee=!0}function ne({url:e,params:n,branch:t,status:r,error:a,route:o,form:i}){let s="never";if(L&&(e.pathname===L||e.pathname===L+"/"))s="always";else for(const u of t)(u==null?void 0:u.slash)!==void 0&&(s=u.slash);e.pathname=dt(e.pathname,s),e.search=e.search;const c={type:"loaded",state:{url:e,params:n,branch:t,error:a,route:o},props:{constructors:Mt(t).map(u=>u.node.component),page:I}};i!==void 0&&(c.props.form=i);let l={},d=!I,h=0;for(let u=0;u<Math.max(t.length,_.branch.length);u+=1){const m=t[u],f=_.branch[u];(m==null?void 0:m.data)!==(f==null?void 0:f.data)&&(d=!0),m&&(l={...l,...m.data},d&&(c.props[`data_${h}`]=l),h+=1)}return(!_.url||e.href!==_.url.href||_.error!==a||i!==void 0&&i!==I.form||d)&&(c.props.page={error:a,params:n,route:{id:(o==null?void 0:o.id)??null},state:{},status:r,url:new URL(e),form:i??null,data:d?l:I.data}),c}async function Ee({loader:e,parent:n,url:t,params:r,route:a,server_data_node:o}){var d,h,g;let i=null,s=!0;const c={dependencies:new Set,params:new Set,parent:!1,route:!1,url:!1,search_params:new Set},l=await e();if((d=l.universal)!=null&&d.load){let u=function(...f){for(const y of f){const{href:v}=new URL(y,t);c.dependencies.add(v)}};const m={route:new Proxy(a,{get:(f,y)=>(s&&(c.route=!0),f[y])}),params:new Proxy(r,{get:(f,y)=>(s&&c.params.add(y),f[y])}),data:(o==null?void 0:o.data)??null,url:mt(t,()=>{s&&(c.url=!0)},f=>{s&&c.search_params.add(f)}),async fetch(f,y){let v;f instanceof Request?(v=f.url,y={body:f.method==="GET"||f.method==="HEAD"?void 0:await f.blob(),cache:f.cache,credentials:f.credentials,headers:f.headers,integrity:f.integrity,keepalive:f.keepalive,method:f.method,mode:f.mode,redirect:f.redirect,referrer:f.referrer,referrerPolicy:f.referrerPolicy,signal:f.signal,...y}):v=f;const S=new URL(v,t);return s&&u(S.href),S.origin===t.origin&&(v=S.href.slice(t.origin.length)),ee?kt(v,S.href,y):At(v,y)},setHeaders:()=>{},depends:u,parent(){return s&&(c.parent=!0),n()},untrack(f){s=!1;try{return f()}finally{s=!0}}};i=await l.universal.load.call(null,m)??null}return{node:l,loader:e,server:o,universal:(h=l.universal)!=null&&h.load?{type:"data",data:i,uses:c}:null,data:i??(o==null?void 0:o.data)??null,slash:((g=l.universal)==null?void 0:g.trailingSlash)??(o==null?void 0:o.slash)}}function je(e,n,t,r,a,o){if(Ae)return!0;if(!a)return!1;if(a.parent&&e||a.route&&n||a.url&&t)return!0;for(const i of a.search_params)if(r.has(i))return!0;for(const i of a.params)if(o[i]!==_.params[i])return!0;for(const i of a.dependencies)if(We.some(s=>s(new URL(i))))return!0;return!1}function Se(e,n){return(e==null?void 0:e.type)==="data"?e:(e==null?void 0:e.type)==="skip"?n??null:null}function Zt(e,n){if(!e)return new Set(n.searchParams.keys());const t=new Set([...e.searchParams.keys(),...n.searchParams.keys()]);for(const r of t){const a=e.searchParams.getAll(r),o=n.searchParams.getAll(r);a.every(i=>o.includes(i))&&o.every(i=>a.includes(i))&&t.delete(r)}return t}function De({error:e,url:n,route:t,params:r}){return{type:"loaded",state:{error:e,url:n,route:t,params:r,branch:[]},props:{page:I,constructors:[]}}}async function rt({id:e,invalidating:n,url:t,params:r,route:a,preload:o}){if((R==null?void 0:R.id)===e)return G.delete(R.token),R.promise;const{errors:i,layouts:s,leaf:c}=a,l=[...s,c];i.forEach(p=>p==null?void 0:p().catch(()=>{})),l.forEach(p=>p==null?void 0:p[1]().catch(()=>{}));let d=null;const h=_.url?e!==_.url.pathname+_.url.search:!1,g=_.route?a.id!==_.route.id:!1,u=Zt(_.url,t);let m=!1;const f=l.map((p,b)=>{var P;const A=_.branch[b],k=!!(p!=null&&p[0])&&((A==null?void 0:A.loader)!==p[1]||je(m,g,h,u,(P=A.server)==null?void 0:P.uses,r));return k&&(m=!0),k});if(f.some(Boolean)){try{d=await it(t,f)}catch(p){const b=await $(p,{url:t,params:r,route:{id:e}});return G.has(o)?De({error:b,url:t,params:r,route:a}):se({status:X(p),error:b,url:t,route:a})}if(d.type==="redirect")return d}const y=d==null?void 0:d.nodes;let v=!1;const S=l.map(async(p,b)=>{var ie;if(!p)return;const A=_.branch[b],k=y==null?void 0:y[b];if((!k||k.type==="skip")&&p[1]===(A==null?void 0:A.loader)&&!je(v,g,h,u,(ie=A.universal)==null?void 0:ie.uses,r))return A;if(v=!0,(k==null?void 0:k.type)==="error")throw k;return Ee({loader:p[1],url:t,params:r,route:a,parent:async()=>{var Te;const Ie={};for(let ce=0;ce<b;ce+=1)Object.assign(Ie,(Te=await S[ce])==null?void 0:Te.data);return Ie},server_data_node:Se(k===void 0&&p[0]?{type:"skip"}:k??null,p[0]?A==null?void 0:A.server:void 0)})});for(const p of S)p.catch(()=>{});const w=[];for(let p=0;p<l.length;p+=1)if(l[p])try{w.push(await S[p])}catch(b){if(b instanceof Je)return{type:"redirect",location:b.location};if(G.has(o))return De({error:await $(b,{params:r,url:t,route:{id:a.id}}),url:t,params:r,route:a});let A=X(b),k;if(y!=null&&y.includes(b))A=b.status??A,k=b.error;else if(b instanceof ae)k=b.body;else{if(await x.updated.check())return await F(t);k=await $(b,{params:r,url:t,route:{id:a.id}})}const P=await Qt(p,w,i);return P?ne({url:t,params:r,branch:w.slice(0,P.idx).concat(P.node),status:A,error:k,route:a}):await st(t,{id:a.id},k,A)}else w.push(void 0);return ne({url:t,params:r,branch:w,status:200,error:null,route:a,form:n?void 0:null})}async function Qt(e,n,t){for(;e--;)if(t[e]){let r=e;for(;!n[r];)r-=1;try{return{idx:r+1,node:{node:await t[e](),loader:t[e],data:{},server:null,universal:null}}}catch{continue}}}async function se({status:e,error:n,url:t,route:r}){const a={};let o=null;if(V.server_loads[0]===0)try{const l=await it(t,[!0]);if(l.type!=="data"||l.nodes[0]&&l.nodes[0].type!=="data")throw 0;o=l.nodes[0]??null}catch{(t.origin!==z||t.pathname!==location.pathname||ve)&&await F(t)}const s=await Ee({loader:pe,url:t,params:a,route:r,parent:()=>Promise.resolve({}),server_data_node:Se(o)}),c={node:await Z(),loader:Z,universal:null,server:null,data:null};return ne({url:t,params:a,branch:[s,c],status:e,error:n,route:null})}function Re(e,n){if(!e||re(e,L))return;let t;try{t=V.hooks.reroute({url:new URL(e)})??e.pathname}catch{return}const r=at(t);for(const a of oe){const o=a.exec(r);if(o)return{id:e.pathname+e.search,invalidating:n,route:a,params:pt(o),url:e}}}function at(e){return ht(e.slice(L.length)||"/")}function ot({url:e,type:n,intent:t,delta:r}){let a=!1;const o=lt(_,t,e,n);r!==void 0&&(o.navigation.delta=r);const i={...o.navigation,cancel:()=>{a=!0,o.reject(new Error("navigation cancelled"))}};return K||Xe.forEach(s=>s(i)),a?null:o}async function Y({type:e,url:n,popped:t,keepfocus:r,noscroll:a,replace_state:o,state:i={},redirect_count:s=0,nav_token:c={},accept:l=Ce,block:d=Ce}){const h=Re(n,!1),g=ot({url:n,type:e,delta:t==null?void 0:t.delta,intent:h});if(!g){d();return}const u=E,m=T;l(),K=!0,ee&&x.navigating.set(g.navigation),te=c;let f=h&&await rt(h);if(!f){if(re(n,L))return await F(n);f=await st(n,{id:null},await $(new we(404,"Not Found",`Not found: ${n.pathname}`),{url:n,params:{},route:{id:null}}),404)}if(n=(h==null?void 0:h.url)||n,te!==c)return g.reject(new Error("navigation aborted")),!1;if(f.type==="redirect")if(s>=20)f=await se({status:500,error:await $(new Error("Redirect loop"),{url:n,params:{},route:{id:null}}),url:n,route:{id:null}});else return tt(new URL(f.location,n).href,{},s+1,c),!1;else f.props.page.status>=400&&await x.updated.check()&&await F(n);if(Wt(),be(u),Qe(m),f.props.page.url.pathname!==n.pathname&&(n.pathname=f.props.page.url.pathname),i=t?t.state:i,!t){const w=o?0:1,p={[D]:E+=w,[M]:T+=w,[Me]:i};(o?history.replaceState:history.pushState).call(history,p,"",n),o||Yt(E,T)}if(R=null,f.props.page.state=i,ee){_=f.state,f.props.page&&(f.props.page.url=n);const w=(await Promise.all(Jt.map(p=>p(g.navigation)))).filter(p=>typeof p=="function");if(w.length>0){let p=function(){j=j.filter(b=>!w.includes(b))};w.push(p),j.push(...w)}ke.$set(f.props),Ze=!0}else nt(f,ge,!1);const{activeElement:y}=document;await ut();const v=t?t.scroll:a?_e():null;if(Ne){const w=n.hash&&document.getElementById(decodeURIComponent(n.hash.slice(1)));v?scrollTo(v.x,v.y):w?w.scrollIntoView():scrollTo(0,0)}const S=document.activeElement!==y&&document.activeElement!==document.body;!r&&!S&&an(),Ne=!0,f.props.page&&(I=f.props.page),K=!1,e==="popstate"&&et(T),g.fulfil(void 0),j.forEach(w=>w(g.navigation)),x.navigating.set(null)}async function st(e,n,t,r){return e.origin===z&&e.pathname===location.pathname&&!ve?await se({status:r,error:t,url:e,route:n}):await F(e)}function en(){let e;U.addEventListener("mousemove",o=>{const i=o.target;clearTimeout(e),e=setTimeout(()=>{r(i,2)},20)});function n(o){r(o.composedPath()[0],1)}U.addEventListener("mousedown",n),U.addEventListener("touchstart",n,{passive:!0});const t=new IntersectionObserver(o=>{for(const i of o)i.isIntersecting&&(de(i.target.href),t.unobserve(i.target))},{threshold:0});function r(o,i){const s=ze(o,U);if(!s)return;const{url:c,external:l,download:d}=he(s,L);if(l||d)return;const h=W(s);if(!h.reload)if(i<=h.preload_data){const g=Re(c,!1);g&&Xt(g)}else i<=h.preload_code&&de(c.pathname)}function a(){t.disconnect();for(const o of U.querySelectorAll("a")){const{url:i,external:s,download:c}=he(o,L);if(s||c)continue;const l=W(o);l.reload||(l.preload_code===J.viewport&&t.observe(o),l.preload_code===J.eager&&de(i.pathname))}}j.push(a),a()}function $(e,n){if(e instanceof ae)return e.body;const t=X(e),r=zt(e);return V.hooks.handleError({error:e,event:n,status:t,message:r})??{message:r}}function tn(e,n={}){return e=He(e),e.origin!==z?Promise.reject(new Error("goto: invalid URL")):tt(e,n,0)}function nn(){var n;history.scrollRestoration="manual",addEventListener("beforeunload",t=>{let r=!1;if(Oe(),!K){const a=lt(_,void 0,null,"leave"),o={...a.navigation,cancel:()=>{r=!0,a.reject(new Error("navigation cancelled"))}};Xe.forEach(i=>i(o))}r?(t.preventDefault(),t.returnValue=""):history.scrollRestoration="auto"}),addEventListener("visibilitychange",()=>{document.visibilityState==="hidden"&&Oe()}),(n=navigator.connection)!=null&&n.saveData||en(),U.addEventListener("click",async t=>{var g;if(t.button||t.which!==1||t.metaKey||t.ctrlKey||t.shiftKey||t.altKey||t.defaultPrevented)return;const r=ze(t.composedPath()[0],U);if(!r)return;const{url:a,external:o,target:i,download:s}=he(r,L);if(!a)return;if(i==="_parent"||i==="_top"){if(window.parent!==window)return}else if(i&&i!=="_self")return;const c=W(r);if(!(r instanceof SVGAElement)&&a.protocol!==location.protocol&&!(a.protocol==="https:"||a.protocol==="http:")||s)return;if(o||c.reload){ot({url:a,type:"link"})?K=!0:t.preventDefault();return}const[d,h]=a.href.split("#");if(h!==void 0&&d===fe(location)){const[,u]=_.url.href.split("#");if(u===h){t.preventDefault(),h===""||h==="top"&&r.ownerDocument.getElementById("top")===null?window.scrollTo({top:0}):(g=r.ownerDocument.getElementById(h))==null||g.scrollIntoView();return}if(q=!0,be(E),e(a),!c.replace_state)return;q=!1}t.preventDefault(),await new Promise(u=>{requestAnimationFrame(()=>{setTimeout(u,0)}),setTimeout(u,100)}),Y({type:"link",url:a,keepfocus:c.keepfocus,noscroll:c.noscroll,replace_state:c.replace_state??a.href===location.href})}),U.addEventListener("submit",t=>{if(t.defaultPrevented)return;const r=HTMLFormElement.prototype.cloneNode.call(t.target),a=t.submitter;if(((a==null?void 0:a.formTarget)||r.target)==="_blank"||((a==null?void 0:a.formMethod)||r.method)!=="get")return;const s=new URL((a==null?void 0:a.hasAttribute("formaction"))&&(a==null?void 0:a.formAction)||r.action);if(re(s,L))return;const c=t.target,l=W(c);if(l.reload)return;t.preventDefault(),t.stopPropagation();const d=new FormData(c),h=a==null?void 0:a.getAttribute("name");h&&d.append(h,(a==null?void 0:a.getAttribute("value"))??""),s.search=new URLSearchParams(d).toString(),Y({type:"form",url:s,keepfocus:l.keepfocus,noscroll:l.noscroll,replace_state:l.replace_state??s.href===location.href})}),addEventListener("popstate",async t=>{var r;if((r=t.state)!=null&&r[D]){const a=t.state[D];if(te={},a===E)return;const o=C[a],i=t.state[Me]??{},s=new URL(t.state[Pt]??location.href),c=t.state[M],l=fe(location)===fe(_.url);if(c===T&&(Ze||l)){e(s),C[E]=_e(),o&&scrollTo(o.x,o.y),i!==I.state&&(I={...I,state:i},ke.$set({page:I})),E=a;return}const h=a-E;await Y({type:"popstate",url:s,popped:{state:i,scroll:o,delta:h},accept:()=>{E=a,T=c},block:()=>{history.go(-h)},nav_token:te})}else if(!q){const a=new URL(location.href);e(a)}}),addEventListener("hashchange",()=>{q&&(q=!1,history.replaceState({...history.state,[D]:++E,[M]:T},"",location.href))});for(const t of document.querySelectorAll("link"))t.rel==="icon"&&(t.href=t.href);addEventListener("pageshow",t=>{t.persisted&&x.navigating.set(null)});function e(t){_.url=t,x.page.set({...I,url:t}),x.page.notify()}}async function rn(e,{status:n=200,error:t,node_ids:r,params:a,route:o,data:i,form:s}){ve=!0;const c=new URL(location.href);({params:a={},route:o={id:null}}=Re(c,!1)||{});let l;try{const d=r.map(async(u,m)=>{const f=i[m];return f!=null&&f.uses&&(f.uses=ct(f.uses)),Ee({loader:V.nodes[u],url:c,params:a,route:o,parent:async()=>{const y={};for(let v=0;v<m;v+=1)Object.assign(y,(await d[v]).data);return y},server_data_node:Se(f)})}),h=await Promise.all(d),g=oe.find(({id:u})=>u===o.id);if(g){const u=g.layouts;for(let m=0;m<u.length;m++)u[m]||h.splice(m,0,void 0)}l=ne({url:c,params:a,branch:h,status:n,error:t,form:s,route:g??null})}catch(d){if(d instanceof Je){await F(new URL(d.location,location.href));return}l=await se({status:X(d),error:await $(d,{url:c,params:a,route:o}),url:c,route:o})}l.props.page&&(l.props.page.state={}),nt(l,e,!0)}async function it(e,n){var a;const t=new URL(e);t.pathname=wt(e.pathname),e.pathname.endsWith("/")&&t.searchParams.append(Kt,"1"),t.searchParams.append(Ht,n.map(o=>o?"1":"0").join(""));const r=await Ve(t.href);if(!r.ok){let o;throw(a=r.headers.get("content-type"))!=null&&a.includes("application/json")?o=await r.json():r.status===404?o="Not Found":r.status===500&&(o="Internal Error"),new ae(r.status,o)}return new Promise(async o=>{var h;const i=new Map,s=r.body.getReader(),c=new TextDecoder;function l(g){return Bt(g,{Promise:u=>new Promise((m,f)=>{i.set(u,{fulfil:m,reject:f})})})}let d="";for(;;){const{done:g,value:u}=await s.read();if(g&&!d)break;for(d+=!u&&d?`
+`:c.decode(u,{stream:!0});;){const m=d.indexOf(`
+`);if(m===-1)break;const f=JSON.parse(d.slice(0,m));if(d=d.slice(m+1),f.type==="redirect")return o(f);if(f.type==="data")(h=f.nodes)==null||h.forEach(y=>{(y==null?void 0:y.type)==="data"&&(y.uses=ct(y.uses),y.data=l(y.data))}),o(f);else if(f.type==="chunk"){const{id:y,data:v,error:S}=f,w=i.get(y);i.delete(y),S?w.reject(l(S)):w.fulfil(l(v))}}}})}function ct(e){return{dependencies:new Set((e==null?void 0:e.dependencies)??[]),params:new Set((e==null?void 0:e.params)??[]),parent:!!(e!=null&&e.parent),route:!!(e!=null&&e.route),url:!!(e!=null&&e.url),search_params:new Set((e==null?void 0:e.search_params)??[])}}function an(){const e=document.querySelector("[autofocus]");if(e)e.focus();else{const n=document.body,t=n.getAttribute("tabindex");n.tabIndex=-1,n.focus({preventScroll:!0,focusVisible:!1}),t!==null?n.setAttribute("tabindex",t):n.removeAttribute("tabindex");const r=getSelection();if(r&&r.type!=="None"){const a=[];for(let o=0;o<r.rangeCount;o+=1)a.push(r.getRangeAt(o));setTimeout(()=>{if(r.rangeCount===a.length){for(let o=0;o<r.rangeCount;o+=1){const i=a[o],s=r.getRangeAt(o);if(i.commonAncestorContainer!==s.commonAncestorContainer||i.startContainer!==s.startContainer||i.endContainer!==s.endContainer||i.startOffset!==s.startOffset||i.endOffset!==s.endOffset)return}r.removeAllRanges()}})}}}function lt(e,n,t,r){var c,l;let a,o;const i=new Promise((d,h)=>{a=d,o=h});return i.catch(()=>{}),{navigation:{from:{params:e.params,route:{id:((c=e.route)==null?void 0:c.id)??null},url:e.url},to:t&&{params:(n==null?void 0:n.params)??null,route:{id:((l=n==null?void 0:n.route)==null?void 0:l.id)??null},url:t},willUnload:!n,type:r,complete:i},fulfil:a,reject:o}}export{sn as a,x as s};
diff --git a/sandbox/_app/immutable/entry/app.RlIV0G6f.js b/sandbox/_app/immutable/entry/app.DJpl0SZY.js
similarity index 96%
rename from sandbox/_app/immutable/entry/app.RlIV0G6f.js
rename to sandbox/_app/immutable/entry/app.DJpl0SZY.js
index c612f880..156de59e 100644
--- a/sandbox/_app/immutable/entry/app.RlIV0G6f.js
+++ b/sandbox/_app/immutable/entry/app.DJpl0SZY.js
@@ -1,2 +1,2 @@
-const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["../nodes/0.MuF82cNa.js","../chunks/scheduler.iSOZDcen.js","../chunks/index.DpHn5gGv.js","../nodes/1.HAJu32k_.js","../chunks/entry.CQp4sx6U.js","../nodes/2.Nbm9cqcB.js","../assets/2.DCOzxPH2.css"])))=>i.map(i=>d[i]);
-import{s as V,b as B,p as h,j as U,k as v,i as p,q as j,r as z,e as W,d as F,f as G,v as q,w as d,t as H,h as J,m as K,x as C,y,z as Q}from"../chunks/scheduler.iSOZDcen.js";import{S as X,i as Y,a as g,c as L,t as w,g as A,b as P,d as I,m as R,e as S}from"../chunks/index.DpHn5gGv.js";const Z="modulepreload",M=function(o,e){return new URL(o,e).href},N={},D=function(e,n,s){let r=Promise.resolve();if(n&&n.length>0){const t=document.getElementsByTagName("link"),i=document.querySelector("meta[property=csp-nonce]"),l=(i==null?void 0:i.nonce)||(i==null?void 0:i.getAttribute("nonce"));r=Promise.allSettled(n.map(f=>{if(f=M(f,s),f in N)return;N[f]=!0;const a=f.endsWith(".css"),_=a?'[rel="stylesheet"]':"";if(!!s)for(let k=t.length-1;k>=0;k--){const E=t[k];if(E.href===f&&(!a||E.rel==="stylesheet"))return}else if(document.querySelector(`link[href="${f}"]${_}`))return;const m=document.createElement("link");if(m.rel=a?"stylesheet":Z,a||(m.as="script"),m.crossOrigin="",m.href=f,l&&m.setAttribute("nonce",l),document.head.appendChild(m),a)return new Promise((k,E)=>{m.addEventListener("load",k),m.addEventListener("error",()=>E(new Error(`Unable to preload CSS for ${f}`)))})}))}function u(t){const i=new Event("vite:preloadError",{cancelable:!0});if(i.payload=t,window.dispatchEvent(i),!i.defaultPrevented)throw t}return r.then(t=>{for(const i of t||[])i.status==="rejected"&&u(i.reason);return e().catch(u)})},re={};function $(o){let e,n,s;var r=o[1][0];function u(t,i){return{props:{data:t[3],form:t[2]}}}return r&&(e=y(r,u(o)),o[12](e)),{c(){e&&P(e.$$.fragment),n=h()},l(t){e&&I(e.$$.fragment,t),n=h()},m(t,i){e&&R(e,t,i),v(t,n,i),s=!0},p(t,i){if(i&2&&r!==(r=t[1][0])){if(e){A();const l=e;g(l.$$.fragment,1,0,()=>{S(l,1)}),L()}r?(e=y(r,u(t)),t[12](e),P(e.$$.fragment),w(e.$$.fragment,1),R(e,n.parentNode,n)):e=null}else if(r){const l={};i&8&&(l.data=t[3]),i&4&&(l.form=t[2]),e.$set(l)}},i(t){s||(e&&w(e.$$.fragment,t),s=!0)},o(t){e&&g(e.$$.fragment,t),s=!1},d(t){t&&p(n),o[12](null),e&&S(e,t)}}}function x(o){let e,n,s;var r=o[1][0];function u(t,i){return{props:{data:t[3],$$slots:{default:[ee]},$$scope:{ctx:t}}}}return r&&(e=y(r,u(o)),o[11](e)),{c(){e&&P(e.$$.fragment),n=h()},l(t){e&&I(e.$$.fragment,t),n=h()},m(t,i){e&&R(e,t,i),v(t,n,i),s=!0},p(t,i){if(i&2&&r!==(r=t[1][0])){if(e){A();const l=e;g(l.$$.fragment,1,0,()=>{S(l,1)}),L()}r?(e=y(r,u(t)),t[11](e),P(e.$$.fragment),w(e.$$.fragment,1),R(e,n.parentNode,n)):e=null}else if(r){const l={};i&8&&(l.data=t[3]),i&8215&&(l.$$scope={dirty:i,ctx:t}),e.$set(l)}},i(t){s||(e&&w(e.$$.fragment,t),s=!0)},o(t){e&&g(e.$$.fragment,t),s=!1},d(t){t&&p(n),o[11](null),e&&S(e,t)}}}function ee(o){let e,n,s;var r=o[1][1];function u(t,i){return{props:{data:t[4],form:t[2]}}}return r&&(e=y(r,u(o)),o[10](e)),{c(){e&&P(e.$$.fragment),n=h()},l(t){e&&I(e.$$.fragment,t),n=h()},m(t,i){e&&R(e,t,i),v(t,n,i),s=!0},p(t,i){if(i&2&&r!==(r=t[1][1])){if(e){A();const l=e;g(l.$$.fragment,1,0,()=>{S(l,1)}),L()}r?(e=y(r,u(t)),t[10](e),P(e.$$.fragment),w(e.$$.fragment,1),R(e,n.parentNode,n)):e=null}else if(r){const l={};i&16&&(l.data=t[4]),i&4&&(l.form=t[2]),e.$set(l)}},i(t){s||(e&&w(e.$$.fragment,t),s=!0)},o(t){e&&g(e.$$.fragment,t),s=!1},d(t){t&&p(n),o[10](null),e&&S(e,t)}}}function O(o){let e,n=o[6]&&T(o);return{c(){e=W("div"),n&&n.c(),this.h()},l(s){e=F(s,"DIV",{id:!0,"aria-live":!0,"aria-atomic":!0,style:!0});var r=G(e);n&&n.l(r),r.forEach(p),this.h()},h(){q(e,"id","svelte-announcer"),q(e,"aria-live","assertive"),q(e,"aria-atomic","true"),d(e,"position","absolute"),d(e,"left","0"),d(e,"top","0"),d(e,"clip","rect(0 0 0 0)"),d(e,"clip-path","inset(50%)"),d(e,"overflow","hidden"),d(e,"white-space","nowrap"),d(e,"width","1px"),d(e,"height","1px")},m(s,r){v(s,e,r),n&&n.m(e,null)},p(s,r){s[6]?n?n.p(s,r):(n=T(s),n.c(),n.m(e,null)):n&&(n.d(1),n=null)},d(s){s&&p(e),n&&n.d()}}}function T(o){let e;return{c(){e=H(o[7])},l(n){e=J(n,o[7])},m(n,s){v(n,e,s)},p(n,s){s&128&&K(e,n[7])},d(n){n&&p(e)}}}function te(o){let e,n,s,r,u;const t=[x,$],i=[];function l(a,_){return a[1][1]?0:1}e=l(o),n=i[e]=t[e](o);let f=o[5]&&O(o);return{c(){n.c(),s=B(),f&&f.c(),r=h()},l(a){n.l(a),s=U(a),f&&f.l(a),r=h()},m(a,_){i[e].m(a,_),v(a,s,_),f&&f.m(a,_),v(a,r,_),u=!0},p(a,[_]){let b=e;e=l(a),e===b?i[e].p(a,_):(A(),g(i[b],1,1,()=>{i[b]=null}),L(),n=i[e],n?n.p(a,_):(n=i[e]=t[e](a),n.c()),w(n,1),n.m(s.parentNode,s)),a[5]?f?f.p(a,_):(f=O(a),f.c(),f.m(r.parentNode,r)):f&&(f.d(1),f=null)},i(a){u||(w(n),u=!0)},o(a){g(n),u=!1},d(a){a&&(p(s),p(r)),i[e].d(a),f&&f.d(a)}}}function ne(o,e,n){let{stores:s}=e,{page:r}=e,{constructors:u}=e,{components:t=[]}=e,{form:i}=e,{data_0:l=null}=e,{data_1:f=null}=e;j(s.page.notify);let a=!1,_=!1,b=null;z(()=>{const c=s.page.subscribe(()=>{a&&(n(6,_=!0),Q().then(()=>{n(7,b=document.title||"untitled page")}))});return n(5,a=!0),c});function m(c){C[c?"unshift":"push"](()=>{t[1]=c,n(0,t)})}function k(c){C[c?"unshift":"push"](()=>{t[0]=c,n(0,t)})}function E(c){C[c?"unshift":"push"](()=>{t[0]=c,n(0,t)})}return o.$$set=c=>{"stores"in c&&n(8,s=c.stores),"page"in c&&n(9,r=c.page),"constructors"in c&&n(1,u=c.constructors),"components"in c&&n(0,t=c.components),"form"in c&&n(2,i=c.form),"data_0"in c&&n(3,l=c.data_0),"data_1"in c&&n(4,f=c.data_1)},o.$$.update=()=>{o.$$.dirty&768&&s.page.set(r)},[t,u,i,l,f,a,_,b,s,r,m,k,E]}class oe extends X{constructor(e){super(),Y(this,e,ne,te,V,{stores:8,page:9,constructors:1,components:0,form:2,data_0:3,data_1:4})}}const ae=[()=>D(()=>import("../nodes/0.MuF82cNa.js"),__vite__mapDeps([0,1,2]),import.meta.url),()=>D(()=>import("../nodes/1.HAJu32k_.js"),__vite__mapDeps([3,1,2,4]),import.meta.url),()=>D(()=>import("../nodes/2.Nbm9cqcB.js"),__vite__mapDeps([5,1,2,6]),import.meta.url)],le=[],fe={"/":[2]},ce={handleError:({error:o})=>{console.error(o)},reroute:()=>{}};export{fe as dictionary,ce as hooks,re as matchers,ae as nodes,oe as root,le as server_loads};
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["../nodes/0.MuF82cNa.js","../chunks/scheduler.iSOZDcen.js","../chunks/index.DpHn5gGv.js","../nodes/1.C_advE6v.js","../chunks/entry.DlSSSUcQ.js","../nodes/2.Nbm9cqcB.js","../assets/2.DCOzxPH2.css"])))=>i.map(i=>d[i]);
+import{s as V,b as B,p as h,j as U,k as v,i as p,q as j,r as z,e as W,d as F,f as G,v as q,w as d,t as H,h as J,m as K,x as C,y,z as Q}from"../chunks/scheduler.iSOZDcen.js";import{S as X,i as Y,a as g,c as L,t as w,g as A,b as P,d as I,m as R,e as S}from"../chunks/index.DpHn5gGv.js";const Z="modulepreload",M=function(o,e){return new URL(o,e).href},N={},D=function(e,n,s){let r=Promise.resolve();if(n&&n.length>0){const t=document.getElementsByTagName("link"),i=document.querySelector("meta[property=csp-nonce]"),l=(i==null?void 0:i.nonce)||(i==null?void 0:i.getAttribute("nonce"));r=Promise.allSettled(n.map(f=>{if(f=M(f,s),f in N)return;N[f]=!0;const a=f.endsWith(".css"),_=a?'[rel="stylesheet"]':"";if(!!s)for(let k=t.length-1;k>=0;k--){const E=t[k];if(E.href===f&&(!a||E.rel==="stylesheet"))return}else if(document.querySelector(`link[href="${f}"]${_}`))return;const m=document.createElement("link");if(m.rel=a?"stylesheet":Z,a||(m.as="script"),m.crossOrigin="",m.href=f,l&&m.setAttribute("nonce",l),document.head.appendChild(m),a)return new Promise((k,E)=>{m.addEventListener("load",k),m.addEventListener("error",()=>E(new Error(`Unable to preload CSS for ${f}`)))})}))}function u(t){const i=new Event("vite:preloadError",{cancelable:!0});if(i.payload=t,window.dispatchEvent(i),!i.defaultPrevented)throw t}return r.then(t=>{for(const i of t||[])i.status==="rejected"&&u(i.reason);return e().catch(u)})},re={};function $(o){let e,n,s;var r=o[1][0];function u(t,i){return{props:{data:t[3],form:t[2]}}}return r&&(e=y(r,u(o)),o[12](e)),{c(){e&&P(e.$$.fragment),n=h()},l(t){e&&I(e.$$.fragment,t),n=h()},m(t,i){e&&R(e,t,i),v(t,n,i),s=!0},p(t,i){if(i&2&&r!==(r=t[1][0])){if(e){A();const l=e;g(l.$$.fragment,1,0,()=>{S(l,1)}),L()}r?(e=y(r,u(t)),t[12](e),P(e.$$.fragment),w(e.$$.fragment,1),R(e,n.parentNode,n)):e=null}else if(r){const l={};i&8&&(l.data=t[3]),i&4&&(l.form=t[2]),e.$set(l)}},i(t){s||(e&&w(e.$$.fragment,t),s=!0)},o(t){e&&g(e.$$.fragment,t),s=!1},d(t){t&&p(n),o[12](null),e&&S(e,t)}}}function x(o){let e,n,s;var r=o[1][0];function u(t,i){return{props:{data:t[3],$$slots:{default:[ee]},$$scope:{ctx:t}}}}return r&&(e=y(r,u(o)),o[11](e)),{c(){e&&P(e.$$.fragment),n=h()},l(t){e&&I(e.$$.fragment,t),n=h()},m(t,i){e&&R(e,t,i),v(t,n,i),s=!0},p(t,i){if(i&2&&r!==(r=t[1][0])){if(e){A();const l=e;g(l.$$.fragment,1,0,()=>{S(l,1)}),L()}r?(e=y(r,u(t)),t[11](e),P(e.$$.fragment),w(e.$$.fragment,1),R(e,n.parentNode,n)):e=null}else if(r){const l={};i&8&&(l.data=t[3]),i&8215&&(l.$$scope={dirty:i,ctx:t}),e.$set(l)}},i(t){s||(e&&w(e.$$.fragment,t),s=!0)},o(t){e&&g(e.$$.fragment,t),s=!1},d(t){t&&p(n),o[11](null),e&&S(e,t)}}}function ee(o){let e,n,s;var r=o[1][1];function u(t,i){return{props:{data:t[4],form:t[2]}}}return r&&(e=y(r,u(o)),o[10](e)),{c(){e&&P(e.$$.fragment),n=h()},l(t){e&&I(e.$$.fragment,t),n=h()},m(t,i){e&&R(e,t,i),v(t,n,i),s=!0},p(t,i){if(i&2&&r!==(r=t[1][1])){if(e){A();const l=e;g(l.$$.fragment,1,0,()=>{S(l,1)}),L()}r?(e=y(r,u(t)),t[10](e),P(e.$$.fragment),w(e.$$.fragment,1),R(e,n.parentNode,n)):e=null}else if(r){const l={};i&16&&(l.data=t[4]),i&4&&(l.form=t[2]),e.$set(l)}},i(t){s||(e&&w(e.$$.fragment,t),s=!0)},o(t){e&&g(e.$$.fragment,t),s=!1},d(t){t&&p(n),o[10](null),e&&S(e,t)}}}function O(o){let e,n=o[6]&&T(o);return{c(){e=W("div"),n&&n.c(),this.h()},l(s){e=F(s,"DIV",{id:!0,"aria-live":!0,"aria-atomic":!0,style:!0});var r=G(e);n&&n.l(r),r.forEach(p),this.h()},h(){q(e,"id","svelte-announcer"),q(e,"aria-live","assertive"),q(e,"aria-atomic","true"),d(e,"position","absolute"),d(e,"left","0"),d(e,"top","0"),d(e,"clip","rect(0 0 0 0)"),d(e,"clip-path","inset(50%)"),d(e,"overflow","hidden"),d(e,"white-space","nowrap"),d(e,"width","1px"),d(e,"height","1px")},m(s,r){v(s,e,r),n&&n.m(e,null)},p(s,r){s[6]?n?n.p(s,r):(n=T(s),n.c(),n.m(e,null)):n&&(n.d(1),n=null)},d(s){s&&p(e),n&&n.d()}}}function T(o){let e;return{c(){e=H(o[7])},l(n){e=J(n,o[7])},m(n,s){v(n,e,s)},p(n,s){s&128&&K(e,n[7])},d(n){n&&p(e)}}}function te(o){let e,n,s,r,u;const t=[x,$],i=[];function l(a,_){return a[1][1]?0:1}e=l(o),n=i[e]=t[e](o);let f=o[5]&&O(o);return{c(){n.c(),s=B(),f&&f.c(),r=h()},l(a){n.l(a),s=U(a),f&&f.l(a),r=h()},m(a,_){i[e].m(a,_),v(a,s,_),f&&f.m(a,_),v(a,r,_),u=!0},p(a,[_]){let b=e;e=l(a),e===b?i[e].p(a,_):(A(),g(i[b],1,1,()=>{i[b]=null}),L(),n=i[e],n?n.p(a,_):(n=i[e]=t[e](a),n.c()),w(n,1),n.m(s.parentNode,s)),a[5]?f?f.p(a,_):(f=O(a),f.c(),f.m(r.parentNode,r)):f&&(f.d(1),f=null)},i(a){u||(w(n),u=!0)},o(a){g(n),u=!1},d(a){a&&(p(s),p(r)),i[e].d(a),f&&f.d(a)}}}function ne(o,e,n){let{stores:s}=e,{page:r}=e,{constructors:u}=e,{components:t=[]}=e,{form:i}=e,{data_0:l=null}=e,{data_1:f=null}=e;j(s.page.notify);let a=!1,_=!1,b=null;z(()=>{const c=s.page.subscribe(()=>{a&&(n(6,_=!0),Q().then(()=>{n(7,b=document.title||"untitled page")}))});return n(5,a=!0),c});function m(c){C[c?"unshift":"push"](()=>{t[1]=c,n(0,t)})}function k(c){C[c?"unshift":"push"](()=>{t[0]=c,n(0,t)})}function E(c){C[c?"unshift":"push"](()=>{t[0]=c,n(0,t)})}return o.$$set=c=>{"stores"in c&&n(8,s=c.stores),"page"in c&&n(9,r=c.page),"constructors"in c&&n(1,u=c.constructors),"components"in c&&n(0,t=c.components),"form"in c&&n(2,i=c.form),"data_0"in c&&n(3,l=c.data_0),"data_1"in c&&n(4,f=c.data_1)},o.$$.update=()=>{o.$$.dirty&768&&s.page.set(r)},[t,u,i,l,f,a,_,b,s,r,m,k,E]}class oe extends X{constructor(e){super(),Y(this,e,ne,te,V,{stores:8,page:9,constructors:1,components:0,form:2,data_0:3,data_1:4})}}const ae=[()=>D(()=>import("../nodes/0.MuF82cNa.js"),__vite__mapDeps([0,1,2]),import.meta.url),()=>D(()=>import("../nodes/1.C_advE6v.js"),__vite__mapDeps([3,1,2,4]),import.meta.url),()=>D(()=>import("../nodes/2.Nbm9cqcB.js"),__vite__mapDeps([5,1,2,6]),import.meta.url)],le=[],fe={"/":[2]},ce={handleError:({error:o})=>{console.error(o)},reroute:()=>{}};export{fe as dictionary,ce as hooks,re as matchers,ae as nodes,oe as root,le as server_loads};
diff --git a/sandbox/_app/immutable/entry/start.Bgv5pB2x.js b/sandbox/_app/immutable/entry/start.Bgv5pB2x.js
deleted file mode 100644
index 3cf5f280..00000000
--- a/sandbox/_app/immutable/entry/start.Bgv5pB2x.js
+++ /dev/null
@@ -1 +0,0 @@
-import{a as t}from"../chunks/entry.CQp4sx6U.js";export{t as start};
diff --git a/sandbox/_app/immutable/entry/start.DbxwO7Ec.js b/sandbox/_app/immutable/entry/start.DbxwO7Ec.js
new file mode 100644
index 00000000..64e2e100
--- /dev/null
+++ b/sandbox/_app/immutable/entry/start.DbxwO7Ec.js
@@ -0,0 +1 @@
+import{a as t}from"../chunks/entry.DlSSSUcQ.js";export{t as start};
diff --git a/sandbox/_app/immutable/nodes/1.HAJu32k_.js b/sandbox/_app/immutable/nodes/1.C_advE6v.js
similarity index 93%
rename from sandbox/_app/immutable/nodes/1.HAJu32k_.js
rename to sandbox/_app/immutable/nodes/1.C_advE6v.js
index 7c1cc50b..33fee3f6 100644
--- a/sandbox/_app/immutable/nodes/1.HAJu32k_.js
+++ b/sandbox/_app/immutable/nodes/1.C_advE6v.js
@@ -1 +1 @@
-import{s as S,e as _,t as f,b as x,d,f as g,h,i as l,j,k as m,l as v,m as $,n as E,o as k}from"../chunks/scheduler.iSOZDcen.js";import{S as q,i as y}from"../chunks/index.DpHn5gGv.js";import{s as C}from"../chunks/entry.CQp4sx6U.js";const H=()=>{const s=C;return{page:{subscribe:s.page.subscribe},navigating:{subscribe:s.navigating.subscribe},updated:s.updated}},P={subscribe(s){return H().page.subscribe(s)}};function w(s){var b;let t,r=s[0].status+"",o,n,i,c=((b=s[0].error)==null?void 0:b.message)+"",u;return{c(){t=_("h1"),o=f(r),n=x(),i=_("p"),u=f(c)},l(e){t=d(e,"H1",{});var a=g(t);o=h(a,r),a.forEach(l),n=j(e),i=d(e,"P",{});var p=g(i);u=h(p,c),p.forEach(l)},m(e,a){m(e,t,a),v(t,o),m(e,n,a),m(e,i,a),v(i,u)},p(e,[a]){var p;a&1&&r!==(r=e[0].status+"")&&$(o,r),a&1&&c!==(c=((p=e[0].error)==null?void 0:p.message)+"")&&$(u,c)},i:E,o:E,d(e){e&&(l(t),l(n),l(i))}}}function z(s,t,r){let o;return k(s,P,n=>r(0,o=n)),[o]}let F=class extends q{constructor(t){super(),y(this,t,z,w,S,{})}};export{F as component};
+import{s as S,e as _,t as f,b as x,d,f as g,h,i as l,j,k as m,l as v,m as $,n as E,o as k}from"../chunks/scheduler.iSOZDcen.js";import{S as q,i as y}from"../chunks/index.DpHn5gGv.js";import{s as C}from"../chunks/entry.DlSSSUcQ.js";const H=()=>{const s=C;return{page:{subscribe:s.page.subscribe},navigating:{subscribe:s.navigating.subscribe},updated:s.updated}},P={subscribe(s){return H().page.subscribe(s)}};function w(s){var b;let t,r=s[0].status+"",o,n,i,c=((b=s[0].error)==null?void 0:b.message)+"",u;return{c(){t=_("h1"),o=f(r),n=x(),i=_("p"),u=f(c)},l(e){t=d(e,"H1",{});var a=g(t);o=h(a,r),a.forEach(l),n=j(e),i=d(e,"P",{});var p=g(i);u=h(p,c),p.forEach(l)},m(e,a){m(e,t,a),v(t,o),m(e,n,a),m(e,i,a),v(i,u)},p(e,[a]){var p;a&1&&r!==(r=e[0].status+"")&&$(o,r),a&1&&c!==(c=((p=e[0].error)==null?void 0:p.message)+"")&&$(u,c)},i:E,o:E,d(e){e&&(l(t),l(n),l(i))}}}function z(s,t,r){let o;return k(s,P,n=>r(0,o=n)),[o]}let F=class extends q{constructor(t){super(),y(this,t,z,w,S,{})}};export{F as component};
diff --git a/sandbox/_app/version.json b/sandbox/_app/version.json
index e26a1a99..434e699a 100644
--- a/sandbox/_app/version.json
+++ b/sandbox/_app/version.json
@@ -1 +1 @@
-{"version":"1732696142439"}
\ No newline at end of file
+{"version":"1733230400796"}
\ No newline at end of file
diff --git a/sandbox/index.html b/sandbox/index.html
index 45fc1e18..f74eb3b0 100644
--- a/sandbox/index.html
+++ b/sandbox/index.html
@@ -7,10 +7,10 @@
 	<link rel="icon" href="/fractal-web/sandbox/favicon.png" />
 	<meta name="viewport" content="width=device-width, initial-scale=1" />
 	
-		<link rel="modulepreload" href="/fractal-web/sandbox/_app/immutable/entry/start.Bgv5pB2x.js">
-		<link rel="modulepreload" href="/fractal-web/sandbox/_app/immutable/chunks/entry.CQp4sx6U.js">
+		<link rel="modulepreload" href="/fractal-web/sandbox/_app/immutable/entry/start.DbxwO7Ec.js">
+		<link rel="modulepreload" href="/fractal-web/sandbox/_app/immutable/chunks/entry.DlSSSUcQ.js">
 		<link rel="modulepreload" href="/fractal-web/sandbox/_app/immutable/chunks/scheduler.iSOZDcen.js">
-		<link rel="modulepreload" href="/fractal-web/sandbox/_app/immutable/entry/app.RlIV0G6f.js">
+		<link rel="modulepreload" href="/fractal-web/sandbox/_app/immutable/entry/app.DJpl0SZY.js">
 		<link rel="modulepreload" href="/fractal-web/sandbox/_app/immutable/chunks/index.DpHn5gGv.js">
 	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
 		integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
@@ -22,7 +22,7 @@
 	<div>
 			<script>
 				{
-					__sveltekit_16jifrm = {
+					__sveltekit_n38cpq = {
 						base: "/fractal-web/sandbox",
 						assets: "/fractal-web/sandbox"
 					};
@@ -30,8 +30,8 @@
 					const element = document.currentScript.parentElement;
 
 					Promise.all([
-						import("/fractal-web/sandbox/_app/immutable/entry/start.Bgv5pB2x.js"),
-						import("/fractal-web/sandbox/_app/immutable/entry/app.RlIV0G6f.js")
+						import("/fractal-web/sandbox/_app/immutable/entry/start.DbxwO7Ec.js"),
+						import("/fractal-web/sandbox/_app/immutable/entry/app.DJpl0SZY.js")
 					]).then(([kit, app]) => {
 						kit.start(app, element);
 					});
diff --git a/search/search_index.json b/search/search_index.json
index b7367abf..fd53be48 100644
--- a/search/search_index.json
+++ b/search/search_index.json
@@ -1 +1 @@
-{"config":{"lang":["en"],"separator":"[\\s\\-]+","pipeline":["stopWordFilter"]},"docs":[{"location":"","title":"Fractal Web Client","text":""},{"location":"#fractal","title":"Fractal","text":"<p>Fractal is a framework developed at the BioVisionCenter to process bioimaging data at scale in the OME-Zarr format and prepare the images for interactive visualization.</p> <p></p> <p>This is the repository that contains the Fractal web client. Find more information about Fractal in general and the other repositories at the Fractal home page.</p>"},{"location":"#web-client-architecture","title":"Web client architecture","text":"<p>The client is a Svelte application that uses SvelteKit as a framework. The application is composed of a set of pages that are rendered by a node server and served to a client browser. The node server acts as a proxy to the fractal server, forwarding the requests to the server and returning the responses to the client. Find more details in specific pages.</p>"},{"location":"#license-and-contributors","title":"License and contributors","text":"<p>Fractal was conceived in the Liberali Lab at the Friedrich Miescher Institute for Biomedical Research and in the Pelkmans Lab at the University of Zurich by @jluethi and @gusqgm. The Fractal project is now developed at the BioVisionCenter at the University of Zurich and the project lead is with @jluethi. The core development is done under contract by eXact lab S.r.l..</p> <p>Unless otherwise specified, Fractal components are released under the BSD 3-Clause License, and copyright is with the BioVisionCenter at the University of Zurich.</p>"},{"location":"changelog/","title":"CHANGELOG","text":"<p>Note: Numbers like (#123) point to closed Pull Requests on the fractal-web repository.</p>"},{"location":"changelog/#1110","title":"1.11.0","text":"<ul> <li>Alignment with fractal-server 2.9.0 (#640, #643, #652, #655):<ul> <li>Updated task collections logic and created task-group activities pages for standard users and administrators (#640);</li> <li>Removed active checkbox from task group edit modal (#640);</li> <li>Added Manage button to deactivate and reactivate task groups (#640);</li> <li>Removed usage of DB_ENGINE and SQLITE_PATH variables (#643);</li> <li>Displayed <code>timestamp_last_used</code> property in task-group info modal (#643);</li> <li>Viewer paths page improvements (#643);</li> <li>Added manage buttons on admin task-groups page (#643);</li> <li>Added last used timestamp filter to task-group admin page (#643);</li> <li>Used new <code>GET /auth/current-user/allowed-viewer-paths/</code> endpoint (#652);</li> <li>Added \"Download token\" button in \"My profile\" page (#652);</li> <li>Implemented removal of users from group (#655);</li> <li>Implemented import of user settings from another user (#655);</li> <li>Used new set-groups endpoint (#655);</li> <li>Sorted task-group activities by timestamp_started (more recent first) (#655);</li> </ul> </li> </ul>"},{"location":"changelog/#1101","title":"1.10.1","text":"<ul> <li>Fixed wrong workflow tasks order after task version update (#637);</li> </ul>"},{"location":"changelog/#1100","title":"1.10.0","text":"<ul> <li>Added project dir setting (#634);</li> <li>Made zarr_dir optional when creating dataset (#634);</li> <li>Updated query parameters of GET /api/v2/task/ (#634);</li> <li>Displayed task collection logs also in install phase (#634);</li> <li>Handled missing banner file error (#634);</li> <li>Used fractal-logos sources for README and docs (#634);</li> <li>Added fractal logo (#626);</li> <li>Removed usage of pip extras when installing fractal-server for testing (#626);</li> <li>Removed usage of verbose query parameter in task collection (#626);</li> </ul>"},{"location":"changelog/#190","title":"1.9.0","text":"<ul> <li>Alignment with fractal-server 2.7 (#583, #601, #605, #612, #616, #620):<ul> <li>Removed owner from v2 tasks (#583);</li> <li>Displayed workflow task warning message (#583);</li> <li>Implemented selection of group in task creation (#583);</li> <li>First implementation of new workflow task modal (#583);</li> <li>Used new group_ids_names field (#583);</li> <li>Renamed source to label in custom python env task creation (#583);</li> <li>Changes to admin tasks page (#583, #601);</li> <li>Changed task list to use task groups (#601);</li> <li>Changes to job submission healthcheck page (#601);</li> <li>Implemented task group modal info, edit and delete (#601);</li> <li>Removed usage of source field (#601);</li> <li>Filtered identical task groups (#605);</li> <li>Removed order field from workflow task modal (#605);</li> <li>Disabled editing of task name (#605);</li> <li>Added user group setting editor form (#612);</li> <li>Supported deletion of groups (#612);</li> <li>Sorted tasks by id (#616);</li> <li>Created healthcheck task as private (#616);</li> <li>Used args_schema=false in GET /api/v2/task-group/ (#616);</li> <li>Ignored empty task groups (#616);</li> <li>Checked pkg_name while computing workflow task update candidates (#616);</li> <li>Added admin task groups page (#620);</li> </ul> </li> <li>Fixed dropdown style (#601);</li> <li>Changed \"new version available\" icon (#583);</li> <li>Login page layout improvements (#605);</li> <li>Fixed issue when editing user after setting the superuser privilege (#612);</li> <li>Used response.data.version when displaying task collections (#616);</li> <li>Implemented reordering of tasks in workflow using drag and drop (#616);</li> <li>Fixed broken unsaved changes modal, for non-JSON-schema-based workflowtask edits (#616);</li> <li>Refactored user editing form using only one save button (#616);</li> <li>Allowed same key for attribute and type in input filters (#620);</li> </ul>"},{"location":"changelog/#180","title":"1.8.0","text":"<ul> <li>Drop Node 16 support (#574);</li> <li>Upgraded dependencies (#574):<ul> <li>svelte: 3.x -&gt; 4.x</li> <li>@sveltejs/kit: 1.x -&gt; 2.x</li> <li>@sveltejs/adapter-node: 1.x -&gt; 2.x</li> <li>@sveltejs/adapter-static: 2.x -&gt; 3.x</li> <li>eslint: 8.x -&gt; 9.x</li> <li>typescript: 4.x -&gt; 5.x</li> <li>vite: 4.x -&gt; 5.x</li> <li>vitest: 0.x -&gt; 1.x</li> <li>@vincjo/datatables: 1.6.0 -&gt; 1.14.10</li> <li>bootstrap: 5.2.3 -&gt; 5.3.3</li> </ul> </li> </ul>"},{"location":"changelog/#172","title":"1.7.2","text":"<ul> <li>Added viewer paths editor in admin area (#571);</li> <li>Added user viewer paths page (#571);</li> </ul>"},{"location":"changelog/#171","title":"1.7.1","text":"<ul> <li>Allowed null values in settings API requests (#570);</li> <li>Hided cache dir from user settings page when using SSH Slurm (#570);</li> <li>Made FRACTAL_RUNNER_BACKEND environment variable mandatory (#570);</li> </ul>"},{"location":"changelog/#170","title":"1.7.0","text":"<ul> <li>Added \"My Settings\" page and updated admin user editor (#564);</li> <li>Fixed duplicated entries in owner dropdown (#562);</li> <li>Added \"View plate\" button on dataset page (#562);</li> <li>Improved stability of end to end tests (#560);</li> </ul>"},{"location":"changelog/#160","title":"1.6.0","text":"<ul> <li>Displayed OAuth2 accounts in user profile page (#557);</li> <li>Supported <code>FRACTAL_API_V1_MODE=include_read_only</code> (#557);</li> <li>Added support for displaying temporary warning banner using the <code>WARNING_BANNER_PATH</code> environment variable (#557);</li> <li>Deprecated support for legacy tasks in V2 workflows (#554);</li> </ul>"},{"location":"changelog/#150","title":"1.5.0","text":"<ul> <li>Implemented functionality for creating and displaying user groups (#551);</li> <li>Displayed an error when job submission failed before starting execution of tasks (#548);</li> </ul>"},{"location":"changelog/#143","title":"1.4.3","text":"<ul> <li>Added settings page to admin area (#544);</li> </ul>"},{"location":"changelog/#142","title":"1.4.2","text":"<ul> <li>Added admin page for job submission healthcheck (#543);</li> </ul>"},{"location":"changelog/#141","title":"1.4.1","text":"<ul> <li>Raised a warning upon import/export of a workflow with a custom task (#542);</li> <li>Experimental feature: added vizarr viewer links to dataset page (#542);</li> <li>Used links instead of the \"Open\" button (#542);</li> <li>Added documentation about systemd service config (#542);</li> <li>Added e2e testing of OAuth2 login (#542);</li> <li>Improved handling of validation errors on forms and documentation about error handling (#542);</li> <li>Added <code>white-space: pre-wrap</code> on all <code>pre</code> tags (#542);</li> </ul>"},{"location":"changelog/#140","title":"1.4.0","text":"<ul> <li>Fixed input filters lost after version update (#535);</li> <li>JSON Schema form: computed default values also for empty object (#535);</li> <li>Supported <code>prefixItems</code> of JSON Schema Draft 2020-12 - <code>pydantic_v2</code> (#535);</li> </ul>"},{"location":"changelog/#132","title":"1.3.2","text":"<ul> <li>Supported <code>pydantic_v2</code> schemas (#532);</li> </ul>"},{"location":"changelog/#131","title":"1.3.1","text":"<ul> <li>Fixed custom key not displayed in JSON Schema form (#529);</li> <li>Added dropdown for Python version in tasks (#526);</li> <li>Improved formatting of errors in standard error alert component (#526);</li> <li>Used <code>postgres-psycopg</code> adapter in CI (#525);</li> <li>Used <code>FRACTAL_BACKEND_RUNNER=local_experimental</code> in CI for v2 tests (#525);</li> </ul>"},{"location":"changelog/#130","title":"1.3.0","text":"<p>Starting from this release the Sandbox pages are not included in fractal-web anymore, instead they are static pages published together with the documentation.</p> <ul> <li>Added Custom Python env task collection (#523);</li> <li>Fixed issue with ajv formats on sandbox (#522);</li> <li>Removed \"Clear\" button from tuples (#521);</li> <li>Added \"Reset\" button on top-level properties having a default value (#521);</li> <li>Added task manifest sandbox (#521);</li> <li>Validated invalid text in numeric inputs (#521);</li> <li>Moved JSON Schema components to a separated component (#518);</li> <li>Moved Sandbox pages to a separated component (#518);</li> </ul>"},{"location":"changelog/#120","title":"1.2.0","text":"<ul> <li>Conditionally included V1 pages (#514);</li> <li>Added task version update sandbox page (#509);</li> <li>JSON Schema form improvements (#509):<ul> <li>supported enums of any type;</li> <li>supported tuples;</li> <li>used grey color for optional properties that are unset;</li> <li>hided default label for fields without title.</li> </ul> </li> <li>Added docs about JSON Schema Sandbox page (#509).</li> <li>Added maintenance banner when fractal-server is down (#504).</li> </ul>"},{"location":"changelog/#110","title":"1.1.0","text":"<p>WARNING: with this release all the environment variables will be read from the environment, when the service is started, not during build time. Remember to load in your environment all the variables that you need when you start the service in production. This will not affect development setup. See https://fractal-analytics-platform.github.io/fractal-web/quickstart/ for instructions.</p> <ul> <li>Updated quickstart documenting the changes related to environment variables (#492).</li> <li>Fixed bug in default dataset selection when job references a deleted dataset (#492).</li> <li>Fixed v1 workflow task version update bug (#492).</li> <li>Added <code>npm pack</code> artifacts to files published by the CI during the release (#492).</li> <li>Fixed v2 admin job download link (#492).</li> <li>Imported all the environment variables dynamically (#492).</li> <li>Added backend logging using Log4js (#492).</li> <li>Improved JSON Schema Sandbox page (#490).</li> </ul>"},{"location":"changelog/#104","title":"1.0.4","text":"<ul> <li>Removed users management section from admin area v1 (#485).</li> <li>Included v1/v2 switcher in admin-area job page (#485).</li> <li>Setup tests to use PostgreSQL instead of SQlite (#484).</li> <li>Implemented tasks admin page (#484).</li> <li>Improved form builder used in workflow tasks without JSON Schema and in Meta properties tab (#481).</li> <li>Used collapsible sections in dataset history modal (#481).</li> </ul>"},{"location":"changelog/#103","title":"1.0.3","text":"<ul> <li>fixed issue in task version update when no arguments fix is needed (#477).</li> </ul>"},{"location":"changelog/#102","title":"1.0.2","text":"<ul> <li>fixed issue in task version update with optional arguments (#475).</li> </ul>"},{"location":"changelog/#101","title":"1.0.1","text":"<ul> <li>used payload containing all fields in meta properties PATCH endpoint (#473).</li> </ul>"},{"location":"changelog/#100","title":"1.0.0","text":"<ul> <li>Supported fractal-server API V2:<ul> <li>added menu switch to support legacy and current API (#434, #457);</li> <li>Dataset V2 CRUD with attribute and type filters (#434);</li> <li>new Dataset page with image list and filters (#434);</li> <li>updated Single Task form to handle parallel and non parallel fields (#434);</li> <li>updated workflow task form to handle parallel and non parallel arguments (#434);</li> <li>handled V2 import and export of workflow task arguments (#434);</li> <li>handled V2 version workflow task version update (#434);</li> <li>added admin \"Tasks V1/V2 compatibility\" page (#450);</li> <li>supported adding V1 task in V2 workflow (#450);</li> <li>removed read only property from V2 datasets (#450);</li> <li>added input filters tab in workflow task page (#452, #457);</li> <li>added searchable dropdowns for image filters (#452);</li> <li>moved editing of dataset inside dataset page (#452);</li> <li>supported editing of single dataset images (#457);</li> <li>used switches to represent boolean flags (#457);</li> <li>implemented continue/restart workflow (#465);</li> <li>set default first task when continuing a workflow (#466);</li> <li>displayed applied filters in workflow execution modal (#466);</li> <li>implemented import and export of datasets (#467);</li> <li>handled selection of default dataset on workflow page (#467);</li> </ul> </li> </ul>"},{"location":"changelog/#0102","title":"0.10.2","text":"<ul> <li>Added search functionality on jobs table filters (#424).</li> </ul>"},{"location":"changelog/#0101","title":"0.10.1","text":"<ul> <li>Fixed bug in workflow task meta properties update (#422).</li> </ul>"},{"location":"changelog/#0100","title":"0.10.0","text":"<p>This release requires fractal-server 1.4.6.</p> <ul> <li>Improved id and timestamp layout on jobs table (#420).</li> <li>Added query parameters to avoid loading unused fields on the following GET endpoints (#420):<ul> <li><code>/api/v1/job/</code>, <code>/api/v1/{project.id}/job/</code>, <code>/admin/job/</code> (<code>log</code> param)</li> <li><code>/api/v1/task/</code> (<code>args_schema</code> param)</li> <li><code>/api/v1/dataset/</code>, <code>/api/v1/project/{project.id}/dataset/</code> (<code>history</code> param)</li> </ul> </li> <li>Added <code>show_tmp_logs=true</code> query parameter to display log of running jobs (#420).</li> </ul>"},{"location":"changelog/#092","title":"0.9.2","text":"<ul> <li>Supported JSON Schema <code>allOf</code> feature in task arguments form (#417).</li> </ul>"},{"location":"changelog/#091","title":"0.9.1","text":"<ul> <li>Improved visualization of details on job logs modal (#415).</li> <li>Added job id filter on admin jobs page (#415).</li> <li>Added spinner on workflow task modal when tasks list is loading (#410).</li> <li>Implemented import and export of workflow task arguments (#410).</li> <li>Improved sorting of users in dropdown of the admin jobs page (#402).</li> <li>Fixed bug in retrieval of job log from the admin jobs page (#402).</li> <li>Highlighted relevant part of the error message in workflow job log modal (#402).</li> <li>Made the error message directly accessible from the new workflow page (#402).</li> </ul>"},{"location":"changelog/#090","title":"0.9.0","text":"<p>This release requires fractal-server 1.4.3.</p> <ul> <li>Removed <code>running</code> job status (#401).</li> <li>Aligned timestamp definitions with fractal-server 1.4.3 (#401).</li> <li>Sorted projects by descending creation timestamp (#401).</li> <li>Removed coverage setup from Playwright tests and CI (#399).</li> </ul>"},{"location":"changelog/#082","title":"0.8.2","text":"<ul> <li>Improvements on worflow task form (#393):<ul> <li>supported JSON Schema <code>enum</code> type;</li> <li>supported JSON Schema <code>minimum</code>, <code>maximum</code>, <code>exclusiveMinimum</code> and <code>exclusiveMaximum</code> for numeric types;</li> <li>supported JSON Schema <code>minItems</code> and <code>maxItems</code> for array type;</li> <li>supported reordering of array fields;</li> <li>set bold font on nested required properties;</li> <li>improved field validation error messages.</li> </ul> </li> <li>Add trailing slash to OAuth-callback url (#395).</li> </ul>"},{"location":"changelog/#081","title":"0.8.1","text":"<p>Note: with this release, <code>PUBLIC_FRACTAL_ADMIN_SUPPORT_EMAIL</code> becomes a required environment variable, and <code>npm run build</code> fails if it is missing. If you do not need a support email, just include a <code>PUBLIC_FRACTAL_ADMIN_SUPPORT_EMAIL=</code> line in your env file.</p> <ul> <li>Made <code>PUBLIC_FRACTAL_ADMIN_SUPPORT_EMAIL</code> static (#391).</li> <li>Added SLURM-account selection for user editing and for job execution (#391).</li> <li>Improved buttons feedback for slow API calls (#389).</li> </ul>"},{"location":"changelog/#080","title":"0.8.0","text":"<p>This release requires fractal-server 1.4.2.</p> <ul> <li>Users registered by the admin are automatically verified (#386).</li> <li>A warning message is displayed to unverified users (#386).</li> <li>Made page headers more homogeneous (#386).</li> <li>Replaced some icons with more suitable ones (#386).</li> <li>Added search boxes on datasets, workflows and workflow tasks selection (#386).</li> <li>Moved \"Create new workflow\" to a modal (#386).</li> <li>Added search project field on projects list page (#379).</li> <li>Used modal to create new project (#379).</li> <li>Sorted users in admin-area page (#379).</li> <li>Exposed stop-job and download-logs in admin-area jobs page (#379).</li> <li>Displayed number of rows in admin jobs page (#379).</li> <li>Fixed semver circular dependency issue (#379).</li> <li>Fixed issue with version sorting (#379).</li> <li>Sorted datasets by name (#379).</li> <li>Fixed accessibility issue (#379).</li> <li>Improved performance reducing the number of API calls on project, workflow and dataset pages (#379).</li> </ul>"},{"location":"changelog/#072","title":"0.7.2","text":"<p>Note: with this release, <code>PUBLIC_OAUTH_CLIENT_NAME</code> becomes a required environment variable, and <code>npm run build</code> fails if it is missing. If you do not need OAuth2 authentication, just include a <code>PUBLIC_OAUTH_CLIENT_NAME=</code> line in your env file.</p> <ul> <li>Made <code>PUBLIC_OAUTH_CLIENT_NAME</code> static (#376).</li> <li>Added help messages to user registration (#376).</li> <li>Made <code>AUTH_COOKIE_DOMAIN</code> optional (#376).</li> <li>Fixed hardcoded OAuth2 variable (#376).</li> </ul>"},{"location":"changelog/#071","title":"0.7.1","text":"<ul> <li>Auto-refresh of tasks table when a tasks collection completes successfully (#364).</li> <li>Auto-refresh of tasks collection status (#364).</li> <li>Made tasks list more compact by hiding the older versions (#364).</li> <li>Added the following fields on single task creation:<ul> <li>args schema file upload (#364).</li> <li>meta file upload (#364).</li> <li>docs info and docs link (#364).</li> </ul> </li> <li>Added editing of pinned package versions on tasks collection (#364).</li> <li>Supported editing of <code>cache_dir</code> from user profile page (#365).</li> <li>Added experimental workflow page with job monitoring (#363).</li> </ul>"},{"location":"changelog/#070","title":"0.7.0","text":"<p>This release requires fractal-server 1.4.0.</p> <ul> <li>Added admin jobs page (#352).</li> <li>Fixed expiration token issue for /admin and /auth endpoints (#352).</li> <li>Used new endpoints for retrieving current user and list of users (#350).</li> <li>Added user profile page (#336).</li> <li>Added admin area with users management (#336).</li> <li>Added Jobs button in home page (#346).</li> <li>Improved jobs table layout for small screens (#346).</li> <li>Fixed jobs status badge color bug (#346).</li> <li>Aligned with fractal-server 1.4.0 API, including trailing slash for endpoints' paths (#328).</li> <li>Added spinner during page loading (#328).</li> <li>Job pages:<ul> <li>Created per-user and per-workflow jobs pages (#328).</li> <li>Removed per-project jobs pages (#328).</li> <li>Added automatic background update job pages (#328).</li> </ul> </li> <li>Improved handling of session expiration (#333).</li> <li>Fixed logout bug (#327).</li> <li>Implemented OAuth2 login (#333).</li> <li>Added more playwright tests (#332).</li> </ul>"},{"location":"changelog/#063","title":"0.6.3","text":"<ul> <li>Implemented task-version update (#325).</li> </ul>"},{"location":"changelog/#062","title":"0.6.2","text":"<ul> <li>Fixed peformance issue with argument-description popovers (#324).</li> <li>Added end-to-end tests and coverage configuration (#320).</li> </ul>"},{"location":"changelog/#061","title":"0.6.1","text":"<p>This release works best with fractal-server &gt;=1.3.12 (since it makes use of the <code>dataset.history</code> property), but previous fractal-server versions are still supported.</p> <ul> <li>Added dataset history modal (#316).</li> <li>Fixed bug with save/discard changes in workflow task (#315).</li> <li>Fixed first-run redirects issue (#315).</li> </ul>"},{"location":"changelog/#060","title":"0.6.0","text":"<ul> <li>Added fractal-web version to the footer (#312).</li> <li>Added new modal for create/update dataset feature (#310).</li> <li>Standardized modal management to fix some bugs (#306).</li> <li>Added proxy endpoints and refactored error propagation (#288).</li> <li>Remove use of deployment-type <code>fractal-server</code> variable (#298).</li> <li>Add GitHub action to create GitHub releases (#305).</li> <li>Add a BSD3 license (#300).</li> </ul>"},{"location":"changelog/#056","title":"0.5.6","text":"<ul> <li>Improve displaying of <code>Dataset.meta</code> properties (#281).</li> <li>Remove obsolete file <code>src/routes/api/alive/+server.js</code> (#283).</li> </ul>"},{"location":"changelog/#055","title":"0.5.5","text":"<ul> <li>Fix bug in <code>JSchema.svelte</code> (#279).</li> </ul>"},{"location":"changelog/#054","title":"0.5.4","text":"<ul> <li>Always propagate cookie for API calls to <code>FRACTAL_SERVER_HOST</code>, even for different domains (#275).</li> </ul>"},{"location":"changelog/#053","title":"0.5.3","text":"<ul> <li>Add confirmation dialog for delete-task operation (#272).</li> <li>Enable WorkflowTask Info tab, and render <code>docs_info</code> from markdown (#271).</li> <li>Update import-workflow feature (#269).</li> <li>Revamp home page and user-related layout (#259).</li> <li>Review logout action (#259).</li> <li>Implement editing and deletion of tasks (#207, #268). </li> <li>Implement A-to-B workflow execution (#254).</li> <li>Fix WorkflowTask <code>meta</code> update (#261).</li> <li>Improve enable/disable button state, for project/dataset/workflow/resource creation (#257).</li> </ul>"},{"location":"changelog/#052","title":"0.5.2","text":"<ul> <li>Improve tasks handling within the client (#233).</li> <li>Prevent accidental loss of user-provided WorkflowTask arguments (#234).</li> </ul>"},{"location":"changelog/#051","title":"0.5.1","text":"<p>First release included in this CHANGELOG.</p>"},{"location":"environment-variables/","title":"Environment variables","text":"<p>The following environment variables can be used to configure fractal-web. </p> <p>Only when using <code>npm run dev</code> or <code>npm run preview</code> these variables are automatically read from <code>.env.development</code> and <code>.env</code> files. In production they must be set in the shell that starts the node process.</p> <ul> <li><code>FRACTAL_SERVER_HOST</code>: represents the URL of the fractal-server application (e.g. http://localhost:8000, or http://subdomain.example.org:8000); this variable is required;</li> <li><code>AUTH_COOKIE_NAME</code>: the name of the cookie used to store the user session; the default value is <code>fastapiusersauth</code>;</li> <li><code>AUTH_COOKIE_DOMAIN</code>: specifies which server can receive the cookie; remember to set it in production;</li> <li><code>AUTH_COOKIE_PATH</code>: the URL path where the cookie will be available; the default value is <code>/</code>;</li> <li><code>AUTH_COOKIE_SECURE</code>: sends the cookie only if the server is using HTTPS; the default value is <code>true</code>, can be set to <code>false</code> during development;</li> <li><code>AUTH_COOKIE_SAME_SITE</code>: set the SameSite attribute to the cookie; the default value is <code>lax</code>;</li> <li><code>PUBLIC_FRACTAL_ADMIN_SUPPORT_EMAIL</code>: the e-mail address displayed in the home page which can be used to send support requests; if the value is not set nothing is shown;</li> <li><code>PUBLIC_UPDATE_JOBS_INTERVAL</code>: the delay in milliseconds which occurs between two background requests that check for job status updates; the default value is <code>3000</code>;</li> <li><code>PUBLIC_OAUTH_CLIENT_NAME</code>: if set, the application enables the external account login via OAuth2; the name is used to create the authorization call sent to fractal-server (see configuration page);</li> <li><code>LOG_FILE</code>: the path of the file where logs will be written; by default is unset and no file will be created;</li> <li><code>LOG_LEVEL_FILE</code>: the log level of logs that will be written to the file; the default value is <code>info</code>;</li> <li><code>LOG_LEVEL_CONSOLE</code>: the log level of logs that will be written to the console; the default value is <code>warn</code>;</li> <li><code>FRACTAL_API_V1_MODE</code>: include/exclude V1 pages and version switcher; supported values are: <code>include</code>, <code>include_read_only</code>, <code>exclude</code>; the default value is <code>include</code>;</li> <li><code>FRACTAL_RUNNER_BACKEND</code>: specifies which runner backend is used; supported values are: <code>local</code>, <code>local_experimental</code>, <code>slurm</code>, <code>slurm_ssh</code>; setting this variable is mandatory;</li> <li><code>PUBLIC_FRACTAL_VIZARR_VIEWER_URL</code>: URL to fractal-vizarr-viewer service (e.g. http://localhost:3000/vizarr for testing);</li> <li><code>WARNING_BANNER_PATH</code>: specifies the path to a text file containing the warning banner message displayed on the site; the banner is used to inform users about important issues, such as external resources downtime or maintenance alerts; if the variable is empty or unset no banner is displayed.</li> </ul> <p>When running directly using <code>node</code> command these extra variables can also be configured:</p> <ul> <li><code>PORT</code>: specifies the port where Svelte server will run; the default value is 5173;</li> <li><code>ORIGIN</code> the URL where the app will be served (e.g. http://localhost:5173, or https://subdomain.example.org).</li> </ul>"},{"location":"environment-variables/#common-issues-related-to-environment-variables","title":"Common issues related to environment variables","text":"<p>The <code>node</code> command relies on some extra environment variables, and especially on <code>ORIGIN</code>:</p> <p>HTTP doesn't give SvelteKit a reliable way to know the URL that is currently being requested. The simplest way to tell SvelteKit where the app is being served is to set the <code>ORIGIN</code> environment variable  (see SvelteKit node servers documentation). A wrong origin value will result in the error message \"Cross-site POST form submissions are forbidden\".</p> <p>Unexpected behaviors can be related to wrong values of the <code>AUTH_COOKIE_DOMAIN</code> variable:</p> <p>A typical gotcha: if there is a mismatch between the cookie domain and the URL you are using (e.g. one points to localhost and the other one to 127.0.0.1), then the cookie won't be set and this will fail silently, therefore likely triggering other unexpected behaviors. If you leave the <code>AUTH_COOKIE_DOMAIN</code> empty, the cookie domain will be inferred from the HTTP call. This is useful to avoid domain mismatch issues during testing and development, but in production is suggested to set it as the name of the domain where the fractal-web server is running.</p>"},{"location":"examples/","title":"Examples","text":"<p>in progress</p> <p>See examples in https://github.com/fractal-analytics-platform/fractal-web/tree/main/examples, with configurations for:</p> <ul> <li>fractal-server</li> <li>fractal-web</li> <li>Apache proxy</li> </ul>"},{"location":"fractal_server/","title":"Basic guide for fractal-server startup","text":"<p>The <code>lib/fractal-server</code> folder describes the basic steps to install and run a local <code>fractal-server</code> instance, that can be then accessed through <code>fractal-web</code>.</p> <p>Briefly, one should: * Install fractal-server (<code>pip install fractal-server</code>); * Set up the database (<code>fractalctl set-db</code>); * Startup an instance (<code>fractalctl start</code>).</p> <p>Notes: 1. There must exist a <code>.fractal_server.env</code> file (see example in    <code>../lib/fractal-server/</code>), with some configuration variables. 2. It is necessary that the fractal-server instance is reachable from the    client by network connection (this is typically trivial, if fractal-server    is run locally e.g. at http://localhost:8000). This address also needs to match    the one in the <code>fractal-web</code> configuration file (either <code>.env</code> or    <code>.env.development</code>, depending on how you are running <code>fractal-web</code>). 3. It is useful to set the fractal-server environment variable    <code>JWT_EXPIRE_SECONDS</code> to a relevant value for the user to persist its session    on the client (e.g. <code>JWT_EXPIRE_SECONDS=84600</code>). 4. The configuration env file also defines some default credentials for an    admin user, that can be used for testing.</p>"},{"location":"oauth2/","title":"Integration with OAuth2 providers","text":"<p>Fractal supports OAuth2 login using GitHub, Google or custom providers.</p> <p>First, configure the server as described in OAuth2 documentation of fractal-server.</p> <p>Fractal-web callback has to be defined using the following path: <code>/auth/login/oauth2</code>.</p> <p>Then, enable the desired provider on fractal-web using the <code>PUBLIC_OAUTH_CLIENT_NAME</code> environment variable, for example:</p> <pre><code>PUBLIC_OAUTH_CLIENT_NAME=github\n</code></pre> <p>This variable has to match the client name defined in fractal-server configuration.</p>"},{"location":"oauth2/#full-details-for-local-example","title":"Full details for local example","text":"<ol> <li>Register an OAuth2 app on GitHub with<ul> <li>Homepage URL: http://127.0.0.1:5173</li> <li>Authorization callback URL: http://127.0.0.1:5173/auth/login/oauth2/</li> </ul> </li> <li>Set up the following env variables for fractal-server: <pre><code>OAUTH_GITHUB_CLIENT_ID=...\nOAUTH_GITHUB_CLIENT_SECRET=...\nOAUTH_GITHUB_REDIRECT_URL=http://127.0.0.1:5173/auth/login/oauth2/\n# [all other variables]\n</code></pre></li> <li>Set up the following env variables for fractal-web: <pre><code>FRACTAL_SERVER_HOST=http://127.0.0.1:8000\nAUTH_COOKIE_DOMAIN=127.0.0.1\nPUBLIC_OAUTH_CLIENT_NAME=github\n# [all other variables]\n</code></pre></li> </ol>"},{"location":"quickstart/","title":"Quickstart instructions","text":"<p>This page describes how to install fractal-web from release packages. If you need to install it from the git repository see the development setup page.</p>"},{"location":"quickstart/#install-node","title":"Install node","text":"<p>Versions 18 or 20 of Node.js are recommended (check your version with <code>node -v</code>). Version 16 is known to work, but not recommended.</p> <p>If these versions are not available via your favorite package installer, you can install them from this link for your specific platform. Another option is to use nvm, e.g. via <pre><code>nvm install 18\nnvm alias default 18\n</code></pre></p>"},{"location":"quickstart/#install-fractal-web-from-release-packages","title":"Install fractal-web from release packages","text":"<p>Starting from version 1.1.0, fractal-web releases provide tar.gz files containing the built files for each supported node version. You can install these packages with the following command:</p> <pre><code>FRACTAL_WEB_VERSION=1.1.0 &amp;&amp; NODE_MAJOR_VERSION=20 &amp;&amp; wget -qO- \"https://github.com/fractal-analytics-platform/fractal-web/releases/download/v${FRACTAL_WEB_VERSION}/node-${NODE_MAJOR_VERSION}-fractal-web-v${FRACTAL_WEB_VERSION}.tar.gz\" | tar -xz\n</code></pre> <p>Note: this will unpack in the current working directory the file <code>package.json</code> and the folders <code>build</code> and <code>node_modules</code>.</p> <p>To start the application installed in this way see the section Run fractal-web from the build folder below.</p>"},{"location":"quickstart/#set-environment-variables","title":"Set environment variables","text":"<p>To properly run fractal-web you have to configure some environment variables. The environment variables page contains the complete list of supported environment variables and their default values. It also includes some troubleshooting infomation about errors related to environment variables misconfiguration.</p> <p>If you want to run the application executing <code>node</code> in the <code>build</code> folder you have to export the environment variables in your shell. The following section provides an example on how to do that with a script.</p>"},{"location":"quickstart/#run-fractal-web-from-the-build-folder","title":"Run fractal-web from the build folder","text":"<p>You can create a script with the following content to run fractal-web installed from a release package:</p> <pre><code>#!/bin/sh\n\nexport FRACTAL_SERVER_HOST=http://localhost:8000\nexport PUBLIC_FRACTAL_ADMIN_SUPPORT_EMAIL=help@localhost\nexport PUBLIC_OAUTH_CLIENT_NAME=\n# remember to set this in production (e.g. subdomain.example.org)\nexport AUTH_COOKIE_DOMAIN=\n\nexport ORIGIN=http://localhost:5173\nexport PORT=5173\n\nexport LOG_FILE=fractal-web.log\n# default values for logging levels (uncomment if needed)\n# export LOG_LEVEL_FILE=info\n# export LOG_LEVEL_CONSOLE=warn\n\nexport FRACTAL_API_V1_MODE=include\nexport FRACTAL_RUNNER_BACKEND=local\n\n#export PUBLIC_FRACTAL_VIZARR_VIEWER_URL=\n#export WARNING_BANNER_PATH=\n\n# default values are usually fine for the following variables; remove comments if needed\n#export AUTH_COOKIE_NAME=fastapiusersauth\n#export AUTH_COOKIE_PATH=/\n#export AUTH_COOKIE_SAME_SITE=lax\n#export PUBLIC_UPDATE_JOBS_INTERVAL=3000\n\nnode build/\n</code></pre> <p>Note: starting from Node 20 you can also load the environment variables from a file using the <code>--env-file</code> flag:</p> <pre><code>node --env-file=.env build\n</code></pre>"},{"location":"quickstart/#systemd-service","title":"Systemd service","text":"<p>To run fractal-web as a Systemd service create the file <code>/etc/systemd/system/fractal-web.service</code> with the following content:</p> <pre><code>[Unit]\nDescription=Fractal Web\nAfter=syslog.target\n\n[Service]\nUser=fractal\nEnvironmentFile=/path/to/fractal-web/.env\nExecStart=/path/to/node /path/to/fractal-web/build\nRestart=on-failure\nRestartSec=5s\n\n[Install]\nWantedBy=multi-user.target\n</code></pre> <p>Enable the service:</p> <pre><code>sudo systemctl enable fractal-web\n</code></pre> <p>Start the service:</p> <pre><code>sudo systemctl start fractal-web\n</code></pre> <p>Check the service logs:</p> <pre><code>sudo journalctl -u fractal-web\n</code></pre>"},{"location":"sandbox-pages/","title":"Sandbox pages","text":"<p>When developing tasks it can be useful to have a quick way to test how a given JSON schema will appear in the workflow task arguments form or how a task version update will affect the users.</p> <p>The following sandbox pages are available:</p> <ul> <li>JSON Schema Sandbox page</li> <li>Task Version Update Sandbox page</li> <li>Task Manifest Sandbox page</li> </ul> <p>Both these pages provide a textarea for the JSON schemas. Notice that you can't paste the whole task manifest: you need to pick one of the <code>args_schema</code> values.</p> <p>To locally preview the sandbox pages enter the <code>sandbox</code> directory and run:</p> <pre><code>npm install\nnpm run dev\n</code></pre>"},{"location":"version-compatibility/","title":"Version Compatibility","text":"<p>The following table shows which <code>fractal-server</code> versions are compatible with which <code>fractal-web</code> versions.</p> fractal-web fractal-server 1.11.1 2.9.0 1.10.1 2.8.0 1.10.0 2.8.0 1.9.0 2.7.0 1.8.0 2.6.3 1.7.2 2.6.3 1.7.1 2.6.2 1.7.0 2.6.0 1.6.0 2.5.0 1.5.0 2.4.0 1.4.3 2.3.0 1.4.2 2.3.0 1.4.1 2.3.0 1.4.0 2.3.0 1.3.2 2.3.0 1.3.1 2.3.0 1.3.0 2.3.0 1.2.0 2.0.6 1.1.0 2.0.5 1.0.4 2.0.5 1.0.3 2.0.0 1.0.2 2.0.0 1.0.1 2.0.0 1.0.0 2.0.0 0.10.2 1.4.6 0.10.1 1.4.6 0.10.0 1.4.6 0.9.2 1.4.3 0.9.1 1.4.3 0.9.0 1.4.3 0.8.2 1.4.2 0.8.1 1.4.2 0.8.0 1.4.2"},{"location":"development/","title":"Development","text":"<p>Here are some useful details for <code>fractal-web</code> developments:</p> <ul> <li>Development setup</li> <li>Code-base structure</li> <li>Error handling</li> <li>JSON Schema form module</li> <li>Testing</li> <li>Documentation</li> <li>Precommit</li> <li>Release</li> </ul>"},{"location":"development/docs/","title":"Documentation","text":"<p>Here are the instructions to serve the documentation on localhost:8001:</p> <pre><code>python -m venv venv\nsource venv/bin/activate\npython -m pip install -r docs/doc-requirements.txt\nmkdocs serve --dev-addr localhost:8001\n</code></pre> <p>The documentation includes links to the sandbox pages. These pages are built separately and added to the site folder by the CI before publishing the documentation, so these links will not work using the mkdocs preview command displayed above. If you want to preview the sandbox pages run <code>npm run dev</code> inside the sandbox folder.</p>"},{"location":"development/error-handling/","title":"Error handling","text":"<p>This page describes which coding patterns are used by fractal-web to handle various error cases.</p>"},{"location":"development/error-handling/#fractal-server-errors-structure","title":"Fractal-server errors structure","text":"<p>Fractal-server error responses payloads are usually JSON structures having the error under a <code>detail</code> key. This is not true for the 500 Internal Server Error, which doesn't provide a JSON payload.</p> <p>Generic fractal-server errors contain the error message string directly as <code>detail</code> value or as an array of values:</p> <pre><code>{ \"detail\": \"this is the error message\" }\n</code></pre> <pre><code>{ \"detail\": [\"this is also an error\"] }\n</code></pre> <p>Validation errors associated with a specific request field are represented using a <code>loc</code> array that describes the position of the invalid field in the request payload:</p> <pre><code>{\n\"detail\": [\n{\n\"loc\": [\n\"body\",\n\"zarr_url\"\n],\n\"msg\": \"URLs must begin with '/' or 's3'.\",\n\"type\": \"value_error\"\n}\n]\n}\n</code></pre> <p>Some validation errors may not be associated with a specific field and in that case their <code>loc</code> array will reference a <code>__root__</code> element:</p> <pre><code>{\n\"detail\": [\n{\n\"loc\": [\n\"body\",\n\"__root__\"\n],\n\"msg\": \"error message\",\n\"type\": \"value_error\"\n}\n]\n}\n</code></pre> <p>The goal of fractal-web is to extract the error message and display it inside an alert component or directly near the invalid form field, when possible. If an unexpected JSON structure is received, fractal-web will display the error JSON payload as it is, but that should happen rarely, except for the JSON Schema form, whose errors may result in some complex payloads.</p>"},{"location":"development/error-handling/#error-responses-in-svelte-backend-ssr","title":"Error responses in Svelte backend (SSR)","text":"<p>Files in <code>src/lib/server/api</code> provide API calls to fractal-server to be used from Svelte backend. These calls are usually required to be successful in order to properly display the page, since they retrieve the main resources of the page. A failure at this level is usually a 404 error (e.g. attempting to open a project with a non existent id) or something really severe (500 errors). For this reason the API calls errors happening on Svelte backend should usually be directly propagated, in order to display the error code inside the page.</p> <p>The utility function <code>responseError()</code> (in <code>error.js</code>) can be used to propagate the error in these cases. It will throw an exception if an error response is detected, automatically extracting the <code>detail</code>.</p> <p>It is suggested to handle the unsuccessful response first, in order to return the payload at the end of the function.</p> <pre><code>if (!response.ok) {\nawait responseError(response);\n}\nreturn await response.json();\n</code></pre> <p>In this way it is easier to define properly the type of the response using JSDoc annotation.</p>"},{"location":"development/error-handling/#error-responses-in-svelte-frontend","title":"Error responses in Svelte frontend","text":""},{"location":"development/error-handling/#the-alerterror-class","title":"The AlertError class","text":"<p>The <code>AlertError</code> class represents errors handled by fractal-web that has to be displayed somewhere. It has a constructor that receives an object or string representing the error and an optional status code (if the error was originated from an unsuccessful API call).</p> <p>It can be used to istantiate a new error message; this is mostly used when we need to propagate an error from a component to another, that will catch the error:</p> <pre><code>throw new AlertError('Invalid JSON schema');\n</code></pre> <p>Most of the time it is used to handle an unsuccessful API response; the status code is used to check if it is a validation error (status is equals to 422) and it automatically extracts the message from the detail:</p> <pre><code>throw await getAlertErrorFromResponse(response);\n</code></pre>"},{"location":"development/error-handling/#the-standard-error-alert","title":"The standard error alert","text":"<p>It is possible to use the <code>displayStandardErrorAlert()</code> function to display a generic error inside an Bootstrap alert component. The function returns a reference to a <code>StandardErrorAlert</code> component, that can be used to hide the error invoking its <code>hide()</code> function.</p> <p>Inside the page we have to add a div for the alert component, with a defined id:</p> <pre><code>&lt;div id=\"errorAlert-projectInfoModal\" /&gt;\n</code></pre> <p>Then we have to define a variable for the alert component:</p> <pre><code>/** @type {import('$lib/components/common/StandardErrorAlert.svelte').default|undefined} */\nlet errorAlert = undefined;\n</code></pre> <p>Finally, we invoke the function to display the error:</p> <pre><code>errorAlert = displayStandardErrorAlert(\nnew AlertError(result, response.status),\n'errorAlert-projectInfoModal'\n);\n</code></pre> <p>If we need to hide the error (for example before clicking a submit button again), we can invoke the <code>hide()</code> function.</p> <pre><code>errorAlert?.hide();\n</code></pre> <p>Notice that we are using the optional chaining operator (<code>?.</code>), since the variable might be undefined if no error happened previously.</p>"},{"location":"development/error-handling/#form-validation-errors","title":"Form validation errors","text":"<p>A form usually needs an error alert component to display generic errors and a mechanism to display errors associated with specific form fields. This logic has been incapsulated in the <code>FormErrorHandler</code> class.</p> <p>The constructor accepts as first argument the id of the div that will contain the generic error message and as second argument an array containing all the fields that correspond with some input fields in the form.</p> <pre><code>const formErrorHandler = new FormErrorHandler('taskCollectionError', [\n'package',\n'package_version',\n'package_extras',\n'python_version'\n]);\n</code></pre> <p>Once created, it is possible to retrieve the <code>validationErrors</code> object from the form error handler:</p> <pre><code>const validationErrors = formErrorHandler.getValidationErrorStore();\n</code></pre> <p>This is a Svelte store referencing a map of errors, so it has to be accessed prepending the <code>$</code> symbol: <code>$validationErrors</code>, as shown in the example above.</p> <p>The Bootstrap validation classes are used inside the form: <code>has-validation</code> on parent, <code>is-invalid</code> on the invalid field and <code>invalid-feedback</code> for the message.</p> <pre><code>&lt;div class=\"input-group has-validation\"&gt;\n  &lt;div class=\"input-group-text\"&gt;\n    &lt;label class=\"font-monospace\" for=\"package\"&gt;Package&lt;/label&gt;\n  &lt;/div&gt;\n  &lt;input\n    name=\"package\"\n    id=\"package\"\n    type=\"text\"\n    class=\"form-control\"\n    required\n    class:is-invalid={$validationErrors['package']}\n    bind:value={python_package}\n  /&gt;\n  &lt;span class=\"invalid-feedback\"&gt;{$validationErrors['package']}&lt;/span&gt;\n&lt;/div&gt;\n</code></pre> <p>The <code>handleErrorResponse()</code> function is used to populate the fields from an error response:</p> <pre><code>if (!response.ok) {\nawait formErrorHandler.handleErrorResponse(response);\n}\n</code></pre> <p>The class also provides a <code>clearErrors()</code> function and some functions to manually add or remove errors (<code>addValidationError()</code>, <code>removeValidationError()</code>, <code>setGenericError()</code>); these are useful to handle some validation directly on the frontend (e.g. required fields), without performing any API calls.</p>"},{"location":"development/jschema/","title":"JSON Schema form module","text":"<p>The <code>jschema</code> folder on this repository contains a Svelte project that provides the JSON Schema form component (<code>JSchema.svelte</code>) and its related functions and classes. The file <code>index.js</code> contains the list of components and functions that are exported for public usage, so that they can be included using <code>from 'fractal-jschema'</code> from the main project.</p> <p>The main project defines <code>fractal-jschema</code> in <code>vite.config.js</code>, as an alias pointing to <code>jschema/src/lib/index.js</code>. In this way the jschema module is automatically built when the main project is built and the Hot Module Reload feature still works.</p> <p>Moreover, the path to jschema module has been added as <code>server.fs.allow</code> Vite config option, to prevent the following error while serving the files using <code>npm run dev</code>:</p> <pre><code>The request url \"/path/to/fractal-web/jschema/src/lib/index.js\" is outside of Vite serving allow list.\n</code></pre> <p>Important: When importing js files inside the <code>jschema</code> module it is necessary to use a relative path. The editor might autocomplete the imports using the <code>$lib</code> prefix, but that will not work when the module is included in the main application, since it redefines the <code>$lib</code> path again.</p>"},{"location":"development/jschema/#structure-of-the-code","title":"Structure of the code","text":"<p>The <code>JSchema</code> Svelte component intializes a class named <code>FormManager</code>, that handles the following features:</p> <ul> <li>creates and stores an object (<code>root</code>) used to draw the form;</li> <li>provides the functions to create new form elements;</li> <li>attaches a <code>notifyChange()</code> function to each created form element; this function is used by each component to notify changes to the manager (e.g. the value of an input changes, a new element is added to an array, and so on), then the function dispatches a <code>change</code> event up to the <code>JSchema</code> component;</li> <li>wraps the <code>SchemaValidator</code> and provides a <code>validate()</code> function;</li> <li>provides a <code>getFormData()</code> function, that returns an object based on the data present in the form.</li> </ul> <p>The creation of the <code>root</code> object requires 2 preliminary steps, that are useful to reduce the complexity of the subsequent object creation:</p> <ol> <li>provided JSON Schema is adapted, to create a simpler but equivalent JSON Schema (<code>jschema_adapter.js</code>);</li> <li>an object representing the initial form data is created, considering both the provided data (if any) and the default values (<code>jschema_initial_data.js</code>).</li> </ol> <p>The <code>adaptJsonSchema()</code> function does the following:</p> <ol> <li>removes the properties to ignore (e.g. <code>zarr_url</code>, <code>zarr_urls</code>, <code>init_args</code>, <code>zarr_dir</code>);</li> <li>resolves and replaces the schema references (<code>$ref</code> fields pointing to definitions);</li> <li>merges the <code>allOf</code> items.</li> </ol> <p>The <code>getJsonSchemaData()</code> function initializes an object representing the initial form data. If the <code>initialValue</code> parameter is not set the created object is populated using the default values. If an <code>initialValue</code> object is provided, the function adds to it all the optional fields set to null (this is needed to have an object that acts as a complete skeleton for the form).</p> <p>Using the adapted JSON Schema and the computed data object, the <code>FormManager</code> populates the <code>root</code> object, initializing a dedicated class for each form element (<code>NumberFormElement</code>, <code>ArrayFormElement</code>, <code>BooleanFormElement</code>, ...). These classes contain fields that are specific to each form element type and may contain additional functions to manipulate them (e.g. <code>addChild</code>, <code>removeChild</code>). Functions that add new children delegate the creation to the <code>FormManager</code>, since it is the class having the knowledge to create form elements of any type, and then add the new child to an internal array of children.</p> <p>Each form element is mapped to a dedicated Svelte component (e.g. the <code>NumberFormElement</code> class is passed to a <code>NumberProperty.svelte</code> component). Each property component can contain additional functions for validating the input values and display the validation errors, but delegates to the wrapped form element class any additional logic.</p> <p>This structure attempts to achieve a greater separation of concerns, needed to handle properly such a complex component.</p>"},{"location":"development/precommit/","title":"Precommit","text":""},{"location":"development/precommit/#pre-commit-setup","title":"pre-commit setup","text":"<p>In your local folder, create a file <code>.git/hooks/pre-commit</code> with the following content</p> <pre><code>#!/bin/bash\nnpm run pre-commit\nRESULT=$?\n[ $RESULT -ne 0 ] &amp;&amp; exit 1\nexit 0\n</code></pre> <p>and make this file executable (<code>chmod +x .git/hooks/pre-commit</code>).</p> <p>In this way, <code>npm run pre-commit</code> will run before every commit. This script is defined in <code>package.json</code>, and points to <code>lint-staged</code>. The configuration is written in <code>.lintstagedrc.json</code>, and it lists the checks to perform on each kind of file (e.g. <code>eslint</code> and then <code>prettier</code>).</p>"},{"location":"development/release/","title":"Release","text":""},{"location":"development/release/#release","title":"Release","text":"<p>Steps to release a new <code>fractal-web</code> version:</p> <ul> <li>Update <code>CHANGELOG.md</code> on <code>main</code> branch, replacing the \"Unreleased\" temporary title with the desidered version number</li> <li>Update the <code>version-compatibility.md</code> doc page</li> <li>Commit the changes</li> <li>Execute <code>npm version &lt;major|minor|patch&gt;</code></li> <li>Execute <code>git push origin main</code></li> <li>Execute <code>git push origin &lt;new-version-tag&gt;</code></li> <li>Update the GitHub release page with the information from <code>CHANGELOG.md</code></li> </ul> <p>NOTE: Pushing a new version tag (like v5.6.7) triggers a dedicated GitHub action, which also creates build artifacts (based on <code>npm pack</code>) and attaches them to the GitHub release.</p>"},{"location":"development/setup/","title":"Development setup","text":""},{"location":"development/setup/#install-node","title":"Install node","text":"<p>Versions 18 or 20 of Node.js are recommended. See the quickstart for more details about how to install node.</p>"},{"location":"development/setup/#install-fractal-web-from-git-repository","title":"Install fractal-web from git repository","text":"<p>Clone this repository <pre><code>git clone https://github.com/fractal-analytics-platform/fractal-web.git\ncd fractal-web\n</code></pre> then optionally checkout to a specific version tag <pre><code>git checkout v0.6.0\n</code></pre> and finally install via <pre><code>cd jschema\nnpm install\ncd ..\nnpm install\n</code></pre></p>"},{"location":"development/setup/#set-environment-variables","title":"Set environment variables","text":"<p>To properly run fractal-web you have to configure some environment variables. The environment variables page contains the complete list of supported environment variables and their default values. It also includes some troubleshooting infomation about errors related to environment variables misconfiguration.</p> <p>When running the application from the git repository, environment variables are set either in <code>.env</code> or <code>.env.development</code> files, see vite documentation (briefly: <code>.env.development</code> is the relevant file when using <code>npm run dev</code> and <code>.env</code> is the relevant file when using <code>npm run preview</code>).</p> <p>You can also add your customizations in a file named <code>.env.local</code> or <code>.env.development.local</code> to avoid writing on env files that are under version control.</p>"},{"location":"development/setup/#run-fractal-web-from-git-repo","title":"Run fractal-web from git repo","text":"<p>For development, run the client application via</p> <pre><code>npm run dev\n</code></pre> <p>The application will run at <code>http://localhost:5173</code>.</p> <p>To test a production build, first execute</p> <pre><code>npm run build\n</code></pre> <p>And then</p> <pre><code>npm run preview\n</code></pre> <p>Also in this case the application runs at <code>http://localhost:5173</code>.</p>"},{"location":"development/structure/","title":"Code-base structure","text":"<p>This project is based on svelte kit and follows its conventions and structure.</p>"},{"location":"development/structure/#1-level-folders","title":"1-level folders","text":"<p>By default, the main application folder is located at <code>/src</code>. The structure of this folder is explained in depth in svelte kit docs</p> <p><code>/static</code> is a folder related to static files that will be served by the client server. More on this could be found in the svelte kit docs.</p> <p>The <code>/lib</code> folder contains files and sources that enable correct instrumentation and testing of this client application. Currently, within this folder are present files to support the project's unit tests arrangements and other library files to populate local instances of the fractal server in order to test the client.</p> <p>As for testing, currently, there are two folders <code>/__tests__</code> and <code>/tests</code>. The former contains files of unit tests executed by <code>vitest</code> and the latest is related to <code>playwright</code> testing. This structure could be improved and organized differently by updating project configuration files, specifically <code>vite.config.js</code> and <code>playwrght.config.js</code> which are located at project root.</p> <p><code>/examples</code> folder contains configuration guidance to set up local environments to test different fractal server / fractal web interoperability architectures.</p> <p><code>/docs</code> folder is the root of the project docs files.</p> <pre><code>[project root]\n\u251c /src\n\u251c /static\n\u251c /lib\n\u251c /__tests__\n\u251c /tests\n\u251c /examples\n\u251c /docs\n</code></pre>"},{"location":"development/structure/#application-structure","title":"Application structure","text":"<p>With reference to <code>/src/routes</code> folder, therein are defined svelte kit page components that structure the fractal web client.</p> <p>It is important to mention that, this client application is server-side rendered. By default, this is the default behaviour of svelte kit.</p> <p>Before proceeding, it is important to understand the distinction of files terminating with the suffix <code>+[.]server.js</code>. Those files are explicitly processed by the client's server.</p> <p>This client application is in essence a proxy that enables users to interact with a server application, the fractal server. Through the browser interface, the svelte application enable users to build HTTP requests that will be sent to the fractal server.</p> <p>The svelte client and fractal server interact through a REST interface.</p> <p>But how is this interaction implemented in this client?</p>"},{"location":"development/structure/#client-server-interoperability","title":"Client server interoperability","text":"<p>As said, the svelte client communicates with the fractal server through a set of REST APIs.</p> <p>In this client, every request to the fractal server is sent by the nodejs server that is serving the svelte application.</p> <p>It is important to understand that these requests are made in the server context of the svelte client. No request to the fractal server is sent directly by the browser of the user.</p> <p>The fact that every request on behalf of a user is sent through a common backend nodejs server, implies a proxy architecture. The way this works is the following: the svelte client in the browser sends a HTTP request to the nodejs server that is serving the application. This request, with the attached cookies, is then used to compose a new request to be sent to the fractal server.</p> <p>Note that the authentication context is kept thanks to cookies that establish user sessions.</p> <p>The following image provides an overview for the reader of the described architecture.</p> <p></p> <p>To avoid duplicating the logic of each fractal-server endpoint and simplify the error handling, a special Svelte route has been setup to act like a transparent proxy: <code>src/routes/api/[...path]/+server.js</code>. This is one of the suggested way to handle a different backend according to Svelte Kit FAQ.</p> <p>So, by default, the AJAX calls performed by the front-end have the same path and payload of the fractal-server API, but are sent to the Node.js Svelte back-end. Some Python API endpoints (like the <code>/auth</code> and <code>/admin</code> endpoints) that don't start with <code>/api</code> are handled in a slightly different way. Indeed, the <code>/api</code> prefix is needed by <code>hooks.server.js</code> to detect if the received call is an AJAX call, in order to process the token expiration in a custom way. To preserve this behavior for all the API calls these paths are rewritten adding the <code>/api</code> prefix.</p> <p>Summarizing, the frontend code:</p> <ul> <li>uses exactly the same path of the fractal-server API for the <code>/api</code> endpoints </li> <li>uses <code>/api/auth</code> for <code>/auth</code> endpoints</li> <li>uses <code>/api/admin</code> for <code>/admin</code> endpoints</li> </ul> <p>Other than the AJAX calls, there are also some calls to fractal-server API done by Svelte SSR, while generating the HTML page. These requests are defined in files under <code>src/lib/server/api/v1</code>. Here requests are grouped by contexts as <code>auth_api</code>, <code>admin_api</code>, [...].</p>"},{"location":"development/structure/#an-example-using-actions","title":"An example using actions","text":"<p>The login is still using the Svelte action approach, in which we have to extract the data from a formData object and then use it to build a JSON payload to be forwarded to fractal-server.</p> <p>Consider the code at <code>src/lib/server/api/auth_api.js:5</code>:</p> <pre><code>/**\n * Request to authenticate user\n * @param fetch\n * @param data\n * @returns {Promise&lt;*&gt;}\n */\nexport async function userAuthentication(fetch, data) {\nconst response = await fetch(FRACTAL_SERVER_HOST + '/auth/token/login', {\nmethod: 'POST',\ncredentials: 'include',\nmode: 'cors',\nbody: data\n});\n\nif (!response.ok) {\nthrow new Error('Authentication failed');\n}\n\nreturn await response.json();\n}\n</code></pre> <p>This code is responsible to call the <code>/auth/token/login</code> REST api endpoint of the fractal server. The request is made by the svelte client application in a backend context within the nodejs server.</p> <p>The client will, if the request succeeds, handle the fractal server response in a form action.</p> <pre><code>// src/routes/auth/login/+page.server.js\n\nexport const actions = {\n// Default page action / Handles POST requests\ndefault: async ({ request, cookies, fetch }) =&gt; {\n// TODO: Handle login request\nconsole.log('Login action');\n\n// Get form data\nconst formData = await request.formData();\n// Set auth data\nlet authData;\ntry {\nauthData = await userAuthentication(fetch, formData);\n} catch (error) {\nconsole.error(error);\nreturn fail(400, { invalidMessage: 'Invalid credentials', invalid: true });\n}\nconst authToken = authData.access_token;\n// Decode JWT token claims\nconst tokenClaims = jose.decodeJwt(authToken);\n\n// Set the authentication cookie\nconst cookieOptions = {\ndomain: `${AUTH_COOKIE_DOMAIN}`,\npath: `${AUTH_COOKIE_PATH}`,\nexpires: new Date(tokenClaims.exp * 1000),\nsameSite: `${AUTH_COOKIE_SAME_SITE}`,\nsecure: `${AUTH_COOKIE_SECURE}` === 'true',\nhttpOnly: `${AUTH_COOKIE_HTTP_ONLY}` === 'true'\n};\nconsole.log(cookieOptions);\ncookies.set(AUTH_COOKIE_NAME, authData.access_token, cookieOptions);\n\nredirect(302, '/');\n}\n};\n</code></pre> <p>The previous code is executed in the backend (as one could understand by the name of the file) and it basically provides a form action that allows a user to login.</p> <p>This kind of pattern, form actions, is widely used within the client application, as it enables the browser-side client application to request different actions the server-side should take.</p> <p>In this case, we briefly described the authentication flow of the svelte client application.</p> <p>Notice that the authentication and session of a user is managed through cookies. The client application requests a authentication token to the fractal server, which data is used to create another cookie that the nodejs server of the client application sends to the browser.</p> <p>The default action within the <code>+page.server.js</code> is requested through an HTTP request that the browser-side client app makes when a user sends an HTML from, for completion, the one defined in:</p> <pre><code>&lt;!-- src/routes/auth/login/+page.svelte --&gt;\n\n&lt;script&gt;\nexport let form;\nlet loginError = false;\n\nif (form?.invalid) {\nloginError = true;\n}\n&lt;/script&gt;\n\n&lt;div class='container'&gt;\n  &lt;div class='row'&gt;\n    &lt;h1&gt;Login&lt;/h1&gt;\n  &lt;/div&gt;\n  &lt;div class='row'&gt;\n    &lt;div class='col-md-4'&gt;\n      &lt;form method='POST'&gt;\n        &lt;div class='mb-3'&gt;\n          &lt;label for='userEmail' class='form-label'&gt;Email address&lt;/label&gt;\n          &lt;input\n            name='username'\n            type='email'\n            class=\"form-control {loginError ? 'is-invalid' : ''}\"\n            id='userEmail'\n            aria-describedby='emailHelp'\n            required\n          /&gt;\n          &lt;div id='emailHelp' class='form-text'&gt;The email you provided to the IT manager&lt;/div&gt;\n          &lt;div class='invalid-feedback'&gt;\n            {form?.invalidMessage}\n          &lt;/div&gt;\n        &lt;/div&gt;\n        &lt;div class='mb-3'&gt;\n          &lt;label for='userPassword' class='form-label'&gt;Password&lt;/label&gt;\n          &lt;input name='password' type='password' class='form-control' id='userPassword' required /&gt;\n        &lt;/div&gt;\n        &lt;button class='btn btn-primary'&gt;Submit&lt;/button&gt;\n      &lt;/form&gt;\n    &lt;/div&gt;\n  &lt;/div&gt;\n&lt;/div&gt;\n</code></pre>"},{"location":"development/structure/#application-library","title":"Application library","text":"<p>While the <code>src/routes</code> is the public-facing side of the client application, <code>src/lib</code> contains the client internals.</p> <p>Within the lib are present four main sections: <code>common</code>, <code>components</code>, <code>server</code> and <code>stores</code>.</p> <p>Common contains client modules that export shared functionalities for both browser and server side parts of the app.</p> <p>Components contains all the svelte components definitions that are used within the client app. Components are organized by resources defined and managed by the fractal server.</p> <p>Server this is a special section as it is never shared and bundled into the package that a user receives in the browser. More info about this could be found in the svelte kit doc about server-only modules</p> <p>Stores are modules that export svelte store objects that are used by components to manage the state of the application.</p> <p>Note that stores are currently not well-organized or used due to the youth of the client.</p>"},{"location":"development/tests/","title":"Testing","text":""},{"location":"development/tests/#unit-tests","title":"Unit tests","text":"<p>Unit tests are performed via vitest, via the <code>test</code> script defined in <code>package.json</code>.</p>"},{"location":"development/tests/#end-to-end-testing","title":"End-to-end testing","text":"<p>E2E tests are done using playwright. They can be executed using the following command:</p> <pre><code>npx playwright test\n</code></pre> <p>To print Svelte webserver log set the environment variable <code>DEBUG=pw:webserver</code>.</p> <p>To execute the tests seeing the browser add the <code>--headed</code> flag or the <code>--debug</code> flag if you need to watch them step by step.</p> <p>By default v2 tests are run. These tests require running a fractal-server instance using <code>FRACTAL_RUNNER_BACKEND=local_experimental</code>.</p> <p>To run v1 tests start playwright setting the environment variable <code>TEST_VERSION</code> to <code>v1</code>. These tests require running a fractal-server instance using <code>FRACTAL_RUNNER_BACKEND=local</code>.</p> <p>OAuth2 test requires a running instance of dexidp test image and a fractal-server instance configured to use it.</p> <p>To skip OAuth2 test set the environment variable <code>SKIP_OAUTH_TEST</code> to <code>true</code>.</p> <p>To run the OAuth2 test locally add the following configuration to <code>.fractal_server.env</code>:</p> <pre><code>OAUTH_DEXIDP_CLIENT_ID=client_test_web_id\nOAUTH_DEXIDP_CLIENT_SECRET=client_test_web_secret\nOAUTH_DEXIDP_REDIRECT_URL=http://localhost:5173/auth/login/oauth2/\nOAUTH_DEXIDP_OIDC_CONFIGURATION_ENDPOINT=http://127.0.0.1:5556/dex/.well-known/openid-configuration\n</code></pre> <p>And then start the test IdP container:</p> <pre><code>docker run -d --rm -p 5556:5556 ghcr.io/fractal-analytics-platform/oauth:0.1\n</code></pre>"},{"location":"development/tests/#coverage","title":"Coverage","text":"<p>Warning: code coverage results are not reliable at the moment</p> <p>Coverage for the unit tests:</p> <pre><code>npx vitest --coverage\n</code></pre> <p>Warning: coverage takes some time, since we are using the option <code>{ all: true }</code>.</p>"},{"location":"development/tests/#local-fractal-server-instance","title":"Local <code>fractal-server</code> instance","text":"<p>The <code>lib/fractal-server</code> folder includes basic instructions to get a local instance of <code>fractal-server</code> running.</p>"},{"location":"development/tests/#remote-fractal-server-instance","title":"Remote <code>fractal-server</code> instance","text":"<p>One could also test a local <code>fractal-web</code> instance with a remote <code>fractal-server</code> one. If SSH access is possible, then a command like <pre><code>REMOTE_PORT=8010\nLOCAL_PORT=8000\nREMOTE_USER=...\nREMOTE_HOST_IP=...\n\nssh $REMOTE_USER@$REMOTE_HOST_IP -L $LOCAL_PORT:127.0.0.1:$REMOTE_PORT -N\n</code></pre> should work and forward the remote port <code>REMOTE_PORT</code> to the <code>LOCAL_PORT</code> on localhost, so that <code>fractal-web</code> can use it from the local machine. Note that the required details for the <code>ssh -L</code> command may be different in each specific case, depending for instance on the <code>fractal-server</code> configuration (e.g the <code>--bind</code> argument of <code>gunicorn</code>), or on whether an additional proxy is needed to reach the remote host.</p>"}]}
\ No newline at end of file
+{"config":{"lang":["en"],"separator":"[\\s\\-]+","pipeline":["stopWordFilter"]},"docs":[{"location":"","title":"Fractal Web Client","text":""},{"location":"#fractal","title":"Fractal","text":"<p>Fractal is a framework developed at the BioVisionCenter to process bioimaging data at scale in the OME-Zarr format and prepare the images for interactive visualization.</p> <p></p> <p>This is the repository that contains the Fractal web client. Find more information about Fractal in general and the other repositories at the Fractal home page.</p>"},{"location":"#web-client-architecture","title":"Web client architecture","text":"<p>The client is a Svelte application that uses SvelteKit as a framework. The application is composed of a set of pages that are rendered by a node server and served to a client browser. The node server acts as a proxy to the fractal server, forwarding the requests to the server and returning the responses to the client. Find more details in specific pages.</p>"},{"location":"#license-and-contributors","title":"License and contributors","text":"<p>Fractal was conceived in the Liberali Lab at the Friedrich Miescher Institute for Biomedical Research and in the Pelkmans Lab at the University of Zurich by @jluethi and @gusqgm. The Fractal project is now developed at the BioVisionCenter at the University of Zurich and the project lead is with @jluethi. The core development is done under contract by eXact lab S.r.l..</p> <p>Unless otherwise specified, Fractal components are released under the BSD 3-Clause License, and copyright is with the BioVisionCenter at the University of Zurich.</p>"},{"location":"changelog/","title":"CHANGELOG","text":"<p>Note: Numbers like (#123) point to closed Pull Requests on the fractal-web repository.</p>"},{"location":"changelog/#unreleased","title":"Unreleased","text":"<ul> <li>Added tasks search filters (#658);</li> <li>Split standard-user tasks page into \"tasks page\" vs \"tasks management page\" (#658);</li> <li>Added alive endpoint (#658);</li> <li>Added user column and sorted users by email in <code>/v2/admin/task-groups/activities</code> (#658);</li> </ul>"},{"location":"changelog/#1110","title":"1.11.0","text":"<ul> <li>Alignment with fractal-server 2.9.0 (#640, #643, #652, #655):<ul> <li>Updated task collections logic and created task-group activities pages for standard users and administrators (#640);</li> <li>Removed active checkbox from task group edit modal (#640);</li> <li>Added Manage button to deactivate and reactivate task groups (#640);</li> <li>Removed usage of DB_ENGINE and SQLITE_PATH variables (#643);</li> <li>Displayed <code>timestamp_last_used</code> property in task-group info modal (#643);</li> <li>Viewer paths page improvements (#643);</li> <li>Added manage buttons on admin task-groups page (#643);</li> <li>Added last used timestamp filter to task-group admin page (#643);</li> <li>Used new <code>GET /auth/current-user/allowed-viewer-paths/</code> endpoint (#652);</li> <li>Added \"Download token\" button in \"My profile\" page (#652);</li> <li>Implemented removal of users from group (#655);</li> <li>Implemented import of user settings from another user (#655);</li> <li>Used new set-groups endpoint (#655);</li> <li>Sorted task-group activities by timestamp_started (more recent first) (#655);</li> </ul> </li> </ul>"},{"location":"changelog/#1101","title":"1.10.1","text":"<ul> <li>Fixed wrong workflow tasks order after task version update (#637);</li> </ul>"},{"location":"changelog/#1100","title":"1.10.0","text":"<ul> <li>Added project dir setting (#634);</li> <li>Made zarr_dir optional when creating dataset (#634);</li> <li>Updated query parameters of GET /api/v2/task/ (#634);</li> <li>Displayed task collection logs also in install phase (#634);</li> <li>Handled missing banner file error (#634);</li> <li>Used fractal-logos sources for README and docs (#634);</li> <li>Added fractal logo (#626);</li> <li>Removed usage of pip extras when installing fractal-server for testing (#626);</li> <li>Removed usage of verbose query parameter in task collection (#626);</li> </ul>"},{"location":"changelog/#190","title":"1.9.0","text":"<ul> <li>Alignment with fractal-server 2.7 (#583, #601, #605, #612, #616, #620):<ul> <li>Removed owner from v2 tasks (#583);</li> <li>Displayed workflow task warning message (#583);</li> <li>Implemented selection of group in task creation (#583);</li> <li>First implementation of new workflow task modal (#583);</li> <li>Used new group_ids_names field (#583);</li> <li>Renamed source to label in custom python env task creation (#583);</li> <li>Changes to admin tasks page (#583, #601);</li> <li>Changed task list to use task groups (#601);</li> <li>Changes to job submission healthcheck page (#601);</li> <li>Implemented task group modal info, edit and delete (#601);</li> <li>Removed usage of source field (#601);</li> <li>Filtered identical task groups (#605);</li> <li>Removed order field from workflow task modal (#605);</li> <li>Disabled editing of task name (#605);</li> <li>Added user group setting editor form (#612);</li> <li>Supported deletion of groups (#612);</li> <li>Sorted tasks by id (#616);</li> <li>Created healthcheck task as private (#616);</li> <li>Used args_schema=false in GET /api/v2/task-group/ (#616);</li> <li>Ignored empty task groups (#616);</li> <li>Checked pkg_name while computing workflow task update candidates (#616);</li> <li>Added admin task groups page (#620);</li> </ul> </li> <li>Fixed dropdown style (#601);</li> <li>Changed \"new version available\" icon (#583);</li> <li>Login page layout improvements (#605);</li> <li>Fixed issue when editing user after setting the superuser privilege (#612);</li> <li>Used response.data.version when displaying task collections (#616);</li> <li>Implemented reordering of tasks in workflow using drag and drop (#616);</li> <li>Fixed broken unsaved changes modal, for non-JSON-schema-based workflowtask edits (#616);</li> <li>Refactored user editing form using only one save button (#616);</li> <li>Allowed same key for attribute and type in input filters (#620);</li> </ul>"},{"location":"changelog/#180","title":"1.8.0","text":"<ul> <li>Drop Node 16 support (#574);</li> <li>Upgraded dependencies (#574):<ul> <li>svelte: 3.x -&gt; 4.x</li> <li>@sveltejs/kit: 1.x -&gt; 2.x</li> <li>@sveltejs/adapter-node: 1.x -&gt; 2.x</li> <li>@sveltejs/adapter-static: 2.x -&gt; 3.x</li> <li>eslint: 8.x -&gt; 9.x</li> <li>typescript: 4.x -&gt; 5.x</li> <li>vite: 4.x -&gt; 5.x</li> <li>vitest: 0.x -&gt; 1.x</li> <li>@vincjo/datatables: 1.6.0 -&gt; 1.14.10</li> <li>bootstrap: 5.2.3 -&gt; 5.3.3</li> </ul> </li> </ul>"},{"location":"changelog/#172","title":"1.7.2","text":"<ul> <li>Added viewer paths editor in admin area (#571);</li> <li>Added user viewer paths page (#571);</li> </ul>"},{"location":"changelog/#171","title":"1.7.1","text":"<ul> <li>Allowed null values in settings API requests (#570);</li> <li>Hided cache dir from user settings page when using SSH Slurm (#570);</li> <li>Made FRACTAL_RUNNER_BACKEND environment variable mandatory (#570);</li> </ul>"},{"location":"changelog/#170","title":"1.7.0","text":"<ul> <li>Added \"My Settings\" page and updated admin user editor (#564);</li> <li>Fixed duplicated entries in owner dropdown (#562);</li> <li>Added \"View plate\" button on dataset page (#562);</li> <li>Improved stability of end to end tests (#560);</li> </ul>"},{"location":"changelog/#160","title":"1.6.0","text":"<ul> <li>Displayed OAuth2 accounts in user profile page (#557);</li> <li>Supported <code>FRACTAL_API_V1_MODE=include_read_only</code> (#557);</li> <li>Added support for displaying temporary warning banner using the <code>WARNING_BANNER_PATH</code> environment variable (#557);</li> <li>Deprecated support for legacy tasks in V2 workflows (#554);</li> </ul>"},{"location":"changelog/#150","title":"1.5.0","text":"<ul> <li>Implemented functionality for creating and displaying user groups (#551);</li> <li>Displayed an error when job submission failed before starting execution of tasks (#548);</li> </ul>"},{"location":"changelog/#143","title":"1.4.3","text":"<ul> <li>Added settings page to admin area (#544);</li> </ul>"},{"location":"changelog/#142","title":"1.4.2","text":"<ul> <li>Added admin page for job submission healthcheck (#543);</li> </ul>"},{"location":"changelog/#141","title":"1.4.1","text":"<ul> <li>Raised a warning upon import/export of a workflow with a custom task (#542);</li> <li>Experimental feature: added vizarr viewer links to dataset page (#542);</li> <li>Used links instead of the \"Open\" button (#542);</li> <li>Added documentation about systemd service config (#542);</li> <li>Added e2e testing of OAuth2 login (#542);</li> <li>Improved handling of validation errors on forms and documentation about error handling (#542);</li> <li>Added <code>white-space: pre-wrap</code> on all <code>pre</code> tags (#542);</li> </ul>"},{"location":"changelog/#140","title":"1.4.0","text":"<ul> <li>Fixed input filters lost after version update (#535);</li> <li>JSON Schema form: computed default values also for empty object (#535);</li> <li>Supported <code>prefixItems</code> of JSON Schema Draft 2020-12 - <code>pydantic_v2</code> (#535);</li> </ul>"},{"location":"changelog/#132","title":"1.3.2","text":"<ul> <li>Supported <code>pydantic_v2</code> schemas (#532);</li> </ul>"},{"location":"changelog/#131","title":"1.3.1","text":"<ul> <li>Fixed custom key not displayed in JSON Schema form (#529);</li> <li>Added dropdown for Python version in tasks (#526);</li> <li>Improved formatting of errors in standard error alert component (#526);</li> <li>Used <code>postgres-psycopg</code> adapter in CI (#525);</li> <li>Used <code>FRACTAL_BACKEND_RUNNER=local_experimental</code> in CI for v2 tests (#525);</li> </ul>"},{"location":"changelog/#130","title":"1.3.0","text":"<p>Starting from this release the Sandbox pages are not included in fractal-web anymore, instead they are static pages published together with the documentation.</p> <ul> <li>Added Custom Python env task collection (#523);</li> <li>Fixed issue with ajv formats on sandbox (#522);</li> <li>Removed \"Clear\" button from tuples (#521);</li> <li>Added \"Reset\" button on top-level properties having a default value (#521);</li> <li>Added task manifest sandbox (#521);</li> <li>Validated invalid text in numeric inputs (#521);</li> <li>Moved JSON Schema components to a separated component (#518);</li> <li>Moved Sandbox pages to a separated component (#518);</li> </ul>"},{"location":"changelog/#120","title":"1.2.0","text":"<ul> <li>Conditionally included V1 pages (#514);</li> <li>Added task version update sandbox page (#509);</li> <li>JSON Schema form improvements (#509):<ul> <li>supported enums of any type;</li> <li>supported tuples;</li> <li>used grey color for optional properties that are unset;</li> <li>hided default label for fields without title.</li> </ul> </li> <li>Added docs about JSON Schema Sandbox page (#509).</li> <li>Added maintenance banner when fractal-server is down (#504).</li> </ul>"},{"location":"changelog/#110","title":"1.1.0","text":"<p>WARNING: with this release all the environment variables will be read from the environment, when the service is started, not during build time. Remember to load in your environment all the variables that you need when you start the service in production. This will not affect development setup. See https://fractal-analytics-platform.github.io/fractal-web/quickstart/ for instructions.</p> <ul> <li>Updated quickstart documenting the changes related to environment variables (#492).</li> <li>Fixed bug in default dataset selection when job references a deleted dataset (#492).</li> <li>Fixed v1 workflow task version update bug (#492).</li> <li>Added <code>npm pack</code> artifacts to files published by the CI during the release (#492).</li> <li>Fixed v2 admin job download link (#492).</li> <li>Imported all the environment variables dynamically (#492).</li> <li>Added backend logging using Log4js (#492).</li> <li>Improved JSON Schema Sandbox page (#490).</li> </ul>"},{"location":"changelog/#104","title":"1.0.4","text":"<ul> <li>Removed users management section from admin area v1 (#485).</li> <li>Included v1/v2 switcher in admin-area job page (#485).</li> <li>Setup tests to use PostgreSQL instead of SQlite (#484).</li> <li>Implemented tasks admin page (#484).</li> <li>Improved form builder used in workflow tasks without JSON Schema and in Meta properties tab (#481).</li> <li>Used collapsible sections in dataset history modal (#481).</li> </ul>"},{"location":"changelog/#103","title":"1.0.3","text":"<ul> <li>fixed issue in task version update when no arguments fix is needed (#477).</li> </ul>"},{"location":"changelog/#102","title":"1.0.2","text":"<ul> <li>fixed issue in task version update with optional arguments (#475).</li> </ul>"},{"location":"changelog/#101","title":"1.0.1","text":"<ul> <li>used payload containing all fields in meta properties PATCH endpoint (#473).</li> </ul>"},{"location":"changelog/#100","title":"1.0.0","text":"<ul> <li>Supported fractal-server API V2:<ul> <li>added menu switch to support legacy and current API (#434, #457);</li> <li>Dataset V2 CRUD with attribute and type filters (#434);</li> <li>new Dataset page with image list and filters (#434);</li> <li>updated Single Task form to handle parallel and non parallel fields (#434);</li> <li>updated workflow task form to handle parallel and non parallel arguments (#434);</li> <li>handled V2 import and export of workflow task arguments (#434);</li> <li>handled V2 version workflow task version update (#434);</li> <li>added admin \"Tasks V1/V2 compatibility\" page (#450);</li> <li>supported adding V1 task in V2 workflow (#450);</li> <li>removed read only property from V2 datasets (#450);</li> <li>added input filters tab in workflow task page (#452, #457);</li> <li>added searchable dropdowns for image filters (#452);</li> <li>moved editing of dataset inside dataset page (#452);</li> <li>supported editing of single dataset images (#457);</li> <li>used switches to represent boolean flags (#457);</li> <li>implemented continue/restart workflow (#465);</li> <li>set default first task when continuing a workflow (#466);</li> <li>displayed applied filters in workflow execution modal (#466);</li> <li>implemented import and export of datasets (#467);</li> <li>handled selection of default dataset on workflow page (#467);</li> </ul> </li> </ul>"},{"location":"changelog/#0102","title":"0.10.2","text":"<ul> <li>Added search functionality on jobs table filters (#424).</li> </ul>"},{"location":"changelog/#0101","title":"0.10.1","text":"<ul> <li>Fixed bug in workflow task meta properties update (#422).</li> </ul>"},{"location":"changelog/#0100","title":"0.10.0","text":"<p>This release requires fractal-server 1.4.6.</p> <ul> <li>Improved id and timestamp layout on jobs table (#420).</li> <li>Added query parameters to avoid loading unused fields on the following GET endpoints (#420):<ul> <li><code>/api/v1/job/</code>, <code>/api/v1/{project.id}/job/</code>, <code>/admin/job/</code> (<code>log</code> param)</li> <li><code>/api/v1/task/</code> (<code>args_schema</code> param)</li> <li><code>/api/v1/dataset/</code>, <code>/api/v1/project/{project.id}/dataset/</code> (<code>history</code> param)</li> </ul> </li> <li>Added <code>show_tmp_logs=true</code> query parameter to display log of running jobs (#420).</li> </ul>"},{"location":"changelog/#092","title":"0.9.2","text":"<ul> <li>Supported JSON Schema <code>allOf</code> feature in task arguments form (#417).</li> </ul>"},{"location":"changelog/#091","title":"0.9.1","text":"<ul> <li>Improved visualization of details on job logs modal (#415).</li> <li>Added job id filter on admin jobs page (#415).</li> <li>Added spinner on workflow task modal when tasks list is loading (#410).</li> <li>Implemented import and export of workflow task arguments (#410).</li> <li>Improved sorting of users in dropdown of the admin jobs page (#402).</li> <li>Fixed bug in retrieval of job log from the admin jobs page (#402).</li> <li>Highlighted relevant part of the error message in workflow job log modal (#402).</li> <li>Made the error message directly accessible from the new workflow page (#402).</li> </ul>"},{"location":"changelog/#090","title":"0.9.0","text":"<p>This release requires fractal-server 1.4.3.</p> <ul> <li>Removed <code>running</code> job status (#401).</li> <li>Aligned timestamp definitions with fractal-server 1.4.3 (#401).</li> <li>Sorted projects by descending creation timestamp (#401).</li> <li>Removed coverage setup from Playwright tests and CI (#399).</li> </ul>"},{"location":"changelog/#082","title":"0.8.2","text":"<ul> <li>Improvements on worflow task form (#393):<ul> <li>supported JSON Schema <code>enum</code> type;</li> <li>supported JSON Schema <code>minimum</code>, <code>maximum</code>, <code>exclusiveMinimum</code> and <code>exclusiveMaximum</code> for numeric types;</li> <li>supported JSON Schema <code>minItems</code> and <code>maxItems</code> for array type;</li> <li>supported reordering of array fields;</li> <li>set bold font on nested required properties;</li> <li>improved field validation error messages.</li> </ul> </li> <li>Add trailing slash to OAuth-callback url (#395).</li> </ul>"},{"location":"changelog/#081","title":"0.8.1","text":"<p>Note: with this release, <code>PUBLIC_FRACTAL_ADMIN_SUPPORT_EMAIL</code> becomes a required environment variable, and <code>npm run build</code> fails if it is missing. If you do not need a support email, just include a <code>PUBLIC_FRACTAL_ADMIN_SUPPORT_EMAIL=</code> line in your env file.</p> <ul> <li>Made <code>PUBLIC_FRACTAL_ADMIN_SUPPORT_EMAIL</code> static (#391).</li> <li>Added SLURM-account selection for user editing and for job execution (#391).</li> <li>Improved buttons feedback for slow API calls (#389).</li> </ul>"},{"location":"changelog/#080","title":"0.8.0","text":"<p>This release requires fractal-server 1.4.2.</p> <ul> <li>Users registered by the admin are automatically verified (#386).</li> <li>A warning message is displayed to unverified users (#386).</li> <li>Made page headers more homogeneous (#386).</li> <li>Replaced some icons with more suitable ones (#386).</li> <li>Added search boxes on datasets, workflows and workflow tasks selection (#386).</li> <li>Moved \"Create new workflow\" to a modal (#386).</li> <li>Added search project field on projects list page (#379).</li> <li>Used modal to create new project (#379).</li> <li>Sorted users in admin-area page (#379).</li> <li>Exposed stop-job and download-logs in admin-area jobs page (#379).</li> <li>Displayed number of rows in admin jobs page (#379).</li> <li>Fixed semver circular dependency issue (#379).</li> <li>Fixed issue with version sorting (#379).</li> <li>Sorted datasets by name (#379).</li> <li>Fixed accessibility issue (#379).</li> <li>Improved performance reducing the number of API calls on project, workflow and dataset pages (#379).</li> </ul>"},{"location":"changelog/#072","title":"0.7.2","text":"<p>Note: with this release, <code>PUBLIC_OAUTH_CLIENT_NAME</code> becomes a required environment variable, and <code>npm run build</code> fails if it is missing. If you do not need OAuth2 authentication, just include a <code>PUBLIC_OAUTH_CLIENT_NAME=</code> line in your env file.</p> <ul> <li>Made <code>PUBLIC_OAUTH_CLIENT_NAME</code> static (#376).</li> <li>Added help messages to user registration (#376).</li> <li>Made <code>AUTH_COOKIE_DOMAIN</code> optional (#376).</li> <li>Fixed hardcoded OAuth2 variable (#376).</li> </ul>"},{"location":"changelog/#071","title":"0.7.1","text":"<ul> <li>Auto-refresh of tasks table when a tasks collection completes successfully (#364).</li> <li>Auto-refresh of tasks collection status (#364).</li> <li>Made tasks list more compact by hiding the older versions (#364).</li> <li>Added the following fields on single task creation:<ul> <li>args schema file upload (#364).</li> <li>meta file upload (#364).</li> <li>docs info and docs link (#364).</li> </ul> </li> <li>Added editing of pinned package versions on tasks collection (#364).</li> <li>Supported editing of <code>cache_dir</code> from user profile page (#365).</li> <li>Added experimental workflow page with job monitoring (#363).</li> </ul>"},{"location":"changelog/#070","title":"0.7.0","text":"<p>This release requires fractal-server 1.4.0.</p> <ul> <li>Added admin jobs page (#352).</li> <li>Fixed expiration token issue for /admin and /auth endpoints (#352).</li> <li>Used new endpoints for retrieving current user and list of users (#350).</li> <li>Added user profile page (#336).</li> <li>Added admin area with users management (#336).</li> <li>Added Jobs button in home page (#346).</li> <li>Improved jobs table layout for small screens (#346).</li> <li>Fixed jobs status badge color bug (#346).</li> <li>Aligned with fractal-server 1.4.0 API, including trailing slash for endpoints' paths (#328).</li> <li>Added spinner during page loading (#328).</li> <li>Job pages:<ul> <li>Created per-user and per-workflow jobs pages (#328).</li> <li>Removed per-project jobs pages (#328).</li> <li>Added automatic background update job pages (#328).</li> </ul> </li> <li>Improved handling of session expiration (#333).</li> <li>Fixed logout bug (#327).</li> <li>Implemented OAuth2 login (#333).</li> <li>Added more playwright tests (#332).</li> </ul>"},{"location":"changelog/#063","title":"0.6.3","text":"<ul> <li>Implemented task-version update (#325).</li> </ul>"},{"location":"changelog/#062","title":"0.6.2","text":"<ul> <li>Fixed peformance issue with argument-description popovers (#324).</li> <li>Added end-to-end tests and coverage configuration (#320).</li> </ul>"},{"location":"changelog/#061","title":"0.6.1","text":"<p>This release works best with fractal-server &gt;=1.3.12 (since it makes use of the <code>dataset.history</code> property), but previous fractal-server versions are still supported.</p> <ul> <li>Added dataset history modal (#316).</li> <li>Fixed bug with save/discard changes in workflow task (#315).</li> <li>Fixed first-run redirects issue (#315).</li> </ul>"},{"location":"changelog/#060","title":"0.6.0","text":"<ul> <li>Added fractal-web version to the footer (#312).</li> <li>Added new modal for create/update dataset feature (#310).</li> <li>Standardized modal management to fix some bugs (#306).</li> <li>Added proxy endpoints and refactored error propagation (#288).</li> <li>Remove use of deployment-type <code>fractal-server</code> variable (#298).</li> <li>Add GitHub action to create GitHub releases (#305).</li> <li>Add a BSD3 license (#300).</li> </ul>"},{"location":"changelog/#056","title":"0.5.6","text":"<ul> <li>Improve displaying of <code>Dataset.meta</code> properties (#281).</li> <li>Remove obsolete file <code>src/routes/api/alive/+server.js</code> (#283).</li> </ul>"},{"location":"changelog/#055","title":"0.5.5","text":"<ul> <li>Fix bug in <code>JSchema.svelte</code> (#279).</li> </ul>"},{"location":"changelog/#054","title":"0.5.4","text":"<ul> <li>Always propagate cookie for API calls to <code>FRACTAL_SERVER_HOST</code>, even for different domains (#275).</li> </ul>"},{"location":"changelog/#053","title":"0.5.3","text":"<ul> <li>Add confirmation dialog for delete-task operation (#272).</li> <li>Enable WorkflowTask Info tab, and render <code>docs_info</code> from markdown (#271).</li> <li>Update import-workflow feature (#269).</li> <li>Revamp home page and user-related layout (#259).</li> <li>Review logout action (#259).</li> <li>Implement editing and deletion of tasks (#207, #268). </li> <li>Implement A-to-B workflow execution (#254).</li> <li>Fix WorkflowTask <code>meta</code> update (#261).</li> <li>Improve enable/disable button state, for project/dataset/workflow/resource creation (#257).</li> </ul>"},{"location":"changelog/#052","title":"0.5.2","text":"<ul> <li>Improve tasks handling within the client (#233).</li> <li>Prevent accidental loss of user-provided WorkflowTask arguments (#234).</li> </ul>"},{"location":"changelog/#051","title":"0.5.1","text":"<p>First release included in this CHANGELOG.</p>"},{"location":"environment-variables/","title":"Environment variables","text":"<p>The following environment variables can be used to configure fractal-web. </p> <p>Only when using <code>npm run dev</code> or <code>npm run preview</code> these variables are automatically read from <code>.env.development</code> and <code>.env</code> files. In production they must be set in the shell that starts the node process.</p> <ul> <li><code>FRACTAL_SERVER_HOST</code>: represents the URL of the fractal-server application (e.g. http://localhost:8000, or http://subdomain.example.org:8000); this variable is required;</li> <li><code>AUTH_COOKIE_NAME</code>: the name of the cookie used to store the user session; the default value is <code>fastapiusersauth</code>;</li> <li><code>AUTH_COOKIE_DOMAIN</code>: specifies which server can receive the cookie; remember to set it in production;</li> <li><code>AUTH_COOKIE_PATH</code>: the URL path where the cookie will be available; the default value is <code>/</code>;</li> <li><code>AUTH_COOKIE_SECURE</code>: sends the cookie only if the server is using HTTPS; the default value is <code>true</code>, can be set to <code>false</code> during development;</li> <li><code>AUTH_COOKIE_SAME_SITE</code>: set the SameSite attribute to the cookie; the default value is <code>lax</code>;</li> <li><code>PUBLIC_FRACTAL_ADMIN_SUPPORT_EMAIL</code>: the e-mail address displayed in the home page which can be used to send support requests; if the value is not set nothing is shown;</li> <li><code>PUBLIC_UPDATE_JOBS_INTERVAL</code>: the delay in milliseconds which occurs between two background requests that check for job status updates; the default value is <code>3000</code>;</li> <li><code>PUBLIC_OAUTH_CLIENT_NAME</code>: if set, the application enables the external account login via OAuth2; the name is used to create the authorization call sent to fractal-server (see configuration page);</li> <li><code>LOG_FILE</code>: the path of the file where logs will be written; by default is unset and no file will be created;</li> <li><code>LOG_LEVEL_FILE</code>: the log level of logs that will be written to the file; the default value is <code>info</code>;</li> <li><code>LOG_LEVEL_CONSOLE</code>: the log level of logs that will be written to the console; the default value is <code>warn</code>;</li> <li><code>FRACTAL_API_V1_MODE</code>: include/exclude V1 pages and version switcher; supported values are: <code>include</code>, <code>include_read_only</code>, <code>exclude</code>; the default value is <code>include</code>;</li> <li><code>FRACTAL_RUNNER_BACKEND</code>: specifies which runner backend is used; supported values are: <code>local</code>, <code>local_experimental</code>, <code>slurm</code>, <code>slurm_ssh</code>; setting this variable is mandatory;</li> <li><code>PUBLIC_FRACTAL_VIZARR_VIEWER_URL</code>: URL to fractal-vizarr-viewer service (e.g. http://localhost:3000/vizarr for testing);</li> <li><code>WARNING_BANNER_PATH</code>: specifies the path to a text file containing the warning banner message displayed on the site; the banner is used to inform users about important issues, such as external resources downtime or maintenance alerts; if the variable is empty or unset no banner is displayed.</li> </ul> <p>When running directly using <code>node</code> command these extra variables can also be configured:</p> <ul> <li><code>PORT</code>: specifies the port where Svelte server will run; the default value is 5173;</li> <li><code>ORIGIN</code> the URL where the app will be served (e.g. http://localhost:5173, or https://subdomain.example.org).</li> </ul>"},{"location":"environment-variables/#common-issues-related-to-environment-variables","title":"Common issues related to environment variables","text":"<p>The <code>node</code> command relies on some extra environment variables, and especially on <code>ORIGIN</code>:</p> <p>HTTP doesn't give SvelteKit a reliable way to know the URL that is currently being requested. The simplest way to tell SvelteKit where the app is being served is to set the <code>ORIGIN</code> environment variable  (see SvelteKit node servers documentation). A wrong origin value will result in the error message \"Cross-site POST form submissions are forbidden\".</p> <p>Unexpected behaviors can be related to wrong values of the <code>AUTH_COOKIE_DOMAIN</code> variable:</p> <p>A typical gotcha: if there is a mismatch between the cookie domain and the URL you are using (e.g. one points to localhost and the other one to 127.0.0.1), then the cookie won't be set and this will fail silently, therefore likely triggering other unexpected behaviors. If you leave the <code>AUTH_COOKIE_DOMAIN</code> empty, the cookie domain will be inferred from the HTTP call. This is useful to avoid domain mismatch issues during testing and development, but in production is suggested to set it as the name of the domain where the fractal-web server is running.</p>"},{"location":"examples/","title":"Examples","text":"<p>in progress</p> <p>See examples in https://github.com/fractal-analytics-platform/fractal-web/tree/main/examples, with configurations for:</p> <ul> <li>fractal-server</li> <li>fractal-web</li> <li>Apache proxy</li> </ul>"},{"location":"fractal_server/","title":"Basic guide for fractal-server startup","text":"<p>The <code>lib/fractal-server</code> folder describes the basic steps to install and run a local <code>fractal-server</code> instance, that can be then accessed through <code>fractal-web</code>.</p> <p>Briefly, one should: * Install fractal-server (<code>pip install fractal-server</code>); * Set up the database (<code>fractalctl set-db</code>); * Startup an instance (<code>fractalctl start</code>).</p> <p>Notes: 1. There must exist a <code>.fractal_server.env</code> file (see example in    <code>../lib/fractal-server/</code>), with some configuration variables. 2. It is necessary that the fractal-server instance is reachable from the    client by network connection (this is typically trivial, if fractal-server    is run locally e.g. at http://localhost:8000). This address also needs to match    the one in the <code>fractal-web</code> configuration file (either <code>.env</code> or    <code>.env.development</code>, depending on how you are running <code>fractal-web</code>). 3. It is useful to set the fractal-server environment variable    <code>JWT_EXPIRE_SECONDS</code> to a relevant value for the user to persist its session    on the client (e.g. <code>JWT_EXPIRE_SECONDS=84600</code>). 4. The configuration env file also defines some default credentials for an    admin user, that can be used for testing.</p>"},{"location":"oauth2/","title":"Integration with OAuth2 providers","text":"<p>Fractal supports OAuth2 login using GitHub, Google or custom providers.</p> <p>First, configure the server as described in OAuth2 documentation of fractal-server.</p> <p>Fractal-web callback has to be defined using the following path: <code>/auth/login/oauth2</code>.</p> <p>Then, enable the desired provider on fractal-web using the <code>PUBLIC_OAUTH_CLIENT_NAME</code> environment variable, for example:</p> <pre><code>PUBLIC_OAUTH_CLIENT_NAME=github\n</code></pre> <p>This variable has to match the client name defined in fractal-server configuration.</p>"},{"location":"oauth2/#full-details-for-local-example","title":"Full details for local example","text":"<ol> <li>Register an OAuth2 app on GitHub with<ul> <li>Homepage URL: http://127.0.0.1:5173</li> <li>Authorization callback URL: http://127.0.0.1:5173/auth/login/oauth2/</li> </ul> </li> <li>Set up the following env variables for fractal-server: <pre><code>OAUTH_GITHUB_CLIENT_ID=...\nOAUTH_GITHUB_CLIENT_SECRET=...\nOAUTH_GITHUB_REDIRECT_URL=http://127.0.0.1:5173/auth/login/oauth2/\n# [all other variables]\n</code></pre></li> <li>Set up the following env variables for fractal-web: <pre><code>FRACTAL_SERVER_HOST=http://127.0.0.1:8000\nAUTH_COOKIE_DOMAIN=127.0.0.1\nPUBLIC_OAUTH_CLIENT_NAME=github\n# [all other variables]\n</code></pre></li> </ol>"},{"location":"quickstart/","title":"Quickstart instructions","text":"<p>This page describes how to install fractal-web from release packages. If you need to install it from the git repository see the development setup page.</p>"},{"location":"quickstart/#install-node","title":"Install node","text":"<p>Versions 18 or 20 of Node.js are recommended (check your version with <code>node -v</code>). Version 16 is known to work, but not recommended.</p> <p>If these versions are not available via your favorite package installer, you can install them from this link for your specific platform. Another option is to use nvm, e.g. via <pre><code>nvm install 18\nnvm alias default 18\n</code></pre></p>"},{"location":"quickstart/#install-fractal-web-from-release-packages","title":"Install fractal-web from release packages","text":"<p>Starting from version 1.1.0, fractal-web releases provide tar.gz files containing the built files for each supported node version. You can install these packages with the following command:</p> <pre><code>FRACTAL_WEB_VERSION=1.1.0 &amp;&amp; NODE_MAJOR_VERSION=20 &amp;&amp; wget -qO- \"https://github.com/fractal-analytics-platform/fractal-web/releases/download/v${FRACTAL_WEB_VERSION}/node-${NODE_MAJOR_VERSION}-fractal-web-v${FRACTAL_WEB_VERSION}.tar.gz\" | tar -xz\n</code></pre> <p>Note: this will unpack in the current working directory the file <code>package.json</code> and the folders <code>build</code> and <code>node_modules</code>.</p> <p>To start the application installed in this way see the section Run fractal-web from the build folder below.</p>"},{"location":"quickstart/#set-environment-variables","title":"Set environment variables","text":"<p>To properly run fractal-web you have to configure some environment variables. The environment variables page contains the complete list of supported environment variables and their default values. It also includes some troubleshooting infomation about errors related to environment variables misconfiguration.</p> <p>If you want to run the application executing <code>node</code> in the <code>build</code> folder you have to export the environment variables in your shell. The following section provides an example on how to do that with a script.</p>"},{"location":"quickstart/#run-fractal-web-from-the-build-folder","title":"Run fractal-web from the build folder","text":"<p>You can create a script with the following content to run fractal-web installed from a release package:</p> <pre><code>#!/bin/sh\n\nexport FRACTAL_SERVER_HOST=http://localhost:8000\nexport PUBLIC_FRACTAL_ADMIN_SUPPORT_EMAIL=help@localhost\nexport PUBLIC_OAUTH_CLIENT_NAME=\n# remember to set this in production (e.g. subdomain.example.org)\nexport AUTH_COOKIE_DOMAIN=\n\nexport ORIGIN=http://localhost:5173\nexport PORT=5173\n\nexport LOG_FILE=fractal-web.log\n# default values for logging levels (uncomment if needed)\n# export LOG_LEVEL_FILE=info\n# export LOG_LEVEL_CONSOLE=warn\n\nexport FRACTAL_API_V1_MODE=include\nexport FRACTAL_RUNNER_BACKEND=local\n\n#export PUBLIC_FRACTAL_VIZARR_VIEWER_URL=\n#export WARNING_BANNER_PATH=\n\n# default values are usually fine for the following variables; remove comments if needed\n#export AUTH_COOKIE_NAME=fastapiusersauth\n#export AUTH_COOKIE_PATH=/\n#export AUTH_COOKIE_SAME_SITE=lax\n#export PUBLIC_UPDATE_JOBS_INTERVAL=3000\n\nnode build/\n</code></pre> <p>Note: starting from Node 20 you can also load the environment variables from a file using the <code>--env-file</code> flag:</p> <pre><code>node --env-file=.env build\n</code></pre>"},{"location":"quickstart/#systemd-service","title":"Systemd service","text":"<p>To run fractal-web as a Systemd service create the file <code>/etc/systemd/system/fractal-web.service</code> with the following content:</p> <pre><code>[Unit]\nDescription=Fractal Web\nAfter=syslog.target\n\n[Service]\nUser=fractal\nEnvironmentFile=/path/to/fractal-web/.env\nExecStart=/path/to/node /path/to/fractal-web/build\nRestart=on-failure\nRestartSec=5s\n\n[Install]\nWantedBy=multi-user.target\n</code></pre> <p>Enable the service:</p> <pre><code>sudo systemctl enable fractal-web\n</code></pre> <p>Start the service:</p> <pre><code>sudo systemctl start fractal-web\n</code></pre> <p>Check the service logs:</p> <pre><code>sudo journalctl -u fractal-web\n</code></pre>"},{"location":"sandbox-pages/","title":"Sandbox pages","text":"<p>When developing tasks it can be useful to have a quick way to test how a given JSON schema will appear in the workflow task arguments form or how a task version update will affect the users.</p> <p>The following sandbox pages are available:</p> <ul> <li>JSON Schema Sandbox page</li> <li>Task Version Update Sandbox page</li> <li>Task Manifest Sandbox page</li> </ul> <p>Both these pages provide a textarea for the JSON schemas. Notice that you can't paste the whole task manifest: you need to pick one of the <code>args_schema</code> values.</p> <p>To locally preview the sandbox pages enter the <code>sandbox</code> directory and run:</p> <pre><code>npm install\nnpm run dev\n</code></pre>"},{"location":"version-compatibility/","title":"Version Compatibility","text":"<p>The following table shows which <code>fractal-server</code> versions are compatible with which <code>fractal-web</code> versions.</p> fractal-web fractal-server 1.11.1 2.9.0 1.10.1 2.8.0 1.10.0 2.8.0 1.9.0 2.7.0 1.8.0 2.6.3 1.7.2 2.6.3 1.7.1 2.6.2 1.7.0 2.6.0 1.6.0 2.5.0 1.5.0 2.4.0 1.4.3 2.3.0 1.4.2 2.3.0 1.4.1 2.3.0 1.4.0 2.3.0 1.3.2 2.3.0 1.3.1 2.3.0 1.3.0 2.3.0 1.2.0 2.0.6 1.1.0 2.0.5 1.0.4 2.0.5 1.0.3 2.0.0 1.0.2 2.0.0 1.0.1 2.0.0 1.0.0 2.0.0 0.10.2 1.4.6 0.10.1 1.4.6 0.10.0 1.4.6 0.9.2 1.4.3 0.9.1 1.4.3 0.9.0 1.4.3 0.8.2 1.4.2 0.8.1 1.4.2 0.8.0 1.4.2"},{"location":"development/","title":"Development","text":"<p>Here are some useful details for <code>fractal-web</code> developments:</p> <ul> <li>Development setup</li> <li>Code-base structure</li> <li>Error handling</li> <li>JSON Schema form module</li> <li>Testing</li> <li>Documentation</li> <li>Precommit</li> <li>Release</li> </ul>"},{"location":"development/docs/","title":"Documentation","text":"<p>Here are the instructions to serve the documentation on localhost:8001:</p> <pre><code>python -m venv venv\nsource venv/bin/activate\npython -m pip install -r docs/doc-requirements.txt\nmkdocs serve --dev-addr localhost:8001\n</code></pre> <p>The documentation includes links to the sandbox pages. These pages are built separately and added to the site folder by the CI before publishing the documentation, so these links will not work using the mkdocs preview command displayed above. If you want to preview the sandbox pages run <code>npm run dev</code> inside the sandbox folder.</p>"},{"location":"development/error-handling/","title":"Error handling","text":"<p>This page describes which coding patterns are used by fractal-web to handle various error cases.</p>"},{"location":"development/error-handling/#fractal-server-errors-structure","title":"Fractal-server errors structure","text":"<p>Fractal-server error responses payloads are usually JSON structures having the error under a <code>detail</code> key. This is not true for the 500 Internal Server Error, which doesn't provide a JSON payload.</p> <p>Generic fractal-server errors contain the error message string directly as <code>detail</code> value or as an array of values:</p> <pre><code>{ \"detail\": \"this is the error message\" }\n</code></pre> <pre><code>{ \"detail\": [\"this is also an error\"] }\n</code></pre> <p>Validation errors associated with a specific request field are represented using a <code>loc</code> array that describes the position of the invalid field in the request payload:</p> <pre><code>{\n\"detail\": [\n{\n\"loc\": [\n\"body\",\n\"zarr_url\"\n],\n\"msg\": \"URLs must begin with '/' or 's3'.\",\n\"type\": \"value_error\"\n}\n]\n}\n</code></pre> <p>Some validation errors may not be associated with a specific field and in that case their <code>loc</code> array will reference a <code>__root__</code> element:</p> <pre><code>{\n\"detail\": [\n{\n\"loc\": [\n\"body\",\n\"__root__\"\n],\n\"msg\": \"error message\",\n\"type\": \"value_error\"\n}\n]\n}\n</code></pre> <p>The goal of fractal-web is to extract the error message and display it inside an alert component or directly near the invalid form field, when possible. If an unexpected JSON structure is received, fractal-web will display the error JSON payload as it is, but that should happen rarely, except for the JSON Schema form, whose errors may result in some complex payloads.</p>"},{"location":"development/error-handling/#error-responses-in-svelte-backend-ssr","title":"Error responses in Svelte backend (SSR)","text":"<p>Files in <code>src/lib/server/api</code> provide API calls to fractal-server to be used from Svelte backend. These calls are usually required to be successful in order to properly display the page, since they retrieve the main resources of the page. A failure at this level is usually a 404 error (e.g. attempting to open a project with a non existent id) or something really severe (500 errors). For this reason the API calls errors happening on Svelte backend should usually be directly propagated, in order to display the error code inside the page.</p> <p>The utility function <code>responseError()</code> (in <code>error.js</code>) can be used to propagate the error in these cases. It will throw an exception if an error response is detected, automatically extracting the <code>detail</code>.</p> <p>It is suggested to handle the unsuccessful response first, in order to return the payload at the end of the function.</p> <pre><code>if (!response.ok) {\nawait responseError(response);\n}\nreturn await response.json();\n</code></pre> <p>In this way it is easier to define properly the type of the response using JSDoc annotation.</p>"},{"location":"development/error-handling/#error-responses-in-svelte-frontend","title":"Error responses in Svelte frontend","text":""},{"location":"development/error-handling/#the-alerterror-class","title":"The AlertError class","text":"<p>The <code>AlertError</code> class represents errors handled by fractal-web that has to be displayed somewhere. It has a constructor that receives an object or string representing the error and an optional status code (if the error was originated from an unsuccessful API call).</p> <p>It can be used to istantiate a new error message; this is mostly used when we need to propagate an error from a component to another, that will catch the error:</p> <pre><code>throw new AlertError('Invalid JSON schema');\n</code></pre> <p>Most of the time it is used to handle an unsuccessful API response; the status code is used to check if it is a validation error (status is equals to 422) and it automatically extracts the message from the detail:</p> <pre><code>throw await getAlertErrorFromResponse(response);\n</code></pre>"},{"location":"development/error-handling/#the-standard-error-alert","title":"The standard error alert","text":"<p>It is possible to use the <code>displayStandardErrorAlert()</code> function to display a generic error inside an Bootstrap alert component. The function returns a reference to a <code>StandardErrorAlert</code> component, that can be used to hide the error invoking its <code>hide()</code> function.</p> <p>Inside the page we have to add a div for the alert component, with a defined id:</p> <pre><code>&lt;div id=\"errorAlert-projectInfoModal\" /&gt;\n</code></pre> <p>Then we have to define a variable for the alert component:</p> <pre><code>/** @type {import('$lib/components/common/StandardErrorAlert.svelte').default|undefined} */\nlet errorAlert = undefined;\n</code></pre> <p>Finally, we invoke the function to display the error:</p> <pre><code>errorAlert = displayStandardErrorAlert(\nnew AlertError(result, response.status),\n'errorAlert-projectInfoModal'\n);\n</code></pre> <p>If we need to hide the error (for example before clicking a submit button again), we can invoke the <code>hide()</code> function.</p> <pre><code>errorAlert?.hide();\n</code></pre> <p>Notice that we are using the optional chaining operator (<code>?.</code>), since the variable might be undefined if no error happened previously.</p>"},{"location":"development/error-handling/#form-validation-errors","title":"Form validation errors","text":"<p>A form usually needs an error alert component to display generic errors and a mechanism to display errors associated with specific form fields. This logic has been incapsulated in the <code>FormErrorHandler</code> class.</p> <p>The constructor accepts as first argument the id of the div that will contain the generic error message and as second argument an array containing all the fields that correspond with some input fields in the form.</p> <pre><code>const formErrorHandler = new FormErrorHandler('taskCollectionError', [\n'package',\n'package_version',\n'package_extras',\n'python_version'\n]);\n</code></pre> <p>Once created, it is possible to retrieve the <code>validationErrors</code> object from the form error handler:</p> <pre><code>const validationErrors = formErrorHandler.getValidationErrorStore();\n</code></pre> <p>This is a Svelte store referencing a map of errors, so it has to be accessed prepending the <code>$</code> symbol: <code>$validationErrors</code>, as shown in the example above.</p> <p>The Bootstrap validation classes are used inside the form: <code>has-validation</code> on parent, <code>is-invalid</code> on the invalid field and <code>invalid-feedback</code> for the message.</p> <pre><code>&lt;div class=\"input-group has-validation\"&gt;\n  &lt;div class=\"input-group-text\"&gt;\n    &lt;label class=\"font-monospace\" for=\"package\"&gt;Package&lt;/label&gt;\n  &lt;/div&gt;\n  &lt;input\n    name=\"package\"\n    id=\"package\"\n    type=\"text\"\n    class=\"form-control\"\n    required\n    class:is-invalid={$validationErrors['package']}\n    bind:value={python_package}\n  /&gt;\n  &lt;span class=\"invalid-feedback\"&gt;{$validationErrors['package']}&lt;/span&gt;\n&lt;/div&gt;\n</code></pre> <p>The <code>handleErrorResponse()</code> function is used to populate the fields from an error response:</p> <pre><code>if (!response.ok) {\nawait formErrorHandler.handleErrorResponse(response);\n}\n</code></pre> <p>The class also provides a <code>clearErrors()</code> function and some functions to manually add or remove errors (<code>addValidationError()</code>, <code>removeValidationError()</code>, <code>setGenericError()</code>); these are useful to handle some validation directly on the frontend (e.g. required fields), without performing any API calls.</p>"},{"location":"development/jschema/","title":"JSON Schema form module","text":"<p>The <code>jschema</code> folder on this repository contains a Svelte project that provides the JSON Schema form component (<code>JSchema.svelte</code>) and its related functions and classes. The file <code>index.js</code> contains the list of components and functions that are exported for public usage, so that they can be included using <code>from 'fractal-jschema'</code> from the main project.</p> <p>The main project defines <code>fractal-jschema</code> in <code>vite.config.js</code>, as an alias pointing to <code>jschema/src/lib/index.js</code>. In this way the jschema module is automatically built when the main project is built and the Hot Module Reload feature still works.</p> <p>Moreover, the path to jschema module has been added as <code>server.fs.allow</code> Vite config option, to prevent the following error while serving the files using <code>npm run dev</code>:</p> <pre><code>The request url \"/path/to/fractal-web/jschema/src/lib/index.js\" is outside of Vite serving allow list.\n</code></pre> <p>Important: When importing js files inside the <code>jschema</code> module it is necessary to use a relative path. The editor might autocomplete the imports using the <code>$lib</code> prefix, but that will not work when the module is included in the main application, since it redefines the <code>$lib</code> path again.</p>"},{"location":"development/jschema/#structure-of-the-code","title":"Structure of the code","text":"<p>The <code>JSchema</code> Svelte component intializes a class named <code>FormManager</code>, that handles the following features:</p> <ul> <li>creates and stores an object (<code>root</code>) used to draw the form;</li> <li>provides the functions to create new form elements;</li> <li>attaches a <code>notifyChange()</code> function to each created form element; this function is used by each component to notify changes to the manager (e.g. the value of an input changes, a new element is added to an array, and so on), then the function dispatches a <code>change</code> event up to the <code>JSchema</code> component;</li> <li>wraps the <code>SchemaValidator</code> and provides a <code>validate()</code> function;</li> <li>provides a <code>getFormData()</code> function, that returns an object based on the data present in the form.</li> </ul> <p>The creation of the <code>root</code> object requires 2 preliminary steps, that are useful to reduce the complexity of the subsequent object creation:</p> <ol> <li>provided JSON Schema is adapted, to create a simpler but equivalent JSON Schema (<code>jschema_adapter.js</code>);</li> <li>an object representing the initial form data is created, considering both the provided data (if any) and the default values (<code>jschema_initial_data.js</code>).</li> </ol> <p>The <code>adaptJsonSchema()</code> function does the following:</p> <ol> <li>removes the properties to ignore (e.g. <code>zarr_url</code>, <code>zarr_urls</code>, <code>init_args</code>, <code>zarr_dir</code>);</li> <li>resolves and replaces the schema references (<code>$ref</code> fields pointing to definitions);</li> <li>merges the <code>allOf</code> items.</li> </ol> <p>The <code>getJsonSchemaData()</code> function initializes an object representing the initial form data. If the <code>initialValue</code> parameter is not set the created object is populated using the default values. If an <code>initialValue</code> object is provided, the function adds to it all the optional fields set to null (this is needed to have an object that acts as a complete skeleton for the form).</p> <p>Using the adapted JSON Schema and the computed data object, the <code>FormManager</code> populates the <code>root</code> object, initializing a dedicated class for each form element (<code>NumberFormElement</code>, <code>ArrayFormElement</code>, <code>BooleanFormElement</code>, ...). These classes contain fields that are specific to each form element type and may contain additional functions to manipulate them (e.g. <code>addChild</code>, <code>removeChild</code>). Functions that add new children delegate the creation to the <code>FormManager</code>, since it is the class having the knowledge to create form elements of any type, and then add the new child to an internal array of children.</p> <p>Each form element is mapped to a dedicated Svelte component (e.g. the <code>NumberFormElement</code> class is passed to a <code>NumberProperty.svelte</code> component). Each property component can contain additional functions for validating the input values and display the validation errors, but delegates to the wrapped form element class any additional logic.</p> <p>This structure attempts to achieve a greater separation of concerns, needed to handle properly such a complex component.</p>"},{"location":"development/precommit/","title":"Precommit","text":""},{"location":"development/precommit/#pre-commit-setup","title":"pre-commit setup","text":"<p>In your local folder, create a file <code>.git/hooks/pre-commit</code> with the following content</p> <pre><code>#!/bin/bash\nnpm run pre-commit\nRESULT=$?\n[ $RESULT -ne 0 ] &amp;&amp; exit 1\nexit 0\n</code></pre> <p>and make this file executable (<code>chmod +x .git/hooks/pre-commit</code>).</p> <p>In this way, <code>npm run pre-commit</code> will run before every commit. This script is defined in <code>package.json</code>, and points to <code>lint-staged</code>. The configuration is written in <code>.lintstagedrc.json</code>, and it lists the checks to perform on each kind of file (e.g. <code>eslint</code> and then <code>prettier</code>).</p>"},{"location":"development/release/","title":"Release","text":""},{"location":"development/release/#release","title":"Release","text":"<p>Steps to release a new <code>fractal-web</code> version:</p> <ul> <li>Update <code>CHANGELOG.md</code> on <code>main</code> branch, replacing the \"Unreleased\" temporary title with the desidered version number</li> <li>Update the <code>version-compatibility.md</code> doc page</li> <li>Commit the changes</li> <li>Execute <code>npm version &lt;major|minor|patch&gt;</code></li> <li>Execute <code>git push origin main</code></li> <li>Execute <code>git push origin &lt;new-version-tag&gt;</code></li> <li>Update the GitHub release page with the information from <code>CHANGELOG.md</code></li> </ul> <p>NOTE: Pushing a new version tag (like v5.6.7) triggers a dedicated GitHub action, which also creates build artifacts (based on <code>npm pack</code>) and attaches them to the GitHub release.</p>"},{"location":"development/setup/","title":"Development setup","text":""},{"location":"development/setup/#install-node","title":"Install node","text":"<p>Versions 18 or 20 of Node.js are recommended. See the quickstart for more details about how to install node.</p>"},{"location":"development/setup/#install-fractal-web-from-git-repository","title":"Install fractal-web from git repository","text":"<p>Clone this repository <pre><code>git clone https://github.com/fractal-analytics-platform/fractal-web.git\ncd fractal-web\n</code></pre> then optionally checkout to a specific version tag <pre><code>git checkout v0.6.0\n</code></pre> and finally install via <pre><code>cd jschema\nnpm install\ncd ..\nnpm install\n</code></pre></p>"},{"location":"development/setup/#set-environment-variables","title":"Set environment variables","text":"<p>To properly run fractal-web you have to configure some environment variables. The environment variables page contains the complete list of supported environment variables and their default values. It also includes some troubleshooting infomation about errors related to environment variables misconfiguration.</p> <p>When running the application from the git repository, environment variables are set either in <code>.env</code> or <code>.env.development</code> files, see vite documentation (briefly: <code>.env.development</code> is the relevant file when using <code>npm run dev</code> and <code>.env</code> is the relevant file when using <code>npm run preview</code>).</p> <p>You can also add your customizations in a file named <code>.env.local</code> or <code>.env.development.local</code> to avoid writing on env files that are under version control.</p>"},{"location":"development/setup/#run-fractal-web-from-git-repo","title":"Run fractal-web from git repo","text":"<p>For development, run the client application via</p> <pre><code>npm run dev\n</code></pre> <p>The application will run at <code>http://localhost:5173</code>.</p> <p>To test a production build, first execute</p> <pre><code>npm run build\n</code></pre> <p>And then</p> <pre><code>npm run preview\n</code></pre> <p>Also in this case the application runs at <code>http://localhost:5173</code>.</p>"},{"location":"development/structure/","title":"Code-base structure","text":"<p>This project is based on svelte kit and follows its conventions and structure.</p>"},{"location":"development/structure/#1-level-folders","title":"1-level folders","text":"<p>By default, the main application folder is located at <code>/src</code>. The structure of this folder is explained in depth in svelte kit docs</p> <p><code>/static</code> is a folder related to static files that will be served by the client server. More on this could be found in the svelte kit docs.</p> <p>The <code>/lib</code> folder contains files and sources that enable correct instrumentation and testing of this client application. Currently, within this folder are present files to support the project's unit tests arrangements and other library files to populate local instances of the fractal server in order to test the client.</p> <p>As for testing, currently, there are two folders <code>/__tests__</code> and <code>/tests</code>. The former contains files of unit tests executed by <code>vitest</code> and the latest is related to <code>playwright</code> testing. This structure could be improved and organized differently by updating project configuration files, specifically <code>vite.config.js</code> and <code>playwrght.config.js</code> which are located at project root.</p> <p><code>/examples</code> folder contains configuration guidance to set up local environments to test different fractal server / fractal web interoperability architectures.</p> <p><code>/docs</code> folder is the root of the project docs files.</p> <pre><code>[project root]\n\u251c /src\n\u251c /static\n\u251c /lib\n\u251c /__tests__\n\u251c /tests\n\u251c /examples\n\u251c /docs\n</code></pre>"},{"location":"development/structure/#application-structure","title":"Application structure","text":"<p>With reference to <code>/src/routes</code> folder, therein are defined svelte kit page components that structure the fractal web client.</p> <p>It is important to mention that, this client application is server-side rendered. By default, this is the default behaviour of svelte kit.</p> <p>Before proceeding, it is important to understand the distinction of files terminating with the suffix <code>+[.]server.js</code>. Those files are explicitly processed by the client's server.</p> <p>This client application is in essence a proxy that enables users to interact with a server application, the fractal server. Through the browser interface, the svelte application enable users to build HTTP requests that will be sent to the fractal server.</p> <p>The svelte client and fractal server interact through a REST interface.</p> <p>But how is this interaction implemented in this client?</p>"},{"location":"development/structure/#client-server-interoperability","title":"Client server interoperability","text":"<p>As said, the svelte client communicates with the fractal server through a set of REST APIs.</p> <p>In this client, every request to the fractal server is sent by the nodejs server that is serving the svelte application.</p> <p>It is important to understand that these requests are made in the server context of the svelte client. No request to the fractal server is sent directly by the browser of the user.</p> <p>The fact that every request on behalf of a user is sent through a common backend nodejs server, implies a proxy architecture. The way this works is the following: the svelte client in the browser sends a HTTP request to the nodejs server that is serving the application. This request, with the attached cookies, is then used to compose a new request to be sent to the fractal server.</p> <p>Note that the authentication context is kept thanks to cookies that establish user sessions.</p> <p>The following image provides an overview for the reader of the described architecture.</p> <p></p> <p>To avoid duplicating the logic of each fractal-server endpoint and simplify the error handling, a special Svelte route has been setup to act like a transparent proxy: <code>src/routes/api/[...path]/+server.js</code>. This is one of the suggested way to handle a different backend according to Svelte Kit FAQ.</p> <p>So, by default, the AJAX calls performed by the front-end have the same path and payload of the fractal-server API, but are sent to the Node.js Svelte back-end. Some Python API endpoints (like the <code>/auth</code> and <code>/admin</code> endpoints) that don't start with <code>/api</code> are handled in a slightly different way. Indeed, the <code>/api</code> prefix is needed by <code>hooks.server.js</code> to detect if the received call is an AJAX call, in order to process the token expiration in a custom way. To preserve this behavior for all the API calls these paths are rewritten adding the <code>/api</code> prefix.</p> <p>Summarizing, the frontend code:</p> <ul> <li>uses exactly the same path of the fractal-server API for the <code>/api</code> endpoints </li> <li>uses <code>/api/auth</code> for <code>/auth</code> endpoints</li> <li>uses <code>/api/admin</code> for <code>/admin</code> endpoints</li> </ul> <p>Other than the AJAX calls, there are also some calls to fractal-server API done by Svelte SSR, while generating the HTML page. These requests are defined in files under <code>src/lib/server/api/v1</code>. Here requests are grouped by contexts as <code>auth_api</code>, <code>admin_api</code>, [...].</p>"},{"location":"development/structure/#an-example-using-actions","title":"An example using actions","text":"<p>The login is still using the Svelte action approach, in which we have to extract the data from a formData object and then use it to build a JSON payload to be forwarded to fractal-server.</p> <p>Consider the code at <code>src/lib/server/api/auth_api.js:5</code>:</p> <pre><code>/**\n * Request to authenticate user\n * @param fetch\n * @param data\n * @returns {Promise&lt;*&gt;}\n */\nexport async function userAuthentication(fetch, data) {\nconst response = await fetch(FRACTAL_SERVER_HOST + '/auth/token/login', {\nmethod: 'POST',\ncredentials: 'include',\nmode: 'cors',\nbody: data\n});\n\nif (!response.ok) {\nthrow new Error('Authentication failed');\n}\n\nreturn await response.json();\n}\n</code></pre> <p>This code is responsible to call the <code>/auth/token/login</code> REST api endpoint of the fractal server. The request is made by the svelte client application in a backend context within the nodejs server.</p> <p>The client will, if the request succeeds, handle the fractal server response in a form action.</p> <pre><code>// src/routes/auth/login/+page.server.js\n\nexport const actions = {\n// Default page action / Handles POST requests\ndefault: async ({ request, cookies, fetch }) =&gt; {\n// TODO: Handle login request\nconsole.log('Login action');\n\n// Get form data\nconst formData = await request.formData();\n// Set auth data\nlet authData;\ntry {\nauthData = await userAuthentication(fetch, formData);\n} catch (error) {\nconsole.error(error);\nreturn fail(400, { invalidMessage: 'Invalid credentials', invalid: true });\n}\nconst authToken = authData.access_token;\n// Decode JWT token claims\nconst tokenClaims = jose.decodeJwt(authToken);\n\n// Set the authentication cookie\nconst cookieOptions = {\ndomain: `${AUTH_COOKIE_DOMAIN}`,\npath: `${AUTH_COOKIE_PATH}`,\nexpires: new Date(tokenClaims.exp * 1000),\nsameSite: `${AUTH_COOKIE_SAME_SITE}`,\nsecure: `${AUTH_COOKIE_SECURE}` === 'true',\nhttpOnly: `${AUTH_COOKIE_HTTP_ONLY}` === 'true'\n};\nconsole.log(cookieOptions);\ncookies.set(AUTH_COOKIE_NAME, authData.access_token, cookieOptions);\n\nredirect(302, '/');\n}\n};\n</code></pre> <p>The previous code is executed in the backend (as one could understand by the name of the file) and it basically provides a form action that allows a user to login.</p> <p>This kind of pattern, form actions, is widely used within the client application, as it enables the browser-side client application to request different actions the server-side should take.</p> <p>In this case, we briefly described the authentication flow of the svelte client application.</p> <p>Notice that the authentication and session of a user is managed through cookies. The client application requests a authentication token to the fractal server, which data is used to create another cookie that the nodejs server of the client application sends to the browser.</p> <p>The default action within the <code>+page.server.js</code> is requested through an HTTP request that the browser-side client app makes when a user sends an HTML from, for completion, the one defined in:</p> <pre><code>&lt;!-- src/routes/auth/login/+page.svelte --&gt;\n\n&lt;script&gt;\nexport let form;\nlet loginError = false;\n\nif (form?.invalid) {\nloginError = true;\n}\n&lt;/script&gt;\n\n&lt;div class='container'&gt;\n  &lt;div class='row'&gt;\n    &lt;h1&gt;Login&lt;/h1&gt;\n  &lt;/div&gt;\n  &lt;div class='row'&gt;\n    &lt;div class='col-md-4'&gt;\n      &lt;form method='POST'&gt;\n        &lt;div class='mb-3'&gt;\n          &lt;label for='userEmail' class='form-label'&gt;Email address&lt;/label&gt;\n          &lt;input\n            name='username'\n            type='email'\n            class=\"form-control {loginError ? 'is-invalid' : ''}\"\n            id='userEmail'\n            aria-describedby='emailHelp'\n            required\n          /&gt;\n          &lt;div id='emailHelp' class='form-text'&gt;The email you provided to the IT manager&lt;/div&gt;\n          &lt;div class='invalid-feedback'&gt;\n            {form?.invalidMessage}\n          &lt;/div&gt;\n        &lt;/div&gt;\n        &lt;div class='mb-3'&gt;\n          &lt;label for='userPassword' class='form-label'&gt;Password&lt;/label&gt;\n          &lt;input name='password' type='password' class='form-control' id='userPassword' required /&gt;\n        &lt;/div&gt;\n        &lt;button class='btn btn-primary'&gt;Submit&lt;/button&gt;\n      &lt;/form&gt;\n    &lt;/div&gt;\n  &lt;/div&gt;\n&lt;/div&gt;\n</code></pre>"},{"location":"development/structure/#application-library","title":"Application library","text":"<p>While the <code>src/routes</code> is the public-facing side of the client application, <code>src/lib</code> contains the client internals.</p> <p>Within the lib are present four main sections: <code>common</code>, <code>components</code>, <code>server</code> and <code>stores</code>.</p> <p>Common contains client modules that export shared functionalities for both browser and server side parts of the app.</p> <p>Components contains all the svelte components definitions that are used within the client app. Components are organized by resources defined and managed by the fractal server.</p> <p>Server this is a special section as it is never shared and bundled into the package that a user receives in the browser. More info about this could be found in the svelte kit doc about server-only modules</p> <p>Stores are modules that export svelte store objects that are used by components to manage the state of the application.</p> <p>Note that stores are currently not well-organized or used due to the youth of the client.</p>"},{"location":"development/tests/","title":"Testing","text":""},{"location":"development/tests/#unit-tests","title":"Unit tests","text":"<p>Unit tests are performed via vitest, via the <code>test</code> script defined in <code>package.json</code>.</p>"},{"location":"development/tests/#end-to-end-testing","title":"End-to-end testing","text":"<p>E2E tests are done using playwright. They can be executed using the following command:</p> <pre><code>npx playwright test\n</code></pre> <p>To print Svelte webserver log set the environment variable <code>DEBUG=pw:webserver</code>.</p> <p>To execute the tests seeing the browser add the <code>--headed</code> flag or the <code>--debug</code> flag if you need to watch them step by step.</p> <p>By default v2 tests are run. These tests require running a fractal-server instance using <code>FRACTAL_RUNNER_BACKEND=local_experimental</code>.</p> <p>To run v1 tests start playwright setting the environment variable <code>TEST_VERSION</code> to <code>v1</code>. These tests require running a fractal-server instance using <code>FRACTAL_RUNNER_BACKEND=local</code>.</p> <p>OAuth2 test requires a running instance of dexidp test image and a fractal-server instance configured to use it.</p> <p>To skip OAuth2 test set the environment variable <code>SKIP_OAUTH_TEST</code> to <code>true</code>.</p> <p>To run the OAuth2 test locally add the following configuration to <code>.fractal_server.env</code>:</p> <pre><code>OAUTH_DEXIDP_CLIENT_ID=client_test_web_id\nOAUTH_DEXIDP_CLIENT_SECRET=client_test_web_secret\nOAUTH_DEXIDP_REDIRECT_URL=http://localhost:5173/auth/login/oauth2/\nOAUTH_DEXIDP_OIDC_CONFIGURATION_ENDPOINT=http://127.0.0.1:5556/dex/.well-known/openid-configuration\n</code></pre> <p>And then start the test IdP container:</p> <pre><code>docker run -d --rm -p 5556:5556 ghcr.io/fractal-analytics-platform/oauth:0.1\n</code></pre>"},{"location":"development/tests/#coverage","title":"Coverage","text":"<p>Warning: code coverage results are not reliable at the moment</p> <p>Coverage for the unit tests:</p> <pre><code>npx vitest --coverage\n</code></pre> <p>Warning: coverage takes some time, since we are using the option <code>{ all: true }</code>.</p>"},{"location":"development/tests/#local-fractal-server-instance","title":"Local <code>fractal-server</code> instance","text":"<p>The <code>lib/fractal-server</code> folder includes basic instructions to get a local instance of <code>fractal-server</code> running.</p>"},{"location":"development/tests/#remote-fractal-server-instance","title":"Remote <code>fractal-server</code> instance","text":"<p>One could also test a local <code>fractal-web</code> instance with a remote <code>fractal-server</code> one. If SSH access is possible, then a command like <pre><code>REMOTE_PORT=8010\nLOCAL_PORT=8000\nREMOTE_USER=...\nREMOTE_HOST_IP=...\n\nssh $REMOTE_USER@$REMOTE_HOST_IP -L $LOCAL_PORT:127.0.0.1:$REMOTE_PORT -N\n</code></pre> should work and forward the remote port <code>REMOTE_PORT</code> to the <code>LOCAL_PORT</code> on localhost, so that <code>fractal-web</code> can use it from the local machine. Note that the required details for the <code>ssh -L</code> command may be different in each specific case, depending for instance on the <code>fractal-server</code> configuration (e.g the <code>--bind</code> argument of <code>gunicorn</code>), or on whether an additional proxy is needed to reach the remote host.</p>"}]}
\ No newline at end of file
diff --git a/sitemap.xml.gz b/sitemap.xml.gz
index fa320d4a..d7a9d4bb 100644
Binary files a/sitemap.xml.gz and b/sitemap.xml.gz differ