Skip to content

Commit

Permalink
Updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@cmdcolin
cmdcolin committed Dec 2, 2022
1 parent 0d8c6ea commit 541dc43
Show file tree
Hide file tree
Showing 2 changed files with 145 additions and 163 deletions.
17 changes: 4 additions & 13 deletions plugins/alignments/src/LinearPileupDisplay/components/ColorByModifications.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ function ModificationTable({

function ColorByTagDlg(props: {
model: {
setColorScheme: Function
setColorScheme: (arg: { type: string }) => void
modificationTagMap: ObservableMap<string, string>
colorBy?: { type: string }
}
Expand All @@ -61,7 +61,7 @@ function ColorByTagDlg(props: {
const modifications = [...modificationTagMap.entries()]

return (
<Dialog open onClose={handleClose} title={'Color by modifications'}>
<Dialog open onClose={handleClose} title="Color by modifications">
<DialogContent>
<Typography>
You can choose to color the modifications in the BAM/CRAM MM/ML
Expand Down Expand Up @@ -106,25 +106,17 @@ function ColorByTagDlg(props: {
<DialogActions>
<Button
variant="contained"
color="primary"
style={{ margin: 5 }}
onClick={() => {
model.setColorScheme({
type: 'modifications',
})
model.setColorScheme({ type: 'modifications' })
handleClose()
}}
>
Modifications
</Button>
<Button
variant="contained"
color="primary"
style={{ margin: 5 }}
onClick={() => {
model.setColorScheme({
type: 'methylation',
})
model.setColorScheme({ type: 'methylation' })
handleClose()
}}
>
Expand All @@ -133,7 +125,6 @@ function ColorByTagDlg(props: {
<Button
variant="contained"
color="secondary"
style={{ margin: 5 }}
onClick={() => handleClose()}
>
Cancel
Expand Down
291 changes: 141 additions & 150 deletions products/jbrowse-web/src/ShareButton.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import React, { useState, useEffect } from 'react'
import { getSnapshot } from 'mobx-state-tree'
import { observer } from 'mobx-react'
import copy from 'copy-to-clipboard'
import { Dialog } from '@jbrowse/core/ui'
import {
Button,
Expand All @@ -16,6 +15,7 @@ import {
TextField,
Typography,
} from '@mui/material'
import copy from 'copy-to-clipboard'

import { alpha } from '@mui/material/styles'
import { makeStyles } from 'tss-react/mui'
Expand Down Expand Up @@ -148,123 +148,101 @@ function InfoDialog(props: { open: boolean; onClose: Function }) {
)
}

const ShareDialog = observer(
({
handleClose,
session,
}: {
handleClose: () => void
session: AbstractSessionModel & { shareURL: string }
}) => {
const { classes } = useStyles()
const [shortUrl, setShortUrl] = useState('')
const [longUrl, setLongUrl] = useState('')
const [loading, setLoading] = useState(true)
const [error, setError] = useState<unknown>()
const [settingsDialogOpen, setSettingsDialogOpen] = useState(false)

const url = session.shareURL
const currentSetting =
localStorage.getItem(SHARE_URL_LOCALSTORAGE_KEY) || 'short'
const snap = getSnapshot(session)

useEffect(() => {
let cancelled = false
// eslint-disable-next-line @typescript-eslint/no-floating-promises
;(async () => {
if (currentSetting === 'short') {
try {
setLoading(true)
const locationUrl = new URL(window.location.href)
const result = await shareSessionToDynamo(
snap,
url,
locationUrl.href,
)
if (!cancelled) {
const params = new URLSearchParams(locationUrl.search)
params.set('session', `share-${result.json.sessionId}`)
params.set('password', result.password)
locationUrl.search = params.toString()
setShortUrl(locationUrl.href)
}
} catch (e) {
setError(e)
} finally {
setLoading(false)
}
}
})()
const ShareDialog = observer(function ({
handleClose,
session,
}: {
handleClose: () => void
session: AbstractSessionModel & { shareURL: string }
}) {
const [shortUrl, setShortUrl] = useState('')
const [longUrl, setLongUrl] = useState('')
const [loading, setLoading] = useState(true)
const [error, setError] = useState<unknown>()
const [settingsDialogOpen, setSettingsDialogOpen] = useState(false)

return () => {
cancelled = true
}
}, [currentSetting, url, snap])
const url = session.shareURL
const currentSetting =
localStorage.getItem(SHARE_URL_LOCALSTORAGE_KEY) || 'short'
const snap = getSnapshot(session)

useEffect(() => {
let cancelled = false
// eslint-disable-next-line @typescript-eslint/no-floating-promises
;(async () => {
useEffect(() => {
let cancelled = false
// eslint-disable-next-line @typescript-eslint/no-floating-promises
;(async () => {
if (currentSetting === 'short') {
try {
const sess = await toUrlSafeB64(JSON.stringify(getSnapshot(session)))
const longUrl = new URL(window.location.href)
const longParams = new URLSearchParams(longUrl.search)
longParams.set('session', `encoded-${sess}`)
longUrl.search = longParams.toString()
setLoading(true)
const locationUrl = new URL(window.location.href)
const result = await shareSessionToDynamo(snap, url, locationUrl.href)
if (!cancelled) {
setLongUrl(longUrl.toString())
const params = new URLSearchParams(locationUrl.search)
params.set('session', `share-${result.json.sessionId}`)
params.set('password', result.password)
locationUrl.search = params.toString()
setShortUrl(locationUrl.href)
}
} catch (e) {
setError(e)
} finally {
setLoading(false)
}
})()
return () => {
cancelled = true
}
}, [session])
})()

return (
<>
return () => {
cancelled = true
}
}, [currentSetting, url, snap])

useEffect(() => {
let cancelled = false
// eslint-disable-next-line @typescript-eslint/no-floating-promises
;(async () => {
try {
const sess = await toUrlSafeB64(JSON.stringify(getSnapshot(session)))
const longUrl = new URL(window.location.href)
const longParams = new URLSearchParams(longUrl.search)
longParams.set('session', `encoded-${sess}`)
longUrl.search = longParams.toString()
if (!cancelled) {
setLongUrl(longUrl.toString())
}
} catch (e) {
setError(e)
}
})()
return () => {
cancelled = true
}
}, [session])

return (
<>
<Dialog
maxWidth="xl"
open
onClose={handleClose}
title="JBrowse Shareable Link"
data-testid="share-dialog"
>
<DialogContent>
<DialogContentText>
Copy the URL below to share your current JBrowse session.
<IconButton onClick={() => setSettingsDialogOpen(true)}>
<SettingsIcon />
</IconButton>
</DialogContentText>

<DialogContent>
<DialogContentText>
Copy the URL below to share your current JBrowse session.
<IconButton onClick={() => setSettingsDialogOpen(true)}>
<SettingsIcon />
</IconButton>
</DialogContentText>

{currentSetting === 'short' ? (
error ? (
<Typography color="error">{`${error}`}</Typography>
) : loading ? (
<Typography>Generating short URL...</Typography>
) : (
<TextField
label="URL"
value={shortUrl}
InputProps={{
readOnly: true,
}}
variant="filled"
style={{ width: '100%' }}
onClick={event => {
const target = event.target as HTMLTextAreaElement
target.select()
}}
/>
)
{currentSetting === 'short' ? (
error ? (
<Typography color="error">{`${error}`}</Typography>
) : loading ? (
<Typography>Generating short URL...</Typography>
) : (
<TextField
label="URL"
value={longUrl}
value={shortUrl}
InputProps={{
readOnly: true,
}}
Expand All @@ -275,64 +253,77 @@ const ShareDialog = observer(
target.select()
}}
/>
)}
</DialogContent>
<DialogActions>
<Button
onClick={() => {
copy(shortUrl || longUrl.toString())
session.notify('Copied to clipboard', 'success')
)
) : (
<TextField
label="URL"
value={longUrl}
InputProps={{
readOnly: true,
}}
color="primary"
startIcon={<ContentCopyIcon />}
disabled={currentSetting === 'short' && loading}
>
Copy URL to Clipboard
</Button>
variant="filled"
style={{ width: '100%' }}
onClick={event => {
const target = event.target as HTMLTextAreaElement
target.select()
}}
/>
)}
</DialogContent>
<DialogActions>
<Button
onClick={() => {
copy(shortUrl || longUrl.toString())
session.notify('Copied to clipboard', 'success')
}}
color="primary"
startIcon={<ContentCopyIcon />}
disabled={currentSetting === 'short' && loading}
>
Copy URL to Clipboard
</Button>

<Button onClick={handleClose} color="primary" autoFocus>
Close
</Button>
</DialogActions>
</Dialog>
<Button onClick={handleClose} color="primary" autoFocus>
Close
</Button>
</DialogActions>
</Dialog>

<SettingsDialog
open={settingsDialogOpen}
onClose={() => {
setSettingsDialogOpen(false)
}}
currentSetting={currentSetting}
/>
</>
)
},
)
<SettingsDialog
open={settingsDialogOpen}
onClose={() => {
setSettingsDialogOpen(false)
}}
currentSetting={currentSetting}
/>
</>
)
})

const ShareButton = observer(
(props: { session: AbstractSessionModel & { shareURL: string } }) => {
const [open, setOpen] = useState(false)
const ShareButton = observer(function (props: {
session: AbstractSessionModel & { shareURL: string }
}) {
const [open, setOpen] = useState(false)

const { session } = props
const { classes } = useStyles()
const { session } = props
const { classes } = useStyles()

return (
<div className={classes.shareDiv}>
<Button
data-testid="share_button"
onClick={async () => setOpen(true)}
size="small"
color="inherit"
startIcon={<ShareIcon />}
classes={{ root: classes.shareButton }}
>
Share
</Button>
{open ? (
<ShareDialog handleClose={() => setOpen(false)} session={session} />
) : null}
</div>
)
},
)
return (
<div className={classes.shareDiv}>
<Button
onClick={async () => setOpen(true)}
size="small"
color="inherit"
startIcon={<ShareIcon />}
classes={{ root: classes.shareButton }}
>
Share
</Button>
{open ? (
<ShareDialog handleClose={() => setOpen(false)} session={session} />
) : null}
</div>
)
})

export default ShareButton

0 comments on commit 541dc43

Please sign in to comment.