DC selector widget now stores DC share ID and label as available vari…

…ables. Also truncates selected DC label after 35 characters

www/include/dataset-collection-selector/dataset-collection-selector.html

@@ -1,10 +1,18 @@
 <!--
+    How to include:
+
+    Just add the following line to the page you want to include this component in (but with a proper
+    comment tag, since this is already within a comment!):
+
+      <!- - #include virtual="/include/dataset-collection-selector/dataset-collection-selector.html" - ->
+
     This creates the following top-level variables:
 
+    - selected_dc_share_id: The selected dataset collection share id the user selected, null if no selection made.
+    - selected_dc_label: The selcted dataset collection label the user selected, null if no selection made.
     - dataset_collection_data: The output of the apiCallsMixin.fetchDatasetCollections() call, which needs to 
       happen in the login UI handler of the page.
     - dataset_collection_label_index: A map of dataset collection share ids to their labels.
-    - selected_dc_share_id: The selected dataset collection share id the user selected.
 
     Requirements for importing this component:
 

www/include/dataset-collection-selector/dataset-collection-selector.js

@@ -2,6 +2,10 @@ let dataset_collection_data = null;
 let dataset_collection_label_index = {};
 
 let selected_dc_share_id = null;
+let selected_dc_label = null;
+
+// This many characters will be included and then three dots will be appended
+const DATASET_COLLECTION_SELECTOR_PROFILE_LABEL_LENGTH_LIMIT = 35;
 
 document.addEventListener('DOMContentLoaded', () => {
     // Add event listeners to the gene list category selectors
@@ -34,11 +38,17 @@ document.addEventListener('DOMContentLoaded', () => {
             });
 
             const row_div = event.target.closest('div');
-            const dc_share_id = row_div.dataset.shareId;
-
             row_div.classList.toggle('is-selected');
+            selected_dc_share_id = row_div.dataset.shareId;
+            selected_dc_label = dataset_collection_label_index[selected_dc_share_id];
+
+            if (selected_dc_label.length > DATASET_COLLECTION_SELECTOR_PROFILE_LABEL_LENGTH_LIMIT) {
+                let truncated_label = selected_dc_label.substring(0, DATASET_COLLECTION_SELECTOR_PROFILE_LABEL_LENGTH_LIMIT) + '...';
+                document.querySelector('#dropdown-dc-selector-label').innerHTML = truncated_label;
+            } else {
+                document.querySelector('#dropdown-dc-selector-label').innerHTML = selected_dc_label;
+            }
 
-            document.querySelector('#dropdown-dc-selector-label').innerHTML = dataset_collection_label_index[dc_share_id];
             document.querySelector('#dropdown-dc').classList.remove('is-active');
         }
     });