Convert JavaScript files to TypeScript.

Done with minimal changes right now.

TODO: write more

.gitignore

@@ -68,3 +68,6 @@ node_modules/
 
 # jsDoc
 out/
+
+# TypeScript
+typings/

nengo_gui/components/htmlview.py

@@ -39,7 +39,7 @@ def update_client(self, client):
     def javascript(self):
         info = dict(uid=id(self), label=self.label)
         json = self.javascript_config(info)
-        return 'new HTMLView(nengo.main, nengo.viewport, nengo.sim, %s);' % json
+        return 'new HTMLView.default(nengo.main, nengo.viewport, nengo.sim, %s);' % json
 
     def code_python_args(self, uids):
         return [uids[self.obj]]

nengo_gui/components/pointer.py

@@ -87,7 +87,7 @@ def update_client(self, client):
     def javascript(self):
         info = dict(uid=id(self), label=self.label)
         json = self.javascript_config(info)
-        return 'new Pointer(nengo.main, nengo.viewport, nengo.sim, %s);' % json
+        return 'new Pointer.default(nengo.main, nengo.viewport, nengo.sim, %s);' % json
 
     def code_python_args(self, uids):
         return [uids[self.obj], 'target=%r' % self.target]

nengo_gui/components/raster.py

@@ -61,7 +61,7 @@ def javascript(self):
         info = dict(uid=id(self), label=self.label,
                     max_neurons=self.max_neurons)
         json = self.javascript_config(info)
-        return 'new Raster(nengo.main, nengo.viewport, nengo.sim, %s);' % json
+        return 'new Raster.default(nengo.main, nengo.viewport, nengo.sim, %s);' % json
 
     def code_python_args(self, uids):
         return [uids[self.obj.ensemble]]

nengo_gui/components/slider.py

@@ -114,7 +114,7 @@ def javascript(self):
                     label=self.label,
                     start_value=[float(x) for x in self.start_value])
         json = self.javascript_config(info)
-        return 'new Slider(nengo.main, nengo.viewport, nengo.sim, %s);' % json
+        return 'new Slider.default(nengo.main, nengo.viewport, nengo.sim, %s);' % json
 
     def update_client(self, client):
         while len(self.to_client) > 0:

nengo_gui/components/spa_similarity.py

@@ -81,7 +81,7 @@ def javascript(self):
         info = dict(uid=id(self), label=self.label, n_lines=len(self.labels),
                     synapse=0, pointer_labels=self.labels)
         json = self.javascript_config(info)
-        return 'new SpaSimilarity(nengo.main, nengo.viewport, nengo.sim, %s);' % json
+        return 'new SpaSimilarity.default(nengo.main, nengo.viewport, nengo.sim, %s);' % json
 
     def message(self, msg):
         """Message receive function for show_pairs toggling and reset"""

nengo_gui/components/spike_grid.py

@@ -68,7 +68,7 @@ def javascript(self):
         info = dict(uid=id(self), label=self.label,
                     pixels_x=self.pixels_x, pixels_y=self.pixels_y)
         json = self.javascript_config(info)
-        return 'new Image(nengo.main, nengo.viewport, nengo.sim, %s);' % json
+        return 'new Image.default(nengo.main, nengo.viewport, nengo.sim, %s);' % json
 
     def code_python_args(self, uids):
         args = [uids[self.obj]]

nengo_gui/components/value.py

@@ -83,7 +83,7 @@ def javascript(self):
         info = dict(uid=id(self), label=self.label,
                     n_lines=self.n_lines)
         json = self.javascript_config(info)
-        return 'new Value(nengo.main, nengo.viewport, nengo.sim, %s);' % json
+        return 'new Value.default(nengo.main, nengo.viewport, nengo.sim, %s);' % json
 
     def code_python_args(self, uids):
         # generate the list of strings for the .cfg file to save this Component

nengo_gui/components/voltage.py

@@ -56,7 +56,7 @@ def javascript(self):
         info = dict(uid=id(self), label=self.label,
                     n_lines=self.n_neurons, synapse=0)
         json = self.javascript_config(info)
-        return 'new Value(nengo.main, nengo.viewport, nengo.sim, %s);' % json
+        return 'new Value.default(nengo.main, nengo.viewport, nengo.sim, %s);' % json
 
     def code_python_args(self, uids):
         return [uids[self.obj.ensemble]]

