Merge pull request #6054 from metabase/xrays-perf-fix

Fix performance problems where xray visualizations were rerendered unnecessarily

frontend/src/metabase/components/LoadingAndErrorWrapper.jsx

@@ -62,11 +62,9 @@ export default class LoadingAndErrorWrapper extends Component {
     }
 
     loadingInterval = () => {
-        this.cycleLoadingMessage()
-    }
-
-    cycleLoadingScenes = () => {
-
+        if (this.props.loading) {
+            this.cycleLoadingMessage()
+        }
     }
 
     getChildren() {

frontend/src/metabase/xray/containers/TableXRay.jsx

@@ -11,7 +11,7 @@ import CostSelect from 'metabase/xray/components/CostSelect'
 import Constituent from 'metabase/xray/components/Constituent'
 
 import {
-    getTableConstituents,
+    getConstituents,
     getFeatures,
     getLoadingStatus,
     getError
@@ -42,7 +42,7 @@ type Props = {
 
 const mapStateToProps = state => ({
     xray: getFeatures(state),
-    constituents: getTableConstituents(state),
+    constituents: getConstituents(state),
     isLoading: getLoadingStatus(state),
     error: getError(state)
 })

frontend/src/metabase/xray/selectors.js

@@ -13,27 +13,11 @@ export const getXray = (state) =>
 export const getFeatures = (state) =>
     state.xray.xray && state.xray.xray.features
 
-/* TODO - these can be collapsed into getConstituents */
-export const getTableConstituents = (state) => {
-    return state.xray.xray && (
-        Object.keys(state.xray.xray.constituents).map(key =>
-            state.xray.xray.constituents[key]
-        )
-    )
-}
-export const getSegmentConstituents = (state) =>
-    state.xray.xray && (
-        Object.keys(state.xray.xray.constituents).map(key =>
-            state.xray.xray.constituents[key]
-        )
-    )
-
-export const getConstituents = (state) =>
-    state.xray.xray && (
-        Object.keys(state.xray.xray.constituents).map(key =>
-            state.xray.xray.constituents[key]
-        )
-    )
+
+export const getConstituents = createSelector(
+    [getXray],
+    (xray) => xray && Object.values(xray.constituents)
+)
 
 export const getComparison = (state) => state.xray.comparison
 
@@ -123,8 +107,6 @@ export const getTableItem = (state, index = 1) => createSelector(
     }
 )(state)
 
-export const getComparisonForField = createSelector
-
 // see if xrays are enabled. unfortunately enabled can equal null so its enabled if its not false
 export const getXrayEnabled = state => {
     const enabled = state.settings.values && state.settings.values['enable_xrays']