Add a defaultSort option for item lists.

docs/girder_config_options.rst

@@ -96,3 +96,32 @@ This is used to specify how items appear in item lists.  There are two settings,
           # the length of arrays.
           value: gloms.length
           title: Number of Gloms
+      defaultSort:
+        # The default lists a sort order for sortable columns.  This must have
+        # type, value, and dir for each entry, where dir is either "up" or
+        # "down".
+        -
+          type: metadata
+          value: Stain
+          dir: up
+        -
+          type: record
+          value: name
+          dir: down
+    itemListDialog:
+      # Show these columns
+      columns:
+        -
+          type: image
+          value: thumbnail
+          title: Thumbnail
+        -
+          type: record
+          value: name
+        -
+          type: metadata
+          value: Stain
+          format: text
+        -
+          type: record
+          value: size

girder/girder_large_image/web_client/templates/itemList.pug

@@ -43,7 +43,7 @@ ul.g-item-list.li-item-list
               if showSizes
                 .g-item-size= formatSize(item.get('size'))
           else if column.type === 'image' && item.get('largeImage')
-            .large_image_thumbnail(extra-image=column.value !== 'thumbnail' ? column.value : undefined, style=column.width ? `width: ${column.width}px` : undefined, g-item-cid=column.value === 'thumbnail' ? item.cid : undefined)
+            .large_image_thumbnail(extra-image=column.value !== 'thumbnail' ? column.value : undefined, style=`width: ${column.width || 160}px; height: ${column.height || 100}px`, g-item-cid=column.value === 'thumbnail' ? item.cid : undefined)
               - var imageName = column.value === 'thumbnail' ? column.value : `images/${column.value}`;
               img.waiting(deferred-src=`${apiRoot}/item/${item.id}/tiles/${imageName}?width=${column.width || 160}&height=${column.height || 100}`)
           else if column.type === 'metadata'

girder/girder_large_image/web_client/views/itemList.js

@@ -109,7 +109,22 @@ wrap(ItemListWidget, 'render', function (render) {
         return this._liconfig ? (this.$el.closest('.modal-dialog').length ? this._liconfig.itemListDialog : this._liconfig.itemList) : undefined;
     };
 
+    this._setSort = () => {
+        this.collection.offset = 0;
+        this.collection.comparator = _.constant(0);
+        this.collection.sortField = JSON.stringify(this._lastSort.map((e) => [
+            (e.type === 'metadata' ? 'meta.' : '') + e.value,
+            e.dir === 'down' ? 1 : -1
+        ]));
+        this.collection.fetch({folderId: this.parentView.parentModel.id});
+    };
+
     function itemListRender() {
+        if (!this._lastSort && this._confList() && this._confList().defaultSort && this._confList().defaultSort.length) {
+            this._lastSort = this._confList().defaultSort;
+            this._setSort();
+            return;
+        }
         this.$el.html(ItemListTemplate({
             items: this.collection.toArray(),
             isParentPublic: this.public,
@@ -199,13 +214,7 @@ function sortColumn(evt) {
     }
     this._lastSort = this._lastSort.filter((e) => e.type !== entry.type || e.value !== entry.value);
     this._lastSort.unshift(entry);
-    this.collection.offset = 0;
-    this.collection.comparator = _.constant(0);
-    this.collection.sortField = JSON.stringify(this._lastSort.map((e) => [
-        (e.type === 'metadata' ? 'meta.' : '') + e.value,
-        e.dir === 'down' ? 1 : -1
-    ]));
-    this.collection.fetch({folderId: this.parentView.parentModel.id});
+    this._setSort();
 }
 
 export default ItemListWidget;

test/test_files/.large_image_config.yaml

@@ -37,6 +37,15 @@ access:
         -
           type: record
           value: controls
+      defaultSort:
+        -
+          type: metadata
+          value: Classification
+          dir: up
+        -
+          type: record
+          value: name
+          dir: down
     itemListDialog:
       # Show these columns
       columns: