feat: use DurationLiteral or DateTimeLiteral depending on the type of timeRange (#5463)

Author: TCL735

src/variables/selectors/index.tsx

@@ -140,13 +140,14 @@ export const getAllVariables = (
 export const getAllVariablesForZoomRequery = (
   state: AppState,
   domain: number[],
+  timeRangeType: string,
   contextID?: string
 ): Variable[] => {
   const vars = getUserVariableNames(state, contextID || currentContext(state))
     .concat([TIME_RANGE_START, TIME_RANGE_STOP])
     .map(variableID => {
       if (domain?.length) {
-        return getVariableForZoomRequery(variableID, domain)
+        return getVariableForZoomRequery(variableID, domain, timeRangeType)
       }
       return getVariable(state, variableID)
     })

src/variables/utils/getWindowVars.ts

@@ -20,7 +20,7 @@ import {
 
 // Types
 import {VariableAssignment, Package} from 'src/types/ast'
-import {RemoteDataState, TimeRange, Variable} from 'src/types'
+import {DurationLiteral, RemoteDataState, TimeRange, Variable} from 'src/types'
 import {SELECTABLE_TIME_RANGES} from 'src/shared/constants/timeRanges'
 
 const DESIRED_POINTS_PER_GRAPH = 360
@@ -202,7 +202,8 @@ export const getWindowPeriodVariableFromVariables = (
 
 export const getVariableForZoomRequery = (
   variableID: string,
-  domain: number[]
+  domain: number[],
+  timeRangeType: string
 ): Variable => {
   const variable: Variable = {
     orgID: '',
@@ -220,7 +221,18 @@ export const getVariableForZoomRequery = (
   const stopTime = new Date(domain?.[1] ?? '')
   switch (variableID) {
     case TIME_RANGE_START:
-      variable.arguments.values = [startTime.toISOString()]
+      if (timeRangeType === 'custom') {
+        variable.arguments.values = [startTime.toISOString()]
+      } else {
+        variable.arguments.values = [
+          [
+            {
+              magnitude: Date.now() - startTime.getTime(),
+              unit: 'ms',
+            },
+          ],
+        ]
+      }
       return variable
 
     case TIME_RANGE_STOP:
@@ -245,7 +257,11 @@ export const normalizeWindowPeriodForZoomRequery = (
   domain: Array<number>,
   column: NumericColumnData | string[]
 ): number => {
-  if (windowPeriod || !timeRange || !column) {
+  if (
+    !timeRange ||
+    !column ||
+    (windowPeriod && Math.abs(windowPeriod) !== Infinity)
+  ) {
     if (windowPeriod < 0) {
       return FALLBACK_WINDOW_PERIOD
     }
@@ -304,15 +320,23 @@ export const normalizeWindowPeriodVariableForZoomRequery = (
   variableAssignment: VariableAssignment[],
   windowPeriod: number
 ): VariableAssignment[] => {
-  if (Array.isArray(variableAssignment) && variableAssignment.length) {
-    return variableAssignment
-  }
-
   const assignedWindowPeriod = Math.max(
     Math.min(Math.round(windowPeriod), FALLBACK_WINDOW_PERIOD),
     MINIMUM_WINDOW_PERIOD
   )
 
+  const init = (variableAssignment?.[0]?.init
+    ? variableAssignment?.[0]?.init
+    : {
+        values: [{magnitude: assignedWindowPeriod, unit: 'ms'}],
+        type: 'DurationLiteral',
+      }) as DurationLiteral
+
+  const magnitude = init?.values?.[0]?.magnitude
+  if (magnitude && Math.abs(magnitude) !== Infinity) {
+    return variableAssignment
+  }
+
   return [
     {
       type: 'VariableAssignment',

src/visualization/utils/useVisDomainSettings.ts

@@ -7,15 +7,16 @@ import {isEqual} from 'lodash'
 // API
 import {runQuery, RunQueryResult} from 'src/shared/apis/query'
 
+// Selectors
+import {getOrg} from 'src/organizations/selectors'
+import {getStartTime, getEndTime} from 'src/timeMachine/selectors/index'
+import {getAllVariablesForZoomRequery} from 'src/variables/selectors'
+
 // Utils
 import {useOneWayState} from 'src/shared/utils/useOneWayState'
 import {extent} from 'src/shared/utils/vis'
-import {getStartTime, getEndTime} from 'src/timeMachine/selectors/index'
-import {getOrg} from 'src/organizations/selectors'
-import {getAllVariablesForZoomRequery} from 'src/variables/selectors'
 import {buildUsedVarsOption} from 'src/variables/utils/buildVarsOption'
 import {event} from 'src/cloud/utils/reporting'
-
 import {
   getWindowPeriodFromVariables,
   getWindowVarsFromVariables,
@@ -26,6 +27,7 @@ import {
 // Types
 import {AppState, InternalFromFluxResult, TimeRange} from 'src/types'
 import {RemoteDataState} from '@influxdata/clockface'
+
 /*
   This hook helps map the domain setting stored for line graph to the
   appropriate settings on a @influxdata/giraffe `Config` object.
@@ -167,6 +169,7 @@ export const useZoomRequeryXDomainSettings = (args: ZoomRequeryArgs) => {
     timeRange = null,
   } = args
 
+  const {type: timeRangeType} = timeRange ? timeRange : {type: 'duration'}
   const [selectedTimeRange, setSelectedTimeRange] = useState(timeRange)
   const initialDomain = useMemo(() => {
     if (storedDomain) {
@@ -197,7 +200,7 @@ export const useZoomRequeryXDomainSettings = (args: ZoomRequeryArgs) => {
   const [domain, setDomain] = useState(initialDomain)
 
   const getAllVariablesWithTimeDomain = (state: AppState) =>
-    getAllVariablesForZoomRequery(state, timeRange ? domain : [])
+    getAllVariablesForZoomRequery(state, timeRange ? domain : [], timeRangeType)
   const orgId = useSelector(getOrg)?.id
   const variables = useSelector(getAllVariablesWithTimeDomain)
 
@@ -297,6 +300,7 @@ export const useZoomRequeryYDomainSettings = (args: ZoomRequeryArgs) => {
     timeRange = null,
   } = args
 
+  const {type: timeRangeType} = timeRange ? timeRange : {type: 'duration'}
   const [selectedTimeRange, setSelectedTimeRange] = useState(timeRange)
   const initialDomain = useMemo(() => {
     if (
@@ -332,7 +336,7 @@ export const useZoomRequeryYDomainSettings = (args: ZoomRequeryArgs) => {
   const [domain, setDomain] = useState(initialDomain)
 
   const getAllVariablesWithTimeDomain = (state: AppState) =>
-    getAllVariablesForZoomRequery(state, timeRange ? domain : [])
+    getAllVariablesForZoomRequery(state, timeRange ? domain : [], timeRangeType)
   const orgId = useSelector(getOrg)?.id
   const variables = useSelector(getAllVariablesWithTimeDomain)