Show the events time range in the sidebar (#21293)

frontend/src/metabase/query_builder/components/view/View.jsx

@@ -6,6 +6,7 @@ import _ from "underscore";
 import ExplicitSize from "metabase/components/ExplicitSize";
 import Popover from "metabase/components/Popover";
 import QueryValidationError from "metabase/query_builder/components/QueryValidationError";
+import { SIDEBAR_SIZES } from "metabase/query_builder/constants";
 import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper";
 
 import NativeQuery from "metabase-lib/lib/queries/NativeQuery";
@@ -166,6 +167,7 @@ export default class View extends React.Component {
       runQuestionQuery,
       visibleTimelineIds,
       selectedTimelineEventIds,
+      xDomain,
       showTimelines,
       hideTimelines,
       selectTimelineEvents,
@@ -198,6 +200,7 @@ export default class View extends React.Component {
           timelines={timelines}
           visibleTimelineIds={visibleTimelineIds}
           selectedTimelineEventIds={selectedTimelineEventIds}
+          xDomain={xDomain}
           onShowTimelines={showTimelines}
           onHideTimelines={hideTimelines}
           onSelectTimelineEvents={selectTimelineEvents}
@@ -404,6 +407,7 @@ export default class View extends React.Component {
       card,
       databases,
       isShowingNewbModal,
+      isShowingTimelineSidebar,
       queryBuilderMode,
       fitClassNames,
       closeQbNewbModal,
@@ -432,6 +436,9 @@ export default class View extends React.Component {
 
     const leftSidebar = this.getLeftSidebar();
     const rightSidebar = this.getRightSidebar();
+    const rightSidebarWidth = isShowingTimelineSidebar
+      ? SIDEBAR_SIZES.TIMELINE
+      : SIDEBAR_SIZES.NORMAL;
 
     return (
       <div className={fitClassNames}>
@@ -448,7 +455,11 @@ export default class View extends React.Component {
               {leftSidebar}
             </ViewSidebar>
             {this.renderMain({ leftSidebar, rightSidebar })}
-            <ViewSidebar side="right" isOpen={!!rightSidebar}>
+            <ViewSidebar
+              side="right"
+              isOpen={!!rightSidebar}
+              width={rightSidebarWidth}
+            >
               {rightSidebar}
             </ViewSidebar>
           </QueryBuilderContentContainer>

frontend/src/metabase/query_builder/components/view/sidebars/TimelineSidebar/TimelineSidebar.tsx

 import React, { useCallback } from "react";
 import { t } from "ttag";
+import { Moment } from "moment";
 import Question from "metabase-lib/lib/Question";
 import { MODAL_TYPES } from "metabase/query_builder/constants";
 import SidebarContent from "metabase/query_builder/components/SidebarContent";
@@ -11,6 +12,7 @@ export interface TimelineSidebarProps {
   timelines: Timeline[];
   visibleTimelineIds: number[];
   selectedTimelineEventIds: number[];
+  xDomain?: [Moment, Moment];
   onShowTimelines?: (timelines: Timeline[]) => void;
   onHideTimelines?: (timelines: Timeline[]) => void;
   onSelectTimelineEvents?: (timelineEvents: TimelineEvent[]) => void;
@@ -24,6 +26,7 @@ const TimelineSidebar = ({
   timelines,
   visibleTimelineIds,
   selectedTimelineEventIds,
+  xDomain,
   onOpenModal,
   onShowTimelines,
   onHideTimelines,
@@ -65,7 +68,7 @@ const TimelineSidebar = ({
   );
 
   return (
-    <SidebarContent title={t`Events`} onClose={onClose}>
+    <SidebarContent title={formatTitle(xDomain)} onClose={onClose}>
       <TimelinePanel
         timelines={timelines}
         collectionId={question.collectionId()}
@@ -80,4 +83,14 @@ const TimelineSidebar = ({
   );
 };
 
+const formatTitle = (xDomain?: [Moment, Moment]) => {
+  return xDomain
+    ? t`Events between ${formatDate(xDomain[0])} and ${formatDate(xDomain[1])}`
+    : t`Events`;
+};
+
+const formatDate = (date: Moment) => {
+  return date.format("ll");
+};
+
 export default TimelineSidebar;

frontend/src/metabase/query_builder/constants.js

@@ -17,3 +17,8 @@ export const MODAL_TYPES = {
   NEW_EVENT: "new-event",
   EDIT_EVENT: "edit-event",
 };
+
+export const SIDEBAR_SIZES = {
+  NORMAL: 355,
+  TIMELINE: 300,
+};

frontend/src/metabase/query_builder/containers/QueryBuilder.jsx

@@ -68,6 +68,7 @@ import {
   getVisibleTimelineEvents,
   getSelectedTimelineEventIds,
   getFilteredTimelines,
+  getTimeseriesXDomain,
 } from "../selectors";
 import * as actions from "../actions";
 
@@ -120,6 +121,7 @@ const mapStateToProps = (state, props) => {
     timelineEvents: getVisibleTimelineEvents(state),
     visibleTimelineIds: getVisibleTimelineIds(state),
     selectedTimelineEventIds: getSelectedTimelineEventIds(state),
+    xDomain: getTimeseriesXDomain(state),
 
     result: getFirstQueryResult(state),
     results: getQueryResults(state),

frontend/src/metabase/query_builder/selectors.js

@@ -603,13 +603,13 @@ const getIsTimeseries = createSelector(
   settings => settings && isTimeseries(settings),
 );
 
-const getTimeseriesXValues = createSelector(
+export const getTimeseriesXValues = createSelector(
   [getIsTimeseries, getTransformedSeries, getVisualizationSettings],
   (isTimeseries, series, settings) =>
     isTimeseries && series && settings && getXValues({ series, settings }),
 );
 
-const getTimeseriesXDomain = createSelector(
+export const getTimeseriesXDomain = createSelector(
   [getIsTimeseries, getTimeseriesXValues],
   (isTimeseries, xValues) => xValues && isTimeseries && d3.extent(xValues),
 );

frontend/src/metabase/timelines/questions/components/TimelinePanel/TimelinePanel.styled.tsx

 import styled from "@emotion/styled";
+import { color } from "metabase/lib/colors";
 
 export const PanelRoot = styled.div`
   margin: 0 1.5rem;