Added Sample Diagrams for people to switch between by clicking buttons

nowthis · nowthis · commit 607365e67d80 · 2021-12-01T22:07:42.000-05:00
- The page first checks if the user has changes they might want to keep
diff --git a/build/build.css b/build/build.css
@@ -166,7 +166,7 @@ p#chart {
   width: 600px;
   height: 500px;
   border: 1px dotted #666;
-  margin: 10px auto;
+  margin: 0.4em auto;
   background-color: white;
 }
 
@@ -201,7 +201,7 @@ th#title {
   font-size: large;
 }
 
-div#input_options {
+.center_text {
   text-align: center;
 }
 
@@ -237,3 +237,53 @@ td#flows_entry {
   text-align: left;
   margin: auto;
 }
+
+#example_diagrams {
+  background-color: #F3F4FF;
+  border: 1px dotted #069;
+  width: 75%;
+  border-radius: 0.7em;
+  margin: 0.4em auto 1.1em;
+  padding: 0.5em;
+  box-shadow: 0.2em 0.2em 0.6em gray;
+}
+
+#example_diagrams h4 {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+#example_diagrams button {
+  margin-left: 0.5em;
+  margin-right: 0.5em;
+}
+
+#reset_graph_warning {
+  background-color: #FFA;
+  color: darkred;
+  margin: 0.2em 3em 0;
+  padding: 0.3em;
+  border-radius: 0.5em;
+}
+
+#reset_graph_yes {
+  color: darkred;
+}
+
+.callout_container {
+  text-align: center;
+  margin: 0.3em;
+}
+
+.callout {
+  background-color: #E3FF9F;
+  padding: 0.3em 1.5em;
+  font-size: 90%;
+  border-style: dotted;
+  border-color: #6AE58B;
+  border-width: 1px;
+}
+
+#layout_options_section {
+  margin-top: 4px;
+}
diff --git a/build/index.html b/build/index.html
@@ -10,6 +10,7 @@
 <script src="sankey.js"></script>
 <script src="canvg.js"></script>
 <script src="rgbcolor.js"></script>
+<script src="sample_diagrams.js"></script>
 <script src="sankeymatic.js"></script>
 </head>
 <body>
@@ -29,20 +30,33 @@
   </div>
 </nav>
 </header>
-<div style="text-align: center;  margin-top: 1px; margin-bottom: 16px;">
-<span style="background-color: #E3FF9F; padding: 2px 20px; font-size: 90%; border-width: 0px 1px 1px; border-style: dotted; border-color: #6AE58B;">
-If you find SankeyMATIC useful, please consider <a href="../about/" target="_blank">donating to support further development</a>. Thanks!</span>
-</div>
 
-<main>
+<div class="callout_container"><span class="callout">
+If you find SankeyMATIC useful, please consider <a href="../about/" target="_blank">donating to support further development</a>. Thanks!
+</span></div>
 
+<main>
 <div class="center_basic">
 
 <form onsubmit="process_sankey(); return false;">
+<div id="example_diagrams" class="center_text">
+<h4>Sample Diagrams:
+<button type="button" id="load_example_job_search" onclick="reset_graph('job_search'); return false;">Job Search</button>
+<button type="button" id="load_example_election" onclick="reset_graph('election'); return false;">Ranked Election</button>
+<!-- <button type="button" id="load_example_energy_all" onclick="reset_graph('energy_flows_all'); return false;">Energy Flows</button> &nbsp; -->
+<button type="button" id="load_example_basic_budget" onclick="reset_graph('default_budget'); return false;">Basic Budget (Default)</button>
+</h4>
+
+<p id="reset_graph_warning" style="display: none;">
+<em>This will <strong>erase</strong> your changes. Are you sure?</em>
+<input type="hidden" id="demo_graph_chosen" value="" />
+<button type="button" id="reset_graph_yes" onclick="reset_graph_confirmed(); return false;">Yes, reset the diagram</button>
+<button type="button" id="reset_graph_no" onclick="cancel_reset_graph(); return false;">Cancel</button>
+</p>
+</div>
 
 <table><tr><td>
 
-
 <table class="center_basic">
 <tr>
     <td id="other_entry">
@@ -51,28 +65,29 @@ <h2 class="ui_head" onclick="toggle_panel('input_options');">
 <span id="input_options_indicator" class="indicator">&ndash;</span>
 Inputs<span id="input_options_hint">:</span></h2>
 
-<div id="input_options">
-    <textarea id="flows_in" rows="22" cols="40" onchange="process_sankey();">' Type a list of Flows between Nodes, like:
+<div id="input_options" class="center_text">
+    <textarea id="flows_in" rows="22" cols="40" onchange="process_sankey();">' Enter Flows between Nodes, like this:
 '     Source [AMOUNT] Target
-' Examples:
-Wages [2000] Budget
-Interest [25] Budget
 
-Budget [500] Taxes
-Budget [450] Housing
-Budget [310] Food
-Budget [205] Transportation
-Budget [400] Health Care
+Wages [1500] Budget
+Other [250] Budget
+
+Budget [450] Taxes
+Budget [420] Housing
+Budget [400] Food
+Budget [295] Transportation
+Budget [25] Savings
 
 ' You can set a specific color for a Node:
-:Taxes #CC66FF
-'                                    ...and for a Flow:
-Budget [160] Other Necessities #00CC00
-' Visit the 'Manual' link for more!
+:Taxes #90C
+'                          ...and for a single Flow:
+Budget [160] Other Necessities #0F0
 
 ' After entering your data, use the
 ' controls below to customize your
-' diagram's appearance.</textarea>
+' diagram's appearance.
+
+' Visit the 'Manual' link for more!</textarea>
 
 <p class="center_basic"><button id="preview_graph" type="submit">Preview</button></p>
 </div>
