This is an automated email from the ASF dual-hosted git repository. ephraimanierobi pushed a commit to branch v2-4-test in repository https://gitbox.apache.org/repos/asf/airflow.git
commit 4fe9eef773400a778ba3b77d95e81ac6ce4d9361 Author: Brent Bovenzi <[email protected]> AuthorDate: Thu Sep 29 14:14:45 2022 -0400 add icon legend to datasets graph (#26781) (cherry picked from commit 2e66d2d89e1e4a3c7b31a43b62d0b0ec97165dd4) --- airflow/www/static/js/datasets/Graph/Legend.tsx | 76 +++++++++++++++++++++++++ airflow/www/static/js/datasets/Graph/index.tsx | 37 +++++------- 2 files changed, 90 insertions(+), 23 deletions(-) diff --git a/airflow/www/static/js/datasets/Graph/Legend.tsx b/airflow/www/static/js/datasets/Graph/Legend.tsx new file mode 100644 index 0000000000..1884a6aa4c --- /dev/null +++ b/airflow/www/static/js/datasets/Graph/Legend.tsx @@ -0,0 +1,76 @@ +/*! + * 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 from 'react'; +import { + Flex, Box, IconButton, Text, +} from '@chakra-ui/react'; +import { + MdOutlineZoomOutMap, MdFilterCenterFocus, MdOutlineAccountTree, +} from 'react-icons/md'; +import { HiDatabase } from 'react-icons/hi'; + +interface Props { + zoom: any; + center: () => void; +} + +const Legend = ({ zoom, center }: Props) => ( + <Flex justifyContent="space-between" alignItems="center"> + <Box> + <IconButton + onClick={zoom.reset} + fontSize="2xl" + m={2} + title="Reset zoom" + aria-label="Reset zoom" + icon={<MdOutlineZoomOutMap />} + /> + <IconButton + onClick={center} + fontSize="2xl" + m={2} + title="Center" + aria-label="Center" + icon={<MdFilterCenterFocus />} + /> + </Box> + <Box + backgroundColor="white" + p={2} + borderColor="gray.200" + borderLeftWidth={1} + borderTopWidth={1} + > + <Text>Legend</Text> + <Flex> + <Flex mr={2} alignItems="center"> + <MdOutlineAccountTree size="16px" /> + <Text ml={1}>DAG</Text> + </Flex> + <Flex alignItems="center"> + <HiDatabase size="16px" /> + <Text ml={1}>Dataset</Text> + </Flex> + </Flex> + </Box> + </Flex> +); + +export default Legend; diff --git a/airflow/www/static/js/datasets/Graph/index.tsx b/airflow/www/static/js/datasets/Graph/index.tsx index 49df5bd7d4..c49c902081 100644 --- a/airflow/www/static/js/datasets/Graph/index.tsx +++ b/airflow/www/static/js/datasets/Graph/index.tsx @@ -18,15 +18,16 @@ */ import React, { useState, useEffect, RefObject } from 'react'; -import { Box, IconButton, Spinner } from '@chakra-ui/react'; +import { Box, Spinner } from '@chakra-ui/react'; import { Zoom } from '@visx/zoom'; -import { MdOutlineZoomOutMap, MdFilterCenterFocus } from 'react-icons/md'; +import { Group } from '@visx/group'; import { debounce } from 'lodash'; import { useDatasetDependencies } from 'src/api'; import Node from './Node'; import Edge from './Edge'; +import Legend from './Legend'; interface Props { onSelect: (datasetId: string) => void; @@ -117,28 +118,18 @@ const Graph = ({ onSelect, selectedUri }: Props) => { ))} </g> </g> + <Group top={height - 50} left={0} height={50} width={width}> + <foreignObject width={width} height={50}> + <Legend + zoom={zoom} + center={() => zoom.translateTo({ + x: (width - (data.width ?? 0)) / 2, + y: (height - (data.height ?? 0)) / 2, + })} + /> + </foreignObject> + </Group> </svg> - <Box> - <IconButton - onClick={zoom.reset} - fontSize="2xl" - m={2} - title="Reset zoom" - aria-label="Reset zoom" - icon={<MdOutlineZoomOutMap />} - /> - <IconButton - onClick={() => zoom.translateTo({ - x: (width - (data.width ?? 0)) / 2, - y: (height - (data.height ?? 0)) / 2, - })} - fontSize="2xl" - m={2} - title="Center" - aria-label="Center" - icon={<MdFilterCenterFocus />} - /> - </Box> </Box> )} </Zoom>
