Skip to content

Commit 33f47e2

Browse files
elad-nelad-n
committed
minor type fixes
1 parent fa52fbf commit 33f47e2

File tree

7 files changed

+93
-65
lines changed

7 files changed

+93
-65
lines changed

‎src/components/dagshub/data-engine/file-tree/FileTreeItem.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,6 @@ export function FileTreeItem({
100100
<Box display={'flex'} alignItems={'center'}>
101101
<IconButton
102102
onClick={openFileHandler}
103-
disableRipple
104103
sx={{
105104
visibility: isEmpty ? 'hidden' : 'unset',
106105
transition: '.1s ease-in-out',

‎src/components/elements/controlledDisplayFiltersGroup/index.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ export interface DisplayFilterPartialProps {
1313
label: string;
1414
onChange?: (name: string) => void;
1515
children?: childFilter[];
16+
showCompare?: boolean;
1617
}
1718

1819
export interface ControlledDisplayFiltersGroupProps {
@@ -28,7 +29,7 @@ export function ControlledDisplayFiltersGroup({
2829
onToggleShowAll,
2930
toggleAllLabel,
3031
isToggleAll,
31-
toggledFilters
32+
toggledFilters,
3233
}: ControlledDisplayFiltersGroupProps) {
3334
const [showAll, setShowAll] = useState<boolean>(isToggleAll ?? false);
3435
const [availableFiltersNames, setAvailableFiltersNames] = useState<Set<string>>(
@@ -86,7 +87,7 @@ export function ControlledDisplayFiltersGroup({
8687
return (
8788
<>
8889
<DisplayFilter
89-
children={item.children}
90+
showCompare={item?.showCompare}
9091
showAll={showAll}
9192
value={showAll || displayedFilters.has(item.label)}
9293
label={item.label}

‎src/components/elements/dateManager/Presets.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,6 @@ const PresetsList = ({
3232
borderRadius: '6px'
3333
}
3434
}}
35-
href="#simple-list"
3635
onClick={(e) => {
3736
e.stopPropagation();
3837
onPresetClick(item.value);

‎src/components/elements/dateManager/index.tsx

+30-7
Original file line numberDiff line numberDiff line change
@@ -20,26 +20,38 @@ const NoResultsState = () => {
2020
the timestamp you entered and try again.
2121
</Typography>
2222
</Box>
23-
)
23+
);
2424
};
2525
export const DateManager = ({
2626
presets,
27-
showNoResults
27+
showNoResults,
28+
search,
29+
close
2830
}: {
2931
presets: { name: string; value: Date }[];
3032
showNoResults?: boolean;
33+
search: ({ name, value }: { name: string; value: string }) => void;
34+
close: () => void;
3135
}) => {
3236
const defaultDisplayName = `as of ${dayjs().format('YYYY-MM-DD')} ${dayjs().format('HH:mm:ss')}`;
33-
const [date, setDate] = useState<Dayjs | null>(dayjs());
34-
const [hour, setHour] = useState<Dayjs | null>(dayjs());
37+
38+
const [date, setDate] = useState<Dayjs | null | string>(dayjs());
39+
const [hour, setHour] = useState<Dayjs | null | string>(dayjs());
40+
const [value, setValue] = useState<string>(defaultDisplayName);
3541
const [displayName, setDisplayName] = useState(defaultDisplayName);
3642
const [displayNameTouched, setDisplayNameTouched] = useState(false);
43+
const [errorDate, setErrorDate] = useState(false);
44+
45+
const updateValue = (value: string) => setValue(value);
3746

3847
// update the display name unless the display name area is touched.
3948
useEffect(() => {
49+
const value = `${dayjs(date).format('YYYY-MM-DD')} ${dayjs(hour).format('HH:mm:ss')}`;
4050
if (!displayNameTouched) {
41-
setDisplayName(`as of ${date?.format('YYYY-MM-DD')} ${hour?.format('HH:mm:ss')}`);
51+
setDisplayName(`as of ${value}`);
4252
}
53+
54+
updateValue(value);
4355
}, [hour, date]);
4456

4557
return (
@@ -73,6 +85,14 @@ export const DateManager = ({
7385
format="YYYY-MM-DD"
7486
value={date}
7587
onChange={setDate}
88+
onError={(reason, value) => {
89+
console.log('reason, ',reason)
90+
if (reason) {
91+
setErrorDate(true);
92+
} else {
93+
setErrorDate(false);
94+
}
95+
}}
7696
slots={{
7797
openPickerIcon: createSvgIcon(
7898
<svg
@@ -143,13 +163,16 @@ export const DateManager = ({
143163
<Button
144164
stretch={ButtonStretch.Slim}
145165
variant={ButtonVariant.OutlineSecondary}
146-
onClick={() => {}}
166+
onClick={close}
147167
label={'Cancel'}
148168
/>
149169
<Button
150170
stretch={ButtonStretch.Slim}
151171
variant={ButtonVariant.Primary}
152-
onClick={() => {}}
172+
onClick={() => {
173+
search({ name: displayName, value });
174+
}}
175+
disabled={!date || errorDate}
153176
label={'Search'}
154177
/>
155178
</Box>

‎src/components/elements/displayFilter/ComparePopover.tsx

+13-4
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,17 @@ const defaultPresets = [
2626
}
2727
];
2828

29-
const ComparePopover = ({ presets }: { presets?: { name: string; value: Date; }[]} ) => {
29+
const ComparePopover = ({
30+
presets,
31+
search
32+
}: {
33+
presets?: { name: string; value: Date }[];
34+
search: ({ name, value }: { name: string; value: string }) => void;
35+
}) => {
3036
const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);
3137

32-
console.log('presets', presets)
3338
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
39+
event.stopPropagation();
3440
setAnchorEl(event.currentTarget);
3541
};
3642

@@ -47,7 +53,6 @@ const ComparePopover = ({ presets }: { presets?: { name: string; value: Date; }[
4753
<IconButton
4854
aria-describedby={id}
4955
sx={{ padding: 0, height: '20px', width: '21.08px' }}
50-
disableRipple
5156
onClick={handleClick}
5257
>
5358
<AddIcon sx={{ height: '20px', width: '21.08px' }} fill={'#94A3B8'} />
@@ -64,7 +69,11 @@ const ComparePopover = ({ presets }: { presets?: { name: string; value: Date; }[
6469
horizontal: 'left'
6570
}}
6671
>
67-
<DateManager presets={presets?.length ? presets : defaultPresets} />
72+
<DateManager
73+
close={handleClose}
74+
search={search}
75+
presets={presets?.length ? presets : defaultPresets}
76+
/>
6877
</Popover>
6978
</div>
7079
);

‎src/components/elements/displayFilter/index.tsx

+41-33
Original file line numberDiff line numberDiff line change
@@ -16,30 +16,25 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
1616
import CancelIcon from '@mui/icons-material/Cancel';
1717
import ComparePopover from './ComparePopover';
1818

19-
type childFilter = {
20-
label: string;
21-
onChange: (value: string) => void;
22-
};
2319
export interface DisplayFilterProps {
2420
label: string;
2521
showAll?: boolean;
2622
onChange: () => void;
2723
value: boolean;
2824
showCancel?: boolean;
29-
children?: childFilter[];
25+
showCompare?: boolean;
3026
isChild?: boolean;
27+
cancelFilter?: (e: any) => void;
3128
}
3229

33-
export function DisplayFilter({
34-
label,
35-
onChange,
36-
value,
37-
showCancel,
38-
children,
39-
showAll
30+
export function DisplayFilter({ label, onChange, value, showCancel, showAll, showCompare, cancelFilter,
4031
}: DisplayFilterProps) {
4132
const [show, setShow] = useState<boolean>(false);
4233
const [open, setOpen] = useState<boolean>(false);
34+
const [children, setChildren] = useState<{ name: string; value: string }[]>([{
35+
value: '',
36+
name: 'as of now'
37+
}]);
4338

4439
const filterClicked = () => {
4540
setShow(!show);
@@ -51,14 +46,24 @@ export function DisplayFilter({
5146
setOpen(!open);
5247
};
5348

54-
const cancelFilter = (e: React.SyntheticEvent) => {
55-
e.stopPropagation();
56-
};
57-
5849
useEffect(() => {
5950
setShow(value);
6051
}, [value]);
6152

53+
const search = ({ name, value }: { name: string; value: string }) => {
54+
console.log('value ', value);
55+
console.log('name ', name);
56+
// has results -
57+
// add the tag to the children list.
58+
const newChildren = [...children || [], { name, value}];
59+
setChildren(newChildren);
60+
// empty - toggle on no results
61+
};
62+
63+
const removeChildFilter = (e: any) => {
64+
console.log('e', e);
65+
};
66+
6267
return (
6368
<div>
6469
<ThemeProvider theme={theme}>
@@ -67,19 +72,20 @@ export function DisplayFilter({
6772
gap={1}
6873
direction={'row'}
6974
sx={{
70-
cursor: 'pointer',
71-
background: '#F8FAFC',
75+
background: open ? '#F1F5F9' : '#F8FAFC',
7276
color: '#172D32',
77+
'&:hover': {
78+
backgroundColor: '#F1F5F9'
79+
},
7380
'&:hover #cancel': {
7481
display: 'initial'
75-
}
82+
},
83+
borderLeft: open ? '3px solid #C4B5FD' : '3px solid transparent'
7684
}}
7785
display={'flex'}
7886
justifyContent={'space-between'}
7987
alignItems={'center'}
80-
onClick={filterClicked}
8188
padding={'8px'}
82-
role={'button'}
8389
>
8490
<Box
8591
alignItems={'center'}
@@ -99,16 +105,18 @@ export function DisplayFilter({
99105
{label}
100106
</Typography>
101107

102-
{children?.length && (
108+
{children?.length > 1 && (
103109
<IconButton
104110
sx={{
111+
padding: 0,
112+
height: '20px',
113+
width: '20px',
105114
transition: '.3s ease-in-out',
106115
transform: open ? 'rotate(180deg)' : 'unset',
107116
'&:hover': {
108117
backgroundColor: 'transparent'
109118
}
110119
}}
111-
disableRipple
112120
onClick={onToggle}
113121
>
114122
<ExpandMoreIcon />
@@ -117,8 +125,8 @@ export function DisplayFilter({
117125
</Box>
118126

119127
<Stack direction={'row'} gap={1}>
120-
{showCancel && (
121-
<IconButton onClick={cancelFilter} sx={{ padding: 0 }} disableRipple>
128+
{!!cancelFilter && (
129+
<IconButton onClick={() => cancelFilter(label) } sx={{ padding: 0 }}>
122130
<CancelIcon
123131
id={'cancel'}
124132
sx={{
@@ -132,33 +140,33 @@ export function DisplayFilter({
132140
</IconButton>
133141
)}
134142

143+
{showCompare && <ComparePopover search={search}/>}
144+
135145
<IconButton
136146
sx={{ padding: 0, height: '20px', width: '21.08px' }}
137-
disableRipple
138-
onClick={() => {}}
147+
onClick={filterClicked}
139148
>
140149
<Icon icon={show ? 'eye' : 'eye-off'} height={20} width={21.08} fill={'#94A3B8'} />
141150
</IconButton>
142151
</Stack>
143152
</Box>
144153
</Stack>
145154

146-
<ComparePopover />
147-
148155
{/*annotations */}
149-
{children?.length && (
156+
{children?.length > 1 && (
150157
<Collapse in={open} timeout="auto" unmountOnExit>
151158
<List component="div" disablePadding>
152-
<Box borderLeft={'3px solid #C4B5FD'} paddingLeft={2}>
159+
<Box paddingLeft={2}>
153160
{children?.map((item) => (
154-
<Tooltip title={item?.label}>
161+
<Tooltip title={item?.name}>
155162
<div>
156163
<DisplayFilter
157164
isChild
158165
value={!!showAll}
159-
label={item?.label}
166+
label={item?.name}
160167
onChange={() => console.log('changed')}
161168
showCancel
169+
cancelFilter={removeChildFilter}
162170
/>
163171
</div>
164172
</Tooltip>

‎src/stories/elements/controlledDisplayFiltersGroup/ControlledDisplayFiltersGroup.stories.tsx

+6-17
Original file line numberDiff line numberDiff line change
@@ -22,29 +22,18 @@ const Template: StoryFn<typeof ControlledDisplayFiltersGroup> = (args) => (
2222
const filters = [
2323
{
2424
label: 'metadata_key_1',
25-
onChange: (value: string) => console.log('changed', value)
25+
onChange: (value: string) => console.log('changed', value),
26+
showCompare: true
2627
},
2728
{
2829
label: 'metadata_key_2',
29-
onChange: (value: string) => console.log('changed', value)
30+
onChange: (value: string) => console.log('changed', value),
31+
showCompare: true
3032
},
3133
{
3234
label: 'metadata_key_3',
33-
onChange: (value: string) => console.log('changed', value)
34-
// children: [
35-
// {
36-
// label: 'metadata_key_1.1',
37-
// onChange: (value: string) => console.log('changed', value)
38-
// },
39-
// {
40-
// label: 'metadata_key_1.2',
41-
// onChange: (value: string) => console.log('changed', value)
42-
// },
43-
// {
44-
// label: 'metadata_key_1.3 as of 06/10/1987 6:00',
45-
// onChange: (value: string) => console.log('changed', value)
46-
// }
47-
// ]
35+
onChange: (value: string) => console.log('changed', value),
36+
showCompare: true
4837
}
4938
];
5039

0 commit comments

Comments
 (0)