Merge pull request #1534 from ImagingDataCommons/release-50-sp

#1525

Author: s-paquette

static/css/search.css

@@ -449,9 +449,9 @@ td.license, th.license {
 #studies_table_head th, #studies_table td {
     word-break: break-word; }
 
-#studies_table_head th.project-name, th.case-id,
-#studies_table td.project-name, td.case-id {
-    width: 12%;
+#studies_table_head th.case-id,
+#studies_table td.case-id {
+    width: 16%;
 }
 
 #studies_table_head th.study-id,
@@ -466,7 +466,7 @@ td.license, th.license {
 
 #studies_table_head th.study-description,
 #studies_table td.study-description {
-    width:45%;
+    width:34%;
 }
 
 #studies_table_head th.numrows,

static/js/collections_list.js

@@ -36,7 +36,7 @@ require(['jquery', 'datatables.net','jqueryui', 'bootstrap', 'base'],
                 let collex_info = $(this).siblings('.collection-explore');
                 let type = collex_info.data('collex-type');
                 let desc = collection_descs[$(this).data('collex-id')];
-                if(type === 'Analysis'){
+                if(type === 'A'){
                     desc += `<p><b>Collections:</b> `+collex_info.data('collex-collex').replaceAll(",", ", ")+`</p>`;
                 }
                 let sources = $(this).data('doi').split(" ").map(function(i){
@@ -51,7 +51,7 @@ require(['jquery', 'datatables.net','jqueryui', 'bootstrap', 'base'],
 
         $('#collections-table tbody').on('click', 'td.collection-explore', function () {
             let url = '/explore/filters/?'
-                + ($(this).data('collex-type') === 'Analysis' ? "analysis_results_id" : "collection_id")
+                + ($(this).data('collex-type') === 'A' ? "analysis_results_id" : "collection_id")
                 + "=" + $(this).data('collex-id');
 
             window.location.href = url;

static/js/tables.js

@@ -951,7 +951,7 @@ define(['cartutils','filterutils','tippy','jquery', 'base'], function(cartutils,
                         }
                     }, {
                         "type": "text", "orderable": true, data: 'PatientID', render: function (data) {
-                            return data.length > 18 ? pretty_print_id(data, 16) : data;
+                            return data.length > 26 ? pretty_print_id(data, 21) : data;
                         }
                     }, {
                         "type": "text", "orderable": true, data: 'StudyInstanceUID', render: function (data) {

static/js/tooltips.js

@@ -238,11 +238,13 @@ require([
     };
 
     const chromium_only = "Direct download is only available in Chromium browsers.";
+    const plz_use = "Please use idc-index or a cohort/cart manifest to download these files.";
+
     const disabled_download_tooltip = {
         plugins: [dynamicTipFuncDL],
         dynamicTip: function(ref){
             if($(ref).hasClass('download-size-disabled')) {
-                return "This set of images is over 3TB in size. Please use manifest download to obtain these images.";
+                return `This set of images is over 3TB in size. ${plz_use}`;
             }
             return chromium_only;
         },
@@ -291,8 +293,8 @@ require([
 
     let disabled_messages = {
         'download-all-disabled': chromium_only,
-        'download-size-disabled': "This set of files is over 3TB in size. Please use manifest download to obtain these files.",
-        'download-count-disabled': "This set of files contains over 65000 records. Please use manifest download to obtain these files.",
+        'download-size-disabled': `This set of files is over 3TB in size. ${plz_use}`,
+        'download-count-disabled': `This set of files contains over 65000 records. ${plz_use}`,
         'download-cart-disabled': "Add items to the cart to enable this feature.",
         'download-cohort-disabled': "Select a filter to enable this feature."
     };
@@ -387,6 +389,18 @@ require([
         maxWidth: 800
     });
 
+    tippy.delegate('#collections-table', {
+        content: function(reference) {
+            return $(reference).attr("data-tooltip");
+        },
+        theme: 'dark',
+        placement: 'right',
+        arrow: false,
+        target: '.collex-table-tip',
+        interactive: true, // This is required for any table tooltip to show at the appropriate spot!
+        maxWidth: 200
+    });
+
     tippy.delegate('#body', disabled_download_tooltip);
     tippy.delegate('#body', download_tooltip);
 

templates/collections/collection_details.html

@@ -34,8 +34,17 @@ <h3>{{ collection_type }} <i class="fa fa-solid fa-ellipsis-v collection-spacer"
                        {% if size_warning %}data-toggle="modal" data-target="#download-warning"{% endif %}
                     >
                     Direct <i class="fa fa-solid fa-download"></i></a></li>
-                <li class="collex-list-item"><a class="dropdown-item" href="#">idc-index <i class="fa fa-solid fa-list"></i></a></li>
-                <li class="collex-list-item"><a class="dropdown-item" href="#">Manifest <i class="fa fa-solid fa-list"></i></a></li>
+                  <li class="collex-list-item">
+                      <a
+                          class="dropdown-item"
+                          role="button"
+                          data-toggle="modal"
+                          data-bs-toggle="modal"
+                          data-bs-target="#export-collex-manifest-modal"
+                          data-target="#export-collex-manifest-modal">idc-index <i class="fa fa-solid fa-list"></i>
+                      </a>
+                  </li>
+{#                <li class="collex-list-item"><a class="dropdown-item" href="#">Manifest <i class="fa fa-solid fa-list"></i></a></li>#}
             {% endwith %}
             </ul>
         </div>
@@ -114,7 +123,9 @@ <h3>Description</h3>
 
 {% include 'idc/citations-modal.html' %}
 {% include 'idc/download-modal.html' %}
-
+{% with collection_type=collection_type collection_id=collection_id %}
+    {% include 'idc/export-collex-modal.html' %}
+{% endwith %}
 {% endblock %}
 
 {% block js_file %}

templates/collections/collections_list.html

@@ -24,7 +24,8 @@ <h3 class="pull-left">Collections</h3>
                 <table id="collections-table" class="table collex-table sortable_table table-striped table-hover">
                     <thead>
                         <th></th>
-                        <th class="id-col">ID</th>
+                        <th class="id-col">Name</th>
+                        <th>Explore Images</th>
                         <th class="collex-type-col">Collection Type</th>
                         <th class="access-col">Access</th>
                         <th class="cancer-type-col">Cancer Type</th>
@@ -35,41 +36,55 @@ <h3 class="pull-left">Collections</h3>
                     </thead>
                     <colgroup>
                         <col style="width: 3%">
-                        <col style="width: 12%">
+                        <col style="width: 16%">
                         <col style="width: 8%">
                         <col style="width: 8%">
+                        <col style="width: 4%">
+                        <col style="width: 20%">
                         <col style="width: 13%">
                         <col style="width: 8%">
-                        <col style="width: 8%">
-                        <col style="width: 9%">
+                        <col style="width: 15%">
                         <col style="width: 9%">
                     </colgroup>
                     <tbody>
                         {% for collection in active_collections %}
-                            {% with collex_type=collection.get_collection_type %}
+                            {% with collex_type_display=collection.get_collection_type %}
                             <tr>
                                 <td class="details-control" data-doi="{{ collection.doi }}"
                                     data-source-url="{{ collection.source_url }}"
                                     data-collex-id="{{ collection.collection_id }}"
                                     title="Click to display collection description."
                                 >
                                     <i class="fa-solid fa-circle-plus show-button"> </i><i class="fa-solid fa-circle-minus hide-button"> </i></td>
+                                <td class="collection-name"
+                                >
+                                    <a class="collex-table-tip"
+                                            data-tooltip="View this {{ collex_type_display }}'s page (opens a new tab)."
+                                    {% if collection.collection_type == 'A' %}
+                                        href="/analysis_results/{{ collection.collection_id }}" target="_blank" rel="nofollow noreferrer">
+                                        {{ collection.collection_id }}
+                                    {% else %}
+                                        href="/collections/{{ collection.collection_id }}" target="_blank" rel="nofollow noreferrer">
+                                        {% if collection.tcia_collection_id|length == 0 %}
+                                            {{ collection.name }}
+                                        {% else %}
+                                            {{ collection.tcia_collection_id }}
+                                        {% endif %}
+                                    {% endif %}
+                                    </a>
+                                </td>
                                 <td class="collection-explore"
                                     data-collex-id="{{ collection.collection_id }}"
                                     data-collex-collex="{{ collection.collections }}"
-                                    data-collex-type="{{ collex_type }}"
+                                    data-collex-type="{{ collection.collection_type }}"
                                 >
-                                    <a role="button" >
-                                {% if collex_type == 'Analysis' %}
-                                    {{ collection.collection_id }}
-                                {% elif collection.tcia_collection_id|length == 0 %}
-                                    {{ collection.name }}
-                                {% else %}
-                                    {{ collection.tcia_collection_id }}
-                                {% endif %}
+                                    <a role="button" class="collex-table-tip"
+                                        data-tooltip="Open the data explorer filtered to this {{ collex_type_display }}."
+                                    >
+                                        <i class="fa-solid fa-eye"></i>
                                     </a>
                                 </td>
-                                <td>{{ collection.get_collection_type }}</td>
+                                <td>{{ collex_type_display }}</td>
                                 <td>{{ collection.access }}</td>
                                 <td>{{ collection.cancer_type }}</td>
                                 <td>{{ collection.image_types }}</td>
@@ -94,6 +109,7 @@ <h3 class="pull-left">Collections</h3>
     {{ active_collection_descs|json_script:"collection_descs" }}
 	{{ block.super }}
 	<script type="text/javascript" src="{% static 'js/collections_list.js' %}?v={{ APP_VERSION }}"></script>
+    <script type="text/javascript" src="{% static 'js/tooltips.js' %}?v={{ APP_VERSION }}"></script>
     <script>
         const collection_descs = JSON.parse(document.getElementById('collection_descs').textContent);
     </script>

templates/idc/export-collex-modal.html

@@ -0,0 +1,65 @@
+<!-- Export Collection Manifest Modal -->
+<div class="modal fade" id="export-collex-manifest-modal" tabindex="-1" role="dialog"
+     aria-labelledby="exportCollexManifestModal" aria-hidden="true" data-file-timestamp="{% now "Ymd_Gis" %}">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h4 class="modal-title" id="exportCollexManifestModal">{{ collection_type }} Export</h4>
+                <button type="button" class="close btn-close" data-dismiss="modal" data-bs-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+            </div>
+                <div class="modal-body">
+                    <div class="form-group list-group">
+                        <ul class="nav nav-tabs manifest">
+                            <li class="filter-tab active manifest-idc-index" role="presentation">
+                                <a href="#manifest-idc-index" role="tab" data-toggle="tab" title="idc-index manifest"
+                                   aria-expanded="true"
+                                >
+                                    idc-index
+                                </a>
+                            </li>
+                        </ul>
+                        <div class="tab-content">
+                            <div id="manifest-idc-index" class="tab-pane manifest active" role="tab-panel">
+                                <p>
+                                    <br />
+                                    To obtain these images, install the
+                                    <a class="external-link" url="https://github.com/ImagingDataCommons/idc-index"
+                                       data-toggle="modal" data-target="#external-web-warning">idc-index
+                                        <i class="fa-solid fa-external-link external-link-icon" aria-hidden="true"></i>
+                                    </a> python package:</p>
+                                <p>
+                                    <span class="code">
+                                        pip install --upgrade idc-index
+                                    </span> <a
+                                        role="button" class="pip-install copy-this"
+                                        content="pip install --upgrade idc-index"
+                                        title="Copy command to clipboard">
+                                        <i class="fa-solid fa-copy" aria-hidden="true"></i>
+                                    </a>
+                                </p>
+                                <p>
+                                    Then run the following command:
+                                </p>
+                                <p>
+                                    <span class="code idc-index-text">
+                                        idc download {{ collection_id }}
+                                    </span> <a
+                                        role="button" class="idc-index copy-this"
+                                        content="idc download {{ collection_id }}"
+                                        title="Copy command to clipboard">
+                                        <i class="fa-solid fa-copy" aria-hidden="true"></i>
+                                    </a>
+                                </p>
+                                <p>To learn about more ways to download IDC data, please <a
+                                       class="external-link" href="" url="https://learn.canceridc.dev/data/downloading-data"
+                                       data-toggle="modal" data-target="#external-web-warning"
+                                    >
+                                    see IDC download instructions page. <i class="fa-solid fa-external-link external-link-icon" aria-hidden="true"></i></a>
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+        </div>
+    </div>
+</div>