Merge branch 'fingerprints-poc' of github.com:metabase/metabase into fingerprints-poc

frontend/src/metabase/reference/databases/FieldSidebar.jsx

@@ -32,9 +32,9 @@ const FieldSidebar =({
                              href={`/reference/databases/${database.id}/tables/${table.id}/fields/${field.id}`} 
                              icon="document" 
                              name="Details" />
-                <SidebarItem key={`/xray/field/${field.id}`} 
-                             href={`/xray/field/${field.id}`} 
-                             icon="document" 
+                <SidebarItem key={`/xray/field/${field.id}/approximate`}
+                             href={`/xray/field/${field.id}/approximate`}
+                             icon="document"
                              name="X-Ray this Field" />
         </ul>
     </div>

frontend/src/metabase/reference/databases/TableSidebar.jsx

@@ -39,9 +39,9 @@ const TableSidebar = ({
                          href={`/reference/databases/${database.id}/tables/${table.id}/questions`} 
                          icon="all" 
                          name="Questions about this table" />
-            <SidebarItem key={`/xray/table/${table.id}`} 
-                         href={`/xray/table/${table.id}`} 
-                         icon="all" 
+            <SidebarItem key={`/xray/table/${table.id}/approximate`}
+                         href={`/xray/table/${table.id}/approximate`}
+                         icon="all"
                          name="X-Ray this table" />
         </ol>
     </div>

frontend/src/metabase/reference/reference.js

@@ -90,10 +90,10 @@ export const fetchFieldFingerPrint = createThunkAction(FETCH_FIELD_FINGERPRINT,
 });
 
 const FETCH_TABLE_FINGERPRINT = 'metabase/reference/FETCH_TABLE_FINGERPRINT';
-export const fetchTableFingerPrint = createThunkAction(FETCH_TABLE_FINGERPRINT, function(tableId) {
+export const fetchTableFingerPrint = createThunkAction(FETCH_TABLE_FINGERPRINT, function(tableId, cost) {
     return async () => {
         try {
-            let fingerprint = await XRayApi.table_fingerprint({ tableId });
+            let fingerprint = await XRayApi.table_fingerprint({ tableId, ...cost.method });
             return fingerprint;
         } catch (error) {
             console.error(error);

frontend/src/metabase/xray/Histogram.jsx

@@ -10,17 +10,7 @@ const Histogram = ({ fingerprint }) =>
                     display: "bar",
                     visualization_settings: {}
                 },
-                data: {
-                    rows: fingerprint.histogram,
-                    cols: [
-                        fingerprint.field,
-                        {
-                            name: "Count",
-                            base_type: "type/Integer"
-                        },
-                    ]
-                }
-
+                data: fingerprint.histogram
             }
         ]}
         showTitle={false}

frontend/src/metabase/xray/components/CostSelect.jsx

+import React from 'react'
+
+import COSTS from 'metabase/xray/costs'
+import Select, { Option } from 'metabase/components/Select'
+
+const CostSelect = ({currentCost, onChange}) =>
+    <Select
+        value={currentCost}
+        onChange={onChange}
+    >
+        { Object.keys(COSTS).map(cost =>
+            <Option value={cost}>
+                {COSTS[cost].display_name}
+            </Option>
+        )}
+    </Select>
+
+export default CostSelect

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

@@ -10,9 +10,8 @@ import { getFieldFingerprint } from 'metabase/reference/selectors'
 
 import LoadingAndErrorWrapper from 'metabase/components/LoadingAndErrorWrapper'
 
-import costs from 'metabase/xray/costs'
-
-import Select, { Option } from 'metabase/components/Select'
+import COSTS from 'metabase/xray/costs'
+import CostSelect from 'metabase/xray/components/CostSelect'
 
 import Histogram from 'metabase/xray/Histogram'
 import SimpleStat from 'metabase/xray/SimpleStat'
@@ -62,7 +61,7 @@ class FieldXRay extends Component {
 
     fetchFieldFingerprint() {
         const { params } = this.props
-        const cost = costs[params.cost]
+        const cost = COSTS[params.cost]
         this.props.fetchFieldFingerPrint(params.fieldId, cost)
 
     }
@@ -95,16 +94,10 @@ class FieldXRay extends Component {
                                        </h1>
                                        <div className="ml-auto">
                                            Fidelity:
-                                           <Select
-                                               value={params.cost}
+                                           <CostSelect
+                                               currentCost={params.cost}
                                                onChange={this.changeCost}
-                                           >
-                                               { Object.keys(costs).map(cost =>
-                                                   <Option value={cost}>
-                                                       {costs[cost].display_name}
-                                                   </Option>
-                                               )}
-                                           </Select>
+                                           />
                                        </div>
                                    </div>
                                     <div className="mt4">

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

@@ -4,7 +4,13 @@ import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import title from 'metabase/hoc/Title'
 
-import { fetchTableFingerPrint } from 'metabase/reference/reference'
+import {
+    fetchTableFingerPrint,
+    changeCost
+} from 'metabase/reference/reference'
+
+import COSTS from 'metabase/xray/costs'
+import CostSelect from 'metabase/xray/components/CostSelect'
 
 import { Link } from 'react-router'
 
@@ -14,7 +20,6 @@ import {
 } from 'metabase/reference/selectors'
 
 import LoadingAndErrorWrapper from 'metabase/components/LoadingAndErrorWrapper'
-import SimpleHistogram from 'metabase/xray/SimpleHistogram'
 
 type Props = {
     constituents: [],
@@ -31,7 +36,8 @@ const mapStateToProps = state => ({
 })
 
 const mapDispatchToProps = {
-    fetchTableFingerPrint
+    fetchTableFingerPrint,
+    changeCost
 }
 
 @connect(mapStateToProps, mapDispatchToProps)
@@ -44,17 +50,42 @@ class TableXRay extends Component {
     }
 
     componentDidMount () {
-        this.props.fetchTableFingerPrint(this.props.params.tableId)
+        this.fetchTableFingerPrint()
+    }
+
+    fetchTableFingerPrint () {
+        const { params } = this.props
+        const cost = COSTS[params.cost]
+        this.props.fetchTableFingerPrint(params.tableId, cost)
     }
 
+    componentDidUpdate (prevProps) {
+        if(prevProps.params.cost !== this.props.params.cost) {
+            this.fetchTableFingerPrint()
+        }
+    }
+
+    changeCost = ({ target }) => {
+        const { params } = this.props
+        // TODO - this feels kinda icky, would be nice to be able to just pass cost
+        console.log(params)
+        this.props.changeCost(`table/${params.tableId}/${target.value}`)
+    }
 
     render () {
-        const { constituents } = this.props
+        const { constituents, params } = this.props
 
         return (
             <div className="wrapper" style={{ marginLeft: '6em', marginRight: '6em'}}>
-                <div className="my4 py4">
+                <div className="my4 flex align-center py4">
                     <h1>Xray</h1>
+                    <div className="ml-auto">
+                        Fidelity:
+                        <CostSelect
+                            currentCost={params.cost}
+                            onChange={this.changeCost}
+                        />
+                    </div>
                 </div>
                     <LoadingAndErrorWrapper loading={!constituents}>
                         { () =>
@@ -64,12 +95,9 @@ class TableXRay extends Component {
                                     return (
                                         <li>
                                             <div className="full">
-                                                <Link to={`xray/field/${c.field.id}`}>
+                                                <Link to={`xray/field/${c.field.id}/approximate`}>
                                                     {c.field.display_name}
                                                 </Link>
-                                                <SimpleHistogram
-                                                    data={c.histogram}
-                                                />
                                             </div>
                                         </li>
                                     )

src/metabase/api/fingerprint.clj

@@ -44,7 +44,7 @@
                                            max_computation_cost)})
        f/prettify))
 
-(api/defendpoint GET "/table/:id"
+(api/defendpoint GET "/table/:id/:max_query_cost/:max_computation_cost"
   "Get fingerprint for a `Tield` with ID."
   [id max_query_cost max_computation_cost]
   {max_query_cost       MaxQueryCost

src/metabase/fingerprinting/fingerprinters.clj

@@ -72,20 +72,20 @@
                         (h/pdf histogram))
          first-key (ffirst rows)]
      {:rows    rows
-      :cols    ["SHARE" "BIN"]
-      :columns [{:basic_type   :type/Float
-                 :name         "SHARE"
-                 :display_name "Share"
-                 :description  "Share of corresponding bin in the overall population."}
-                {:basic_type   (cond
-                                 (number? first-key) :type/Number
-
-                                 (instance? org.joda.time.DateTime first-key)
-                                 :type/DateTime
-
-                                 :else               :type/Text)
-                 :name         "BIN"
-                 :display_name "Bin"}]})))
+      :columns    ["BIN" "SHARE"]
+      :cols [{:base_type   (cond
+                               (number? first-key) :type/Number
+
+                               (instance? org.joda.time.DateTime first-key)
+                               :type/DateTime
+
+                               :else               :type/Text)
+              :name         "BIN"
+              :display_name "Bin"}
+             {:base_type   :type/Float
+              :name         "SHARE"
+              :display_name "Share"
+              :description  "Share of corresponding bin in the overall population."}]})))
 
 (defn field-type
   [field]