archesproject · chiatt · Nov 3, 2023 · Oct 30, 2023 · Oct 30, 2023 · Nov 2, 2023
diff --git a/README.md b/README.md
@@ -61,7 +61,7 @@ RENDERERS += [
     },
 ]
 
-INSTRUMENT_FILE_FORMATS = ["txt"]
+XY_TEXT_FILE_FORMATS = ["txt"]
 
 X_FRAME_OPTIONS = "SAMEORIGIN"
 ```

diff --git a/arches_for_science/media/css/project.css b/arches_for_science/media/css/project.css
@@ -1239,10 +1239,6 @@
     border-bottom: 1px solid #ddd;
 }
 
-.importer-list-container {
-    width: 470px;
-}
-
 .importer-list-container div:hover {
     background: #EBF6FC;
 }
@@ -1355,16 +1351,6 @@
     padding-bottom: 10px;
 }
 
-.import-tool {
-    color: #579ddb;
-    margin-right: 10px;
-}
-
-.import-tool:hover {
-    color: #156AB7;
-    cursor: pointer;
-}
-
 /* Show the tooltip text when you mouse over the tooltip container */
 .tip:hover .tooltiptext {
   visibility: visible;
@@ -1393,4 +1379,32 @@
 .file-workbench-file.selected,
 .file-workbench-file.selected:hover {
     background: #b4d1f0;
+}
+
+.select-file-renderers-workflow-step {
+    height: 100%;
+}
+
+.uploaded-files div.dataTables_wrapper div.dataTables_paginate ul.pagination {
+    margin: 0 5px;
+}
+
+
+.uploaded-files .import-tool {
+    color: #579ddb;
+    background-color: transparent;
+    border: none;
+    margin: 0 6px;
+    min-width: 0;
+    padding: 0;
+    max-width: 266px;
+}
+
+.uploaded-files button.import-tool:hover {
+    color: #156AB7;
+    cursor: pointer;
+}
+
+#container .uploaded-files table.dataTable.table-striped > tbody > tr.active-file {
+    background-color: #dbf1f5;
 }
diff --git a/arches_for_science/media/js/bindings/datatable.js b/arches_for_science/media/js/bindings/datatable.js
@@ -52,18 +52,17 @@ define([
                 key = 'DataTablesForEach_Initialized';
             ko.unwrap(options.data);
             var table;
-            if (!options.dataTableOptions.paging) {
                 table = $(element).closest('table').DataTable();
                 table.destroy();
-            }
             ko.bindingHandlers.foreach.update(element, valueAccessor, allBindings, viewModel, bindingContext);
             table = $(element).closest('table').DataTable(options.dataTableOptions);
 
-            if (options.dataTableOptions.paging) {
-                if (table.page.info().pages - ko.bindingHandlers.dataTablesForEach.page == 0)
+            if (options.dataTableOptions.paging && ko.bindingHandlers.dataTablesForEach.page > 0) {
+                if (table.page.info().pages - ko.bindingHandlers.dataTablesForEach.page == 0) {
                     table.page(--ko.bindingHandlers.dataTablesForEach.page).draw(false);
-                else
+                } else {
                     table.page(ko.bindingHandlers.dataTablesForEach.page).draw(false);
+                }
             }
             if (!ko.utils.domData.get(element, key) && (options.data || options.length))
                 ko.utils.domData.set(element, key, true);

diff --git a/arches_for_science/media/js/views/components/plugins/file-configuration.js b/arches_for_science/media/js/views/components/plugins/file-configuration.js
@@ -35,7 +35,7 @@ define([
         this.parsedData = ko.observable();
         this.loadingFile = ko.observable(false);
         this.renderer = 'e93b7b27-40d8-4141-996e-e59ff08742f3'; // xy reader uuid
-        this.rendererUrl = `/renderer/${this.renderer}`;;
+        this.rendererUrl = `/renderer/${this.renderer}`;
 
         this.files.subscribe(() => {
             if(!this.rendererConfigs()){
@@ -63,6 +63,18 @@ define([
             this.fileMode.valueHasMutated();
         });
 
+        this.toggleSelect = () => {
+            if(!this.selectedFiles().length){
+                this.selectedFiles(this.dataFiles().map(file => file?.details?.file_id));
+                this.currentFiles([]);
+                this.currentFiles(this.dataFiles());
+            } else {
+                this.selectedFiles([]);
+                this.currentFiles([]);
+                this.currentFiles(this.dataFiles());      
+            }
+        };
+
         this.codeMirrorText = ko.observable();
         this.rendererConfigs = ko.observableArray();
         this.rendererConfigs.subscribe(() => {
@@ -186,7 +198,6 @@ define([
                     {name: 'mobilep', width: 320}
                 ]
             },
-            paging: false,
             searching: true,
             scrollCollapse: true,
             info: false,
@@ -225,12 +236,9 @@ define([
 
         this.dataFileTable = {
             ...this.fileTableConfig,
-            columns: Array(3).fill(null)
-        };
-
-        this.otherFileTable = {
-            ...this.fileTableConfig,
-            columns: Array(2).fill(null)
+            paging: true,
+            pageLength: 5,
+            lengthChange: false
         };
 
         const preparedRenderer = fileRenderers[this.renderer];
@@ -310,6 +318,7 @@ define([
             } else {
                 this.currentFiles(this.additionalFiles());
             }
+            this.currentFiles.valueHasMutated()
             this.selectedFile(undefined);
             this.selectedFiles([]);
             this.selectedConfiguration(undefined);

diff --git a/arches_for_science/media/js/views/components/plugins/importer-configuration.js b/arches_for_science/media/js/views/components/plugins/importer-configuration.js
@@ -15,7 +15,7 @@ define([
         this.selectedConfiguration = params.selectedConfiguration || ko.observable();
         this.showConfigurationPanel = ko.observable();
         this.editConfigurationId = ko.observable(undefined);
-
+        this.showImporterList = ko.observable(true);
         this.applyConfigurationVisible = ko.observable(false);
         this.configurationName = ko.observable();
         this.configurationDescription = ko.observable();
@@ -54,6 +54,7 @@ define([
 
         this.cancelConfigEdit = () => {
             this.showConfigurationPanel(false);
+            this.showImporterList(true);
         };
 
         this.dataDelimiter.subscribe(newDelimiter => {
@@ -104,6 +105,7 @@ define([
             }
 
             this.showConfigurationPanel(false);
+            this.showImporterList(true);
         };
 
         const rendererConfigRefresh = (async() => {
@@ -156,6 +158,7 @@ define([
             this.includeDelimiter(configuration?.config?.includeDelimiter);
             this.selectedTransformation(configuration?.config?.transformation);
             this.showConfigurationPanel(true);
+            this.showImporterList(false);
         };
 
         this.deleteConfiguration = async(configuration) => {

diff --git a/arches_for_science/media/js/views/components/plugins/upload-dataset-workflow.js b/arches_for_science/media/js/views/components/plugins/upload-dataset-workflow.js
@@ -166,6 +166,7 @@ define([
                     title: 'Select File Renderers',
                     name: 'select-renderers',
                     required: true,
+                    workflowstepclass: 'select-file-renderers-workflow-step',
                     informationboxdata: {
                         heading: 'Select file renderers',
                         text: 'Select an Importer configuration and data files to apply those configurations to those files.',

diff --git a/arches_for_science/templates/views/components/plugins/file-configuration.htm b/arches_for_science/templates/views/components/plugins/file-configuration.htm
@@ -1,6 +1,6 @@
 {% load i18n %}
-<div class="file-configuration" style="width: 100vw; margin: -20px; display: flex; height: calc(100% + 40px);">
-    <div class="uploaded-files" style="width: 500px; padding: 10px;">
+<div class="file-configuration" style="display: flex; height: 100%;">
+    <div class="uploaded-files" style="width: calc(39.3% - 4px);min-width: 493px; padding: 10px;">
         <h4><span>{% trans "Uploaded Files" %}</span></h4>
         <span class="file-config-instuctions">{% trans "Specify how to process the data files for viewing.  Any additional files (such as images) will be automatically displayed if possible." %}</span>
         <div class="file-button-container">
@@ -9,8 +9,8 @@ <h4><span>{% trans "Uploaded Files" %}</span></h4>
             <div class="file-buttons" data-bind="click:() => {fileMode('other'); selectedFiles([])}, css: {active: fileMode() != 'data'}" role="button">{% trans "Additional Files" %}</div>
         </div>
 
-        <div>
-            <div class="" style="border: 1px solid #ddd; width: 100%; padding: 0px 7px; z-index: 1; position: relative; height: 640px; overflow-y: scroll; overflow-x: hidden;" data-bind="visible: currentFiles().length > 0" style="overflow-y: scroll; height: 600px;">
+        <div style="max-height:calc(100% - 143px)">
+            <div style="border: 1px solid #ddd; width: 100%; padding: 0px 7px; z-index: 1; height: 100%; overflow-y: scroll; overflow-x: hidden;" data-bind="visible: currentFiles().length > 0" style="overflow-y: scroll;">
                 <table class="table table-striped" cellspacing="0" width="100%">
                     <thead>
                         <tr class="afs-table-header">
@@ -19,15 +19,15 @@ <h4><span>{% trans "Uploaded Files" %}</span></h4>
 
                         </tr>
                     </thead>
-                    <tbody data-bind="dataTablesForEach: { data: currentFiles, as: 'file', dataTableOptions: fileTableConfig }">
-                        <tr>
+                    <tbody data-bind="dataTablesForEach: { data: currentFiles, as: 'file', dataTableOptions: dataFileTable }">
+                        <tr data-bind="css: {'active-file': $parent.visibleFile() == file.fileid && $parent.selectedFiles().length <= 1}">
                             <td>
                                 <div style="display: flex; align-items:center;">
                                     <div style="display: flex; align-items: center;">
-                                        <div style="margin: 0 5px;cursor:pointer" data-bind="click: function() { $parent.displayFile(file); $parent.selectedFile(file); }"><i data-bind="visible: $parent.visibleFile() == file.fileid && $parent.selectedFiles().length <= 1" role="button" aria-label="{% trans "Selected File" %}" class="fa fa-eye"></i></div>
+                                        <div style="margin: 0 5px;cursor:pointer" data-bind="click: function() { $parent.displayFile(file); $parent.selectedFile(file); }"></div>
                                         <input style="margin: 0px 5px 0px 0px;" type="checkbox" data-bind="visible: $parent.fileMode() == 'data', value: file.fileid, checked: $parent.selectedFiles">
                                     </div>
-                                    <div style="padding:1px 5px;min-height: 39px;align-items:center;display:flex;cursor:pointer; flex: 1" data-bind="click: function() { $parent.displayFile(file); $parent.selectedFile(file); },text: file.details.name"></div>
+                                    <div style="padding:1px 5px;min-height: 39px;align-items:center;display:flex;cursor:pointer; flex: 1" data-bind="click: function() { $parent.displayFile(file); $parent.selectedFile(file); }, text: file.details.name"></div>
                                 </div>
                             </td>
                             <td style="padding:8px;cursor:pointer" data-bind="click: function() { $parent.displayFile(file); $parent.selectedFile(file); }">
@@ -47,7 +47,8 @@ <h4><span>{% trans "Uploaded Files" %}</span></h4>
                                                 initSelection: $parent.initSelection,
                                                 value: file.details.rendererConfig,
                                                 closeOnSelect: true,
-                                                allowClear: false,
+                                                placeholder: 'Select an Importer',
+                                                allowClear: true,
                                                 multiple: false 
                                             }
                                         }">
@@ -60,14 +61,14 @@ <h4><span>{% trans "Uploaded Files" %}</span></h4>
             </div>
 
         </div>
-        <div class="table-tools-container">
-            <div class="import-tool">x files</div>
-            <div class="import-tool">Select All</div>
-            <div class="import-tool">Remove Importer</div>
+        <div style="position: relative; top: -35px; left: 6px; max-width: 266px;" class="table-tools-container">
+            <div class="import-tool"><span data-bind="text:currentFiles().length"></span> <span data-bind="visible: currentFiles().length != 1">{% trans "files" %}</span><span data-bind="visible: currentFiles().length == 1">{% trans "file" %}</span> <span data-bind="visible: selectedFiles().length">(<span data-bind="text: selectedFiles().length"></span> {% trans "selected" %})</span></div>
+            <button class="import-tool" data-bind="click:() =>{toggleSelect()}"><span data-bind="visible: !selectedFiles().length">{% trans "Select All" %}</span><span data-bind="visible: selectedFiles().length">{% trans "Deselect All" %}</span></button>
+            <!-- <div class="import-tool">Remove Importer</div> -->
         </div>
     </div>
     <div style="cursor:col-resize; min-width:12px; background: #fcfcfc; border-right: 1px solid #eee; border-left: 1px solid #ddd;" class="resizer"></div>
-    <div class="active-files" style="width: 31.9659%; min-width: 550px; display: flex; flex-direction: column; padding: 10px 10px 20px 20px; z-index: 10;">
+    <div class="active-files" style="width: calc(33.3% - 4px);flex:1; display: flex; flex-direction: column; padding: 10px 10px 20px 20px; z-index: 10;">
         <div style="margin-bottom: 10px;" data-bind="visible: !(selectedFiles().length > 1) && fileMode() == 'data'">
             <h4 data-bind="text: selectedFile()?.details?.name"></h4>
             <div class="cm" style="border: 1px solid #ddd" >
@@ -123,14 +124,14 @@ <h4>{% trans "File Preview" %}</h4>
             </div>
         </div>
     </div>
-    <div style="width: 550px; min-width: 550px; position: relative; padding: 10px 50px 20px 20px;" data-bind="visible: fileMode() == 'data'">
+    <div style="width: calc(27.3% - 4px); max-width: 470px; margin: 10px 20px;" data-bind="visible: fileMode() == 'data'">
         {% block importerConfiguration %}
         <!-- ko component: {
             name: 'importer-configuration',
             params: {
                 selectedConfiguration: selectedConfiguration,
                 rendererConfigs: rendererConfigs,
-                alert: alert
+                alert: alert, 
             }
         } --> 
         <!-- /ko -->

diff --git a/arches_for_science/templates/views/components/plugins/importer-configuration.htm b/arches_for_science/templates/views/components/plugins/importer-configuration.htm
@@ -1,19 +1,23 @@
 {% load i18n %}
 <div class="importer-configuration">
-    <div class="file-config-header">{% trans "Importer Configurations" %}</div>
-    <div class="file-config-instuctions">{% trans "Define how to import your x/y data" %}</div>
-    <div class="importer-list-container">
-        <!-- ko foreach: {data: rendererConfigs, as: 'configuration' } -->
-        <div style="display:flex;align-items: center;">
-            <input style="margin: 8px" type="radio" name="selectedConfiguration" data-bind="checked: $parent.selectedConfiguration, value: configuration.configid"></input>
-            <span style="flex:1"><span data-bind="text: configuration.name"></span><span data-bind="if: configuration.description"><span class="tip"><i class="fa fa-info-circle"></i><span class="tooltiptext" data-bind="text: configuration.description"></span></span></span></span>
-            <i class="fa fa-pencil" role="button" data-bind="click:()=>{$parent.loadConfiguration(configuration);}" aria-label="{% trans Edit %}"></i>
-            <i class="fa fa-trash" role="button" data-bind="click:()=>{$parent.deleteConfiguration(configuration);}" aria-label="{% trans Delete %}"></i>
+    <span data-bind="text: console.log(showImporterList(), showConfigurationPanel())"></span>
+    <div data-bind="visible: showImporterList">
+        <div class="file-config-header">{% trans "Importer Configurations" %}</div>
+        <div class="file-config-instuctions">{% trans "Define how to import your x/y data" %}</div>
+        <div class="importer-list-container">
+            <!-- ko foreach: {data: rendererConfigs, as: 'configuration' } -->
+            <div style="display:flex;align-items: center;">
+                <input style="margin: 8px" type="radio" name="selectedConfiguration" data-bind="checked: $parent.selectedConfiguration, value: configuration.configid"></input>
+                <span style="flex:1"><span data-bind="text: configuration.name"></span><span data-bind="if: configuration.description"><span class="tip"><i class="fa fa-info-circle"></i><span class="tooltiptext" data-bind="text: configuration.description"></span></span></span></span>
+                <i class="fa fa-pencil" role="button" data-bind="click:()=>{$parent.loadConfiguration(configuration);}" aria-label="{% trans Edit %}"></i>
+                <i class="fa fa-trash" role="button" data-bind="click:()=>{$parent.deleteConfiguration(configuration);}" aria-label="{% trans Delete %}"></i>
+            </div>
+            <!-- /ko -->
         </div>
-        <!-- /ko -->
+
+        <button class="btn btn-primary" data-bind="click:()=>{showConfigurationPanel(true), editConfigurationId(undefined)}">{% trans "Add Importer Configuration" %}</button>
     </div>
-    <button class="btn btn-primary" data-bind="click:()=>{showConfigurationPanel(true), editConfigurationId(undefined)}">{% trans "Add Importer Configuration" %}</button>
-    <div data-bind="visible: showConfigurationPanel" style="border: 1px solid #ddd; width: 470px; position: absolute; top: 4px;">
+    <div data-bind="visible: showConfigurationPanel" style="border: 1px solid #ddd; top: 4px;">
         <div style="background-color: #004577; color: #fff; padding: 10px; font-weight: bold;">{% trans "Add Importer Configuration" %}</div>
         <div style="background-color: #fafafa; overflow-y: scroll; height: calc(100vh - 337px);">
             <div class="importer-config-panel">

diff --git a/arches_for_science/views/workflows/upload_dataset/select_dataset_files_step.py b/arches_for_science/views/workflows/upload_dataset/select_dataset_files_step.py
@@ -138,7 +138,7 @@ def post(self, request):
                         file_data["renderer"] = next(
                             (renderer["id"] for renderer in settings.RENDERERS if renderer["name"] == "pdfreader"), None
                         )
-                    elif file_data["name"].split(".")[-1] in settings.INSTRUMENT_FILE_FORMATS:  # instrument was given by zip file name
+                    elif file_data["name"].split(".")[-1] in settings.XY_TEXT_FILE_FORMATS:  # instrument was given by zip file name
                         file_data["renderer"] = next(
                             (renderer["id"] for renderer in settings.RENDERERS if renderer["name"] == "xy-reader"), None
                         )
-Original file line number
+Diff line change
@@ Expand Up / @@ -61,7 +61,7 @@ RENDERERS += [ @@
         },
     ]
-    INSTRUMENT_FILE_FORMATS = ["txt"]
+    XY_TEXT_FILE_FORMATS = ["txt"]
     X_FRAME_OPTIONS = "SAMEORIGIN"
     ```
@@ Expand Down @@