valitydev/redash
14
0
Fork 0
mirror of https://github.com/valitydev/redash.git synced 2024-11-06 17:15:17 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Use memoized query result data (#4920)

Browse Source
This commit is contained in:
Gabriel Dutra 2020-05-26 11:30:31 -03:00 committed by GitHub
parent 38dd3ff248
commit 46e18b0c6f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 19 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/app/components/visualizations/EditVisualizationDialog.jsx
View File

@ -9,7 +9,7 @@ import Filters, { filterData } from "@/components/Filters";
import notification from "@/services/notification";
import Visualization from "@/services/visualization";
import recordEvent from "@/services/recordEvent";
import getQueryResultData from "@/lib/getQueryResultData";
import useQueryResultData from "@/lib/useQueryResultData";
import {
registeredVisualizations,
getDefaultVisualization,
@ -71,7 +71,7 @@ function EditVisualizationDialog({ dialog, visualization, query, queryResult })
const isNew = !visualization;
const data = getQueryResultData(queryResult);
const data = useQueryResultData(queryResult);
const [filters, setFilters] = useState(data.filters);
const filteredData = useMemo(

4
client/app/components/visualizations/VisualizationRenderer.jsx
View File

@ -1,7 +1,7 @@
import { map, find } from "lodash";
import React, { useState, useMemo, useEffect, useRef } from "react";
import PropTypes from "prop-types";
import getQueryResultData from "@/lib/getQueryResultData";
import useQueryResultData from "@/lib/useQueryResultData";
import Filters, { FiltersType, filterData } from "@/components/Filters";
import { VisualizationType } from "@redash/viz/lib";
import { Renderer } from "@/components/visualizations/visualizationComponents";
@ -25,7 +25,7 @@ function combineFilters(localFilters, globalFilters) {
}
export default function VisualizationRenderer(props) {
const data = useMemo(() => getQueryResultData(props.queryResult), [props.queryResult]);
const data = useQueryResultData(props.queryResult);
const [filters, setFilters] = useState(data.filters);
const filtersRef = useRef();
filtersRef.current = filters;

11
client/app/lib/getQueryResultData.js → client/app/lib/useQueryResultData.js
View File

@ -1,8 +1,9 @@
import { useMemo } from "react";
import { get, invoke } from "lodash";
export default function getQueryResultData(queryResult) {
function getQueryResultData(queryResult, queryResultStatus = null) {
return {
status: invoke(queryResult, "getStatus") || null,
status: queryResultStatus || invoke(queryResult, "getStatus") || null,
columns: invoke(queryResult, "getColumns") || [],
rows: invoke(queryResult, "getData") || [],
filters: invoke(queryResult, "getFilters") || [],
@ -14,3 +15,9 @@ export default function getQueryResultData(queryResult) {
metadata: get(queryResult, "query_result.data.metadata", {}),
};
}
export default function useQueryResultData(queryResult) {
// make sure it re-executes when queryResult status changes
const queryResultStatus = invoke(queryResult, "getStatus");
return useMemo(() => getQueryResultData(queryResult, queryResultStatus), [queryResult, queryResultStatus]);
}

4
client/app/pages/queries/QuerySource.jsx
View File

@ -27,7 +27,7 @@ import useQuery from "./hooks/useQuery";
import useVisualizationTabHandler from "./hooks/useVisualizationTabHandler";
import useAutocompleteFlags from "./hooks/useAutocompleteFlags";
import useQueryExecute from "./hooks/useQueryExecute";
import getQueryResultData from "@/lib/getQueryResultData";
import useQueryResultData from "@/lib/useQueryResultData";
import useQueryDataSources from "./hooks/useQueryDataSources";
import useDataSourceSchema from "./hooks/useDataSourceSchema";
import useQueryFlags from "./hooks/useQueryFlags";
@ -73,7 +73,7 @@ function QuerySource(props) {
loadedInitialResults,
} = useQueryExecute(query);
const queryResultData = getQueryResultData(queryResult);
const queryResultData = useQueryResultData(queryResult);
const editorRef = useRef(null);
const [autocompleteAvailable, autocompleteEnabled, toggleAutocomplete] = useAutocompleteFlags(schema);

4
client/app/pages/queries/QueryView.jsx
View File

@ -11,7 +11,7 @@ import Parameters from "@/components/Parameters";
import DataSource from "@/services/data-source";
import { ExecutionStatus } from "@/services/query-result";
import getQueryResultData from "@/lib/getQueryResultData";
import useQueryResultData from "@/lib/useQueryResultData";
import QueryPageHeader from "./components/QueryPageHeader";
import QueryVisualizationTabs from "./components/QueryVisualizationTabs";
@ -56,7 +56,7 @@ function QueryView(props) {
updatedAt,
} = useQueryExecute(query);
const queryResultData = getQueryResultData(queryResult);
const queryResultData = useQueryResultData(queryResult);
const updateQueryDescription = useUpdateQueryDescription(query, setQuery);
const editSchedule = useEditScheduleDialog(query, setQuery);

4
client/app/pages/queries/components/QueryExecutionMetadata.jsx
View File

@ -5,7 +5,7 @@ import useAddToDashboardDialog from "../hooks/useAddToDashboardDialog";
import useEmbedDialog from "../hooks/useEmbedDialog";
import QueryControlDropdown from "@/components/EditVisualizationButton/QueryControlDropdown";
import EditVisualizationButton from "@/components/EditVisualizationButton";
import getQueryResultData from "@/lib/getQueryResultData";
import useQueryResultData from "@/lib/useQueryResultData";
import { durationHumanize, pluralize, prettySize } from "@/lib/utils";
import "./QueryExecutionMetadata.less";
@ -19,7 +19,7 @@ export default function QueryExecutionMetadata({
onEditVisualization,
extraActions,
}) {
const queryResultData = getQueryResultData(queryResult);
const queryResultData = useQueryResultData(queryResult);
const openAddToDashboardDialog = useAddToDashboardDialog(query);
const openEmbedDialog = useEmbedDialog(query);
return (