api loading logic change

Author: Papakkkarlo

components/controls/VueLoadControl.vue

@@ -7,37 +7,54 @@
  type="string" 
  :readonly="readonly"
  :placeholder="placeholder"
- :value="value" 
- @input="change($event)" 
+ @input="update($event)" 
  @dblclick.stop="" 
  @pointerdown.stop="" 
  @pointermove.stop=""/>
  </div>
  </div>
 </template>
 <script>
+ import { csvParse, text } from 'd3';
+
  export default { 
  props: ['placeholder', 'readonly', 'emitter', 'ikey', 'node', 'getData', 'putData'],
  data() {
  return {
- value: '',
  loading: false
  }
  },
  methods: {
- change(e){
- this.value = e.target.value;
- this.update();
- },
- update() {
- this.loading = true;
- this.putData(this.ikey, this.value);
- this.emitter.nodeId = this.node.id;
- this.emitter.trigger('process');
+ update(e) {
+ let url = e.target.value;
+ if(!(url.endsWith('.csv') || url.endsWith('.json') || url.endsWith('.geojson'))) return;
+ 
+ this.loading = true; 
+ 
+ url = url.startsWith('https') ? url : 'https://' + url;
+ text(url).then(async result=>{
+ const data = url.endsWith('.csv') ? await csvParse(result) : JSON.parse(result);
+ 
+ node.data.name = url.split('/').pop();
+ node.data.data = data;
+
+ this.emitter.nodeId = this.node.id;
+ this.emitter.trigger('process');
+ }).catch(e=>{
+ this.loading = false;
+ });
+
+ // const result = await text(url);
+ // const data = url.endsWith('.csv') ? await csvParse(result) : JSON.parse(result);
+
+ // node.data.name = url.split('/').pop();
+ // node.data.data = data;
+
+ // console.log(node.data.name, node.data.data);
+
+ // this.emitter.nodeId = this.node.id;
+ // this.emitter.trigger('process');
  }
- },
- mounted() {
- this.value = this.getData(this.ikey);
  }
  }
 </script>

language/components.js

@@ -91,7 +91,6 @@ class ColorComponent extends Rete.Component {
  data: inputs.values[0].map(d=> isNaN(d) ? colors[d] : color(d) ),
  value: null
  }
- console.log(outputs.colors.data);
  }
 }
 class ParseComponent extends Rete.Component {
@@ -158,16 +157,6 @@ class DatasetComponent extends Rete.Component {
  data: node.data.data
  };
  }
- if(node.data.url){
- let url = node.data.url;
- if(!(url.endsWith('.csv') || url.endsWith('.json') || url.endsWith('.geojson'))) return;
- url = url.startsWith('https') ? url : 'https://' + url;
- const result = await d3.text(url);
- const data = url.endsWith('.csv') ? await d3.csvParse(result) : JSON.parse(result);
- const name = url.split('/').pop();
-
- data = { name, data };
- }
  if(data){
  if(data.data.type == 'FeatureCollection'){
  (d3.nest()
@@ -686,7 +675,6 @@ class ScatterComponent extends Rete.Component {
  .addInput(new Rete.Input('size','Size', dataSocket));
  }
  worker(node, inputs, outputs){
- console.log(inputs.colors)
  if( inputs.x.length && inputs.y.length ){
  node.data.DATA = inputs.x[0].map((x, i)=> ({
  x: inputs.x[0][i],
@@ -695,7 +683,6 @@ class ScatterComponent extends Rete.Component {
  ...(inputs.size.length ? {size: +inputs.size[0][i]} : {}),
  }));
  }
- 
  this.editor.nodes.find(n=>n.id===node.id).update();
  }
 }