@jbrowse/plugin-dotplot-view 2.6.1

package/esm/DotplotView/components/ImportSyntenyTrackSelector.js

@@ -0,0 +1,44 @@
+import React, { useState, useEffect } from 'react';
+import { Select, MenuItem, Paper, Typography } from '@mui/material';
+import { getTrackName } from '@jbrowse/core/util/tracks';
+import { getSession } from '@jbrowse/core/util';
+import { ErrorMessage } from '@jbrowse/core/ui';
+import { readConfObject, } from '@jbrowse/core/configuration';
+import { observer } from 'mobx-react';
+// icons
+import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons';
+function f(track, assembly1, assembly2) {
+    const assemblyNames = readConfObject(track, 'assemblyNames');
+    return (assemblyNames.includes(assembly1) &&
+        assemblyNames.includes(assembly2) &&
+        track.type.includes('Synteny'));
+}
+const Selector = observer(({ model, assembly1, assembly2, setShowTrackId, }) => {
+    var _a;
+    const session = getSession(model);
+    const { tracks, sessionTracks } = session;
+    const allTracks = [...tracks, ...sessionTracks];
+    const filteredTracks = allTracks.filter(t => f(t, assembly2, assembly1));
+    const resetTrack = ((_a = filteredTracks[0]) === null || _a === void 0 ? void 0 : _a.trackId) || '';
+    const [value, setValue] = useState(resetTrack);
+    useEffect(() => {
+        // if assembly1/assembly2 changes, then we will want to use this effect to change
+        // the state of the useState because it otherwise gets locked to a stale value
+        setValue(resetTrack);
+    }, [resetTrack]);
+    useEffect(() => {
+        // sets track data in a useEffect because the initial load is needed as well as
+        // onChange's to the select box
+        setShowTrackId(value);
+    }, [value, setShowTrackId]);
+    return (React.createElement(Paper, { style: { padding: 12 } },
+        React.createElement(Typography, { paragraph: true }, "Select a track from the select box below, the track will be shown when you hit \"Launch\"."),
+        React.createElement(Typography, { paragraph: true },
+            "Note: there is a track selector ",
+            React.createElement("i", null, "inside"),
+            " the DotplotView, which can turn on one or more SyntenyTracks (more than one can be displayed at once). Look for the track selector icon ",
+            React.createElement(TrackSelectorIcon, null)),
+        filteredTracks.length ? (React.createElement(Select, { value: value, onChange: event => setValue(event.target.value) }, filteredTracks.map(track => (React.createElement(MenuItem, { key: track.trackId, value: track.trackId }, getTrackName(track, session)))))) : (React.createElement(ErrorMessage, { error: `No synteny tracks found for ${assembly1},${assembly2}` }))));
+});
+export default Selector;
+//# sourceMappingURL=ImportSyntenyTrackSelector.js.map

package/esm/DotplotView/components/ImportSyntenyTrackSelector.js.map

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

package/esm/DotplotView/components/PanButtons.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { DotplotViewModel } from '../model';
+declare const _default: ({ model, }: {
+    model: DotplotViewModel;
+}) => React.JSX.Element;
+export default _default;

