onCell(item)}
+ {...props}
+ />
+ ),
+ [onCell],
+ )
+ return (
+
+ )
+}
+
+const useFilePickerSkeletonStyles = M.makeStyles((t) => ({
+ root: {
+ display: 'flex',
+ flexDirection: 'column',
+ },
+ toolbar: {
+ display: 'flex',
+ },
+ toolbarSkeleton: {
+ width: t.spacing(20),
+ height: t.spacing(4.5) - 20 /*margin*/,
+ margin: '10px 0 10px auto',
+ },
+ divided: {
+ height: t.spacing(4.5) - 2 /*border*/ - 20 /*margin*/,
+ margin: '10px 0',
+ },
+ item: {
+ height: t.spacing(4.5) - 20 /*margin*/,
+ margin: '10px 0',
+ },
+}))
+
+function FilePickerSkeleton() {
+ const classes = useFilePickerSkeletonStyles()
+ const widths = React.useMemo(
+ () =>
+ Array.from({ length: 25 }).map(
+ () => `${Math.min(75, Math.max(25, Math.ceil(Math.random() * 100)))}%`,
+ ),
+ [],
+ )
+ return (
+
+
+
+
+
+
+
+ {widths.map((width, i) => (
+
+ ))}
+
+
+
+
+
+
+
+ )
+}
+
+const useFilePickerDialogStyles = M.makeStyles({
+ dialog: {
+ display: 'flex',
+ flexDirection: 'column',
+ height: '80vh',
+ },
+})
+
+interface FilePickerDialogProps {
+ bucket: string
+ initialPath: string
+ onClose: () => void
+ submit: (path: string) => void
+}
+
+function FilePickerDialog({
+ bucket,
+ initialPath,
+ onClose,
+ submit,
+}: FilePickerDialogProps) {
+ const classes = useFilePickerDialogStyles()
+ const [path, setPath] = React.useState(initialPath)
+ const bucketListing = requests.useBucketListing()
+ const data = useData(bucketListing, {
+ bucket,
+ path,
+ prefix: '',
+ prev: null,
+ drain: true,
+ })
+ const handleCellClick = React.useCallback(
+ (item: Listing.Item) => {
+ if (item.type === 'dir') {
+ setPath(item.to)
+ } else {
+ submit(item.to)
+ }
+ },
+ [submit],
+ )
+ return (
+ <>
+
+
+ {data.case({
+ _: () => ,
+ Ok: (res: requests.BucketListingResult) => (
+
+ ),
+ })}
+
+
+
+ Cancel
+
+
+ )
+}
+
+const useAddColumnStyles = M.makeStyles((t) => ({
+ root: {
+ animation: '$show 0.15s ease-out',
+ display: 'flex',
+ '&:last-child $divider': {
+ marginLeft: t.spacing(4),
+ },
+ },
+ inner: {
+ flexGrow: 1,
+ display: 'flex',
+ flexDirection: 'column',
+ position: 'relative',
+ '&:has($close:hover) $path': {
+ opacity: 0.3,
+ },
+ '&:has($close:hover) $extended': {
+ opacity: 0.3,
+ },
+ },
+ settings: {
+ margin: t.spacing(0, 1, -1, -0.5),
+ transition: 'transform 0.15s ease-out',
+ '&:hover': {
+ transform: 'rotate(180deg)',
+ },
+ },
+ extended: {
+ animation: '$slide 0.15s ease-out',
+ transition: 'opacity 0.3s ease-out',
+ paddingLeft: t.spacing(7),
+ display: 'flex',
+ flexDirection: 'column',
+ },
+ expanded: {
+ background: t.palette.background.paper,
+ position: 'absolute',
+ right: '16px',
+ top: '4px',
+ },
+ path: {
+ transition: 'opacity 0.3s ease-out',
+ display: 'flex',
+ alignItems: 'flex-end',
+ },
+ field: {
+ marginTop: t.spacing(1),
+ minWidth: t.spacing(10),
+ },
+ divider: {
+ marginLeft: t.spacing(2),
+ },
+ render: {
+ border: `1px solid ${t.palette.divider}`,
+ borderRadius: t.shape.borderRadius,
+ marginTop: t.spacing(3),
+ padding: t.spacing(2),
+ },
+ select: {
+ marginTop: t.spacing(2),
+ },
+ toggle: {
+ padding: t.spacing(1, 0, 0),
+ },
+ close: {
+ position: 'absolute',
+ right: 0,
+ top: 0,
+ },
+ '@keyframes slide': {
+ from: {
+ opacity: 0,
+ transform: 'translateY(-8px)',
+ },
+ to: {
+ opacity: 1,
+ transform: 'translateY(0)',
+ },
+ },
+ '@keyframes show': {
+ from: {
+ opacity: 0,
+ transform: 'scale(0.9)',
+ },
+ to: {
+ opacity: 1,
+ transform: 'scale(1)',
+ },
+ },
+}))
+
+interface AddColumnProps {
+ className: string
+ column: Column
+ disabled?: boolean
+ onChange: React.Dispatch
>
+ row: Row
+ last: boolean
+}
+
+function AddColumn({ className, column, disabled, last, onChange, row }: AddColumnProps) {
+ const { bucket, initialPath } = useParams()
+
+ const classes = useAddColumnStyles()
+ const { file } = column
+ const [advanced, setAdvanced] = React.useState(file.isExtended)
+
+ const onChangeValue = React.useCallback(
+ (key: keyof FileExtended, value: FileExtended[keyof FileExtended]) => {
+ const dispatch = State.changeValue(row.id, column.id)
+ onChange(dispatch({ [key]: value }))
+ },
+ [onChange, row.id, column.id],
+ )
+
+ const onChangeType = React.useCallback(
+ (
+ key: keyof Summarize.TypeExtended,
+ value: Summarize.TypeExtended[keyof Summarize.TypeExtended],
+ ) =>
+ onChangeValue('type', {
+ ...((file.type || {}) as Summarize.TypeExtended),
+ [key]: value,
+ }),
+ [onChangeValue, file.type],
+ )
+
+ const onRemove = React.useCallback(
+ () => onChange(State.removeColumn(row.id, column.id)),
+ [onChange, row.id, column.id],
+ )
+
+ const pickPath = React.useCallback(
+ (path: string, close: () => void) => {
+ onChangeValue('path', relative(initialPath, path))
+ close()
+ },
+ [initialPath, onChangeValue],
+ )
+
+ const openDialog = Dialogs.use()
+ const handlePicker = React.useCallback(() => {
+ openDialog(
+ ({ close }) => (
+ pickPath(path, close)}
+ />
+ ),
+ { maxWidth: 'xl' as const, fullWidth: true },
+ )
+ }, [bucket, initialPath, openDialog, pickPath])
+
+ return (
+
+
+
+ setAdvanced((a) => !a)}
+ color={advanced ? 'primary' : 'default'}
+ >
+ settings
+
+ onChangeValue('path', event.currentTarget.value)}
+ value={file.path || ''}
+ fullWidth
+ InputProps={{
+ startAdornment: (
+
+
+ attach_file
+
+
+ ),
+ }}
+ />
+
+ {advanced && (
+
+ onChangeValue('title', event.currentTarget.value)}
+ value={file.title || ''}
+ fullWidth
+ className={classes.field}
+ size="small"
+ />
+
+ onChangeValue('description', event.currentTarget.value)
+ }
+ value={file.description || ''}
+ fullWidth
+ className={classes.field}
+ size="small"
+ />
+
+
+ Preview
+ onChangeValue('expand', expand)}
+ size="small"
+ />
+ }
+ labelPlacement="start"
+ label="Expand"
+ title="Whether preview is expanded by default or not"
+ />
+
+ {row.columns.length > 1 && (
+
+ onChangeValue('width', event.currentTarget.value)
+ }
+ value={file.width || ''}
+ fullWidth
+ className={classes.field}
+ size="small"
+ helperText="Width in pixels or percent"
+ />
+ )}
+
+
+ Renderer
+
+ onChangeType('name', event.target.value as Summarize.TypeShorthand)
+ }
+ >
+
+ Default
+
+ {State.schema.definitions.typeShorthand.enum.map((type) => (
+
+ {type}
+
+ ))}
+
+
+
+ {file.type && (
+
+ onChangeType('style', { height: event.currentTarget.value })
+ }
+ value={file.type.style?.height || ''}
+ fullWidth
+ className={classes.field}
+ size="small"
+ placeholder="Ex., 1000px"
+ helperText="Height as an absolute value (in `px`, `vh`, `em` etc.)"
+ />
+ )}
+
+ {file.type?.name === 'perspective' && (
+ onChangeType('config', c)}
+ helperText="Restores renderer state using a previously saved configuration. Configuration must be a valid JSON object."
+ value={file.type.config as JsonRecord}
+ fullWidth
+ className={classes.field}
+ size="small"
+ />
+ )}
+
+ {file.type?.name === 'perspective' && (
+ onChangeType('settings', checked)}
+ checked={file.type.settings || false}
+ size="small"
+ />
+ }
+ label="Show perspective toolbar"
+ className={cx(classes.field, classes.toggle)}
+ />
+ )}
+
+
+
+ )}
+
+ close
+
+
+
onChange(State.addColumnAfter(row.id, column.id)(State.emptyFile))}
+ variant="vertical"
+ />
+
+
+ {row.columns.map((column, index) => (
+
+ ))}
+
+
+
+ {!!errors.length && (
+
+ )}
+
+
+ {layout.rows.map((row, index) => (
+
+ ))}
+ {!layout.rows.length && (
+
setLayout(State.init())}
+ disabled={disabled}
+ />
+ )}
+
+
+
+ Configuration for quilt_summarize.json. See{' '}
+
+ the docs
+
+
+
+
+
+ Configuration for quilt_summarize.json. See
+
+
+ the docs
+
+
+
+
+
+ Configuration for quilt_summarize.json. See
+
+
+ the docs
+
+
+
+
+
+ Configuration for quilt_summarize.json. See
+
+
+ the docs
+
+
+