{"version":3,"file":"static/js/4138.57ad92a3.chunk.js","mappings":"kRAsBA,MAAMA,GAAYC,EAAAA,EAAAA,KAAAA,EAAaC,IAAS,CACtCC,oBAAqB,CACnBC,MAAO,IACPC,OAAQH,EAAMI,QAAQ,QAIpBC,GAAgBC,EAAAA,EAAAA,WAAS,UAAuB,KACpDC,EAAI,QACJC,EAAO,gBACPC,IAMA,MAAQC,oBAAqBC,EAAY,IAAOH,EAC1CI,GAAOC,EAAAA,EAAAA,gBAAeN,EAAM,QAC5BO,GAAgBD,EAAAA,EAAAA,gBAAeN,EAAM,iBACrCQ,EAAQJ,EAAUK,MAAKC,GAAQL,IAASK,EAAKL,OACnD,OACEM,EAAAA,cAACC,EAAAA,EAAgB,CACfC,IAAKb,EAAKc,aACVC,QACEJ,EAAAA,cAACK,EAAAA,EAAQ,CACPC,UAAWT,EACXU,SAAUA,KACJV,EACFN,EAAgBF,GAEhBC,EAAQkB,iBAAiBnB,EAC3B,EAEFoB,MAAM,YAGVC,MAAO,CACLhB,EACAE,EAAce,OAAS,IA1CbC,EA0C0BhB,EAAciB,KAAK,KAzCtDD,EAAKD,OAAS,GAAK,GAAGC,EAAKE,MAAM,EAAG,SAAWF,KAyCkB,IAEjEG,QAAOC,KAAOA,IACdH,KAAK,OA7Cd,IAAkBD,CAgDlB,IAEMK,GAAiB7B,EAAAA,EAAAA,WAAS,UAAyB,QACvDE,EAAO,gBACPC,IAKA,MAAM,QAAE2B,GAAYtC,IACpB,OACEoB,EAAAA,cAAA,OAAKmB,UAAWD,EAAQnC,qBACpBO,EAAQ8B,YAAYT,OAGpBrB,EAAQ8B,YAAYC,KAAI,CAAChC,EAAMiC,IAC7BtB,EAAAA,cAAA,OAAKE,IAAK,GAAGb,EAAKK,QAAQ4B,KACxBtB,EAAAA,cAACb,EAAa,CACZE,KAAMA,EACNC,QAASA,EACTC,gBAAiBA,OAPvBS,EAAAA,cAACuB,EAAAA,EAAU,KAAC,wBAcpB,IAqCA,GAnC+BnC,EAAAA,EAAAA,WAAS,UAAU,QAChDE,EAAO,YACPkC,EAAW,gBACXjC,IAMA,OACES,EAAAA,cAACyB,EAAAA,OAAM,CACLC,MAAI,EACJC,QAASH,EACTI,SAAS,KACTC,MAAM,2BAEN7B,EAAAA,cAAC8B,EAAAA,EAAa,KACZ9B,EAAAA,cAACuB,EAAAA,EAAU,KAAC,+CACZvB,EAAAA,cAACiB,EAAc,CAAC3B,QAASA,EAASC,gBAAiBA,KAErDS,EAAAA,cAAC+B,EAAAA,EAAa,KACZ/B,EAAAA,cAACgC,EAAAA,EAAM,CACLC,QAASA,KACPT,GAAa,EAEfU,QAAQ,YACRzB,MAAM,WACP,UAMT,G","sources":["../../../plugins/data-management/src/HierarchicalTrackSelectorWidget/components/dialogs/ToggleConnectionsDialog.tsx"],"sourcesContent":["import React from 'react'\nimport {\n  Button,\n  Checkbox,\n  DialogContent,\n  DialogActions,\n  FormControlLabel,\n  Typography,\n} from '@mui/material'\nimport { Dialog } from '@jbrowse/core/ui'\nimport { makeStyles } from 'tss-react/mui'\nimport { observer } from 'mobx-react'\nimport {\n  AnyConfigurationModel,\n  readConfObject,\n} from '@jbrowse/core/configuration'\nimport { AbstractSessionModel } from '@jbrowse/core/util'\n\nfunction ellipses(slug: string) {\n  return slug.length > 20 ? `${slug.slice(0, 20)}...` : slug\n}\n\nconst useStyles = makeStyles()(theme => ({\n  connectionContainer: {\n    width: 500,\n    margin: theme.spacing(4),\n  },\n}))\n\nconst ConnectionRow = observer(function ConnectionRow({\n  conf,\n  session,\n  breakConnection,\n}: {\n  conf: AnyConfigurationModel\n  session: AbstractSessionModel\n  breakConnection: (arg: AnyConfigurationModel) => void\n}) {\n  const { connectionInstances: instances = [] } = session\n  const name = readConfObject(conf, 'name')\n  const assemblyNames = readConfObject(conf, 'assemblyNames')\n  const found = instances.find(conn => name === conn.name)\n  return (\n    <FormControlLabel\n      key={conf.connectionId}\n      control={\n        <Checkbox\n          checked={!!found}\n          onChange={() => {\n            if (found) {\n              breakConnection(conf)\n            } else {\n              session.makeConnection?.(conf)\n            }\n          }}\n          color=\"primary\"\n        />\n      }\n      label={[\n        name,\n        assemblyNames.length ? `(${ellipses(assemblyNames.join(','))})` : '',\n      ]\n        .filter(f => !!f)\n        .join(' ')}\n    />\n  )\n})\n\nconst ConnectionList = observer(function ConnectionsList({\n  session,\n  breakConnection,\n}: {\n  session: AbstractSessionModel\n  breakConnection: (arg: AnyConfigurationModel) => void\n}) {\n  const { classes } = useStyles()\n  return (\n    <div className={classes.connectionContainer}>\n      {!session.connections.length ? (\n        <Typography>No connections found</Typography>\n      ) : (\n        session.connections.map((conf, idx) => (\n          <div key={`${conf.name}_${idx}`}>\n            <ConnectionRow\n              conf={conf}\n              session={session}\n              breakConnection={breakConnection}\n            />\n          </div>\n        ))\n      )}\n    </div>\n  )\n})\n\nconst ToggleConnectionDialog = observer(function ({\n  session,\n  handleClose,\n  breakConnection,\n}: {\n  handleClose: () => void\n  session: AbstractSessionModel\n  breakConnection: (arg: AnyConfigurationModel) => void\n}) {\n  return (\n    <Dialog\n      open\n      onClose={handleClose}\n      maxWidth=\"lg\"\n      title=\"Turn on/off connections\"\n    >\n      <DialogContent>\n        <Typography>Use the checkbox to turn on/off connections</Typography>\n        <ConnectionList session={session} breakConnection={breakConnection} />\n      </DialogContent>\n      <DialogActions>\n        <Button\n          onClick={() => {\n            handleClose()\n          }}\n          variant=\"contained\"\n          color=\"primary\"\n        >\n          Close\n        </Button>\n      </DialogActions>\n    </Dialog>\n  )\n})\n\nexport default ToggleConnectionDialog\n"],"names":["useStyles","makeStyles","theme","connectionContainer","width","margin","spacing","ConnectionRow","observer","conf","session","breakConnection","connectionInstances","instances","name","readConfObject","assemblyNames","found","find","conn","React","FormControlLabel","key","connectionId","control","Checkbox","checked","onChange","makeConnection","color","label","length","slug","join","slice","filter","f","ConnectionList","classes","className","connections","map","idx","Typography","handleClose","Dialog","open","onClose","maxWidth","title","DialogContent","DialogActions","Button","onClick","variant"],"sourceRoot":""}