insights: Update metric/dimension select on preset

ui/insight/src/axis.ts

@@ -1,18 +1,19 @@
 import Ctrl from './ctrl';
-import { MaybeVNode, onInsert } from 'common/snabbdom';
-import { h } from 'snabbdom';
+import { MaybeVNode } from 'common/snabbdom';
+import { h, VNodeData } from 'snabbdom';
 import { Categ, Dimension, Metric } from './interfaces';
 
-const selectData = (onClick: (v: { value: string }) => void) => ({
-  attrs: { multiple: true },
-  hook: onInsert(e =>
-    $(e).multipleSelect({
-      width: '200px',
-      maxHeight: '400px',
-      single: true,
-      onClick,
-    })
-  ),
+const selectData = (onClick: (v: { value: string }) => void, getValue: () => string): VNodeData => ({
+  hook: {
+    insert: vnode =>
+      $(vnode.elm).multipleSelect({
+        width: '200px',
+        maxHeight: '400px',
+        single: true,
+        onClick,
+      }),
+    update: vnode => $(vnode.elm).multipleSelect('setSelects', [getValue()]),
+  },
 });
 
 const optgroup =
@@ -42,13 +43,13 @@ export default function (ctrl: Ctrl) {
   return h('div.axis-form', [
     h(
       'select.ms.metric',
-      selectData(v => ctrl.setMetric(v.value)),
+      selectData(v => ctrl.setMetric(v.value), () => ctrl.vm.metric.key),
       ctrl.ui.metricCategs.map(optgroup(y => option(ctrl, y, 'metric')))
     ),
     h('span.by', 'by'),
     h(
       'select.ms.dimension',
-      selectData(v => ctrl.setDimension(v.value)),
+      selectData(v => ctrl.setDimension(v.value), () => ctrl.vm.metric.key),
       ctrl.ui.dimensionCategs.map(optgroup(x => (x.key !== 'period' ? option(ctrl, x, 'dimension') : undefined)))
     ),
   ]);

ui/insight/src/global.d.ts

@@ -11,19 +11,9 @@ interface Lichess {
 // actually be a jquery object.
 interface Cash {
   multipleSelect(method: 'getSelects'): string[];
+  multipleSelect(method: 'setSelects', values: string[]): void;
   multipleSelect(
-    method:
-      | 'setSelects'
-      | 'enable'
-      | 'disable'
-      | 'open'
-      | 'close'
-      | 'checkAll'
-      | 'uncheckAll'
-      | 'focus'
-      | 'blur'
-      | 'refresh'
-      | 'close'
+    method: 'enable' | 'disable' | 'open' | 'close' | 'checkAll' | 'uncheckAll' | 'focus' | 'blur' | 'refresh' | 'close'
   ): void;
   multipleSelect(option: MultiSelectOpts): void;
 }