girder-large-image 1.23.1.dev44__tar.gz → 1.23.2.dev6__tar.gz

{girder-large-image-1.23.1.dev44 → girder-large-image-1.23.2.dev6}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.1
 Name: girder-large-image
-Version: 1.23.1.dev44
+Version: 1.23.2.dev6
 Summary: A Girder plugin to work with large, multiresolution images.
 Home-page: https://github.com/girder/large_image
 Author: Kitware, Inc.

{girder-large-image-1.23.1.dev44 → girder-large-image-1.23.2.dev6}/girder_large_image/web_client/templates/itemList.pug

@@ -16,7 +16,7 @@ ul.g-item-list.li-item-list
       if checkboxes
         span.li-item-list-cell
           input.g-list-checkbox(type="checkbox", g-item-cid=item.cid)
-      for column in itemList.columns
+      for column, colidx in itemList.columns
         if column.type !== 'image' || hasAnyLargeImage
           -
             var divtype = column.type !== 'record' || column.value !== 'controls' ? 'a' : 'span';
@@ -51,11 +51,22 @@ ul.g-item-list.li-item-list
                 column.value.split('.').forEach((part) => {
                   value = (value || {})[part];
                 })
-              span.large_image_metadata
-                = value
-              if value
-                span.li-item-list-cell-filter(title="Only show items that match this metadata value exactly", filter-value=value, column-value=column.value)
-                  i.icon-filter
+              if column.edit && accessLevel >= AccessType.WRITE
+                - if ((value === '' || value === undefined) && column.default) { value = column.default; }
+                span.large_image_metadata.lientry_edit(column-idx=colidx)
+                  if column.enum
+                    select.input-sm.form-control.g-widget-metadata-value-input.g-widget-metadata-lientry(title=column.description)
+                      for enumval in column.enum
+                        option(value=enumval, selected=enumval === value ? 'selected' : null)
+                          = enumval
+                  else
+                    input.input-sm.form-control.g-widget-metadata-value-input.g-widget-metadata-column(placeholder=column.description || "Value", value=value, title=column.description)
+              else
+                span.large_image_metadata
+                  = value
+                  if value
+                    span.li-item-list-cell-filter(title="Only show items that match this metadata value exactly", filter-value=value, column-value=column.value)
+                    i.icon-filter
   if (hasMore && !paginated)
     li.g-show-more
       a.g-show-more-items

{girder-large-image-1.23.1.dev44 → girder-large-image-1.23.2.dev6}/girder_large_image/web_client/views/itemList.js

@@ -16,6 +16,7 @@ import {addToRoute} from '../routes';
 
 import '../stylesheets/itemList.styl';
 import ItemListTemplate from '../templates/itemList.pug';
