Add initial version of interactive dataset explorer. Closes #1692

.codeclimate.yml

@@ -39,3 +39,5 @@ exclude_paths:
 - src/visualizers/widgets/PipelineEditor/klay.js
 - src/visualizers/widgets/PlotlyGraph/lib/plotly.min.js
 - src/plugins/GenerateJob/templates/utils.build.js
+- src/visualizers/widgets/TensorPlotter/lib/
+- src/visualizers/widgets/TensorPlotter/styles/simple-grid.min.css

src/visualizers/Visualizers.json

@@ -148,5 +148,17 @@
  "title": "OperationDepEditor",
  "panel": "panels/OperationDepEditor/OperationDepEditorPanel",
  "DEBUG_ONLY": false
+ },
+ {
+ "id": "TensorPlotter",
+ "title": "TensorPlotter",
+ "panel": "panels/TensorPlotter/TensorPlotterPanel",
+ "DEBUG_ONLY": false
+ },
+ {
+ "id": "InteractiveExplorer",
+ "title": "InteractiveExplorer",
+ "panel": "panels/InteractiveExplorer/InteractiveExplorerPanel",
+ "DEBUG_ONLY": false
  }
-]
+]

src/visualizers/panels/TensorPlotter/TensorPlotterControl.js

@@ -0,0 +1,42 @@
+/*globals define */
+/**
+ * Generated by VisualizerGenerator 1.7.0 from webgme on Mon May 04 2020 17:09:31 GMT-0500 (Central Daylight Time).
+ */
+
+define([
+ 'panels/InteractiveExplorer/InteractiveExplorerControl',
+], function (
+ InteractiveExplorerControl,
+) {
+
+ 'use strict';
+
+ class TensorPlotterControl extends InteractiveExplorerControl {
+
+ getObjectDescriptor(nodeId) {
+ const desc = super.getObjectDescriptor(nodeId);
+
+ if (desc) {
+ const node = this.client.getNode(nodeId);
+ desc.data = node.getAttribute('data');
+ desc.type = node.getAttribute('type');
+ }
+
+ return desc;
+ }
+
+ getTerritory(nodeId) {
+ const territory = {};
+ const node = this.client.getNode(nodeId);
+ const parentId = node.getParentId();
+ territory[parentId] = {children: 1};
+
+ const omitParentNode = event => event.eid !== parentId;
+ this.territoryEventFilters = [omitParentNode];
+
+ return territory;
+ }
+ }
+
+ return TensorPlotterControl;
+});

src/visualizers/panels/TensorPlotter/TensorPlotterPanel.js

