Adding hyper links to access data

Author: kevinworthington

README.md

@@ -24,9 +24,11 @@ Additional columns can be added, though they will appear in the table view only.
 This GeoJSON file can be created using https://geojson.io. A brief outline of how to create this file at the given web address is as follows:
    - Navigate to the farm location by using an address in the search bar
    - Use the polygon tool (the square icon) to create shapes outlining each pen denoted in the .csv file
-   - After creating each pen polygon, **click** within the shape to reveal a pop-up, enter 'id' (without quotes) into the left table cell, enter the pen number in the right table cell, click **Save** from within the popup.
+   - After creating each pen polygon, **click** within the shape to reveal a pop-up, enter 'id' (without quotes) into the left table cell (adding the attribute 'id'), enter the pen number in the right table cell, click **Save** from within the popup.
+      - These 'id' numbers are used to join the pen number to the appropriate pen location
    - After adding all pens (with 'id' numbers), click **Save** on the top left of the interface. This will save a GeoJSON file to your computer. You will be able to reopen this within https://geojson.io to continue to edit 
-     the map, if needed. 
+     the map, if needed.
+   - Note: If you'd like to see additional attributes in the popup, you can add them. And if you assign an attribute named 'name', this will appear on the map next to the 'id'. 
 
 ## Running the App
 Once you have both required files on your computer, make sure they are saved in the same directory. Navigate to https://geospatialcentroid.github.io/bird_flu_cattle. Within your file system, navigate to the folder where the required files are saved and drag them, in turn, to the file input field of the application. 

app.csv

@@ -1,5 +1,5 @@
 name,type,data,title_col,filter_cols,date,show_cols,drawing_info,legend
-pens,geojson,data/Farm_AL_7.23.25.geojson,id,,,id," {
+pens,geojson,data/Farm AL_8.29.25.geojson,id,,,id," {
 ""renderer"": {
 ""type"": ""simple"",
 ""symbol"": {
@@ -41,7 +41,7 @@ pens,geojson,data/Farm_AL_7.23.25.geojson,id,,,id," {
         ]
     }
 ]}"
