You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@airflow.apache.org by ep...@apache.org on 2022/10/18 13:10:35 UTC
[airflow] 19/41: add icon legend to datasets graph (#26781)
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 <br...@astronomer.io>
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>