Added zoom and drag for barcodes

index.html

@@ -76,11 +76,11 @@ <h4 class="pb-1 border-bottom">
                         <div class="card-header bg-transparent border-0 text-center">
                             <span id="dimension_value"></span> Dimensional Barcodes
                             <span class="d-block fw-light">
-                                    (Click on any barcode to visualize the FCN at that range)
+                                    (Click a barcode to view FCN, then zoom and drag to adjust width)
                             </span>
                         </div>
                         <div class="card-body">
-                            <div id="barcodes">
+                            <div id="barcodes" class="bg-light">
 
                             </div>
                         </div>

web_app/barcodes.js

@@ -58,7 +58,6 @@ function show_barcode(barcodes, matrix) {
         .range([margin_top + padding, height - margin_bottom])
         .padding(0.1);
 
-
     // Create horizontal bars
     barcodes_svg.selectAll("rect")
         .data(barcodes)
@@ -123,11 +122,49 @@ function show_barcode(barcodes, matrix) {
         });
 
 
-    // Add the x-axis.
+    const zoom = d3.zoom()
+        .scaleExtent([1, 50])
+        .on("zoom", zoomed);
+
+    const drag = d3.drag()
+        .on("start", dragstarted)
+        .on("drag", dragged)
+        .on("end", dragended);
+
+    barcodes_svg.call(zoom)
+        .call(drag);
+
+
+    function zoomed(event) {
+        const new_xScale = event.transform.rescaleX(xScale);
+        barcodes_svg.selectAll("rect")
+            .attr("x", d => new_xScale(d[0]))
+            .attr("width", d => new_xScale(d[1]) - new_xScale(d[0]));
+
+        barcodes_svg.select(".x-axis")
+            .call(xAxis.scale(new_xScale));
+    }
+
+    function dragstarted(event) {
+        d3.select(this).raise().attr("stroke", "black");
+    }
+
+    function dragged(event, d) {
+        d3.select(this).attr("y", event.y);
+    }
+
+    function dragended(event) {
+        d3.select(this).attr("stroke", null);
+    }
+
+
+    const xAxis = d3.axisTop(xScale);
+
     barcodes_svg.append("g")
         .attr("class", "x-axis") // Add a class for easy selection
         .attr("transform", `translate(0, ${margin_top})`)
-        .call(d3.axisTop(xScale));
+        .call(xAxis);
+
 
     // Append the SVG element to the container
     barcodes_container.node().append(barcodes_svg.node());