-movement,csv,data/Farm AL Centroid Data Cleaned 7.22.25.csv,ID,,DATE,," {
+movement,csv,data/Farm AL Centroid Data Cleaned 9.9.25.csv,ID,,DATE,," {
 ""renderer"": {
 ""type"": ""simple"",
 ""symbol"": {

css/style.css

@@ -1007,3 +1007,9 @@ input.label{
     font-weight:bold;
 
 }
+
+.hyper{
+    color: blue;
+    text-decoration: underline;
+    cursor:pointer;
+}

index.html

@@ -137,10 +137,14 @@
                          <button id="date_advance_backward" class="btn btn-outline-secondary " onclick="record_manager.move_to_date(-1)" type="button"><i class="bi bi-arrow-left-short"></i></button>
                          <button id="date_advance_forward" class="btn btn-outline-secondary " onclick="record_manager.move_to_date(1)" type="button"><i class="bi bi-arrow-right-short"></i></button>
                 </div>
+
+                <label class="form-check-label font-weight-bold" for="date_first_infection">First Date of infection</label>
+                <button id="date_first_infection" class="btn btn-outline-secondary " type="button"></button>
+
             </div>
             <div class="col" >
-                <span class="font-weight-bold">Total Unique Cows:</span> <span id="total_items"></span> <br/>
-                 <span class="font-weight-bold">Duplicate Cows:</span> <span id="duplicate_items"></span> <br/>
+                <span class="font-weight-bold">Total Unique Cows:</span> <span id="total_items" class="hyper"></span> <br/>
+                 <span class="font-weight-bold">Duplicate Cows:</span> <span id="duplicate_items" class="hyper"></span> <br/>
                  <div id="cow_count_list"></div>
                  <span id="warning"></span>
             </div>

js/index.js

@@ -169,6 +169,7 @@ function after_filter(){
 
     record_manager.clean_data()
 
+
     $("#model_data_form").on("hidden.bs.modal", function () {
        process_data_forms();
         $("#filter_current_date").trigger('change');
@@ -198,7 +199,7 @@ function setup_interface(_event_settings){
       }
        load_data("images/cow.svg","",populate_legend)
        populate_cow_list()
-       console.log(event_data)
+       record_manager.get_first_infection_date()
 
     setTimeout(function(){
       if(record_manager.params && record_manager.params[0].date){
@@ -231,7 +232,7 @@ function populate_cow_list(){
     for(var i in event_settings){
         var obj = event_settings[i]
         if(obj["type"]!='plot'){
-            html+=" <span class='font-weight-bold'>"+obj.label+" Cows:</span> <span id='total_"+obj.label+"'></span> <br/>"
+            html+=" <span class='font-weight-bold'>"+obj.label+" Cows:</span> <span class='hyper' id='total_"+obj.label+"'></span> <br/>"
         }
     }
 
@@ -283,76 +284,3 @@ function populate_cow_list(){
 
 }
 
-create_plot= function(data){
-
-    $("#plot").empty()
-
-    if(data.length==0){
-        $("#plot").hide()
-        return
-    }
-     $("#plot").show()
-
-    // set the dimensions and margins of the graph
-    var row_height=25
-    const margin = {top: 18, right: 0, bottom:25, left: 40},
-        width = 120 - margin.left - margin.right,
-        height = (row_height*(data.length+1)) - margin.top - margin.bottom;
-
-    // append the svg object to the body of the page
-    const svg = d3.select("#plot")
-      .append("svg")
-        .attr("width", width + margin.left + margin.right)
-        .attr("height", height + margin.top + margin.bottom)
-      .append("g")
-        .attr("transform", `translate(${margin.left}, ${margin.top})`);
-
-
-    svg.append("text")
-        .attr("x", (0))
-        .attr("y", 0 - (margin.top / 2))
-        .style("font-size", "11px")
-         .style("font-weight", "bolder")
-         .style('fill', 'black')
-        .text("Originating Pen")
-
-
-    var extent = d3.extent(data, function(d) {
-        return d.value;
-    });
-
-      // Add X axis
-      const x = d3.scaleLinear()
-      .domain([0, extent[1]])
-      .range([ 0, width])
-
-      svg.append("g")
-        .attr("transform", `translate(0, ${height})`)
-        .call(d3.axisBottom(x).ticks(2,d3.format('0f'))).style('color', 'black')
-        .selectAll("text")
-          .attr("transform", "translate(-10,0)rotate(-45)")
-          .style("text-anchor", "end")
-           .style('color', 'black')
-
-      // Y axis
-      const y = d3.scaleBand()
-        .range([ 0, height ])
-        .domain(data.map(d => d.name))
-        .padding(.1);
-      svg.append("g")
-        .call(d3.axisLeft(y))
-        .style('color', 'black')
-
-      //Bars
-      svg.selectAll("myRect")
-        .data(data)
-        .join("rect")
-        .attr("x", x(0) )
-        .attr("y", d => y(d.name))
-        .attr("width", d => x(d.value))
-        .attr("height", y.bandwidth())
-        .attr("fill", "black")
-
-
-
-}

js/map_manager.js

@@ -226,5 +226,86 @@ class Map_Manager {
     }
 }
 
+create_plot= function(data){
 
+    $("#plot").empty()
+
+    if(data.length==0){
+        $("#plot").hide()
+        return
+    }
+     $("#plot").show()
+
+    // set the dimensions and margins of the graph
+    var row_height=25
+    const margin = {top: 18, right: 10, bottom:25, left: 40},
+        width = 120 - margin.left - margin.right,
+        height = (row_height*(data.length+1)) - margin.top - margin.bottom;
+
+    // append the svg object to the body of the page
+    const svg = d3.select("#plot")
+      .append("svg")
+        .attr("width", width + margin.left + margin.right)
+        .attr("height", height + margin.top + margin.bottom)
+      .append("g")
+        .attr("transform", `translate(${margin.left}, ${margin.top})`);
+
+
+    svg.append("text")
+        .attr("x", (0))
+        .attr("y", 0 - (margin.top / 2))
+        .style("font-size", "11px")
+         .style("font-weight", "bolder")
+         .style('fill', 'black')
+        .text("Originating Pen")
+
+
+    var extent = d3.extent(data, function(d) {
+        return d.value;
+    });
+
+      // Add X axis
+      const x = d3.scaleLinear()
+      .domain([0, extent[1]])
+      .range([ 0, width])
+
+      svg.append("g")
+        .attr("transform", `translate(0, ${height})`)
+        .call(d3.axisBottom(x).ticks(2,d3.format('0f'))).style('color', 'black')
+        .selectAll("text")
+          .attr("transform", "translate(-10,0)rotate(-45)")
+          .style("text-anchor", "end")
+           .style('color', 'black')
+
+      // Y axis
+      const y = d3.scaleBand()
+        .range([ 0, height ])
+        .domain(data.map(d => d.name))
+        .padding(.1);
+     const yAxisG =  svg.append("g")
+        .call(d3.axisLeft(y))
+        .style('color', 'blue')
+        .style('text-decoration', 'underline')
+
+   // add a click handler to each tick label
+    yAxisG.selectAll(".tick text")
+    .style("cursor", "pointer")
+    .on("click", function(event, d) {
+        // show all the data for the pens with originating infections
+        record_manager.show_orig_sick_pen_data(d)
+    });
+
+      //Bars
+      svg.selectAll("myRect")
+        .data(data)
+        .join("rect")
+        .attr("x", x(0) )
+        .attr("y", d => y(d.name))
+        .attr("width", d => x(d.value))
+        .attr("height", y.bandwidth())
+        .attr("fill", "black")
+
+
+
+}
 

js/record_manager.js

@@ -344,6 +344,31 @@ class Record_Manager {
 
         }
     }
+    get_first_infection_date(){
+        var infection_val=false
+        var infection_record
+        for(var i in event_settings){
+            var e = event_settings[i]
+            if(e["type"]=='cluster_color'){
+                infection_val= e.start
+               break
+            }
+        }
+
+        if(infection_val){
+            for(var i=0;i<this.json_data.length;i++){
+                if(this.json_data[i]["EVENT"]==infection_val){
+                infection_record = this.json_data[i]
+                 $("#date_first_infection").html(infection_record["START DATE"].format('YYYY-MM-DD'))
+                  $("#date_first_infection").click(function() {
+                    $("#filter_current_date").datepicker().val( infection_record["START DATE"].format('YYYY-MM-DD'))
+                    $("#filter_current_date").trigger('change');
+                  });
+                 break
+                }
+            }
+        }
+    }
 
    search_by_date(_date){
        // let's search for records that fall on a date
@@ -408,19 +433,52 @@ class Record_Manager {
            }
         }
         $("#total_items").html( this.id_track["ids"].length)
+        // add hyper link to data access
+        $("#total_items").off("click");
+        $("#total_items").click(function() {
+            record_manager.format_data_for_show(record_manager.id_track["ids"],["ID"])
+        });
+
         $("#duplicate_items").html( this.id_track["duplicate_ids"].length)
+        $("#duplicate_items").off("click");
+        $("#duplicate_items").click(function() {
+             record_manager.format_data_for_show(record_manager.id_track["duplicate_ids"],["ID"])
+        });
         // Show totals
          for(var i in event_settings){
             var obj = event_settings[i]
             if(obj["type"]!='plot'){
                $("#total_"+obj.label).html(this.id_track[obj.label].length)
+                $("#total_"+obj.label).data('label', obj.label);
+                $("#total_"+obj.label).off("click");
+                console.log(this.id_track[obj.label])
+                $("#total_"+obj.label).click(function() {
+                        var label= $(this).data('label')
+                        record_manager.format_data_for_show(record_manager.id_track[label],["ID"])
+                });
             }
         }
 
         //
         this.show_orig_sick_pen(_date.unix())
         this.show_pen_warning()
     }
+    format_data_for_show(data,attrs){
+        // take an array and convert it to a list of json objects
+        console.log(data)
+        var temp_array = data.map(item => {
+            // if it's not already an array, wrap it so indexing works
+            const values = Array.isArray(item) ? item : [item];
+
+            // build {attr1: val1, attr2: val2, ...}
+            return attrs.reduce((obj, key, i) => {
+              obj[key] = values[i] !== undefined ? values[i] : null; // or leave undefined
+              return obj;
+            }, {});
+          });
+          table_manager.show_data(temp_array)
+    }
+
     create_pen_warning(pen,t){
         // track the unique pens and give a warning
         if(!(String(pen) in this.id_track["pen_warning"])){
@@ -461,17 +519,28 @@ class Record_Manager {
                 if(!ids?.[match_days[i]["from_pen"]]){
                     ids[match_days[i]["from_pen"]]=[]
                 }
-                ids[match_days[i]["from_pen"]].push(match_days[i])
+                // for ease of future access convert end_date and start_date into formatted datetime objects
+                var matched_day=Object.assign({}, match_days[i]);
+                matched_day["start_date"]=moment.unix(matched_day["start_date"]).format('YYYY-MM-DD')
+                matched_day["end_date"]=moment.unix(matched_day["end_date"]).format('YYYY-MM-DD')
+                ids[match_days[i]["from_pen"]].push(matched_day)
             }
-    //        console.log(ids)
+            //store the originating pen for later
+            this.match_days_ids=ids
             // convert to CSV
             var data =[]
             for(var i in ids){
                 data.push({"name":i,"value":ids[i].length})
             }
-            create_plot(data.sort((a, b) => b.value - a.value)) // Ascending order)
+            create_plot(data.sort((a, b) => b.value - a.value)) // Ascending order
         }
     }
+    show_orig_sick_pen_data(pen){
+    console.log(this.match_days_ids[pen])
+    // create a temporary json obj converting the end_date and start_date into formatted datetime objects
+
+       table_manager.show_data(this.match_days_ids[pen])
+    }
     show_data(_id,_attr,_at_date){
         var data=[];
          for(var i=0;i<this.json_data.length;i++){

js/table_manager.js

@@ -508,6 +508,12 @@ class Table_Manager {
 //        }
 //    }
   }
+  show_data(data){
+    console.log(data)
+    this.json_data=data
+    this.generate_table(data,true)
+    this.show_totals()
+  }
   show_totals(){
 
         var showing_start=1