+import {MetadatumWidget, validateMetadataValue} from './metadataWidget';
 
 wrap(HierarchyWidget, 'render', function (render) {
     render.call(this);
@@ -85,6 +86,9 @@ wrap(ItemListWidget, 'initialize', function (initialize, settings) {
     });
     this.events['click .li-item-list-header.sortable'] = (evt) => sortColumn.call(this, evt);
     this.events['click .li-item-list-cell-filter'] = (evt) => itemListCellFilter.call(this, evt);
+    this.events['click .large_image_metadata.lientry_edit'] = (evt) => itemListMetadataEdit.call(this, evt);
+    this.events['change .large_image_metadata.lientry_edit'] = (evt) => itemListMetadataEdit.call(this, evt);
+    this.events['input .large_image_metadata.lientry_edit'] = (evt) => itemListMetadataEdit.call(this, evt);
     this.delegateEvents();
     this.setFlatten = (flatten) => {
         if (!!flatten !== !!this._recurse) {
@@ -395,7 +399,11 @@ wrap(ItemListWidget, 'render', function (render) {
             apiRoot: getApiRoot(),
             hasAnyLargeImage: this._hasAnyLargeImage,
             itemList: this._confList(),
-            sort: this._lastSort
+            sort: this._lastSort,
+            MetadatumWidget: MetadatumWidget,
+            accessLevel: this.accessLevel,
+            parentView: this,
+            AccessType: AccessType
         }));
 
         const parent = this.$el;
@@ -514,4 +522,40 @@ function itemListCellFilter(evt) {
     return false;
 }
 
+function itemListMetadataEdit(evt) {
+    evt.preventDefault();
+    if (evt.type === 'click') {
+        return false;
+    }
+    const ctrl = $(evt.target).closest('.lientry_edit');
+    const columns = (this._confList() || {}).columns || [];
+    const column = columns[+ctrl.attr('column-idx')];
+    let tempValue = ctrl.find('.g-widget-metadata-value-input').val();
+    tempValue = tempValue.trim();
+    let valResult = validateMetadataValue(column, tempValue, self._lastValidationError || (tempValue === '' && !column.required));
+    if (tempValue === '' && !column.required) {
+        valResult = {value: tempValue};
+    }
+    if (!valResult) {
+        self._lastValidationError = true;
+        return false;
+    }
+    self._lastValidationError = false;
+    const item = this.collection.get(ctrl.closest('[g-item-cid]').attr('g-item-cid'));
+    let value = item.get('meta') || {};
+    let meta;
+    let key;
+    column.value.split('.').forEach((part) => {
+        meta = value;
+        key = part;
+        value = (value || {})[part];
+    });
+    if (value === valResult.value) {
+        return;
+    }
+    meta[key] = valResult.value;
+    item._sendMetadata(item.get('meta'));
+    return false;
+}
+
 export default ItemListWidget;

{girder-large-image-1.23.1.dev44 → girder-large-image-1.23.2.dev6}/girder_large_image/web_client/views/metadataWidget.js

@@ -55,6 +55,43 @@ function liMetadataKeyEntry(limetadata, key) {
     return result;
 }
 
+function validateMetadataValue(lientry, tempValue, nowarn) {
+    if (lientry && lientry.regex && !(new RegExp(lientry.regex).exec(tempValue))) {
+        if (!nowarn) {
+            events.trigger('g:alert', {
+                text: 'The value does not match the required format.',
+                type: 'warning'
+            });
+        }
+        return false;
+    }
+    if (lientry && ((lientry.format || lientry.type) === 'number' || (lientry.format || lientry.type) === 'integer')) {
+        if (!Number.isFinite(parseFloat(tempValue)) || ((lientry.format || lientry.type) === 'integer' && !Number.isInteger(parseFloat(tempValue)))) {
+            if (!nowarn) {
+                events.trigger('g:alert', {
+                    text: `The value must be a ${(lientry.format || lientry.type)}.`,
+                    type: 'warning'
+                });
+            }
+            return false;
+        }
+        tempValue = parseFloat(tempValue);
+        if ((lientry.minimum !== undefined && tempValue < lientry.minimum) ||
+            (lientry.exclusiveMinimum !== undefined && tempValue <= lientry.exclusiveMinimum) ||
+            (lientry.maximum !== undefined && tempValue > lientry.maximum) ||
+            (lientry.exclusiveMaximum !== undefined && tempValue >= lientry.exclusiveMaximum)) {
+            if (!nowarn) {
+                events.trigger('g:alert', {
+                    text: 'The value is outside of the allowed range.',
+                    type: 'warning'
+                });
+            }
+            return false;
+        }
+    }
+    return {value: tempValue};
+}
+
 var MetadatumWidget = View.extend({
     className: 'g-widget-metadata-row',
 
@@ -286,34 +323,11 @@ var MetadatumEditWidget = View.extend({
         if (keyMode && lientry) {
             tempValue = tempValue.trim();
         }
-        if (lientry && lientry.regex && !(new RegExp(lientry.regex).exec(tempValue))) {
-            events.trigger('g:alert', {
-                text: 'The value does not match the required format.',
-                type: 'warning'
-            });
+        const valResult = validateMetadataValue(lientry, tempValue);
+        if (!valResult) {
             return false;
         }
-        if (lientry && (lientry.type === 'number' || lientry.type === 'integer')) {
-            if (!Number.isFinite(parseFloat(tempValue)) || (lientry.type === 'integer' && !Number.isInteger(parseFloat(tempValue)))) {
-                events.trigger('g:alert', {
-                    text: `The value must be a ${lientry.type}.`,
-                    type: 'warning'
-                });
-                return false;
-            }
-            tempValue = parseFloat(tempValue);
-            if ((lientry.minimum !== undefined && tempValue < lientry.minimum) ||
-                (lientry.exclusiveMinimum !== undefined && tempValue <= lientry.exclusiveMinimum) ||
-                (lientry.maximum !== undefined && tempValue > lientry.maximum) ||
-                (lientry.exclusiveMaximum !== undefined && tempValue >= lientry.exclusiveMaximum)) {
-                events.trigger('g:alert', {
-                    text: 'The value is outside of the allowed range.',
-                    type: 'warning'
-                });
-                return false;
-            }
-        }
-
+        tempValue = valResult.value;
         var saveCallback = () => {
             this.key = tempKey;
             this.value = tempValue;
@@ -668,5 +682,6 @@ export {
     MetadatumWidget,
     MetadatumEditWidget,
     JsonMetadatumEditWidget,
-    liMetadataKeyEntry
+    liMetadataKeyEntry,
+    validateMetadataValue
 };

{girder-large-image-1.23.1.dev44 → girder-large-image-1.23.2.dev6}/girder_large_image/web_client/vue/components/CompositeLayers.vue

@@ -5,7 +5,7 @@ import { CHANNEL_COLORS, OTHER_COLORS } from '../utils/colors'
 import HistogramEditor from './HistogramEditor.vue';
 
 export default {
-    props: ['itemId', 'currentFrame', 'layers', 'layerMap'],
+    props: ['itemId', 'currentFrame', 'layers', 'layerMap', 'active'],
     emits: ['updateStyle'],
     components: {
         'color-picker': Chrome,
@@ -27,10 +27,33 @@ export default {
                 resample: false,
                 style: '{}',
                 roundRange: true,
-            }
+            },
+            showKeyboardShortcuts: false,
         }
     },
     methods: {
+        keyHandler(e) {
+            let numericKey = parseFloat(e.key)
+            if (e.ctrlKey && !isNaN(numericKey)) {
+                e.preventDefault()
+                if (numericKey === 0) {
+                    numericKey += 10
+                }
+                if (e.altKey) {
+                    numericKey += 10
+                }
+                const layerIndex = numericKey - 1
+                if (layerIndex < this.layers.length) {
+                    const targetLayer = this.layers[layerIndex]
+                    if (this.compositeLayerInfo[targetLayer].enabled) {
+                        this.enabledLayers = this.enabledLayers.filter((v) => v !== targetLayer)
+                    } else {
+                        this.enabledLayers.push(targetLayer)
+                    }
+                    this.updateActiveLayers()
+                }
+            }
+        },
         initializeLayerInfo() {
             const usedColors = []
             this.compositeLayerInfo = {}
@@ -211,126 +234,165 @@ export default {
         }
         this.updateActiveLayers()
         this.updateStyle()
+        if (this.active) {
+            document.addEventListener('keydown', this.keyHandler)
+        }
+    },
+    watch: {
+        active() {
+            if (this.active) {
+                document.addEventListener('keydown', this.keyHandler)
+            } else {
+                document.removeEventListener('keydown', this.keyHandler)
+            }
+        }
     }
 }
 </script>
 
 <template>
-    <div :class="colorPickerShown ? 'table-container tall' : 'table-container'">
-        <table id="composite-layer-table" class="table table-condensed">
-            <thead class="table-header">
-                <tr>
-                    <th>
-                        <input
-                            type="checkbox"
-                            class="input-80"
-                            :checked="enabledLayers === layers"
-                            @input="toggleEnableAll"
-                        >
-                    </th>
-                    <th></th>
-                    <th></th>
-                    <th>
-                        <div class="auto-range-col">
-                            <div class="auto-range-label">
-                                <span class="small-text">Auto Range</span>
+    <div>
+        <i
+            class="icon-keyboard"
+            @click="showKeyboardShortcuts = !showKeyboardShortcuts"
+        />
+        <div class="shortcuts" v-if="showKeyboardShortcuts">
+            <div class="h5">Keyboard Shortcuts</div>
+            <div>
+                <span class="monospace">ctrl + number</span>
+                Toggle visibility of the layer at the number position
+            </div>
+            <div>
+                <span style="font-weight: bold;">Example: </span>
+                <span class="monospace">ctrl + 1</span>
+                Toggle visibility of the first layer in the table
+            </div>
+            <div>
+                <span class="monospace">ctrl + alt + number</span>
+                Toggle visibility of the layer at the position of the number plus 10
+            </div>
+            <div>
+                <span style="font-weight: bold;">Example: </span>
+                <span class="monospace">ctrl + alt + 1</span>
+                Toggle visibility of the eleventh layer in the table
+            </div>
+        </div>
+        <div  :class="colorPickerShown ? 'table-container tall' : 'table-container'">
+            <table id="composite-layer-table" class="table table-condensed">
+                <thead class="table-header">
+                    <tr>
+                        <th>
+                            <input
+                                type="checkbox"
+                                class="input-80"
+                                :checked="enabledLayers === layers"
+                                @input="toggleEnableAll"
+                            >
+                        </th>
+                        <th></th>
+                        <th></th>
+                        <th>
+                            <div class="auto-range-col">
+                                <div class="auto-range-label">
+                                    <span class="small-text">Auto Range</span>
+                                    <label class="switch">
+                                        <span
+                                            :class="allAutoRange() ? 'slider checked' : 'slider'"
+                                            @click="() => updateAllAutoRanges(allAutoRange() ? undefined : 0.2)"
+                                        />
+                                    </label>
+                                </div>
+                                <span
+                                    v-if="allAutoRange()"
+                                    class="percentage-input"
+                                >
+                                    <input
+                                        type="number"
+                                        class="input-80"
+                                        :max="50"
+                                        :min="0"
+                                        :value="autoRangeForAll"
+                                        @input="(e) => updateAllAutoRanges(e.target.value)"
+                                    >
+                                </span>
+                            </div>
+                            <i
+                                :class="expandedRows.length === layers.length ? 'expand-btn icon-up-open' : 'expand-btn icon-down-open'"
+                                @click="toggleAllExpanded"
+                            />
+                        </th>
+                    </tr>
+                    <!-- color picker should display relative to sticky table head -->
+                    <color-picker
+                        v-if="colorPickerShown"
+                        id="color_picker"
+                        class="picker-offset"
+                        :disableAlpha="true"
+                        :value="Object.values(compositeLayerInfo).find((({layerName}) => layerName === colorPickerShown)).palette"
+                        @input="(swatch) => {updateLayerColor(colorPickerShown, swatch)}"
+                    />
+                </thead>
+                <tbody>
+                    <tr
+                        v-for="{
+                            layerName, index, palette,
+                            autoRange, min, max,
+                            framedelta
+                        } in Object.values(compositeLayerInfo)"
+                        :key="layerName"
+                        :class="expandedRows.includes(index) ? 'tall-row' : ''"
+                    >
+                        <td class="enable-col">
+                            <input
+                                type="checkbox"
+                                class="input-80"
+                                :value="layerName"
+                                v-model="enabledLayers"
+                                @change="updateActiveLayers"
+                            >
+                        </td>
+                        <td class="name-col">{{ layerName }}</td>
+                        <td class="color-col">
+                            <span
+                                class="current-color"
+                                :style="{ 'background-color': palette }"
+                                @click="() => toggleColorPicker(layerName)"
+                            />
+                        </td>
+                        <td class="auto-range-col">
+                            <div class="auto-range-toggle">
                                 <label class="switch">
                                     <span
-                                        :class="allAutoRange() ? 'slider checked' : 'slider'"
-                                        @click="() => updateAllAutoRanges(allAutoRange() ? undefined : 0.2)"
+                                        :class="autoRange ? 'slider checked' : 'slider'"
+                                        @click="() => updateLayerAutoRange(layerName, autoRange ? undefined : 0.2)"
                                     />
                                 </label>
                             </div>
-                            <span
-                                v-if="allAutoRange()"
-                                class="percentage-input"
-                            >
-                                <input
-                                    type="number"
-                                    class="input-80"
-                                    :max="50"
-                                    :min="0"
-                                    :value="autoRangeForAll"
-                                    @input="(e) => updateAllAutoRanges(e.target.value)"
-                                >
-                            </span>
-                        </div>
-                        <i
-                            :class="expandedRows.length === layers.length ? 'expand-btn icon-up-open' : 'expand-btn icon-down-open'"
-                            @click="toggleAllExpanded"
-                        />
-                    </th>
-                </tr>
-                <!-- color picker should display relative to sticky table head -->
-                <color-picker
-                    v-if="colorPickerShown"
-                    id="color_picker"
-                    class="picker-offset"
-                    :disableAlpha="true"
-                    :value="Object.values(compositeLayerInfo).find((({layerName}) => layerName === colorPickerShown)).palette"
-                    @input="(swatch) => {updateLayerColor(colorPickerShown, swatch)}"
-                />
-            </thead>
-            <tbody>
-                <tr
-                    v-for="{
-                        layerName, index, palette,
-                        autoRange, min, max,
-                        framedelta
-                    } in Object.values(compositeLayerInfo)"
-                    :key="layerName"
-                    :class="expandedRows.includes(index) ? 'tall-row' : ''"
-                >
-                    <td class="enable-col">
-                        <input
-                            type="checkbox"
-                            class="input-80"
-                            :value="layerName"
-                            v-model="enabledLayers"
-                            @change="updateActiveLayers"
-                        >
-                    </td>
-                    <td class="name-col">{{ layerName }}</td>
-                    <td class="color-col">
-                        <span
-                            class="current-color"
-                            :style="{ 'background-color': palette }"
-                            @click="() => toggleColorPicker(layerName)"
-                        />
-                    </td>
-                    <td class="auto-range-col">
-                        <div class="auto-range-toggle">
-                            <label class="switch">
-                                <span
-                                    :class="autoRange ? 'slider checked' : 'slider'"
-                                    @click="() => updateLayerAutoRange(layerName, autoRange ? undefined : 0.2)"
-                                />
-                            </label>
+                            <i
+                                :class="expandedRows.includes(index) ? 'expand-btn icon-up-open' : 'expand-btn icon-down-open'"
+                                @click="() => toggleExpanded(index)"
+                            />
+                        </td>
+                        <div v-if="expandedRows.includes(index)" class="advanced-section">
+                            <histogram-editor
+                                :itemId="itemId"
+                                :layerIndex="index"
+                                :currentFrame="currentFrame"
+                                :currentFrameHistogram="currentFrameHistogram"
+                                :histogramParams="histogramParams"
+                                :framedelta="framedelta"
+                                :autoRange="autoRange"
+                                :currentMin="min"
+                                :currentMax="max"
+                                @updateMin="(v, d) => updateLayerMin(layerName, v, d)"
+                                @updateMax="(v, d) => updateLayerMax(layerName, v, d)"
+                                @updateAutoRange="(v) => updateLayerAutoRange(layerName, v)"
+                            />
                         </div>
-                        <i
-                            :class="expandedRows.includes(index) ? 'expand-btn icon-up-open' : 'expand-btn icon-down-open'"
-                            @click="() => toggleExpanded(index)"
-                        />
-                    </td>
-                    <div v-if="expandedRows.includes(index)" class="advanced-section">
-                        <histogram-editor
-                            :itemId="itemId"
-                            :layerIndex="index"
-                            :currentFrame="currentFrame"
-                            :currentFrameHistogram="currentFrameHistogram"
-                            :histogramParams="histogramParams"
-                            :framedelta="framedelta"
-                            :autoRange="autoRange"
-                            :currentMin="min"
-                            :currentMax="max"
-                            @updateMin="(v, d) => updateLayerMin(layerName, v, d)"
-                            @updateMax="(v, d) => updateLayerMax(layerName, v, d)"
-                            @updateAutoRange="(v) => updateLayerAutoRange(layerName, v)"
-                        />
-                    </div>
-                </tr>
-            </tbody>
-        </table>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
     </div>
 </template>
 
@@ -456,6 +518,17 @@ export default {
     margin: 30px 0px 0px;
     height: 40px;
 }
+.icon-keyboard {
+    font-size: 2rem;
+}
+.shortcuts {
+    padding-bottom: 10px;
+}
+.monospace {
+    font-family: monospace;
+    background-color: rgba(0, 0, 0, 0.2);
+    padding: 1px;
+}
 </style>
 
 <style>

{girder-large-image-1.23.1.dev44 → girder-large-image-1.23.2.dev6}/girder_large_image/web_client/vue/components/FrameSelector.vue

@@ -212,6 +212,7 @@ export default Vue.extend({
                 :currentFrame="currentFrame"
                 :layers="imageMetadata.channels"
                 :layerMap="imageMetadata.channelmap"
+                :active="currentModeId === 2"
                 :class="currentModeId === 2 ? '' : 'invisible'"
                 @updateStyle="(style) => updateStyle(2, style)"
             />
@@ -222,6 +223,7 @@ export default Vue.extend({
                 :currentFrame="currentFrame"
                 :layers="imageMetadata.bands"
                 :layerMap="undefined"
+                :active="currentModeId === 3"
                 :class="currentModeId === 3 ? '' : 'invisible'"
                 @updateStyle="(style) => updateStyle(3, style)"
             />

{girder-large-image-1.23.1.dev44 → girder-large-image-1.23.2.dev6}/girder_large_image.egg-info/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.1
 Name: girder-large-image
-Version: 1.23.1.dev44
+Version: 1.23.2.dev6
 Summary: A Girder plugin to work with large, multiresolution images.
 Home-page: https://github.com/girder/large_image
 Author: Kitware, Inc.

{girder-large-image-1.23.1.dev44 → girder-large-image-1.23.2.dev6}/girder_large_image.egg-info/requires.txt

@@ -1,10 +1,10 @@
 girder>=3.1.18
 girder-jobs>=3.0.3
-large_image>=1.23.1.dev44
+large_image>=1.23.2.dev6
 
 [:python_version < "3.8"]
 importlib-metadata<5
 
 [tasks]
-large-image-tasks[girder]>=1.23.1.dev44
+large-image-tasks[girder]>=1.23.2.dev6
 girder-worker[girder]>=0.6.0