Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

test date input for time slider and adjust input element #1095

Merged
merged 17 commits into from
Aug 8, 2024
Merged

test date input for time slider and adjust input element #1095

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
4839c8b
test date input for time slider and adjust input element
moontrip May 15, 2024
931de5b
applying to SAM and adjust layout
moontrip May 21, 2024
a772b99
add step buttons
moontrip May 29, 2024
aafb235
Merge branch 'main' into timeslider-date-input
moontrip May 29, 2024
2ba81b1
address feedbacks for step buttons
moontrip Jun 4, 2024
291d302
Merge branch 'main' into timeslider-date-input
moontrip Jun 4, 2024
f82ccf6
Merge branch 'main' into timeslider-date-input
moontrip Jul 1, 2024
1716200
Merge branch 'main' into timeslider-date-input
moontrip Jul 22, 2024
9efbed8
address feedbacks
moontrip Jul 24, 2024
f8801c5
considering leap years
moontrip Jul 30, 2024
b1b2c1e
Merge branch 'main' into timeslider-date-input
moontrip Jul 31, 2024
d94500b
updated help tooltip
bobular Jul 31, 2024
16088c0
simplifying codes
moontrip Aug 6, 2024
2b32107
Merge branch 'timeslider-date-input' of https://github.com/VEuPathDB/…
moontrip Aug 6, 2024
6bb10a9
Merge branch 'main' into timeslider-date-input
moontrip Aug 6, 2024
eceed45
Merge branch 'main' into timeslider-date-input
moontrip Aug 8, 2024
9366590
remove href
moontrip Aug 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
88 changes: 40 additions & 48 deletions packages/libs/components/src/components/plotControls/TimeSlider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,9 +44,6 @@ export type TimeSliderProps = {
debounceRateMs?: number;
/** all user-interaction disabled */
disabled?: boolean;
/** for resetting disabled left and right arrow buttons when changing brush bounds */
setDisableLeftArrow?: (value: boolean) => void;
setDisableRightArrow?: (value: boolean) => void;
};

// using forwardRef
Expand All @@ -66,8 +63,6 @@ function TimeSlider(props: TimeSliderProps) {
debounceRateMs = 500,
disabled = false,
xAxisRange,
setDisableLeftArrow,
setDisableRightArrow,
} = props;

const resizeTriggerAreas: ResizeTriggerAreas[] = disabled
Expand Down Expand Up @@ -96,49 +91,6 @@ function TimeSlider(props: TimeSliderProps) {
const getXData = (d: TimeSliderDataProp) => new Date(d.x);
const getYData = (d: TimeSliderDataProp) => d.y;

const onBrushChange = useMemo(
() =>
debounce((domain: Bounds | null) => {
if (!domain) return;
const { x0, x1 } = domain;

// computing the offset of 2 pixel (SAFE_PIXEL) in domain (milliseconds)
// https://github.com/airbnb/visx/blob/86a851cb3bf622b013b186f02f955bcd6548a87f/packages/visx-brush/src/Brush.tsx#L14
const brushOffset =
xBrushScale.invert(2).getTime() - xBrushScale.invert(0).getTime();

// compensating the offset
// x0 and x1 are millisecond value
const startDate = millisecondTodate(x0 + brushOffset);
const endDate = millisecondTodate(x1 - brushOffset);

setSelectedRange({
// don't let range go outside the xAxisRange, if provided
start: xAxisRange
? startDate < xAxisRange.start
? xAxisRange.start
: startDate
: startDate,
end: xAxisRange
? endDate > xAxisRange.end
? xAxisRange.end
: endDate
: endDate,
});
// resetting disabled left and arrow buttons
if (setDisableLeftArrow) setDisableLeftArrow(false);
if (setDisableRightArrow) setDisableRightArrow(false);
}, debounceRateMs),
[setSelectedRange, xAxisRange]
);

// Cancel any pending onBrushChange requests when this component is unmounted
useEffect(() => {
return () => {
onBrushChange.cancel();
};
}, []);

// bounds
const xBrushMax = Math.max(width - margin.left - margin.right, 0);
// take 70 % of given height considering axis tick/tick labels at the bottom
Expand Down Expand Up @@ -189,6 +141,46 @@ function TimeSlider(props: TimeSliderProps) {
? selectedRange.start + ':' + selectedRange.end
: 'no_brush';

const onBrushChange = useMemo(
() =>
debounce((domain: Bounds | null) => {
if (!domain) return;
const { x0, x1 } = domain;

// computing the offset of 2 pixel (SAFE_PIXEL) in domain (milliseconds)
// https://github.com/airbnb/visx/blob/86a851cb3bf622b013b186f02f955bcd6548a87f/packages/visx-brush/src/Brush.tsx#L14
const brushOffset =
xBrushScale.invert(2).getTime() - xBrushScale.invert(0).getTime();

// compensating the offset
// x0 and x1 are millisecond value
const startDate = millisecondTodate(x0 + brushOffset);
const endDate = millisecondTodate(x1 - brushOffset);

setSelectedRange({
// don't let range go outside the xAxisRange, if provided
start: xAxisRange
? startDate < xAxisRange.start
? xAxisRange.start
: startDate
: startDate,
end: xAxisRange
? endDate > xAxisRange.end
? xAxisRange.end
: endDate
: endDate,
});
}, debounceRateMs),
[setSelectedRange, xAxisRange, debounceRateMs, xBrushScale]
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for spotting those missing deps!

);

// Cancel any pending onBrushChange requests when this component is unmounted
useEffect(() => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice!

return () => {
onBrushChange.cancel();
};
}, [onBrushChange]);

return (
<div
style={{
Expand Down
20 changes: 9 additions & 11 deletions packages/libs/eda/src/lib/map/analysis/TimeSliderQuickFilter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,12 +140,12 @@ export default function TimeSliderQuickFilter({
},
};
}, [
variableMetadata?.variable,
variable,
subsettingClient,
filters,
extendedDisplayRange?.start,
extendedDisplayRange?.end,
extendedDisplayRange,
studyId,
variableMetadata,
]);

const timeSliderData = useQuery({
Expand Down Expand Up @@ -234,7 +234,11 @@ export default function TimeSliderQuickFilter({
<p>
Expand the panel with the{' '}
<ChevronRight transform={'matrix(0,1,-1,0,0,0)'} /> tab or click{' '}
<a style={{ cursor: 'pointer' }} onClick={() => setMinimized(false)}>
<a
href="/#"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I this something your IDE inserted? I think that happened once before. I don't think we want it...?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@bobular Thank you for your reviews 👍 Yes it shows warning like "no href". The "/#" actually do nothing and it is one of recommended ways: otherwise, warning message recommends to use button element, but it is not the case for this.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In Firefox the /# can show up bottom-left of the screen and I think it can end up in the address bar if clicked on. If you can remove that would be great!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oops, I didn't check Firefox. Okay then I will remove it and merge Thanks @bobular 👍

style={{ cursor: 'pointer' }}
onClick={() => setMinimized(false)}
>
here
</a>{' '}
to reveal further controls that allow you to...
Expand Down Expand Up @@ -270,9 +274,6 @@ export default function TimeSliderQuickFilter({
end: newRange.max as string,
};
updateConfig({ ...config, selectedRange: newSelectedRange });
// resetting disabled left and arrow buttons
setDisableLeftArrow(false);
setDisableRightArrow(false);
}
},
[config, updateConfig]
Expand All @@ -290,7 +291,7 @@ export default function TimeSliderQuickFilter({
updateConfig({ ...config, selectedRange: newSelectedRange });
}
},
[config, updateConfig, extendedDisplayRange, selectedRange]
[config, updateConfig, selectedRange]
);

// enabling/disabling date range arrows
Expand Down Expand Up @@ -369,9 +370,6 @@ export default function TimeSliderQuickFilter({
axisColor={!active ? '#888' : '#000'}
// disable user-interaction
disabled={!active}
// for resetting disabled left and arrow buttons when changing brush bounds
setDisableLeftArrow={setDisableLeftArrow}
setDisableRightArrow={setDisableRightArrow}
/>
) : (
<Spinner size={25} />
Expand Down