mirror of https://github.com/apache/superset.git
Implement sectionId (#16022)
This commit is contained in:
parent
c8a8347b43
commit
39913d286a
|
@ -52,6 +52,13 @@ type VizEntry = {
|
||||||
value: ChartMetadata;
|
value: ChartMetadata;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
enum SECTIONS {
|
||||||
|
ALL_CHARTS = 'ALL_CHARTS',
|
||||||
|
CATEGORY = 'CATEGORY',
|
||||||
|
TAGS = 'TAGS',
|
||||||
|
RECOMMENDED_TAGS = 'RECOMMENDED_TAGS',
|
||||||
|
}
|
||||||
|
|
||||||
const DEFAULT_ORDER = [
|
const DEFAULT_ORDER = [
|
||||||
'line',
|
'line',
|
||||||
'big_number',
|
'big_number',
|
||||||
|
@ -396,11 +403,12 @@ const ThumbnailGallery: React.FC<ThumbnailGalleryProps> = ({
|
||||||
|
|
||||||
const Selector: React.FC<{
|
const Selector: React.FC<{
|
||||||
selector: string;
|
selector: string;
|
||||||
|
sectionId: string;
|
||||||
icon: JSX.Element;
|
icon: JSX.Element;
|
||||||
isSelected: boolean;
|
isSelected: boolean;
|
||||||
onClick: (selector: string) => void;
|
onClick: (selector: string, sectionId: string) => void;
|
||||||
className?: string;
|
className?: string;
|
||||||
}> = ({ selector, icon, isSelected, onClick, className }) => {
|
}> = ({ selector, sectionId, icon, isSelected, onClick, className }) => {
|
||||||
const btnRef = useRef<HTMLButtonElement>(null);
|
const btnRef = useRef<HTMLButtonElement>(null);
|
||||||
|
|
||||||
// see Element.scrollIntoViewIfNeeded()
|
// see Element.scrollIntoViewIfNeeded()
|
||||||
|
@ -423,7 +431,7 @@ const Selector: React.FC<{
|
||||||
key={selector}
|
key={selector}
|
||||||
name={selector}
|
name={selector}
|
||||||
className={cx(className, isSelected && 'selected')}
|
className={cx(className, isSelected && 'selected')}
|
||||||
onClick={() => onClick(selector)}
|
onClick={() => onClick(selector, sectionId)}
|
||||||
>
|
>
|
||||||
{icon}
|
{icon}
|
||||||
{selector}
|
{selector}
|
||||||
|
@ -517,6 +525,12 @@ export default function VizTypeGallery(props: VizTypeGalleryProps) {
|
||||||
() => selectedVizMetadata?.category || RECOMMENDED_TAGS[0],
|
() => selectedVizMetadata?.category || RECOMMENDED_TAGS[0],
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const [activeSection, setActiveSection] = useState<string>(() =>
|
||||||
|
selectedVizMetadata?.category
|
||||||
|
? SECTIONS.CATEGORY
|
||||||
|
: SECTIONS.RECOMMENDED_TAGS,
|
||||||
|
);
|
||||||
|
|
||||||
// get a fuse instance for fuzzy search
|
// get a fuse instance for fuzzy search
|
||||||
const fuse = useMemo(
|
const fuse = useMemo(
|
||||||
() =>
|
() =>
|
||||||
|
@ -556,15 +570,17 @@ export default function VizTypeGallery(props: VizTypeGalleryProps) {
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const clickSelector = useCallback(
|
const clickSelector = useCallback(
|
||||||
(key: string) => {
|
(selector: string, sectionId: string) => {
|
||||||
if (isSearchFocused) {
|
if (isSearchFocused) {
|
||||||
stopSearching();
|
stopSearching();
|
||||||
}
|
}
|
||||||
setActiveSelector(key);
|
setActiveSelector(selector);
|
||||||
|
setActiveSection(sectionId);
|
||||||
// clear the selected viz if it is not present in the new category or tags
|
// clear the selected viz if it is not present in the new category or tags
|
||||||
const isSelectedVizCompatible =
|
const isSelectedVizCompatible =
|
||||||
selectedVizMetadata && doesVizMatchSelector(selectedVizMetadata, key);
|
selectedVizMetadata &&
|
||||||
if (key !== activeSelector && !isSelectedVizCompatible) {
|
doesVizMatchSelector(selectedVizMetadata, selector);
|
||||||
|
if (selector !== activeSelector && !isSelectedVizCompatible) {
|
||||||
onChange(null);
|
onChange(null);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
@ -579,17 +595,17 @@ export default function VizTypeGallery(props: VizTypeGalleryProps) {
|
||||||
|
|
||||||
const sectionMap = useMemo(
|
const sectionMap = useMemo(
|
||||||
() => ({
|
() => ({
|
||||||
RECOMMENDED_TAGS: {
|
[SECTIONS.RECOMMENDED_TAGS]: {
|
||||||
title: t('Recommended tags'),
|
title: t('Recommended tags'),
|
||||||
icon: <Icons.Tags />,
|
icon: <Icons.Tags />,
|
||||||
selectors: RECOMMENDED_TAGS,
|
selectors: RECOMMENDED_TAGS,
|
||||||
},
|
},
|
||||||
CATEGORY: {
|
[SECTIONS.CATEGORY]: {
|
||||||
title: t('Category'),
|
title: t('Category'),
|
||||||
icon: <Icons.Category />,
|
icon: <Icons.Category />,
|
||||||
selectors: categories,
|
selectors: categories,
|
||||||
},
|
},
|
||||||
TAGS: {
|
[SECTIONS.TAGS]: {
|
||||||
title: t('Tags'),
|
title: t('Tags'),
|
||||||
icon: <Icons.Tags />,
|
icon: <Icons.Tags />,
|
||||||
selectors: tags,
|
selectors: tags,
|
||||||
|
@ -598,11 +614,31 @@ export default function VizTypeGallery(props: VizTypeGalleryProps) {
|
||||||
[categories, tags],
|
[categories, tags],
|
||||||
);
|
);
|
||||||
|
|
||||||
const vizEntriesToDisplay = isActivelySearching
|
const getVizEntriesToDisplay = () => {
|
||||||
? searchResults
|
if (isActivelySearching) {
|
||||||
: activeSelector === ALL_CHARTS
|
return searchResults;
|
||||||
? sortedMetadata
|
}
|
||||||
: chartsByCategory[activeSelector] || chartsByTags[activeSelector] || [];
|
if (
|
||||||
|
activeSelector === ALL_CHARTS &&
|
||||||
|
activeSection === SECTIONS.ALL_CHARTS
|
||||||
|
) {
|
||||||
|
return sortedMetadata;
|
||||||
|
}
|
||||||
|
if (
|
||||||
|
activeSection === SECTIONS.CATEGORY &&
|
||||||
|
chartsByCategory[activeSelector]
|
||||||
|
) {
|
||||||
|
return chartsByCategory[activeSelector];
|
||||||
|
}
|
||||||
|
if (
|
||||||
|
(activeSection === SECTIONS.TAGS ||
|
||||||
|
activeSection === SECTIONS.RECOMMENDED_TAGS) &&
|
||||||
|
chartsByTags[activeSelector]
|
||||||
|
) {
|
||||||
|
return chartsByTags[activeSelector];
|
||||||
|
}
|
||||||
|
return [];
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<VizPickerLayout className={className}>
|
<VizPickerLayout className={className}>
|
||||||
|
@ -615,9 +651,14 @@ export default function VizTypeGallery(props: VizTypeGalleryProps) {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
`
|
`
|
||||||
}
|
}
|
||||||
|
sectionId={SECTIONS.ALL_CHARTS}
|
||||||
selector={ALL_CHARTS}
|
selector={ALL_CHARTS}
|
||||||
icon={<Icons.Ballot />}
|
icon={<Icons.Ballot />}
|
||||||
isSelected={!isActivelySearching && ALL_CHARTS === activeSelector}
|
isSelected={
|
||||||
|
!isActivelySearching &&
|
||||||
|
ALL_CHARTS === activeSelector &&
|
||||||
|
SECTIONS.ALL_CHARTS === activeSection
|
||||||
|
}
|
||||||
onClick={clickSelector}
|
onClick={clickSelector}
|
||||||
/>
|
/>
|
||||||
<Collapse
|
<Collapse
|
||||||
|
@ -625,21 +666,24 @@ export default function VizTypeGallery(props: VizTypeGalleryProps) {
|
||||||
ghost
|
ghost
|
||||||
defaultActiveKey={Object.keys(sectionMap)}
|
defaultActiveKey={Object.keys(sectionMap)}
|
||||||
>
|
>
|
||||||
{Object.keys(sectionMap).map(key => {
|
{Object.keys(sectionMap).map(sectionId => {
|
||||||
const section = sectionMap[key];
|
const section = sectionMap[sectionId];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Collapse.Panel
|
<Collapse.Panel
|
||||||
header={<span className="header">{section.title}</span>}
|
header={<span className="header">{section.title}</span>}
|
||||||
key={key}
|
key={sectionId}
|
||||||
>
|
>
|
||||||
{section.selectors.map((selector: string) => (
|
{section.selectors.map((selector: string) => (
|
||||||
<Selector
|
<Selector
|
||||||
key={selector}
|
key={selector}
|
||||||
selector={selector}
|
selector={selector}
|
||||||
|
sectionId={sectionId}
|
||||||
icon={section.icon}
|
icon={section.icon}
|
||||||
isSelected={
|
isSelected={
|
||||||
!isActivelySearching && selector === activeSelector
|
!isActivelySearching &&
|
||||||
|
selector === activeSelector &&
|
||||||
|
sectionId === activeSection
|
||||||
}
|
}
|
||||||
onClick={clickSelector}
|
onClick={clickSelector}
|
||||||
/>
|
/>
|
||||||
|
@ -676,7 +720,7 @@ export default function VizTypeGallery(props: VizTypeGalleryProps) {
|
||||||
|
|
||||||
<RightPane>
|
<RightPane>
|
||||||
<ThumbnailGallery
|
<ThumbnailGallery
|
||||||
vizEntries={vizEntriesToDisplay}
|
vizEntries={getVizEntriesToDisplay()}
|
||||||
selectedViz={selectedViz}
|
selectedViz={selectedViz}
|
||||||
setSelectedViz={onChange}
|
setSelectedViz={onChange}
|
||||||
/>
|
/>
|
||||||
|
|
Loading…
Reference in New Issue