@jbrowse/plugin-alignments 1.7.9 → 2.0.0

package/dist/LinearPileupDisplay/components/ColorByModifications.js

@@ -1,123 +1,105 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _mobxReact = require("mobx-react");
-
-var _core = require("@material-ui/core");
-
-var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));
-
-var useStyles = (0, _core.makeStyles)(function (theme) {
-  return {
-    closeButton: {
-      position: 'absolute',
-      right: theme.spacing(1),
-      top: theme.spacing(1),
-      color: theme.palette.grey[500]
-    },
-    table: {
-      border: '1px solid #888',
-      margin: theme.spacing(4),
-      '& td': {
-        padding: theme.spacing(1)
-      }
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
     }
-  };
-});
-
-function ModificationTable(_ref) {
-  var modifications = _ref.modifications;
-  var classes = useStyles();
-  return /*#__PURE__*/_react.default.createElement("table", {
-    className: classes.table
-  }, /*#__PURE__*/_react.default.createElement("tbody", null, modifications.map(function (_ref2) {
-    var _ref3 = (0, _slicedToArray2.default)(_ref2, 2),
-        key = _ref3[0],
-        value = _ref3[1];
-
-    return /*#__PURE__*/_react.default.createElement("tr", {
-      key: key
-    }, /*#__PURE__*/_react.default.createElement("td", null, key), /*#__PURE__*/_react.default.createElement("td", null, value), /*#__PURE__*/_react.default.createElement("td", {
-      style: {
-        width: '1em',
-        background: value
-      }
-    }));
-  })));
-}
-
-function ColorByTagDlg(props) {
-  var classes = useStyles();
-  var model = props.model,
-      handleClose = props.handleClose;
-  var colorBy = model.colorBy,
-      modificationTagMap = model.modificationTagMap;
-  var modifications = (0, _toConsumableArray2.default)(modificationTagMap.entries());
-  return /*#__PURE__*/_react.default.createElement(_core.Dialog, {
-    open: true,
-    onClose: handleClose
-  }, /*#__PURE__*/_react.default.createElement(_core.DialogTitle, null, "Color by modifications", /*#__PURE__*/_react.default.createElement(_core.IconButton, {
-    "aria-label": "close",
-    className: classes.closeButton,
-    onClick: handleClose
-  }, /*#__PURE__*/_react.default.createElement(_Close.default, null))), /*#__PURE__*/_react.default.createElement(_core.DialogContent, null, /*#__PURE__*/_react.default.createElement(_core.Typography, null, "You can choose to color the modifications in the BAM/CRAM MM/ML specification using this dialog. Choosing modifications colors the modified positions and can color multiple modification types. Choosing the methylation setting colors methylated and unmethylated CpG."), /*#__PURE__*/_react.default.createElement(_core.Typography, null, "Note: you can revisit this dialog to see the current mapping of colors to modification type for the modification coloring mode"), /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      margin: 20
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
     }
-  }, (colorBy === null || colorBy === void 0 ? void 0 : colorBy.type) === 'modifications' ? /*#__PURE__*/_react.default.createElement("div", null, modifications.length ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Current modification-type-to-color mapping", /*#__PURE__*/_react.default.createElement(ModificationTable, {
-    modifications: (0, _toConsumableArray2.default)(modificationTagMap.entries())
-  })) : /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_core.Typography, null, "Note: color by modifications is already enabled. Loading current modifications..."), /*#__PURE__*/_react.default.createElement(_core.CircularProgress, {
-    size: 15
-  }))) : null, (colorBy === null || colorBy === void 0 ? void 0 : colorBy.type) === 'methylation' ? /*#__PURE__*/_react.default.createElement(ModificationTable, {
-    modifications: [['methylated', 'red'], ['unmethylated', 'blue']]
-  }) : null), /*#__PURE__*/_react.default.createElement(_core.DialogActions, null, /*#__PURE__*/_react.default.createElement(_core.Button, {
-    variant: "contained",
-    color: "primary",
-    style: {
-      margin: 5
-    },
-    onClick: function onClick() {
-      model.setColorScheme({
-        type: 'modifications'
-      });
-      handleClose();
+    return ar;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
     }
-  }, "Modifications"), /*#__PURE__*/_react.default.createElement(_core.Button, {
-    variant: "contained",
-    color: "primary",
-    style: {
-      margin: 5
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var mobx_react_1 = require("mobx-react");
+var material_1 = require("@mui/material");
+var mui_1 = require("tss-react/mui");
+var Close_1 = __importDefault(require("@mui/icons-material/Close"));
+var useStyles = (0, mui_1.makeStyles)()(function (theme) { return ({
+    closeButton: {
+        position: 'absolute',
+        right: theme.spacing(1),
+        top: theme.spacing(1),
+        color: theme.palette.grey[500],
     },
-    onClick: function onClick() {
-      model.setColorScheme({
-        type: 'methylation'
-      });
-      handleClose();
-    }
-  }, "Methylation"), /*#__PURE__*/_react.default.createElement(_core.Button, {
-    variant: "contained",
-    color: "secondary",
-    style: {
-      margin: 5
+    table: {
+        border: '1px solid #888',
+        margin: theme.spacing(4),
+        '& td': {
+            padding: theme.spacing(1),
+        },
     },
-    onClick: function onClick() {
-      return handleClose();
-    }
-  }, "Cancel"))));
+}); });
+function ModificationTable(_a) {
+    var modifications = _a.modifications;
+    var classes = useStyles().classes;
+    return (react_1.default.createElement("table", { className: classes.table },
+        react_1.default.createElement("tbody", null, modifications.map(function (_a) {
+            var _b = __read(_a, 2), key = _b[0], value = _b[1];
+            return (react_1.default.createElement("tr", { key: key },
+                react_1.default.createElement("td", null, key),
+                react_1.default.createElement("td", null, value),
+                react_1.default.createElement("td", { style: {
+                        width: '1em',
+                        background: value,
+                    } })));
+        }))));
+}
+function ColorByTagDlg(props) {
+    var classes = useStyles().classes;
+    var model = props.model, handleClose = props.handleClose;
+    var colorBy = model.colorBy, modificationTagMap = model.modificationTagMap;
+    var modifications = __spreadArray([], __read(modificationTagMap.entries()), false);
+    return (react_1.default.createElement(material_1.Dialog, { open: true, onClose: handleClose },
+        react_1.default.createElement(material_1.DialogTitle, null,
+            "Color by modifications",
+            react_1.default.createElement(material_1.IconButton, { "aria-label": "close", className: classes.closeButton, onClick: handleClose },
+                react_1.default.createElement(Close_1.default, null))),
+        react_1.default.createElement(material_1.DialogContent, null,
+            react_1.default.createElement(material_1.Typography, null, "You can choose to color the modifications in the BAM/CRAM MM/ML specification using this dialog. Choosing modifications colors the modified positions and can color multiple modification types. Choosing the methylation setting colors methylated and unmethylated CpG."),
+            react_1.default.createElement(material_1.Typography, null, "Note: you can revisit this dialog to see the current mapping of colors to modification type for the modification coloring mode"),
+            react_1.default.createElement("div", { style: { margin: 20 } },
+                (colorBy === null || colorBy === void 0 ? void 0 : colorBy.type) === 'modifications' ? (react_1.default.createElement("div", null, modifications.length ? (react_1.default.createElement(react_1.default.Fragment, null,
+                    "Current modification-type-to-color mapping",
+                    react_1.default.createElement(ModificationTable, { modifications: __spreadArray([], __read(modificationTagMap.entries()), false) }))) : (react_1.default.createElement("div", null,
+                    react_1.default.createElement(material_1.Typography, null, "Note: color by modifications is already enabled. Loading current modifications..."),
+                    react_1.default.createElement(material_1.CircularProgress, { size: 15 }))))) : null,
+                (colorBy === null || colorBy === void 0 ? void 0 : colorBy.type) === 'methylation' ? (react_1.default.createElement(ModificationTable, { modifications: [
+                        ['methylated', 'red'],
+                        ['unmethylated', 'blue'],
+                    ] })) : null),
+            react_1.default.createElement(material_1.DialogActions, null,
+                react_1.default.createElement(material_1.Button, { variant: "contained", color: "primary", style: { margin: 5 }, onClick: function () {
+                        model.setColorScheme({
+                            type: 'modifications',
+                        });
+                        handleClose();
+                    } }, "Modifications"),
+                react_1.default.createElement(material_1.Button, { variant: "contained", color: "primary", style: { margin: 5 }, onClick: function () {
+                        model.setColorScheme({
+                            type: 'methylation',
+                        });
+                        handleClose();
+                    } }, "Methylation"),
+                react_1.default.createElement(material_1.Button, { variant: "contained", color: "secondary", style: { margin: 5 }, onClick: function () { return handleClose(); } }, "Cancel")))));
 }
