Spaces:
Running
Running
File size: 2,797 Bytes
6a31b9a 7b9203f 6a31b9a 7b9203f 6a31b9a 7b9203f 6a31b9a 7b9203f 6a31b9a 7b9203f bc133ae 7b9203f 6a31b9a |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 |
import {
Streamlit,
StreamlitComponentBase,
withStreamlitConnection,
} from "streamlit-component-lib"
import React, { ReactNode } from "react"
import Button from "@mui/material/Button"
import Tabs from "@mui/material/Tabs"
import Tab from "@mui/material/Tab"
import Box from "@mui/material/Box"
import { ThemeProvider, createTheme } from "@mui/material"
import { orange } from "@mui/material/colors"
import Tooltip from "@mui/material/Tooltip"
const theme = createTheme({
palette: {
primary: orange,
},
})
function BasicTabs({
tabs,
selectedTab,
json,
}: {
tabs: string[]
selectedTab: number
json?: { name: string; content: string }
}) {
const [value, setValue] = React.useState(selectedTab)
const handleChange = (event: React.SyntheticEvent, newValue: number) => {
Streamlit.setComponentValue(tabs[newValue])
setValue(newValue)
}
return (
<div
style={{
display: "flex",
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
marginTop: -8,
}}
>
<Box sx={{ width: "100%", margin: -1, padding: 0 }}>
<Box sx={{ borderBottom: 1, borderColor: "divider" }}>
<Tabs
value={value}
onChange={handleChange}
aria-label="navigation-tabs"
>
{tabs.map((tab) => (
<Tab key={`custom-tab-${tab}`} label={tab} />
))}
</Tabs>
</Box>
</Box>
<Tooltip
title={
json
? "Download the Croissant JSON-LD file."
: "Go to the overview to understand why the Croissant JSON-LD file cannot be generated."
}
placement="left"
>
<span>
<Button
disabled={!json}
disableElevation
variant="contained"
href={
json
? `data:text/json;charset=utf-8,${encodeURIComponent(
json.content
)}`
: ""
}
download={json ? json.name : ""}
sx={{
color: "white",
padding: "6px 20px",
textAlign: "center",
whiteSpace: "nowrap",
}}
>
Export
</Button>
</span>
</Tooltip>
</div>
)
}
class StreamlitTabs extends StreamlitComponentBase<{}> {
public render = (): ReactNode => {
const tabs = this.props.args["tabs"]
const selectedTab = this.props.args["selected_tab"]
const json = this.props.args["json"]
return (
<ThemeProvider theme={theme}>
<BasicTabs tabs={tabs} selectedTab={selectedTab} json={json} />
</ThemeProvider>
)
}
}
export default withStreamlitConnection(StreamlitTabs)
|