first draft of jsonview support (partner to dataview)

src/plugin/config.yml

@@ -28,6 +28,17 @@ source:
             module: kb_dataview_easyTree
             file: lib/easyTree
 
+        # JsonView
+        -
+            module: kb_dataview_jsonViewPanel
+            file: jsonViewPanel
+        -
+            module: kb_dataview_widget_jsonView
+            file: widgets/jsonView
+        -
+            module: kb_dataview_widget_jsonViewOverview
+            file: widgets/jsonViewOverview
+
         # Common dataview components
 
         -
@@ -269,6 +280,20 @@ install:
             name: kb_dataview_copy
             type: factory
 
+        # JSON VIEW
+        -
+            module: kb_dataview_jsonViewPanel
+            name: kb_dataview_jsonViewPanel
+            type: factory
+        -
+            module: kb_dataview_widget_jsonView
+            name: kb_dataview_jsonView
+            type: factory
+        -
+            module: kb_dataview_widget_jsonViewOverview
+            name: kb_dataview_jsonViewOverview
+            type: factory
+
         # COMMUNITIES
         -
             module: kb_dataview_dataObjectVisualizer
@@ -493,6 +518,18 @@ install:
                     name: objectVersion
                     optional: true
             widget: kb_dataview_provenancePanel
+        -
+            path:
+                -
+                    jsonview
+                -
+                    name: workspaceId
+                -
+                    name: objectId
+                -
+                    name: objectVersion
+                    optional: true
+            widget: kb_dataview_jsonViewPanel 
     types:
         # COMMUNITIES
         -

src/plugin/modules/jsonViewPanel.js

@@ -0,0 +1,71 @@
+/*global define*/
+/*jslint white:true,browser:true*/
+define([
+    'kb/common/html',
+    'kb/widget/widgetSet',
+    'plugins/dataview/modules/utils'
+], function (html, WidgetSet, utils) {
+    'use strict';
+
+    function factory(config) {
+        var runtime = config.runtime,
+            container,
+            widgetSet = WidgetSet.make({
+                runtime: runtime
+            }),
+            t = html.tag,
+            layout;
+
+        function renderLayout() {
+            var div = t('div');
+            return  div({class: 'container-fluid'}, [
+                div({class: 'row'}, [
+                    div({class: 'col-md-8'}, [
+                        div({id: widgetSet.addWidget('kb_dataview_jsonView')})
+                    ]),
+                    div({class: 'col-md-4'}, [
+                        div({id: widgetSet.addWidget('kb_dataview_jsonViewOverview')})
+                    ])
+                ])
+            ]);
+        }
+
+
+        function init(config) {
+            layout = renderLayout();
+            return widgetSet.init(config);
+        }
+
+        function attach(node) {
+            var div = t('div');
+            container = node;
+            container.innerHTML = layout;
+            return widgetSet.attach(container);
+        }
+
+        function start(params) {
+            return utils.getObject(runtime, params)
+                .then(function (object) {
+                    return widgetSet.start({object: object});
+                });
+        }
+
+        function stop() {
+            container.innerHTML = '';
+            return widgetSet.stop();
+        }
+
+        return {
+            init: init,
+            attach: attach,
+            start: start,
+            stop: stop
+        };
+    }
+
+    return {
+        make: function (config) {
+            return factory(config);
+        }
+    };
+});

src/plugin/modules/widgets/jsonView.js

@@ -0,0 +1,83 @@
+/*global define*/
+/*jslint white:true,browser:true*/
+define([
+    'kb/common/html',
+    'highlight',
+    'numeral'
+], function (html, highlight, numeral) {
+    'use strict';
+
+    function factory(config) {
+        var runtime = config.runtime, container,
+            t = html.tag,
+            div = t('div');
+
+        // from http://stackoverflow.com/questions/1248302/javascript-object-size
+
+
+        function renderJson(object) {
+            var jsString = JSON.stringify(object, true, 4), comment, t = html.tag,
+                p = t('p'), pre = t('pre'), code = t('code'), div = t('div');
+            if (jsString.length > 10000) {
+                comment = p(['Object is too large to display fully (', numeral(jsString.length).format('0.0b'), ') truncated at 10K']);
+                jsString = jsString.substr(0, 1000000);
+            }
+            return div([
+                comment,
+                pre(code(highlight.highlight('json', jsString).value))
+            ]);
+        }
+
+        function renderOverview(data) {
+            return renderJson(data);
+        }
+        function renderProvenance(data) {
+            return renderJson(data);
+        }
+        function renderObject(data) {
+            return renderJson(data);
+        }
+
+        function attach(node) {
+            container = node;
+            container.innerHTML = div({class: 'container-fluid'}, [
+                div({class: 'row'}, [
+                    div({class: 'col-md-12'}, div({class: 'well'}, html.loading('Loading object...')))
+                ])
+            ]);
+
+        }
+        function start(params) {
+
+
+            container.innerHTML = div({class: 'container-fluid'}, [
+                div({class: 'row'}, [
+                    div({class: 'col-md-12'}, [
+                        html.makePanel({
+                            title: 'Overview',
+                            content: renderOverview(params.object.info)
+                        }),
+                        html.makePanel({
+                            title: 'Provenance',
+                            content: renderProvenance(params.object.provenance)
+                        }),
+                        html.makePanel({
+                            title: 'Object',
+                            content: renderObject(params.object.data)
+                        })
+                    ])
+                ])
+            ]);
+        }
+
+        return {
+            attach: attach,
+            start: start
+        };
+    }
+    return {
+        make: function (config) {
+            return factory(config);
+        }
+    };
+});

src/plugin/modules/widgets/jsonViewOverview.js

@@ -0,0 +1,47 @@
+/*global define*/
+/*jslint white:true,browser:true*/
+define([
+    'kb/common/html',
+    'highlight',
+    'numeral'
+], function (html, highlight, numeral) {
+    'use strict';
+
+    function objectRef(object) {
+        return [object.info[6], object.info[0], object.info[4]].join('/');
+    }
+
+    function factory(config) {
+        var runtime = config.runtime, container,
+            t = html.tag,
+            div = t('div'), table = t('table'), tr = t('tr'), td = t('td'), a = t('a');
+
+        function renderOverview(object) {
+            var ref = objectRef(object);
+            return table({class: 'table table-striped'}, [
+                tr([
+                    td('Dataview'), td(a({href: '#dataview/' + ref}, ref))
+                ])
+            ]);
+        }
+
+        function attach(node) {
+            container = node;
+            container.innerHTML = div({class: 'well'}, html.loading('Loading object overview...'));
+
+        }
+        function start(params) {
+            container.innerHTML = div({class: 'well'},renderOverview(params.object));
+        }
+
+        return {
+            attach: attach,
+            start: start
+        };
+    }
+    return {
+        make: function (config) {
+            return factory(config);
+        }
+    };
+});