Added trace line and marker outline options

python/chemiscope/input.py

@@ -618,7 +618,9 @@ 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.
+        to view trajectory data: fixing the viewpoint for the structure,
+        reducing the lag when cycling between structures and adding a line
+        trace joining the points.
 
     :param dict map_settings: Additional settings for the map (following the
             chemiscope settings schema).
@@ -627,30 +629,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,7 +545,13 @@ 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,
         };
 
@@ -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.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

@@ -190,6 +190,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

@@ -80,6 +80,8 @@ export class MapOptions extends OptionsGroup {
         mode: HTMLOption<'string'>;
         property: HTMLOption<'string'>;
     };
+    public markerOutline: HTMLOption<'boolean'>;
+    public traceLine: HTMLOption<'boolean'>;
 
     /// The HTML button to open the settings modal
     private _openModal: HTMLElement;
@@ -149,6 +151,10 @@ export class MapOptions extends OptionsGroup {
             '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];
@@ -308,7 +314,7 @@ export class MapOptions extends OptionsGroup {
         const { min, max } = arrayMaxMin(rawSizes);
         const defaultSize = this.is3D() ? 800 : 300;
         const bottomLimit = 0.1; // lower limit to prevent size of 0
-        const defaultScaled = 0.55;
+        const defaultScaled = 0.3;
         const nonzeromin = min > 0 ? min : 1e-6 * (max - min); // non-zero minimum value for scales needing it
         const values = rawSizes.map((v: number) => {
             // normalize between 0 and 1, then scale by the user provided value
@@ -347,7 +353,7 @@ export class MapOptions extends OptionsGroup {
                     break;
                 default:
                     // corresponds to 'constant'
-                    scaled = 0.55 - bottomLimit;
+                    scaled = defaultScaled - bottomLimit;
                     break;
             }
             scaled = scaled + bottomLimit; // minimum size is enforced
@@ -544,6 +550,9 @@ export class MapOptions extends OptionsGroup {
         this.size.property.bind(selectSizeProperty, 'value');
         this.size.factor.bind(this.getModalElement('map-size-factor'), 'value');
         this.size.mode.bind(this.getModalElement('map-size-transform'), 'value');
+        // ====== 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 */