Merge pull request #1414 from metabase/show_fk_path

Show the field used as the FK connection when needed

frontend/src/lib/schema_metadata.js

@@ -418,3 +418,21 @@ export function hasLatitudeAndLongitudeColumns(columnDefs) {
     }
     return hasLatitude && hasLongitude;
 }
+
+export function foreignKeyCountsByOriginTable(fks) {
+    if (fks === null || !Array.isArray(fks)) {
+        return null;
+    }
+
+    return fks.map(function(fk) {
+        return ('origin' in fk) ? fk.origin.table.id : null;
+    }).reduce(function(prev, curr, idx, array) {
+        if (curr in prev) {
+            prev[curr]++;
+        } else {
+            prev[curr] = 1;
+        }
+
+        return prev;
+    }, {});
+}

frontend/src/query_builder/DataReferenceTable.jsx

 import React, { Component, PropTypes } from "react";
 
 import DataReferenceQueryButton from './DataReferenceQueryButton.jsx';
-
+import { foreignKeyCountsByOriginTable } from 'metabase/lib/schema_metadata';
 import inflection from 'inflection';
 import cx from "classnames";
 
@@ -90,10 +90,16 @@ export default class DataReferenceTable extends Component {
                 });
                 pane = <ul>{fields}</ul>;
             } else if (this.state.pane === "connections") {
-                var connections = this.state.tableForeignKeys.map((fk, index) => {
+                const fkCountsByTable = foreignKeyCountsByOriginTable(this.state.tableForeignKeys);
+
+                var connections = this.state.tableForeignKeys.sort(function(a, b) {
+                    return a.origin.table.display_name.localeCompare(b.origin.table.display_name);
+                }).map((fk, index) => {
+                    const via = (fkCountsByTable[fk.origin.table.id] > 1) ? (<span className="text-grey-3 text-light h5"> via {fk.origin.display_name}</span>) : null;
+
                     return (
                         <li key={fk.id} className="p1 border-row-divider">
-                            <a className="text-brand text-brand-darken-hover no-decoration" href="#" onClick={this.props.showField.bind(null, fk.origin)}>{fk.origin.table.display_name}</a>
+                            <a className="text-brand text-brand-darken-hover no-decoration" href="#" onClick={this.props.showField.bind(null, fk.origin)}>{fk.origin.table.display_name}{via}</a>
                         </li>
                     );
                 });

frontend/src/query_builder/QueryVisualizationObjectDetailTable.jsx

@@ -4,6 +4,7 @@ import ExpandableString from './ExpandableString.jsx';
 import Icon from 'metabase/components/Icon.jsx';
 import IconBorder from 'metabase/components/IconBorder.jsx';
 import LoadingSpinner from 'metabase/components/LoadingSpinner.jsx';
+import { foreignKeyCountsByOriginTable } from 'metabase/lib/schema_metadata';
 import { singularize, inflect } from 'inflection';
 
 import cx from "classnames";
@@ -102,8 +103,12 @@ export default class QueryVisualizationObjectDetailTable extends Component {
             return (<p className="my4 text-centered">No relationships found.</p>);
         }
 
+        const fkCountsByTable = foreignKeyCountsByOriginTable(this.props.tableForeignKeys);
+
         var component = this;
-        var relationships = this.props.tableForeignKeys.map(function(fk) {
+        var relationships = this.props.tableForeignKeys.sort(function(a, b) {
+            return a.origin.table.display_name.localeCompare(b.origin.table.display_name);
+        }).map(function(fk) {
 
             var fkCount = (
                 <LoadingSpinner width="25px" height="25px" />
@@ -128,11 +133,12 @@ export default class QueryVisualizationObjectDetailTable extends Component {
             );
 
             var relationName = inflect(fk.origin.table.display_name, fkCountValue);
+            const via = (fkCountsByTable[fk.origin.table.id] > 1) ? (<span className="text-grey-3 text-normal"> via {fk.origin.display_name}</span>) : null;
 
             var info = (
                 <div>
                     <h2>{fkCount}</h2>
-                    <h5 className="block">{relationName}</h5>
+                    <h5 className="block">{relationName}{via}</h5>
                  </div>
             );
             var fkReference;

frontend/test/unit/lib/schema_metadata.spec.js

@@ -7,7 +7,8 @@ import {
     NUMBER,
     BOOLEAN,
     LOCATION,
-    COORDINATE
+    COORDINATE,
+    foreignKeyCountsByOriginTable
 } from 'metabase/lib/schema_metadata';
 
 describe('schema_metadata', () => {
@@ -44,4 +45,16 @@ describe('schema_metadata', () => {
             expect(getFieldType({ base_type: 'DERP DERP DERP' })).toEqual(undefined)
         });
     });
+
+    describe('foreignKeyCountsByOriginTable', () => {
+        it('should work with null input', () => {
+            expect(foreignKeyCountsByOriginTable(null)).toEqual(null)
+        });
+        it('should require an array as input', () => {
+            expect(foreignKeyCountsByOriginTable({})).toEqual(null)
+        });
+        it('should count occurrences by origin.table.id', () => {
+            expect(foreignKeyCountsByOriginTable([{ origin: {table: {id: 123}} }, { origin: {table: {id: 123}} }, { origin: {table: {id: 123}} }, { origin: {table: {id: 456}} }])).toEqual({123: 3, 456: 1})
+        });
+    });
 });