mirror of
https://github.com/apache/superset.git
synced 2024-09-12 08:39:45 -04:00
feat: Adding a show all button to the column/metrics list in the explore view (Allow more than 50 columns to be shown) (#15153)
* Adding a show all button to the column/metrics list in the explore view * Update superset-frontend/src/explore/components/DatasourcePanel/index.tsx Co-authored-by: cccs-rc <62034438+cccs-rc@users.noreply.github.com> * Update superset-frontend/src/explore/components/DatasourcePanel/index.tsx Co-authored-by: cccs-rc <62034438+cccs-rc@users.noreply.github.com> * Fixing typo Co-authored-by: cccs-rc <62034438+cccs-rc@users.noreply.github.com>
This commit is contained in:
parent
a3d91aee28
commit
b9b903f8e6
@ -42,6 +42,18 @@ export interface Props {
|
|||||||
actions: Partial<ExploreActions> & Pick<ExploreActions, 'setControlValue'>;
|
actions: Partial<ExploreActions> & Pick<ExploreActions, 'setControlValue'>;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const Button = styled.button`
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
text-decoration: underline;
|
||||||
|
color: ${({ theme }) => theme.colors.primary.dark1};
|
||||||
|
`;
|
||||||
|
|
||||||
|
const ButtonContainer = styled.div`
|
||||||
|
text-align: center;
|
||||||
|
padding-top: 2px;
|
||||||
|
`;
|
||||||
|
|
||||||
const DatasourceContainer = styled.div`
|
const DatasourceContainer = styled.div`
|
||||||
background-color: ${({ theme }) => theme.colors.grayscale.light4};
|
background-color: ${({ theme }) => theme.colors.grayscale.light4};
|
||||||
position: relative;
|
position: relative;
|
||||||
@ -113,6 +125,11 @@ export default function DataSourcePanel({
|
|||||||
columns,
|
columns,
|
||||||
metrics,
|
metrics,
|
||||||
});
|
});
|
||||||
|
const [showAllMetrics, setShowAllMetrics] = useState(false);
|
||||||
|
const [showAllColumns, setShowAllColumns] = useState(false);
|
||||||
|
|
||||||
|
const DEFAULT_MAX_COLUMNS_LENGTH = 50;
|
||||||
|
const DEFAULT_MAX_METRICS_LENGTH = 50;
|
||||||
|
|
||||||
const search = debounce((value: string) => {
|
const search = debounce((value: string) => {
|
||||||
if (value === '') {
|
if (value === '') {
|
||||||
@ -176,8 +193,12 @@ export default function DataSourcePanel({
|
|||||||
setInputValue('');
|
setInputValue('');
|
||||||
}, [columns, datasource, metrics]);
|
}, [columns, datasource, metrics]);
|
||||||
|
|
||||||
const metricSlice = lists.metrics.slice(0, 50);
|
const metricSlice = showAllMetrics
|
||||||
const columnSlice = lists.columns.slice(0, 50);
|
? lists.metrics
|
||||||
|
: lists.metrics.slice(0, DEFAULT_MAX_COLUMNS_LENGTH);
|
||||||
|
const columnSlice = showAllColumns
|
||||||
|
? lists.columns
|
||||||
|
: lists.columns.slice(0, DEFAULT_MAX_METRICS_LENGTH);
|
||||||
|
|
||||||
const mainBody = (
|
const mainBody = (
|
||||||
<>
|
<>
|
||||||
@ -219,6 +240,15 @@ export default function DataSourcePanel({
|
|||||||
)}
|
)}
|
||||||
</LabelContainer>
|
</LabelContainer>
|
||||||
))}
|
))}
|
||||||
|
{lists.metrics.length > DEFAULT_MAX_METRICS_LENGTH ? (
|
||||||
|
<ButtonContainer>
|
||||||
|
<Button onClick={() => setShowAllMetrics(!showAllMetrics)}>
|
||||||
|
{showAllMetrics ? t('Show less...') : t('Show all...')}
|
||||||
|
</Button>
|
||||||
|
</ButtonContainer>
|
||||||
|
) : (
|
||||||
|
<></>
|
||||||
|
)}
|
||||||
</Collapse.Panel>
|
</Collapse.Panel>
|
||||||
<Collapse.Panel
|
<Collapse.Panel
|
||||||
header={<span className="header">{t('Columns')}</span>}
|
header={<span className="header">{t('Columns')}</span>}
|
||||||
@ -241,6 +271,15 @@ export default function DataSourcePanel({
|
|||||||
)}
|
)}
|
||||||
</LabelContainer>
|
</LabelContainer>
|
||||||
))}
|
))}
|
||||||
|
{lists.columns.length > DEFAULT_MAX_COLUMNS_LENGTH ? (
|
||||||
|
<ButtonContainer>
|
||||||
|
<Button onClick={() => setShowAllColumns(!showAllColumns)}>
|
||||||
|
{showAllColumns ? t('Show Less...') : t('Show all...')}
|
||||||
|
</Button>
|
||||||
|
</ButtonContainer>
|
||||||
|
) : (
|
||||||
|
<></>
|
||||||
|
)}
|
||||||
</Collapse.Panel>
|
</Collapse.Panel>
|
||||||
</Collapse>
|
</Collapse>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
Reference in New Issue
Block a user