Added trace line and marker outline options

python/chemiscope/input.py

@@ -627,30 +627,36 @@ 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},
             "color": {"property": color},
             "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],

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 */

src/map/options.html.in

@@ -192,6 +192,17 @@
                      <option value="">fixed</option>
                   </select>
                </div>
+
+               <div class="input-group chsp-map-extra-options">
+                  <div class="form-check form-switch">
+                     <input class="form-check-input" id="map-marker-outline" type="checkbox" />
+                     <label class="form-check-label" for="map-marker-outline" title="show point outlines">marker outlines</label>
+                  </div>
+                  <div class="form-check form-switch">
+                     <input class="form-check-input" id="map-trace-line" type="checkbox" />
+                     <label class="form-check-label" for="map-trace-line" title="draw a line through the points, sequentially">trajectory line</label>
+                  </div>
+               </div>
             </div>
          </div>
       </div>

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 */