@jbrowse/core 1.7.8 → 1.7.11

package/util/jexl.js

@@ -25,15 +25,14 @@ _default() {
   j.addFunction('id', function (feature) {
     return feature.id();
   }); // let user cast a jexl type into a javascript type
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
   j.addFunction('cast', function (arg) {
     return arg;
   }); // logging
 
   j.addFunction('log', function (thing) {
-    // eslint-disable-next-line no-console
-    console.log(thing);
+    console.log(thing); // eslint-disable-line no-console
+
     return thing;
   }); // math
   // addfunction added in jexl 2.3 but types/jexl still on 2.2
@@ -49,66 +48,66 @@ _default() {
   j.addFunction('parseInt', Number.parseInt);
   j.addFunction('parseFloat', Number.parseFloat); // string
 
-  j.addFunction('split', function (str, char) {
-    return str.split(char);
+  j.addFunction('split', function (s, char) {
+    return s.split(char);
   });
-  j.addFunction('charAt', function (str, index) {
-    return str.charAt(index);
+  j.addFunction('charAt', function (s, index) {
+    return s.charAt(index);
   });
-  j.addFunction('charCodeAt', function (str, index) {
-    return str.charCodeAt(index);
+  j.addFunction('charCodeAt', function (s, index) {
+    return s.charCodeAt(index);
   });
-  j.addFunction('codePointAt', function (str, pos) {
-    return str.codePointAt(pos);
+  j.addFunction('codePointAt', function (s, pos) {
+    return s.codePointAt(pos);
   });
-  j.addFunction('startsWith', function (str, searchStr, length) {
-    return str.startsWith(searchStr, length);
+  j.addFunction('startsWith', function (s, search, len) {
+    return s.startsWith(search, len);
   });
-  j.addFunction('endsWith', function (str, searchStr, length) {
-    return str.endsWith(searchStr, length);
+  j.addFunction('endsWith', function (s, search, len) {
+    return s.endsWith(search, len);
   });
-  j.addFunction('padEnd', function (str, targetLength, padString) {
-    return str.padEnd(targetLength, padString);
+  j.addFunction('padEnd', function (s, len, pad) {
+    return s.padEnd(len, pad);
   });
-  j.addFunction('padStart', function (str, targetLength, fillString) {
-    return str.padStart(targetLength, fillString);
+  j.addFunction('padStart', function (s, len, fill) {
+    return s.padStart(len, fill);
   });
-  j.addFunction('repeat', function (str, count) {
-    return str.repeat(count);
+  j.addFunction('repeat', function (s, count) {
+    return s.repeat(count);
   });
-  j.addFunction('replace', function (str, match, newSubStr) {
-    return str.replace(match, newSubStr);
+  j.addFunction('replace', function (s, match, sub) {
+    return s.replace(match, sub);
   });
-  j.addFunction('replaceAll', function (str, match, newSubStr) {
-    return str.replaceAll(match, newSubStr);
+  j.addFunction('replaceAll', function (s, match, sub) {
+    return s.replaceAll(match, sub);
   });
-  j.addFunction('slice', function (str, start, end) {
-    return str.slice(start, end);
+  j.addFunction('slice', function (s, start, end) {
+    return s.slice(start, end);
   });
-  j.addFunction('startsWith', function (str, searchStr, position) {
-    return str.startsWith(searchStr, position);
+  j.addFunction('startsWith', function (s, search, pos) {
+    return s.startsWith(search, pos);
   });
-  j.addFunction('substring', function (str, start, end) {
-    return str.substring(start, end);
+  j.addFunction('substring', function (s, start, end) {
+    return s.substring(start, end);
   });
-  j.addFunction('toLowerCase', function (str) {
-    return str.toLowerCase();
+  j.addFunction('toLowerCase', function (s) {
+    return s.toLowerCase();
   });
-  j.addFunction('toUpperCase', function (str) {
-    return str.toUpperCase();
+  j.addFunction('toUpperCase', function (s) {
+    return s.toUpperCase();
   });
-  j.addFunction('trim', function (str) {
-    str.trim();
+  j.addFunction('trim', function (s) {
+    return s.trim();
   });
-  j.addFunction('trimEnd', function (str) {
-    return str.trimEnd();
+  j.addFunction('trimEnd', function (s) {
+    return s.trimEnd();
   });
-  j.addFunction('trimStart', function (str) {
-    return str.trimStart();
+  j.addFunction('trimStart', function (s) {
+    return s.trimStart();
   });
-  j.addFunction('getTag', function (feature, str) {
+  j.addFunction('getTag', function (feature, s) {
     var tags = feature.get('tags');
-    return tags ? tags[str] : feature.get(str);
+    return tags ? tags[s] : feature.get(s);
   });
   j.addBinaryOp('&', 15, function (a, b) {
     return a & b;

package/util/offscreenCanvasPonyfill.d.ts

@@ -1 +1,8 @@
-export * from "./offscreenCanvas/ponyfill";
+declare type AbstractCanvas = any;
+declare type AbstractImageBitmap = any;
+export declare let createCanvas: (width: number, height: number) => AbstractCanvas;
+export declare let createImageBitmap: (canvas: AbstractCanvas) => Promise<AbstractImageBitmap>;
+/** the JS class (constructor) for offscreen-generated image bitmap data */
+export declare let ImageBitmapType: Function;
+export declare function drawImageOntoCanvasContext(imageData: any, context: CanvasRenderingContext2D): void;
+export {};

package/util/offscreenCanvasPonyfill.js

@@ -1,18 +1,144 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.createImageBitmap = exports.createCanvas = exports.ImageBitmapType = void 0;
+exports.drawImageOntoCanvasContext = drawImageOntoCanvasContext;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _detectNode = _interopRequireDefault(require("detect-node"));
+
+var _canvasSequencer = require("canvas-sequencer");
+
+// This file is a ponyfill for the HTML5 OffscreenCanvas API.
+var createCanvas;
+exports.createCanvas = createCanvas;
+var createImageBitmap;
+/** the JS class (constructor) for offscreen-generated image bitmap data */
+
+exports.createImageBitmap = createImageBitmap;
+var ImageBitmapType;
+exports.ImageBitmapType = ImageBitmapType;
+
+function drawImageOntoCanvasContext( // eslint-disable-next-line @typescript-eslint/no-explicit-any
+imageData, context) {
+  if (imageData.serializedCommands) {
+    var seq = new _canvasSequencer.CanvasSequence(imageData.serializedCommands);
+    seq.execute(context);
+  } else {
+    context.drawImage(imageData, 0, 0);
+  }
+}
+
+var weHave = {
+  realOffscreenCanvas: typeof OffscreenCanvas === 'function',
+  node: _detectNode.default
+};
+
+if (weHave.realOffscreenCanvas) {
+  exports.createCanvas = createCanvas = function createCanvas(width, height) {
+    return new OffscreenCanvas(width, height);
+  }; // eslint-disable-next-line no-restricted-globals
+
+
+  exports.createImageBitmap = createImageBitmap = window.createImageBitmap || self.createImageBitmap; // eslint-disable-next-line no-restricted-globals
+
+  exports.ImageBitmapType = ImageBitmapType = window.ImageBitmap || self.ImageBitmap;
+} else if (weHave.node) {
+  // use node-canvas if we are running in node (i.e. automated tests)
+  exports.createCanvas = createCanvas = function createCanvas() {
+    // @ts-ignore
+    // eslint-disable-next-line no-undef
+    return nodeCreateCanvas.apply(void 0, arguments);
+  };
+
+  exports.createImageBitmap = createImageBitmap = /*#__PURE__*/function () {
+    var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(canvas) {
+      var dataUri,
+          img,
+          _args = arguments;
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              if (!(_args.length <= 1 ? 0 : _args.length - 1)) {
+                _context.next = 2;
+                break;
+              }
+
+              throw new Error('only one-argument uses of createImageBitmap are supported by the node offscreencanvas ponyfill');
+
+            case 2:
+              dataUri = canvas.toDataURL(); // @ts-ignore
+              // eslint-disable-next-line no-undef
+
+              img = new nodeImage();
+              return _context.abrupt("return", new Promise(function (resolve, reject) {
+                img.onload = function () {
+                  return resolve(img);
+                };
+
+                img.onerror = reject;
+                img.src = dataUri;
+              }));
+
+            case 5:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function createImageBitmap(_x) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+} else {
+  exports.createCanvas = createCanvas = function createCanvas(width, height) {
+    var context = new _canvasSequencer.CanvasSequence();
+    return {
+      width: width,
+      height: height,
+      getContext: function getContext() {
+        return context;
+      }
+    };
+  };
+
+  exports.createImageBitmap = createImageBitmap = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(canvas) {
+      var ctx;
+      return _regenerator.default.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              ctx = canvas.getContext('2d');
+              return _context2.abrupt("return", {
+                height: canvas.height,
+                width: canvas.width,
+                serializedCommands: ctx.toJSON(),
+                containsNoTransferables: true
+              });
+
+            case 2:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    }));
+
+    return function createImageBitmap(_x2) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
 
-var _ponyfill = require("./offscreenCanvas/ponyfill");
-
-Object.keys(_ponyfill).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _ponyfill[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _ponyfill[key];
-    }
-  });
-});
+  exports.ImageBitmapType = ImageBitmapType = String;
+}

package/util/offscreenCanvasUtils.d.ts

@@ -1 +1,19 @@
-export * from './offscreenCanvas';
+/// <reference types="react" />
+export declare function renderToAbstractCanvas(width: number, height: number, opts: {
+    exportSVG?: {
+        rasterizeLayers?: boolean;
+    };
+    highResolutionScaling: number;
+}, cb: Function): Promise<{
+    canvasRecordedData: any;
+    reactElement?: undefined;
+    imageData?: undefined;
+} | {
+    reactElement: JSX.Element;
+    canvasRecordedData?: undefined;
+    imageData?: undefined;
+} | {
+    imageData: any;
+    canvasRecordedData?: undefined;
+    reactElement?: undefined;
+}>;

package/util/offscreenCanvasUtils.js

@@ -1,18 +1,152 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.renderToAbstractCanvas = renderToAbstractCanvas;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _offscreenCanvasPonyfill = require("./offscreenCanvasPonyfill");
+
+var _canvasSequencer = require("canvas-sequencer");
+
+var _index = require("./index");
+
+function renderToAbstractCanvas(_x, _x2, _x3, _x4) {
+  return _renderToAbstractCanvas.apply(this, arguments);
+}
+
+function _renderToAbstractCanvas() {
+  _renderToAbstractCanvas = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(width, height, opts, cb) {
+    var exportSVG, _opts$highResolutionS, highResolutionScaling, fakeCtx, scale, canvas, ctx, _canvas, _ctx;
+
+    return _regenerator.default.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            exportSVG = opts.exportSVG, _opts$highResolutionS = opts.highResolutionScaling, highResolutionScaling = _opts$highResolutionS === void 0 ? 1 : _opts$highResolutionS;
+
+            if (!exportSVG) {
+              _context.next = 37;
+              break;
+            }
+
+            if (exportSVG.rasterizeLayers) {
+              _context.next = 9;
+              break;
+            }
+
+            fakeCtx = new _canvasSequencer.CanvasSequence();
+            _context.next = 6;
+            return cb(fakeCtx);
+
+          case 6:
+            return _context.abrupt("return", {
+              canvasRecordedData: fakeCtx.toJSON()
+            });
+
+          case 9:
+            scale = 4;
+            canvas = (0, _offscreenCanvasPonyfill.createCanvas)(Math.ceil(width * scale), height * scale);
+            ctx = canvas.getContext('2d');
+
+            if (ctx) {
+              _context.next = 14;
+              break;
+            }
+
+            throw new Error('2d canvas rendering not supported on this platform');
+
+          case 14:
+            ctx.scale(scale, scale);
+            _context.next = 17;
+            return cb(ctx);
+
+          case 17:
+            _context.t0 = _react.default;
+            _context.t1 = width;
+            _context.t2 = height;
+
+            if (!('convertToBlob' in canvas)) {
+              _context.next = 30;
+              break;
+            }
+
+            _context.t4 = _index.blobToDataURL;
+            _context.next = 24;
+            return canvas.convertToBlob({
+              type: 'image/png'
+            });
+
+          case 24:
+            _context.t5 = _context.sent;
+            _context.next = 27;
+            return (0, _context.t4)(_context.t5);
+
+          case 27:
+            _context.t3 = _context.sent;
+            _context.next = 31;
+            break;
+
+          case 30:
+            _context.t3 = canvas.toDataURL();
+
+          case 31:
+            _context.t6 = _context.t3;
+            _context.t7 = {
+              width: _context.t1,
+              height: _context.t2,
+              xlinkHref: _context.t6
+            };
+            _context.t8 = _context.t0.createElement.call(_context.t0, "image", _context.t7);
+            return _context.abrupt("return", {
+              reactElement: _context.t8
+            });
+
+          case 35:
+            _context.next = 48;
+            break;
+
+          case 37:
+            _canvas = (0, _offscreenCanvasPonyfill.createCanvas)(Math.ceil(width * highResolutionScaling), height * highResolutionScaling);
+            _ctx = _canvas.getContext('2d');
+
+            if (_ctx) {
+              _context.next = 41;
+              break;
+            }
+
+            throw new Error('2d canvas rendering not supported on this platform');
+
+          case 41:
+            _ctx.scale(highResolutionScaling, highResolutionScaling);
+
+            _context.next = 44;
+            return cb(_ctx);
+
+          case 44:
+            _context.next = 46;
+            return (0, _offscreenCanvasPonyfill.createImageBitmap)(_canvas);
+
+          case 46:
+            _context.t9 = _context.sent;
+            return _context.abrupt("return", {
+              imageData: _context.t9
+            });
 
-var _offscreenCanvas = require("./offscreenCanvas");
-
-Object.keys(_offscreenCanvas).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _offscreenCanvas[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _offscreenCanvas[key];
-    }
-  });
-});
+          case 48:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+  return _renderToAbstractCanvas.apply(this, arguments);
+}

package/util/types/index.d.ts

@@ -13,7 +13,7 @@ export * from './util';
 export interface AbstractViewContainer extends IAnyStateTreeNode {
     views: AbstractViewModel[];
     removeView(view: AbstractViewModel): void;
-    addView(typeName: string, initialState: Record<string, unknown>): void | AbstractViewModel;
+    addView(typeName: string, initialState?: Record<string, unknown>): void | AbstractViewModel;
 }
 export declare function isViewContainer(thing: unknown): thing is AbstractViewContainer;
 export declare type NotificationLevel = 'error' | 'info' | 'warning' | 'success';
@@ -43,6 +43,7 @@ export interface JBrowsePlugin {
 export declare type DialogComponentType = React.LazyExoticComponent<React.FC<any>> | React.FC<any>;
 /** minimum interface that all session state models must implement */
 export interface AbstractSessionModel extends AbstractViewContainer {
+    drawerPosition?: string;
     setSelection(feature: Feature): void;
     clearSelection(): void;
     configuration: AnyConfigurationModel;
@@ -63,6 +64,8 @@ export interface AbstractSessionModel extends AbstractViewContainer {
     sessionConnections?: AnyConfigurationModel[];
     connectionInstances?: {
         name: string;
+        connectionId: string;
+        tracks: AnyConfigurationModel[];
     }[];
     makeConnection?: Function;
     adminMode?: boolean;
@@ -73,6 +76,7 @@ export interface AbstractSessionModel extends AbstractViewContainer {
     queueDialog: (callback: (doneCallback: Function) => [DialogComponentType, any]) => void;
     name: string;
     id?: string;
+    tracks: AnyConfigurationModel[];
 }
 export declare function isSessionModel(thing: unknown): thing is AbstractSessionModel;
 /** abstract interface for a session allows editing configurations */
@@ -110,6 +114,10 @@ export interface SessionWithDrawerWidgets extends SessionWithWidgets {
     setDrawerPosition(arg: string): void;
 }
 export declare function isSessionModelWithWidgets(thing: unknown): thing is SessionWithWidgets;
+interface SessionWithConnections {
+    addConnectionConf: (arg: AnyConfigurationModel) => void;
+}
+export declare function isSessionModelWithConnections(thing: unknown): thing is SessionWithConnections;
 export interface SessionWithSessionPlugins extends AbstractSessionModel {
     sessionPlugins: JBrowsePlugin[];
     addSessionPlugin: Function;
@@ -133,7 +141,9 @@ export interface AbstractViewModel {
     menuItems: () => MenuItem[];
 }
 export declare function isViewModel(thing: unknown): thing is AbstractViewModel;
-declare type AbstractTrackModel = {};
+export interface AbstractTrackModel {
+    displays: AbstractDisplayModel[];
+}
 export declare function isTrackModel(thing: unknown): thing is AbstractTrackModel;
 export interface AbstractDisplayModel {
     id: string;

package/util/types/index.js

@@ -11,6 +11,7 @@ var _exportNames = {
   isSessionModelWithConfigEditing: true,
   isSessionWithAddTracks: true,
   isSessionModelWithWidgets: true,
+  isSessionModelWithConnections: true,
   isSessionWithSessionPlugins: true,
   isSelectionContainer: true,
   isViewModel: true,
@@ -34,6 +35,7 @@ exports.isRetryException = isRetryException;
 exports.isSelectionContainer = isSelectionContainer;
 exports.isSessionModel = isSessionModel;
 exports.isSessionModelWithConfigEditing = isSessionModelWithConfigEditing;
+exports.isSessionModelWithConnections = isSessionModelWithConnections;
 exports.isSessionModelWithWidgets = isSessionModelWithWidgets;
 exports.isSessionWithAddTracks = isSessionWithAddTracks;
 exports.isSessionWithSessionPlugins = isSessionWithSessionPlugins;
@@ -103,6 +105,10 @@ function isSessionModelWithWidgets(thing) {
   return isSessionModel(thing) && 'widgets' in thing;
 }
 
+function isSessionModelWithConnections(thing) {
+  return isSessionModel(thing) && 'addConnectionConf' in thing;
+}
+
 function isSessionWithSessionPlugins(thing) {
   return isSessionModel(thing) && 'sessionPlugins' in thing;
 }

package/util/types/mst.d.ts

@@ -77,13 +77,13 @@ export declare const FileLocation: import("mobx-state-tree").ISnapshotProcessor<
         internetAccountType: import("mobx-state-tree").ISimpleType<string>;
         authInfo: import("mobx-state-tree").IType<any, any, any>;
     }, {}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
-}>> | import("mobx-state-tree").ModelCreationType<import("mobx-state-tree/dist/internal").ExtractCFromProps<{
-    locationType: import("mobx-state-tree").ISimpleType<"LocalPathLocation">;
-    localPath: import("mobx-state-tree").ISimpleType<string>;
 }>> | import("mobx-state-tree").ModelCreationType<import("mobx-state-tree/dist/internal").ExtractCFromProps<{
     locationType: import("mobx-state-tree").ISimpleType<"BlobLocation">;
     name: import("mobx-state-tree").ISimpleType<string>;
     blobId: import("mobx-state-tree").ISimpleType<string>;
+}>> | import("mobx-state-tree").ModelCreationType<import("mobx-state-tree/dist/internal").ExtractCFromProps<{
+    locationType: import("mobx-state-tree").ISimpleType<"LocalPathLocation">;
+    localPath: import("mobx-state-tree").ISimpleType<string>;
 }>>, {
     locationType: "UriLocation";
     uri: string;
@@ -93,12 +93,12 @@ export declare const FileLocation: import("mobx-state-tree").ISnapshotProcessor<
         authInfo: import("mobx-state-tree").IType<any, any, any>;
     }> | undefined;
 } | import("mobx-state-tree").ModelSnapshotType<{
-    locationType: import("mobx-state-tree").ISimpleType<"LocalPathLocation">;
-    localPath: import("mobx-state-tree").ISimpleType<string>;
-}> | import("mobx-state-tree").ModelSnapshotType<{
     locationType: import("mobx-state-tree").ISimpleType<"BlobLocation">;
     name: import("mobx-state-tree").ISimpleType<string>;
     blobId: import("mobx-state-tree").ISimpleType<string>;
+}> | import("mobx-state-tree").ModelSnapshotType<{
+    locationType: import("mobx-state-tree").ISimpleType<"LocalPathLocation">;
+    localPath: import("mobx-state-tree").ISimpleType<string>;
 }>, import("mobx-state-tree").ModelCreationType<import("mobx-state-tree/dist/internal").ExtractCFromProps<{
     locationType: import("mobx-state-tree").ISimpleType<"UriLocation">;
     uri: import("mobx-state-tree").ISimpleType<string>;
@@ -109,10 +109,10 @@ export declare const FileLocation: import("mobx-state-tree").ISnapshotProcessor<
         authInfo: import("mobx-state-tree").IType<any, any, any>;
     }, {}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
 }>> | import("mobx-state-tree").ModelInstanceTypeProps<{
-    locationType: import("mobx-state-tree").ISimpleType<"LocalPathLocation">;
-    localPath: import("mobx-state-tree").ISimpleType<string>;
-}> | import("mobx-state-tree").ModelInstanceTypeProps<{
     locationType: import("mobx-state-tree").ISimpleType<"BlobLocation">;
     name: import("mobx-state-tree").ISimpleType<string>;
     blobId: import("mobx-state-tree").ISimpleType<string>;
+}> | import("mobx-state-tree").ModelInstanceTypeProps<{
+    locationType: import("mobx-state-tree").ISimpleType<"LocalPathLocation">;
+    localPath: import("mobx-state-tree").ISimpleType<string>;
 }>>, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;

package/util/offscreenCanvas/Canvas2DContextShim/Canvas2DContextShim.test.js

@@ -1,15 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _ = _interopRequireDefault(require("."));
-
-test('serialize a single command and read back out', function () {
-  var ctx = new _.default(100, 100);
-  ctx.arc(20, 21, 22, 23, 24);
-  var cmds = Array.from(ctx.getCommands());
-  expect(cmds).toEqual([{
-    name: 'arc',
-    args: [20, 21, 22, 23, 24]
-  }]);
-});