Skip to content

Commit

Permalink
UI: refactor use widget wrapper
Browse files Browse the repository at this point in the history
  • Loading branch information
@DimaAmega
DimaAmega committed Dec 13, 2024
1 parent f2ca068 commit cef0dc1
Show file tree
Hide file tree
Showing 5 changed files with 117 additions and 117 deletions.
8 changes: 2 additions & 6 deletions ui/packages/evidently-ui-lib/src/components/DashboardContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,13 @@ import { WidgetRenderer } from '~/widgets/WidgetRenderer'

export interface DashboardContentProps {
widgets: WidgetInfo[]
ItemWrapper?: ({ id, children }: { id: string; children: React.ReactNode }) => React.ReactNode
}

export const DashboardContentWidgets: FunctionComponent<DashboardContentProps> = ({
widgets,
ItemWrapper
}) => (
export const DashboardContentWidgets: FunctionComponent<DashboardContentProps> = ({ widgets }) => (
<>
{widgets.length > 0 &&
widgets.map((wi, idx) => (
<React.Fragment key={wi.id}>{WidgetRenderer(`wi_${idx}`, wi, ItemWrapper)}</React.Fragment>
<React.Fragment key={wi.id}>{WidgetRenderer(`wi_${idx}`, wi)}</React.Fragment>
))}
</>
)
6 changes: 2 additions & 4 deletions ui/packages/evidently-ui-lib/src/components/DashboardWidgets.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,9 @@ import type { WidgetInfo } from '~/api'
import { DashboardContentWidgets } from '~/components/DashboardContent'

export const DashboardWidgets = ({
widgets,
ItemWrapper
widgets
}: {
widgets: WidgetInfo[]
ItemWrapper?: ({ id, children }: { id: string; children: React.ReactNode }) => React.ReactNode
}) => {
if (widgets.length === 0) {
return (
Expand All @@ -20,7 +18,7 @@ export const DashboardWidgets = ({
return (
<>
<Grid container spacing={3} direction='row' alignItems='stretch'>
<DashboardContentWidgets widgets={widgets} ItemWrapper={ItemWrapper} />
<DashboardContentWidgets widgets={widgets} />
</Grid>
</>
)
Expand Down
13 changes: 13 additions & 0 deletions ui/packages/evidently-ui-lib/src/contexts/WidgetWrapper.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import React, { useContext } from 'react'

export type WidgetWrapper = {
WidgetWrapper: ({ id, children }: { id: string; children: React.ReactNode }) => JSX.Element
}

const EmptyWidgetWrapper: WidgetWrapper['WidgetWrapper'] = ({ children }) => <>{children}</>

export const widgetWrapperContext = React.createContext<WidgetWrapper>({
WidgetWrapper: EmptyWidgetWrapper
})

export const useWidgetWrapper = () => useContext(widgetWrapperContext)
199 changes: 98 additions & 101 deletions ui/packages/evidently-ui-lib/src/widgets/Widget.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import type { WidgetInfo } from '~/api'

import { Card, CardContent, Grid, Typography } from '@mui/material'

import { useWidgetWrapper } from '~/contexts/WidgetWrapper'
import AlertBlock from './AlertBlock'
import AlertStatBlock from './AlertStatBlock'
import InsightBlock from './InsightBlock'
Expand Down Expand Up @@ -59,127 +60,123 @@ function Sizes(size: number): sizes {
}
}

const Widget = (
props: WidgetProps & {
ItemWrapper?: ({ id, children }: { id: string; children: React.ReactNode }) => React.ReactNode
}
) => {
const { size, ItemWrapper } = props
const Widget = (props: WidgetProps) => {
const { size } = props
const alertsPosition = props.children.alertsPosition ?? 'row'
const { id, title, details, content, alerts, alertStats, insights } = props.children
const isAlertsExists = alerts === undefined ? false : alerts.length > 0
const isInsightsExists = insights === undefined ? false : insights.length > 0

const Component = (
<Card elevation={0}>
<CardContent>
<Grid container spacing={1} direction={'column'}>
{alertsPosition === 'row' ? (
<Grid container spacing={1} item>
<Grid item xs={isAlertsExists && alertsPosition === 'row' ? 9 : 12}>
{title ? (
<Typography fontWeight={500} variant={'h5'}>
{title}
</Typography>
) : (
<div />
)}
<div>{content}</div>
{details ? <Typography variant={'subtitle1'}>{details}</Typography> : <div />}
</Grid>
{isAlertsExists ? (
<Grid
container
spacing={1}
direction={'column'}
justifyContent={'center'}
item
xs={3}
>
{alerts ? (
<React.Fragment>
{alertStats ? (
<Grid item>
<AlertStatBlock
alertStats={alertStats}
// classes={classes}
/>
</Grid>
const { WidgetWrapper } = useWidgetWrapper()

return (
<Grid item {...Sizes(size)}>
<WidgetWrapper id={id}>
<Card elevation={0}>
<CardContent>
<Grid container spacing={1} direction={'column'}>
{alertsPosition === 'row' ? (
<Grid container spacing={1} item>
<Grid item xs={isAlertsExists && alertsPosition === 'row' ? 9 : 12}>
{title ? (
<Typography fontWeight={500} variant={'h5'}>
{title}
</Typography>
) : (
<div />
)}
<div>{content}</div>
{details ? <Typography variant={'subtitle1'}>{details}</Typography> : <div />}
</Grid>
{isAlertsExists ? (
<Grid
container
spacing={1}
direction={'column'}
justifyContent={'center'}
item
xs={3}
>
{alerts ? (
<React.Fragment>
{alertStats ? (
<Grid item>
<AlertStatBlock
alertStats={alertStats}
// classes={classes}
/>
</Grid>
) : (
<div />
)}
{alerts.map((alert) => (
// biome-ignore lint/correctness/useJsxKeyInIterable: not reordered
<Grid item>
<AlertBlock data={alert} />
</Grid>
))}
</React.Fragment>
) : (
<div />
)}
{alerts.map((alert) => (
// biome-ignore lint/correctness/useJsxKeyInIterable: not reordered
<Grid item>
<AlertBlock data={alert} />
</Grid>
))}
</React.Fragment>
</Grid>
) : (
<div />
)}
</Grid>
) : (
<div />
)}
</Grid>
) : (
<React.Fragment>
<Grid item>
{title ? <Typography variant={'h5'}>{title}</Typography> : <div />}
<div>{content}</div>
{details ? <Typography variant={'subtitle1'}>{details}</Typography> : <div />}
</Grid>
{isAlertsExists ? (
<Grid item xs>
<Grid container direction={'row'} spacing={1}>
{alerts ? (
<React.Fragment>
{alertStats ? (
<Grid item xs>
<AlertStatBlock
alertStats={alertStats}
// classes={classes}
/>
</Grid>
<React.Fragment>
<Grid item>
{title ? <Typography variant={'h5'}>{title}</Typography> : <div />}
<div>{content}</div>
{details ? <Typography variant={'subtitle1'}>{details}</Typography> : <div />}
</Grid>
{isAlertsExists ? (
<Grid item xs>
<Grid container direction={'row'} spacing={1}>
{alerts ? (
<React.Fragment>
{alertStats ? (
<Grid item xs>
<AlertStatBlock
alertStats={alertStats}
// classes={classes}
/>
</Grid>
) : (
<div />
)}
{alerts.map((alert) => (
// biome-ignore lint/correctness/useJsxKeyInIterable: not reordered
<Grid item xs>
<AlertBlock data={alert} />
</Grid>
))}
</React.Fragment>
) : (
<div />
)}
{alerts.map((alert) => (
// biome-ignore lint/correctness/useJsxKeyInIterable: not reordered
<Grid item xs>
<AlertBlock data={alert} />
</Grid>
))}
</React.Fragment>
) : (
<div />
)}
</Grid>
</Grid>
) : (
<div />
)}
</React.Fragment>
)}
{isInsightsExists ? (
insights?.map((insight) => (
// biome-ignore lint/correctness/useJsxKeyInIterable: not reordered
<Grid item xs sm md>
<InsightBlock data={insight} />
</Grid>
</Grid>
))
) : (
<div />
)}
</React.Fragment>
)}
{isInsightsExists ? (
insights?.map((insight) => (
// biome-ignore lint/correctness/useJsxKeyInIterable: not reordered
<Grid item xs sm md>
<InsightBlock data={insight} />
</Grid>
))
) : (
<div />
)}
</Grid>
</CardContent>
</Card>
)

return (
<Grid item {...Sizes(size)}>
{ItemWrapper ? ItemWrapper({ id, children: Component }) : Component}
</Grid>
</CardContent>
</Card>
</WidgetWrapper>
</Grid>
)
}
Expand Down
8 changes: 2 additions & 6 deletions ui/packages/evidently-ui-lib/src/widgets/WidgetRenderer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,11 +46,7 @@ function sizeTransform(size: WidgetSize): 1 | 3 | 6 | 12 {
return 12
}

export function WidgetRenderer(
key: string,
info: WidgetInfo,
ItemWrapper?: ({ id, children }: { id: string; children: React.ReactNode }) => React.ReactNode
) {
export function WidgetRenderer(key: string, info: WidgetInfo) {
let content = <NotImplementedWidgetContent />
if (info.type === 'counter') {
content = <CounterWidgetContent {...(info.params as CounterWidgetParams)} />
Expand Down Expand Up @@ -102,7 +98,7 @@ export function WidgetRenderer(
content = <TestSuiteWidgetContent {...(info.params as TestSuiteWidgetParams)} />
}
return (
<Widget key={key} size={sizeTransform(info.size)} ItemWrapper={ItemWrapper}>
<Widget key={key} size={sizeTransform(info.size)}>
{{
...info,
content: content
Expand Down

0 comments on commit cef0dc1

Please sign in to comment.