feat(docs): playground graph WriteConfig options functional, stylin…

…g tbd (#1075)

1/2 #1072

docs/src/pages/playground.js

@@ -185,15 +185,29 @@ export function DatalogDemo() {
 }
 
 export function EditorDemo({ compileFn, examples, mermaidId }) {
+  if (siteConfig.customFields.LOAD_PLAYGROUND !== '1') {
+    return <div>Please set LOAD_PLAYGROUND environment variable to 1 to enable the playground.</div>;
+  }
+
   const [program, setProgram] = useState(Object.values(examples)[0]);
   const [showingMermaid, setShowingMermaid] = useState(true);
   const [editorAndMonaco, setEditorAndMonaco] = useState(null);
 
-  if (siteConfig.customFields.LOAD_PLAYGROUND !== '1') {
-    return <div>Please set LOAD_PLAYGROUND environment variable to 1 to enable the playground.</div>;
-  }
+  const [showGraphOpts, setShowGraphOpts] = useState(false);
+  const [writeGraphConfig, setWriteGraphConfig] = useState({
+    noSubgraphs: false,
+    noVarnames: false,
+    noPullPush: false,
+    noHandoffs: false,
+    opShortText: false,
+  });
+  const writeGraphConfigOnChange = (name) => {
+    writeGraphConfig[name] = !writeGraphConfig[name];
+    setWriteGraphConfig({ ...writeGraphConfig });
+    return true;
+  };
 
-  const { output, diagnostics } = (compileFn)(program);
+  const { output, diagnostics } = (compileFn)(program, ...Object.values(writeGraphConfig));
   const numberOfLines = program.split("\n").length;
 
   useEffect(() => {
@@ -270,6 +284,27 @@ export function EditorDemo({ compileFn, examples, mermaidId }) {
         }
       })()}
     </div>
+    <div>
+      <li>
+        {Object.keys(writeGraphConfig).map(name => {
+          return (
+            <li>
+              <label>
+                <input
+                  key={name}
+                  type="checkbox"
+                  name={name}
+                  value={name}
+                  checked={writeGraphConfig[name]}
+                  onChange={() => writeGraphConfigOnChange(name)}
+                />
+                <code>{name}</code>
+              </label>
+            </li>
+          )
+        })}
+      </li>
+    </div>
   </div>
 }
 

website_playground/src/lib.rs

@@ -9,7 +9,7 @@ use hydroflow::datalog;
 use hydroflow::scheduled::graph::Hydroflow;
 use hydroflow_datalog_core::gen_hydroflow_graph;
 use hydroflow_lang::diagnostic::{Diagnostic, Level};
-use hydroflow_lang::graph::{build_hfcode, partition_graph};
+use hydroflow_lang::graph::{build_hfcode, partition_graph, WriteConfig};
 use proc_macro2::{LineColumn, Span};
 use quote::quote;
 use serde::{Deserialize, Serialize};
@@ -105,13 +105,28 @@ pub struct HydroflowOutput {
 }
 
 #[wasm_bindgen]
-pub fn compile_hydroflow(program: String) -> JsValue {
+pub fn compile_hydroflow(
+    program: String,
+    no_subgraphs: bool,
+    no_varnames: bool,
+    no_pull_push: bool,
+    no_handoffs: bool,
+    op_short_text: bool,
+) -> JsValue {
+    let write_config = WriteConfig {
+        no_subgraphs,
+        no_varnames,
+        no_pull_push,
+        no_handoffs,
+        op_short_text,
+    };
+
     let out = match syn::parse_str(&program) {
         Ok(input) => {
             let (graph_code_opt, diagnostics) =
                 build_hfcode(input, &quote!(hydroflow), PathBuf::default());
             let output = graph_code_opt.map(|(graph, code)| {
-                let mermaid = graph.to_mermaid(&Default::default());
+                let mermaid = graph.to_mermaid(&write_config);
                 let file = syn::parse_quote! {
                     fn main() {
                         let mut df = #code;
@@ -143,7 +158,22 @@ pub fn compile_hydroflow(program: String) -> JsValue {
 }
 
 #[wasm_bindgen]
-pub fn compile_datalog(program: String) -> JsValue {
+pub fn compile_datalog(
+    program: String,
+    no_subgraphs: bool,
+    no_varnames: bool,
+    no_pull_push: bool,
+    no_handoffs: bool,
+    op_short_text: bool,
+) -> JsValue {
+    let write_config = WriteConfig {
+        no_subgraphs,
+        no_varnames,
+        no_pull_push,
+        no_handoffs,
+        op_short_text,
+    };
+
     let wrapped = format!("r#\"{}\"#", program);
     let out = match syn::parse_str(&wrapped) {
         Ok(input) => match gen_hydroflow_graph(input) {
@@ -165,7 +195,7 @@ pub fn compile_datalog(program: String) -> JsValue {
 
                         Some(HydroflowOutput {
                             compiled: prettyplease::unparse(&file),
-                            mermaid: part_graph.to_mermaid(&Default::default()),
+                            mermaid: part_graph.to_mermaid(&write_config),
                         })
                     }
                     Err(diagnostic) => {