@@ -86,7 +101,7 @@ <h2 class="ui_head" onclick="toggle_panel('diagram_options');">
 <div id="diagram_options" class="form_chunk">
 <p class="form_elements1">
 <label for="canvas_width"><strong>Diagram Width:</strong></label>
-<span class="no_wrap"><input type="text" class="wholenumber" id="canvas_width" size="5" maxlength="6" value="600" onchange="process_sankey();"> px</span>
+<span class="no_wrap"><input type="text" class="wholenumber" id="canvas_width" size="5" maxlength="6" value="700" onchange="process_sankey();"> px</span>
 <label for="canvas_height" class="spaced_label"><strong>Height:</strong></label>
 <span class="no_wrap"><input type="text" class="wholenumber" id="canvas_height" size="5" maxlength="6" value="600" onchange="process_sankey();"> px</span>
 </p>
@@ -304,7 +319,7 @@ <h3 class="ui_head" onclick="toggle_panel('svg_options');"><span id="svg_options
 </td><td id="grapharea">
 
 <div class="expandable_box">
-<h2 class="ui_head" onclick="toggle_panel('layout_options');">
+<h2 id="layout_options_section" class="ui_head" onclick="toggle_panel('layout_options');">
 <span id="layout_options_indicator" class="indicator">+</span>
 Layout Options<span id="layout_options_hint">...</span></h2>
 <div id="layout_options" class="form_chunk" style="display: none;">
@@ -355,9 +370,8 @@ <h2 class="ui_head" onclick="toggle_panel('layout_options');">
 </main>
 
 
-<div style="text-align: center; margin-top: 12px; margin-bottom: 1px;">
-<span style="background-color: #E3FF9F; padding: 2px 20px; font-size: 90%; border-width: 1px 1px 0px; border-style: dotted; border-color: #6AE58B;">
-<!-- <div style="text-align: center; background-color: #ECFF60; font-size: 90%; padding: 4px; "> -->
+<div class="callout_container">
+<span class="callout">
 If you find SankeyMATIC useful, please consider <a href="../about/" target="_blank">donating to support further development</a>. Thanks!</span>
 </div>
 
diff --git a/build/sample_diagrams.js b/build/sample_diagrams.js
diff --git a/build/sankeymatic.js b/build/sankeymatic.js
@@ -198,8 +198,9 @@ function produce_svg_code() {
   return;
 }
 
-// render_exportable_outputs: After the diagram is updated (or when the user
-// changes their preferred resolution), kick off a re-render of the image & SVG.
+// render_exportable_outputs: Kick off a re-render of the static image and the
+// user-copyable SVG code.
+// Called after the initial draw & when the user chooses a new PNG resolution
 glob.render_exportable_outputs = function () {
     // Reset the existing export output areas:
     var png_link_el   = document.getElementById("download_png_link"),
@@ -219,6 +220,81 @@ glob.render_exportable_outputs = function () {
     return null;
 };
 
+function hide_reset_warning() {
+    // Hide the overwrite-warning paragraph (if it's showing)
+    const warning_el = document.getElementById("reset_graph_warning");
+    warning_el.style.display = "none";
+    return null;
+}
+
+glob.cancel_reset_graph = function () {
+    hide_reset_warning();
+    return null;
+}
+
+glob.reset_graph_confirmed = function () {
+    const graphname = document.getElementById("demo_graph_chosen").value;
+    const replacement_flow_data = (
+        sample_diagram_recipes.hasOwnProperty(graphname)
+            ? sample_diagram_recipes[graphname].flows.replace("\\n","\n")
+            : "Requested sample diagram not found"
+    );
+    const flows_el = document.getElementById("flows_in")
+
+    hide_reset_warning();
+
+    // Select all the text...
+    flows_el.focus();
+    flows_el.select();
+    // ... then replace it with the new content.
+    flows_el.setRangeText(replacement_flow_data,
+        0, flows_el.selectionEnd, 'start');
+
+    // Draw the new diagram immediately:
+    process_sankey();
+    // Put the cursor in the input field afresh:
+    flows_el.focus();
+    return null;
+}
+
+glob.reset_graph = function (graphname) {
+    // Is there a recipe with the given key? If so, let's proceed.
+    if (sample_diagram_recipes.hasOwnProperty(graphname)) {
+        // Set the 'demo_graph_chosen' value according to the user's click:
+        const chosen_el = document.getElementById("demo_graph_chosen");
+        chosen_el.value = graphname;
+
+        // Test the user's current input against the saved samples:
+        const user_input = document.getElementById("flows_in").value;
+        let flows_match_a_sample = false;
+        Object.keys(sample_diagram_recipes).forEach(
+            graph => {
+                if (user_input == sample_diagram_recipes[graph].flows) {
+                    flows_match_a_sample = true;
+                }
+            }
+        );
+        if (flows_match_a_sample) {
+            // If the user has NOT changed the input from one of the samples,
+            // just go ahead with the change:
+            reset_graph_confirmed();
+        } else {
+            // Otherwise, show the warning and do NOT reset the graph:
+            const warning_el = document.getElementById("reset_graph_warning");
+            warning_el.style.display = "";
+            const yes_button_el = document.getElementById("reset_graph_yes");
+            yes_button_el.innerHTML = `Yes, replace the graph with '${sample_diagram_recipes[graphname].name}'`;
+        }
+    } else {
+        console.log('graph name not found');
+        // the graph name wasn't valid.
+        // (this shouldn't happen unless the user is messing around in the DOM)
+        // give the user some feedback?
+    }
+
+    return null;
+};
+
 // render_sankey: given nodes, flows, and other config, UPDATE THE DIAGRAM:
 function render_sankey(nodes_in, flows_in, config_in) {
     var graph_width, graph_height, colorset,