@@ -0,0 +1,101 @@
+/*globals define, _, WebGMEGlobal*/
+/**
+ * Generated by VisualizerGenerator 1.7.0 from webgme on Mon May 04 2020 17:09:31 GMT-0500 (Central Daylight Time).
+ */
+
+define([
+ 'js/PanelBase/PanelBaseWithHeader',
+ 'js/PanelManager/IActivePanel',
+ 'widgets/TensorPlotter/TensorPlotterWidget',
+ './TensorPlotterControl'
+], function (
+ PanelBaseWithHeader,
+ IActivePanel,
+ TensorPlotterWidget,
+ TensorPlotterControl
+) {
+ 'use strict';
+
+ function TensorPlotterPanel(layoutManager, params) {
+ var options = {};
+ //set properties from options
+ options[PanelBaseWithHeader.OPTIONS.LOGGER_INSTANCE_NAME] = 'TensorPlotterPanel';
+ options[PanelBaseWithHeader.OPTIONS.FLOATING_TITLE] = true;
+
+ //call parent's constructor
+ PanelBaseWithHeader.apply(this, [options, layoutManager]);
+
+ this._client = params.client;
+ this._embedded = params.embedded;
+
+ //initialize UI
+ this._initialize();
+
+ this.logger.debug('ctor finished');
+ }
+
+ //inherit from PanelBaseWithHeader
+ _.extend(TensorPlotterPanel.prototype, PanelBaseWithHeader.prototype);
+ _.extend(TensorPlotterPanel.prototype, IActivePanel.prototype);
+
+ TensorPlotterPanel.prototype._initialize = function () {
+ var self = this;
+
+ //set Widget title
+ this.setTitle('');
+
+ this.widget = new TensorPlotterWidget(this.logger, this.$el);
+
+ this.widget.setTitle = function (title) {
+ self.setTitle(title);
+ };
+
+ this.control = new TensorPlotterControl({
+ logger: this.logger,
+ client: this._client,
+ embedded: this._embedded,
+ widget: this.widget
+ });
+
+ this.onActivate();
+ };
+
+ /* OVERRIDE FROM WIDGET-WITH-HEADER */
+ /* METHOD CALLED WHEN THE WIDGET'S READ-ONLY PROPERTY CHANGES */
+ TensorPlotterPanel.prototype.onReadOnlyChanged = function (isReadOnly) {
+ //apply parent's onReadOnlyChanged
+ PanelBaseWithHeader.prototype.onReadOnlyChanged.call(this, isReadOnly);
+
+ };
+
+ TensorPlotterPanel.prototype.onResize = function (width, height) {
+ this.logger.debug('onResize --> width: ' + width + ', height: ' + height);
+ this.widget.onWidgetContainerResize(width, height);
+ };
+
+ /* * * * * * * * Visualizer life cycle callbacks * * * * * * * */
+ TensorPlotterPanel.prototype.destroy = function () {
+ this.control.destroy();
+ this.widget.destroy();
+
+ PanelBaseWithHeader.prototype.destroy.call(this);
+ WebGMEGlobal.KeyboardManager.setListener(undefined);
+ WebGMEGlobal.Toolbar.refresh();
+ };
+
+ TensorPlotterPanel.prototype.onActivate = function () {
+ this.widget.onActivate();
+ this.control.onActivate();
+ WebGMEGlobal.KeyboardManager.setListener(this.widget);
+ WebGMEGlobal.Toolbar.refresh();
+ };
+
+ TensorPlotterPanel.prototype.onDeactivate = function () {
+ this.widget.onDeactivate();
+ this.control.onDeactivate();
+ WebGMEGlobal.KeyboardManager.setListener(undefined);
+ WebGMEGlobal.Toolbar.refresh();
+ };
+
+ return TensorPlotterPanel;
+});

src/visualizers/widgets/InteractiveEditor/InteractiveEditorWidget.js

@@ -100,6 +100,9 @@ define([
  DeepForge.unregisterAction('Save');
  }
  }
+
+ updateNode(/*desc*/) {
+ }
  }
 
  return InteractiveEditorWidget;

src/visualizers/widgets/TensorPlotter/ArtifactLoader.html

@@ -0,0 +1,6 @@
+<h4>Available Artifacts</h4>
+<ul class="list-group artifacts">
+ <li class="list-group-item">Artifact
+ <span class="glyphicon glyphicon-remove pull-right" aria-hidden="true"></span>
+ </li>
+</ul>

src/visualizers/widgets/TensorPlotter/ArtifactLoader.js

