diff --git a/CHANGELOG.md b/CHANGELOG.md
index 18052e718ec41d79b7d95c71ce296d83d50856f2..c392d04370a6465d30868f307a4ebbefd9d64805 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Added (for new features, dependecies etc.)
### Changed (for changes in existing functionality)
+- added a layout argument to the create_plot function of ext_bottom_line
### Deprecated (for soon-to-be removed features)
diff --git a/src/core/js/ext_bottom_line.js b/src/core/js/ext_bottom_line.js
index 900263366e456c8f7a2945af6a24c7a10b345c0e..404648e5dc50b68861146ce10fc7bdcc3b13154d 100644
--- a/src/core/js/ext_bottom_line.js
+++ b/src/core/js/ext_bottom_line.js
@@ -43,7 +43,7 @@
* @requires getEntityPath (function from caosdb.js)
* @requires connection (module from webcaosdb.js)
*/
-var ext_bottom_line = function ($, logger, is_in_view_port, load_config, getEntityPath, connection) {
+var ext_bottom_line = function($, logger, is_in_view_port, load_config, getEntityPath, connection) {
/**
* @property {string|function} create - a function with one parameter
@@ -83,11 +83,11 @@ var ext_bottom_line = function ($, logger, is_in_view_port, load_config, getEnti
* @return {boolean} true iff the entity has a path with one of the
* extensionss.
*/
- const _path_has_file_extension = function (entity, extensions) {
+ const _path_has_file_extension = function(entity, extensions) {
const path = getEntityPath(entity);
if (path) {
for (var ext of extensions) {
- if(path.toLowerCase().endsWith(ext)) {
+ if (path.toLowerCase().endsWith(ext)) {
return true;
}
}
@@ -101,7 +101,7 @@ var ext_bottom_line = function ($, logger, is_in_view_port, load_config, getEnti
* @param {HTMLElement} entity
* @return {HTMLElement} a VIDEO element.
*/
- const _create_video_preview = function (entity) {
+ const _create_video_preview = function(entity) {
var path = connection.getFileSystemPath() + getEntityPath(entity);
return $(`<video controls="controls"><source src="${path}"/></video>`)[0];
}
@@ -112,7 +112,7 @@ var ext_bottom_line = function ($, logger, is_in_view_port, load_config, getEnti
* @param {HTMLElement} entity
* @return {HTMLElement} an IMG element.
*/
- const _create_picture_preview = function (entity) {
+ const _create_picture_preview = function(entity) {
var path = connection.getFileSystemPath() + getEntityPath(entity);
return $(`<img class="entity-image-preview" style="max-width: 200px; max-height=140px;" src="${path}"/>`)[0];
}
@@ -124,20 +124,17 @@ var ext_bottom_line = function ($, logger, is_in_view_port, load_config, getEnti
*
* @member {Creator[]}
*/
- const _default_creators = [
- { // pictures
+ const _default_creators = [{ // pictures
id: "_default_creators.pictures",
is_applicable: (entity) => _path_has_file_extension(
entity, ["jpg", "png", "gif", "svg"]),
create: _create_picture_preview
- },
- { // videos
+ }, { // videos
id: "_default_creators.videos",
is_applicable: (entity) => _path_has_file_extension(
entity, ["mp4", "mov", "webm"]),
create: _create_video_preview,
- },
- { // fallback
+ }, { // fallback
id: "_default_creators.fallback",
is_applicable: (entity) => true,
create: (entity) => fallback_preview,
@@ -167,7 +164,7 @@ var ext_bottom_line = function ($, logger, is_in_view_port, load_config, getEnti
* @returns {HTMLElement} the preview container or `undefined` if the entity
* doesn't have any.
*/
- const get_preview_container = function (entity) {
+ const get_preview_container = function(entity) {
return $(entity).children(`.${_css_class_preview_container}`)[0];
}
@@ -188,16 +185,20 @@ var ext_bottom_line = function ($, logger, is_in_view_port, load_config, getEnti
* @param {HTMLElement} entity - An entity in HTML Representation which
* must have a (deep) child with class `caosdb-f-ext_bottom_line-container`.
*/
- const set_preview_container = function (entity, element) {
+ const set_preview_container = function(entity, element) {
const preview_container = $(get_preview_container(entity));
if (preview_container[0]) {
preview_container.empty();
var buttons = preview_container.siblings(`.${_css_class_preview_container_button}`);
if (element) {
- buttons.css({"visibility": "initial"});
+ buttons.css({
+ "visibility": "initial"
+ });
preview_container.append(element);
} else {
- buttons.css({"visibility": "hidden"});
+ buttons.css({
+ "visibility": "hidden"
+ });
}
} else {
logger.error(new Error("Could not find the preview container."));
@@ -219,7 +220,7 @@ var ext_bottom_line = function ($, logger, is_in_view_port, load_config, getEnti
* @param {string|HTMLElement|Promise} preview - A preview for an entity or
* a Promise for a preview (which resolves as a string or an HTMLElement as well).
*/
- var set_preview = async function (entity, preview) {
+ var set_preview = async function(entity, preview) {
try {
const wait = "Please wait...";
set_preview_container(entity, wait);
@@ -252,7 +253,7 @@ var ext_bottom_line = function ($, logger, is_in_view_port, load_config, getEnti
* @returns {String|HTMLElement|Promise} A preview which can be added to
* the entity DOM representation or a Promise for such a preview.
*/
- var root_preview_creator = async function (entity) {
+ var root_preview_creator = async function(entity) {
for (let c of _creators) {
try {
if (await c.is_applicable(entity)) {
@@ -283,15 +284,21 @@ var ext_bottom_line = function ($, logger, is_in_view_port, load_config, getEnti
* @param {HTMLElement} entity - An entity in HTML representation.
* @return {HTMLElement} the newly created container.
*/
- var add_preview_container = function (entity) {
+ var add_preview_container = function(entity) {
const button_show = $('<button class="btn btn-xs"><span class="glyphicon glyphicon-menu-down"/> Show Preview</button>')
- .css({width: "100%"})
+ .css({
+ width: "100%"
+ })
.addClass(_css_class_preview_container_button);
const button_hide = $('<button class="btn btn-xs"><span class="glyphicon glyphicon-menu-up"/> Hide Preview</button>')
- .css({width: "100%"})
+ .css({
+ width: "100%"
+ })
.addClass(_css_class_preview_container_button)
.hide();
- const style = { padding: "0px 10px" };
+ const style = {
+ padding: "0px 10px"
+ };
const container = $(`<div class="collapse"/>`)
.addClass(_css_class_preview_container)
.addClass(_css_class_preview_container_resolvable)
@@ -308,7 +315,9 @@ var ext_bottom_line = function ($, logger, is_in_view_port, load_config, getEnti
}
button_show.click(show);
button_hide.click(hide);
- container.on("shown.bs.collapse", () => { container[0].dispatchEvent(previewShownEvent); });
+ container.on("shown.bs.collapse", () => {
+ container[0].dispatchEvent(previewShownEvent);
+ });
$(entity).append(container);
$(entity).append(button_show);
$(entity).append(button_hide);
@@ -326,7 +335,7 @@ var ext_bottom_line = function ($, logger, is_in_view_port, load_config, getEnti
* @param {HTMLElement} entity - the entity for which the preview is to
* created.
*/
- var root_preview_handler = async function (entity) {
+ var root_preview_handler = async function(entity) {
var container = $(get_preview_container(entity) || add_preview_container(entity));
if (container.hasClass(_css_class_preview_container_resolvable)) {
container.removeClass(_css_class_preview_container_resolvable);
@@ -339,7 +348,7 @@ var ext_bottom_line = function ($, logger, is_in_view_port, load_config, getEnti
* Trigger the root_preview_handler for all entities within the view port
* when the view port.
*/
- var root_preview_handler_trigger = function () {
+ var root_preview_handler_trigger = function() {
var entities = $(".caosdb-entity-panel,.caosdb-entity-preview");
for (let entity of entities) {
@@ -359,7 +368,7 @@ var ext_bottom_line = function ($, logger, is_in_view_port, load_config, getEnti
* event. After this timeout the trigger is called.
* @param {function} trigger - the callback which is called.
*/
- var init_watcher = function (delay, trigger) {
+ var init_watcher = function(delay, trigger) {
var scroll_timeout = undefined;
$(window).scroll(() => {
if (!scroll_timeout) {
@@ -387,9 +396,9 @@ var ext_bottom_line = function ($, logger, is_in_view_port, load_config, getEnti
*
* @param {BottomLineConfig} config
*/
- var configure = async function (config) {
+ var configure = async function(config) {
logger.debug("configure", config);
- if(config.version != "0.1") {
+ if (config.version != "0.1") {
throw new Error("Wrong version in config.");
}
@@ -421,7 +430,7 @@ var ext_bottom_line = function ($, logger, is_in_view_port, load_config, getEnti
* @property {BottomLineConfig} [config] - an optional config. Per default, the
* configuration is fetched from the server.
*/
- const init = async function (config) {
+ const init = async function(config) {
logger.info("ext_bottom_line initialized");
try {
@@ -458,14 +467,14 @@ var ext_bottom_line = function ($, logger, is_in_view_port, load_config, getEnti
/**
* Helper for plotly
*/
-var plotly_preview = function (logger, ext_bottom_line, plotly) {
+var plotly_preview = function(logger, ext_bottom_line, plotly) {
/**
* Create a plot with plotly.
*
* The layout and any other plotly options are set by this function. The
- * only parameter `data` is the `data` parameter of the `Plotly.newPlot`
- * factory.
+ * only parameters are `data` and `layout` which are the respective
+ * parameters of the `Plotly.newPlot` factory.
*
* Hence the full documentation of the `data` parameter is available at
* https://plotly.com/javascript/plotlyjs-function-reference/#plotlynewplot
@@ -473,22 +482,33 @@ var plotly_preview = function (logger, ext_bottom_line, plotly) {
*
* @param {object[]} data - array of objects containing the data which is
* to be plotted.
+ * @param {object[]} layout - dictionary of settings defining the layout of
+ * the plot.
* @returns {HTMLElement} the element which contains the plot.
*/
- const create_plot = function (data) {
+ const create_plot = function(data,
+ layout = {
+ margin: {
+ t: 0
+ },
+ height: 400,
+ widht: 400
+ }) {
var div = $('<div/>')[0];
- plotly.newPlot(div, data, { margin: { t: 0}, height: 400, widht: 400 }, {responsive: true});
+ plotly.newPlot(div, data, layout, {
+ responsive: true
+ });
return div;
}
- const resize_plots_event_handler = function (e) {
+ const resize_plots_event_handler = function(e) {
var plots = $(e.target).find(".js-plotly-plot");
for (let plot of plots) {
plotly.Plots.resize(plot);
}
}
- const init = function () {
+ const init = function() {
window.addEventListener(ext_bottom_line.previewReadyEvent.type,
resize_plots_event_handler, true);
window.addEventListener(ext_bottom_line.previewShownEvent.type,
@@ -504,9 +524,9 @@ var plotly_preview = function (logger, ext_bottom_line, plotly) {
// this will be replaced by require.js in the future.
-$(document).ready(function () {
+$(document).ready(function() {
if ("${BUILD_MODULE_EXT_BOTTOM_LINE}" === "ENABLED") {
caosdb_modules.register(plotly_preview);
caosdb_modules.register(ext_bottom_line);
}
-});
+});
\ No newline at end of file
diff --git a/test/core/js/modules/ext_bottom_line.js b/test/core/js/modules/ext_bottom_line.js
index 46903ead3226c1cb6038e9320548284ce76b0672..21c92167271f87554a9af881554d33db686d9194 100644
--- a/test/core/js/modules/ext_bottom_line.js
+++ b/test/core/js/modules/ext_bottom_line.js
@@ -45,7 +45,7 @@ var ext_bottom_line_test_suite = function ($, ext_bottom_line, QUnit) {
},
{ "id": "test.success-2",
"is_applicable": "(entity) => getParents(entity).map(par => par.name).includes('TestPreviewRecordType') && getEntityName(entity) !== 'TestPreviewRecord-fall-back'",
- "create": "(entity) => { return plotly_preview.create_plot([{x: [1,2,3,4,5], y: [1,2,4,8,16]}]); }"
+ "create": "(entity) => { return plotly_preview.create_plot([{x: [1,2,3,4,5], y: [1,2,4,8,16]}], { 'xaxis': {'title': 'time [samples]'}}); }"
}
]
};