Skip to content
Snippets Groups Projects
Commit 5146570c authored by Henrik tom Wörden's avatar Henrik tom Wörden Committed by Timm Fitschen
Browse files

Add Layout to plot

parent 92c70d95
Branches
Tags
No related merge requests found
Hide whitespace changes
Inline Side-by-side
CHANGELOG.md
+ 1
− 0
View file @ 5146570c
......@@ -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)
......
src/core/js/ext_bottom_line.js
+ 57
− 37
View file @ 5146570c
......@@ -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
test/core/js/modules/ext_bottom_line.js
+ 1
− 1
View file @ 5146570c
......@@ -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]'}}); }"
}
]
};
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment