Filter component languages by project type

elements/noflo-new-component.html

@@ -19,14 +19,9 @@ <h1>Create new component</h1>
         <label>
           Language
           <select name="type" value="{{language::input}}">
-            <option value="coffeescript">CoffeeScript</option>
-            <option value="javascript">JavaScript</option>
-            <option value="es2015">ES2015 (Babel)</option>
-            <option value="c">C</option>
-            <option value="c++">C++</option>
-            <option value="supercollider">SuperCollider</option>
-            <option value="python">Python</option>
-            <option value="yaml">YAML</option>
+            <template is="dom-repeat" items="{{languages}}" as="lang">
+            <option value="[[lang.id]" selected$="[[_languageSelected(lang, language)]]">[[lang.label]]</option>
+            </template>
           </select>
         </label>
         <label>
@@ -51,7 +46,52 @@ <h1>Create new component</h1>
         },
         language: {
           type: String,
-          value: 'coffeescript'
+          value: ''
+        },
+        type: {
+          type: String,
+          value: '',
+          notify: true,
+          observer: 'typeChanged'
+        },
+        languages: {
+          type: Array,
+          value: function () {
+            return [
+              {
+                id: 'c',
+                label: 'C'
+              },
+              {
+                id: 'c++',
+                label: 'C++'
+              },
+              {
+                id: 'coffeescript',
+                label: 'CoffeeScript'
+              },
+              {
+                id: 'es2015',
+                label: 'ES2015 (modern JavaScript)'
+              },
+              {
+                id: 'javascript',
+                label: 'JavaScript'
+              },
+              {
+                id: 'python',
+                label: 'Python'
+              },
+              {
+                id: 'supercollider',
+                label: 'SuperCollider'
+              },
+              {
+                id: 'yaml',
+                label: 'YAML'
+              },
+            ];
+          }
         },
         name: {
           type: String,
@@ -68,8 +108,10 @@ <h1>Create new component</h1>
           notify: true
         },
         project: {
-          type: String,
-          value: '',
+          type: Object,
+          value: function() {
+            return {};
+          },
           notify: true
         }
       },
@@ -80,6 +122,33 @@ <h1>Create new component</h1>
       detached: function () {
         Polymer.dom(document.getElementById('container')).classList.remove('blur');
       },
+      typeChanged: function () {
+        console.log(this.type);
+        if (!this.type) {
+          // No type defined, keep full list
+          return;
+        }
+        var runtimeInfo = require('noflo-ui/runtimeinfo')[this.type];
+        if (!runtimeInfo || !runtimeInfo.componenttemplates) {
+          // We don't know what languages the runtime supports, so keep full list
+          return;
+        }
+
+        // Filter list of languages to the ones supported by the runtime
+        var allLanguages = this.languages;
+        this.languages = allLanguages.filter(function (lang) {
+          if (!runtimeInfo.componenttemplates[lang.id]) {
+            return false;
+          }
+          return true;
+        });
+        if (!this.languages.length) {
+          // Default back to all
+          this.languages = allLanguages;
+        }
+        // Default to first language if runtime has no preference
+        this.language = runtimeInfo.preferredlanguage || this.languages[0].id;
+      },
       nameChanged: function () {
         var duplicates = [];
         if (this.name) {
@@ -141,6 +210,12 @@ <h1>Create new component</h1>
       _computeClass: function (canSend) {
         return this.tokenList({ disabled: !canSend });
       },
+      _languageSelected(lang, selected) {
+        if (lang.id === selected) {
+          return true;
+        }
+        return false;
+      },
       tokenList: function (obj) {
         var pieces = [];
         for (var key in obj) {

elements/noflo-project-inspector.html

@@ -119,19 +119,12 @@ <h1><span>{{project.name}}</span> settings</h1>
         req.send(payload);
       },
       updateProject: function () {
-        this.project.graphs.forEach(function (graph) {
-          if (graph.id === this.main && graph.properties.environment.runtime) {
-            type = graph.properties.environment.runtime;
-            this.set('project.mainGraph', graph);
-          }
-        }.bind(this));
-        var type = this.project.type;
         this.fire('updated', {
           id: this.project.id,
           name: this.name,
           namespace: this.namespace,
           main: this.main,
-          type: type,
+          type: this.project.type,
           repo: this.repo
         });
         this.close();

elements/noflo-project.html

@@ -323,6 +323,11 @@ <h1 title="{{project.repo}}">
         var dialog = document.createElement('noflo-new-graph');
         dialog.project = this.project;
         dialog.runtimes = this.runtimes;
+        if (this.graph && this.graph.properties.environment) {
+          dialog.type = this.graph.properties.environment.type || this.project.type;
+        } else {
+          dialog.type = this.project.type;
+        }
         Polymer.dom(document.body).appendChild(dialog);
         dialog.addEventListener('new', function (event) {
           var graph = event.detail;
@@ -341,6 +346,11 @@ <h1 title="{{project.repo}}">
         }
         var dialog = document.createElement('noflo-new-component');
         dialog.project = this.project;
+        if (this.graph && this.graph.properties.environment) {
+          dialog.type = this.graph.properties.environment.type || this.project.type;
+        } else {
+          dialog.type = this.project.type;
+        }
         Polymer.dom(document.body).appendChild(dialog);
         dialog.addEventListener('new', function (event) {
           var component = event.detail;
@@ -379,6 +389,13 @@ <h1 title="{{project.repo}}">
               this.set('project.branch', 'master');
             }
           }
+          this.project.graphs.forEach(function (graph) {
+            if (graph.properties.id === this.project.main) {
+              type = graph.properties.environment.type;
+              this.set('project.mainGraph', graph);
+              this.set('project.type', type);
+            }
+          }.bind(this));
           // Send only the data we actually want to store
           this.fire('changed', this.project);
         }.bind(this));

runtimeinfo/msgflo.yaml

@@ -4,7 +4,7 @@ runtimetypes:
     icon: cubes
     description: 'Message queue orchestration'
     helpurl: 'https://msgflo.org/docs/usage/'
-
+preferredlanguage: python
 componenttemplates:
   python: |
     #!/usr/bin/env python

runtimeinfo/noflo.yaml

@@ -14,7 +14,7 @@ runtimetypes:
     icon: desktop
     description: 'Build GNOME desktop applications'
     helpurl: 'https://github.com/noflo/noflo-gnome#readme'
-
+preferredlanguage: es2015
 componenttemplates:
   javascript: |
     var noflo = require('noflo');