diff --git a/python/chemiscope/input.py b/python/chemiscope/input.py index 6f64ee913..e1992bd26 100644 --- a/python/chemiscope/input.py +++ b/python/chemiscope/input.py @@ -627,14 +627,11 @@ def quick_settings( 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,15 +639,24 @@ def quick_settings( "size": {"property": size}, "symbol": symbol, } - ) - structure_settings.update( + computed_map_settings.update( { - "keepOrientation": trajectory, - "playbackDelay": 10 if trajectory else 700, + "traceLine": 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], diff --git a/src/map/map.ts b/src/map/map.ts index 0e5081c04..a73358e62 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,9 +545,16 @@ export class PropertiesMap { sizemode: 'area', symbol: this._symbols(0)[0], }, - mode: 'markers', + line: { + // line stype (if required) + color: 'black', + width: 0.5, + dash: 'solid', + }, + mode: this._options.traceLine.value ? 'lines+markers' : 'markers', showlegend: false, }; + console.log(main); // Create a second trace to store the last clicked point, in order to // display it on top of the main plot with different styling. This is @@ -1166,6 +1173,16 @@ export class PropertiesMap { this._options.size.reverse.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.traceLine.onchange.push(() => { + const mode = this._options.traceLine.value ? 'lines+markers' : 'markers'; + this._restyle({ mode: mode } as Data, [0]); + }); } /** Actually create the Plotly plot */ diff --git a/src/map/options.html.in b/src/map/options.html.in index 128226037..e7395855c 100644 --- a/src/map/options.html.in +++ b/src/map/options.html.in @@ -192,6 +192,17 @@ + +
+
+ + +
+
+ + +
+
diff --git a/src/map/options.ts b/src/map/options.ts index eb5a262d8..b6882b865 100644 --- a/src/map/options.ts +++ b/src/map/options.ts @@ -81,6 +81,8 @@ export class MapOptions extends OptionsGroup { property: HTMLOption<'string'>; reverse: HTMLOption<'boolean'>; }; + public markerOutline: HTMLOption<'boolean'>; + public traceLine: HTMLOption<'boolean'>; /// The HTML button to open the settings modal private _openModal: HTMLElement; @@ -148,6 +150,10 @@ export class MapOptions extends OptionsGroup { }; this.size.mode.validate = optionValidator(['linear', 'log', 'sqrt', 'inverse'], 'mode'); + // outline and line + this.markerOutline = new HTMLOption('boolean', true); + this.traceLine = new HTMLOption('boolean', false); + // Setup default values this.x.property.value = propertiesName[0]; this.y.property.value = propertiesName[1]; @@ -518,6 +524,10 @@ export class MapOptions extends OptionsGroup { this.size.factor.bind(this.getModalElement('map-size-factor'), 'value'); this.size.mode.bind(this.getModalElement('map-size-transform'), 'value'); this.size.reverse.bind(this.getModalElement('map-size-reverse'), 'checked'); + + // ====== marker outline and line trace + this.markerOutline.bind(this.getModalElement('map-marker-outline'), 'checked'); + this.traceLine.bind(this.getModalElement('map-trace-line'), 'checked'); } /** Get the colorscale to use for markers in the main plotly trace */