Skip to content

Commit

Permalink
Create generalized TableLikeComparison, add table-by-table comp
Browse files Browse the repository at this point in the history
  • Loading branch information
attekei committed Oct 17, 2017
1 parent 2dce2aa commit c3bf411
Show file tree
Hide file tree
Showing 7 changed files with 177 additions and 170 deletions.
2 changes: 2 additions & 0 deletions frontend/src/metabase/routes.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,7 @@ import GroupDetailApp from "metabase/admin/people/containers/GroupDetailApp.jsx"

import PublicQuestion from "metabase/public/containers/PublicQuestion.jsx";
import PublicDashboard from "metabase/public/containers/PublicDashboard.jsx";
import TableComparison from "metabase/xray/containers/TableComparison";

const MetabaseIsSetup = UserAuthWrapper({
predicate: authData => !authData.hasSetupToken,
Expand Down Expand Up @@ -259,6 +260,7 @@ export const getRoutes = (store) =>
<Route path="field/:fieldId/:cost" component={FieldXRay} />
<Route path="card/:cardId/:cost" component={CardXRay} />
<Route path="compare/segments/:segmentId1/:segmentId2/:cost" component={SegmentComparison} />
<Route path="compare/tables/:tableId1/:tableId2/:cost" component={TableComparison} />
<Route path="compare/segment/:segmentId/table/:tableId/:cost" component={SegmentTableComparison} />
</Route>

Expand Down
10 changes: 5 additions & 5 deletions frontend/src/metabase/services.js
Original file line number Diff line number Diff line change
Expand Up @@ -162,11 +162,11 @@ export const XRayApi = {
segment_xray: GET("/api/x-ray/segment/:segmentId"),
card_xray: GET("/api/x-ray/card/:cardId"),

field_compare: GET("/api/x-ray/compare/fields/:fieldId1/:fieldId2"),
table_compare: GET("/api/x-ray/compare/tables/:tableId1/:tableId2"),
segment_compare: GET("/api/x-ray/compare/segments/:segmentId1/:segmentId2"),
segment_table_compare: GET("/api/x-ray/compare/segment/:segmentId/table/:tableId"),
card_compare: GET("/api/x-ray/compare/cards/:cardId1/:cardId2")
field_compare: GET("/api/x-ray/compare/fields/:id1/:id2"),
table_compare: GET("/api/x-ray/compare/tables/:id1/:id2"),
segment_compare: GET("/api/x-ray/compare/segments/:id1/:id2"),
segment_table_compare: GET("/api/x-ray/compare/segment/:id1/table/:id2"),
card_compare: GET("/api/x-ray/compare/cards/:id1/:id2")
};

export const PulseApi = {
Expand Down
87 changes: 10 additions & 77 deletions frontend/src/metabase/xray/containers/SegmentComparison.jsx
Original file line number Diff line number Diff line change
@@ -1,96 +1,29 @@
import React, { Component } from 'react'
import { connect } from 'react-redux'
import _ from 'underscore'

import TableLikeComparison from "metabase/xray/containers/TableLikeComparison";
import title from 'metabase/hoc/Title'

import { fetchSegmentComparison, initialize } from 'metabase/xray/xray'
import {
getComparison,
getComparisonFields,
getComparisonContributors,
getModelItem,
getTitle,
getLoadingStatus,
getError
} from 'metabase/xray/selectors'

import LoadingAndErrorWrapper from 'metabase/components/LoadingAndErrorWrapper'
import XRayComparison from 'metabase/xray/components/XRayComparison'
import LoadingAnimation from 'metabase/xray/components/LoadingAnimation'

import { hasComparison, comparisonLoadingMessages } from 'metabase/xray/utils'

const mapStateToProps = (state) => ({
comparison: getComparison(state),
fields: getComparisonFields(state),
contributors: getComparisonContributors(state),
itemA: getModelItem(state, 0),
itemB: getModelItem(state, 1),
isLoading: getLoadingStatus(state),
error: getError(state)
})
import { fetchSegmentComparison } from 'metabase/xray/xray'
import { getTitle } from 'metabase/xray/selectors'

const mapDispatchToProps = {
initialize,
fetchSegmentComparison
}

@connect(mapStateToProps, mapDispatchToProps)
@connect(null, mapDispatchToProps)
@title(props => getTitle(props))
class SegmentComparison extends Component {

componentWillMount () {
const { cost, segmentId1, segmentId2 } = this.props.params
this.props.initialize()
this.props.fetchSegmentComparison(segmentId1, segmentId2, cost)
}

componentWillUnmount() {
// HACK Atte Keinänen 9/20/17: We need this for now because the structure of `state.xray.xray` isn't same
// for all xray types and if switching to different kind of xray (= rendering different React container)
// without resetting the state fails because `state.xray.xray` subproperty lookups fail
this.props.initialize();
}

render () {
const {
comparison,
contributors,
error,
fields,
isLoading,
itemA,
itemB,
params,
} = this.props
const { cost, segmentId1, segmentId2 } = this.props.params

return (
<LoadingAndErrorWrapper
loading={isLoading || !hasComparison(comparison)}
error={error}
noBackground
loadingMessages={comparisonLoadingMessages}
loadingScenes={[<LoadingAnimation />]}
>
{ () =>

<XRayComparison
cost={params.cost}
fields={_.sortBy(fields, 'distance').reverse()}
comparisonFields={[
'Difference',
'Entropy',
'Histogram',
'Nil%',
]}
contributors={contributors}
comparison={comparison.comparison}
itemA={itemA}
itemB={itemB}
/>
<TableLikeComparison
cost={cost}
fetchTableLikeComparison={
() => this.props.fetchSegmentComparison(segmentId1, segmentId2, cost)
}
</LoadingAndErrorWrapper>
/>
)
}
}
Expand Down
77 changes: 10 additions & 67 deletions frontend/src/metabase/xray/containers/SegmentTableComparison.jsx
Original file line number Diff line number Diff line change
@@ -1,86 +1,29 @@
import React, { Component } from 'react'
import { connect } from 'react-redux'
import _ from 'underscore'

import TableLikeComparison from "metabase/xray/containers/TableLikeComparison";
import title from 'metabase/hoc/Title'

import { fetchSegmentTableComparison, initialize } from 'metabase/xray/xray'
import {
getComparison,
getComparisonFields,
getError,
getModelItem,
getTitle,
getLoadingStatus, getComparisonContributors
} from 'metabase/xray/selectors'

import LoadingAndErrorWrapper from 'metabase/components/LoadingAndErrorWrapper'
import XRayComparison from 'metabase/xray/components/XRayComparison'
import { hasComparison, comparisonLoadingMessages } from 'metabase/xray/utils'
import LoadingAnimation from 'metabase/xray/components/LoadingAnimation'

const mapStateToProps = state => ({
comparison: getComparison(state),
fields: getComparisonFields(state),
contributors: getComparisonContributors(state),
itemA: getModelItem(state, 0),
itemB: getModelItem(state, 1),
isLoading: getLoadingStatus(state),
error: getError(state)
})
import { fetchSegmentTableComparison } from 'metabase/xray/xray'
import { getTitle } from 'metabase/xray/selectors'

const mapDispatchToProps = {
initialize,
fetchSegmentTableComparison
}

@connect(mapStateToProps, mapDispatchToProps)
@connect(null, mapDispatchToProps)
@title(props => getTitle(props))
class SegmentTableComparison extends Component {

state = {
error: null
}

componentWillMount () {
render () {
const { cost, segmentId, tableId } = this.props.params
this.props.initialize()
this.props.fetchSegmentTableComparison(segmentId, tableId, cost)
}

componentWillUnmount() {
// HACK Atte Keinänen 9/20/17: We need this for now because the structure of `state.xray.xray` isn't same
// for all xray types and if switching to different kind of xray (= rendering different React container)
// without resetting the state fails because `state.xray.xray` subproperty lookups fail
this.props.initialize();
}

render () {
const { params, fields, comparison, itemA, itemB, isLoading, error } = this.props
return (
<LoadingAndErrorWrapper
loading={isLoading || !hasComparison(comparison)}
error={error}
noBackground
loadingMessages={comparisonLoadingMessages}
loadingScenes={[<LoadingAnimation />]}
>
{ () =>
<XRayComparison
cost={params.cost}
fields={_.sortBy(fields, 'distance').reverse()}
comparisonFields={[
'Difference',
'Entropy',
'Histogram',
'Nil%',
]}
comparison={comparison.comparison}
itemA={itemA}
itemB={itemB}
/>
<TableLikeComparison
cost={cost}
fetchTableLikeComparison={
() => this.props.fetchSegmentTableComparison(segmentId, tableId, cost)
}
</LoadingAndErrorWrapper>
/>
)
}
}
Expand Down
32 changes: 32 additions & 0 deletions frontend/src/metabase/xray/containers/TableComparison.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import React, { Component } from 'react'
import { connect } from 'react-redux'

import TableLikeComparison from "metabase/xray/containers/TableLikeComparison";
import title from 'metabase/hoc/Title'

import { fetchTableComparison } from 'metabase/xray/xray'
import { getTitle } from 'metabase/xray/selectors'

const mapDispatchToProps = {
fetchTableComparison
}

@connect(null, mapDispatchToProps)
@title(props => getTitle(props))
class TableComparison extends Component {
render () {
const { cost, tableId1, tableId2 } = this.props.params

return (
<TableLikeComparison
cost={cost}
fetchTableLikeComparison={
() => this.props.fetchTableComparison(tableId1, tableId2, cost)
}
/>
)
}
}

export default TableComparison

92 changes: 92 additions & 0 deletions frontend/src/metabase/xray/containers/TableLikeComparison.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
import React, { Component } from 'react'
import { connect } from 'react-redux'
import _ from 'underscore'

import { initialize } from 'metabase/xray/xray'
import {
getComparison,
getComparisonFields,
getComparisonContributors,
getModelItem,
getLoadingStatus,
getError
} from 'metabase/xray/selectors'

import LoadingAndErrorWrapper from 'metabase/components/LoadingAndErrorWrapper'
import XRayComparison from 'metabase/xray/components/XRayComparison'
import LoadingAnimation from 'metabase/xray/components/LoadingAnimation'

import { hasComparison, comparisonLoadingMessages } from 'metabase/xray/utils'

const mapStateToProps = (state) => ({
comparison: getComparison(state),
fields: getComparisonFields(state),
contributors: getComparisonContributors(state),
itemA: getModelItem(state, 0),
itemB: getModelItem(state, 1),
isLoading: getLoadingStatus(state),
error: getError(state)
})

const mapDispatchToProps = {
initialize
}

@connect(mapStateToProps, mapDispatchToProps)
class TableLikeComparison extends Component {

componentWillMount () {
this.props.initialize()
this.props.fetchTableLikeComparison()
}

componentWillUnmount() {
// HACK Atte Keinänen 9/20/17: We need this for now because the structure of `state.xray.xray` isn't same
// for all xray types and if switching to different kind of xray (= rendering different React container)
// without resetting the state fails because `state.xray.xray` subproperty lookups fail
this.props.initialize();
}

render () {
const {
comparison,
contributors,
error,
fields,
isLoading,
itemA,
itemB,
cost
} = this.props

return (
<LoadingAndErrorWrapper
loading={isLoading || !hasComparison(comparison)}
error={error}
noBackground
loadingMessages={comparisonLoadingMessages}
loadingScenes={[<LoadingAnimation />]}
>
{ () =>

<XRayComparison
cost={cost}
fields={_.sortBy(fields, 'distance').reverse()}
comparisonFields={[
'Difference',
'Entropy',
'Histogram',
'Nil%',
]}
contributors={contributors}
comparison={comparison.comparison}
itemA={itemA}
itemB={itemB}
/>
}
</LoadingAndErrorWrapper>
)
}
}

export default TableLikeComparison
Loading

0 comments on commit c3bf411

Please sign in to comment.