Study: Update glyphs on board when they change

ui/analyse/css/study/panel/_glyph.scss

@@ -9,7 +9,7 @@
     flex: 1 0 30%;
   }
 
-  a {
+  button {
     @extend %flex-center-nowrap;
 
     @include transition;
@@ -18,6 +18,9 @@
     height: 2.3em;
     line-height: 2.3em;
     align-items: stretch;
+    border: none;
+    background: transparent;
+    width: 100%;
 
     &::before {
       @extend %flex-center;

ui/analyse/src/study/studyCtrl.ts

@@ -558,6 +558,7 @@ export default function (
       setMemberActive(who);
       if (wrongChapter(d)) return;
       ctrl.tree.setGlyphsAt(d.g, position.path);
+      if (ctrl.path === position.path) ctrl.setAutoShapes();
       redraw();
     },
     clock(d) {

ui/analyse/src/study/studyGlyph.ts

@@ -22,17 +22,10 @@ export interface GlyphCtrl {
 function renderGlyph(ctrl: GlyphCtrl, node: Tree.Node) {
   return function (glyph: Tree.Glyph) {
     return h(
-      'a',
+      'button',
       {
-        hook: bind(
-          'click',
-          _ => {
-            ctrl.toggleGlyph(glyph.id);
-            return false;
-          },
-          ctrl.redraw
-        ),
-        attrs: { 'data-symbol': glyph.symbol },
+        hook: bind('click', _ => ctrl.toggleGlyph(glyph.id), ctrl.redraw),
+        attrs: { 'data-symbol': glyph.symbol, type: 'button' },
         class: {
           active: !!node.glyphs && !!node.glyphs.find(g => g.id === glyph.id),
         },