Repository: lens Updated Branches: refs/heads/master b438aa2f2 -> d1a463552
LENS-1322 : Display join chain details as a tooltip on dim attributes using that join chain Project: http://git-wip-us.apache.org/repos/asf/lens/repo Commit: http://git-wip-us.apache.org/repos/asf/lens/commit/d1a46355 Tree: http://git-wip-us.apache.org/repos/asf/lens/tree/d1a46355 Diff: http://git-wip-us.apache.org/repos/asf/lens/diff/d1a46355 Branch: refs/heads/master Commit: d1a4635526f770287099c60ddc1e9665644b9cc9 Parents: b438aa2 Author: Rajat Khandelwal <pro...@apache.org> Authored: Sat Sep 17 11:21:34 2016 +0530 Committer: Amareshwari Sriramadasu <amareshw...@apache.org> Committed: Sat Sep 17 11:21:34 2016 +0530 ---------------------------------------------------------------------- lens-ui/app/components/CubeSchemaComponent.js | 44 ++++++++++++++++------ lens-ui/app/stores/CubeStore.js | 5 +++ lens-ui/app/styles/css/global.css | 4 ++ lens-ui/app/styles/css/query-component.css | 2 +- lens-ui/package.json | 2 +- 5 files changed, 43 insertions(+), 14 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/lens/blob/d1a46355/lens-ui/app/components/CubeSchemaComponent.js ---------------------------------------------------------------------- diff --git a/lens-ui/app/components/CubeSchemaComponent.js b/lens-ui/app/components/CubeSchemaComponent.js index 6a2b7af..27adfac 100644 --- a/lens-ui/app/components/CubeSchemaComponent.js +++ b/lens-ui/app/components/CubeSchemaComponent.js @@ -23,6 +23,7 @@ import CubeStore from '../stores/CubeStore'; import UserStore from '../stores/UserStore'; import AdhocQueryActions from '../actions/AdhocQueryActions'; import Loader from '../components/LoaderComponent'; +import {Tooltip, OverlayTrigger} from 'react-bootstrap' function getCubes(database) { return CubeStore.getCubes(database); @@ -73,23 +74,41 @@ function constructMeasureTable(cubeName, measures) { ); } -function constructDimensionTable(cubeName, dimensions) { +function constructDimensionTable(cubeName, dimensions, join_chains_by_name) { let table = dimensions.map((dimension) => { if (typeof(dimension) == "string") { return ( <tr key={cubeName + '|' + dimension}> - <td>{ dimension}</td> </tr> ); } else { + let join_chain_column; + if (dimension.chain_ref_column) { + let inner = dimension.chain_ref_column.map((ref) => { + let join_chain = join_chains_by_name[ref.chain_name]; + let tooltip = <Tooltip id={dimension.name + "|" + ref.chain_name + "|tooltip"}><div> { + join_chain.paths.path.map((path) => { + let paths = path.edges.edge.map((edge) => { + return edge.from.table + "." + edge.from.column + "=" + edge.to.table + "." + edge.to.column + }).join("->") + return (<span>{paths}<br/></span>) + }) + } + </div></Tooltip>; + return (<div> + <OverlayTrigger placement="top" overlay={tooltip}> + <strong>{ref.chain_name}</strong> + </OverlayTrigger>{"."+ref.ref_col} + </div>); + }); + join_chain_column = (<div>{inner}</div>); + } return ( <tr key={cubeName + '|' + dimension.name}> <td>{ dimension.name }</td> <td>{ dimension.display_string }</td> <td>{ dimension.description }</td> - <td>{ dimension.chain_ref_column ? dimension.chain_ref_column.map((ref) => { - return ref.chain_name + "." + ref.ref_col - }).join(" ") : ""}</td> + <td>{join_chain_column}</td> </tr> ); } @@ -194,11 +213,11 @@ function constructExpressionTable(cubeName, expressions) { class CubeSchema extends React.Component { constructor(props) { super(props); - this.state = {cube: {}, database: props.params.databaseName}; + this.state = {cube: {}, database: UserStore.currentDatabase()}; this._onChange = this._onChange.bind(this); AdhocQueryActions - .getCubeDetails(UserStore.getUserDetails().secretToken, props.params.databaseName, props.params.cubeName); + .getCubeDetails(UserStore.getUserDetails().secretToken, UserStore.currentDatabase(), props.params.cubeName); } componentDidMount() { @@ -212,7 +231,7 @@ class CubeSchema extends React.Component { componentWillReceiveProps(props) { // TODO are props updated automatically, unlike state? let cubeName = props.params.cubeName; - let cube = getCubes(props.params.databaseName)[cubeName]; + let cube = getCubes(UserStore.currentDatabase())[cubeName]; if (cube.isLoaded) { this.setState({cube: cube, database: props.params.database}); @@ -220,10 +239,10 @@ class CubeSchema extends React.Component { } AdhocQueryActions - .getCubeDetails(UserStore.getUserDetails().secretToken, props.params.databaseName, cubeName); + .getCubeDetails(UserStore.getUserDetails().secretToken, UserStore.currentDatabase(), cubeName); // empty the previous state - this.setState({cube: {}, database: props.params.databaseName}); + this.setState({cube: {}, database: UserStore.currentDatabase()}); } render() { @@ -246,7 +265,7 @@ class CubeSchema extends React.Component { schemaSection = ( <div> { constructMeasureTable(cube.name, cube.measures) } - { constructDimensionTable(cube.name, cube.dimensions) } + { constructDimensionTable(cube.name, cube.dimensions, cube.join_chains_by_name) } { cube.join_chains && constructJoinChainTable(cube.name, cube.join_chains) } { cube.expressions && constructExpressionTable(cube.name, cube.expressions) } </div> @@ -277,7 +296,8 @@ class CubeSchema extends React.Component { } _onChange() { - this.setState({cube: getCubes(this.props.params.databaseName)[this.props.params.cubeName]}); + let cube = getCubes(UserStore.currentDatabase())[this.props.params.cubeName]; + this.setState({cube: cube}); } } http://git-wip-us.apache.org/repos/asf/lens/blob/d1a46355/lens-ui/app/stores/CubeStore.js ---------------------------------------------------------------------- diff --git a/lens-ui/app/stores/CubeStore.js b/lens-ui/app/stores/CubeStore.js index 2648311..fb31d3c 100644 --- a/lens-ui/app/stores/CubeStore.js +++ b/lens-ui/app/stores/CubeStore.js @@ -55,6 +55,11 @@ function receiveCubeDetails (payload) { if (cubeDetails.type == 'x_base_cube') { cubes[payload.database][cubeDetails.name].join_chains = cubeDetails.join_chains.join_chain; cubes[payload.database][cubeDetails.name].expressions = cubeDetails.expressions.expression; + let join_chains_by_name = {}; + cubes[payload.database][cubeDetails.name].join_chains.map((join_chain)=>{ + join_chains_by_name[join_chain.name] = join_chain + }); + cubes[payload.database][cubeDetails.name].join_chains_by_name = join_chains_by_name; } cubes[payload.database][cubeDetails.name].isLoaded = true; } http://git-wip-us.apache.org/repos/asf/lens/blob/d1a46355/lens-ui/app/styles/css/global.css ---------------------------------------------------------------------- diff --git a/lens-ui/app/styles/css/global.css b/lens-ui/app/styles/css/global.css index 7670703..09e1afa 100644 --- a/lens-ui/app/styles/css/global.css +++ b/lens-ui/app/styles/css/global.css @@ -38,3 +38,7 @@ /*background: rgba(51, 122, 183, 1);*/ transform: scale(1.018); } +div.tooltip-inner{ + max-width:none; + width:auto; +} \ No newline at end of file http://git-wip-us.apache.org/repos/asf/lens/blob/d1a46355/lens-ui/app/styles/css/query-component.css ---------------------------------------------------------------------- diff --git a/lens-ui/app/styles/css/query-component.css b/lens-ui/app/styles/css/query-component.css index e29758e..0380ae0 100644 --- a/lens-ui/app/styles/css/query-component.css +++ b/lens-ui/app/styles/css/query-component.css @@ -30,4 +30,4 @@ div.CodeMirror { li.CodeMirror-hint { max-width: 100%; -} +} \ No newline at end of file http://git-wip-us.apache.org/repos/asf/lens/blob/d1a46355/lens-ui/package.json ---------------------------------------------------------------------- diff --git a/lens-ui/package.json b/lens-ui/package.json index 2cdf1df..b35d300 100644 --- a/lens-ui/package.json +++ b/lens-ui/package.json @@ -29,7 +29,7 @@ "q": "^1.4.1", "qwest": "^2.0.7", "react": "^0.13.3", - "react-bootstrap": "0.25.1", + "react-bootstrap": "0.26.4", "react-router": "^0.13.3", "react-sidebar": "~1.1.0", "react-treeview": "^0.3.12",
