Fix symbol and map glitches (#383)

Fixes #380 - or at least, patches up the most glaring problem and adds a
bunch of symbols by monkey-patching plotly. The symbols are glyphs from
fonts, so size depends on which font is picked that seems to be browser
dependent. Also tackles a couple of small glitches when switching back
and forth from 3D/2D

eslint.config.mjs

@@ -42,6 +42,7 @@ export default tseslint.config({
                 allowDefaultProject: [
                     'eslint.config.mjs',
                     'src/map/plotly/plotly-scatter.js',
+                    'src/map/plotly/markers3d.js',
                     'python/webpack.config.labextension.js',
                     'python/webpack.config.nbextension.js',
                 ],

src/map/map.ts

@@ -1552,9 +1552,10 @@ export class PropertiesMap {
         this._updateMarkers();
 
         // Change the data that vary between 2D and 3D mode
+        const marker_line = this._options.markerOutline.value ? 0.5 : 0.0;
         this._restyle(
             {
-                'marker.line.width': [1, 2],
+                'marker.line.width': marker_line,
                 // size change from 2D to 3D
                 'marker.size': this._sizes(),
                 'marker.sizemode': 'area',
@@ -1593,10 +1594,11 @@ export class PropertiesMap {
             data.toggleVisible(true);
         }
 
+        const marker_line = this._options.markerOutline.value ? 0.5 : 0.0;
         this._restyle(
             {
-                'marker.line.width': [1, 0],
-                // size change from 2D to 3D
+                'marker.line.width': marker_line,
+                // size change from 3D to 2D
                 'marker.size': this._sizes(),
             } as Data,
             [0, 1]

src/map/options.ts

@@ -20,11 +20,11 @@ import { COLOR_MAPS } from './colorscales';
 import BARS_SVG from '../static/bars.svg';
 import HTML_OPTIONS from './options.html.in';
 
-// in 3D mode, only strings are supported for 'marker.symbol', and only very few
-// of them. See https://github.com/plotly/plotly.js/issues/4205 as the plotly
-// issue tracking more symbols in 3D mode.
-const POSSIBLE_SYMBOLS_IN_3D = ['circle', 'square', 'diamond', 'cross', 'x'];
-
+// in 3D mode, only strings are supported for 'marker.symbol'.
+/* eslint-disable */
+const markers3d = require('./plotly/markers3d');
+const POSSIBLE_SYMBOLS_IN_3D: string[] = Object.keys(markers3d.default);
+/* eslint-enable */
 export function get3DSymbol(i: number): string {
     return POSSIBLE_SYMBOLS_IN_3D[i % POSSIBLE_SYMBOLS_IN_3D.length];
 }

src/map/plotly/markers3d.js

@@ -0,0 +1,26 @@
+/** @type {{ [key: string]: string }} */
+const markers3d_dict = {
+    circle: '●',
+    square: '■',
+    diamond: '◆',
+    cross: '✚',
+    x: '✖',
+    'triangle-up': '▲',
+    'triangle-down': '▼',
+    'triangle-left': '◀',
+    'triangle-right': '▶',
+    'triangle-ne': '◥',
+    'triangle-se': '◢',
+    'triangle-sw': '◣',
+    'triangle-nw': '◤',
+    pentagon: '⬟',
+    hexagon: '⬢',
+    hexagon2: '⬣',
+    octagon: '⯃',
+    star: '🟊',
+    hexagram: '🟌',
+    hourglass: '⧗',
+    bowtie: '⧓',
+};
+
+export default markers3d_dict;

src/map/plotly/plotly-scatter.js

@@ -10,8 +10,19 @@
 
 'use strict';
 
+const markers3d = require('./markers3d.js');
+
+// Require the module
+const scatter3d = require('plotly.js/lib/scatter3d');
+// monkey patch scatter3d to include more (and better!) symbols for 3d plots
+// see https://github.com/plotly/plotly.js/issues/4205 in case this ever gets
+// patched upstream and becomes unnecessary
+for (const [k, v] of Object.entries(markers3d.default)) {
+    scatter3d.markerSymbols[k] = v;
+}
+
 const Plotly = require('plotly.js/lib/core');
 
-Plotly.register([require('plotly.js/lib/scattergl'), require('plotly.js/lib/scatter3d')]);
+Plotly.register([require('plotly.js/lib/scattergl'), scatter3d]);
 
 module.exports = Plotly;