Use redis to cache results

frontend/src/lib/hooks/usePrevious.js

@@ -0,0 +1,9 @@
+import { useRef, useEffect } from 'react'
+
+export function usePrevious(value) {
+    const ref = useRef()
+    useEffect(() => {
+        ref.current = value
+    })
+    return ref.current
+}

frontend/src/scenes/dashboard/DashboardItem.js

@@ -1,8 +1,9 @@
 import { Link } from 'lib/components/Link'
-import { Dropdown, Menu } from 'antd'
+import { useActions, useValues } from 'kea'
+import { Dropdown, Menu, Tooltip } from 'antd'
 import { combineUrl, router } from 'kea-router'
 import { deleteWithUndo, Loading } from 'lib/utils'
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import { ActionsLineGraph } from 'scenes/trends/ActionsLineGraph'
 import { ActionsTable } from 'scenes/trends/ActionsTable'
 import { ActionsPie } from 'scenes/trends/ActionsPie'
@@ -19,9 +20,14 @@ import {
     BlockOutlined,
     CopyOutlined,
     DeliveredProcedureOutlined,
+    ReloadOutlined,
 } from '@ant-design/icons'
 import { dashboardColorNames, dashboardColors } from 'lib/colors'
 import { useLongPress } from 'lib/hooks/useLongPress'
