https://dune-copasi.netlify.app/assets/js/94acfcc7.fb078d74.js

1"use strict";(self.webpackChunkdune_copasi_docusaurus=self.webpackChunkdune_copasi_docusaurus||[]).push([[9743],{341:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>c,contentTitle:()=>a,default:()=>d,frontMatter:()=>o,metadata:()=>l,toc:()=>h});var i=s(4848),r=s(8453),n=s(9515);const o={id:"try",title:"Try it online!",sidebar_label:"Try it online!"},a="Browser Interface",l={id:"try",title:"Try it online!",description:"You can use DuneCopasi without installation directly here, in your browser, as you would use the executable on your machine.",source:"@site/versioned_docs/version-v2.0.1/try.md",sourceDirName:".",slug:"/try",permalink:"/docs/v2.0.1/try",draft:!1,unlisted:!1,editUrl:"https://gitlab.dune-project.org/copasi/dune-copasi/-/edit/master/doc/docusaurus/versioned_docs/version-v2.0.1/try.md",tags:[],version:"v2.0.1",lastUpdatedBy:"Santiago Ospina De Los R\xedos",lastUpdatedAt:1732665958e3,frontMatter:{id:"try",title:"Try it online!",sidebar_label:"Try it online!"},sidebar:"docs",previous:{title:"API",permalink:"/docs/v2.0.1/api"}},c={},h=[];function u(e){const t={a:"a",code:"code",h1:"h1",header:"header",li:"li",p:"p",ul:"ul",...(0,r.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"browser-interface",children:"Browser Interface"})}),"\n",(0,i.jsx)(t.p,{children:"You can use DuneCopasi without installation directly here, in your browser, as you would use the executable on your machine.\nLocal installation is still recommended for intensive applications as performance might me impacted."}),"\n",(0,i.jsxs)(t.p,{children:['There are two "windows": the editor and the terminal.\nThe terminal is a limited UNIX-like environment, with a full virtual file system.\nThe editor is a VSCode like editor.\nIt is simply a buffer you can copy to and from (with ',(0,i.jsx)(t.code,{children:"edit"})," and ",(0,i.jsx)(t.code,{children:"save"}),")."]}),"\n",(0,i.jsx)(t.p,{children:"A typical workflow looks as follows:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.code,{children:"upload"})," a file from your machine to the virtual file system"]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.code,{children:"edit FILE"})," in the editor, this simply copies the file content into the editor, you have to manually save to a path after editing"]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.code,{children:"save FILE"})," to the virtual file system"]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.code,{children:"dune-copasi --config=PATH --model.writer.vtk.path=OUTPUT"})," run dune-copasi with a config file and overriding the output"]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.code,{children:"download PATH"})," from the virtual file system to your machine"]}),"\n"]}),"\n",(0,i.jsxs)(t.p,{children:["You can visualize your results by opening them in ",(0,i.jsx)(t.a,{href:"https://kitware.github.io/glance/app/",children:"Glance"})," by Kitware and clicking the folder icon on the website."]}),"\n",(0,i.jsx)(n.A,{version:"v2.0"})]})}function d(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(u,{...e})}):u(e)}},9515:(e,t,s)=>{s.d(t,{A:()=>c});var i=s(6540),r=s(8553),n=s(8478),o=s(4848);class a extends i.Component{constructor(e){super(e),this.xtermRef=i.createRef(),this.home="/dunecopasi",this.state={input:"",cwd:this.home,cursorPos:0,running:!1,history:[],historyCursor:0},this.wasmWorker={},this.wasmCommands={print:e=>{this.state.running||console.error("Not running but received a print!"),this.writeln(e.msg.replace(/\n/g,"\r\n"))},exit:e=>{this.setState({running:!1},(()=>this.prompt()))},cwd:e=>{this.setState({cwd:e.cwd})},edit:e=>{this.props.setEditorText(e.text)},getEditorText:e=>{this.wasmWorker.postMessage({cmd:"response",id:e.id,resolve:this.props.getEditorText()})},download:e=>{var t,s,i,r;t=e.filename,s=e.blob,i=new Blob([s],{type:"application/octet-stream"}),(r=document.createElement("a")).href=URL.createObjectURL(i),r.download=t,document.body.appendChild(r),r.click(),document.body.removeChild(r)},upload:async e=>{const t=await(async()=>{var e,t=document.createElement("input");return t.type="file",t.style.display="none",document.body.appendChild(t),t.click(),t.addEventListener("change",(function(){e(t.files)})),new Promise(((t,s)=>e=t))})();this.wasmWorker.postMessage({cmd:"response",id:e.id,resolve:t})},open:async e=>{const t={svg:"image/svg+xml",png:"image/png",jpeg:"image/jpeg",jpg:"image/jpeg",txt:"text/plain",ini:"text/plain"},s=e.name.split(".").pop();if(!s in t)this.writeln(`Error: extension '${s}' not found in ${t}`);else{const i=new File([e.buf],e.name,{type:t[s]}),r=window.URL.createObjectURL(i);window.open(r),window.URL.revokeObjectURL(r)}}}}write(e){this.xtermRef.current.terminal.write(e)}writeln(e){this.xtermRef.current.terminal.writeln(e)}newline(){this.write("\r\n")}prompt(){const e=this.state.cwd===this.home?"~":"/"===(t=this.state.cwd)?"/":t.split("/").reverse()[0];var t;this.write(`${e} $ `)}componentDidMount(){window.addEventListener("beforeunload",(e=>{e.preventDefault(),e.returnValue=!0})),"undefined"!=typeof Worker&&(this.wasmWorker=new Worker(new URL(s.p+s.u(2560),s.b))),this.write("Welcome to DuneCopasi shell v"),this.setState({running:!0},(()=>{this.wasmWorker.postMessage({cmd:"instantiate",args:{version:this.props.version,files:this.props.examples}})})),this.wasmWorker.onmessage=e=>{const t=e.data,s=t.cmd;if(s in this.wasmCommands)try{this.wasmCommands[s](t)}catch(i){this.writeln(`Error in processing wasm command: ${i}`)}else this.writeln(`WasmXterm: Error: received unknown command ${s} from WasmWorker`)}}render(){const e=s(816).V;return(0,o.jsx)(e,{ref:this.xtermRef,onKey:e=>{const t=!(e.altKey||e.altGraphKey||e.ctrlKey||e.metaKey),s=e.domEvent.key;if("Enter"===s){this.newline();const e=this.state.input.split(" ").filter((e=>""!==e));this.setState(((t,s)=>

1({input:"",cursorPos:0,running:e.length>0,history:[...t.history,t.input],historyCursor:t.history.length+1})),(()=>{if(e.length>0){const[t,...s]=e;this.wasmWorker.postMessage({cmd:t,args:s})}else this.prompt()}))}else"Backspace"===s?this.state.input.length>0&&this.state.cursorPos>0&&this.setState(((e,t)=>(this.write("\b"),this.write(e.input.slice(e.cursorPos)),this.write(" "),this.write("\b".repeat(e.input.length-e.cursorPos+1)),{input:e.input.slice(0,e.cursorPos-1)+e.input.slice(e.cursorPos),cursorPos:e.cursorPos-1,historyCursor:e.history.length}))):"ArrowLeft"===s?this.state.cursorPos>0&&(this.write("\b"),this.setState(((e,t)=>({cursorPos:e.cursorPos-1})))):"ArrowRight"===s?this.state.cursorPos<this.state.input.length&&(this.write(this.state.input[this.state.cursorPos]),this.setState(((e,t)=>({cursorPos:e.cursorPos+1})))):"ArrowUp"===s?this.setState(((e,t)=>{const s=e.historyCursor>0?e.historyCursor-1:0,i=s<e.history.length?e.history[s]:e.input;return this.write("\b \b".repeat(e.input.length)),this.write(i),{historyCursor:s,input:i,cursorPos:i.length}})):"ArrowDown"===s?this.setState(((e,t)=>{const s=e.historyCursor<e.history.length?e.historyCursor+1:e.history.length,i=s<e.history.length?e.history[s]:e.input;return this.write("\b \b".repeat(e.input.length)),this.write(i),{historyCursor:s,input:i,cursorPos:i.length}})):e.domEvent.ctrlKey&&"u"===s?(this.write("\b \b".repeat(this.state.input.length)),this.setState(((e,t)=>({input:"",cursorPos:0,historyCursor:e.history.length})))):"Tab"===s||t&&this.setState(((t,s)=>(this.write(e.key+t.input.slice(t.cursorPos)),this.write("\b".repeat(t.input.length-t.cursorPos)),{input:t.input.slice(0,t.cursorPos)+e.key+t.input.slice(t.cursorPos),cursorPos:t.cursorPos+1})))}})}}function l(e){return(0,o.jsx)(n.A,{fallback:(0,o.jsx)("div",{children:"Loading terminal..."}),children:()=>(0,o.jsx)(a,{...e})})}function c(e){let{version:t,examples:s}=e;const n=(0,i.useRef)(null);return(0,o.jsxs)("div",{style:{display:"flex",flexDirection:"column",gap:"1em"},children:[(0,o.jsx)(r.Ay,{onMount:(e,t)=>{n.current=e},height:"30vh",language:"ini"}),(0,o.jsx)(l,{version:t,examples:s,setEditorText:e=>n.current.setValue(e),getEditorText:()=>n.current.getValue()})]})}}}]);