From 4584fa6a3ab35fce1243b1ac8622e0eb4e73d1ad Mon Sep 17 00:00:00 2001 From: Ryan Bailey Date: Thu, 9 Aug 2018 15:50:34 -0400 Subject: [PATCH 01/17] Update LICENSE.md --- LICENSE.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/LICENSE.md b/LICENSE.md index fabc1df..c2a6a9a 100644 --- a/LICENSE.md +++ b/LICENSE.md @@ -1,6 +1,6 @@ MIT License -Copyright (c) 2017 [Rho Inc.](http://www.rhoworld.com) +Copyright (c) 2017-2018 [Rho Inc.](http://www.rhoworld.com) Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: From 9b2cd64a34db3f1297851d402bd06d78cc6a95eb Mon Sep 17 00:00:00 2001 From: jwildfire Date: Fri, 31 Aug 2018 22:27:51 -0700 Subject: [PATCH 02/17] update version --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index f378129..61c3dee 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "webcodebook", - "version": "1.4.2", + "version": "1.5.0", "description": "Interactive data set summaries", "keywords": [ "data", @@ -22,7 +22,7 @@ "webcharts": "^1.10.0" }, "scripts": { - "build": "npm run bundle && npm run format && npm run test-page", + "build": "npm run bundle && npm run format", "bundle": "rollup -c", "format": "npm run format-src && npm run format-bundle", "format-bundle": "prettier --single-quote --write ./build/webcodebook.js", From 82b01156f46bbefdcd0cb1aa9092b265b4b8a566 Mon Sep 17 00:00:00 2001 From: jwildfire Date: Fri, 31 Aug 2018 23:04:25 -0700 Subject: [PATCH 03/17] add file infrastructure. #191 --- build/webcodebook.js | 97 +++++++++++++++++++++++++++++++++++ css/webcodebook.css | 20 ++++++++ src/explorer/initFileLoad.js | 98 ++++++++++++++++++++++++++++++++++++ src/explorer/makeCodebook.js | 2 + 4 files changed, 217 insertions(+) create mode 100644 src/explorer/initFileLoad.js diff --git a/build/webcodebook.js b/build/webcodebook.js index e00dfe9..bf991a8 100644 --- a/build/webcodebook.js +++ b/build/webcodebook.js @@ -4696,6 +4696,102 @@ init: init$15 }; + function initFileLoad() { + //draw the control + var explorer = this; + console.log(this); + explorer.dataFileLoad = {}; + explorer.dataFileLoad.wrap = explorer.codebook.fileListing.wrap + .insert('div', '*') + .attr('class', 'dataLoader') + .style('margin', 0); + explorer.dataFileLoad.top = explorer.dataFileLoad.wrap.append('div'); + explorer.dataFileLoad.bottom = explorer.dataFileLoad.wrap.append('div'); + + explorer.dataFileLoad.top + .append('small') + .text('Add a local .csv file:') + .append('sup') + .html('ⓘ') + .property( + 'title', + 'Create a codebook for a local file. File is added to the data set list, and is only available for a single session and is not saved.' + ) + .style('cursor', 'help'); + + var loadStatus = explorer.dataFileLoad.top + .append('small') + .attr('class', 'loadStatus') + .style('float', 'right') + .text('Select a csv to load'); + + explorer.dataFileLoad.loader = explorer.dataFileLoad.bottom + .append('input') + .attr('type', 'file') + .attr('class', 'file-load-input') + .on('change', function() { + if (this.value.slice(-4).toLowerCase() == '.csv') { + loadStatus + .text(this.files[0].name + ' ready to load') + .style('color', 'green'); + explorer.dataFileLoad.dataFileLoadButton.attr('disabled', null); + } else { + loadStatus + .text(this.files[0].name + ' is not a csv') + .style('color', 'red'); + explorer.dataFileLoad.dataFileLoadButton.attr('disabled', true); + } + }); + + explorer.dataFileLoad.dataFileLoadButton = explorer.dataFileLoad.bottom + .append('button') + .text('Load') + .attr('class', 'file-load-button') + .attr('disabled', true) + .style('float', 'right') + .on('click', function(d) { + //credit to https://jsfiddle.net/Ln37kqc0/ + + var files = explorer.dataFileLoad.loader.node().files; + + if (files.length <= 0) { + //shouldn't happen since button is disabled when no file is present, but ... + console.log('No file selected ...'); + return false; + } + + var fr = new FileReader(); + fr.onload = function(e) { + // get the current date/time + var d = new Date(); + var n = d3.time.format('%X')(d); + + //make an object for the file + var dataObject = { + label: files[0].name + ' (added at ' + n + ')', + user_loaded: true, + csv_raw: e.target.result + }; + console.log(dataObject); + /* + cat.config.dataFiles.push(dataObject); + //add it to the select dropdown + cat.controls.dataFileSelect + .append("option") + .datum(dataObject) + .text(d => d.label) + .attr("selected", true); + //clear the file input & disable the load button + loadStatus.text(files[0].name + " loaded").style("color", "green"); + cat.controls.dataFileLoadButton.attr("disabled", true); + cat.controls.dataFileLoad.property("value", ""); + */ + }; + + fr.readAsText(files.item(0)); + }); + } + function makeCodebook(explorer) { var _this = this; @@ -4739,6 +4835,7 @@ explorer.codebook.on('complete', function() { explorer.fileListing.init(explorer); + initFileLoad.call(explorer); }); if (this.current.json) { diff --git a/css/webcodebook.css b/css/webcodebook.css index 632608a..a9e44b2 100644 --- a/css/webcodebook.css +++ b/css/webcodebook.css @@ -596,6 +596,26 @@ cursor: pointer; } +/*------------------------------------------------------------------------------------------------\ + Data Listing - Data Loader +\------------------------------------------------------------------------------------------------*/ + +.web-codebook .fileListing .dataLoader { + max-width:400px; + border:1px solid #999; + padding:.2em ; +} + + +.web-codebook .fileListing .dataLoader small{ +font-size:0.8em; +} + +.web-codebook .fileListing .dataLoader button{ + padding:0.2em; + border-radius:0.1em +} + /*------------------------------------------------------------------------------------------------\ Chart Maker \------------------------------------------------------------------------------------------------*/ diff --git a/src/explorer/initFileLoad.js b/src/explorer/initFileLoad.js new file mode 100644 index 0000000..44527ac --- /dev/null +++ b/src/explorer/initFileLoad.js @@ -0,0 +1,98 @@ +export function initFileLoad() { + //draw the control + var explorer = this; + console.log(this); + explorer.dataFileLoad = {}; + explorer.dataFileLoad.wrap = explorer.codebook.fileListing.wrap + .insert('div', '*') + .attr('class', 'dataLoader') + .style('margin', 0); + explorer.dataFileLoad.top = explorer.dataFileLoad.wrap.append('div'); + explorer.dataFileLoad.bottom = explorer.dataFileLoad.wrap.append('div'); + + explorer.dataFileLoad.top + .append('small') + .text('Add a local .csv file:') + .append('sup') + .html('ⓘ') + .property( + 'title', + 'Create a codebook for a local file. File is added to the data set list, and is only available for a single session and is not saved.' + ) + .style('cursor', 'help'); + + var loadStatus = explorer.dataFileLoad.top + .append('small') + .attr('class', 'loadStatus') + .style('float', 'right') + .text('Select a csv to load'); + + explorer.dataFileLoad.loader = explorer.dataFileLoad.bottom + .append('input') + .attr('type', 'file') + .attr('class', 'file-load-input') + .on('change', function() { + if (this.value.slice(-4).toLowerCase() == '.csv') { + loadStatus + .text(this.files[0].name + ' ready to load') + .style('color', 'green'); + explorer.dataFileLoad.dataFileLoadButton.attr('disabled', null); + } else { + loadStatus + .text(this.files[0].name + ' is not a csv') + .style('color', 'red'); + explorer.dataFileLoad.dataFileLoadButton.attr('disabled', true); + } + }); + + explorer.dataFileLoad.dataFileLoadButton = explorer.dataFileLoad.bottom + .append('button') + .text('Load File') + .attr('class', 'file-load-button') + .attr('disabled', true) + .style('float', 'right') + .on('click', function(d) { + //credit to https://jsfiddle.net/Ln37kqc0/ + + var files = explorer.dataFileLoad.loader.node().files; + + if (files.length <= 0) { + //shouldn't happen since button is disabled when no file is present, but ... + console.log('No file selected ...'); + return false; + } + + var fr = new FileReader(); + fr.onload = function(e) { + // get the current date/time + var d = new Date(); + var n = d3.time.format('%X')(d); + + //make an object for the file + var dataObject = { + label: files[0].name + ' (added at ' + n + ')', + user_loaded: true, + csv_raw: e.target.result + }; + console.log(dataObject); + /* + cat.config.dataFiles.push(dataObject); + + //add it to the select dropdown + cat.controls.dataFileSelect + .append("option") + .datum(dataObject) + .text(d => d.label) + .attr("selected", true); + + //clear the file input & disable the load button + loadStatus.text(files[0].name + " loaded").style("color", "green"); + + cat.controls.dataFileLoadButton.attr("disabled", true); + cat.controls.dataFileLoad.property("value", ""); + */ + }; + + fr.readAsText(files.item(0)); + }); +} diff --git a/src/explorer/makeCodebook.js b/src/explorer/makeCodebook.js index ffed348..7bdd79c 100644 --- a/src/explorer/makeCodebook.js +++ b/src/explorer/makeCodebook.js @@ -1,5 +1,6 @@ import { csv as d3csv } from 'd3'; import { merge as d3merge } from 'd3'; +import { initFileLoad } from './initFileLoad'; export function makeCodebook(explorer) { explorer.codebookWrap.selectAll('*').remove(); @@ -40,6 +41,7 @@ export function makeCodebook(explorer) { explorer.codebook.on('complete', function() { explorer.fileListing.init(explorer); + initFileLoad.call(explorer); }); if (this.current.json) { From 0c3e9fd2b7392f3e7bf9f149704d8dc49e0af117 Mon Sep 17 00:00:00 2001 From: jwildfire Date: Sat, 1 Sep 2018 06:54:47 -0700 Subject: [PATCH 04/17] Files are loading! fix #191 --- build/webcodebook.js | 71 ++++++++++++++++++------------------ src/createExplorer.js | 4 +- src/explorer/addFile.js | 27 ++++++++++++++ src/explorer/addFiles.js | 15 -------- src/explorer/initFileLoad.js | 26 +++---------- 5 files changed, 70 insertions(+), 73 deletions(-) create mode 100644 src/explorer/addFile.js delete mode 100644 src/explorer/addFiles.js diff --git a/build/webcodebook.js b/build/webcodebook.js index bf991a8..7094a1c 100644 --- a/build/webcodebook.js +++ b/build/webcodebook.js @@ -4696,6 +4696,32 @@ init: init$15 }; + function addFile(label, csv_raw) { + var explorer = this; + + // parse the file object + var newFileObject = {}; + newFileObject[explorer.config.labelColumn] = label; + newFileObject.json = d3.csv.parse(csv_raw); + newFileObject.settings = {}; + + //customize the data object if the user provides a function + if (explorer.config.customFileLoad) { + explorer.config.customFileLoad(newFileObject); + } + + //remove duplicates + // var newFiles = files.filter(function(f) { + // return explorer.config.files.indexOf(f) == -1; + // }); + + //add new files to file list + this.config.files = d3$1.merge([[newFileObject], this.config.files]); + + //re-draw the file listing + explorer.codebook.fileListing.table.draw(this.config.files); + } + function initFileLoad() { //draw the control var explorer = this; @@ -4745,7 +4771,7 @@ explorer.dataFileLoad.dataFileLoadButton = explorer.dataFileLoad.bottom .append('button') - .text('Load') + .text('Load File') .attr('class', 'file-load-button') .attr('disabled', true) .style('float', 'right') @@ -4766,26 +4792,13 @@ var d = new Date(); var n = d3.time.format('%X')(d); - //make an object for the file - var dataObject = { - label: files[0].name + ' (added at ' + n + ')', - user_loaded: true, - csv_raw: e.target.result - }; - console.log(dataObject); - /* - cat.config.dataFiles.push(dataObject); - //add it to the select dropdown - cat.controls.dataFileSelect - .append("option") - .datum(dataObject) - .text(d => d.label) - .attr("selected", true); - //clear the file input & disable the load button - loadStatus.text(files[0].name + " loaded").style("color", "green"); - cat.controls.dataFileLoadButton.attr("disabled", true); - cat.controls.dataFileLoad.property("value", ""); - */ + addFile.call(explorer, files[0].name, e.target.result); + + //clear the file input & disable the load button + loadStatus.text(files[0].name + ' loaded').style('color', 'green'); + + explorer.dataFileLoad.dataFileLoadButton.attr('disabled', true); + explorer.dataFileLoad.loader.property('value', ''); }; fr.readAsText(files.item(0)); @@ -4849,20 +4862,6 @@ } } - function addFiles(files) { - var explorer = this; - //remove duplicates - var newFiles = files.filter(function(f) { - return explorer.config.files.indexOf(f) == -1; - }); - - //add new files to file list - this.config.files = d3$1.merge([this.config.files, newFiles]); - - //re-draw the file listing - explorer.codebook.fileListing.table.draw(this.config.files); - } - function createExplorer() { var element = arguments.length > 0 && arguments[0] !== undefined @@ -4877,7 +4876,7 @@ layout: layout$2, fileListing: fileListing, makeCodebook: makeCodebook, - addFiles: addFiles + addFile: addFile }; return explorer; diff --git a/src/createExplorer.js b/src/createExplorer.js index 9c873ee..e461274 100644 --- a/src/createExplorer.js +++ b/src/createExplorer.js @@ -2,7 +2,7 @@ import { init } from './explorer/init'; import { layout } from './explorer/layout'; import { fileListing } from './explorer/fileListing'; import { makeCodebook } from './explorer/makeCodebook'; -import { addFiles } from './explorer/addFiles'; +import { addFile } from './explorer/addFile'; export function createExplorer(element = 'body', config) { let explorer = { @@ -12,7 +12,7 @@ export function createExplorer(element = 'body', config) { layout: layout, fileListing: fileListing, makeCodebook: makeCodebook, - addFiles: addFiles + addFile: addFile }; return explorer; diff --git a/src/explorer/addFile.js b/src/explorer/addFile.js new file mode 100644 index 0000000..5135b23 --- /dev/null +++ b/src/explorer/addFile.js @@ -0,0 +1,27 @@ +import { merge } from 'd3'; + +export function addFile(label, csv_raw) { + var explorer = this; + + // parse the file object + var newFileObject = {}; + newFileObject[explorer.config.labelColumn] = label; + newFileObject.json = d3.csv.parse(csv_raw); + newFileObject.settings = {}; + + //customize the data object if the user provides a function + if (explorer.config.customFileLoad) { + explorer.config.customFileLoad(newFileObject); + } + + //remove duplicates + // var newFiles = files.filter(function(f) { + // return explorer.config.files.indexOf(f) == -1; + // }); + + //add new files to file list + this.config.files = merge([[newFileObject], this.config.files]); + + //re-draw the file listing + explorer.codebook.fileListing.table.draw(this.config.files); +} diff --git a/src/explorer/addFiles.js b/src/explorer/addFiles.js deleted file mode 100644 index cd8390a..0000000 --- a/src/explorer/addFiles.js +++ /dev/null @@ -1,15 +0,0 @@ -import { merge } from 'd3'; - -export function addFiles(files) { - var explorer = this; - //remove duplicates - var newFiles = files.filter(function(f) { - return explorer.config.files.indexOf(f) == -1; - }); - - //add new files to file list - this.config.files = merge([this.config.files, newFiles]); - - //re-draw the file listing - explorer.codebook.fileListing.table.draw(this.config.files); -} diff --git a/src/explorer/initFileLoad.js b/src/explorer/initFileLoad.js index 44527ac..b323761 100644 --- a/src/explorer/initFileLoad.js +++ b/src/explorer/initFileLoad.js @@ -1,3 +1,5 @@ +import { addFile } from './addFile'; + export function initFileLoad() { //draw the control var explorer = this; @@ -68,29 +70,13 @@ export function initFileLoad() { var d = new Date(); var n = d3.time.format('%X')(d); - //make an object for the file - var dataObject = { - label: files[0].name + ' (added at ' + n + ')', - user_loaded: true, - csv_raw: e.target.result - }; - console.log(dataObject); - /* - cat.config.dataFiles.push(dataObject); - - //add it to the select dropdown - cat.controls.dataFileSelect - .append("option") - .datum(dataObject) - .text(d => d.label) - .attr("selected", true); + addFile.call(explorer, files[0].name, e.target.result); //clear the file input & disable the load button - loadStatus.text(files[0].name + " loaded").style("color", "green"); + loadStatus.text(files[0].name + ' loaded').style('color', 'green'); - cat.controls.dataFileLoadButton.attr("disabled", true); - cat.controls.dataFileLoad.property("value", ""); - */ + explorer.dataFileLoad.dataFileLoadButton.attr('disabled', true); + explorer.dataFileLoad.loader.property('value', ''); }; fr.readAsText(files.item(0)); From b0aa3440c501a6391ddcef8d8de73adb8549c029 Mon Sep 17 00:00:00 2001 From: jwildfire Date: Thu, 6 Sep 2018 11:43:20 -0700 Subject: [PATCH 05/17] nicer formatting. fix #293 --- build/webcodebook.js | 115 ++++++++++++++++------------------- css/webcodebook.css | 28 ++++++--- src/explorer/initFileLoad.js | 112 ++++++++++++++++------------------ 3 files changed, 128 insertions(+), 127 deletions(-) diff --git a/build/webcodebook.js b/build/webcodebook.js index 7094a1c..daa10c6 100644 --- a/build/webcodebook.js +++ b/build/webcodebook.js @@ -4727,82 +4727,75 @@ var explorer = this; console.log(this); explorer.dataFileLoad = {}; - explorer.dataFileLoad.wrap = explorer.codebook.fileListing.wrap - .insert('div', '*') - .attr('class', 'dataLoader') - .style('margin', 0); - explorer.dataFileLoad.top = explorer.dataFileLoad.wrap.append('div'); - explorer.dataFileLoad.bottom = explorer.dataFileLoad.wrap.append('div'); - - explorer.dataFileLoad.top - .append('small') - .text('Add a local .csv file:') - .append('sup') - .html('ⓘ') - .property( - 'title', - 'Create a codebook for a local file. File is added to the data set list, and is only available for a single session and is not saved.' - ) - .style('cursor', 'help'); + explorer.dataFileLoad.wrap = explorer.codebook.instructions.wrap + .append('span') + .attr('class', 'dataLoader'); - var loadStatus = explorer.dataFileLoad.top - .append('small') - .attr('class', 'loadStatus') - .style('float', 'right') - .text('Select a csv to load'); + explorer.dataFileLoad.wrap.append('span').text(' Load a csv: '); - explorer.dataFileLoad.loader = explorer.dataFileLoad.bottom + explorer.dataFileLoad.loader_wrap = explorer.dataFileLoad.wrap + .append('label') + .attr('class', 'file-load-label'); + + explorer.dataFileLoad.loader_label = explorer.dataFileLoad.loader_wrap + .append('span') + .text('Choose a File'); + + explorer.dataFileLoad.loader_input = explorer.dataFileLoad.loader_wrap .append('input') .attr('type', 'file') .attr('class', 'file-load-input') .on('change', function() { + var files = this.files; + explorer.dataFileLoad.loader_label.text(files[0].name); + if (this.value.slice(-4).toLowerCase() == '.csv') { - loadStatus - .text(this.files[0].name + ' ready to load') - .style('color', 'green'); - explorer.dataFileLoad.dataFileLoadButton.attr('disabled', null); + loadStatus.text(' loading ...').style('color', 'green'); + var fr = new FileReader(); + fr.onload = function(e) { + // get the current date/time + var d = new Date(); + var n = d3.time.format('%X')(d); + + addFile.call(explorer, files[0].name, e.target.result); + + //clear the file input + loadStatus.text('Loaded.').style('color', 'green'); + explorer.dataFileLoad.loader_input.property('value', ''); + }; + + fr.readAsText(files.item(0)); } else { loadStatus - .text(this.files[0].name + ' is not a csv') + .text("Can't Load. File is not a csv.") .style('color', 'red'); - explorer.dataFileLoad.dataFileLoadButton.attr('disabled', true); } }); - explorer.dataFileLoad.dataFileLoadButton = explorer.dataFileLoad.bottom - .append('button') - .text('Load File') - .attr('class', 'file-load-button') - .attr('disabled', true) - .style('float', 'right') - .on('click', function(d) { - //credit to https://jsfiddle.net/Ln37kqc0/ - - var files = explorer.dataFileLoad.loader.node().files; - - if (files.length <= 0) { - //shouldn't happen since button is disabled when no file is present, but ... - console.log('No file selected ...'); - return false; - } - - var fr = new FileReader(); - fr.onload = function(e) { - // get the current date/time - var d = new Date(); - var n = d3.time.format('%X')(d); - - addFile.call(explorer, files[0].name, e.target.result); - - //clear the file input & disable the load button - loadStatus.text(files[0].name + ' loaded').style('color', 'green'); + var loadStatus = explorer.dataFileLoad.wrap + .append('span') + .attr('class', 'loadStatus') + .text(''); - explorer.dataFileLoad.dataFileLoadButton.attr('disabled', true); - explorer.dataFileLoad.loader.property('value', ''); - }; + loadStatus + .append('sup') + .html('ⓘ') + .property( + 'title', + 'Create a codebook for a local file. File is added to the data set list, and is only available for a single session and is not saved.' + ) + .style('cursor', 'help'); - fr.readAsText(files.item(0)); - }); + /* + explorer.dataFileLoad.dataFileLoadButton.on('click', function(d) { + //credit to https://jsfiddle.net/Ln37kqc0/ + var files = explorer.dataFileLoad.loader.node().files; + if (files.length <= 0) { + //shouldn't happen since button is disabled when no file is present, but ... + console.log('No file selected ...'); + return false; + } + }); */ } function makeCodebook(explorer) { diff --git a/css/webcodebook.css b/css/webcodebook.css index a9e44b2..c5e1f15 100644 --- a/css/webcodebook.css +++ b/css/webcodebook.css @@ -600,18 +600,32 @@ Data Listing - Data Loader \------------------------------------------------------------------------------------------------*/ -.web-codebook .fileListing .dataLoader { - max-width:400px; - border:1px solid #999; - padding:.2em ; +.web-codebook .instructions .dataLoader label{ + font-size:0.8em; + font-weight: 0; + border-bottom:1px solid black; + display: inline-block; + padding:0.1em; + cursor:pointer; + padding-right:0.5em; + } + + .web-codebook .instructions .dataLoader label:hover { + background-color: #ccc; + + } + + +.web-codebook .instructions .dataLoader label input{ + display:none; } -.web-codebook .fileListing .dataLoader small{ -font-size:0.8em; +.web-codebook .instructions .dataLoader small{ + } -.web-codebook .fileListing .dataLoader button{ +.web-codebook .instructions .dataLoader button{ padding:0.2em; border-radius:0.1em } diff --git a/src/explorer/initFileLoad.js b/src/explorer/initFileLoad.js index b323761..6ee19f9 100644 --- a/src/explorer/initFileLoad.js +++ b/src/explorer/initFileLoad.js @@ -5,80 +5,74 @@ export function initFileLoad() { var explorer = this; console.log(this); explorer.dataFileLoad = {}; - explorer.dataFileLoad.wrap = explorer.codebook.fileListing.wrap - .insert('div', '*') - .attr('class', 'dataLoader') - .style('margin', 0); - explorer.dataFileLoad.top = explorer.dataFileLoad.wrap.append('div'); - explorer.dataFileLoad.bottom = explorer.dataFileLoad.wrap.append('div'); + explorer.dataFileLoad.wrap = explorer.codebook.instructions.wrap + .append('span') + .attr('class', 'dataLoader'); - explorer.dataFileLoad.top - .append('small') - .text('Add a local .csv file:') - .append('sup') - .html('ⓘ') - .property( - 'title', - 'Create a codebook for a local file. File is added to the data set list, and is only available for a single session and is not saved.' - ) - .style('cursor', 'help'); + explorer.dataFileLoad.wrap.append('span').text(' Load a csv: '); - var loadStatus = explorer.dataFileLoad.top - .append('small') - .attr('class', 'loadStatus') - .style('float', 'right') - .text('Select a csv to load'); + explorer.dataFileLoad.loader_wrap = explorer.dataFileLoad.wrap + .append('label') + .attr('class', 'file-load-label'); + + explorer.dataFileLoad.loader_label = explorer.dataFileLoad.loader_wrap + .append('span') + .text('Choose a File'); - explorer.dataFileLoad.loader = explorer.dataFileLoad.bottom + explorer.dataFileLoad.loader_input = explorer.dataFileLoad.loader_wrap .append('input') .attr('type', 'file') .attr('class', 'file-load-input') .on('change', function() { + var files = this.files; + explorer.dataFileLoad.loader_label.text(files[0].name); + if (this.value.slice(-4).toLowerCase() == '.csv') { - loadStatus - .text(this.files[0].name + ' ready to load') - .style('color', 'green'); - explorer.dataFileLoad.dataFileLoadButton.attr('disabled', null); - } else { - loadStatus - .text(this.files[0].name + ' is not a csv') - .style('color', 'red'); - explorer.dataFileLoad.dataFileLoadButton.attr('disabled', true); - } - }); + loadStatus.text(' loading ...').style('color', 'green'); + var fr = new FileReader(); + fr.onload = function(e) { + // get the current date/time + var d = new Date(); + var n = d3.time.format('%X')(d); - explorer.dataFileLoad.dataFileLoadButton = explorer.dataFileLoad.bottom - .append('button') - .text('Load File') - .attr('class', 'file-load-button') - .attr('disabled', true) - .style('float', 'right') - .on('click', function(d) { - //credit to https://jsfiddle.net/Ln37kqc0/ + addFile.call(explorer, files[0].name, e.target.result); - var files = explorer.dataFileLoad.loader.node().files; + //clear the file input + loadStatus.text('Loaded.').style('color', 'green'); + explorer.dataFileLoad.loader_input.property('value', ''); + }; - if (files.length <= 0) { - //shouldn't happen since button is disabled when no file is present, but ... - console.log('No file selected ...'); - return false; + fr.readAsText(files.item(0)); + } else { + loadStatus.text("Can't Load. File is not a csv.").style('color', 'red'); } + }); + + var loadStatus = explorer.dataFileLoad.wrap + .append('span') + .attr('class', 'loadStatus') + .text(''); - var fr = new FileReader(); - fr.onload = function(e) { - // get the current date/time - var d = new Date(); - var n = d3.time.format('%X')(d); + loadStatus + .append('sup') + .html('ⓘ') + .property( + 'title', + 'Create a codebook for a local file. File is added to the data set list, and is only available for a single session and is not saved.' + ) + .style('cursor', 'help'); - addFile.call(explorer, files[0].name, e.target.result); + /* + explorer.dataFileLoad.dataFileLoadButton.on('click', function(d) { + //credit to https://jsfiddle.net/Ln37kqc0/ - //clear the file input & disable the load button - loadStatus.text(files[0].name + ' loaded').style('color', 'green'); + var files = explorer.dataFileLoad.loader.node().files; - explorer.dataFileLoad.dataFileLoadButton.attr('disabled', true); - explorer.dataFileLoad.loader.property('value', ''); - }; + if (files.length <= 0) { + //shouldn't happen since button is disabled when no file is present, but ... + console.log('No file selected ...'); + return false; + } - fr.readAsText(files.item(0)); - }); + }); */ } From c3ff56e8f86e8227284f21a34e283c5add806626 Mon Sep 17 00:00:00 2001 From: jwildfire Date: Thu, 6 Sep 2018 11:53:07 -0700 Subject: [PATCH 06/17] add explorer.config.fileLoader option. fix #290 --- build/test-page/explorer.js | 3 ++- build/webcodebook.js | 19 +++++-------------- src/explorer/defaultSettings.js | 3 ++- src/explorer/initFileLoad.js | 15 --------------- src/explorer/makeCodebook.js | 4 +++- 5 files changed, 12 insertions(+), 32 deletions(-) diff --git a/build/test-page/explorer.js b/build/test-page/explorer.js index 0d39cf2..11b15fa 100644 --- a/build/test-page/explorer.js +++ b/build/test-page/explorer.js @@ -52,7 +52,8 @@ document.onreadystatechange = function () { labelColumn:"filename", ignoredColumns: ["local_path","rel_path","path"], files:fileList_clean, - meta:meta + meta:meta, + fileLoader:true }; console.log(settings) var explorer = webcodebook.createExplorer("#container", settings).init(); diff --git a/build/webcodebook.js b/build/webcodebook.js index daa10c6..fc1d597 100644 --- a/build/webcodebook.js +++ b/build/webcodebook.js @@ -4564,7 +4564,8 @@ searchable: false, pagination: false, exportable: false - } + }, + fileLoader: false }; function setDefaults$1(explorer) { @@ -4725,7 +4726,6 @@ function initFileLoad() { //draw the control var explorer = this; - console.log(this); explorer.dataFileLoad = {}; explorer.dataFileLoad.wrap = explorer.codebook.instructions.wrap .append('span') @@ -4785,17 +4785,6 @@ 'Create a codebook for a local file. File is added to the data set list, and is only available for a single session and is not saved.' ) .style('cursor', 'help'); - - /* - explorer.dataFileLoad.dataFileLoadButton.on('click', function(d) { - //credit to https://jsfiddle.net/Ln37kqc0/ - var files = explorer.dataFileLoad.loader.node().files; - if (files.length <= 0) { - //shouldn't happen since button is disabled when no file is present, but ... - console.log('No file selected ...'); - return false; - } - }); */ } function makeCodebook(explorer) { @@ -4841,7 +4830,9 @@ explorer.codebook.on('complete', function() { explorer.fileListing.init(explorer); - initFileLoad.call(explorer); + if (explorer.config.fileLoader) { + initFileLoad.call(explorer); + } }); if (this.current.json) { diff --git a/src/explorer/defaultSettings.js b/src/explorer/defaultSettings.js index 83b5acb..77851bd 100644 --- a/src/explorer/defaultSettings.js +++ b/src/explorer/defaultSettings.js @@ -6,7 +6,8 @@ const defaultSettings = { searchable: false, pagination: false, exportable: false - } + }, + fileLoader: false }; export default defaultSettings; diff --git a/src/explorer/initFileLoad.js b/src/explorer/initFileLoad.js index 6ee19f9..70bb5ef 100644 --- a/src/explorer/initFileLoad.js +++ b/src/explorer/initFileLoad.js @@ -3,7 +3,6 @@ import { addFile } from './addFile'; export function initFileLoad() { //draw the control var explorer = this; - console.log(this); explorer.dataFileLoad = {}; explorer.dataFileLoad.wrap = explorer.codebook.instructions.wrap .append('span') @@ -61,18 +60,4 @@ export function initFileLoad() { 'Create a codebook for a local file. File is added to the data set list, and is only available for a single session and is not saved.' ) .style('cursor', 'help'); - - /* - explorer.dataFileLoad.dataFileLoadButton.on('click', function(d) { - //credit to https://jsfiddle.net/Ln37kqc0/ - - var files = explorer.dataFileLoad.loader.node().files; - - if (files.length <= 0) { - //shouldn't happen since button is disabled when no file is present, but ... - console.log('No file selected ...'); - return false; - } - - }); */ } diff --git a/src/explorer/makeCodebook.js b/src/explorer/makeCodebook.js index 7bdd79c..5e71470 100644 --- a/src/explorer/makeCodebook.js +++ b/src/explorer/makeCodebook.js @@ -41,7 +41,9 @@ export function makeCodebook(explorer) { explorer.codebook.on('complete', function() { explorer.fileListing.init(explorer); - initFileLoad.call(explorer); + if (explorer.config.fileLoader) { + initFileLoad.call(explorer); + } }); if (this.current.json) { From a9166d95968ac69b232328dcc9cca2e0cb3e8386 Mon Sep 17 00:00:00 2001 From: jwildfire Date: Thu, 6 Sep 2018 12:06:02 -0700 Subject: [PATCH 07/17] restructure test pages. fix #297 --- build/test-page/explorer-local.html | 24 ---------- build/test-page/index.js | 50 -------------------- package.json | 2 +- {build/test-page => test-page}/explorer.html | 4 +- {build/test-page => test-page}/explorer.js | 28 ----------- {build/test-page => test-page}/index.css | 0 {build/test-page => test-page}/index.html | 8 ++-- test-page/index.js | 27 +++++++++++ {build/test-page => test-page}/local.html | 0 9 files changed, 34 insertions(+), 109 deletions(-) delete mode 100644 build/test-page/explorer-local.html delete mode 100644 build/test-page/index.js rename {build/test-page => test-page}/explorer.html (78%) rename {build/test-page => test-page}/explorer.js (56%) rename {build/test-page => test-page}/index.css (100%) rename {build/test-page => test-page}/index.html (64%) create mode 100644 test-page/index.js rename {build/test-page => test-page}/local.html (100%) diff --git a/build/test-page/explorer-local.html b/build/test-page/explorer-local.html deleted file mode 100644 index ff34f19..0000000 --- a/build/test-page/explorer-local.html +++ /dev/null @@ -1,24 +0,0 @@ - - - - Web Codebook - - - - - - - - - - - - - -
Web Codebook - Explorer
-
Test Page
-
- - - - diff --git a/build/test-page/index.js b/build/test-page/index.js deleted file mode 100644 index a11e378..0000000 --- a/build/test-page/index.js +++ /dev/null @@ -1,50 +0,0 @@ -document.onreadystatechange = function () { - if (document.readyState === 'complete') { - //Load local build if in local environment. - if (window.origin !== 'https://rhoinc.github.io') { - var head = document.getElementsByTagName('head')[0]; - - //...load local build. - var script = document.createElement('script'); - script.type = 'text/javascript'; - script.src = '../webcodebook.js'; - head.appendChild(script); - - //...load local stylesheet. - for (var i = 0; i < document.styleSheets.length; i++) { - var styleSheet = document.styleSheets[i]; - if (styleSheet.href.indexOf('webcodebook') > -1) - styleSheet.disabled = true; - } - var link = document.createElement('link'); - link.type = 'text/css'; - link.rel = 'stylesheet'; - link.href = '../../css/webcodebook.css'; - head.appendChild(link); head.appendChild(script); - } - - d3.csv( - 'https://rawgit.com/RhoInc/viz-library/master/data/testData/ADTIMELINES_partialMissing.csv', - function(error,data) { - if (error) - console.log(error); - - var settings = { - // chartVisibility: 'hidden', - meta:[ - { - value_col:"USUBJID", - label:"Subject ID", - description: "Unique Identifier" - } - ] - }; - var instance = webcodebook.createCodebook( - '#container', - settings - ); - instance.init(data); - } - ); - }; -} diff --git a/package.json b/package.json index 61c3dee..a025da8 100644 --- a/package.json +++ b/package.json @@ -27,7 +27,7 @@ "format": "npm run format-src && npm run format-bundle", "format-bundle": "prettier --single-quote --write ./build/webcodebook.js", "format-src": "prettier --single-quote --write \"./src/**/*.js\"", - "test-page": "start chrome ./build/test-page/index.html && start firefox ./build/test-page/index.html && start iexplore file://%CD%/build/test-page/index.html", + "test-page": "start chrome ./test-page/index.html && start firefox ./test-page/index.html && start iexplore file://%CD%/test-page/index.html", "watch": "rollup -c -w" }, "devDependencies": { diff --git a/build/test-page/explorer.html b/test-page/explorer.html similarity index 78% rename from build/test-page/explorer.html rename to test-page/explorer.html index d5b3b63..7558e07 100644 --- a/build/test-page/explorer.html +++ b/test-page/explorer.html @@ -6,11 +6,11 @@ - + - + diff --git a/build/test-page/explorer.js b/test-page/explorer.js similarity index 56% rename from build/test-page/explorer.js rename to test-page/explorer.js index 11b15fa..bb39d8a 100644 --- a/build/test-page/explorer.js +++ b/test-page/explorer.js @@ -1,36 +1,10 @@ document.onreadystatechange = function () { - if (document.readyState === 'complete') { - //Load local build if in local environment. - if (window.origin !== 'https://rhoinc.github.io') { - var head = document.getElementsByTagName('head')[0]; - - //...load local build. - var script = document.createElement('script'); - script.type = 'text/javascript'; - script.src = '../webcodebook.js'; - head.appendChild(script); - - //...load local stylesheet. - for (var i = 0; i < document.styleSheets.length; i++) { - var styleSheet = document.styleSheets[i]; - if (styleSheet.href.indexOf('webcodebook') > -1) - styleSheet.disabled = true; - } - var link = document.createElement('link'); - link.type = 'text/css'; - link.rel = 'stylesheet'; - link.href = '../../css/webcodebook.css'; - head.appendChild(link); - } - function initExplorer(fileList){ - // console.log(fileList) var metaFiles = ["AE","DM","LB"] //list of files to add meta data d3.csv("https://rawgit.com/RhoInc/viz-library/master/data/safetyData/variableMetaData.csv",function(error,meta){ meta.forEach(function(f){ f.file = f.Form+".csv" f.label = f.Label - // console.log(f) }) var fileList_clean = fileList.map(function(f){ f.path = "https://rawgit.com/RhoInc/viz-library/master"+f.rel_path.slice(1); @@ -55,12 +29,10 @@ document.onreadystatechange = function () { meta:meta, fileLoader:true }; - console.log(settings) var explorer = webcodebook.createExplorer("#container", settings).init(); }) } initExplorer(dataFiles) - } } diff --git a/build/test-page/index.css b/test-page/index.css similarity index 100% rename from build/test-page/index.css rename to test-page/index.css diff --git a/build/test-page/index.html b/test-page/index.html similarity index 64% rename from build/test-page/index.html rename to test-page/index.html index 91472b1..ad2a7e3 100644 --- a/build/test-page/index.html +++ b/test-page/index.html @@ -5,11 +5,11 @@ - - + + - - + + diff --git a/test-page/index.js b/test-page/index.js new file mode 100644 index 0000000..82adc55 --- /dev/null +++ b/test-page/index.js @@ -0,0 +1,27 @@ +document.onreadystatechange = function () { + if (document.readyState === 'complete') { + d3.csv( + 'https://rawgit.com/RhoInc/viz-library/master/data/testData/ADTIMELINES_partialMissing.csv', + function(error,data) { + if (error) + console.log(error); + + var settings = { + // chartVisibility: 'hidden', + meta:[ + { + value_col:"USUBJID", + label:"Subject ID", + description: "Unique Identifier" + } + ] + }; + var instance = webcodebook.createCodebook( + '#container', + settings + ); + instance.init(data); + } + ); + }; +} diff --git a/build/test-page/local.html b/test-page/local.html similarity index 100% rename from build/test-page/local.html rename to test-page/local.html From e00282c02ae3a8e40122c6193afa5b1cbaf795f2 Mon Sep 17 00:00:00 2001 From: jwildfire Date: Thu, 6 Sep 2018 12:49:10 -0700 Subject: [PATCH 08/17] add explorer.config.fileID system var. fix #283 --- build/webcodebook.js | 14 ++++++++------ src/explorer/addFile.js | 1 + src/explorer/fileListing/init.js | 5 ++++- src/explorer/fileListing/onDraw.js | 6 +----- src/explorer/setDefaults.js | 3 ++- test-page/explorer.js | 4 ++-- 6 files changed, 18 insertions(+), 15 deletions(-) diff --git a/build/webcodebook.js b/build/webcodebook.js index fc1d597..fa43c1e 100644 --- a/build/webcodebook.js +++ b/build/webcodebook.js @@ -4585,8 +4585,9 @@ explorer.config.tableConfig || defaultSettings$3.tableConfig; /********************* files[].settings ***************/ - explorer.config.files.forEach(function(f) { + explorer.config.files.forEach(function(f, i) { f.settings = f.settings || {}; + f.fileID = i; }); } @@ -4629,10 +4630,7 @@ .select('tbody') .selectAll('tr') .filter(function(f) { - return ( - f[explorer.config.labelColumn] === - explorer.current[explorer.config.labelColumn] - ); + return f.fileID === explorer.current.fileID; }) .classed('selected', true); @@ -4667,7 +4665,9 @@ return explorer.config.ignoredColumns.indexOf(f) == -1; }) .filter(function(f) { - return ['settings', 'selected', 'event', 'json'].indexOf(f) == -1; + return ( + ['fileID', 'settings', 'selected', 'event', 'json'].indexOf(f) == -1 + ); }); //drop system variables from table //Create the table @@ -4680,6 +4680,7 @@ explorer.config.files.forEach(function(d) { return (d.selected = d == explorer.current); }); + console.log(explorer); var sortedFiles = explorer.config.files.sort(function(a, b) { return a.selected ? -1 : b.selected ? 1 : 0; }); @@ -4705,6 +4706,7 @@ newFileObject[explorer.config.labelColumn] = label; newFileObject.json = d3.csv.parse(csv_raw); newFileObject.settings = {}; + newFileObject.fileID = explorer.config.files.length + 1; //customize the data object if the user provides a function if (explorer.config.customFileLoad) { diff --git a/src/explorer/addFile.js b/src/explorer/addFile.js index 5135b23..92c5773 100644 --- a/src/explorer/addFile.js +++ b/src/explorer/addFile.js @@ -8,6 +8,7 @@ export function addFile(label, csv_raw) { newFileObject[explorer.config.labelColumn] = label; newFileObject.json = d3.csv.parse(csv_raw); newFileObject.settings = {}; + newFileObject.fileID = explorer.config.files.length + 1; //customize the data object if the user provides a function if (explorer.config.customFileLoad) { diff --git a/src/explorer/fileListing/init.js b/src/explorer/fileListing/init.js index 4fb95f0..239d60b 100644 --- a/src/explorer/fileListing/init.js +++ b/src/explorer/fileListing/init.js @@ -12,7 +12,9 @@ export function init(explorer) { //drop ignoredColumns and system variables explorer.config.tableConfig.cols = Object.keys(explorer.config.files[0]) .filter(f => explorer.config.ignoredColumns.indexOf(f) == -1) - .filter(f => ['settings', 'selected', 'event', 'json'].indexOf(f) == -1); //drop system variables from table + .filter( + f => ['fileID', 'settings', 'selected', 'event', 'json'].indexOf(f) == -1 + ); //drop system variables from table //Create the table explorer.codebook.fileListing.table = createTable( @@ -22,6 +24,7 @@ export function init(explorer) { //show the selected file first explorer.config.files.forEach(d => (d.selected = d == explorer.current)); + console.log(explorer); var sortedFiles = explorer.config.files.sort(function(a, b) { return a.selected ? -1 : b.selected ? 1 : 0; }); diff --git a/src/explorer/fileListing/onDraw.js b/src/explorer/fileListing/onDraw.js index df05725..822629c 100644 --- a/src/explorer/fileListing/onDraw.js +++ b/src/explorer/fileListing/onDraw.js @@ -6,11 +6,7 @@ export function onDraw(explorer) { this.table .select('tbody') .selectAll('tr') - .filter( - f => - f[explorer.config.labelColumn] === - explorer.current[explorer.config.labelColumn] - ) + .filter(f => f.fileID === explorer.current.fileID) .classed('selected', true); //Linkify the labelColumn diff --git a/src/explorer/setDefaults.js b/src/explorer/setDefaults.js index 0543fa7..0265dd5 100644 --- a/src/explorer/setDefaults.js +++ b/src/explorer/setDefaults.js @@ -17,7 +17,8 @@ export function setDefaults(explorer) { explorer.config.tableConfig || defaultSettings.tableConfig; /********************* files[].settings ***************/ - explorer.config.files.forEach(function(f) { + explorer.config.files.forEach(function(f, i) { f.settings = f.settings || {}; + f.fileID = i; }); } diff --git a/test-page/explorer.js b/test-page/explorer.js index bb39d8a..addc886 100644 --- a/test-page/explorer.js +++ b/test-page/explorer.js @@ -26,8 +26,8 @@ document.onreadystatechange = function () { labelColumn:"filename", ignoredColumns: ["local_path","rel_path","path"], files:fileList_clean, - meta:meta, - fileLoader:true + meta:meta, + fileLoader:true }; var explorer = webcodebook.createExplorer("#container", settings).init(); }) From 99b065daea7f660fe30d20faeb522b836c7bf80e Mon Sep 17 00:00:00 2001 From: jwildfire Date: Thu, 6 Sep 2018 13:03:48 -0700 Subject: [PATCH 09/17] run prettier on test pages --- package.json | 3 +- test-page/explorer.js | 77 +++++++++++++++++++++++-------------------- test-page/index.js | 46 ++++++++++++-------------- 3 files changed, 64 insertions(+), 62 deletions(-) diff --git a/package.json b/package.json index a025da8..b6b97e0 100644 --- a/package.json +++ b/package.json @@ -24,9 +24,10 @@ "scripts": { "build": "npm run bundle && npm run format", "bundle": "rollup -c", - "format": "npm run format-src && npm run format-bundle", + "format": "npm run format-src && npm run format-bundle && npm run format-test", "format-bundle": "prettier --single-quote --write ./build/webcodebook.js", "format-src": "prettier --single-quote --write \"./src/**/*.js\"", + "format-test": "prettier --single-quote --write \"./test-page/**/*.js\"", "test-page": "start chrome ./test-page/index.html && start firefox ./test-page/index.html && start iexplore file://%CD%/test-page/index.html", "watch": "rollup -c -w" }, diff --git a/test-page/explorer.js b/test-page/explorer.js index addc886..26fd5eb 100644 --- a/test-page/explorer.js +++ b/test-page/explorer.js @@ -1,38 +1,43 @@ -document.onreadystatechange = function () { - function initExplorer(fileList){ - var metaFiles = ["AE","DM","LB"] //list of files to add meta data - d3.csv("https://rawgit.com/RhoInc/viz-library/master/data/safetyData/variableMetaData.csv",function(error,meta){ - meta.forEach(function(f){ - f.file = f.Form+".csv" - f.label = f.Label - }) - var fileList_clean = fileList.map(function(f){ - f.path = "https://rawgit.com/RhoInc/viz-library/master"+f.rel_path.slice(1); - f.shortname = f.filename.replace(/\.[^/.]+$/, "") - if(metaFiles.indexOf(f.shortname)>-1){ - f.meta = meta.filter(m=>m.Form == f.shortname) - .map(function(m){ - m.value_col = m.Variable; - return m; - }) - f["Metadata included?"] = "Yes" - }else{ - f["Metadata included?"] = "No" - } - return f; - }) +document.onreadystatechange = function() { + function initExplorer(fileList) { + var metaFiles = ['AE', 'DM', 'LB']; //list of files to add meta data + d3.csv( + 'https://rawgit.com/RhoInc/viz-library/master/data/safetyData/variableMetaData.csv', + function(error, meta) { + meta.forEach(function(f) { + f.file = f.Form + '.csv'; + f.label = f.Label; + }); - var settings = { - labelColumn:"filename", - ignoredColumns: ["local_path","rel_path","path"], - files:fileList_clean, - meta:meta, - fileLoader:true - }; - var explorer = webcodebook.createExplorer("#container", settings).init(); - }) + var fileList_clean = fileList.map(function(f) { + f.path = + 'https://rawgit.com/RhoInc/viz-library/master' + + f.rel_path.slice(1); + f.shortname = f.filename.replace(/\.[^/.]+$/, ''); + if (metaFiles.indexOf(f.shortname) > -1) { + f.meta = meta.filter(m => m.Form == f.shortname).map(function(m) { + m.value_col = m.Variable; + return m; + }); + f['Metadata included?'] = 'Yes'; + } else { + f['Metadata included?'] = 'No'; + } + return f; + }); + var settings = { + labelColumn: 'filename', + ignoredColumns: ['local_path', 'rel_path', 'path'], + files: fileList_clean, + meta: meta, + fileLoader: true + }; + var explorer = webcodebook + .createExplorer('#container', settings) + .init(); + } + ); + } - } - - initExplorer(dataFiles) -} + initExplorer(dataFiles); +}; diff --git a/test-page/index.js b/test-page/index.js index 82adc55..faa0820 100644 --- a/test-page/index.js +++ b/test-page/index.js @@ -1,27 +1,23 @@ -document.onreadystatechange = function () { - if (document.readyState === 'complete') { - d3.csv( - 'https://rawgit.com/RhoInc/viz-library/master/data/testData/ADTIMELINES_partialMissing.csv', - function(error,data) { - if (error) - console.log(error); +document.onreadystatechange = function() { + if (document.readyState === 'complete') { + d3.csv( + 'https://rawgit.com/RhoInc/viz-library/master/data/testData/ADTIMELINES_partialMissing.csv', + function(error, data) { + if (error) console.log(error); - var settings = { - // chartVisibility: 'hidden', - meta:[ - { - value_col:"USUBJID", - label:"Subject ID", - description: "Unique Identifier" - } - ] - }; - var instance = webcodebook.createCodebook( - '#container', - settings - ); - instance.init(data); + var settings = { + // chartVisibility: 'hidden', + meta: [ + { + value_col: 'USUBJID', + label: 'Subject ID', + description: 'Unique Identifier' } - ); - }; -} + ] + }; + var instance = webcodebook.createCodebook('#container', settings); + instance.init(data); + } + ); + } +}; From dd9ad0660440ae43b8f0326bedd674ae7a40ede9 Mon Sep 17 00:00:00 2001 From: jwildfire Date: Thu, 6 Sep 2018 14:14:12 -0700 Subject: [PATCH 10/17] add explorer callbacks. fix #291 --- build/webcodebook.js | 48 +++++++++++++------ src/createExplorer.js | 16 +++++++ src/explorer/addFile.js | 23 ++++----- src/explorer/init.js | 6 +++ src/explorer/makeCodebook.js | 3 ++ test-page/explorer.js | 91 ++++++++++++++++++++---------------- 6 files changed, 118 insertions(+), 69 deletions(-) diff --git a/build/webcodebook.js b/build/webcodebook.js index fa43c1e..412ed6e 100644 --- a/build/webcodebook.js +++ b/build/webcodebook.js @@ -4596,6 +4596,9 @@ \------------------------------------------------------------------------------------------------*/ function init$14() { + this.events.init.call(this); + + //set the defailts setDefaults$1(this); //prepare to draw the codebook for the first file @@ -4702,24 +4705,20 @@ var explorer = this; // parse the file object - var newFileObject = {}; - newFileObject[explorer.config.labelColumn] = label; - newFileObject.json = d3.csv.parse(csv_raw); - newFileObject.settings = {}; - newFileObject.fileID = explorer.config.files.length + 1; - - //customize the data object if the user provides a function - if (explorer.config.customFileLoad) { - explorer.config.customFileLoad(newFileObject); - } + this.newFileObject = {}; + this.newFileObject[explorer.config.labelColumn] = label; + this.newFileObject.json = d3.csv.parse(csv_raw); + this.newFileObject.settings = {}; + this.newFileObject.fileID = explorer.config.files.length + 1; - //remove duplicates - // var newFiles = files.filter(function(f) { - // return explorer.config.files.indexOf(f) == -1; - // }); + //call the addFile event (if any) + explorer.events.addFile.call(this); //add new files to file list - this.config.files = d3$1.merge([[newFileObject], this.config.files]); + this.config.files = d3$1.merge([ + [explorer.newFileObject], + this.config.files + ]); //re-draw the file listing explorer.codebook.fileListing.table.draw(this.config.files); @@ -4846,6 +4845,9 @@ } else { alert('No data provided for the selected file.'); } + + //call the makeCodebook event (if any) + explorer.events.makeCodebook.call(this); } function createExplorer() { @@ -4865,6 +4867,22 @@ addFile: addFile }; + explorer.events = { + init: function init() {}, + addFile: function addFile$$1() {}, + makeCodebook: function makeCodebook$$1() {} + }; + + explorer.on = function(event, callback) { + var possible_events = ['init', 'addFile', 'makeCodebook']; + if (possible_events.indexOf(event) < 0) { + return; + } + if (callback) { + explorer.events[event] = callback; + } + }; + return explorer; } diff --git a/src/createExplorer.js b/src/createExplorer.js index e461274..7678462 100644 --- a/src/createExplorer.js +++ b/src/createExplorer.js @@ -15,5 +15,21 @@ export function createExplorer(element = 'body', config) { addFile: addFile }; + explorer.events = { + init() {}, + addFile() {}, + makeCodebook() {} + }; + + explorer.on = function(event, callback) { + let possible_events = ['init', 'addFile', 'makeCodebook']; + if (possible_events.indexOf(event) < 0) { + return; + } + if (callback) { + explorer.events[event] = callback; + } + }; + return explorer; } diff --git a/src/explorer/addFile.js b/src/explorer/addFile.js index 92c5773..55d1aca 100644 --- a/src/explorer/addFile.js +++ b/src/explorer/addFile.js @@ -4,24 +4,17 @@ export function addFile(label, csv_raw) { var explorer = this; // parse the file object - var newFileObject = {}; - newFileObject[explorer.config.labelColumn] = label; - newFileObject.json = d3.csv.parse(csv_raw); - newFileObject.settings = {}; - newFileObject.fileID = explorer.config.files.length + 1; + this.newFileObject = {}; + this.newFileObject[explorer.config.labelColumn] = label; + this.newFileObject.json = d3.csv.parse(csv_raw); + this.newFileObject.settings = {}; + this.newFileObject.fileID = explorer.config.files.length + 1; - //customize the data object if the user provides a function - if (explorer.config.customFileLoad) { - explorer.config.customFileLoad(newFileObject); - } - - //remove duplicates - // var newFiles = files.filter(function(f) { - // return explorer.config.files.indexOf(f) == -1; - // }); + //call the addFile event (if any) + explorer.events.addFile.call(this); //add new files to file list - this.config.files = merge([[newFileObject], this.config.files]); + this.config.files = merge([[explorer.newFileObject], this.config.files]); //re-draw the file listing explorer.codebook.fileListing.table.draw(this.config.files); diff --git a/src/explorer/init.js b/src/explorer/init.js index 88518fd..97bc71c 100644 --- a/src/explorer/init.js +++ b/src/explorer/init.js @@ -6,7 +6,13 @@ import { select as d3select } from 'd3'; import { setDefaults } from './setDefaults'; export function init() { + var explorer = this; var settings = this.config; + + //call the init callback + this.events.init.call(this); + + //set the defailts setDefaults(this); //prepare to draw the codebook for the first file diff --git a/src/explorer/makeCodebook.js b/src/explorer/makeCodebook.js index 5e71470..509bb76 100644 --- a/src/explorer/makeCodebook.js +++ b/src/explorer/makeCodebook.js @@ -55,4 +55,7 @@ export function makeCodebook(explorer) { } else { alert('No data provided for the selected file.'); } + + //call the makeCodebook event (if any) + explorer.events.makeCodebook.call(this); } diff --git a/test-page/explorer.js b/test-page/explorer.js index 26fd5eb..f32010f 100644 --- a/test-page/explorer.js +++ b/test-page/explorer.js @@ -1,43 +1,56 @@ -document.onreadystatechange = function() { - function initExplorer(fileList) { - var metaFiles = ['AE', 'DM', 'LB']; //list of files to add meta data - d3.csv( - 'https://rawgit.com/RhoInc/viz-library/master/data/safetyData/variableMetaData.csv', - function(error, meta) { - meta.forEach(function(f) { - f.file = f.Form + '.csv'; - f.label = f.Label; - }); +function cleanData() { + var explorer = this; + var config = this.config; + + config.meta.forEach(function(f) { + f.file = f.Form + '.csv'; + f.label = f.Label; + }); + + config.files.forEach(function(f) { + f.path = + 'https://rawgit.com/RhoInc/viz-library/master' + f.rel_path.slice(1); + f.shortname = f.filename.replace(/\.[^/.]+$/, ''); + if (config.metaFiles.indexOf(f.shortname) > -1) { + f.meta = config.meta.filter(m => m.Form == f.shortname).map(function(m) { + m.value_col = m.Variable; + return m; + }); - var fileList_clean = fileList.map(function(f) { - f.path = - 'https://rawgit.com/RhoInc/viz-library/master' + - f.rel_path.slice(1); - f.shortname = f.filename.replace(/\.[^/.]+$/, ''); - if (metaFiles.indexOf(f.shortname) > -1) { - f.meta = meta.filter(m => m.Form == f.shortname).map(function(m) { - m.value_col = m.Variable; - return m; - }); - f['Metadata included?'] = 'Yes'; - } else { - f['Metadata included?'] = 'No'; - } - return f; - }); - var settings = { - labelColumn: 'filename', - ignoredColumns: ['local_path', 'rel_path', 'path'], - files: fileList_clean, - meta: meta, - fileLoader: true - }; - var explorer = webcodebook - .createExplorer('#container', settings) - .init(); - } - ); - } + f['Metadata included?'] = 'Yes'; + } else { + f['Metadata included?'] = 'No'; + } + return f; + }); +} +function initExplorer(fileList) { + var settings = { + labelColumn: 'filename', + ignoredColumns: ['local_path', 'rel_path', 'path'], + files: fileList, + fileLoader: true, + metaFiles: ['AE', 'DM', 'LB'] + }; + + d3.csv( + 'https://rawgit.com/RhoInc/viz-library/master/data/safetyData/variableMetaData.csv', + function(error, meta) { + settings.meta = meta; + var explorer = webcodebook.createExplorer('#container', settings); + explorer.on('init', cleanData); + explorer.on('addFile', function() { + console.log(this.newFileObject); + }); + explorer.on('makeCodebook', function() { + console.log(this.current); + }); + explorer.init(); + } + ); +} + +document.onreadystatechange = function() { initExplorer(dataFiles); }; From ac8a1fd57dcb7280f260385bb580324291810661 Mon Sep 17 00:00:00 2001 From: jwildfire Date: Thu, 6 Sep 2018 14:27:34 -0700 Subject: [PATCH 11/17] move file load. fix #298 --- build/webcodebook.js | 6 +++--- css/webcodebook.css | 20 ++++++-------------- src/explorer/initFileLoad.js | 6 +++--- 3 files changed, 12 insertions(+), 20 deletions(-) diff --git a/build/webcodebook.js b/build/webcodebook.js index 412ed6e..c7bf944 100644 --- a/build/webcodebook.js +++ b/build/webcodebook.js @@ -4728,11 +4728,11 @@ //draw the control var explorer = this; explorer.dataFileLoad = {}; - explorer.dataFileLoad.wrap = explorer.codebook.instructions.wrap - .append('span') + explorer.dataFileLoad.wrap = explorer.codebook.fileListing.wrap + .insert('div', '*') .attr('class', 'dataLoader'); - explorer.dataFileLoad.wrap.append('span').text(' Load a csv: '); + explorer.dataFileLoad.wrap.append('span').text('Add a local .csv file: '); explorer.dataFileLoad.loader_wrap = explorer.dataFileLoad.wrap .append('label') diff --git a/css/webcodebook.css b/css/webcodebook.css index c5e1f15..f865b74 100644 --- a/css/webcodebook.css +++ b/css/webcodebook.css @@ -600,7 +600,10 @@ Data Listing - Data Loader \------------------------------------------------------------------------------------------------*/ -.web-codebook .instructions .dataLoader label{ +.web-codebook .fileListing .dataLoader{ + padding-bottom:1em; +} +.web-codebook .fileListing .dataLoader label{ font-size:0.8em; font-weight: 0; border-bottom:1px solid black; @@ -610,26 +613,15 @@ padding-right:0.5em; } - .web-codebook .instructions .dataLoader label:hover { + .web-codebook .fileListing .dataLoader label:hover { background-color: #ccc; } - -.web-codebook .instructions .dataLoader label input{ +.web-codebook .fileListing .dataLoader label input{ display:none; } - -.web-codebook .instructions .dataLoader small{ - -} - -.web-codebook .instructions .dataLoader button{ - padding:0.2em; - border-radius:0.1em -} - /*------------------------------------------------------------------------------------------------\ Chart Maker \------------------------------------------------------------------------------------------------*/ diff --git a/src/explorer/initFileLoad.js b/src/explorer/initFileLoad.js index 70bb5ef..b14ce6d 100644 --- a/src/explorer/initFileLoad.js +++ b/src/explorer/initFileLoad.js @@ -4,11 +4,11 @@ export function initFileLoad() { //draw the control var explorer = this; explorer.dataFileLoad = {}; - explorer.dataFileLoad.wrap = explorer.codebook.instructions.wrap - .append('span') + explorer.dataFileLoad.wrap = explorer.codebook.fileListing.wrap + .insert('div', '*') .attr('class', 'dataLoader'); - explorer.dataFileLoad.wrap.append('span').text(' Load a csv: '); + explorer.dataFileLoad.wrap.append('span').text('Add a local .csv file: '); explorer.dataFileLoad.loader_wrap = explorer.dataFileLoad.wrap .append('label') From 8f24298ff979206ad1e1d32b681595a10e96341b Mon Sep 17 00:00:00 2001 From: jwildfire Date: Thu, 6 Sep 2018 15:00:34 -0700 Subject: [PATCH 12/17] add explorer.config.defaultCodebookSettings. fix #292 --- build/webcodebook.js | 9 ++++++++- src/explorer/defaultSettings.js | 1 + src/explorer/setDefaults.js | 7 ++++++- test-page/explorer.js | 5 ++++- 4 files changed, 19 insertions(+), 3 deletions(-) diff --git a/build/webcodebook.js b/build/webcodebook.js index c7bf944..79d61e9 100644 --- a/build/webcodebook.js +++ b/build/webcodebook.js @@ -4559,6 +4559,7 @@ var defaultSettings$3 = { ignoredColumns: [], meta: [], + defaultCodebookSettings: {}, tableConfig: { sortable: false, searchable: false, @@ -4584,9 +4585,14 @@ explorer.config.tableConfig = explorer.config.tableConfig || defaultSettings$3.tableConfig; + /********************* defaultCodebookSettings ***************/ + explorer.config.defaultCodebookSettings = + explorer.config.defaultCodebookSettings || + defaultSettings$3.defaultCodebookSettings; + /********************* files[].settings ***************/ explorer.config.files.forEach(function(f, i) { - f.settings = f.settings || {}; + f.settings = f.settings || explorer.config.defaultCodebookSettings; f.fileID = i; }); } @@ -4599,6 +4605,7 @@ this.events.init.call(this); //set the defailts + console.log(this.config.files); setDefaults$1(this); //prepare to draw the codebook for the first file diff --git a/src/explorer/defaultSettings.js b/src/explorer/defaultSettings.js index 77851bd..73df5a7 100644 --- a/src/explorer/defaultSettings.js +++ b/src/explorer/defaultSettings.js @@ -1,6 +1,7 @@ const defaultSettings = { ignoredColumns: [], meta: [], + defaultCodebookSettings: {}, tableConfig: { sortable: false, searchable: false, diff --git a/src/explorer/setDefaults.js b/src/explorer/setDefaults.js index 0265dd5..6cbea75 100644 --- a/src/explorer/setDefaults.js +++ b/src/explorer/setDefaults.js @@ -16,9 +16,14 @@ export function setDefaults(explorer) { explorer.config.tableConfig = explorer.config.tableConfig || defaultSettings.tableConfig; + /********************* defaultCodebookSettings ***************/ + explorer.config.defaultCodebookSettings = + explorer.config.defaultCodebookSettings || + defaultSettings.defaultCodebookSettings; + /********************* files[].settings ***************/ explorer.config.files.forEach(function(f, i) { - f.settings = f.settings || {}; + f.settings = f.settings || explorer.config.defaultCodebookSettings; f.fileID = i; }); } diff --git a/test-page/explorer.js b/test-page/explorer.js index f32010f..1e5fcf9 100644 --- a/test-page/explorer.js +++ b/test-page/explorer.js @@ -31,7 +31,10 @@ function initExplorer(fileList) { ignoredColumns: ['local_path', 'rel_path', 'path'], files: fileList, fileLoader: true, - metaFiles: ['AE', 'DM', 'LB'] + metaFiles: ['AE', 'DM', 'LB'], + defaultCodebookSettings: { + autogroups: 2 + } }; d3.csv( From e52d661f5c974d75ac62b6ba8959c7741f9d3025 Mon Sep 17 00:00:00 2001 From: jwildfire Date: Thu, 6 Sep 2018 15:13:18 -0700 Subject: [PATCH 13/17] minor explorer refactor. fix #294 --- build/webcodebook.js | 27 ++++++++++++++++----------- src/explorer/fileListing/init.js | 7 ++++--- src/explorer/fileListing/onDraw.js | 4 +++- src/explorer/init.js | 6 +++--- src/explorer/makeCodebook.js | 6 ++++-- src/explorer/setDefaults.js | 3 ++- 6 files changed, 32 insertions(+), 21 deletions(-) diff --git a/build/webcodebook.js b/build/webcodebook.js index 79d61e9..1d90b84 100644 --- a/build/webcodebook.js +++ b/build/webcodebook.js @@ -4569,7 +4569,8 @@ fileLoader: false }; - function setDefaults$1(explorer) { + function setDefaults$1() { + var explorer = this; /********************* meta *********************/ explorer.config.meta = explorer.config.meta || defaultSettings$3.meta; @@ -4605,8 +4606,7 @@ this.events.init.call(this); //set the defailts - console.log(this.config.files); - setDefaults$1(this); + setDefaults$1.call(this); //prepare to draw the codebook for the first file this.current = this.config.files[0]; @@ -4619,10 +4619,10 @@ .attr('class', 'web-codebook-explorer'); //layout the divs - this.layout(this); + this.layout.call(this); //draw first codebook - this.makeCodebook(this); + this.makeCodebook.call(this); } /*------------------------------------------------------------------------------------------------\ @@ -4633,7 +4633,9 @@ this.codebookWrap = this.wrap.append('div').attr('class', 'codebookWrap'); } - function onDraw$1(explorer) { + function onDraw$1() { + var explorer = this; + explorer.codebook.fileListing.table.on('draw', function() { //highlight the current row this.table @@ -4660,7 +4662,9 @@ }); } - function init$15(explorer) { + function init$15() { + var explorer = this; + var fileWrap = explorer.codebook.fileListing.wrap; fileWrap.selectAll('*').remove(); //Clear controls. @@ -4690,13 +4694,12 @@ explorer.config.files.forEach(function(d) { return (d.selected = d == explorer.current); }); - console.log(explorer); var sortedFiles = explorer.config.files.sort(function(a, b) { return a.selected ? -1 : b.selected ? 1 : 0; }); //assign callbacks and initialize - onDraw$1(explorer); + onDraw$1.call(explorer); explorer.codebook.fileListing.table.init(sortedFiles); } @@ -4795,9 +4798,11 @@ .style('cursor', 'help'); } - function makeCodebook(explorer) { + function makeCodebook() { var _this = this; + var explorer = this; + explorer.codebookWrap.selectAll('*').remove(); //add the Files section to the nav for each config @@ -4837,7 +4842,7 @@ ); explorer.codebook.on('complete', function() { - explorer.fileListing.init(explorer); + explorer.fileListing.init.call(explorer); if (explorer.config.fileLoader) { initFileLoad.call(explorer); } diff --git a/src/explorer/fileListing/init.js b/src/explorer/fileListing/init.js index 239d60b..7cf3db5 100644 --- a/src/explorer/fileListing/init.js +++ b/src/explorer/fileListing/init.js @@ -1,6 +1,8 @@ import { createTable } from 'webcharts'; import { onDraw } from './onDraw'; -export function init(explorer) { +export function init() { + var explorer = this; + var fileWrap = explorer.codebook.fileListing.wrap; fileWrap.selectAll('*').remove(); //Clear controls. @@ -24,12 +26,11 @@ export function init(explorer) { //show the selected file first explorer.config.files.forEach(d => (d.selected = d == explorer.current)); - console.log(explorer); var sortedFiles = explorer.config.files.sort(function(a, b) { return a.selected ? -1 : b.selected ? 1 : 0; }); //assign callbacks and initialize - onDraw(explorer); + onDraw.call(explorer); explorer.codebook.fileListing.table.init(sortedFiles); } diff --git a/src/explorer/fileListing/onDraw.js b/src/explorer/fileListing/onDraw.js index 822629c..9fe93d1 100644 --- a/src/explorer/fileListing/onDraw.js +++ b/src/explorer/fileListing/onDraw.js @@ -1,6 +1,8 @@ import { select as d3select } from 'd3'; -export function onDraw(explorer) { +export function onDraw() { + var explorer = this; + explorer.codebook.fileListing.table.on('draw', function() { //highlight the current row this.table diff --git a/src/explorer/init.js b/src/explorer/init.js index 97bc71c..49dc951 100644 --- a/src/explorer/init.js +++ b/src/explorer/init.js @@ -13,7 +13,7 @@ export function init() { this.events.init.call(this); //set the defailts - setDefaults(this); + setDefaults.call(this); //prepare to draw the codebook for the first file this.current = this.config.files[0]; @@ -25,8 +25,8 @@ export function init() { .attr('class', 'web-codebook-explorer'); //layout the divs - this.layout(this); + this.layout.call(this); //draw first codebook - this.makeCodebook(this); + this.makeCodebook.call(this); } diff --git a/src/explorer/makeCodebook.js b/src/explorer/makeCodebook.js index 509bb76..1114056 100644 --- a/src/explorer/makeCodebook.js +++ b/src/explorer/makeCodebook.js @@ -2,7 +2,9 @@ import { csv as d3csv } from 'd3'; import { merge as d3merge } from 'd3'; import { initFileLoad } from './initFileLoad'; -export function makeCodebook(explorer) { +export function makeCodebook() { + var explorer = this; + explorer.codebookWrap.selectAll('*').remove(); //add the Files section to the nav for each config @@ -40,7 +42,7 @@ export function makeCodebook(explorer) { ); explorer.codebook.on('complete', function() { - explorer.fileListing.init(explorer); + explorer.fileListing.init.call(explorer); if (explorer.config.fileLoader) { initFileLoad.call(explorer); } diff --git a/src/explorer/setDefaults.js b/src/explorer/setDefaults.js index 6cbea75..739f7f0 100644 --- a/src/explorer/setDefaults.js +++ b/src/explorer/setDefaults.js @@ -1,6 +1,7 @@ import defaultSettings from './defaultSettings'; -export function setDefaults(explorer) { +export function setDefaults() { + var explorer = this; /********************* meta *********************/ explorer.config.meta = explorer.config.meta || defaultSettings.meta; From 94c5ceac37c8988c4d59b1ceef675d7a949eec7c Mon Sep 17 00:00:00 2001 From: jwildfire Date: Thu, 6 Sep 2018 15:40:58 -0700 Subject: [PATCH 14/17] don't reset file table columns on reload. fix #299 --- build/webcodebook.js | 22 +++++++++++----------- src/explorer/fileListing/init.js | 7 ------- src/explorer/setDefaults.js | 7 +++++++ 3 files changed, 18 insertions(+), 18 deletions(-) diff --git a/build/webcodebook.js b/build/webcodebook.js index 1d90b84..2d0d9d6 100644 --- a/build/webcodebook.js +++ b/build/webcodebook.js @@ -4586,6 +4586,17 @@ explorer.config.tableConfig = explorer.config.tableConfig || defaultSettings$3.tableConfig; + //drop ignoredColumns and system variables + explorer.config.tableConfig.cols = Object.keys(explorer.config.files[0]) + .filter(function(f) { + return explorer.config.ignoredColumns.indexOf(f) == -1; + }) + .filter(function(f) { + return ( + ['fileID', 'settings', 'selected', 'event', 'json'].indexOf(f) == -1 + ); + }); //drop system variables from table + /********************* defaultCodebookSettings ***************/ explorer.config.defaultCodebookSettings = explorer.config.defaultCodebookSettings || @@ -4673,17 +4684,6 @@ .append('div') .classed('listing-container', true); - //drop ignoredColumns and system variables - explorer.config.tableConfig.cols = Object.keys(explorer.config.files[0]) - .filter(function(f) { - return explorer.config.ignoredColumns.indexOf(f) == -1; - }) - .filter(function(f) { - return ( - ['fileID', 'settings', 'selected', 'event', 'json'].indexOf(f) == -1 - ); - }); //drop system variables from table - //Create the table explorer.codebook.fileListing.table = webcharts.createTable( '.web-codebook .fileListing .listing-container', diff --git a/src/explorer/fileListing/init.js b/src/explorer/fileListing/init.js index 7cf3db5..a6bdd84 100644 --- a/src/explorer/fileListing/init.js +++ b/src/explorer/fileListing/init.js @@ -11,13 +11,6 @@ export function init() { .append('div') .classed('listing-container', true); - //drop ignoredColumns and system variables - explorer.config.tableConfig.cols = Object.keys(explorer.config.files[0]) - .filter(f => explorer.config.ignoredColumns.indexOf(f) == -1) - .filter( - f => ['fileID', 'settings', 'selected', 'event', 'json'].indexOf(f) == -1 - ); //drop system variables from table - //Create the table explorer.codebook.fileListing.table = createTable( '.web-codebook .fileListing .listing-container', diff --git a/src/explorer/setDefaults.js b/src/explorer/setDefaults.js index 739f7f0..206b07e 100644 --- a/src/explorer/setDefaults.js +++ b/src/explorer/setDefaults.js @@ -17,6 +17,13 @@ export function setDefaults() { explorer.config.tableConfig = explorer.config.tableConfig || defaultSettings.tableConfig; + //drop ignoredColumns and system variables + explorer.config.tableConfig.cols = Object.keys(explorer.config.files[0]) + .filter(f => explorer.config.ignoredColumns.indexOf(f) == -1) + .filter( + f => ['fileID', 'settings', 'selected', 'event', 'json'].indexOf(f) == -1 + ); //drop system variables from table + /********************* defaultCodebookSettings ***************/ explorer.config.defaultCodebookSettings = explorer.config.defaultCodebookSettings || From 10714eda31cd6399e00be313e85e5bcbea7af41d Mon Sep 17 00:00:00 2001 From: jwildfire Date: Sat, 15 Sep 2018 08:05:09 -0700 Subject: [PATCH 15/17] Update onDraw.js --- src/explorer/fileListing/onDraw.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/explorer/fileListing/onDraw.js b/src/explorer/fileListing/onDraw.js index 9fe93d1..97dcf5e 100644 --- a/src/explorer/fileListing/onDraw.js +++ b/src/explorer/fileListing/onDraw.js @@ -8,8 +8,7 @@ export function onDraw() { this.table .select('tbody') .selectAll('tr') - .filter(f => f.fileID === explorer.current.fileID) - .classed('selected', true); + .classed('selected', f => f.fileID === explorer.current.fileID) //Linkify the labelColumn var labelCells = this.table From 598207a1ae09dc43fdea57a45a548e2996f4e394 Mon Sep 17 00:00:00 2001 From: jwildfire Date: Sat, 15 Sep 2018 08:15:22 -0700 Subject: [PATCH 16/17] rebuild --- build/webcodebook.js | 5 ++--- src/explorer/fileListing/onDraw.js | 2 +- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/build/webcodebook.js b/build/webcodebook.js index 2d0d9d6..3221d08 100644 --- a/build/webcodebook.js +++ b/build/webcodebook.js @@ -4652,10 +4652,9 @@ this.table .select('tbody') .selectAll('tr') - .filter(function(f) { + .classed('selected', function(f) { return f.fileID === explorer.current.fileID; - }) - .classed('selected', true); + }); //Linkify the labelColumn var labelCells = this.table diff --git a/src/explorer/fileListing/onDraw.js b/src/explorer/fileListing/onDraw.js index 97dcf5e..bfc766c 100644 --- a/src/explorer/fileListing/onDraw.js +++ b/src/explorer/fileListing/onDraw.js @@ -8,7 +8,7 @@ export function onDraw() { this.table .select('tbody') .selectAll('tr') - .classed('selected', f => f.fileID === explorer.current.fileID) + .classed('selected', f => f.fileID === explorer.current.fileID); //Linkify the labelColumn var labelCells = this.table From cac12ef9b9fb477847630dc08ae1509940abf010 Mon Sep 17 00:00:00 2001 From: jwildfire Date: Sat, 15 Sep 2018 08:36:51 -0700 Subject: [PATCH 17/17] create super simple explorer test environment --- test-page/explorer.js | 38 +++++++++++++++++++++++++------------- 1 file changed, 25 insertions(+), 13 deletions(-) diff --git a/test-page/explorer.js b/test-page/explorer.js index 1e5fcf9..0cfc1ac 100644 --- a/test-page/explorer.js +++ b/test-page/explorer.js @@ -25,22 +25,13 @@ function cleanData() { }); } -function initExplorer(fileList) { - var settings = { - labelColumn: 'filename', - ignoredColumns: ['local_path', 'rel_path', 'path'], - files: fileList, - fileLoader: true, - metaFiles: ['AE', 'DM', 'LB'], - defaultCodebookSettings: { - autogroups: 2 - } - }; - +function initExplorer(fileList,settings) { d3.csv( 'https://rawgit.com/RhoInc/viz-library/master/data/safetyData/variableMetaData.csv', function(error, meta) { settings.meta = meta; + settings.files = fileList; + var explorer = webcodebook.createExplorer('#container', settings); explorer.on('init', cleanData); explorer.on('addFile', function() { @@ -54,6 +45,27 @@ function initExplorer(fileList) { ); } +var settings = { + labelColumn: 'filename', + ignoredColumns: ['local_path', 'rel_path', 'path'], + fileLoader: true, + metaFiles: ['AE', 'DM', 'LB'], + defaultCodebookSettings: { + autogroups: 2 + } +}; + document.onreadystatechange = function() { - initExplorer(dataFiles); + + initExplorer(dataFiles, settings); + d3.select("body").append("p").text("Settings:") + d3.select("body").append("textarea") + .property("rows","10") + .property("cols",'100') + .property("value",JSON.stringify(settings)) + .on("change",function(){ + delete explorer; + d3.select("#container").selectAll("*").remove() + initExplorer(dataFiles, JSON.parse(this.value)); + }) };