(core) Update grainjs, fix some code affected by stronger types.

Summary: Also clean up dom-ownership in Charts using the new grainjs maybeOwned() method.

Test Plan: Should be no behaviour changes; existing tests should pass

Reviewers: georgegevoian

Reviewed By: georgegevoian

Differential Revision: https://phab.getgrist.com/D3166

app/client/components/ChartView.ts

@@ -22,8 +22,8 @@ import {nativeCompare} from 'app/common/gutil';
 import {BaseFormatter} from 'app/common/ValueFormatter';
 import {decodeObject} from 'app/plugin/objtypes';
 import {Events as BackboneEvents} from 'backbone';
-import {Computed, dom, DomElementArg, fromKo, Disposable as GrainJSDisposable, IOption,
-  makeTestId, MultiHolder, Observable, styled} from 'grainjs';
+import {Computed, dom, DomContents, DomElementArg, fromKo, Disposable as GrainJSDisposable, IOption,
+  makeTestId, Observable, styled} from 'grainjs';
 import * as ko from 'knockout';
 import clamp = require('lodash/clamp');
 import debounce = require('lodash/debounce');
@@ -477,13 +477,11 @@ export class ChartConfig extends GrainJSDisposable {
 
   private get _optionsObj() { return this._section.optionsObj; }
 
-  public buildDom() {
+  public buildDom(): DomContents {
 
     if (this._section.parentKey() !== 'chart') { return null; }
 
-    const owner = new MultiHolder();
     return [
-      dom.autoDispose(owner),
       cssRow(
         select(this._chartType, [
           {value: 'bar',          label: 'Bar Chart',         icon: 'ChartBar'   },
@@ -502,7 +500,7 @@ export class ChartConfig extends GrainJSDisposable {
         cssCheckboxRow('Invert Y-axis', this._optionsObj.prop('invertYAxis')),
         cssCheckboxRow('Log scale Y-axis', this._optionsObj.prop('logYAxis')),
       ]),
-      dom.maybe((use) => use(this._section.chartTypeDef) === 'donut', () => [
+      dom.maybeOwned((use) => use(this._section.chartTypeDef) === 'donut', (owner) => [
         cssSlideRow(
           'Hole Size',
           Computed.create(owner, (use) => use(this._optionsObj.prop('donutHoleSize')) ?? DONUT_DEFAULT_HOLE_SIZE),
@@ -658,7 +656,7 @@ export class ChartConfig extends GrainJSDisposable {
     );
   }
 
-  private _buildYAxis() {
+  private _buildYAxis(): Element {
 
     // The y-axis are all visible fields that comes after the x-axis and maybe the group data
     // column. Hence the draggable list of y-axis needs to skip either one or two visible fields.

app/client/declarations.d.ts

@@ -101,7 +101,7 @@ declare module "app/client/components/ViewConfigTab" {
   import {Disposable} from 'app/client/lib/dispose';
   import {KoArray} from "app/client/lib/koArray";
   import {ColumnRec, ViewRec, ViewSectionRec} from "app/client/models/DocModel";
-  import {DomArg} from 'grainjs';
+  import {DomArg, DomContents} from 'grainjs';
 
   namespace ViewConfigTab {
     interface ViewSectionData {
@@ -113,7 +113,7 @@ declare module "app/client/components/ViewConfigTab" {
   class ViewConfigTab extends Disposable {
     constructor(options: {gristDoc: GristDoc, viewModel: ViewRec, skipDomBuild?: boolean});
     public buildConfigDomObj(): TabContent[];
-    public buildSortDom(): DomArg;
+    public buildSortDom(): DomContents;
     // TODO: these should be made private or renamed.
     public _buildSectionFieldsConfig(): DomArg;
     public _buildNameDom(): DomArg;
@@ -123,7 +123,7 @@ declare module "app/client/components/ViewConfigTab" {
     public _buildFilterDom(): DomArg;
     public _buildThemeDom(): DomArg;
     public _buildGridStyleDom(): DomArg;
-    public _buildChartConfigDom(): DomArg;
+    public _buildChartConfigDom(): DomContents;
     public _buildLayoutDom(): DomArg;
     public _buildLinkDom(): DomArg;
     public _buildCustomTypeItems(): DomArg;

app/client/ui/DocMenu.ts

@@ -50,7 +50,7 @@ function createLoadedDocMenu(home: HomeModel) {
   return css.docList(
     dom.maybe(!home.app.currentFeatures.workspaces, () => [
       css.docListHeader('This service is not available right now'),
-      dom.text('(The organization needs a paid plan)')
+      dom('span', '(The organization needs a paid plan)')
     ]),
 
     // currentWS and showIntro observables change together. We capture both in one domComputed call.

app/client/ui/RightPanel.ts

@@ -323,25 +323,23 @@ export class RightPanel extends Disposable {
         vct._buildChartConfigDom(),
       ]),
 
-      dom.maybe((use) => use(this._pageWidgetType) === 'custom', () => [
-        cssLabel('CUSTOM'),
-        () => {
-          const parts = vct._buildCustomTypeItems() as any[];
-          return [
-            // If 'customViewPlugin' feature is on, show the toggle that allows switching to
-            // plugin mode. Note that the default mode for a new 'custom' view is 'url', so that's
-            // the only one that will be shown without the feature flag.
-            dom.maybe((use) => use(this._gristDoc.app.features).customViewPlugin,
-              () => dom('div', parts[0].buildDom())),
-            dom.maybe(use => use(activeSection.customDef.mode) === 'plugin',
-                      () => dom('div', parts[2].buildDom())),
-            // In the default url mode, allow picking a url and granting/forbidding
-            // access to data.
-            dom.maybe(use => use(activeSection.customDef.mode) === 'url',
-                      () => dom.create(CustomSectionConfig, activeSection, this._gristDoc.app.topAppModel.api)),
-          ];
-        }
-      ]),
+      dom.maybe((use) => use(this._pageWidgetType) === 'custom', () => {
+        const parts = vct._buildCustomTypeItems() as any[];
+        return [
+          cssLabel('CUSTOM'),
+          // If 'customViewPlugin' feature is on, show the toggle that allows switching to
+          // plugin mode. Note that the default mode for a new 'custom' view is 'url', so that's
+          // the only one that will be shown without the feature flag.
+          dom.maybe((use) => use(this._gristDoc.app.features).customViewPlugin,
+            () => dom('div', parts[0].buildDom())),
+          dom.maybe(use => use(activeSection.customDef.mode) === 'plugin',
+            () => dom('div', parts[2].buildDom())),
+          // In the default url mode, allow picking a url and granting/forbidding
+          // access to data.
+          dom.maybe(use => use(activeSection.customDef.mode) === 'url',
+            () => dom.create(CustomSectionConfig, activeSection, this._gristDoc.app.topAppModel.api)),
+        ];
+      }),
 
       dom.maybe((use) => use(this._pageWidgetType) !== 'chart', () => [
         cssSeparator(),