From faefb29da7125ce78a6c75288a15243b4bceb57b Mon Sep 17 00:00:00 2001
From: agatha197 <kimsujin@lablup.com>
Date: Thu, 31 Oct 2024 12:48:03 +0900
Subject: [PATCH] feat: add `AliasedImageDoubleTags`

---
 .../src/components/AliasedImageDoubleTags.tsx | 68 +++++++++++++++++++
 1 file changed, 68 insertions(+)
 create mode 100644 react/src/components/AliasedImageDoubleTags.tsx

diff --git a/react/src/components/AliasedImageDoubleTags.tsx b/react/src/components/AliasedImageDoubleTags.tsx
new file mode 100644
index 0000000000..4183facd73
--- /dev/null
+++ b/react/src/components/AliasedImageDoubleTags.tsx
@@ -0,0 +1,68 @@
+import { useBackendAIImageMetaData } from '../hooks';
+import DoubleTag, { DoubleTagObjectValue } from './DoubleTag';
+import Flex from './Flex';
+import TextHighlighter from './TextHighlighter';
+import { AliasedImageDoubleTagsFragment$key } from './__generated__/AliasedImageDoubleTagsFragment.graphql';
+import graphql from 'babel-plugin-relay/macro';
+import _ from 'lodash';
+import React from 'react';
+import { useFragment } from 'react-relay';
+
+interface AliasedImageDoubleTagsProps extends DoubleTagObjectValue {
+  imageFrgmt?: AliasedImageDoubleTagsFragment$key | null;
+  highlightKeyword?: string;
+}
+
+const AliasedImageDoubleTags: React.FC<AliasedImageDoubleTagsProps> = ({
+  imageFrgmt,
+  highlightKeyword,
+  ...doubleTagProps
+}) => {
+  const images = useFragment(
+    graphql`
+      fragment AliasedImageDoubleTagsFragment on ImageNode {
+        tags @since(version: "24.09.1.") {
+          key
+          value
+        }
+      }
+    `,
+    imageFrgmt,
+  );
+  const [, { tagAlias }] = useBackendAIImageMetaData();
+
+  return (
+    <Flex direction="row" align="start" gap={'xxs'}>
+      {_.map(images?.tags, (tag: { key: string; value: string }) => (
+        <DoubleTag
+          key={tag.key}
+          values={[
+            {
+              label: (
+                <TextHighlighter keyword={highlightKeyword} key={tag.key}>
+                  {tagAlias(tag.key)}
+                </TextHighlighter>
+              ),
+              color: _.includes(tag.key, 'customized_')
+                ? 'cyan'
+                : doubleTagProps.color,
+            },
+            {
+              label: (
+                <TextHighlighter keyword={highlightKeyword} key={tag.value}>
+                  {tag.value}
+                </TextHighlighter>
+              ),
+              color: _.includes(tag.key, 'customized_')
+                ? 'cyan'
+                : doubleTagProps.color,
+            },
+          ]}
+          {...doubleTagProps}
+        />
+      ))}
+    </Flex>
+  );
+};
+
+export default AliasedImageDoubleTags;