nengo_gui/components/xyvalue.py

@@ -46,7 +46,7 @@ def update_client(self, client):
     def javascript(self):
         info = dict(uid=id(self), n_lines=self.n_lines, label=self.label)
         json = self.javascript_config(info)
-        return 'new XYValue(nengo.main, nengo.viewport, nengo.sim, %s);' % json
+        return 'new XYValue.default(nengo.main, nengo.viewport, nengo.sim, %s);' % json
 
     def code_python_args(self, uids):
         return [uids[self.obj]]

nengo_gui/static/components/2d_axes.js → nengo_gui/static/components/2d_axes.ts

@@ -10,9 +10,11 @@
  * @param {float} args.max_value - maximum value on y-axis
  */
 
-var d3 = require('d3');
+import * as d3 from "d3";
 
-var Axes2D = function(parent, args) {
+export default class Axes2D {
+
+constructor(parent, args) {
     var self = this;
 
     this.max_y_width = 100;
@@ -51,8 +53,8 @@ var Axes2D = function(parent, args) {
         .call(this.axis_y);
 };
 
-Axes2D.prototype.set_axes_geometry = function(width, height) {
-    scale = parseFloat($('#main').css('font-size'));
+set_axes_geometry(width, height) {
+    var scale = parseFloat($('#main').css('font-size'));
     this.width = width;
     this.height = height;
     this.ax_left = this.max_y_width;
@@ -67,7 +69,7 @@ Axes2D.prototype.set_axes_geometry = function(width, height) {
 /**
  * Adjust the graph layout due to changed size
  */
-Axes2D.prototype.on_resize = function(width, height) {
+on_resize(width, height) {
     if (width < this.minWidth) {
         width = this.minWidth;
     }
@@ -93,7 +95,7 @@ Axes2D.prototype.on_resize = function(width, height) {
     this.axis_y_g.call(this.axis_y);
 };
 
-Axes2D.prototype.fit_ticks = function(parent) {
+fit_ticks(parent) {
     var self = this;
     setTimeout(function() {
         var ticks = $(parent.div).find('.tick');
@@ -110,4 +112,4 @@ Axes2D.prototype.fit_ticks = function(parent) {
     }, 1);
 };
 
-module.exports = Axes2D;
+}

nengo_gui/static/components/component.js → nengo_gui/static/components/component.ts

@@ -18,19 +18,22 @@
  *
  */
 
-var interact = require('interact.js');
-var menu = require('../menu');
-var utils = require('../utils');
+import * as interact from "interact.js";
 
-var all_components = [];
+import * as menu from "../menu";
+import * as utils from "../utils";
 
-var save_all_components = function() {
+export var all_components = [];
+
+export function save_all_components() {
     for (var index in all_components) {
         all_components[index].save_layout();
     }
 };
 
-var Component = function(parent, viewport, args) {
+export class Component {
+
+constructor(parent, viewport, args) {
     var self = this;
 
     this.viewport = viewport;
@@ -179,14 +182,14 @@ var Component = function(parent, viewport, args) {
 /**
  * Method to be called when Component is resized.
  */
-Component.prototype.on_resize = function(width, height) {};
+on_resize(width, height) {};
 
 /**
  * Method to be called when Component received a WebSocket message.
  */
-Component.prototype.on_message = function(event) {};
+on_message(event) {};
 
-Component.prototype.generate_menu = function() {
+generate_menu() {
     var self = this;
     var items = [];
     if (this.label_visible) {
@@ -204,7 +207,7 @@ Component.prototype.generate_menu = function() {
     return items;
 };
 
-Component.prototype.remove = function(undo_flag, notify_server) {
+remove(undo_flag, notify_server) {
     undo_flag = typeof undo_flag !== 'undefined' ? undo_flag : false;
     notify_server = typeof notify_server !== 'undefined' ? notify_server : true;
 
@@ -227,7 +230,7 @@ Component.prototype.remove = function(undo_flag, notify_server) {
  * how fast update() is called in the case that we are changing the data faster
  * than whatever processing is needed in update().
  */
-Component.prototype.schedule_update = function(event) {
+schedule_update(event) {
     if (this.pending_update == false) {
         this.pending_update = true;
         var self = this;
@@ -242,24 +245,23 @@ Component.prototype.schedule_update = function(event) {
 /**
  * Do any visual updating that is needed due to changes in the underlying data.
  */
-Component.prototype.update = function(event) {
-};
+update(event) {};
 
-Component.prototype.hide_label = function(event) {
+hide_label(event) {
     if (this.label_visible) {
         this.label.style.display = 'none';
         this.label_visible = false;
     }
 };
 
-Component.prototype.show_label = function(event) {
+show_label(event) {
     if (!this.label_visible) {
         this.label.style.display = 'inline';
         this.label_visible = true;
     }
 };
 
-Component.prototype.layout_info = function() {
+layout_info() {
     var info = {};
     info.x = this.x;
     info.y = this.y;
@@ -269,12 +271,12 @@ Component.prototype.layout_info = function() {
     return info;
 };
 
-Component.prototype.save_layout = function() {
+save_layout() {
     var info = this.layout_info();
     this.ws.send('config:' + JSON.stringify(info));
 };
 
-Component.prototype.update_layout = function(config) {
+update_layout(config) {
     this.w = config.width;
     this.h = config.height;
     this.x = config.x;
@@ -291,28 +293,27 @@ Component.prototype.update_layout = function(config) {
     }
 };
 
-Component.prototype.redraw_size = function() {
+redraw_size() {
     this.width = this.viewport.w * this.w * this.viewport.scale * 2;
     this.height = this.viewport.h * this.h * this.viewport.scale * 2;
     this.div.style.width = this.width;
     this.div.style.height = this.height;
 };
 
-Component.prototype.redraw_pos = function() {
+redraw_pos() {
     var x = (this.x + this.viewport.x - this.w) *
         this.viewport.w * this.viewport.scale;
     var y = (this.y + this.viewport.y - this.h) *
         this.viewport.h * this.viewport.scale;
     utils.set_transform(this.div, x, y);
 };
 
-Component.prototype.get_screen_width = function() {
+get_screen_width() {
     return this.viewport.w * this.w * this.viewport.scale * 2;
 };
-Component.prototype.get_screen_height = function() {
+
+get_screen_height() {
     return this.viewport.h * this.h * this.viewport.scale * 2;
 };
 
-module.exports.Component = Component;
-module.exports.all_components = all_components;
-module.exports.save_all_components = save_all_components;
+}

nengo_gui/static/components/htmlview.js → nengo_gui/static/components/htmlview.ts

@@ -8,12 +8,14 @@
  * @param {dict} args - A set of constructor arguments (see Component)
  */
 
-var Component = require('./component').Component;
-var DataStore = require('../datastore').DataStore;
-var utils = require('../utils');
+import { Component } from "./component";
+import { DataStore } from "../datastore";
+import * as utils from "../utils";
 
-var HTMLView = function(parent, viewport, sim, args) {
-    Component.call(this, parent, viewport, args);
+export default class HTMLView extends Component {
+
+constructor(parent, viewport, sim, args) {
+    super(parent, viewport, args);
     var self = this;
 
     this.sim = sim;
@@ -36,13 +38,10 @@ var HTMLView = function(parent, viewport, sim, args) {
     this.on_resize(this.get_screen_width(), this.get_screen_height());
 };
 
-HTMLView.prototype = Object.create(Component.prototype);
-HTMLView.prototype.constructor = HTMLView;
-
 /**
  * Receive new line data from the server
  */
-HTMLView.prototype.on_message = function(event) {
+on_message(event) {
     var data = event.data.split(" ", 1);
     var time = parseFloat(data[0]);
 
@@ -55,7 +54,7 @@ HTMLView.prototype.on_message = function(event) {
 /**
  * Redraw the lines and axis due to changed data
  */
-HTMLView.prototype.update = function() {
+update() {
     // Let the data store clear out old values
     this.data_store.update();
 
@@ -72,7 +71,7 @@ HTMLView.prototype.update = function() {
 /**
  * Adjust the graph layout due to changed size
  */
-HTMLView.prototype.on_resize = function(width, height) {
+on_resize(width, height) {
     if (width < this.minWidth) {
         width = this.minWidth;
     }
@@ -87,4 +86,4 @@ HTMLView.prototype.on_resize = function(width, height) {
     this.update();
 };
 
-module.exports = HTMLView;
+}