From 5dccb89847d145863750f70cf2d5060924c3af78 Mon Sep 17 00:00:00 2001
From: Kyle Doherty <kyle.l.doherty@gmail.com>
Date: Fri, 15 Sep 2017 14:50:41 -0700
Subject: [PATCH] determine loading
---
.../src/metabase/xray/containers/CardXRay.jsx | 4 +++-
.../metabase/xray/containers/FieldXray.jsx | 7 +++++-
.../xray/containers/SegmentComparison.jsx | 22 +++++++++++--------
.../containers/SegmentTableComparison.jsx | 11 ++++++----
.../metabase/xray/containers/SegmentXRay.jsx | 15 ++++++++-----
.../metabase/xray/containers/TableXRay.jsx | 4 +++-
frontend/src/metabase/xray/utils.js | 9 ++++++++
7 files changed, 51 insertions(+), 21 deletions(-)
diff --git a/frontend/src/metabase/xray/containers/CardXRay.jsx b/frontend/src/metabase/xray/containers/CardXRay.jsx
index b03b51909a3..632cac93070 100644
--- a/frontend/src/metabase/xray/containers/CardXRay.jsx
+++ b/frontend/src/metabase/xray/containers/CardXRay.jsx
@@ -14,6 +14,8 @@ import Visualization from 'metabase/visualizations/components/Visualization'
import { XRayPageWrapper, Heading } from 'metabase/xray/components/XRayLayout'
import Periodicity from 'metabase/xray/components/Periodicity'
+import { hasXray } from 'metabase/xray/utils'
+
type Props = {
fetchCardXray: () => void,
isLoading: boolean,
@@ -62,7 +64,7 @@ class CardXRay extends Component {
const { xray, isLoading } = this.props
const { error } = this.state
return (
- <LoadingAndErrorWrapper loading={isLoading} error={error}>
+ <LoadingAndErrorWrapper loading={isLoading || !hasXray(xray)} error={error}>
{ () =>
<XRayPageWrapper>
<div className="mt4 mb2">
diff --git a/frontend/src/metabase/xray/containers/FieldXray.jsx b/frontend/src/metabase/xray/containers/FieldXray.jsx
index 612af2bd036..f805152afc0 100644
--- a/frontend/src/metabase/xray/containers/FieldXray.jsx
+++ b/frontend/src/metabase/xray/containers/FieldXray.jsx
@@ -24,6 +24,8 @@ import StatGroup from 'metabase/xray/components/StatGroup'
import Histogram from 'metabase/xray/Histogram'
import { Heading, XRayPageWrapper } from 'metabase/xray/components/XRayLayout'
+import { hasXray } from 'metabase/xray/utils'
+
import Periodicity from 'metabase/xray/components/Periodicity'
import type { Field } from 'metabase/meta/types/Field'
@@ -87,9 +89,12 @@ class FieldXRay extends Component {
render () {
const { xray, params, isLoading } = this.props
const { error } = this.state
+
+ console.log(hasXray(xray))
+
return (
<LoadingAndErrorWrapper
- loading={isLoading}
+ loading={isLoading || !hasXray(xray)}
error={error}
noBackground
>
diff --git a/frontend/src/metabase/xray/containers/SegmentComparison.jsx b/frontend/src/metabase/xray/containers/SegmentComparison.jsx
index c5c67a95d14..6cdbd87d75f 100644
--- a/frontend/src/metabase/xray/containers/SegmentComparison.jsx
+++ b/frontend/src/metabase/xray/containers/SegmentComparison.jsx
@@ -10,19 +10,22 @@ import {
getComparisonFields,
getComparisonContributors,
getSegmentItem,
- getTitle
+ getTitle,
+ getLoadingStatus
} from 'metabase/xray/selectors'
-
import LoadingAndErrorWrapper from 'metabase/components/LoadingAndErrorWrapper'
import XRayComparison from 'metabase/xray/components/XRayComparison'
+import { hasComparison } from 'metabase/xray/utils'
+
const mapStateToProps = (state) => ({
- comparison: getComparison(state),
- fields: getComparisonFields(state),
- contributors: getComparisonContributors(state),
- itemA: getSegmentItem(state, 0),
- itemB: getSegmentItem(state, 1)
+ comparison: getComparison(state),
+ fields: getComparisonFields(state),
+ contributors: getComparisonContributors(state),
+ itemA: getSegmentItem(state, 0),
+ itemB: getSegmentItem(state, 1),
+ isLoading: getLoadingStatus(state)
})
const mapDispatchToProps = {
@@ -53,14 +56,15 @@ class SegmentComparison extends Component {
comparison,
fields,
itemA,
- itemB
+ itemB,
+ isLoading
} = this.props
const { error } = this.state
return (
<LoadingAndErrorWrapper
- loading={!comparison}
+ loading={isLoading || !hasComparison(comparison)}
error={error}
noBackground
>
diff --git a/frontend/src/metabase/xray/containers/SegmentTableComparison.jsx b/frontend/src/metabase/xray/containers/SegmentTableComparison.jsx
index 4a63733f0d5..a29058cb045 100644
--- a/frontend/src/metabase/xray/containers/SegmentTableComparison.jsx
+++ b/frontend/src/metabase/xray/containers/SegmentTableComparison.jsx
@@ -10,17 +10,20 @@ import {
getComparisonFields,
getSegmentItem,
getTableItem,
- getTitle
+ getTitle,
+ getLoadingStatus
} from 'metabase/xray/selectors'
import LoadingAndErrorWrapper from 'metabase/components/LoadingAndErrorWrapper'
import XRayComparison from 'metabase/xray/components/XRayComparison'
+import { hasComparison } from 'metabase/xray/utils'
const mapStateToProps = state => ({
comparison: getComparison(state),
fields: getComparisonFields(state),
itemA: getSegmentItem(state),
- itemB: getTableItem(state)
+ itemB: getTableItem(state),
+ isLoading: getLoadingStatus(state)
})
const mapDispatchToProps = {
@@ -45,11 +48,11 @@ class SegmentTableComparison extends Component {
}
render () {
- const { params, fields, comparison, itemA, itemB } = this.props
+ const { params, fields, comparison, itemA, itemB, isLoading } = this.props
const { error } = this.state
return (
<LoadingAndErrorWrapper
- loading={!comparison}
+ loading={isLoading || !hasComparison(comparison)}
error={error}
noBackground
>
diff --git a/frontend/src/metabase/xray/containers/SegmentXRay.jsx b/frontend/src/metabase/xray/containers/SegmentXRay.jsx
index 52e7050dfea..4077b9a1636 100644
--- a/frontend/src/metabase/xray/containers/SegmentXRay.jsx
+++ b/frontend/src/metabase/xray/containers/SegmentXRay.jsx
@@ -15,7 +15,8 @@ import CostSelect from 'metabase/xray/components/CostSelect'
import {
getSegmentConstituents,
- getSegmentXray
+ getSegmentXray,
+ getLoadingStatus
} from 'metabase/xray/selectors'
import Constituent from 'metabase/xray/components/Constituent'
@@ -23,6 +24,8 @@ import Constituent from 'metabase/xray/components/Constituent'
import type { Table } from 'metabase/meta/types/Table'
import type { Segment } from 'metabase/meta/types/Segment'
+import { hasXray } from 'metabase/xray/utils'
+
type Props = {
fetchSegmentXray: () => void,
constituents: [],
@@ -33,12 +36,14 @@ type Props = {
params: {
segmentId: number,
cost: string,
- }
+ },
+ isLoading: boolean
}
const mapStateToProps = state => ({
xray: getSegmentXray(state),
- constituents: getSegmentConstituents(state)
+ constituents: getSegmentConstituents(state),
+ isLoading: getLoadingStatus(state)
})
const mapDispatchToProps = {
@@ -76,12 +81,12 @@ class SegmentXRay extends Component {
}
render () {
- const { constituents, xray, params } = this.props
+ const { constituents, xray, params, isLoading } = this.props
const { error } = this.state
return (
<XRayPageWrapper>
<LoadingAndErrorWrapper
- loading={!constituents}
+ loading={isLoading || !hasXray(xray)}
error={error}
noBackground
>
diff --git a/frontend/src/metabase/xray/containers/TableXRay.jsx b/frontend/src/metabase/xray/containers/TableXRay.jsx
index 6ed883d1416..90f722fd034 100644
--- a/frontend/src/metabase/xray/containers/TableXRay.jsx
+++ b/frontend/src/metabase/xray/containers/TableXRay.jsx
@@ -23,6 +23,8 @@ import LoadingAndErrorWrapper from 'metabase/components/LoadingAndErrorWrapper'
import type { Table } from 'metabase/meta/types/Table'
+import { hasXray } from 'metabase/xray/utils'
+
type Props = {
constituents: [],
fetchTableXray: () => void,
@@ -83,7 +85,7 @@ class TableXRay extends Component {
return (
<XRayPageWrapper>
<LoadingAndErrorWrapper
- loading={isLoading}
+ loading={isLoading || !hasXray(xray)}
error={error}
noBackground
>
diff --git a/frontend/src/metabase/xray/utils.js b/frontend/src/metabase/xray/utils.js
index 7350f823e16..74d8b386490 100644
--- a/frontend/src/metabase/xray/utils.js
+++ b/frontend/src/metabase/xray/utils.js
@@ -12,3 +12,12 @@ export const distanceToPhrase = (distance) => {
return 'Very similar'
}
}
+
+// Small utilities to determine whether we have an entity yet or not,
+// used for loading status
+function has (entity) {
+ return typeof entity !== 'undefined' ? true : false
+}
+
+export const hasXray = has
+export const hasComparison = has
--
GitLab