package/esm/DotplotView/components/PanButtons.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import { IconButton, Paper } from '@mui/material';
+import { makeStyles } from 'tss-react/mui';
+import { observer } from 'mobx-react';
+// icons
+import ArrowDropDown from '@mui/icons-material/ArrowDropDown';
+import ArrowDropUp from '@mui/icons-material/ArrowDropUp';
+import ArrowLeft from '@mui/icons-material/ArrowLeft';
+import ArrowRight from '@mui/icons-material/ArrowRight';
+import ZoomIn from '@mui/icons-material/ZoomIn';
+import ZoomOut from '@mui/icons-material/ZoomOut';
+const useStyles = makeStyles()({
+    dpad: {
+        display: 'grid',
+        gridTemplateColumns: 'repeat(3, 1fr)',
+        margin: 0,
+        position: 'absolute',
+        right: 50,
+        zIndex: 1000,
+        top: 50,
+    },
+    icon: {
+        padding: 0,
+        margin: 0,
+    },
+});
+export default observer(function PanButtons({ model, }) {
+    const { classes } = useStyles();
+    return (React.createElement(Paper, { className: classes.dpad, elevation: 6 },
+        React.createElement("div", null),
+        React.createElement(IconButton, { className: classes.icon, onClick: () => model.vview.scroll(100) },
+            React.createElement(ArrowDropUp, null)),
+        React.createElement("div", null),
+        React.createElement(IconButton, { className: classes.icon, onClick: () => model.hview.scroll(-100) },
+            React.createElement(ArrowLeft, null)),
+        React.createElement("div", null),
+        React.createElement(IconButton, { className: classes.icon, onClick: () => model.hview.scroll(100) },
+            React.createElement(ArrowRight, null)),
+        React.createElement("div", null),
+        React.createElement(IconButton, { className: classes.icon, onClick: () => model.vview.scroll(-100) },
+            React.createElement(ArrowDropDown, null)),
+        React.createElement("div", null),
+        React.createElement(IconButton, { className: classes.icon, onClick: () => {
+                model.hview.zoomIn();
+                model.vview.zoomIn();
+            } },
+            React.createElement(ZoomIn, null)),
+        React.createElement("div", null),
+        React.createElement(IconButton, { className: classes.icon, onClick: () => {
+                model.hview.zoomOut();
+                model.vview.zoomOut();
+            } },
+            React.createElement(ZoomOut, null))));
+});
+//# sourceMappingURL=PanButtons.js.map

package/esm/DotplotView/components/PanButtons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanButtons.js","sourceRoot":"","sources":["../../../src/DotplotView/components/PanButtons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAErC,QAAQ;AACR,OAAO,aAAa,MAAM,mCAAmC,CAAA;AAC7D,OAAO,WAAW,MAAM,iCAAiC,CAAA;AACzD,OAAO,SAAS,MAAM,+BAA+B,CAAA;AACrD,OAAO,UAAU,MAAM,gCAAgC,CAAA;AACvD,OAAO,MAAM,MAAM,4BAA4B,CAAA;AAC/C,OAAO,OAAO,MAAM,6BAA6B,CAAA;AAKjD,MAAM,SAAS,GAAG,UAAU,EAAE,CAAC;IAC7B,IAAI,EAAE;QACJ,OAAO,EAAE,MAAM;QACf,mBAAmB,EAAE,gBAAgB;QACrC,MAAM,EAAE,CAAC;QACT,QAAQ,EAAE,UAAU;QACpB,KAAK,EAAE,EAAE;QACT,MAAM,EAAE,IAAI;QACZ,GAAG,EAAE,EAAE;KACR;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,CAAC;QACV,MAAM,EAAE,CAAC;KACV;CACF,CAAC,CAAA;AAEF,eAAe,QAAQ,CAAC,SAAS,UAAU,CAAC,EAC1C,KAAK,GAGN;IACC,MAAM,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,CAAA;IAC/B,OAAO,CACL,oBAAC,KAAK,IAAC,SAAS,EAAE,OAAO,CAAC,IAAI,EAAE,SAAS,EAAE,CAAC;QAC1C,gCAAO;QACP,oBAAC,UAAU,IACT,SAAS,EAAE,OAAO,CAAC,IAAI,EACvB,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC;YAEtC,oBAAC,WAAW,OAAG,CACJ;QACb,gCAAO;QAEP,oBAAC,UAAU,IACT,SAAS,EAAE,OAAO,CAAC,IAAI,EACvB,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC;YAEvC,oBAAC,SAAS,OAAG,CACF;QACb,gCAAO;QACP,oBAAC,UAAU,IACT,SAAS,EAAE,OAAO,CAAC,IAAI,EACvB,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC;YAEtC,oBAAC,UAAU,OAAG,CACH;QAEb,gCAAO;QACP,oBAAC,UAAU,IACT,SAAS,EAAE,OAAO,CAAC,IAAI,EACvB,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC;YAEvC,oBAAC,aAAa,OAAG,CACN;QACb,gCAAO;QACP,oBAAC,UAAU,IACT,SAAS,EAAE,OAAO,CAAC,IAAI,EACvB,OAAO,EAAE,GAAG,EAAE;gBACZ,KAAK,CAAC,KAAK,CAAC,MAAM,EAAE,CAAA;gBACpB,KAAK,CAAC,KAAK,CAAC,MAAM,EAAE,CAAA;YACtB,CAAC;YAED,oBAAC,MAAM,OAAG,CACC;QACb,gCAAO;QACP,oBAAC,UAAU,IACT,SAAS,EAAE,OAAO,CAAC,IAAI,EACvB,OAAO,EAAE,GAAG,EAAE;gBACZ,KAAK,CAAC,KAAK,CAAC,OAAO,EAAE,CAAA;gBACrB,KAAK,CAAC,KAAK,CAAC,OAAO,EAAE,CAAA;YACvB,CAAC;YAED,oBAAC,OAAO,OAAG,CACA,CACP,CACT,CAAA;AACH,CAAC,CAAC,CAAA"}

