updated builder

pachterlab · Feb 2, 2024 · 1a6bd9d · 1a6bd9d
1 parent f8525ac
commit 1a6bd9d
Show file tree

Hide file tree

Showing 7 changed files with 379 additions and 0 deletions.
diff --git a/docs/builder.html b/docs/builder.html
@@ -0,0 +1,319 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/js-yaml/dist/js-yaml.min.js"></script>
+    <title>Document</title>
+    <script>
+      function generateYAML() {
+        var formData = {
+          region_id: $("#region_id").val(),
+          region_type: $("#region_type").val(),
+          name: $("#name").val(),
+          sequence_type: $("#sequence_type").val(),
+          sequence: $("#sequence").val(),
+          min_len: parseInt($("#min_len").val()),
+          max_len: parseInt($("#max_len").val()),
+          onlist: $("#onlist_location").val()
+            ? {
+                location: $("#onlist_location").val(),
+                filename: $("#onlist_filename").val(),
+                md5: $("#onlist_md5").val(),
+              }
+            : null,
+          regions: null,
+        };
+
+        var yamlStr = jsyaml.dump(formData, { lineWidth: -1 });
+        // this strips the - !Region from the yaml output
+        $("#yamlOutput").text(
+          `- !Region\n${yamlStr
+            .split("\n")
+            .map((line) => "  " + line)
+            .join("\n")}`
+        );
+      }
+
+      $(document).ready(function () {
+        var container = $(".load-examples-container");
+        files = [
+          "illumina_p5.rgn.yaml",
+          "illumina_p7.rgn.yaml",
+          "truseq_r1.rgn.yaml",
+          "truseq_r2.rgn.yaml",
+          "nextera_r1.rgn.yaml",
+          "nextera_r2.rgn.yaml",
+        ];
+        files.forEach(function (file) {
+          var filePath = "../examples/regions/" + file;
+          var button = $("<button>")
+            .addClass("loadFileBtn")
+            .attr("data-file-path", filePath)
+            .text(file.split(".")[0]); // Removes the file extension for the button text
+          container.append(button);
+        });
+
+        $(".loadFileBtn").click(function () {
+          console.log($(this).data("file-path"));
+          var filePath = $(this).data("file-path"); // Retrieve the file path from the button
+
+          $.ajax({
+            url: filePath, // Use the file path to load the file
+            dataType: "text", // Expecting a YAML/text response
+            success: function (data) {
+              // Assuming 'data' contains the YAML file content
+              data = data.replace(/- !Region/g, ""); // Remove the YAML tag
+              var fileContent = jsyaml.load(data); // Convert YAML string to JavaScript object
+
+              // Populate the form
+              $("#region_id").val(fileContent.region_id);
+              $("#region_type").val(fileContent.region_type);
+              $("#name").val(fileContent.name);
+              $("#sequence_type").val(fileContent.sequence_type);
+              $("#sequence").val(fileContent.sequence);
+              $("#min_len").val(fileContent.min_len);
+              $("#max_len").val(fileContent.max_len);
+              // handle onlist
+              if (fileContent.onlist) {
+                $("#onlist_location").val(fileContent.onlist.location);
+                $("#onlist_filename").val(fileContent.onlist.filename);
+                $("#onlist_md5").val(fileContent.onlist.md5);
+              }
+
+              // Automatically generate and display the YAML
+              generateYAML(); // This calls the previously defined generateYAML function
+            },
+            error: function (xhr, status, error) {
+              console.error("Error loading file:", status, error);
+            },
+          });
+        });
+        // create a function that adds an element to level_0 when the add_region button is clicked
+        $("#level_0").on("click", ".deleteBtn", function () {
+          const target = $(this).data("target");
+          console.log(target);
+          $(`#${target}`).remove();
+        });
+        $("#add_region_button").click(function () {
+          const region_id = $("#add_region_id").val();
+          $("#level_0").append(
+            `<div id="region_${region_id}" class="region-container">
+            <div class="region-id" id="${region_id}" style="width: 15em">
+              ${region_id}
+            </div>
+            <button class="deleteBtn" data-target="region_${region_id}">Delete</button>
+          </div>`
+          );
+        });
+      });
+    </script>
+    <style>
+      .region-container {
+        border: 1px solid #ccc;
+        padding: 10px;
+        margin-bottom: 10px;
+      }
+
+      .region-id {
+        padding: 5px;
+        margin-bottom: 5px;
+      }
+
+      .metadata p {
+        font-size: 0.8em;
+        margin: 5px 0;
+      }
+
+      .container {
+        display: flex;
+        justify-content: space-between;
+      }
+
+      .form-container,
+      .output-container {
+        flex: 1; /* This makes each container take up equal space */
+        margin: 10px; /* Adds a little space between the form and output */
+      }
+
+      /* Optional styles for better appearance */
+      form {
+        display: flex;
+        flex-direction: column;
+        gap: 0px; /* Adds space between form elements */
+      }
+
+      pre {
+        background-color: #f0f0f0; /* Light grey background */
+        border: 1px solid #ccc; /* Light grey border */
+        padding: 10px; /* Adds padding inside the pre element */
+        overflow-x: auto; /* Ensures content is scrollable horizontally if it overflows */
+      }
+    </style>
+  </head>
+  <body>
+    <div>
+      <h1 style="text-align: center">Specification builder</h1>
+      <!--a row of blocks that can be deleted or added-->
+      <!-- <div id="add_region">
+        <input id="add_region_id" placeholder="region_id" />
+        <button id="add_region_button">Add Region</button>
+      </div>
+      <div id="level_0"></div>
+      <hr />
+      <h1>Test html below</h1>
+      <div id="region_cell_barcode" class="region-container">
+        <div class="region-id" id="cell_barcode" style="width: 15em">
+          cell_barcode
+        </div>
+        <button class="deleteBtn" data-target="region_cell_barcode">
+          Delete
+        </button>
+      </div>
+      <div id="region_umi" class="region-container">
+        <div class="region-id" id="umi" style="width: 15em">
+          unique_molecular_identifier
+        </div>
+        <button class="deleteBtn" data-target="region_umi">Delete</button>
+      </div> -->
+      <div class="load-examples-container">
+        <h2>Load examples</h2>
+        <!-- <button
+          class="loadFileBtn"
+          data-file-path="../examples/regions/illumina_p5.rgn.yaml"
+        >
+          illumina_p5
+        </button>
+
+        <button
+          class="loadFileBtn"
+          data-file-path="../examples/regions/illumina_p7.rgn.yaml"
+        >
+          illumina_p7
+        </button> -->
+      </div>
+
+      <h2>Create</h2>
+      <div class="container">
+        <div class="form-container">
+          <form id="yamlForm">
+            <label for="region_id">Region id:</label><br />
+            <input type="text" id="region_id" name="region_id" /><br />
+
+            <label for="region_type">Region type:</label><br />
+            <select id="region_type" name="region_type">
+              <option value="atac">atac</option>
+              <option value="barcode">barcode</option>
+              <option value="cdna">cdna</option>
+              <option value="crispr">crispr</option>
+              <option value="custom_primer">custom_primer</option>
+              <option value="dna">dna</option>
+              <option value="fastq">fastq</option>
+              <option value="fastq_link">fastq_link</option>
+              <option value="gdna">gdna</option>
+              <option value="hic">hic</option>
+              <option value="illumina_p5">illumina_p5</option>
+              <option value="illumina_p7">illumina_p7</option>
+              <option value="index5">index5</option>
+              <option value="index7">index7</option>
+              <option value="linker">linker</option>
+              <option value="ME1">ME1</option>
+              <option value="ME2">ME2</option>
+              <option value="methyl">methyl</option>
+              <option value="named">named</option>
+              <option value="nextera_read1">nextera_read1</option>
+              <option value="nextera_read2">nextera_read2</option>
+              <option value="poly_A">poly_A</option>
+              <option value="poly_G">poly_G</option>
+              <option value="poly_T">poly_T</option>
+              <option value="poly_C">poly_C</option>
+              <option value="protein">protein</option>
+              <option value="rna">rna</option>
+              <option value="s5">s5</option>
+              <option value="s7">s7</option>
+              <option value="tag">tag</option>
+              <option value="truseq_read1">truseq_read1</option>
+              <option value="truseq_read2">truseq_read2</option>
+              <option value="umi">umi</option>
+
+              <!-- Add other options here --></select
+            ><br />
+
+            <label for="name">Region name:</label><br />
+            <input type="text" id="name" name="name" /><br />
+
+            <label for="sequence_type">Sequence type:</label><br />
+            <select id="sequence_type" name="sequence_type">
+              <option value="fixed">fixed</option>
+              <option value="random">random</option>
+              <option value="onlist">onlist</option>
+              <option value="joined">joined</option>
+              <!-- Add other options here --></select
+            ><br />
+
+            <label for="sequence">Sequence:</label><br />
+            <input
+              type="text"
+              id="sequence"
+              name="sequence"
+              pattern="^[ACGTRYMKSWHBVDNX]+$"
+            /><br />
+
+            <label for="min_len">Min length:</label><br />
+            <input
+              type="number"
+              id="min_len"
+              name="min_len"
+              min="0"
+              max="2048"
+            /><br />
+
+            <label for="max_len">Max length:</label><br />
+            <input
+              type="number"
+              id="max_len"
+              name="max_len"
+              min="0"
+              max="2048"
+            /><br />
+
+            <fieldset>
+              <legend>Onlist (Optional)</legend>
+              <label for="onlist_location">Location:</label><br />
+              <select id="onlist_location" name="onlist_location">
+                <option value="">None</option>
+                <option value="local">local</option>
+                <option value="remote">remote</option></select
+              ><br />
+
+              <label for="onlist_filename">Filename:</label><br />
+              <input
+                type="text"
+                id="onlist_filename"
+                name="onlist_filename"
+              /><br />
+
+              <label for="onlist_md5">MD5:</label><br />
+              <input
+                type="text"
+                id="onlist_md5"
+                name="onlist_md5"
+                pattern="^[a-f0-9]{32}$"
+              /><br />
+            </fieldset>
+
+            <input
+              type="button"
+              value="Generate YAML"
+              onclick="generateYAML()"
+            />
+          </form>
+        </div>
+        <div class="output-container">
+          <pre id="yamlOutput"></pre>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/examples/regions/illumina_p5.rgn.yaml b/examples/regions/illumina_p5.rgn.yaml
@@ -0,0 +1,10 @@
+  - !Region
+    region_id: illumina_p5
+    region_type: illumina_p5
+    name: Illumina P5
+    sequence_type: fixed
+    sequence: AATGATACGGCGACCACCGAGATCTACAC
+    min_len: 29
+    max_len: 29
+    onlist: null
+    regions: null
diff --git a/examples/regions/illumina_p7.rgn.yaml b/examples/regions/illumina_p7.rgn.yaml
@@ -0,0 +1,10 @@
+  - !Region
+    region_id: illumina_p7
+    region_type: illumina_p7
+    name: Illumina P7
+    sequence_type: fixed
+    sequence: ATCTCGTATGCCGTCTTCTGCTTG
+    min_len: 24
+    max_len: 24
+    onlist: null
+    regions: null
diff --git a/examples/regions/nextera_r1.rgn.yaml b/examples/regions/nextera_r1.rgn.yaml
@@ -0,0 +1,10 @@
+  - !Region
+    region_id: nextera_read1
+    region_type: nextera_read1
+    name: Nextera Read 1
+    sequence_type: fixed
+    sequence: TCGTCGGCAGCGTCAGATGTGTATAAGAGACAG
+    min_len: 33
+    max_len: 33
+    onlist: null
+    regions: null
diff --git a/examples/regions/nextera_r2.rgn.yaml b/examples/regions/nextera_r2.rgn.yaml
@@ -0,0 +1,10 @@
+  - !Region
+    region_id: nextera_read2
+    region_type: nextera_read2
+    name: Nextera Read 2
+    sequence_type: joined
+    sequence: CTGTCTCTTATACACATCTCCGAGCCCACGAGAC
+    min_len: 34
+    max_len: 34
+    onlist: null
+    regions:
diff --git a/examples/regions/truseq_r1.rgn.yaml b/examples/regions/truseq_r1.rgn.yaml
@@ -0,0 +1,10 @@
+  - !Region
+    region_id: truseq_read1
+    region_type: truseq_read1
+    name: Truseq Read 1
+    sequence_type: fixed
+    sequence: ACACTCTTTCCCTACACGACGCTCTTCCGATCT
+    min_len: 33
+    max_len: 33
+    onlist: null
+    regions: null
diff --git a/examples/regions/truseq_r2.rgn.yaml b/examples/regions/truseq_r2.rgn.yaml
@@ -0,0 +1,10 @@
+  - !Region
+    region_id: truseq_read2
+    region_type: truseq_read2
+    name: Truseq Read 2
+    sequence_type: fixed
+    sequence: AGATCGGAAGAGCACACGTCTGAACTCCAGTCAC
+    min_len: 34
+    max_len: 34
+    onlist: null
+    regions: null