@@ -0,0 +1,137 @@
+/*globals define, $*/
+define([
+ 'deepforge/EventEmitter',
+ 'deepforge/storage/index',
+ 'underscore',
+ 'text!./ArtifactLoader.html',
+ 'css!./styles/ArtifactLoader.css',
+], function(
+ EventEmitter,
+ Storage,
+ _,
+ Html,
+) {
+ class ArtifactLoader extends EventEmitter {
+ constructor(container) {
+ super();
+ this.session = null;
+ this.$el = container;
+ this.$el.addClass('artifact-loader');
+ this.$el.append($(Html));
+ this.$artifacts = this.$el.find('.artifacts');
+ this.artifacts = [];
+ this.render = _.debounce(this.render.bind(this), 250);
+ }
+
+ register(desc) {
+ this.artifacts.push(new Artifact(desc));
+ this.render();
+ }
+
+ unregister(artifactId) {
+ const index = this.artifacts.findIndex(artifact => artifact.id === artifactId);
+ if (index > -1) {
+ this.artifacts.splice(index, 1);
+ this.render();
+ }
+ }
+
+ async load(artifact) {
+ const desc = artifact.data;
+ const dataInfo = JSON.parse(desc.data);
+ const config = await this.getAuthenticationConfig(dataInfo);
+
+ const pyName = desc.name.replace(/\..*$/, '');
+ const loading = this.session.addArtifact(pyName, dataInfo, desc.type, config);
+ artifact.state = ArtifactState.LOADING;
+ this.render();
+ await loading;
+ artifact.state = ArtifactState.LOADED;
+ this.render();
+ this.emit('load', desc);
+ }
+
+ async getAuthenticationConfig (dataInfo) {
+ const {backend} = dataInfo;
+ const metadata = Storage.getStorageMetadata(backend);
+ metadata.configStructure = metadata.configStructure
+ .filter(option => option.isAuth);
+
+ if (metadata.configStructure.length) {
+ const configDialog = this.getConfigDialog();
+ const title = `Authenticate with ${metadata.name}`;
+ const iconClass = `glyphicon glyphicon-download-alt`;
+ const config = await configDialog.show(metadata, {title, iconClass});
+
+ return config[backend];
+ }
+ }
+
+ render() {
+ this.$artifacts.empty();
+ this.artifacts.forEach(artifact => {
+ const $element = artifact.element();
+ if (artifact.state === ArtifactState.NOT_LOADED) {
+ $element.on('click', event => {
+ event.stopPropagation();
+ event.preventDefault();
+ this.load(artifact);
+ });
+ }
+ this.$artifacts.append($element);
+ });
+ }
+ }
+
+ class ArtifactState {
+ constructor(clazz, text, icon) {
+ this.class = clazz || '';
+ this.text = text || '';
+ this.icon = icon || '';
+ }
+
+ configure($element) {
+ if (this.text) {
+ const $state = $('<span>', {class: 'pull-right artifact-state'});
+ $state.text(this.text);
+ $element.append($state);
+ }
+ if (this.class) {
+ $element.addClass(this.class);
+ }
+ if (this.icon) {
+ const $icon = glyph(this.icon);
+ $element.append($icon);
+ }
+ }
+ }
+
+ ArtifactState.LOADING = new ArtifactState('list-group-item-warning', 'Loading...');
+ ArtifactState.NOT_LOADED = new ArtifactState(null, null, 'upload');
+ ArtifactState.LOADED = new ArtifactState('list-group-item-success', 'Available');
+
+ class Artifact {
+ constructor(data) {
+ this.id = data.id;
+ this.data = data;
+ this.state = ArtifactState.NOT_LOADED;
+ }
+
+ element() {
+ const $element = $('<li>', {class: 'list-group-item'});
+ $element.text(this.data.name);
+
+ this.state.configure($element);
+
+ return $element;
+ }
+ }
+
+ function glyph(name) {
+ const $el = $('<span>', {class: `glyphicon glyphicon-${name} pull-right`});
+ $el.attr('aria-hidden', true);
+ return $el;
+ }
+
+ return ArtifactLoader;
+});

src/visualizers/widgets/TensorPlotter/DataEditorBase.js

@@ -0,0 +1,51 @@
+/* globals define, $ */
+define([
+ 'underscore',
+ 'deepforge/EventEmitter',
+], function(
+ _,
+ EventEmitter,
+) {
+
+ class DataEditorBase extends EventEmitter {
+ constructor(html, dataFields, updateOnChange) {
+ super();
+ this.$el = $(html);
+
+ this.$elements = {};
+ dataFields.forEach(name => {
+ this.$elements[name] = this.$el.find(`#${name}`);
+ if (updateOnChange) {
+ this.$elements[name].change(() => this.onUpdate());
+ }
+ });
+ }
+
+ set(values) {
+ Object.entries(this.$elements).map(entry => {
+ const [name, element] = entry;
+ if (values.hasOwnProperty(name)) {
+ element.val(values[name]);
+ }
+ });
+ }
+
+ data() {
+ const entries = Object.entries(this.$elements)
+ .map(entry => {
+ const [name, element] = entry;
+ const value = element.val();
+ return [name, value];
+ })
+ .filter(entry => !!entry[1]);
+ return _.object(entries);
+ }
+
+ onUpdate() {
+ const values = this.data();
+ this.emit('update', values);
+ }
+ }
+
+ return DataEditorBase;
+});

src/visualizers/widgets/TensorPlotter/PlotEditor.html

@@ -0,0 +1,18 @@
+<form>
+ <div class="form-group">
+ <label for="title">Title</label>
+ <input type="text", class="form-control" id="title"/>
+ </div>
+ <div class="form-group">
+ <label for="xaxis">X Axis Label</label>
+ <input type="text", class="form-control" id="xaxis"/>
+ </div>
+ <div class="form-group">
+ <label for="yaxis">Y Axis Label</label>
+ <input type="text", class="form-control" id="yaxis"/>
+ </div>
+ <h4>Plotted Data</h4>
+ <ul class="list-group plotted-data">
+ </ul>
+ <button class="btn btn-primary">Add Data</button>
+</form>