-
-var _default = (0, _mobxReact.observer)(ColorByTagDlg);
-
-exports.default = _default;
+exports.default = (0, mobx_react_1.observer)(ColorByTagDlg);
+//# sourceMappingURL=ColorByModifications.js.map

package/dist/LinearPileupDisplay/components/ColorByModifications.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorByModifications.js","sourceRoot":"","sources":["../../../src/LinearPileupDisplay/components/ColorByModifications.tsx"],"names":[],"mappings":"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"}

package/dist/LinearPileupDisplay/components/ColorByTag.js

@@ -1,98 +1,89 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _mobxReact = require("mobx-react");
-
-var _core = require("@material-ui/core");
-
-var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-var useStyles = (0, _core.makeStyles)(function (theme) {
-  return {
-    root: {
-      width: 300
-    },
-    closeButton: {
-      position: 'absolute',
-      right: theme.spacing(1),
-      top: theme.spacing(1),
-      color: theme.palette.grey[500]
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
     }
-  };
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
 });
-
-function ColorByTagDlg(props) {
-  var classes = useStyles();
-  var model = props.model,
-      handleClose = props.handleClose;
-
-  var _useState = (0, _react.useState)(''),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      tag = _useState2[0],
-      setTag = _useState2[1];
-
-  var validTag = tag.match(/^[A-Za-z][A-Za-z0-9]$/);
-  return /*#__PURE__*/_react.default.createElement(_core.Dialog, {
-    open: true,
-    onClose: handleClose
-  }, /*#__PURE__*/_react.default.createElement(_core.DialogTitle, null, "Color by tag", /*#__PURE__*/_react.default.createElement(_core.IconButton, {
-    "aria-label": "close",
-    className: classes.closeButton,
-    onClick: handleClose
-  }, /*#__PURE__*/_react.default.createElement(_Close.default, null))), /*#__PURE__*/_react.default.createElement(_core.DialogContent, {
-    style: {
-      overflowX: 'hidden'
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
     }
-  }, /*#__PURE__*/_react.default.createElement(_core.Typography, null, "Enter tag to color by: "), /*#__PURE__*/_react.default.createElement(_core.Typography, {
-    color: "textSecondary"
-  }, "Examples: XS or TS for RNA-seq inferred read strand, ts (lower-case) for minimap2 read strand, HP for haplotype, RG for read group, etc."), /*#__PURE__*/_react.default.createElement(_core.TextField, {
-    value: tag,
-    onChange: function onChange(event) {
-      return setTag(event.target.value);
-    },
-    placeholder: "Enter tag name",
-    inputProps: {
-      maxLength: 2,
-      'data-testid': 'color-tag-name-input'
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var mobx_react_1 = require("mobx-react");
+var material_1 = require("@mui/material");
+var mui_1 = require("tss-react/mui");
+var Close_1 = __importDefault(require("@mui/icons-material/Close"));
+var useStyles = (0, mui_1.makeStyles)()(function (theme) { return ({
+    root: {
+        width: 300,
     },
-    error: tag.length === 2 && !validTag,
-    helperText: tag.length === 2 && !validTag ? 'Not a valid tag' : '',
-    autoComplete: "off",
-    "data-testid": "color-tag-name"
-  }), /*#__PURE__*/_react.default.createElement(_core.DialogActions, null, /*#__PURE__*/_react.default.createElement(_core.Button, {
-    variant: "contained",
-    color: "primary",
-    onClick: function onClick() {
-      model.setColorScheme({
-        type: 'tag',
-        tag: tag
-      });
-      handleClose();
+    closeButton: {
+        position: 'absolute',
+        right: theme.spacing(1),
+        top: theme.spacing(1),
+        color: theme.palette.grey[500],
     },
-    disabled: !validTag
-  }, "Submit"), /*#__PURE__*/_react.default.createElement(_core.Button, {
-    variant: "contained",
-    color: "secondary",
-    onClick: handleClose
-  }, "Cancel"))));
+}); });
+function ColorByTagDlg(props) {
+    var classes = useStyles().classes;
+    var model = props.model, handleClose = props.handleClose;
+    var _a = __read((0, react_1.useState)(''), 2), tag = _a[0], setTag = _a[1];
+    var validTag = tag.match(/^[A-Za-z][A-Za-z0-9]$/);
+    return (react_1.default.createElement(material_1.Dialog, { open: true, onClose: handleClose },
+        react_1.default.createElement(material_1.DialogTitle, null,
+            "Color by tag",
+            react_1.default.createElement(material_1.IconButton, { "aria-label": "close", className: classes.closeButton, onClick: handleClose },
+                react_1.default.createElement(Close_1.default, null))),
+        react_1.default.createElement(material_1.DialogContent, { style: { overflowX: 'hidden' } },
+            react_1.default.createElement(material_1.Typography, null, "Enter tag to color by: "),
+            react_1.default.createElement(material_1.Typography, { color: "textSecondary" }, "Examples: XS or TS for RNA-seq inferred read strand, ts (lower-case) for minimap2 read strand, HP for haplotype, RG for read group, etc."),
+            react_1.default.createElement(material_1.TextField, { value: tag, onChange: function (event) { return setTag(event.target.value); }, placeholder: "Enter tag name", inputProps: {
+                    maxLength: 2,
+                    'data-testid': 'color-tag-name-input',
+                }, error: tag.length === 2 && !validTag, helperText: tag.length === 2 && !validTag ? 'Not a valid tag' : '', autoComplete: "off", "data-testid": "color-tag-name" }),
+            react_1.default.createElement(material_1.DialogActions, null,
+                react_1.default.createElement(material_1.Button, { variant: "contained", color: "primary", onClick: function () {
+                        model.setColorScheme({
+                            type: 'tag',
+                            tag: tag,
+                        });
+                        handleClose();
+                    }, disabled: !validTag }, "Submit"),
+                react_1.default.createElement(material_1.Button, { variant: "contained", color: "secondary", onClick: handleClose }, "Cancel")))));
 }
-
-var _default = (0, _mobxReact.observer)(ColorByTagDlg);
-
-exports.default = _default;
+exports.default = (0, mobx_react_1.observer)(ColorByTagDlg);
+//# sourceMappingURL=ColorByTag.js.map

package/dist/LinearPileupDisplay/components/ColorByTag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorByTag.js","sourceRoot":"","sources":["../../../src/LinearPileupDisplay/components/ColorByTag.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAuC;AACvC,yCAAqC;AACrC,0CASsB;AACtB,qCAA0C;AAC1C,oEAAiD;AAEjD,IAAM,SAAS,GAAG,IAAA,gBAAU,GAAE,CAAC,UAAA,KAAK,IAAI,OAAA,CAAC;IACvC,IAAI,EAAE;QACJ,KAAK,EAAE,GAAG;KACX;IACD,WAAW,EAAE;QACX,QAAQ,EAAE,UAAU;QACpB,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;QACvB,GAAG,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;QACrB,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;KAC/B;CACF,CAAC,EAVsC,CAUtC,CAAC,CAAA;AAEH,SAAS,aAAa,CAAC,KAGtB;IACS,IAAA,OAAO,GAAK,SAAS,EAAE,QAAhB,CAAgB;IACvB,IAAA,KAAK,GAAkB,KAAK,MAAvB,EAAE,WAAW,GAAK,KAAK,YAAV,CAAU;IAC9B,IAAA,KAAA,OAAgB,IAAA,gBAAQ,EAAC,EAAE,CAAC,IAAA,EAA3B,GAAG,QAAA,EAAE,MAAM,QAAgB,CAAA;IAClC,IAAM,QAAQ,GAAG,GAAG,CAAC,KAAK,CAAC,uBAAuB,CAAC,CAAA;IAEnD,OAAO,CACL,8BAAC,iBAAM,IAAC,IAAI,QAAC,OAAO,EAAE,WAAW;QAC/B,8BAAC,sBAAW;;YAEV,8BAAC,qBAAU,kBACE,OAAO,EAClB,SAAS,EAAE,OAAO,CAAC,WAAW,EAC9B,OAAO,EAAE,WAAW;gBAEpB,8BAAC,eAAS,OAAG,CACF,CACD;QACd,8BAAC,wBAAa,IAAC,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE;YAC3C,8BAAC,qBAAU,kCAAqC;YAChD,8BAAC,qBAAU,IAAC,KAAK,EAAC,eAAe,+IAGpB;YAEb,8BAAC,oBAAS,IACR,KAAK,EAAE,GAAG,EACV,QAAQ,EAAE,UAAA,KAAK,IAAI,OAAA,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,EAA1B,CAA0B,EAC7C,WAAW,EAAC,gBAAgB,EAC5B,UAAU,EAAE;oBACV,SAAS,EAAE,CAAC;oBACZ,aAAa,EAAE,sBAAsB;iBACtC,EACD,KAAK,EAAE,GAAG,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,QAAQ,EACpC,UAAU,EAAE,GAAG,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,EAClE,YAAY,EAAC,KAAK,iBACN,gBAAgB,GAC5B;YACF,8BAAC,wBAAa;gBACZ,8BAAC,iBAAM,IACL,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,SAAS,EACf,OAAO,EAAE;wBACP,KAAK,CAAC,cAAc,CAAC;4BACnB,IAAI,EAAE,KAAK;4BACX,GAAG,KAAA;yBACJ,CAAC,CAAA;wBACF,WAAW,EAAE,CAAA;oBACf,CAAC,EACD,QAAQ,EAAE,CAAC,QAAQ,aAGZ;gBACT,8BAAC,iBAAM,IAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,WAAW,EAAC,OAAO,EAAE,WAAW,aAEzD,CACK,CACF,CACT,CACV,CAAA;AACH,CAAC;AAED,kBAAe,IAAA,qBAAQ,EAAC,aAAa,CAAC,CAAA"}