+import { usePrevious } from 'lib/hooks/usePrevious'
+import moment from 'moment'
+import { trendsLogic } from 'scenes/trends/trendsLogic'
+import { funnelVizLogic } from 'scenes/funnels/funnelVizLogic'
 
 const typeMap = {
     ActionsLineGraph: {
@@ -81,7 +87,9 @@ export function DashboardItem({
     dashboards,
     enableWobblyDragging,
     index,
+    onRefresh,
 }) {
+    const [initialLoaded, setInitialLoaded] = useState(false)
     const className = typeMap[item.type].className
     const Element = typeMap[item.type].element
     const Icon = typeMap[item.type].icon
@@ -97,6 +105,18 @@ export function DashboardItem({
         exclude: 'table, table *',
     })
 
+    const filters = { ...item.filters, from_dashboard: item.id }
+    const logicProps = { dashboardItemId: item.id, filters: filters }
+    const { loadResults } = useActions(className === 'funnel' ? funnelVizLogic(logicProps) : trendsLogic(logicProps))
+    const { resultsLoading } = useValues(className === 'funnel' ? funnelVizLogic(logicProps) : trendsLogic(logicProps))
+    const previousLoading = usePrevious(resultsLoading)
+
+    // if a load is performed and returns that is not the initial load, we refresh dashboard item to update timestamp
+    useEffect(() => {
+        if (previousLoading && !resultsLoading && !initialLoaded) setInitialLoaded(true)
+        else if (previousLoading && !resultsLoading && initialLoaded) onRefresh()
+    }, [resultsLoading])
+
     return (
         <div
             key={item.id}
@@ -122,6 +142,16 @@ export function DashboardItem({
                         </Link>
                     </div>
                     <div className="dashboard-item-settings">
+                        <Tooltip
+                            title={
+                                <i> Refreshed: {item.last_refresh ? moment(item.last_refresh).fromNow() : 'never'}</i>
+                            }
+                        >
+                            <ReloadOutlined
+                                style={{ cursor: 'pointer', marginTop: -3 }}
+                                onClick={() => loadResults(true)}
+                            />
+                        </Tooltip>
                         <Dropdown
                             placement="bottomRight"
                             trigger="click"
@@ -213,7 +243,7 @@ export function DashboardItem({
                         <div className="graph-container">
                             <Element
                                 dashboardItemId={item.id}
-                                filters={item.filters}
+                                filters={filters}
                                 color={color}
                                 theme={color === 'white' ? 'light' : 'dark'}
                             />

frontend/src/scenes/dashboard/DashboardItems.js

@@ -17,6 +17,7 @@ export function DashboardItems({ logic }) {
     const {
         loadDashboardItems,
         renameDashboardItem,
+        refreshDashboardItem,
         updateLayouts,
         updateItemColor,
         duplicateDashboardItem,
@@ -84,6 +85,7 @@ export function DashboardItems({ logic }) {
                         dashboards={dashboards}
                         enableWobblyDragging={draggingEnabled !== 'off' ? noop : enableWobblyDragging}
                         index={index}
+                        onRefresh={() => refreshDashboardItem(item.id)}
                     />
                 </div>
             ))}

frontend/src/scenes/dashboard/dashboardLogic.js

@@ -26,6 +26,7 @@ export const dashboardLogic = kea({
         enableDragging: true,
         enableWobblyDragging: true,
         disableDragging: true,
+        refreshDashboardItem: id => ({ id }),
     }),
 
     loaders: ({ props }) => ({
@@ -332,5 +333,9 @@ export const dashboardLogic = kea({
                 cache.draggingToastId = null
             }
         },
+        refreshDashboardItem: async ({ id }) => {
+            const dashboardItem = await api.get(`api/dashboard_item/${id}`)
+            dashboardsModel.actions.updateDashboardItem(dashboardItem)
+        },
     }),
 })

frontend/src/scenes/funnels/FunnelViz.js

@@ -1,78 +1,81 @@
-import React, { Component } from 'react'
-import api from 'lib/api'
+import React, { useRef, useEffect, useState } from 'react'
 import FunnelGraph from 'funnel-graph-js'
 import { Link } from 'lib/components/Link'
 import { Loading } from 'lib/utils'
 import PropTypes from 'prop-types'
+import { useValues, useActions } from 'kea'
+import { funnelVizLogic } from 'scenes/funnels/funnelVizLogic'
 
-export class FunnelViz extends Component {
-    container = React.createRef()
-    graphContainer = React.createRef()
-    constructor(props) {
-        super(props)
+export function FunnelViz({ funnel: funnelParam, dashboardItemId, filters: filtersParam }) {
+    const container = useRef()
+    const [funnel, setFunnel] = useState(funnelParam)
+    const { results: funnelResult, resultsLoading: funnelLoading } = useValues(
+        funnelVizLogic({ filters: filtersParam, dashboardItemId })
+    )
+    const { loadResults: loadFunnel } = useActions(funnelVizLogic({ filters: filtersParam, dashboardItemId }))
 
-        this.state = {
-            funnel: props.funnel,
-        }
-        this.buildChart = this.buildChart.bind(this)
-        if (!props.funnel) this.fetchFunnel.call(this)
-    }
-    componentDidMount() {
-        if (this.props.funnel) this.buildChart()
-        window.addEventListener('resize', this.buildChart)
-    }
-    componentWillUnmount() {
-        window.removeEventListener('resize', this.buildChart)
-    }
-    fetchFunnel() {
-        api.get('api/funnel/' + this.props.filters.funnel_id).then(funnel => this.setState({ funnel }, this.buildChart))
-    }
-    componentDidUpdate(prevProps) {
-        if (prevProps.funnel !== this.props.funnel && this.state.funnel) {
-            this.setState({ funnel: this.props.funnel }, this.buildChart)
-        }
-    }
-    buildChart() {
-        if (!this.state.funnel || this.state.funnel.steps.length == 0) return
-        if (this.container.current) this.container.current.innerHTML = ''
+    function buildChart() {
+        if (!funnel || funnel.steps.length == 0) return
+        if (container.current) container.current.innerHTML = ''
         let graph = new FunnelGraph({
             container: '.funnel-graph',
             data: {
-                labels: this.state.funnel.steps.map(step => `${step.name} (${step.count})`),
-                values: this.state.funnel.steps.map(step => step.count),
+                labels: funnel.steps.map(step => `${step.name} (${step.count})`),
+                values: funnel.steps.map(step => step.count),
                 colors: ['#66b0ff', 'var(--blue)'],
             },
             displayPercent: true,
         })
         graph.createContainer = () => {}
-        graph.container = this.container.current
+        graph.container = container.current
         graph.graphContainer = document.createElement('div')
         graph.graphContainer.classList.add('svg-funnel-js__container')
         graph.container.appendChild(graph.graphContainer)
 
         graph.draw()
     }
-    render() {
-        let { funnel } = this.state
-        return funnel ? (
-            funnel.steps.length > 0 ? (
-                <div
-                    data-attr="funnel-viz"
-                    ref={this.container}
-                    className="svg-funnel-js"
-                    style={{ height: '100%', width: '100%' }}
-                ></div>
-            ) : (
-                <p style={{ margin: '1rem' }}>
-                    This funnel doesn't have any steps.{' '}
-                    <Link to={'/funnel/' + funnel.id}>Click here to add some steps.</Link>
-                </p>
-            )
+
+    useEffect(() => {
+        if (funnel) buildChart()
+        else loadFunnel()
+
+        window.addEventListener('resize', buildChart)
+        return window.removeEventListener('resize', buildChart)
+    }, [])
+
+    useEffect(() => {
+        buildChart()
+    }, [funnel])
+
+    useEffect(() => {
+        setFunnel(funnelParam)
+    }, [funnelParam])
+
+    useEffect(() => {
+        if (funnelResult) {
+            setFunnel(funnelResult)
+        }
+    }, [funnelResult])
+
+    return funnel && !funnelLoading ? (
+        funnel.steps.length > 0 ? (
+            <div
+                data-attr="funnel-viz"
+                ref={container}
+                className="svg-funnel-js"
+                style={{ height: '100%', width: '100%' }}
+            ></div>
         ) : (
-            <Loading />
+            <p style={{ margin: '1rem' }}>
+                This funnel doesn't have any steps.{' '}
+                <Link to={'/funnel/' + funnel.id}>Click here to add some steps.</Link>
+            </p>
         )
-    }
+    ) : (
+        <Loading />
+    )
 }
+
 FunnelViz.propTypes = {
     funnel: PropTypes.object,
     filters: PropTypes.shape({ funnel_id: PropTypes.number }),

frontend/src/scenes/funnels/funnelLogic.js

@@ -25,8 +25,8 @@ export const funnelLogic = kea({
             },
         ],
         stepsWithCount: {
-            loadStepsWithCount: async (id = props.id) => {
-                return (await api.get('api/funnel/' + id)).steps
+            loadStepsWithCount: async ({ id, refresh }) => {
+                return (await api.get('api/funnel/' + id + (refresh ? '/?refresh=true' : ''))).steps
             },
         },
         people: {
@@ -75,11 +75,11 @@ export const funnelLogic = kea({
             if (update) actions.updateFunnel(values.funnel)
         },
         updateFunnelSuccess: async ({ funnel }) => {
-            actions.loadStepsWithCount(funnel.id)
+            actions.loadStepsWithCount({ id: funnel.id, refresh: true })
             toast('Funnel saved!')
         },
         createFunnelSuccess: ({ funnel }) => {
-            actions.loadStepsWithCount(funnel.id)
+            actions.loadStepsWithCount({ id: funnel.id, refresh: true })
             toast('Funnel saved!')
         },
     }),
@@ -88,13 +88,13 @@ export const funnelLogic = kea({
         createFunnelSuccess: ({ funnel }) => `/funnel/${funnel.id}`,
     }),
 
-    events: ({ actions, key }) => ({
+    events: ({ actions, key, props }) => ({
         afterMount: () => {
             if (key === 'new') {
                 return
             }
             actions.loadFunnel()
-            actions.loadStepsWithCount()
+            actions.loadStepsWithCount({ id: props.id })
         },
     }),
 })

frontend/src/scenes/funnels/funnelVizLogic.js

@@ -0,0 +1,21 @@
+import { kea } from 'kea'
+import api from 'lib/api'
+
+export const funnelVizLogic = kea({
+    key: props => props.dashboardItemId || 'some_funnel',
+    loaders: ({ props }) => ({
+        results: {
+            loadResults: async (refresh = false) => {
+                const { funnel_id, from_dashboard } = props.filters
+                let response = await api.get(
+                    'api/funnel/' +
+                        funnel_id +
+                        '/?' +
+                        (refresh ? 'refresh=true' : '') +
+                        (from_dashboard ? '&from_dashboard=' + from_dashboard : '')
+                )
+                return response
+            },
+        },
+    }),
+})

frontend/src/scenes/trends/ActionsLineGraph.js

@@ -5,15 +5,15 @@ import { useActions, useValues } from 'kea'
 import { trendsLogic } from 'scenes/trends/trendsLogic'
 
 export function ActionsLineGraph({ dashboardItemId = null, color = 'white', filters: filtersParam }) {
-    const { filters, results } = useValues(trendsLogic({ dashboardItemId, filters: filtersParam }))
+    const { filters, results, resultsLoading } = useValues(trendsLogic({ dashboardItemId, filters: filtersParam }))
     const { loadResults, loadPeople } = useActions(trendsLogic({ dashboardItemId, filters: filtersParam }))
 
     const { people_action, people_day, ...otherFilters } = filters
 
     useEffect(() => {
         loadResults()
     }, [toParams(otherFilters)])
-    return results ? (
+    return results && !resultsLoading ? (
         filters.session || results.reduce((total, item) => total + item.count, 0) > 0 ? (
             <LineGraph
                 data-attr="trend-line-graph"

frontend/src/scenes/trends/ActionsPie.js

@@ -1,15 +1,19 @@
 import React, { useEffect, useState } from 'react'
-import api from 'lib/api'
-import { Loading, toParams } from 'lib/utils'
+import { Loading } from 'lib/utils'
 import { LineGraph } from './LineGraph'
 import { getChartColors } from 'lib/colors'
+import { useValues, useActions } from 'kea'
+import { trendsLogic } from 'scenes/trends/trendsLogic'
 
-export function ActionsPie({ filters, color }) {
+export function ActionsPie({ dashboardItemId, filters: filtersParam, color }) {
     const [data, setData] = useState(null)
     const [total, setTotal] = useState(0)
 
-    async function fetchGraph() {
-        const data = await api.get('api/action/trends/?' + toParams(filters))
+    const { filters, results, resultsLoading } = useValues(trendsLogic({ dashboardItemId, filters: filtersParam }))
+    const { loadResults } = useActions(trendsLogic({ dashboardItemId, filters: filtersParam }))
+
+    function updateData() {
+        const data = results
         data.sort((a, b) => b.count - a.count)
 
         const colorList = getChartColors(color)
@@ -30,10 +34,14 @@ export function ActionsPie({ filters, color }) {
     }
 
     useEffect(() => {
-        fetchGraph()
+        loadResults()
     }, [filters, color])
 
-    return data ? (
+    useEffect(() => {
+        updateData()
+    }, [results])
+
+    return data && !resultsLoading ? (
         data[0] && data[0].labels ? (
             <div
                 style={{