Show and edit yaml and json files using codemirror.

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 ### Improvements
 - Fallback when server notification streams are turned off ([#967](../../pull/967))
+- Show and edit yaml and json files using codemirror ([#969](../../pull/969))
 
 ## 1.17.0
 

girder/girder_large_image/__init__.py

@@ -237,7 +237,7 @@ def handleFinalizeUploadBefore(event):
             # Augment the standard mimetypes with some additional values
             for mimeType, ext, std in [
                 ('text/yaml', '.yaml', True),
-                ('text/yaml', '.yml', False),
+                ('text/yaml', '.yml', True),
             ]:
                 if ext not in mimetypes.types_map:
                     mimetypes.add_type(mimeType, ext, std)

girder/girder_large_image/rest/__init__.py

@@ -140,6 +140,8 @@ def getYAMLConfigFile(self, folder, name):
                     continue
                 with File().open(file) as fptr:
                     config = yaml.safe_load(fptr)
+                    if isinstance(config, list) and len(config) == 1:
+                        config = config[0]
                     # combine and adjust config values based on current user
                     if isinstance(config, dict) and 'access' in config or 'group' in config:
                         config = adjustConfigForUser(config, user)

girder/girder_large_image/web_client/main.js

@@ -6,6 +6,7 @@ import './eventStream';
 import './views/fileList';
 import './views/itemList';
 import './views/itemView';
+import './views/itemViewCodemirror';
 import './views/imageViewerSelectWidget';
 
 // expose symbols under girder.plugins

girder/girder_large_image/web_client/package.json

@@ -15,14 +15,17 @@
         "@girder/core": "*"
     },
     "dependencies": {
+        "codemirror": "^5.65.0",
         "copy-webpack-plugin": "^4.5.2",
         "d3": "^3.5.16",
         "geojs": "^1.8.6",
         "hammerjs": "^2.0.8",
-        "js-yaml": "^3.14.0",
+        "jsonlint-mod": "^1.7.6",
+        "js-yaml": "^4.1.0",
         "sinon": "^2.1.0",
         "slideatlas-viewer": "^4.4.1",
-        "webpack": "^2.7.0"
+        "webpack": "^2.7.0",
+        "yaml": "^2.1.1"
     },
     "main": "./index.js",
     "girderPlugin": {

girder/girder_large_image/web_client/stylesheets/itemViewCodemirror.styl

@@ -0,0 +1,18 @@
+@import "~nib/index.styl"
+
+.g-codemirror-edit-container
+  margin-top 20px
+
+.li-item-view-codemirror
+  .editor
+    position relative
+    height 500px
+    width 100%
+
+.CodeMirror
+  width 100%
+  height 100%
+  border 1px solid grey
+
+.li-item-header-btn-group
+  margin-top -3px

girder/girder_large_image/web_client/templates/itemViewCodemirror.pug

@@ -0,0 +1,13 @@
+.li-item-view-codemirror-header.g-item-info-header
+  if accessLevel >= AccessType.WRITE
+    .li-item-header-btn-group.pull-right
+      button.g-view-codemirror-revert-button.btn.btn-sm.btn-default Revert
+      = ' '
+      button.g-view-codemirror-format-button.btn.btn-sm.btn-default(title='This may remove comments') Format
+      = ' '
+      button.g-view-codemirror-save-button.btn.btn-sm.btn-primary Save
+  i.icon-edit
+  span
+    = ` ${formatName} File Contents`
+.li-item-view-codemirror
+  .editor

girder/girder_large_image/web_client/views/itemViewCodemirror.js

@@ -0,0 +1,168 @@
+import $ from 'jquery';
+import { AccessType } from '@girder/core/constants';
+import events from '@girder/core/events';
+import { restRequest } from '@girder/core/rest';
+import { wrap } from '@girder/core/utilities/PluginUtils';
+import ItemView from '@girder/core/views/body/ItemView';
+import View from '@girder/core/views/View';
+
+/* This should all be refactored for codemirror 6 */
+import jsyaml from 'js-yaml';
+import jsonlint from 'jsonlint-mod';
+import CodeMirror from 'codemirror';
+import 'codemirror/lib/codemirror.css';
+import 'codemirror/addon/lint/lint.css';
+import 'codemirror/addon/fold/foldgutter.css';
+
+import 'codemirror/addon/fold/brace-fold';
+import 'codemirror/addon/fold/foldcode';
+import 'codemirror/addon/fold/foldgutter';
+import 'codemirror/addon/lint/lint';
+import 'codemirror/addon/lint/json-lint';
+import 'codemirror/addon/lint/yaml-lint';
+import 'codemirror/mode/javascript/javascript';
+import 'codemirror/mode/yaml/yaml';
+
+import itemViewCodemirror from '../templates/itemViewCodemirror.pug';
+import '../stylesheets/itemViewCodemirror.styl';
+
+/* codemirror expects linters to be window level objects */
+window.jsonlint = jsonlint;
+window.jsyaml = jsyaml;
+
+const Formats = {
+    'application/json': {
+        name: 'JSON',
+        mode: {
+            name: 'javascript',
+            json: true
+        },
+        validator: JSON.parse,
+        format: (val) => JSON.stringify(val, undefined, 2)
+    },
+    'text/yaml': {
+        name: 'YAML',
+        mode: 'yaml',
+        validator: jsyaml.load,
+        /* This removes comments.  Maybe the yaml package could be used to not
+         * do so, or we could use sort of regex parsing, but both of those are
+         * more work. */
+        format: (val) => jsyaml.dump(val, {lineWidth: -1, noRefs: true})
+    }
+};
+Formats['text/x-yaml'] = Formats['text/yaml'];
+
+var CodemirrorEditWidget = View.extend({
+    events: {
+        'click .g-view-codemirror-revert-button': 'revert',
+        'click .g-view-codemirror-format-button': 'format',
+        'click .g-view-codemirror-save-button': 'save'
+    },
+
+    initialize: function (settings) {
+        this.file = settings.file;
+        this.accessLevel = settings.accessLevel;
+        this.mimeType = settings.mimeType;
+        restRequest({
+            url: `file/${this.file.id}/download`,
+            processData: false,
+            dataType: 'text',
+            error: null
+        }).done((resp) => {
+            this._contents = resp;
+            this._lastSave = this._contents;
+            this.render();
+        });
+    },
+
+    render: function () {
+        this.$el.html(itemViewCodemirror({
+            formatName: Formats[this.mimeType].name,
+            accessLevel: this.accessLevel,
+            AccessType: AccessType
+        }));
+        this.code = CodeMirror(this.$el.find('.editor')[0], {
+            value: this._contents,
+            mode: Formats[this.mimeType].mode,
+            lineNumbers: true,
+            gutters: ['CodeMirror-lint-markers'],
+            lint: true,
+            readOnly: this.accessLevel < AccessType.WRITE
+        });
+        return this;
+    },
+
+    format: function () {
+        let content = this.code.getValue();
+        let validated;
+        try {
+            validated = Formats[this.mimeType].validator(content);
+        } catch (e) {
+            events.trigger('g:alert', {
+                text: 'Contents do not validate. ' + e,
+                type: 'warning'
+            });
+            return;
+        }
+        try {
+            content = Formats[this.mimeType].format(validated);
+        } catch (e) {
+            events.trigger('g:alert', {
+                text: 'Contents do not format. ' + e,
+                type: 'warning'
+            });
+            return;
+        }
+        this.code.setValue(content);
+    },
+
+    revert: function () {
+        this.code.setValue(this._contents);
+    },
+
+    save: function () {
+        const content = this.code.getValue();
+        try {
+            Formats[this.mimeType].validator(content);
+        } catch (e) {
+            events.trigger('g:alert', {
+                text: 'Contents do not validate. ' + e,
+                type: 'warning'
+            });
+            return;
+        }
+        if (content !== this._lastSave) {
+            this.file.updateContents(content);
+            // functional, this just marks the parent item's updated time
+            this.parentView.model._sendMetadata({});
+            this._lastSave = content;
+        }
+    }
+});
+
+wrap(ItemView, 'render', function (render) {
+    this.once('g:rendered', () => {
+        if (this.codemirrorEditWidget) {
+            this.codemirrorEditWidget.remove();
+        }
+        if (this.fileListWidget.collection.models.length !== 1) {
+            return;
+        }
+        const firstFile = this.fileListWidget.collection.models[0];
+        const mimeType = firstFile.get('mimeType');
+        if (!Formats[mimeType] || firstFile.get('size') > 100000) {
+            return;
+        }
+        this.codemirrorEditWidget = new CodemirrorEditWidget({
+            el: $('<div>', {class: 'g-codemirror-edit-container'})
+                .insertAfter(this.$('.g-item-files')),
+            file: firstFile,
+            parentView: this,
+            mimeType: mimeType,
+            accessLevel: this.accessLevel
+        });
+    });
+    return render.call(this);
+});
+
+export default ItemView;

girder/test_girder/test_web_client.py

@@ -26,6 +26,7 @@ def testWebClient(boundServer, fsAssetstore, db, spec, girderWorker):
 @pytest.mark.plugin('large_image')
 @pytest.mark.parametrize('spec', (
     'largeImageSpec.js',
+    'otherFeatures.js',
 ))
 def testWebClientNoWorker(boundServer, fsAssetstore, db, spec):
     spec = os.path.join(os.path.dirname(__file__), 'web_client_specs', spec)

girder/test_girder/web_client_specs/otherFeatures.js

@@ -0,0 +1,76 @@
+/* globals girder, girderTest, describe, it, expect, waitsFor, runs */
+
+girderTest.importPlugin('jobs', 'worker', 'large_image');
+
+girderTest.startApp();
+
+describe('setup', function () {
+    it('mock Webgl', function () {
+        var girder = window.girder;
+        var GeojsViewer = girder.plugins.large_image.views.imageViewerWidget.geojs;
+        girder.utilities.PluginUtils.wrap(GeojsViewer, 'initialize', function (initialize) {
+            this.once('g:beforeFirstRender', function () {
+                window.geo.util.mockWebglRenderer();
+                window.geo.webgl.webglRenderer._maxTextureSize = 256;
+            });
+            initialize.apply(this, _.rest(arguments));
+        });
+    });
+    it('create the admin user', function () {
+        girderTest.createUser(
+            'admin', '[email protected]', 'Admin', 'Admin', 'testpassword')();
+    });
+});
+describe('Test features added by the large image plugin but not directly related to large images', function () {
+    it('go to users page', girderTest.goToUsersPage());
+    it('Go to a user page and then the Public folder', function () {
+        runs(function () {
+            $('a.g-user-link').trigger('click');
+        });
+        waitsFor(function () {
+            return $('button:contains("Actions")').length === 1;
+        }, 'user page to appear');
+        waitsFor(function () {
+            return $('a.g-folder-list-link:contains(Public):visible').length === 1;
+        }, 'the Public folder to be clickable');
+        runs(function () {
+            $('a.g-folder-list-link:contains(Public)').trigger('click');
+        });
+        waitsFor(function () {
+            return $('.g-folder-actions-button:visible').length === 1;
+        }, 'the folder to appear');
+    });
+    it('upload test file', function () {
+        girderTest.waitForLoad();
+        runs(function () {
+            $('.g-folder-list-link:first').click();
+        });
+        girderTest.waitForLoad();
+        runs(function () {
+            girderTest.binaryUpload('${large_image}/../../test/test_files/multi_test_source3.yml');
+        });
+        girderTest.waitForLoad();
+    });
+    it('navigate to item and see if the yaml editor is present', function () {
+        runs(function () {
+            $('a.g-item-list-link').click();
+        });
+        girderTest.waitForLoad();
+        waitsFor(function () {
+            return $('.li-item-view-codemirror>.editor').length;
+        }, 'editor to show');
+        runs(function () {
+            expect($('.li-item-view-codemirror>.editor').length).toBe(1);
+        });
+    });
+    it('test buttons', function () {
+        runs(function () {
+            $('.g-view-codemirror-format-button').click();
+            $('.g-view-codemirror-save-button').click();
+            $('.g-view-codemirror-revert-button').click();
+            $('.g-view-codemirror-save-button').click();
+            $('.g-view-codemirror-save-button').click();
+            expect($('.li-item-view-codemirror>.editor').length).toBe(1);
+        });
+    });
+});