You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@superset.apache.org by GitBox <gi...@apache.org> on 2022/02/23 12:20:47 UTC
[GitHub] [superset] kgabryje opened a new pull request #18874: feat(native-filters): Implement filter cards
kgabryje opened a new pull request #18874:
URL: https://github.com/apache/superset/pull/18874
### SUMMARY
This PR implements the Filter Card component. Please note that as of now this component is not used anywhere - usages will be added in upcoming PRs.
Filter card is a component that displays native filter's metadata in user-friendly, readable way.
Information displayed:
- filter's name
- filter's type
- filter's scope
- filter's dependencies
Filter scope values:
- "All charts" if every chart in the dashboard is in scope
- "Tab name 1, Tab name 2" if "Tab name 1" and "Tab name 2" are filter scope's rootpath and every chart in those tabs is in scope
- "Tab name 1, Chart1" if every chart in top level tab "Tab name 1" is in scope + "Chart1" from another tab is in scope
- "Chart1, Chart2" if only those 2 charts are in scope and previous conditions are not fulfilled
Filter dependencies:
- list of native filters that current native filter is dependent on
- clicking a name of dependency highlights the filter
### BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF
<img width="244" alt="image" src="https://user-images.githubusercontent.com/15073128/155317999-0b4e5a70-2300-45b1-925e-7c8f9a673655.png">
<img width="249" alt="image" src="https://user-images.githubusercontent.com/15073128/155318282-2ab74b7a-0a87-4859-b953-1142007a129d.png">
<img width="250" alt="image" src="https://user-images.githubusercontent.com/15073128/155318311-265a718c-e7a4-4736-86ed-08d35d7fe19f.png">
### TESTING INSTRUCTIONS
TODO: add unit tests
Manual tests will be performed when filter cards are added to filters
### ADDITIONAL INFORMATION
<!--- Check any relevant boxes with "x" -->
<!--- HINT: Include "Fixes #nnn" if you are fixing an existing issue -->
- [ ] Has associated issue:
- [ ] Required feature flags:
- [ ] Changes UI
- [ ] Includes DB Migration (follow approval process in [SIP-59](https://github.com/apache/superset/issues/13351))
- [ ] Migration is atomic, supports rollback & is backwards-compatible
- [ ] Confirm DB migration upgrade and downgrade tested
- [ ] Runtime estimates and downtime expectations provided
- [ ] Introduces new feature or API
- [ ] Removes existing feature or API
CC @kasiazjc
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
[GitHub] [superset] michael-s-molina commented on a change in pull request #18874: feat(native-filters): Implement filter cards
Posted by GitBox <gi...@apache.org>.
michael-s-molina commented on a change in pull request #18874:
URL: https://github.com/apache/superset/pull/18874#discussion_r812900936
##########
File path: superset-frontend/src/dashboard/components/nativeFilters/FilterCard/useTruncation.ts
##########
@@ -0,0 +1,56 @@
+/**
+ * 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 { RefObject, useLayoutEffect, useState } from 'react';
+
+export const useTruncation = (elementRef: RefObject<HTMLElement>) => {
+ const [elementsTruncated, setElementsTruncated] = useState(0);
+ const [hasHiddenElements, setHasHiddenElements] = useState(false);
+
+ useLayoutEffect(() => {
+ if (!elementRef.current) {
Review comment:
Extract `elementRef.current` to a constant to be reused.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
[GitHub] [superset] michael-s-molina commented on a change in pull request #18874: feat(native-filters): Implement filter cards
Posted by GitBox <gi...@apache.org>.
michael-s-molina commented on a change in pull request #18874:
URL: https://github.com/apache/superset/pull/18874#discussion_r812872377
##########
File path: superset-frontend/src/dashboard/components/nativeFilters/FilterCard/DependenciesRow.tsx
##########
@@ -0,0 +1,126 @@
+/**
+ * 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, useMemo, useRef } from 'react';
+import { useDispatch } from 'react-redux';
+import { css, t, useTheme } from '@superset-ui/core';
+import { setDirectPathToChild } from 'src/dashboard/actions/dashboardState';
+import Icons from 'src/components/Icons';
+import { Tooltip } from 'src/components/Tooltip';
+import {
+ DependencyItem,
+ Row,
+ RowLabel,
+ RowTruncationCount,
+ RowValue,
+ TooltipList,
+ TooltipTrigger,
+} from './Styles';
+import { useFilterDependencies } from './useFilterDependencies';
+import { useTruncation } from './useTruncation';
+import { DependencyValueProps, FilterCardRowProps } from './types';
+
+const DependencyValue = ({ dependency, label }: DependencyValueProps) => {
+ const dispatch = useDispatch();
+ const handleClick = useCallback(() => {
+ dispatch(setDirectPathToChild([dependency.id]));
+ }, [dependency.id, dispatch]);
+ return (
+ <DependencyItem role="button" onClick={handleClick} tabIndex={0}>
+ {label}
+ </DependencyItem>
+ );
+};
+
+export const DependenciesRow = React.memo(({ filter }: FilterCardRowProps) => {
+ const dependencies = useFilterDependencies(filter);
+ const dependenciesRef = useRef<HTMLDivElement>(null);
+ const [elementsTruncated, hasHiddenElements] = useTruncation(dependenciesRef);
+ const theme = useTheme();
+
+ const tooltipText = useMemo(
+ () =>
+ elementsTruncated > 0 && dependencies ? (
+ <TooltipList>
+ {dependencies.map(dependency => (
+ <li>
+ <DependencyValue
+ dependency={dependency}
+ label={dependency.name}
+ />
+ </li>
+ ))}
+ </TooltipList>
+ ) : null,
+ [elementsTruncated, dependencies],
+ );
+
+ return Array.isArray(dependencies) && dependencies.length > 0 ? (
+ <Row>
+ <RowLabel
+ css={css`
+ display: inline-flex;
+ align-items: center;
+ `}
+ >
+ Dependent on{' '}
Review comment:
```suggestion
{t('Dependent on')}{' '}
```
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
[GitHub] [superset] michael-s-molina commented on a change in pull request #18874: feat(native-filters): Implement filter cards
Posted by GitBox <gi...@apache.org>.
michael-s-molina commented on a change in pull request #18874:
URL: https://github.com/apache/superset/pull/18874#discussion_r812903799
##########
File path: superset-frontend/src/dashboard/components/nativeFilters/FilterCard/useTruncation.ts
##########
@@ -0,0 +1,56 @@
+/**
+ * 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 { RefObject, useLayoutEffect, useState } from 'react';
+
+export const useTruncation = (elementRef: RefObject<HTMLElement>) => {
+ const [elementsTruncated, setElementsTruncated] = useState(0);
+ const [hasHiddenElements, setHasHiddenElements] = useState(false);
+
+ useLayoutEffect(() => {
+ if (!elementRef.current) {
+ return;
+ }
+ if (elementRef.current.scrollWidth > elementRef.current.clientWidth) {
+ // "..." is around 6x wide
+ const maxWidth = elementRef.current.clientWidth - 6;
+ const elementsCount = elementRef.current.childNodes.length;
+ let width = 0;
+ let i = 0;
Review comment:
Maybe change `i` to `visibleElementsCount`?
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
[GitHub] [superset] michael-s-molina commented on a change in pull request #18874: feat(native-filters): Implement filter cards
Posted by GitBox <gi...@apache.org>.
michael-s-molina commented on a change in pull request #18874:
URL: https://github.com/apache/superset/pull/18874#discussion_r812901365
##########
File path: superset-frontend/src/dashboard/components/nativeFilters/FilterCard/useTruncation.ts
##########
@@ -0,0 +1,56 @@
+/**
+ * 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 { RefObject, useLayoutEffect, useState } from 'react';
+
+export const useTruncation = (elementRef: RefObject<HTMLElement>) => {
+ const [elementsTruncated, setElementsTruncated] = useState(0);
+ const [hasHiddenElements, setHasHiddenElements] = useState(false);
+
+ useLayoutEffect(() => {
+ if (!elementRef.current) {
+ return;
+ }
+ if (elementRef.current.scrollWidth > elementRef.current.clientWidth) {
+ // "..." is around 6x wide
Review comment:
```suggestion
// "..." is around 6px wide
```
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
[GitHub] [superset] kgabryje merged pull request #18874: feat(native-filters): Implement filter cards
Posted by GitBox <gi...@apache.org>.
kgabryje merged pull request #18874:
URL: https://github.com/apache/superset/pull/18874
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
[GitHub] [superset] michael-s-molina commented on a change in pull request #18874: feat(native-filters): Implement filter cards
Posted by GitBox <gi...@apache.org>.
michael-s-molina commented on a change in pull request #18874:
URL: https://github.com/apache/superset/pull/18874#discussion_r812907212
##########
File path: superset-frontend/src/dashboard/components/nativeFilters/FilterCard/useTruncation.ts
##########
@@ -0,0 +1,56 @@
+/**
+ * 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 { RefObject, useLayoutEffect, useState } from 'react';
+
+export const useTruncation = (elementRef: RefObject<HTMLElement>) => {
+ const [elementsTruncated, setElementsTruncated] = useState(0);
+ const [hasHiddenElements, setHasHiddenElements] = useState(false);
+
+ useLayoutEffect(() => {
+ if (!elementRef.current) {
+ return;
+ }
+ if (elementRef.current.scrollWidth > elementRef.current.clientWidth) {
+ // "..." is around 6x wide
+ const maxWidth = elementRef.current.clientWidth - 6;
+ const elementsCount = elementRef.current.childNodes.length;
+ let width = 0;
+ let i = 0;
+ while (width < maxWidth) {
+ width += (elementRef.current.childNodes[i] as HTMLElement).offsetWidth;
+ i += 1;
+ }
+ if (i === elementsCount) {
+ setElementsTruncated(1);
+ setHasHiddenElements(false);
+ } else {
+ setElementsTruncated(elementsCount - i);
+ setHasHiddenElements(true);
+ }
+ } else {
+ setElementsTruncated(0);
+ }
+ }, [
+ elementRef.current?.offsetWidth,
Review comment:
Maybe also extract `clientWidth` and `offsetWidth` as variables at the top.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
[GitHub] [superset] michael-s-molina commented on a change in pull request #18874: feat(native-filters): Implement filter cards
Posted by GitBox <gi...@apache.org>.
michael-s-molina commented on a change in pull request #18874:
URL: https://github.com/apache/superset/pull/18874#discussion_r812897456
##########
File path: superset-frontend/src/dashboard/components/nativeFilters/FilterCard/useFilterScope.ts
##########
@@ -0,0 +1,144 @@
+/**
+ * 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 { Filter, t } from '@superset-ui/core';
+import { useSelector } from 'react-redux';
+import {
+ ChartsState,
+ Layout,
+ LayoutItem,
+ RootState,
+} from 'src/dashboard/types';
+import { DASHBOARD_ROOT_ID } from 'src/dashboard/util/constants';
+import { CHART_TYPE } from 'src/dashboard/util/componentTypes';
+import { useMemo } from 'react';
+
+const useCharts = () => {
+ const charts = useSelector<RootState, ChartsState>(state => state.charts);
+ return useMemo(() => Object.values(charts), [charts]);
+};
+
+export const useFilterScope = (filter: Filter) => {
+ const layout = useSelector<RootState, Layout>(
+ state => state.dashboardLayout.present,
+ );
+ const charts = useCharts();
+
+ return useMemo(() => {
+ let topLevelTabs: string[] | undefined;
+ if (layout[DASHBOARD_ROOT_ID].children[0].startsWith('TABS-')) {
+ topLevelTabs = layout[layout[DASHBOARD_ROOT_ID].children[0]].children;
+ }
+
+ // no charts in scope
+ if (filter.scope.rootPath.length === 0) {
+ return undefined;
+ }
+
+ // all charts in scope
+ // no charts excluded and no top level tabs
+ // OR no charts excluded and every top level tab is in rootPath
+ if (
+ filter.scope.excluded.length === 0 &&
+ (filter.scope.rootPath[0] === DASHBOARD_ROOT_ID ||
+ (topLevelTabs &&
+ topLevelTabs.every(topLevelTab =>
+ filter.scope.rootPath.includes(topLevelTab),
+ )))
+ ) {
+ return [t('All charts')];
+ }
+
+ // no charts excluded and not every top level tab in scope
+ // returns "TAB1, TAB2"
+ if (filter.scope.excluded.length === 0 && topLevelTabs) {
+ return filter.scope.rootPath.map(
+ tabId => layout[tabId].meta.text || layout[tabId].meta.defaultText,
+ );
+ }
+
+ const layoutCharts = Object.values(layout).filter(
+ layoutElement => layoutElement.type === CHART_TYPE,
+ );
+
+ // no top level tabs, charts excluded
+ // returns "CHART1, CHART2"
+ if (filter.scope.rootPath[0] === DASHBOARD_ROOT_ID) {
+ return charts
+ .filter(chart => !filter.scope.excluded.includes(chart.id))
+ .map(chart => {
+ const layoutElement = layoutCharts.find(
+ layoutChart => layoutChart.meta.chartId === chart.id,
+ );
+ return (
+ layoutElement?.meta.sliceNameOverride ||
+ layoutElement?.meta.sliceName ||
+ layoutElement?.id
+ );
+ })
+ .filter(Boolean);
+ }
+
+ // top level tabs, charts excluded
+ // returns "TAB1, TAB2, CHART1"
+ if (topLevelTabs) {
+ const topLevelTabsInFullScope = [...filter.scope.rootPath];
+ const layoutChartElementsInTabsInScope = layoutCharts.filter(element =>
+ element.parents.some(parent =>
+ topLevelTabsInFullScope.includes(parent),
+ ),
+ );
+ filter.scope.excluded.forEach(chartId => {
+ const excludedIndex = topLevelTabsInFullScope.findIndex(tabId =>
+ layoutChartElementsInTabsInScope
+ .find(chart => chart.meta.chartId === chartId)
+ ?.parents.includes(tabId),
+ );
+ if (excludedIndex > -1) {
+ topLevelTabsInFullScope.splice(excludedIndex, 1);
+ }
+ });
+ const chartsInExcludedTabs = charts
Review comment:
Maybe add a comment `Here we handled charts that are in scope but belong to excluded tabs.`
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
[GitHub] [superset] michael-s-molina commented on a change in pull request #18874: feat(native-filters): Implement filter cards
Posted by GitBox <gi...@apache.org>.
michael-s-molina commented on a change in pull request #18874:
URL: https://github.com/apache/superset/pull/18874#discussion_r812899689
##########
File path: superset-frontend/src/dashboard/components/nativeFilters/FilterCard/useFilterScope.ts
##########
@@ -0,0 +1,144 @@
+/**
+ * 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 { Filter, t } from '@superset-ui/core';
+import { useSelector } from 'react-redux';
+import {
+ ChartsState,
+ Layout,
+ LayoutItem,
+ RootState,
+} from 'src/dashboard/types';
+import { DASHBOARD_ROOT_ID } from 'src/dashboard/util/constants';
+import { CHART_TYPE } from 'src/dashboard/util/componentTypes';
+import { useMemo } from 'react';
+
+const useCharts = () => {
+ const charts = useSelector<RootState, ChartsState>(state => state.charts);
+ return useMemo(() => Object.values(charts), [charts]);
+};
+
+export const useFilterScope = (filter: Filter) => {
+ const layout = useSelector<RootState, Layout>(
+ state => state.dashboardLayout.present,
+ );
+ const charts = useCharts();
+
+ return useMemo(() => {
+ let topLevelTabs: string[] | undefined;
+ if (layout[DASHBOARD_ROOT_ID].children[0].startsWith('TABS-')) {
+ topLevelTabs = layout[layout[DASHBOARD_ROOT_ID].children[0]].children;
+ }
+
+ // no charts in scope
+ if (filter.scope.rootPath.length === 0) {
+ return undefined;
+ }
+
+ // all charts in scope
+ // no charts excluded and no top level tabs
+ // OR no charts excluded and every top level tab is in rootPath
+ if (
+ filter.scope.excluded.length === 0 &&
+ (filter.scope.rootPath[0] === DASHBOARD_ROOT_ID ||
+ (topLevelTabs &&
+ topLevelTabs.every(topLevelTab =>
+ filter.scope.rootPath.includes(topLevelTab),
+ )))
+ ) {
+ return [t('All charts')];
+ }
+
+ // no charts excluded and not every top level tab in scope
+ // returns "TAB1, TAB2"
+ if (filter.scope.excluded.length === 0 && topLevelTabs) {
+ return filter.scope.rootPath.map(
+ tabId => layout[tabId].meta.text || layout[tabId].meta.defaultText,
+ );
+ }
+
+ const layoutCharts = Object.values(layout).filter(
+ layoutElement => layoutElement.type === CHART_TYPE,
+ );
+
+ // no top level tabs, charts excluded
+ // returns "CHART1, CHART2"
+ if (filter.scope.rootPath[0] === DASHBOARD_ROOT_ID) {
+ return charts
+ .filter(chart => !filter.scope.excluded.includes(chart.id))
+ .map(chart => {
+ const layoutElement = layoutCharts.find(
+ layoutChart => layoutChart.meta.chartId === chart.id,
+ );
+ return (
+ layoutElement?.meta.sliceNameOverride ||
+ layoutElement?.meta.sliceName ||
+ layoutElement?.id
+ );
+ })
+ .filter(Boolean);
+ }
+
+ // top level tabs, charts excluded
+ // returns "TAB1, TAB2, CHART1"
+ if (topLevelTabs) {
+ const topLevelTabsInFullScope = [...filter.scope.rootPath];
+ const layoutChartElementsInTabsInScope = layoutCharts.filter(element =>
+ element.parents.some(parent =>
+ topLevelTabsInFullScope.includes(parent),
+ ),
+ );
+ filter.scope.excluded.forEach(chartId => {
+ const excludedIndex = topLevelTabsInFullScope.findIndex(tabId =>
+ layoutChartElementsInTabsInScope
+ .find(chart => chart.meta.chartId === chartId)
+ ?.parents.includes(tabId),
+ );
+ if (excludedIndex > -1) {
+ topLevelTabsInFullScope.splice(excludedIndex, 1);
+ }
+ });
+ const chartsInExcludedTabs = charts
+ .filter(chart => !filter.scope.excluded.includes(chart.id))
+ .reduce((acc: LayoutItem[], chart) => {
+ const layoutChartElementInExcludedTab =
+ layoutChartElementsInTabsInScope.find(
+ element =>
+ element.meta.chartId === chart.id &&
+ element.parents.every(
+ parent => !topLevelTabsInFullScope.includes(parent),
+ ),
+ );
+ if (layoutChartElementInExcludedTab) {
+ acc.push(layoutChartElementInExcludedTab);
+ }
+ return acc;
+ }, []);
+ return topLevelTabsInFullScope
+ .map(tabId => layout[tabId].meta.text || layout[tabId].meta.defaultText)
+ .concat(
+ chartsInExcludedTabs.map(
+ chart =>
+ chart.meta.sliceNameOverride || chart.meta.sliceName || chart.id,
Review comment:
Maybe extract functions for dealing with the chart's and tab's names?
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
[GitHub] [superset] michael-s-molina commented on a change in pull request #18874: feat(native-filters): Implement filter cards
Posted by GitBox <gi...@apache.org>.
michael-s-molina commented on a change in pull request #18874:
URL: https://github.com/apache/superset/pull/18874#discussion_r812895550
##########
File path: superset-frontend/src/dashboard/components/nativeFilters/FilterCard/useFilterScope.ts
##########
@@ -0,0 +1,144 @@
+/**
+ * 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 { Filter, t } from '@superset-ui/core';
+import { useSelector } from 'react-redux';
+import {
+ ChartsState,
+ Layout,
+ LayoutItem,
+ RootState,
+} from 'src/dashboard/types';
+import { DASHBOARD_ROOT_ID } from 'src/dashboard/util/constants';
+import { CHART_TYPE } from 'src/dashboard/util/componentTypes';
+import { useMemo } from 'react';
+
+const useCharts = () => {
+ const charts = useSelector<RootState, ChartsState>(state => state.charts);
+ return useMemo(() => Object.values(charts), [charts]);
+};
+
+export const useFilterScope = (filter: Filter) => {
+ const layout = useSelector<RootState, Layout>(
+ state => state.dashboardLayout.present,
+ );
+ const charts = useCharts();
+
+ return useMemo(() => {
+ let topLevelTabs: string[] | undefined;
+ if (layout[DASHBOARD_ROOT_ID].children[0].startsWith('TABS-')) {
+ topLevelTabs = layout[layout[DASHBOARD_ROOT_ID].children[0]].children;
+ }
+
+ // no charts in scope
+ if (filter.scope.rootPath.length === 0) {
+ return undefined;
+ }
+
+ // all charts in scope
+ // no charts excluded and no top level tabs
+ // OR no charts excluded and every top level tab is in rootPath
+ if (
+ filter.scope.excluded.length === 0 &&
+ (filter.scope.rootPath[0] === DASHBOARD_ROOT_ID ||
+ (topLevelTabs &&
+ topLevelTabs.every(topLevelTab =>
+ filter.scope.rootPath.includes(topLevelTab),
+ )))
+ ) {
+ return [t('All charts')];
+ }
+
+ // no charts excluded and not every top level tab in scope
+ // returns "TAB1, TAB2"
+ if (filter.scope.excluded.length === 0 && topLevelTabs) {
+ return filter.scope.rootPath.map(
+ tabId => layout[tabId].meta.text || layout[tabId].meta.defaultText,
+ );
+ }
+
+ const layoutCharts = Object.values(layout).filter(
+ layoutElement => layoutElement.type === CHART_TYPE,
+ );
+
+ // no top level tabs, charts excluded
+ // returns "CHART1, CHART2"
+ if (filter.scope.rootPath[0] === DASHBOARD_ROOT_ID) {
+ return charts
+ .filter(chart => !filter.scope.excluded.includes(chart.id))
+ .map(chart => {
+ const layoutElement = layoutCharts.find(
+ layoutChart => layoutChart.meta.chartId === chart.id,
+ );
+ return (
+ layoutElement?.meta.sliceNameOverride ||
+ layoutElement?.meta.sliceName ||
+ layoutElement?.id
+ );
+ })
+ .filter(Boolean);
+ }
+
+ // top level tabs, charts excluded
+ // returns "TAB1, TAB2, CHART1"
+ if (topLevelTabs) {
+ const topLevelTabsInFullScope = [...filter.scope.rootPath];
Review comment:
Maybe add a comment like `We start assuming that all charts are in scope for all tabs in the root path.`
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
[GitHub] [superset] michael-s-molina commented on a change in pull request #18874: feat(native-filters): Implement filter cards
Posted by GitBox <gi...@apache.org>.
michael-s-molina commented on a change in pull request #18874:
URL: https://github.com/apache/superset/pull/18874#discussion_r812896683
##########
File path: superset-frontend/src/dashboard/components/nativeFilters/FilterCard/useFilterScope.ts
##########
@@ -0,0 +1,144 @@
+/**
+ * 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 { Filter, t } from '@superset-ui/core';
+import { useSelector } from 'react-redux';
+import {
+ ChartsState,
+ Layout,
+ LayoutItem,
+ RootState,
+} from 'src/dashboard/types';
+import { DASHBOARD_ROOT_ID } from 'src/dashboard/util/constants';
+import { CHART_TYPE } from 'src/dashboard/util/componentTypes';
+import { useMemo } from 'react';
+
+const useCharts = () => {
+ const charts = useSelector<RootState, ChartsState>(state => state.charts);
+ return useMemo(() => Object.values(charts), [charts]);
+};
+
+export const useFilterScope = (filter: Filter) => {
+ const layout = useSelector<RootState, Layout>(
+ state => state.dashboardLayout.present,
+ );
+ const charts = useCharts();
+
+ return useMemo(() => {
+ let topLevelTabs: string[] | undefined;
+ if (layout[DASHBOARD_ROOT_ID].children[0].startsWith('TABS-')) {
+ topLevelTabs = layout[layout[DASHBOARD_ROOT_ID].children[0]].children;
+ }
+
+ // no charts in scope
+ if (filter.scope.rootPath.length === 0) {
+ return undefined;
+ }
+
+ // all charts in scope
+ // no charts excluded and no top level tabs
+ // OR no charts excluded and every top level tab is in rootPath
+ if (
+ filter.scope.excluded.length === 0 &&
+ (filter.scope.rootPath[0] === DASHBOARD_ROOT_ID ||
+ (topLevelTabs &&
+ topLevelTabs.every(topLevelTab =>
+ filter.scope.rootPath.includes(topLevelTab),
+ )))
+ ) {
+ return [t('All charts')];
+ }
+
+ // no charts excluded and not every top level tab in scope
+ // returns "TAB1, TAB2"
+ if (filter.scope.excluded.length === 0 && topLevelTabs) {
+ return filter.scope.rootPath.map(
+ tabId => layout[tabId].meta.text || layout[tabId].meta.defaultText,
+ );
+ }
+
+ const layoutCharts = Object.values(layout).filter(
+ layoutElement => layoutElement.type === CHART_TYPE,
+ );
+
+ // no top level tabs, charts excluded
+ // returns "CHART1, CHART2"
+ if (filter.scope.rootPath[0] === DASHBOARD_ROOT_ID) {
+ return charts
+ .filter(chart => !filter.scope.excluded.includes(chart.id))
+ .map(chart => {
+ const layoutElement = layoutCharts.find(
+ layoutChart => layoutChart.meta.chartId === chart.id,
+ );
+ return (
+ layoutElement?.meta.sliceNameOverride ||
+ layoutElement?.meta.sliceName ||
+ layoutElement?.id
+ );
+ })
+ .filter(Boolean);
+ }
+
+ // top level tabs, charts excluded
+ // returns "TAB1, TAB2, CHART1"
+ if (topLevelTabs) {
+ const topLevelTabsInFullScope = [...filter.scope.rootPath];
+ const layoutChartElementsInTabsInScope = layoutCharts.filter(element =>
+ element.parents.some(parent =>
+ topLevelTabsInFullScope.includes(parent),
+ ),
+ );
+ filter.scope.excluded.forEach(chartId => {
Review comment:
Maybe add a comment like `Here we exclude the tabs that contain excluded charts`
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
[GitHub] [superset] michael-s-molina commented on a change in pull request #18874: feat(native-filters): Implement filter cards
Posted by GitBox <gi...@apache.org>.
michael-s-molina commented on a change in pull request #18874:
URL: https://github.com/apache/superset/pull/18874#discussion_r812879240
##########
File path: superset-frontend/src/dashboard/components/nativeFilters/FilterCard/ScopeRow.tsx
##########
@@ -0,0 +1,72 @@
+/**
+ * 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, { useMemo, useRef } from 'react';
+import { t } from '@superset-ui/core';
+import { Tooltip } from 'src/components/Tooltip';
+import { useFilterScope } from './useFilterScope';
+import {
+ Row,
+ RowLabel,
+ RowTruncationCount,
+ RowValue,
+ TooltipList,
+ TooltipTrigger,
+} from './Styles';
+import { useTruncation } from './useTruncation';
+import { FilterCardRowProps } from './types';
+
+export const ScopeRow = React.memo(({ filter }: FilterCardRowProps) => {
+ const scope = useFilterScope(filter);
+ const scopeRef = useRef<HTMLDivElement>(null);
+
+ const [elementsTruncated, hasHiddenElements] = useTruncation(scopeRef);
+ const tooltipText = useMemo(
+ () =>
+ elementsTruncated > 0 && scope ? (
+ <TooltipList>
+ {scope.map(val => (
+ <li>{val}</li>
+ ))}
+ </TooltipList>
+ ) : null,
+ [elementsTruncated, scope],
+ );
+
+ return Array.isArray(scope) && scope.length > 0 ? (
+ <Row>
+ <RowLabel>{t('Scope')}</RowLabel>
+ <Tooltip
+ title={tooltipText}
+ placement="bottom"
+ overlayClassName="filter-card-tooltip"
+ >
+ <TooltipTrigger>
+ <RowValue ref={scopeRef}>
+ {scope.map((element, index) =>
+ index === 0 ? <span>{element}</span> : <span>, {element}</span>,
Review comment:
Maybe move the comma calculation out?
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
[GitHub] [superset] michael-s-molina commented on a change in pull request #18874: feat(native-filters): Implement filter cards
Posted by GitBox <gi...@apache.org>.
michael-s-molina commented on a change in pull request #18874:
URL: https://github.com/apache/superset/pull/18874#discussion_r812877888
##########
File path: superset-frontend/src/dashboard/components/nativeFilters/FilterCard/ScopeRow.tsx
##########
@@ -0,0 +1,72 @@
+/**
+ * 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, { useMemo, useRef } from 'react';
+import { t } from '@superset-ui/core';
+import { Tooltip } from 'src/components/Tooltip';
+import { useFilterScope } from './useFilterScope';
+import {
+ Row,
+ RowLabel,
+ RowTruncationCount,
+ RowValue,
+ TooltipList,
+ TooltipTrigger,
+} from './Styles';
+import { useTruncation } from './useTruncation';
+import { FilterCardRowProps } from './types';
+
+export const ScopeRow = React.memo(({ filter }: FilterCardRowProps) => {
+ const scope = useFilterScope(filter);
+ const scopeRef = useRef<HTMLDivElement>(null);
+
+ const [elementsTruncated, hasHiddenElements] = useTruncation(scopeRef);
+ const tooltipText = useMemo(
+ () =>
+ elementsTruncated > 0 && scope ? (
+ <TooltipList>
+ {scope.map(val => (
+ <li>{val}</li>
+ ))}
+ </TooltipList>
+ ) : null,
+ [elementsTruncated, scope],
+ );
+
+ return Array.isArray(scope) && scope.length > 0 ? (
Review comment:
Maybe return instead of using a ternary operation? Avoids nesting.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
[GitHub] [superset] michael-s-molina commented on a change in pull request #18874: feat(native-filters): Implement filter cards
Posted by GitBox <gi...@apache.org>.
michael-s-molina commented on a change in pull request #18874:
URL: https://github.com/apache/superset/pull/18874#discussion_r812887928
##########
File path: superset-frontend/src/dashboard/components/nativeFilters/FilterCard/useFilterScope.ts
##########
@@ -0,0 +1,144 @@
+/**
+ * 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 { Filter, t } from '@superset-ui/core';
+import { useSelector } from 'react-redux';
+import {
+ ChartsState,
+ Layout,
+ LayoutItem,
+ RootState,
+} from 'src/dashboard/types';
+import { DASHBOARD_ROOT_ID } from 'src/dashboard/util/constants';
+import { CHART_TYPE } from 'src/dashboard/util/componentTypes';
+import { useMemo } from 'react';
+
+const useCharts = () => {
+ const charts = useSelector<RootState, ChartsState>(state => state.charts);
+ return useMemo(() => Object.values(charts), [charts]);
+};
+
+export const useFilterScope = (filter: Filter) => {
+ const layout = useSelector<RootState, Layout>(
+ state => state.dashboardLayout.present,
+ );
+ const charts = useCharts();
+
+ return useMemo(() => {
+ let topLevelTabs: string[] | undefined;
+ if (layout[DASHBOARD_ROOT_ID].children[0].startsWith('TABS-')) {
+ topLevelTabs = layout[layout[DASHBOARD_ROOT_ID].children[0]].children;
Review comment:
Maybe `const topElementId = layout[DASHBOARD_ROOT_ID].children[0];`?
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
[GitHub] [superset] michael-s-molina commented on a change in pull request #18874: feat(native-filters): Implement filter cards
Posted by GitBox <gi...@apache.org>.
michael-s-molina commented on a change in pull request #18874:
URL: https://github.com/apache/superset/pull/18874#discussion_r812887928
##########
File path: superset-frontend/src/dashboard/components/nativeFilters/FilterCard/useFilterScope.ts
##########
@@ -0,0 +1,144 @@
+/**
+ * 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 { Filter, t } from '@superset-ui/core';
+import { useSelector } from 'react-redux';
+import {
+ ChartsState,
+ Layout,
+ LayoutItem,
+ RootState,
+} from 'src/dashboard/types';
+import { DASHBOARD_ROOT_ID } from 'src/dashboard/util/constants';
+import { CHART_TYPE } from 'src/dashboard/util/componentTypes';
+import { useMemo } from 'react';
+
+const useCharts = () => {
+ const charts = useSelector<RootState, ChartsState>(state => state.charts);
+ return useMemo(() => Object.values(charts), [charts]);
+};
+
+export const useFilterScope = (filter: Filter) => {
+ const layout = useSelector<RootState, Layout>(
+ state => state.dashboardLayout.present,
+ );
+ const charts = useCharts();
+
+ return useMemo(() => {
+ let topLevelTabs: string[] | undefined;
+ if (layout[DASHBOARD_ROOT_ID].children[0].startsWith('TABS-')) {
+ topLevelTabs = layout[layout[DASHBOARD_ROOT_ID].children[0]].children;
Review comment:
Maybe `const topElement = layout[DASHBOARD_ROOT_ID].children[0];`?
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
[GitHub] [superset] michael-s-molina commented on a change in pull request #18874: feat(native-filters): Implement filter cards
Posted by GitBox <gi...@apache.org>.
michael-s-molina commented on a change in pull request #18874:
URL: https://github.com/apache/superset/pull/18874#discussion_r812882806
##########
File path: superset-frontend/src/dashboard/components/nativeFilters/FilterCard/index.tsx
##########
@@ -0,0 +1,57 @@
+/**
+ * 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, { useState } from 'react';
+import { Global } from '@emotion/react';
+import { useTheme } from '@superset-ui/core';
+import Popover from 'src/components/Popover';
+import { FilterCardContent } from './FilterCardContent';
+import { FilterCardProps } from './types';
+import { popoverStyle } from './Styles';
+
+export const FilterCard = ({
+ children,
+ filter,
+ getPopupContainer,
+ isVisible: externalIsVisible = true,
+}: FilterCardProps) => {
+ const theme = useTheme();
+ const [internalIsVisible, setInternalIsVisible] = useState(false);
+
+ return (
+ <>
+ <Global styles={popoverStyle(theme)} />
Review comment:
Move global styles outside to avoid duplication. Maybe to the main dashboard view?
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
[GitHub] [superset] codecov[bot] commented on pull request #18874: feat(native-filters): Implement filter cards
Posted by GitBox <gi...@apache.org>.
codecov[bot] commented on pull request #18874:
URL: https://github.com/apache/superset/pull/18874#issuecomment-1048923503
# [Codecov](https://codecov.io/gh/apache/superset/pull/18874?src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) Report
> Merging [#18874](https://codecov.io/gh/apache/superset/pull/18874?src=pr&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) (5b9791f) into [master](https://codecov.io/gh/apache/superset/commit/700829b74ae7093a3985b44a45376973a48eb1fe?el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) (700829b) will **decrease** coverage by `0.15%`.
> The diff coverage is `0.65%`.
[](https://codecov.io/gh/apache/superset/pull/18874?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation)
```diff
@@ Coverage Diff @@
## master #18874 +/- ##
==========================================
- Coverage 66.36% 66.21% -0.16%
==========================================
Files 1621 1633 +12
Lines 63057 63210 +153
Branches 6382 6409 +27
==========================================
+ Hits 41850 41852 +2
- Misses 19547 19698 +151
Partials 1660 1660
```
| Flag | Coverage Δ | |
|---|---|---|
| javascript | `51.02% <0.65%> (-0.24%)` | :arrow_down: |
Flags with carried forward coverage won't be shown. [Click here](https://docs.codecov.io/docs/carryforward-flags?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#carryforward-flags-in-the-pull-request-comment) to find out more.
| [Impacted Files](https://codecov.io/gh/apache/superset/pull/18874?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) | Coverage Δ | |
|---|---|---|
| [...ilters/FilterBar/FilterControls/FilterControls.tsx](https://codecov.io/gh/apache/superset/pull/18874/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvc3JjL2Rhc2hib2FyZC9jb21wb25lbnRzL25hdGl2ZUZpbHRlcnMvRmlsdGVyQmFyL0ZpbHRlckNvbnRyb2xzL0ZpbHRlckNvbnRyb2xzLnRzeA==) | `77.77% <ø> (ø)` | |
| [...nents/nativeFilters/FilterCard/DependenciesRow.tsx](https://codecov.io/gh/apache/superset/pull/18874/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvc3JjL2Rhc2hib2FyZC9jb21wb25lbnRzL25hdGl2ZUZpbHRlcnMvRmlsdGVyQ2FyZC9EZXBlbmRlbmNpZXNSb3cudHN4) | `0.00% <0.00%> (ø)` | |
| [...nts/nativeFilters/FilterCard/FilterCardContent.tsx](https://codecov.io/gh/apache/superset/pull/18874/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvc3JjL2Rhc2hib2FyZC9jb21wb25lbnRzL25hdGl2ZUZpbHRlcnMvRmlsdGVyQ2FyZC9GaWx0ZXJDYXJkQ29udGVudC50c3g=) | `0.00% <0.00%> (ø)` | |
| [...rd/components/nativeFilters/FilterCard/NameRow.tsx](https://codecov.io/gh/apache/superset/pull/18874/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvc3JjL2Rhc2hib2FyZC9jb21wb25lbnRzL25hdGl2ZUZpbHRlcnMvRmlsdGVyQ2FyZC9OYW1lUm93LnRzeA==) | `0.00% <0.00%> (ø)` | |
| [...d/components/nativeFilters/FilterCard/ScopeRow.tsx](https://codecov.io/gh/apache/superset/pull/18874/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvc3JjL2Rhc2hib2FyZC9jb21wb25lbnRzL25hdGl2ZUZpbHRlcnMvRmlsdGVyQ2FyZC9TY29wZVJvdy50c3g=) | `0.00% <0.00%> (ø)` | |
| [...oard/components/nativeFilters/FilterCard/Styles.ts](https://codecov.io/gh/apache/superset/pull/18874/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvc3JjL2Rhc2hib2FyZC9jb21wb25lbnRzL25hdGl2ZUZpbHRlcnMvRmlsdGVyQ2FyZC9TdHlsZXMudHM=) | `0.00% <0.00%> (ø)` | |
| [...nativeFilters/FilterCard/TooltipWithTruncation.tsx](https://codecov.io/gh/apache/superset/pull/18874/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvc3JjL2Rhc2hib2FyZC9jb21wb25lbnRzL25hdGl2ZUZpbHRlcnMvRmlsdGVyQ2FyZC9Ub29sdGlwV2l0aFRydW5jYXRpb24udHN4) | `0.00% <0.00%> (ø)` | |
| [...rd/components/nativeFilters/FilterCard/TypeRow.tsx](https://codecov.io/gh/apache/superset/pull/18874/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvc3JjL2Rhc2hib2FyZC9jb21wb25lbnRzL25hdGl2ZUZpbHRlcnMvRmlsdGVyQ2FyZC9UeXBlUm93LnRzeA==) | `0.00% <0.00%> (ø)` | |
| [...oard/components/nativeFilters/FilterCard/index.tsx](https://codecov.io/gh/apache/superset/pull/18874/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvc3JjL2Rhc2hib2FyZC9jb21wb25lbnRzL25hdGl2ZUZpbHRlcnMvRmlsdGVyQ2FyZC9pbmRleC50c3g=) | `0.00% <0.00%> (ø)` | |
| [.../nativeFilters/FilterCard/useFilterDependencies.ts](https://codecov.io/gh/apache/superset/pull/18874/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvc3JjL2Rhc2hib2FyZC9jb21wb25lbnRzL25hdGl2ZUZpbHRlcnMvRmlsdGVyQ2FyZC91c2VGaWx0ZXJEZXBlbmRlbmNpZXMudHM=) | `0.00% <0.00%> (ø)` | |
| ... and [5 more](https://codecov.io/gh/apache/superset/pull/18874/diff?src=pr&el=tree-more&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) | |
------
[Continue to review full report at Codecov](https://codecov.io/gh/apache/superset/pull/18874?src=pr&el=continue&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation).
> **Legend** - [Click here to learn more](https://docs.codecov.io/docs/codecov-delta?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation)
> `Δ = absolute <relative> (impact)`, `ø = not affected`, `? = missing data`
> Powered by [Codecov](https://codecov.io/gh/apache/superset/pull/18874?src=pr&el=footer&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation). Last update [700829b...5b9791f](https://codecov.io/gh/apache/superset/pull/18874?src=pr&el=lastupdated&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation). Read the [comment docs](https://docs.codecov.io/docs/pull-request-comments?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation).
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
[GitHub] [superset] michael-s-molina commented on a change in pull request #18874: feat(native-filters): Implement filter cards
Posted by GitBox <gi...@apache.org>.
michael-s-molina commented on a change in pull request #18874:
URL: https://github.com/apache/superset/pull/18874#discussion_r812882806
##########
File path: superset-frontend/src/dashboard/components/nativeFilters/FilterCard/index.tsx
##########
@@ -0,0 +1,57 @@
+/**
+ * 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, { useState } from 'react';
+import { Global } from '@emotion/react';
+import { useTheme } from '@superset-ui/core';
+import Popover from 'src/components/Popover';
+import { FilterCardContent } from './FilterCardContent';
+import { FilterCardProps } from './types';
+import { popoverStyle } from './Styles';
+
+export const FilterCard = ({
+ children,
+ filter,
+ getPopupContainer,
+ isVisible: externalIsVisible = true,
+}: FilterCardProps) => {
+ const theme = useTheme();
+ const [internalIsVisible, setInternalIsVisible] = useState(false);
+
+ return (
+ <>
+ <Global styles={popoverStyle(theme)} />
Review comment:
Move `FilterCard` outside to avoid duplication. Maybe to the main dashboard view?
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
[GitHub] [superset] michael-s-molina commented on a change in pull request #18874: feat(native-filters): Implement filter cards
Posted by GitBox <gi...@apache.org>.
michael-s-molina commented on a change in pull request #18874:
URL: https://github.com/apache/superset/pull/18874#discussion_r812873957
##########
File path: superset-frontend/src/dashboard/components/nativeFilters/FilterCard/DependenciesRow.tsx
##########
@@ -0,0 +1,126 @@
+/**
+ * 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, useMemo, useRef } from 'react';
+import { useDispatch } from 'react-redux';
+import { css, t, useTheme } from '@superset-ui/core';
+import { setDirectPathToChild } from 'src/dashboard/actions/dashboardState';
+import Icons from 'src/components/Icons';
+import { Tooltip } from 'src/components/Tooltip';
+import {
+ DependencyItem,
+ Row,
+ RowLabel,
+ RowTruncationCount,
+ RowValue,
+ TooltipList,
+ TooltipTrigger,
+} from './Styles';
+import { useFilterDependencies } from './useFilterDependencies';
+import { useTruncation } from './useTruncation';
+import { DependencyValueProps, FilterCardRowProps } from './types';
+
+const DependencyValue = ({ dependency, label }: DependencyValueProps) => {
+ const dispatch = useDispatch();
+ const handleClick = useCallback(() => {
+ dispatch(setDirectPathToChild([dependency.id]));
+ }, [dependency.id, dispatch]);
+ return (
+ <DependencyItem role="button" onClick={handleClick} tabIndex={0}>
+ {label}
+ </DependencyItem>
+ );
+};
+
+export const DependenciesRow = React.memo(({ filter }: FilterCardRowProps) => {
+ const dependencies = useFilterDependencies(filter);
+ const dependenciesRef = useRef<HTMLDivElement>(null);
+ const [elementsTruncated, hasHiddenElements] = useTruncation(dependenciesRef);
+ const theme = useTheme();
+
+ const tooltipText = useMemo(
+ () =>
+ elementsTruncated > 0 && dependencies ? (
+ <TooltipList>
+ {dependencies.map(dependency => (
+ <li>
+ <DependencyValue
+ dependency={dependency}
+ label={dependency.name}
+ />
+ </li>
+ ))}
+ </TooltipList>
+ ) : null,
+ [elementsTruncated, dependencies],
+ );
+
+ return Array.isArray(dependencies) && dependencies.length > 0 ? (
+ <Row>
+ <RowLabel
+ css={css`
+ display: inline-flex;
+ align-items: center;
+ `}
+ >
+ Dependent on{' '}
+ <Tooltip
+ title={t(
+ 'Filter only displays values relevant to selections made in other filters.',
+ )}
+ placement="bottom"
+ overlayClassName="filter-card-tooltip"
+ >
+ <Icons.Info
+ iconSize="s"
+ iconColor={theme.colors.grayscale.light1}
+ css={css`
+ margin-left: ${theme.gridUnit}px;
+ `}
+ />
+ </Tooltip>
+ </RowLabel>
+ <Tooltip
+ overlayClassName="filter-card-tooltip"
+ title={tooltipText}
+ placement="bottom"
+ >
+ <TooltipTrigger>
+ <RowValue ref={dependenciesRef}>
+ {dependencies.map((dependency, index) =>
+ index === 0 ? (
+ <DependencyValue
+ dependency={dependency}
+ label={dependency.name}
Review comment:
Move the check to the label only?
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org