package/esm/DotplotView/components/WarningDialog.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { AnyConfigurationModel } from '@jbrowse/core/configuration';
+interface TrackWarning {
+    configuration: AnyConfigurationModel;
+    displays: {
+        warnings: {
+            message: string;
+            effect: string;
+        }[];
+    }[];
+}
+declare const _default: ({ trackWarnings, handleClose, }: {
+    handleClose: () => void;
+    trackWarnings: TrackWarning[];
+}) => React.JSX.Element;
+export default _default;

package/esm/DotplotView/components/WarningDialog.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { DialogContent, DialogContentText } from '@mui/material';
+import { Dialog } from '@jbrowse/core/ui';
+import { observer } from 'mobx-react';
+import { makeStyles } from 'tss-react/mui';
+import { DataGrid } from '@mui/x-data-grid';
+import { getConf } from '@jbrowse/core/configuration';
+import { measureGridWidth } from '@jbrowse/core/util';
+const useStyles = makeStyles()({
+    content: {
+        minWidth: 600,
+    },
+});
+export default observer(function WarningDialog({ trackWarnings, handleClose, }) {
+    const { classes } = useStyles();
+    const rows = [];
+    for (let i = 0; i < trackWarnings.length; i++) {
+        const track = trackWarnings[i];
+        const name = getConf(track, 'name');
+        for (let j = 0; j < track.displays[0].warnings.length; j++) {
+            const warning = track.displays[0].warnings[j];
+            rows.push({ name, ...warning, id: i + '_' + j });
+        }
+    }
+    const columns = [
+        { field: 'name' },
+        { field: 'message', width: measureGridWidth(rows.map(r => r.message)) },
+        { field: 'effect', width: measureGridWidth(rows.map(r => r.effect)) },
+    ];
+    return (React.createElement(Dialog, { open: true, onClose: handleClose, maxWidth: "xl", title: "Dotplot rendered with warnings" },
+        React.createElement(DialogContent, { className: classes.content },
+            React.createElement(DialogContentText, null, "Found warnings while rendering the dotplot. This is often due to out-of-bound features that may indicate the wrong assemblies are being used. Check that the query and target are configured correctly, and that the right assemblies are being compared."),
+            React.createElement("div", { style: { height: 600, width: '100%', overflow: 'auto' } },
+                React.createElement(DataGrid, { rows: rows, columns: columns, disableRowSelectionOnClick: true, rowHeight: 25, disableColumnMenu: true })))));
+});
+//# sourceMappingURL=WarningDialog.js.map

