{t('Create a new chart')}
-
+
-
-
-
+
-
); } diff --git a/superset-frontend/src/components/DynamicPlugins/index.tsx b/superset-frontend/src/components/DynamicPlugins/index.tsx index 90f4ba7fb5..b11798fbd8 100644 --- a/superset-frontend/src/components/DynamicPlugins/index.tsx +++ b/superset-frontend/src/components/DynamicPlugins/index.tsx @@ -17,30 +17,45 @@ * under the License. */ import React, { useContext, useEffect, useReducer } from 'react'; -import { defineSharedModules, logging, makeApi } from '@superset-ui/core'; +import { + ChartMetadata, + defineSharedModules, + getChartMetadataRegistry, + logging, + makeApi, +} from '@superset-ui/core'; import { FeatureFlag, isFeatureEnabled } from 'src/featureFlags'; +import { omitBy } from 'lodash'; + +const metadataRegistry = getChartMetadataRegistry(); export type PluginContextType = { loading: boolean; - plugins: { + /** These are actually only the dynamic plugins */ + dynamicPlugins: { [key: string]: { key: string; - loading: boolean; + mounting: boolean; error: null | Error; }; }; + keys: string[]; + /** Mounted means the plugin's js bundle has been imported */ + mountedPluginMetadata: Record;
fetchAll: () => void;
};
const dummyPluginContext: PluginContextType = {
loading: true,
- plugins: {},
+ dynamicPlugins: {},
+ keys: [],
+ mountedPluginMetadata: {},
fetchAll: () => {},
};
/**
- * It is highly recommended to use the useDynamicPluginContext hook instead.
- * @see useDynamicPluginContext
+ * It is highly recommended to use the usePluginContext hook instead.
+ * @see usePluginContext
*/
export const PluginContext = React.createContext(dummyPluginContext);
@@ -52,7 +67,7 @@ export const PluginContext = React.createContext(dummyPluginContext);
* Those are compiled into the Superset bundle at build time.
* Dynamic plugins are added by the end user and can be any webhosted javascript.
*/
-export const useDynamicPluginContext = () => useContext(PluginContext);
+export const usePluginContext = () => useContext(PluginContext);
// the plugin returned from the API
type Plugin = {
@@ -75,38 +90,60 @@ type BeginAction = {
keys: string[];
};
+type ChangedKeysAction = {
+ type: 'changed keys';
+};
+
+type PluginAction = BeginAction | CompleteAction | ChangedKeysAction;
+
+function getRegistryData() {
+ return {
+ keys: metadataRegistry.keys(),
+ mountedPluginMetadata: omitBy(
+ metadataRegistry.getMap(),
+ value => value === undefined,
+ ) as Record, // cast required to get rid of undefined values
+ };
+}
+
function pluginContextReducer(
state: PluginContextType,
- action: BeginAction | CompleteAction,
+ action: PluginAction,
): PluginContextType {
switch (action.type) {
case 'begin': {
- const plugins = { ...state.plugins };
+ const plugins = { ...state.dynamicPlugins };
action.keys.forEach(key => {
- plugins[key] = { key, error: null, loading: true };
+ plugins[key] = { key, error: null, mounting: true };
});
return {
...state,
loading: action.keys.length > 0,
- plugins,
+ dynamicPlugins: plugins,
};
}
case 'complete': {
return {
...state,
- loading: Object.values(state.plugins).some(
- plugin => plugin.loading && plugin.key !== action.key,
+ loading: Object.values(state.dynamicPlugins).some(
+ plugin => plugin.mounting && plugin.key !== action.key,
),
- plugins: {
- ...state.plugins,
+ dynamicPlugins: {
+ ...state.dynamicPlugins,
[action.key]: {
key: action.key,
- loading: false,
+ mounting: false,
error: action.error,
},
},
};
}
+ case 'changed keys': {
+ return {
+ ...state,
+ ...getRegistryData(),
+ };
+ }
default:
return state;
}
@@ -126,14 +163,18 @@ const sharedModules = {
};
export const DynamicPluginProvider: React.FC = ({ children }) => {
- const [pluginState, dispatch] = useReducer(pluginContextReducer, {
- // use the dummy plugin context, and override the methods
- ...dummyPluginContext,
- // eslint-disable-next-line @typescript-eslint/no-use-before-define
- fetchAll,
- loading: isFeatureEnabled(FeatureFlag.DYNAMIC_PLUGINS),
- // TODO: Write fetchByKeys
- });
+ const [pluginState, dispatch] = useReducer(
+ pluginContextReducer,
+ dummyPluginContext,
+ state => ({
+ ...state,
+ ...getRegistryData(),
+ // eslint-disable-next-line @typescript-eslint/no-use-before-define
+ fetchAll,
+ loading: isFeatureEnabled(FeatureFlag.DYNAMIC_PLUGINS),
+ // TODO: Write fetchByKeys
+ }),
+ );
// For now, we fetch all the plugins at the same time.
// In the future it would be nice to fetch on an as-needed basis.
@@ -171,6 +212,13 @@ export const DynamicPluginProvider: React.FC = ({ children }) => {
if (isFeatureEnabled(FeatureFlag.DYNAMIC_PLUGINS)) {
fetchAll();
}
+ const registryListener = () => {
+ dispatch({ type: 'changed keys' });
+ };
+ metadataRegistry.addListener(registryListener);
+ return () => {
+ metadataRegistry.removeListener(registryListener);
+ };
}, []);
return (
diff --git a/superset-frontend/src/explore/components/ExploreViewContainer.jsx b/superset-frontend/src/explore/components/ExploreViewContainer.jsx
index 63efc2b189..fa920b18be 100644
--- a/superset-frontend/src/explore/components/ExploreViewContainer.jsx
+++ b/superset-frontend/src/explore/components/ExploreViewContainer.jsx
@@ -25,7 +25,7 @@ import { styled, t, css, useTheme } from '@superset-ui/core';
import { debounce } from 'lodash';
import { Resizable } from 're-resizable';
-import { useDynamicPluginContext } from 'src/components/DynamicPlugins';
+import { usePluginContext } from 'src/components/DynamicPlugins';
import { Global } from '@emotion/react';
import { Tooltip } from 'src/components/Tooltip';
import { usePrevious } from 'src/common/hooks/usePrevious';
@@ -159,9 +159,9 @@ function useWindowSize({ delayMs = 250 } = {}) {
}
function ExploreViewContainer(props) {
- const dynamicPluginContext = useDynamicPluginContext();
- const dynamicPlugin = dynamicPluginContext.plugins[props.vizType];
- const isDynamicPluginLoading = dynamicPlugin && dynamicPlugin.loading;
+ const dynamicPluginContext = usePluginContext();
+ const dynamicPlugin = dynamicPluginContext.dynamicPlugins[props.vizType];
+ const isDynamicPluginLoading = dynamicPlugin && dynamicPlugin.mounting;
const wasDynamicPluginLoading = usePrevious(isDynamicPluginLoading);
const previousControls = usePrevious(props.controls);
diff --git a/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeControl.less b/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeControl.less
deleted file mode 100644
index e9faf8bcd3..0000000000
--- a/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeControl.less
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements. See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership. The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-@import '../../../../../stylesheets/less/variables.less';
-
-.viztype-label {
- margin-top: 10px;
- text-align: center;
- font-size: @font-size-m;
-}
-
-.viztype-selector-container {
- cursor: pointer;
- margin-top: 10px;
- margin-bottom: 10px;
-
- &:hover img {
- border: 1px solid @gray-heading;
- }
-
- &.selected {
- cursor: not-allowed;
- opacity: 1;
-
- img {
- border: 1px solid @almost-black;
- }
- }
-
- img {
- border: 1px solid @gray-light;
- border-radius: @border-radius-large;
- transition: border-color @timing-normal;
- }
-}
-
-.viztype-control-search-box {
- margin-bottom: 10px;
-}
diff --git a/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeControl.test.tsx b/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeControl.test.tsx
index 35dd245bb6..a8534ccb49 100644
--- a/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeControl.test.tsx
+++ b/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeControl.test.tsx
@@ -17,7 +17,7 @@
* under the License.
*/
import { Preset } from '@superset-ui/core';
-import { render, cleanup, screen } from 'spec/helpers/testing-library';
+import { render, cleanup, screen, act } from 'spec/helpers/testing-library';
import { Provider } from 'react-redux';
import {
getMockStore,
@@ -26,6 +26,7 @@ import {
} from 'spec/fixtures/mockStore';
import React from 'react';
import userEvent from '@testing-library/user-event';
+import { DynamicPluginProvider } from 'src/components/DynamicPlugins';
import { testWithId } from 'src/utils/testUtils';
import {
EchartsMixedTimeseriesChartPlugin,
@@ -57,6 +58,15 @@ class MainPreset extends Preset {
const getTestId = testWithId(VIZ_TYPE_CONTROL_TEST_ID, true);
+/**
+ * AntD and/or the Icon component seems to be doing some kind of async changes,
+ * so even though the test passes, there is a warning an update to Icon was not
+ * wrapped in act(). This sufficiently act-ifies whatever side effects are going
+ * on and prevents those warnings.
+ */
+const waitForEffects = () =>
+ act(() => new Promise(resolve => setTimeout(resolve, 0)));
+
describe('VizTypeControl', () => {
new MainPreset().register();
const newVizTypeControlProps = {
@@ -64,21 +74,26 @@ describe('VizTypeControl', () => {
label: '',
name: '',
value: '',
- labelType: '',
+ labelType: 'primary',
onChange: jest.fn(),
- };
+ isModalOpenInit: true,
+ } as const;
- const renderWrapper = (
+ const renderWrapper = async (
props = newVizTypeControlProps,
state: object = stateWithoutNativeFilters,
- ) =>
+ ) => {
render(
-
+
,
);
+ await waitForEffects();
+ };
afterEach(() => {
cleanup();
@@ -86,14 +101,13 @@ describe('VizTypeControl', () => {
});
it('Search visualization type', async () => {
- renderWrapper();
+ await renderWrapper();
const visualizations = screen.getByTestId(getTestId('viz-row'));
+ userEvent.click(screen.getByRole('button', { name: 'Table' }));
+
expect(visualizations).toHaveTextContent(/Time-series Table/);
- expect(visualizations).toHaveTextContent(/Time-series Chart/);
- expect(visualizations).toHaveTextContent(/Mixed timeseries chart/);
- expect(visualizations).toHaveTextContent(/Line Chart/);
const searchInputText = 'time series';
@@ -102,6 +116,7 @@ describe('VizTypeControl', () => {
screen.getByTestId(getTestId('search-input')),
searchInputText,
);
+ await waitForEffects();
expect(visualizations).toHaveTextContent(/Time-series Table/);
expect(visualizations).toHaveTextContent(/Time-series Chart/);
diff --git a/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx b/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx
new file mode 100644
index 0000000000..67c2079488
--- /dev/null
+++ b/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx
@@ -0,0 +1,562 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React, {
+ ChangeEventHandler,
+ useCallback,
+ useMemo,
+ useRef,
+ useState,
+} from 'react';
+import Fuse from 'fuse.js';
+import {
+ t,
+ styled,
+ css,
+ ChartMetadata,
+ SupersetTheme,
+ useTheme,
+} from '@superset-ui/core';
+import { Input } from 'src/common/components';
+import { usePluginContext } from 'src/components/DynamicPlugins';
+import Icons from 'src/components/Icons';
+import { nativeFilterGate } from 'src/dashboard/components/nativeFilters/utils';
+
+interface VizTypeGalleryProps {
+ onChange: (vizType: string | null) => void;
+ selectedViz: string | null;
+ className?: string;
+}
+
+type VizEntry = {
+ key: string;
+ value: ChartMetadata;
+};
+
+const DEFAULT_ORDER = [
+ 'line',
+ 'big_number',
+ 'table',
+ 'filter_box',
+ 'dist_bar',
+ 'area',
+ 'bar',
+ 'deck_polygon',
+ 'pie',
+ 'time_table',
+ 'pivot_table_v2',
+ 'histogram',
+ 'big_number_total',
+ 'deck_scatter',
+ 'deck_hex',
+ 'time_pivot',
+ 'deck_arc',
+ 'heatmap',
+ 'deck_grid',
+ 'dual_line',
+ 'deck_screengrid',
+ 'line_multi',
+ 'treemap',
+ 'box_plot',
+ 'sunburst',
+ 'sankey',
+ 'word_cloud',
+ 'mapbox',
+ 'kepler',
+ 'cal_heatmap',
+ 'rose',
+ 'bubble',
+ 'deck_geojson',
+ 'horizon',
+ 'deck_multi',
+ 'compare',
+ 'partition',
+ 'event_flow',
+ 'deck_path',
+ 'graph_chart',
+ 'world_map',
+ 'paired_ttest',
+ 'para',
+ 'country_map',
+];
+
+const typesWithDefaultOrder = new Set(DEFAULT_ORDER);
+
+const THUMBNAIL_GRID_UNITS = 24;
+
+export const MAX_ADVISABLE_VIZ_GALLERY_WIDTH = 1090;
+
+const OTHER_CATEGORY = t('Other');
+
+export const VIZ_TYPE_CONTROL_TEST_ID = 'viz-type-control';
+
+const VizPickerLayout = styled.div`
+ display: grid;
+ grid-template-rows: minmax(100px, 1fr) minmax(200px, 35%);
+ grid-template-columns: 1fr 5fr;
+ grid-template-areas:
+ 'sidebar main'
+ 'details details';
+ height: 70vh;
+ overflow: auto;
+`;
+
+const SectionTitle = styled.h3`
+ margin-top: 0;
+ margin-bottom: ${({ theme }) => theme.gridUnit * 2}px;
+ font-size: ${({ theme }) => theme.typography.sizes.l}px;
+ font-weight: ${({ theme }) => theme.typography.weights.bold};
+ line-height: ${({ theme }) => theme.gridUnit * 6}px;
+`;
+
+const LeftPane = styled.div`
+ grid-area: sidebar;
+ display: flex;
+ flex-direction: column;
+ border-right: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
+ padding: ${({ theme }) => theme.gridUnit * 2}px;
+ overflow: hidden;
+`;
+
+const CategoriesWrapper = styled.div`
+ display: flex;
+ flex-direction: column;
+ overflow: auto;
+`;
+
+const SearchWrapper = styled.div`
+ ${({ theme }) => `
+ margin-bottom: ${theme.gridUnit * 2}px;
+ input {
+ font-size: ${theme.typography.sizes.s};
+ }
+ .ant-input-affix-wrapper {
+ padding-left: ${theme.gridUnit * 2}px;
+ }
+ `}
+`;
+
+/** Styles to line up prefix/suffix icons in the search input */
+const InputIconAlignment = styled.div`
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ color: ${({ theme }) => theme.colors.grayscale.base};
+`;
+
+const CategoryLabel = styled.button`
+ ${({ theme }) => `
+ all: unset; // remove default button styles
+ cursor: pointer;
+ padding: ${theme.gridUnit}px;
+ border-radius: ${theme.borderRadius}px;
+ line-height: 2em;
+ font-size: ${theme.typography.sizes.s};
+
+ &:focus {
+ outline: initial;
+ }
+
+ &.selected {
+ background-color: ${theme.colors.secondary.light4};
+ }
+ `}
+`;
+
+const IconsPane = styled.div`
+ grid-area: main;
+ overflow: auto;
+ display: grid;
+ grid-template-columns: repeat(
+ auto-fill,
+ ${({ theme }) => theme.gridUnit * THUMBNAIL_GRID_UNITS}px
+ );
+ grid-auto-rows: max-content;
+ justify-content: space-evenly;
+ grid-gap: ${({ theme }) => theme.gridUnit * 2}px;
+ justify-items: center;
+ // for some reason this padding doesn't seem to apply at the bottom of the container. Why is a mystery.
+ padding: ${({ theme }) => theme.gridUnit * 2}px;
+`;
+
+const DetailsPane = (theme: SupersetTheme) => css`
+ grid-area: details;
+ border-top: 1px solid ${theme.colors.grayscale.light2};
+`;
+
+const DetailsPopulated = (theme: SupersetTheme) => css`
+ padding: ${theme.gridUnit * 4}px;
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ grid-template-rows: auto 1fr;
+ grid-template-areas:
+ 'viz-name examples-header'
+ 'description examples';
+`;
+
+const DetailsEmpty = (theme: SupersetTheme) => css`
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+ font-style: italic;
+ color: ${theme.colors.grayscale.light1};
+`;
+
+// overflow hidden on the details pane and overflow auto on the description
+// (plus grid layout) enables the description to scroll while the header stays in place.
+
+const Description = styled.p`
+ grid-area: description;
+ overflow: auto;
+ padding-right: ${({ theme }) => theme.gridUnit * 14}px;
+`;
+
+const Examples = styled.div`
+ grid-area: examples;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ overflow: auto;
+ gap: ${({ theme }) => theme.gridUnit * 4}px;
+
+ img {
+ height: 100%;
+ border-radius: ${({ theme }) => theme.gridUnit}px;
+ border: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
+ }
+`;
+
+const thumbnailContainerCss = (theme: SupersetTheme) => css`
+ cursor: pointer;
+ width: ${theme.gridUnit * THUMBNAIL_GRID_UNITS}px;
+
+ img {
+ min-width: ${theme.gridUnit * THUMBNAIL_GRID_UNITS}px;
+ min-height: ${theme.gridUnit * THUMBNAIL_GRID_UNITS}px;
+ border: 1px solid ${theme.colors.grayscale.light2};
+ border-radius: ${theme.gridUnit}px;
+ transition: border-color ${theme.transitionTiming};
+ }
+
+ &.selected img {
+ border: 2px solid ${theme.colors.primary.light2};
+ }
+
+ &:hover:not(.selected) img {
+ border: 1px solid ${theme.colors.grayscale.light1};
+ }
+
+ .viztype-label {
+ margin-top: ${theme.gridUnit * 2}px;
+ text-align: center;
+ }
+`;
+
+function vizSortFactor(entry: VizEntry) {
+ if (typesWithDefaultOrder.has(entry.key)) {
+ return DEFAULT_ORDER.indexOf(entry.key);
+ }
+ return DEFAULT_ORDER.length;
+}
+
+interface ThumbnailProps {
+ entry: VizEntry;
+ selectedViz: string | null;
+ setSelectedViz: (viz: string) => void;
+}
+
+const Thumbnail: React.FC = ({
+ entry,
+ selectedViz,
+ setSelectedViz,
+}) => {
+ const theme = useTheme();
+ const { key, value: type } = entry;
+ const isSelected = selectedViz === entry.key;
+
+ return (
+ = ({
+ vizEntries,
+ ...props
+}) => (
+
+ {vizEntries.map(entry => (
+
+);
+
+const CategorySelector: React.FC<{
+ category: string;
+ isSelected: boolean;
+ onClick: (category: string) => void;
+}> = ({ category, isSelected, onClick }) => (
+ onClick(category)}
+ >
+ {category}
+
+);
+
+const doesVizMatchCategory = (viz: ChartMetadata, category: string) =>
+ category === viz.category ||
+ (category === OTHER_CATEGORY && viz.category == null);
+
+export default function VizTypeGallery(props: VizTypeGalleryProps) {
+ const { selectedViz, onChange, className } = props;
+ const { mountedPluginMetadata } = usePluginContext();
+ const searchInputRef = useRef();
+ const [searchInputValue, setSearchInputValue] = useState('');
+ const [isSearchFocused, setIsSearchFocused] = useState(false);
+ const isActivelySearching = isSearchFocused && !!searchInputValue;
+
+ const selectedVizMetadata: ChartMetadata | null = selectedViz
+ ? mountedPluginMetadata[selectedViz]
+ : null;
+
+ const chartMetadata: VizEntry[] = useMemo(() => {
+ const result = Object.entries(mountedPluginMetadata)
+ .map(([key, value]) => ({ key, value }))
+ .filter(({ value }) => nativeFilterGate(value.behaviors || []));
+ result.sort((a, b) => vizSortFactor(a) - vizSortFactor(b));
+ return result;
+ }, [mountedPluginMetadata]);
+
+ const chartsByCategory = useMemo(() => {
+ const result: Record = {};
+ chartMetadata.forEach(entry => {
+ const category = entry.value.category || OTHER_CATEGORY;
+ if (!result[category]) {
+ result[category] = [];
+ }
+ result[category].push(entry);
+ });
+ return result;
+ }, [chartMetadata]);
+
+ const categories = useMemo(
+ () =>
+ Object.keys(chartsByCategory).sort((a, b) => {
+ // make sure Other goes at the end
+ if (a === OTHER_CATEGORY) return 1;
+ if (b === OTHER_CATEGORY) return -1;
+ // sort alphabetically
+ return a.localeCompare(b);
+ }),
+ [chartsByCategory],
+ );
+
+ const [activeCategory, setActiveCategory] = useState(
+ () => selectedVizMetadata?.category || categories[0],
+ );
+
+ // get a fuse instance for fuzzy search
+ const fuse = useMemo(
+ () =>
+ new Fuse(chartMetadata, {
+ ignoreLocation: true,
+ threshold: 0.3,
+ keys: ['value.name', 'value.tags', 'value.description'],
+ }),
+ [chartMetadata],
+ );
+
+ const searchResults = useMemo(() => {
+ if (searchInputValue.trim() === '') {
+ return [];
+ }
+ return fuse.search(searchInputValue).map(result => result.item);
+ }, [searchInputValue, fuse]);
+
+ const focusSearch = useCallback(() => {
+ // "start searching" is actually a two-stage process.
+ // When you first click on the search bar, the input is focused and nothing else happens.
+ // Once you begin typing, the selected category is cleared and the displayed viz entries change.
+ setIsSearchFocused(true);
+ }, []);
+
+ const changeSearch: ChangeEventHandler = useCallback(
+ event => setSearchInputValue(event.target.value),
+ [],
+ );
+
+ const stopSearching = useCallback(() => {
+ // stopping a search takes you back to the category you were looking at before.
+ // Unlike focusSearch, this is a simple one-step process.
+ setIsSearchFocused(false);
+ setSearchInputValue('');
+ searchInputRef.current!.blur();
+ }, []);
+
+ const selectCategory = useCallback(
+ (key: string) => {
+ if (isSearchFocused) {
+ stopSearching();
+ }
+ setActiveCategory(key);
+ // clear the selected viz if it is not present in the new category
+ const isSelectedVizCompatible =
+ selectedVizMetadata && doesVizMatchCategory(selectedVizMetadata, key);
+ if (key !== activeCategory && !isSelectedVizCompatible) {
+ onChange(null);
+ }
+ },
+ [
+ stopSearching,
+ isSearchFocused,
+ activeCategory,
+ selectedVizMetadata,
+ onChange,
+ ],
+ );
+
+ const vizEntriesToDisplay = isActivelySearching
+ ? searchResults
+ : chartsByCategory[activeCategory] || [];
+
+ return (
+
+
+
+
+
+ {searchInputValue && (
+
+ }
+ />
+
+
+ {categories.map(category => (
+
+
+
+
+ );
+}
diff --git a/superset-frontend/src/explore/components/controls/VizTypeControl/index.jsx b/superset-frontend/src/explore/components/controls/VizTypeControl/index.jsx
deleted file mode 100644
index b7efbd8bc7..0000000000
--- a/superset-frontend/src/explore/components/controls/VizTypeControl/index.jsx
+++ /dev/null
@@ -1,244 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements. See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership. The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import React, { useEffect, useRef, useState } from 'react';
-import PropTypes from 'prop-types';
-import { Input, Row, Col } from 'src/common/components';
-import { t, getChartMetadataRegistry } from '@superset-ui/core';
-import { useDynamicPluginContext } from 'src/components/DynamicPlugins';
-import Modal from 'src/components/Modal';
-import { Tooltip } from 'src/components/Tooltip';
-import Label from 'src/components/Label';
-import ControlHeader from 'src/explore/components/ControlHeader';
-import { nativeFilterGate } from 'src/dashboard/components/nativeFilters/utils';
-import './VizTypeControl.less';
-
-const propTypes = {
- description: PropTypes.string,
- label: PropTypes.string,
- name: PropTypes.string.isRequired,
- onChange: PropTypes.func,
- value: PropTypes.string.isRequired,
- labelType: PropTypes.string,
-};
-
-const defaultProps = {
- onChange: () => {},
- labelType: 'default',
-};
-
-const registry = getChartMetadataRegistry();
-
-const DEFAULT_ORDER = [
- 'line',
- 'big_number',
- 'table',
- 'filter_box',
- 'dist_bar',
- 'area',
- 'bar',
- 'deck_polygon',
- 'pie',
- 'time_table',
- 'pivot_table',
- 'histogram',
- 'big_number_total',
- 'deck_scatter',
- 'deck_hex',
- 'time_pivot',
- 'deck_arc',
- 'heatmap',
- 'deck_grid',
- 'dual_line',
- 'deck_screengrid',
- 'line_multi',
- 'treemap',
- 'box_plot',
- 'sunburst',
- 'sankey',
- 'word_cloud',
- 'mapbox',
- 'kepler',
- 'cal_heatmap',
- 'rose',
- 'bubble',
- 'deck_geojson',
- 'horizon',
- 'deck_multi',
- 'compare',
- 'partition',
- 'event_flow',
- 'deck_path',
- 'graph_chart',
- 'world_map',
- 'paired_ttest',
- 'para',
- 'country_map',
-];
-
-const typesWithDefaultOrder = new Set(DEFAULT_ORDER);
-
-export const VIZ_TYPE_CONTROL_TEST_ID = 'viz-type-control';
-
-function VizSupportValidation({ vizType }) {
- const state = useDynamicPluginContext();
- if (state.loading || registry.has(vizType)) {
- return null;
- }
- return (
- (initialValue);
+
+ const openModal = useCallback(() => {
+ setShowModal(true);
+ }, []);
+
+ const onSubmit = useCallback(() => {
+ onChange(selectedViz);
+ setShowModal(false);
+ }, [selectedViz, onChange]);
+
+ const onCancel = useCallback(() => {
+ setShowModal(false);
+ setModalKey(key => key + 1);
+ // make sure the modal re-opens to the last submitted viz
+ setSelectedViz(initialValue);
+ }, [initialValue]);
+
+ const labelContent = initialValue
+ ? mountedPluginMetadata[initialValue]?.name || `${initialValue}`
+ : t('Select Viz Type');
+
+ return (
+
{t('Create a new chart')}
+{t('Choose a dataset')}
-
-
- {t('Choose a visualization type')}
--
+
-
); } diff --git a/superset-frontend/src/components/DynamicPlugins/index.tsx b/superset-frontend/src/components/DynamicPlugins/index.tsx index 90f4ba7fb5..b11798fbd8 100644 --- a/superset-frontend/src/components/DynamicPlugins/index.tsx +++ b/superset-frontend/src/components/DynamicPlugins/index.tsx @@ -17,30 +17,45 @@ * under the License. */ import React, { useContext, useEffect, useReducer } from 'react'; -import { defineSharedModules, logging, makeApi } from '@superset-ui/core'; +import { + ChartMetadata, + defineSharedModules, + getChartMetadataRegistry, + logging, + makeApi, +} from '@superset-ui/core'; import { FeatureFlag, isFeatureEnabled } from 'src/featureFlags'; +import { omitBy } from 'lodash'; + +const metadataRegistry = getChartMetadataRegistry(); export type PluginContextType = { loading: boolean; - plugins: { + /** These are actually only the dynamic plugins */ + dynamicPlugins: { [key: string]: { key: string; - loading: boolean; + mounting: boolean; error: null | Error; }; }; + keys: string[]; + /** Mounted means the plugin's js bundle has been imported */ + mountedPluginMetadata: Record
setSelectedViz(key)}
+ data-test="viztype-selector-container"
+ >
+ 
+
+ );
+};
+
+interface ThumbnailGalleryProps {
+ vizEntries: VizEntry[];
+ selectedViz: string | null;
+ setSelectedViz: (viz: string) => void;
+}
+
+/** A list of viz thumbnails, used within the viz picker modal */
+const ThumbnailGallery: React.FC
+ {type.name}
+
+ [
+ DetailsPane(theme),
+ DetailsPopulated(theme),
+ ]}
+ >
+ <>
+
+ {selectedVizMetadata?.name}
+
+
+ {selectedVizMetadata?.description ||
+ t('No description available.')}
+
+
+ {!!selectedVizMetadata?.exampleGallery?.length && t('Examples')}
+
+
+ {(selectedVizMetadata?.exampleGallery || []).map(example => (
+ 
+ ))}
+
+
+
+ ) : (
+ [
+ DetailsPane(theme),
+ DetailsEmpty(theme),
+ ]}
+ >
+ {t('Select a visualization type')}
+
+ )}
+
- {' '}
- {t('This visualization type is not supported.')}
-
- );
-}
-
-const VizTypeControl = props => {
- const [showModal, setShowModal] = useState(false);
- const [filter, setFilter] = useState('');
- const searchRef = useRef(null);
-
- useEffect(() => {
- if (showModal) {
- setTimeout(() => searchRef?.current?.focus(), 200);
- }
- }, [showModal]);
-
- const onChange = vizType => {
- props.onChange(vizType);
- setShowModal(false);
- };
-
- const toggleModal = () => {
- setShowModal(prevState => !prevState);
- };
-
- const changeSearch = event => {
- setFilter(event.target.value);
- };
-
- const renderItem = entry => {
- const { value } = props;
- const { key, value: type } = entry;
- const isSelected = key === value;
-
- return (
- onChange(key)}
- >
-
-
- );
- };
-
- const { value, labelType } = props;
- const filterString = filter.toLowerCase();
- const filterStringParts = filterString.split(' ');
-
- const a = DEFAULT_ORDER.filter(type => registry.has(type));
- const filteredTypes = a
- .filter(type => {
- const behaviors = registry.get(type)?.behaviors || [];
- return nativeFilterGate(behaviors);
- })
- .map(type => ({
- key: type,
- value: registry.get(type),
- }))
- .concat(
- registry
- .entries()
- .filter(entry => {
- const behaviors = entry.value?.behaviors || [];
- return nativeFilterGate(behaviors);
- })
- .filter(({ key }) => !typesWithDefaultOrder.has(key)),
- )
- .filter(entry =>
- filterStringParts.every(
- part => entry.value.name.toLowerCase().indexOf(part) !== -1,
- ),
- );
-
- return (
-
- {type.name}
-
-
-
- <>
-
-
-
-
- {filteredTypes.map(entry => (
-
-
-
- );
-};
-
-VizTypeControl.propTypes = propTypes;
-VizTypeControl.defaultProps = defaultProps;
-
-export default VizTypeControl;
diff --git a/superset-frontend/src/explore/components/controls/VizTypeControl/index.tsx b/superset-frontend/src/explore/components/controls/VizTypeControl/index.tsx
new file mode 100644
index 0000000000..7837eb04ae
--- /dev/null
+++ b/superset-frontend/src/explore/components/controls/VizTypeControl/index.tsx
@@ -0,0 +1,152 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React, { useCallback, useState } from 'react';
+import PropTypes from 'prop-types';
+import { t, getChartMetadataRegistry, styled } from '@superset-ui/core';
+import { usePluginContext } from 'src/components/DynamicPlugins';
+import Modal from 'src/components/Modal';
+import { Tooltip } from 'src/components/Tooltip';
+import Label, { Type } from 'src/components/Label';
+import ControlHeader from 'src/explore/components/ControlHeader';
+import VizTypeGallery, {
+ MAX_ADVISABLE_VIZ_GALLERY_WIDTH,
+} from './VizTypeGallery';
+
+const propTypes = {
+ description: PropTypes.string,
+ label: PropTypes.string,
+ name: PropTypes.string.isRequired,
+ onChange: PropTypes.func,
+ value: PropTypes.string.isRequired,
+ labelType: PropTypes.string,
+};
+
+interface VizTypeControlProps {
+ description?: string;
+ label?: string;
+ name: string;
+ onChange: (vizType: string | null) => void;
+ value: string | null;
+ labelType?: Type;
+ isModalOpenInit?: boolean;
+}
+
+const defaultProps = {
+ onChange: () => {},
+ labelType: 'default',
+};
+
+const metadataRegistry = getChartMetadataRegistry();
+
+export const VIZ_TYPE_CONTROL_TEST_ID = 'viz-type-control';
+
+function VizSupportValidation({ vizType }: { vizType: string }) {
+ const state = usePluginContext();
+ if (state.loading || metadataRegistry.has(vizType)) {
+ return null;
+ }
+ return (
+
-
-
-
+ {' '}
+ {t('This visualization type is not supported.')}
+
+ );
+}
+
+const UnpaddedModal = styled(Modal)`
+ .ant-modal-body {
+ padding: 0;
+ }
+`;
+
+/** Manages the viz type and the viz picker modal */
+const VizTypeControl = (props: VizTypeControlProps) => {
+ const { value: initialValue, onChange, isModalOpenInit, labelType } = props;
+ const { mountedPluginMetadata } = usePluginContext();
+ const [showModal, setShowModal] = useState(!!isModalOpenInit);
+ // a trick to force re-initialization of the gallery each time the modal opens,
+ // ensuring that the modal always opens to the correct category.
+ const [modalKey, setModalKey] = useState(0);
+ const [selectedViz, setSelectedViz] = useState
+
+ <>
+
+ {initialValue &&
+
+
+ {/* When the key increments, it forces react to re-init the gallery component */}
+
+
+ );
+};
+
+VizTypeControl.propTypes = propTypes;
+VizTypeControl.defaultProps = defaultProps;
+
+export default VizTypeControl;
diff --git a/superset-frontend/src/visualizations/TimeTable/TimeTableChartPlugin.js b/superset-frontend/src/visualizations/TimeTable/TimeTableChartPlugin.js
index c8e49a8881..6e070ae997 100644
--- a/superset-frontend/src/visualizations/TimeTable/TimeTableChartPlugin.js
+++ b/superset-frontend/src/visualizations/TimeTable/TimeTableChartPlugin.js
@@ -21,8 +21,21 @@ import transformProps from './transformProps';
import thumbnail from './images/thumbnail.png';
const metadata = new ChartMetadata({
+ category: t('Table'),
name: t('Time-series Table'),
- description: '',
+ description: t(
+ 'Compare multiple time series charts (as sparklines) and related metrics quickly.',
+ ),
+ tags: [
+ t('Advanced-Analytics'),
+ t('Multi-Variables'),
+ t('Comparison'),
+ t('Legacy'),
+ t('Percentages'),
+ t('Tabular'),
+ t('Text'),
+ t('Trend'),
+ ],
thumbnail,
useLegacyApi: true,
});
diff --git a/superset-frontend/webpack.config.js b/superset-frontend/webpack.config.js
index 3de6365aac..767aaa751e 100644
--- a/superset-frontend/webpack.config.js
+++ b/superset-frontend/webpack.config.js
@@ -279,7 +279,7 @@ const config = {
// viz thumbnails are used in `addSlice` and `explore` page
thumbnail: {
name: 'thumbnail',
- test: /thumbnail(Large)?\.png/i,
+ test: /thumbnail(Large)?\.(png|jpg)/i,
priority: 20,
enforce: true,
},