Add image section to trial details page

lib/SGN/Controller/AJAX/Search/Image.pm

@@ -40,7 +40,7 @@ sub image_search :Path('/ajax/search/images') Args(0) {
 
     my @stock_name_list;
     if (exists($params->{image_stock_uniquename}) && $params->{image_stock_uniquename}) {
-        push @stock_name_list, $params->{image_stock_uniquename};
+        @stock_name_list = split /,/, $params->{image_stock_uniquename};
     }
 
     my @project_name_list;
@@ -111,6 +111,24 @@ sub image_search :Path('/ajax/search/images') Args(0) {
         my $image_page = "/image/view/$image_id";
         my $colorbox = qq|<a href="$image_img"  title="<a href=$image_page>Go to image page ($image_name)</a>" class="image_search_group" rel="gallery-figures"><img src="$small_image" width="40" height="30" border="0" alt="$image_description" /></a>|;
 
+        my $plot_name = $_->{stock_uniquename};
+        my $accession_name;
+        if ($plot_name) {
+            my $plot_stock = $schema->resultset('Stock::Stock')->find({uniquename => $plot_name});
+            if ($plot_stock) {
+                my $accession_stock = $plot_stock->search_related('stock_relationship_subjects', {
+                    'type.name' => 'plot_of',
+                }, {
+                    join => 'type',
+                })-> single;
+                if ($accession_stock) {
+                    my $accession_id = $accession_stock->object->stock_id;
+                    my $accession_uniquename = $accession_stock->object->uniquename;
+                    $accession_name = "<a href='/stock/$accession_id/view'>$accession_uniquename</a>";
+                }
+            }
+        }
+
         my @line;
         if ($params->{html_select_box}) {
             push @line, "<input type='checkbox' name='".$params->{html_select_box}."' value='".$_->{image_id}."'>";
@@ -121,6 +139,7 @@ sub image_search :Path('/ajax/search/images') Args(0) {
             $_->{image_description},
             "<a href='/solpeople/personal-info.pl?sp_person_id=".$_->{image_sp_person_id}."' >".$_->{image_username}."</a>",
             $associations,
+            $accession_name,
             $observations,
             (join ', ', @tags)
         );

mason/breeders_toolbox/trial.mas

@@ -57,6 +57,8 @@ $trial_stock_count => undef
 $management_factor_types => ()
 $trial_owner => undef
 $latest_trial_activity => undef
+$stock_id => undef
+$stockref => undef
 
 
 $project_id => undef
@@ -116,6 +118,9 @@ $project_id => undef
 
 <& /page/detail_page_2_col_section.mas, trial_id => $trial_id, info_section_title => "<h4 style='display:inline'>Soil Data</h4>", info_section_subtitle => 'View and upload soil data for this trial.', icon_class => "glyphicon glyphicon-info-sign", buttons_html => "<button class='btn btn-sm btn-primary' style='margin:3px' id='trial_upload_soil_data_button' >Upload Soil Data</button>", info_section_id => "trial_soil_data_section"&>
 
+<& /page/detail_page_2_col_section.mas, trial_id => $trial_id, info_section_title => "<h4 style='display:inline'>Images</h4>", info_section_subtitle => 'View images of this trial.', icon_class => "glyphicon glyphicon-camera", info_section_id => "trial_images_section" &>
+
+
 <& /page/detail_page_2_col_section.mas, trial_id => $trial_id, info_section_title => "<h4 style='display:inline'>JBrowse Genome Alignments For this Experiment</h4>", info_section_subtitle => 'View JBrowse alignments for accessions in this trial.', icon_class => "glyphicon glyphicon-align-left", info_section_id => "trial_jbrowse_data" &>
 
 <& /page/detail_page_2_col_section.mas, trial_id => $trial_id, trial_type => $trial_type, info_section_title => "<h4 style='display:inline'>Experiment Linkage</h4>", info_section_subtitle => 'View other experiments, crosses, and genotyping plates linked to this experiment.', icon_class => "glyphicon glyphicon-link", info_section_id => "trial_linkage_section" &>

mason/image/plot_images.mas

@@ -0,0 +1,137 @@
+
+<%args>
+$trial_id
+$stockref => undef
+</%args>
+
+<style>
+#plot_images_results {
+    width: 100% !important;
+}
+</style>
+
+<& /util/import_javascript.mas, classes => [ 'jquery', 'thickbox', 'jquery.dataTables' ] &>
+
+<div class="well well-sm table-responsive">
+    <table id="plot_images_results" class="table table-hover table-striped">
+    <thead>
+        <tr>
+        <th>Image</th>
+        <th>File Name/Details</th>
+        <th>Description</th>
+        <th>Submitter</th>
+        <th>Associations</th>
+        <th>Accession Name</th>
+    </tr>
+    </thead>
+    </table>
+</div>
+
+
+<script>
+
+<%perl>
+my $dbh = $stockref->{dbh};
+</%perl>
+
+var trial_id = '<% $trial_id %>';
+var plotNames = [];
+var auth_token;
+    var require_login = "<% $c->get_conf('brapi_require_login') %>";
+    auth_token = "<% CXGN::Login->new($c->dbc->dbh)->get_login_cookie() %>";
+
+    if (require_login == '1'){
+        auth_token = "<% CXGN::Login->new($c->dbc->dbh)->get_login_cookie() %>";
+        if (!auth_token){
+            alert("Login required to display");
+        }
+    }
+
+jQuery(document).ready( function() {
+
+    jQuery('#trial_images_section_onswitch').click(function() {
+        console.log(<% $trial_id %>);
+        getObservationUnits()
+    });
+
+    jQuery('#plot_images_results').on( 'draw.dt', function () {
+        jQuery('a.image_search_group').colorbox();
+    });
+});
+
+function getObservationUnits() {
+    var trial_ids = [trial_id];
+
+    jQuery.ajax({
+        headers: (auth_token) ? {'Authorization': `Bearer ` + auth_token } : {},
+        method: 'GET',
+        url: '/brapi/v2/observationunits',
+        data: {
+            studyDbIds: trial_ids,
+            pageSize: 10000
+        },
+        beforeSend: function() {
+            jQuery("#working_modal").modal("show");
+        },
+        success: function(response) {
+            var data = response.result.data;
+            data.forEach(function(unit) {
+                plotNames.push(unit.observationUnitName);
+            });
+            _load_stock_image_results();
+        },
+        error: function(response) {
+            alert('Error fetching observation units');
+        },
+        complete: function() {
+            jQuery("#working_modal").modal("hide");
+        }
+    });
+}
+
+function _load_stock_image_results() {
+    var plotNamesString = plotNames.join(',');
+
+    plot_images_table = jQuery('#plot_images_results').DataTable({
+        'destroy' : true,
+        'searching' : true,
+        'ordering' : true,
+        'processing' : true,
+        //'serverSide': true,
+        'scrollX': true,
+        'lengthMenu': [10,20,50,100,1000,5000],
+        'ajax': { 'url': '/ajax/search/images',
+            'data': function(d) {
+                d.image_stock_uniquename = plotNamesString;
+            },
+            'dataSrc': function(json) {
+                json.data.forEach(function(row) {
+                    var imgElement = jQuery(row[0]).find('img');
+                    imgElement.attr('width', '140').attr('height', '120');
+                    var anchorElement = jQuery(row[0]);
+                    anchorElement.html(imgElement.prop('outerHTML'));
+                    row[0] = anchorElement.prop('outerHTML');
+                });
+                return json.data;
+            }
+        },
+        'columns': [
+            { 'title': 'Image', 
+              'data': 0, },
+            { 'title': 'File Name/Details', 'data': 1 },
+            { 'title': 'Description', 'data': 2 },
+            { 'title': 'Submitter', 'data': 3 },
+            { 'title': 'Associations', 'data': 4 },
+            { 'title': 'Accession Name', 'data': 5 },
+        ],
+        columnDefs: [
+            { "targets": [1,3,4], "type": 'html' },
+            { targets: [0], searchable: false }
+        ]
+    }).on('draw', function() {
+        jQuery(".image_search_group").colorbox({rel:'image_search_group'});
+    });
+}
+
+
+</script>

mason/page/detail_page_2_col_section.mas

@@ -287,7 +287,9 @@ $field_headers => ()
 % if ($info_section_id eq 'trial_soil_data_section'){
                                 <& /breeders_toolbox/trial/trial_soil_data.mas, trial_id => $trial_id &>
 % } #End trial_soil_data_section
-
+% if ($info_section_id eq 'trial_images_section'){
+                                <& /image/plot_images.mas, trial_id => $trial_id &>
+% } #End trial_images_section
 
 % if ($info_section_id eq 'stock_additional_info_section'){
                                 <& /stock/additional_info_section.mas, stock_id => $stock_id, type_name => $type_name, stockprops => $stockprops, edit_privs => $edit_privs, editable_stock_props => $editable_stock_props, editor_link => $editor_link, source_dbs => $source_dbs, locus_add_uri => $locus_add_uri, allele_div => $allele_div, is_owner => $is_owner &>