package/esm/DotplotView/components/WarningDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WarningDialog.js","sourceRoot":"","sources":["../../../src/DotplotView/components/WarningDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAA;AAChE,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAC3C,OAAO,EAAyB,OAAO,EAAE,MAAM,6BAA6B,CAAA;AAC5E,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAErD,MAAM,SAAS,GAAG,UAAU,EAAE,CAAC;IAC7B,OAAO,EAAE;QACP,QAAQ,EAAE,GAAG;KACd;CACF,CAAC,CAAA;AAOF,eAAe,QAAQ,CAAC,SAAS,aAAa,CAAC,EAC7C,aAAa,EACb,WAAW,GAIZ;IACC,MAAM,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,CAAA;IAC/B,MAAM,IAAI,GAAG,EAKV,CAAA;IACH,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,aAAa,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QAC7C,MAAM,KAAK,GAAG,aAAa,CAAC,CAAC,CAAC,CAAA;QAC9B,MAAM,IAAI,GAAG,OAAO,CAAC,KAAK,EAAE,MAAM,CAAC,CAAA;QACnC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YAC1D,MAAM,OAAO,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAA;YAC7C,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,GAAG,OAAO,EAAE,EAAE,EAAE,CAAC,GAAG,GAAG,GAAG,CAAC,EAAE,CAAC,CAAA;SACjD;KACF;IACD,MAAM,OAAO,GAAG;QACd,EAAE,KAAK,EAAE,MAAM,EAAE;QACjB,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,gBAAgB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE;QACvE,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,gBAAgB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE;KACtE,CAAA;IACD,OAAO,CACL,oBAAC,MAAM,IACL,IAAI,QACJ,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAC,IAAI,EACb,KAAK,EAAC,gCAAgC;QAEtC,oBAAC,aAAa,IAAC,SAAS,EAAE,OAAO,CAAC,OAAO;YACvC,oBAAC,iBAAiB,oQAKE;YACpB,6BAAK,KAAK,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE;gBAC1D,oBAAC,QAAQ,IACP,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,0BAA0B,QAC1B,SAAS,EAAE,EAAE,EACb,iBAAiB,SACjB,CACE,CACQ,CACT,CACV,CAAA;AACH,CAAC,CAAC,CAAA"}

package/esm/DotplotView/components/util.d.ts

@@ -0,0 +1,19 @@
+import { BaseBlock } from '@jbrowse/core/util/blockTypes';
+import { Dotplot1DViewModel } from '../model';
+export declare function locstr(px: number, view: Dotplot1DViewModel, includeAsm?: boolean): string;
+export declare function getBlockLabelKeysToHide(blocks: BaseBlock[], length: number, viewOffsetPx: number): Set<string>;
+/**
+ * Given a scale ( bp/px ) and minimum distances (px) between major and minor
+ * gridlines, return an object like `{ majorPitch: bp, minorPitch: bp }` giving
+ * the gridline pitches to use.
+ */
+export declare function chooseGridPitch(scale: number, minMajorPitchPx: number, minMinorPitchPx: number): {
+    majorPitch: number;
+    minorPitch: number;
+};
+export declare function makeTicks(regions: BaseBlock[], bpPerPx: number, emitMajor?: boolean, emitMinor?: boolean): {
+    type: string;
+    base: number;
+    index: number;
+    refName: string;
+}[];

package/esm/DotplotView/components/util.js

