feat(base_component): Use 'file_loader' to load data

src/components/base_component.js

@@ -3,10 +3,39 @@ import jq from '../jq-web.js'
 import { format_value } from '../interpolation.js'
 
 const loaders = {
-  'csv': d3.csv,
-  'tsv': d3.tsv,
-  'text': d3.text,
-  'json': d3.json
+
+  'tsv': (path, callback, file_loader, is_file) => {
+    if (!is_file) {
+      d3.tsv(path, callback)
+    } else {
+      file_loader(path, (_, data) => callback(undefined, d3.tsvParse(data)))
+    }
+  },
+
+  'csv': (path, callback, file_loader, is_file) => {
+    if (!is_file) {
+      d3.csv(path, callback)
+    } else {
+      file_loader(path, (_, data) => callback(undefined, d3.csvParse(data)))
+    }
+  },
+
+  'text': (path, callback, file_loader, is_file) => {
+    if (!is_file) {
+      d3.text(path, callback)
+    } else {
+      file_loader(path, callback)
+    }
+  },
+
+  'json': (path, callback, file_loader, is_file) => {
+    if (!is_file) {
+      d3.json(path, callback)
+    } else {
+      file_loader(path, (_, data) => callback(undefined, JSON.parse(data)))
+    }
+  },
+
 }
 
 const execute_validations = (validators) => (args) =>
@@ -20,9 +49,9 @@ const validate_selection = (selection) => {
 const loader_exists = (loader_name) =>
   loaders[loader_name] !== undefined
 
-const with_loader = (loader_name) => (source) => (callback) => {
+const with_loader = (loader_name, file_loader, is_file) => (source) => (callback) => {
   if (!loader_exists(loader_name)) throw new Error('Invalid loader')
-  loaders[loader_name](source, callback)
+  loaders[loader_name](source, callback, file_loader, is_file)
 }
 
 const create_spinner = (selection) =>
@@ -91,7 +120,7 @@ const handle_external_data = (instance_args, selection, raw_data) =>
   (resolve) =>
     has_loader(instance_args)
       ? load_external_data(raw_data)(
-        with_loader(instance_args.loader),
+        with_loader(instance_args.loader, instance_args.file_loader, instance_args.is_file),
         with_spinner(selection))(
         (_, data) => resolve(data))
       : resolve(raw_data)

src/components/base_component.test.js

@@ -266,7 +266,7 @@ describe('Component', function() {
     const d3 = require('d3')
     const Component = injector({
       '../jq-web.js': jq,
-      'd3': {'json': my_loader, 'selection': d3.selection, 'csv': () => null}
+      'd3': Object.assign({'json': my_loader, 'selection': d3.selection, 'csv': () => null}, args.d3)
     }).default
     const my_render = (args.render_func === undefined )
       ? sinon.spy() : args.render_func
@@ -319,6 +319,90 @@ describe('Component', function() {
     my_loader.should.be.calledWith(data)
   })
 
+  it('loader is called with render args - file loader 1', function() {
+    const data = ['bar']
+    const my_file_loader_return = 42
+    const my_file_loader = (path, callback) => {
+      callback(undefined, my_file_loader_return)
+    }
+    const { my_render } = loader_test({
+      'loader': 'text', data, instance_args: {
+        'is_file': true,
+        'file_loader': my_file_loader
+      }})
+    my_render.should.be.calledWith(sinon.match.any, sinon.match.any, my_file_loader_return, sinon.match.any)
+  })
+
+  it('loader is called with render args - file loader 2', function() {
+    const data = ['bar']
+    const my_file_loader_return = '{"a": 42}'
+    const my_file_loader = (path, callback) => {
+      callback(undefined, my_file_loader_return)
+    }
+    const { my_render } = loader_test({
+      'loader': 'json', data, instance_args: {
+        'is_file': true,
+        'file_loader': my_file_loader
+      }})
+    my_render.should.be.calledWith(sinon.match.any, sinon.match.any, {'a': 42}, sinon.match.any)
+  })
+
+  it('loader is called with render args - file loader 3', function() {
+    const data = ['bar']
+    const my_file_loader_return = (
+      'a,b\n' +
+      '1,2\n'
+    )
+    const my_file_loader = (path, callback) => {
+      callback(undefined, my_file_loader_return)
+    }
+    const { my_render } = loader_test({
+      'loader': 'csv', 
+      'd3': {'csvParse': () => [{'a': 1, 'b': 2}]},
+      data, instance_args: {
+        'is_file': true,
+        'file_loader': my_file_loader,
+      }})
+    my_render.should.be.calledWith(sinon.match.any, sinon.match.any, [
+      {'a': 1, 'b': 2}
+    ], sinon.match.any)
+  })
+
+  it('loader is called with render args - file loader 4', function() {
+    const data = ['bar']
+    const my_file_loader_return = (
+      'a\tb\n' +
+      '1\t2\n'
+    )
+    const my_file_loader = (path, callback) => {
+      callback(undefined, my_file_loader_return)
+    }
+    const { my_render } = loader_test({
+      'loader': 'tsv', 
+      'd3': {'tsvParse': () => [{'a': 1, 'b': 2}]},
+      data, instance_args: {
+        'is_file': true,
+        'file_loader': my_file_loader,
+      }})
+    my_render.should.be.calledWith(sinon.match.any, sinon.match.any, [
+      {'a': 1, 'b': 2}
+    ], sinon.match.any)
+  })
+
+
+  it('loader is called with render args - text', function() {
+    const data = ['bar']
+    const { my_render } = loader_test({
+      'loader': 'text', 
+      'd3': {'text': (_, callback) => callback(undefined, 'Hello World')},
+      data, instance_args: {
+        'is_file': false
+      }})
+    my_render.should.be.calledWith(sinon.match.any, sinon.match.any, 'Hello World', sinon.match.any)
+  })
+
+
+
   it('render is called with fetched data', function() {
     const fetched_value = {'hello': 'world'}
     const { my_render, instance_args, my_selection } = loader_test(