Merge pull request #3 from rs21io/SNLBATTERY-19-filtering-logic

Snlbattery 19 filtering logic

client/app/components/QueryBasedParameterInput.jsx

@@ -2,13 +2,15 @@ import { find, isArray, get, first, map, intersection, isEqual, isEmpty } from "
 import React from "react";
 import PropTypes from "prop-types";
 import SelectWithVirtualScroll from "@/components/SelectWithVirtualScroll";
+import { connect } from "react-redux";
 
-export default class QueryBasedParameterInput extends React.Component {
+class QueryBasedParameterInput extends React.Component {
   static propTypes = {
     parameter: PropTypes.any, // eslint-disable-line react/forbid-prop-types
     value: PropTypes.any, // eslint-disable-line react/forbid-prop-types
     mode: PropTypes.oneOf(["default", "multiple"]),
     queryId: PropTypes.number,
+    queryResult: PropTypes.any,
     onSelect: PropTypes.func,
     className: PropTypes.string,
   };
@@ -18,6 +20,7 @@ export default class QueryBasedParameterInput extends React.Component {
     mode: "default",
     parameter: null,
     queryId: null,
+    queryResult: null,
     onSelect: () => {},
     className: "",
   };
@@ -41,6 +44,7 @@ export default class QueryBasedParameterInput extends React.Component {
     }
     if (this.props.value !== prevProps.value) {
       this.setValue(this.props.value);
+      this._loadOptions(this.props.queryId, this.props.queryResult);
     }
   }
 
@@ -59,11 +63,18 @@ export default class QueryBasedParameterInput extends React.Component {
     return value;
   }
 
-  async _loadOptions(queryId) {
-    if (queryId && queryId !== this.state.queryId) {
+  async _loadOptions(queryId, queryResult) {
+    if (queryResult?.length >= 1 && queryId && queryId !== this.state.queryId) {
       this.setState({ loading: true });
-      const options = await this.props.parameter.loadDropdownValues();
 
+      let options = await this.props.parameter.loadDropdownValues();
+        const arr = []
+        queryResult.forEach(obj => {
+          if(!arr.includes( obj[this.props.parameter.title])){
+            arr.push( obj[this.props.parameter.title].toString())
+          }
+        })
+        options = options.filter(option => arr.includes(option.value.toString()))
       // stale queryId check
       if (this.props.queryId === queryId) {
         this.setState({ options, loading: false }, () => {
@@ -77,8 +88,9 @@ export default class QueryBasedParameterInput extends React.Component {
   }
 
   render() {
-    const { className, mode, onSelect, queryId, value, ...otherProps } = this.props;
+    const { className, mode, onSelect, queryId, value, queryResult, ...otherProps } = this.props;
     const { loading, options } = this.state;
+
     return (
       <span>
         <SelectWithVirtualScroll
@@ -98,3 +110,10 @@ export default class QueryBasedParameterInput extends React.Component {
     );
   }
 }
+
+function mapStateToProps(state) {
+  const { QueryData } = state;
+  return { queryResult: QueryData.Data };
+}
+
+export default connect(mapStateToProps)(QueryBasedParameterInput);

client/app/components/visualizations/VisualizationRenderer.jsx

@@ -6,6 +6,8 @@ import useImmutableCallback from "@/lib/hooks/useImmutableCallback";
 import Filters, { FiltersType, filterData } from "@/components/Filters";
 import { VisualizationType } from "@redash/viz/lib";
 import { Renderer } from "@/components/visualizations/visualizationComponents";
+import { getQueryAction, store } from "@/store";
+import { useSelector } from "react-redux";
 
 function combineFilters(localFilters, globalFilters) {
   // tiny optimization - to avoid unnecessary updates
@@ -37,7 +39,11 @@ function areFiltersEqual(a, b) {
 }
 
 export default function VisualizationRenderer(props) {
+  // Using Redux to set data but object is returning as an empty object || undefined
   const data = useQueryResultData(props.queryResult);
+  store.dispatch(getQueryAction(data.rows));
+  const queryData = useSelector(state => state.QueryData.Data);
+
   const [filters, setFilters] = useState(() => combineFilters(data.filters, props.filters)); // lazy initialization
   const filtersRef = useRef();
   filtersRef.current = filters;

client/app/index.js

@@ -1,11 +1,19 @@
 import React from "react";
 import ReactDOM from "react-dom";
+import { Provider } from "react-redux";
 
 import "@/config";
 
 import ApplicationArea from "@/components/ApplicationArea";
 import offlineListener from "@/services/offline-listener";
+import { store } from "./store";
 
-ReactDOM.render(<ApplicationArea />, document.getElementById("application-root"), () => {
-  offlineListener.init();
-});
+ReactDOM.render(
+  <Provider store={store}>
+    <ApplicationArea />
+  </Provider>,
+  document.getElementById("application-root"),
+  () => {
+    offlineListener.init();
+  }
+);

client/app/store.js

@@ -0,0 +1,23 @@
+import { configureStore, createSlice } from "@reduxjs/toolkit";
+
+const queryData = {
+  Data: [],
+};
+
+const querySlice = createSlice({
+  name: "queryData",
+  initialState: queryData,
+  reducers: {
+    getQueryData: (state, { payload }) => {
+      state.Data = payload;
+    },
+  },
+});
+
+const reducer = {
+  QueryData: querySlice.reducer,
+};
+
+export const { getQueryData: getQueryAction } = querySlice.actions;
+
+export const store = configureStore({ reducer });

package.json

@@ -46,6 +46,7 @@
   "dependencies": {
     "@ant-design/icons": "^4.2.1",
     "@redash/viz": "file:viz-lib",
+    "@reduxjs/toolkit": "^1.6.1",
     "ace-builds": "^1.4.12",
     "antd": "^4.4.3",
     "axios": "^0.21.1",
@@ -71,6 +72,7 @@
     "react-ace": "^9.1.1",
     "react-dom": "^16.14.0",
     "react-grid-layout": "^0.18.2",
+    "react-redux": "^7.2.4",
     "react-resizable": "^1.10.1",
     "react-virtualized": "^9.21.2",
     "sql-formatter": "git+https://github.com/getredash/sql-formatter.git",