@@ -0,0 +1,83 @@
+export function locstr(px, view, includeAsm = true) {
+    const { assemblyName, refName, start, offset, oob } = view.pxToBp(px);
+    const coord = Math.floor(start + offset);
+    return oob
+        ? 'out of bounds'
+        : `${includeAsm ? '{' + assemblyName + '}' : ''}${refName}:${coord.toLocaleString('en-US')}`;
+}
+export function getBlockLabelKeysToHide(blocks, length, viewOffsetPx) {
+    const blockLabelKeysToHide = new Set();
+    const sortedBlocks = [...blocks].sort((a, b) => {
+        const alen = a.end - a.start;
+        const blen = b.end - b.start;
+        return blen - alen;
+    });
+    const positions = Array.from({ length: Math.round(length) });
+    for (const { key, offsetPx } of sortedBlocks) {
+        const y = Math.round(length - offsetPx + viewOffsetPx);
+        const labelBounds = [Math.max(y - 12, 0), y];
+        if (y === 0 || positions.slice(...labelBounds).some(Boolean)) {
+            blockLabelKeysToHide.add(key);
+        }
+        else {
+            positions.fill(true, ...labelBounds);
+        }
+    }
+    return blockLabelKeysToHide;
+}
+/**
+ * Given a scale ( bp/px ) and minimum distances (px) between major and minor
+ * gridlines, return an object like `{ majorPitch: bp, minorPitch: bp }` giving
+ * the gridline pitches to use.
+ */
+export function chooseGridPitch(scale, minMajorPitchPx, minMinorPitchPx) {
+    scale = Math.abs(scale);
+    const minMajorPitchBp = minMajorPitchPx * scale;
+    const majorMagnitude = Number.parseInt(Number(minMajorPitchBp).toExponential().split(/e/i)[1], 10);
+    let majorPitch = 10 ** majorMagnitude;
+    while (majorPitch < minMajorPitchBp) {
+        majorPitch *= 2;
+        if (majorPitch >= minMajorPitchBp) {
+            break;
+        }
+        majorPitch *= 2.5;
+    }
+    majorPitch = Math.max(majorPitch, 5);
+    const majorPitchPx = majorPitch / scale;
+    let minorPitch = 0;
+    if (!(majorPitch % 10) && majorPitchPx / 10 >= minMinorPitchPx) {
+        minorPitch = majorPitch / 10;
+    }
+    else if (!(majorPitch % 5) && majorPitchPx / 5 >= minMinorPitchPx) {
+        minorPitch = majorPitch / 5;
+    }
+    else if (!(majorPitch % 2) && majorPitchPx / 2 >= minMinorPitchPx) {
+        minorPitch = majorPitch / 2;
+    }
+    return { majorPitch, minorPitch };
+}
+export function makeTicks(regions, bpPerPx, emitMajor = true, emitMinor = true) {
+    const ticks = [];
+    const gridPitch = chooseGridPitch(bpPerPx, 60, 15);
+    const iterPitch = gridPitch.minorPitch || gridPitch.majorPitch;
+    for (let i = 0; i < regions.length; i++) {
+        const region = regions[i];
+        const { start, end, refName } = region;
+        let index = 0;
+        const minBase = start;
+        const maxBase = end;
+        for (let base = Math.floor(minBase / iterPitch) * iterPitch; base < Math.ceil(maxBase / iterPitch) * iterPitch + 1; base += iterPitch) {
+            if (emitMinor && base % gridPitch.majorPitch) {
+                ticks.push({ type: 'minor', base: base - 1, index, refName });
+                index += 1;
+            }
+            else if (emitMajor &&
+                Math.abs(base - region.start) > gridPitch.minorPitch) {
+                ticks.push({ type: 'major', base: base - 1, index, refName });
+                index += 1;
+            }
+        }
+    }
+    return ticks;
+}
+//# sourceMappingURL=util.js.map

package/esm/DotplotView/components/util.js.map

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

package/esm/DotplotView/index.d.ts

@@ -0,0 +1,2 @@
+import PluginManager from '@jbrowse/core/PluginManager';
+export default function (pluginManager: PluginManager): void;

package/esm/DotplotView/index.js

@@ -0,0 +1,15 @@
+import { lazy } from 'react';
+import ViewType from '@jbrowse/core/pluggableElementTypes/ViewType';
+// locals
+import stateModelFactory from './model';
+export default function (pluginManager) {
+    pluginManager.addViewType(() => {
+        return new ViewType({
+            name: 'DotplotView',
+            displayName: 'Dotplot view',
+            stateModel: stateModelFactory(pluginManager),
+            ReactComponent: lazy(() => import('./components/DotplotView')),
+        });
+    });
+}
+//# sourceMappingURL=index.js.map

package/esm/DotplotView/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/DotplotView/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAA;AAC5B,OAAO,QAAQ,MAAM,8CAA8C,CAAA;AAEnE,SAAS;AACT,OAAO,iBAAiB,MAAM,SAAS,CAAA;AAEvC,MAAM,CAAC,OAAO,WAAW,aAA4B;IACnD,aAAa,CAAC,WAAW,CAAC,GAAG,EAAE;QAC7B,OAAO,IAAI,QAAQ,CAAC;YAClB,IAAI,EAAE,aAAa;YACnB,WAAW,EAAE,cAAc;YAC3B,UAAU,EAAE,iBAAiB,CAAC,aAAa,CAAC;YAC5C,cAAc,EAAE,IAAI,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,0BAA0B,CAAC,CAAC;SAC/D,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;AACJ,CAAC"}