Fix visualizations with filters not showing selected values (#4854)

client/app/components/visualizations/VisualizationRenderer.jsx

@@ -2,7 +2,6 @@ import { map, find } from "lodash";
 import React, { useState, useMemo, useEffect, useRef } from "react";
 import PropTypes from "prop-types";
 import getQueryResultData from "@/lib/getQueryResultData";
-import { getColumnCleanName } from "@/services/query-result";
 import Filters, { FiltersType, filterData } from "@/components/Filters";
 import { VisualizationType } from "@/visualizations/prop-types";
 import { Renderer } from "@/components/visualizations/visualizationComponents";
@@ -43,17 +42,12 @@ export default function VisualizationRenderer(props) {
     setFilters(combineFilters(filtersRef.current, props.filters));
   }, [props.filters]);
 
-  const cleanColumnNames = useMemo(
-    () => map(data.columns, col => ({ ...col, name: getColumnCleanName(col.friendly_name) })),
-    [data.columns]
-  );
-
   const filteredData = useMemo(
     () => ({
-      columns: cleanColumnNames,
+      columns: data.columns,
       rows: filterData(data.rows, filters),
     }),
-    [cleanColumnNames, data.rows, filters]
+    [data, filters]
   );
 
   const { showFilters, visualization } = props;

client/app/services/query-result.js

@@ -39,10 +39,6 @@ function getColumnNameWithoutType(column) {
   return parts[0];
 }
 
-export function getColumnCleanName(column) {
-  return getColumnNameWithoutType(column);
-}
-
 function getColumnFriendlyName(column) {
   return getColumnNameWithoutType(column).replace(/(?:^|\s)\S/g, a => a.toUpperCase());
 }
@@ -254,10 +250,6 @@ class QueryResult {
     return this.columnNames;
   }
 
-  getColumnCleanNames() {
-    return this.getColumnNames().map(col => getColumnCleanName(col));
-  }
-
   getColumnFriendlyNames() {
     return this.getColumnNames().map(col => getColumnFriendlyName(col));
   }

client/app/visualizations/table/getOptions.js

@@ -6,6 +6,30 @@ const DEFAULT_OPTIONS = {
   paginationSize: "default", // not editable through Editor
 };
 
+const filterTypes = ["filter", "multi-filter", "multiFilter"];
+
+function getColumnNameWithoutType(column) {
+  let typeSplit;
+  if (column.indexOf("::") !== -1) {
+    typeSplit = "::";
+  } else if (column.indexOf("__") !== -1) {
+    typeSplit = "__";
+  } else {
+    return column;
+  }
+
+  const parts = column.split(typeSplit);
+  if (parts[0] === "" && parts.length === 2) {
+    return parts[1];
+  }
+
+  if (!_.includes(filterTypes, parts[1])) {
+    return column;
+  }
+
+  return parts[0];
+}
+
 function getColumnContentAlignment(type) {
   return ["integer", "float", "boolean", "date", "datetime"].indexOf(type) >= 0 ? "right" : "left";
 }
@@ -25,7 +49,7 @@ function getDefaultColumnsOptions(columns) {
     displayAs: displayAs[col.type] || "string",
     visible: true,
     order: 100000 + index,
-    title: col.name,
+    title: getColumnNameWithoutType(col.name),
     allowSearch: false,
     alignContent: getColumnContentAlignment(col.type),
     // `string` cell options