diff --git a/python/chemiscope/input.py b/python/chemiscope/input.py index 6f64ee913..eca28512f 100644 --- a/python/chemiscope/input.py +++ b/python/chemiscope/input.py @@ -617,24 +617,22 @@ def quick_settings( :param str symbol: The (categorical) property to use to determine point markers. - :param bool trajectory: A boolean flag that sets some default options suitable - to view trajectory data. + :param bool trajectory: A boolean flag that sets some default options suitable to + view trajectory data: fixing the viewpoint for the structure, reducing the delay + when cycling between structures and adding a line joining the points in the map. - :param dict map_settings: Additional settings for the map (following the - chemiscope settings schema). + :param dict map_settings: Additional settings for the map (following the chemiscope + settings schema). - :param dict structure_settings: Additional settings for the - structure viewer (following the chemiscope settings schema). + :param dict structure_settings: Additional settings for the structure viewer + (following the chemiscope settings schema). """ - if map_settings is None: - map_settings = {} - - if structure_settings is None: - structure_settings = {} - - map_settings.update( - { + if (x + y + z + color + size + symbol) == "": + # if at least one of the properties is requested + computed_map_settings = {} + else: + computed_map_settings = { "x": {"property": x}, "y": {"property": y}, "z": {"property": z}, @@ -642,18 +640,27 @@ def quick_settings( "size": {"property": size}, "symbol": symbol, } - ) - structure_settings.update( + computed_map_settings.update( { - "keepOrientation": trajectory, - "playbackDelay": 10 if trajectory else 700, + "joinPoints": trajectory, } ) + computed_structure_settings = { + "keepOrientation": trajectory, + "playbackDelay": 10 if trajectory else 700, + } + + if map_settings is not None: + computed_map_settings.update(map_settings) + + if structure_settings is not None: + computed_structure_settings.update(structure_settings) + return { - "map": map_settings, - "structure": [structure_settings], + "map": computed_map_settings, + "structure": [computed_structure_settings], } diff --git a/python/examples/3-trajectory.py b/python/examples/3-trajectory.py index 7529fdc64..3729c9a78 100644 --- a/python/examples/3-trajectory.py +++ b/python/examples/3-trajectory.py @@ -73,7 +73,10 @@ "playbackDelay": 100, "shape": "forces", # visualize force vectors } - ] + ], + "map": { + "joinPoints": True, + }, }, ) diff --git a/src/map/map.ts b/src/map/map.ts index 4fad2be04..28e273f07 100644 --- a/src/map/map.ts +++ b/src/map/map.ts @@ -535,8 +535,8 @@ export class PropertiesMap { color: this._colors(0)[0], coloraxis: 'coloraxis', line: { - color: this._lineColors(0)[0], - width: 1, + color: 'black', + width: this._options.markerOutline.value ? 0.5 : 0, }, // prevent plolty from messing with opacity when doing bubble // style charts (different sizes for each point) @@ -545,7 +545,13 @@ export class PropertiesMap { sizemode: 'area', symbol: this._symbols(0)[0], }, - mode: 'markers', + line: { + // lines type (if required) + color: 'black', + width: 0.5, + dash: 'solid', + }, + mode: this._options.joinPoints.value ? 'lines+markers' : 'markers', showlegend: false, }; @@ -1158,6 +1164,16 @@ export class PropertiesMap { this._options.size.mode.onchange.push(() => { this._restyle({ 'marker.size': this._sizes(0) } as Data, 0); }); + + this._options.markerOutline.onchange.push(() => { + const width = this._options.markerOutline.value ? 0.5 : 0; + this._restyle({ 'marker.line.width': width } as Data, [0]); + }); + + this._options.joinPoints.onchange.push(() => { + const mode = this._options.joinPoints.value ? 'lines+markers' : 'markers'; + this._restyle({ mode: mode } as Data, [0]); + }); } /** Actually create the Plotly plot */ @@ -1391,18 +1407,6 @@ export class PropertiesMap { return this._selectTrace>(values, selected, trace); } - /** - * Get the **line** color values to use with the given plotly `trace`, or - * all of them if `trace === undefined` - */ - private _lineColors(trace?: number): string[] { - if (this._is3D()) { - return this._selectTrace('black', 'black', trace); - } else { - return this._selectTrace('rgba(1, 1, 1, 0.3)', 'black', trace); - } - } - /** * Get the values to use as marker size with the given plotly `trace`, or * all of them if `trace === undefined`. @@ -1549,10 +1553,6 @@ export class PropertiesMap { // Change the data that vary between 2D and 3D mode this._restyle( { - // transparency messes with depth sorting in 3D mode, even with - // line width set to 0 ¯\_(ツ)_/¯ - // https://github.com/plotly/plotly.js/issues/4111 - 'marker.line.color': this._lineColors(), 'marker.line.width': [1, 2], // size change from 2D to 3D 'marker.size': this._sizes(), @@ -1594,9 +1594,6 @@ export class PropertiesMap { this._restyle( { - // transparency messes with depth sorting in 3D mode - // https://github.com/plotly/plotly.js/issues/4111 - 'marker.line.color': this._lineColors(), 'marker.line.width': [1, 0], // size change from 2D to 3D 'marker.size': this._sizes(), diff --git a/src/map/options.html.in b/src/map/options.html.in index ad0d1cd62..3b77ecc4e 100644 --- a/src/map/options.html.in +++ b/src/map/options.html.in @@ -100,6 +100,18 @@
Style
+ +
+
+ + +
+
+ + +
+
+
@@ -171,7 +183,9 @@