Skip to content

Commit d61997e

Browse files
elad-nelad-n
committed
Merge branch 'main' into updated-filter-group-comapring
# Conflicts: # src/components/dagshub/data-engine/annotations/LabelStudioPolygonDrawer.tsx # src/components/elements/controlledDisplayFiltersGroup/index.tsx # src/components/icons/index.tsx # src/stories/elements/controlledDisplayFiltersGroup/ControlledDisplayFiltersGroup.stories.tsx # src/theme.ts
1 parent d3e79cb commit d61997e

File tree

12 files changed

+213
-225
lines changed

12 files changed

+213
-225
lines changed

‎src/components/dagshub/data-engine/CSVViewer/CSVViewer.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export function CSVViewer({ headers, values }: { headers: string[]; values: stri
3535

3636
const autoSizeStrategy: SizeColumnsToFitGridStrategy = {
3737
type: 'fitGridWidth',
38-
defaultMinWidth: 100
38+
defaultMinWidth: 100,
3939
};
4040

4141
return (

‎src/components/dagshub/data-engine/annotations/LabelStudioPolygonDrawer.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -173,7 +173,8 @@ function getSingleAnnotationResultLayers(
173173
const [cx, cy] = pointPercentToPixel([cxPercent, cyPercent], dimension);
174174
const [rx, ry] = pointPercentToPixel([rxPercent, ryPercent], dimension);
175175

176-
const strokeWidth = rx * 2 > minStrokedObjectSize || ry * 2 > minStrokedObjectSize ? polygonStrokeWidth : 0;
176+
const strokeWidth =
177+
rx * 2 > minStrokedObjectSize || ry * 2 > minStrokedObjectSize ? polygonStrokeWidth : 0;
177178

178179
labelLayersPush(
179180
<Ellipse

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

+38-77
Original file line numberDiff line numberDiff line change
@@ -1,96 +1,57 @@
1-
import { useEffect, useState } from 'react';
2-
import { Box, Divider } from '@mui/material';
1+
import { Box, Divider, ThemeProvider } from '@mui/material';
32
import { DisplayFilter } from '../displayFilter';
43
import React from 'react';
54
import { LabeledSwitch } from '../../forms';
5+
import theme from '../../../theme';
66

7-
export type FilterType = { alias: string; value: string };
7+
export type FilterType = {
8+
alias: string;
9+
value?: number; // unix
10+
name: string;
11+
};
812

913
export interface ControlledDisplayFiltersGroupProps {
1014
filters: FilterType[];
1115
toggleAllLabel?: string;
12-
isToggleAll?: boolean;
13-
toggledFilters?: Set<string>;
14-
onChange: (activeFilters: FilterType[]) => void;
15-
search: ({ alias, value }: FilterType) => Promise<FilterType[]>;
16-
showCompareButton?: boolean
16+
showAll: boolean;
17+
toggleShowAll: () => void;
18+
displayedFilters?: Map<string, FilterType>;
19+
onChange: (activeFilters: FilterType) => void;
20+
addNewFilter: ({ alias, value, name }: { alias: string; value: number; name: string }) => void;
21+
showCompareButton?: boolean;
1722
}
1823

1924
export function ControlledDisplayFiltersGroup({
2025
filters,
2126
toggleAllLabel,
22-
isToggleAll,
23-
search,
27+
showAll,
28+
toggleShowAll,
29+
displayedFilters,
30+
addNewFilter,
2431
onChange,
25-
showCompareButton,
32+
showCompareButton,
2633
}: ControlledDisplayFiltersGroupProps) {
27-
const [displayedFilters, setDisplayedFilters] = useState<Map<string, FilterType>>(
28-
isToggleAll
29-
? new Map<string, FilterType>(
30-
filters.map((filter) => {
31-
return [filter.value, filter];
32-
})
33-
)
34-
: new Map<string, FilterType>()
35-
);
36-
const [showAll, setShowAll] = useState<boolean>(isToggleAll ?? false);
37-
const [availableFiltersNames, setAvailableFiltersNames] = useState<Map<string, FilterType>>(
38-
new Map(filters.map((filter) => [filter.value, filter]))
39-
);
40-
41-
useEffect(() => {
42-
setAvailableFiltersNames(new Map(filters.map((filter) => [filter.value, filter])));
43-
}, [filters]);
44-
45-
useEffect(() => {
46-
setShowAll(isToggleAll ?? false);
47-
}, [isToggleAll]);
48-
49-
const toggleShowAll = () => {
50-
const updatedFiltersToDisplay = showAll ? new Map() : availableFiltersNames;
51-
52-
setDisplayedFilters(updatedFiltersToDisplay);
53-
54-
onChange([...updatedFiltersToDisplay.values()]);
55-
setShowAll(!showAll);
56-
};
57-
58-
useEffect(() => {
59-
// toggle showAll when manually changing all the group to "on"
60-
const isEqual = availableFiltersNames.size === displayedFilters.size;
61-
setShowAll(isEqual);
62-
}, [displayedFilters, availableFiltersNames]);
63-
64-
const onFilterDisplayStateChanged = (filter: FilterType) => {
65-
const updatedDisplayedFilters = new Map(displayedFilters);
66-
if (updatedDisplayedFilters.has(filter.value)) {
67-
updatedDisplayedFilters.delete(filter.value);
68-
} else {
69-
updatedDisplayedFilters.set(filter.value, filter);
70-
}
71-
setDisplayedFilters(updatedDisplayedFilters);
72-
onChange([...updatedDisplayedFilters.values()]);
73-
};
74-
7534
return (
76-
<Box sx={{ backgroundColor: 'rgba(248, 250, 252, 1)' }}>
77-
<Box>
78-
<LabeledSwitch label={toggleAllLabel} onChange={toggleShowAll} checked={showAll} />
79-
</Box>
80-
{[...availableFiltersNames.values()].map((item) => {
81-
return (
82-
<>
83-
<DisplayFilter
35+
<ThemeProvider theme={theme}>
36+
<Box sx={{ backgroundColor: 'rgba(248, 250, 252, 1)' }}>
37+
<Box>
38+
<LabeledSwitch label={toggleAllLabel} onChange={toggleShowAll} checked={showAll} />
39+
</Box>
40+
{filters.map((item) => {
41+
return (
42+
<>
43+
<DisplayFilter
8444
showCompareButton={showCompareButton}
85-
search={search}
86-
value={showAll || displayedFilters.has(item.value)}
87-
filter={item}
88-
onChange={onFilterDisplayStateChanged}
89-
/>
90-
<Divider sx={{ backgroundColor: '#F8FAFC' }} />
91-
</>
92-
);
93-
})}
94-
</Box>
45+
addNewFilter={addNewFilter}
46+
value={showAll || !!displayedFilters?.has(item.alias)}
47+
filter={item}
48+
onChange={onChange}
49+
/>
50+
<Divider sx={{ backgroundColor: '#F8FAFC' }} />
51+
</>
52+
);
53+
})}
54+
</Box>
55+
</ThemeProvider>
9556
);
9657
}

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

+12-11
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
import React from 'react';
22
import { List, ListItem, ListItemButton, ListItemText, Typography } from '@mui/material';
33
import { Box } from '@mui/system';
4-
import { FilterType } from '../controlledDisplayFiltersGroup';
4+
import { PresetType } from '../displayFilter/ComparePopover';
5+
import { Dayjs } from 'dayjs';
56

67
const PresetsList = ({
78
list,
8-
onPresetClick
9+
onPresetClick,
910
}: {
10-
list: FilterType[];
11-
onPresetClick: (value: string) => void;
11+
list: PresetType[];
12+
onPresetClick: (value: Dayjs) => void;
1213
}) => {
1314
return (
1415
<List>
@@ -20,8 +21,8 @@ const PresetsList = ({
2021
'&:hover': {
2122
background: '#F1F5F9',
2223
padding: '8px',
23-
borderRadius: '6px'
24-
}
24+
borderRadius: '6px',
25+
},
2526
}}
2627
onClick={(e) => {
2728
e.stopPropagation();
@@ -32,9 +33,9 @@ const PresetsList = ({
3233
primaryTypographyProps={{
3334
fontSize: '14px',
3435
fontWeight: '500',
35-
lineHeight: '20px'
36+
lineHeight: '20px',
3637
}}
37-
primary={item.alias}
38+
primary={item.name}
3839
/>
3940
</ListItemButton>
4041
</ListItem>
@@ -45,10 +46,10 @@ const PresetsList = ({
4546

4647
const Presets = ({
4748
onPresetClick,
48-
presets
49+
presets,
4950
}: {
50-
onPresetClick: (date: string) => void;
51-
presets: FilterType[];
51+
onPresetClick: (date: Dayjs) => void;
52+
presets: PresetType[];
5253
}) => {
5354
return (
5455
<>

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

+6-6
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export const SearchForm = ({
2222
date,
2323
hour,
2424
setHour,
25-
displayName
25+
displayName,
2626
}: SearchFormProps) => {
2727
return (
2828
<Box width={'50%'} py={2} px={1} display={'inline-grid'} gap={2}>
@@ -35,10 +35,10 @@ export const SearchForm = ({
3535
day: {
3636
sx: {
3737
'&.MuiPickersDay-root.Mui-selected': {
38-
backgroundColor: '#5467de'
39-
}
40-
}
41-
}
38+
backgroundColor: '#5467de',
39+
},
40+
},
41+
},
4242
}}
4343
format="YYYY-MM-DD"
4444
value={date}
@@ -67,7 +67,7 @@ export const SearchForm = ({
6767
/>
6868
</svg>,
6969
'calendar'
70-
)
70+
),
7171
}}
7272
/>
7373
</Box>

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

+17-10
Original file line numberDiff line numberDiff line change
@@ -8,35 +8,39 @@ import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
88
import theme from '../../../theme';
99
import PresetsContent from './Presets';
1010
import { SearchForm } from './SearchForm';
11-
import { FilterType } from '../controlledDisplayFiltersGroup';
11+
import { PresetType } from '../displayFilter/ComparePopover';
1212

1313
export interface DateManagerProps {
14-
presets: FilterType[];
15-
compare: ({ alias, value }: FilterType) => void;
14+
presets: PresetType[];
15+
compare: ({ alias, value }: { alias: string; value: number }) => void;
1616
close: () => void;
1717
loading: boolean;
1818
}
1919

20+
const formattedDate = (
21+
date: string | number | dayjs.Dayjs | Date | null | undefined,
22+
hour: string | number | dayjs.Dayjs | Date | null | undefined
23+
) => {
24+
return `${dayjs(date).format('YYYY-MM-DD')} ${dayjs(hour).format('HH:mm:ss')}`;
25+
};
26+
2027
export const DateManager = ({ presets, compare, close, loading }: DateManagerProps) => {
2128
const defaultDisplayName = `as of ${dayjs().format('YYYY-MM-DD')} ${dayjs().format('HH:mm:ss')}`;
2229

2330
const [date, setDate] = useState<null | Dayjs>(dayjs());
2431
const [hour, setHour] = useState<null | Dayjs>(dayjs());
25-
const [value, setValue] = useState<string>(defaultDisplayName);
32+
const [value, setValue] = useState<number>(dayjs(formattedDate(date, hour)).unix());
2633
const [displayName, setDisplayName] = useState(defaultDisplayName);
2734
const [displayNameTouched, setDisplayNameTouched] = useState(false);
2835
const [errorDate, setErrorDate] = useState(false);
2936

30-
const updateValue = (value: string) => setValue(value);
31-
3237
// update the display name unless the display name area is touched.
3338
useEffect(() => {
34-
const value = `${dayjs(date).format('YYYY-MM-DD')} ${dayjs(hour).format('HH:mm:ss')}`;
39+
const value = formattedDate(date, hour);
3540
if (!displayNameTouched) {
3641
setDisplayName(`as of ${value}`);
3742
}
38-
39-
updateValue(value);
43+
setValue(dayjs(value).unix());
4044
}, [hour, date]);
4145

4246
return (
@@ -85,7 +89,10 @@ export const DateManager = ({ presets, compare, close, loading }: DateManagerPro
8589
<Button
8690
stretch={ButtonStretch.Slim}
8791
variant={ButtonVariant.Primary}
88-
onClick={() => compare({ value, alias: displayName })}
92+
onClick={() => {
93+
compare({ value, alias: displayName });
94+
close();
95+
}}
8996
disabled={!date || errorDate || loading}
9097
label={loading ? 'loading...' : 'Search'}
9198
/>

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

+18-30
Original file line numberDiff line numberDiff line change
@@ -4,34 +4,33 @@ import { DateManager } from '../dateManager';
44
import React, { useState } from 'react';
55
import dayjs from 'dayjs';
66
import { Icon } from '../../icons';
7-
import { FilterType } from '../controlledDisplayFiltersGroup';
87

9-
function deductDays(days: number) {
10-
const date = new Date();
11-
return dayjs(date.setDate(date.getDay() - days)).format('YYYY-MM-DD');
12-
}
8+
export type PresetType = {
9+
name: string;
10+
value: dayjs.Dayjs;
11+
};
1312

14-
export const defaultPresets: FilterType[] = [
13+
export const defaultPresets: PresetType[] = [
1514
{
16-
alias: '1 day ago',
17-
value: deductDays(1)
15+
name: '1 day ago',
16+
value: dayjs().subtract(1, 'day'),
1817
},
1918
{
20-
alias: '1 week ago',
21-
value: deductDays(7)
19+
name: '1 week ago',
20+
value: dayjs().subtract(7, 'day'),
2221
},
2322
{
24-
alias: '1 month ago',
25-
value: deductDays(30)
26-
}
23+
name: '1 month ago',
24+
value: dayjs().subtract(30, 'day'),
25+
},
2726
];
2827

2928
const ComparePopover = ({
3029
presets,
31-
search
30+
addNewFilter,
3231
}: {
33-
presets?: FilterType[];
34-
search: ({ alias, value }: FilterType) => Promise<FilterType[]>;
32+
presets?: PresetType[];
33+
addNewFilter: ({ alias, value }: { alias: string; value: number }) => void;
3534
}) => {
3635
const [loading, setLoading] = useState(false);
3736
const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);
@@ -47,17 +46,6 @@ const ComparePopover = ({
4746
const open = Boolean(anchorEl);
4847
const id = open ? 'popover' : undefined;
4948

50-
const compare = async ({ value, alias }: FilterType) => {
51-
setLoading(true);
52-
try {
53-
const res = await search({ alias, value });
54-
handleClose();
55-
} catch (e) {
56-
} finally {
57-
setLoading(false);
58-
}
59-
};
60-
6149
return (
6250
<div>
6351
<Tooltip title="Compare to other version">
@@ -69,7 +57,7 @@ const ComparePopover = ({
6957
width: '32px',
7058
'&:hover': { backgroundColor: 'transparent' },
7159
borderRadius: '32px',
72-
border: '1px solid #E2E8F0'
60+
border: '1px solid #E2E8F0',
7361
}}
7462
onClick={handleClick}
7563
>
@@ -84,13 +72,13 @@ const ComparePopover = ({
8472
onClose={handleClose}
8573
anchorOrigin={{
8674
vertical: 'bottom',
87-
horizontal: 'left'
75+
horizontal: 'left',
8876
}}
8977
>
9078
<DateManager
9179
close={handleClose}
9280
loading={loading}
93-
compare={compare}
81+
compare={addNewFilter}
9482
presets={presets?.length ? presets : defaultPresets}
9583
/>
9684
</Popover>

0 commit comments

Comments
 (0)