From 2e66d2d89e1e4a3c7b31a43b62d0b0ec97165dd4 Mon Sep 17 00:00:00 2001
From: Brent Bovenzi <brent@astronomer.io>
Date: Thu, 29 Sep 2022 14:14:45 -0400
Subject: [PATCH] add icon legend to datasets graph (#26781)

---
 .../www/static/js/datasets/Graph/Legend.tsx   | 76 +++++++++++++++++++
 .../www/static/js/datasets/Graph/index.tsx    | 37 ++++-----
 2 files changed, 90 insertions(+), 23 deletions(-)
 create mode 100644 airflow/www/static/js/datasets/Graph/Legend.tsx

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 00000000000000..1884a6aa4ce333
--- /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 49df5bd7d4a5f1..c49c9020819dcf 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>