From 2e9233d6fe3201e40d7c0f5508215542f63134f8 Mon Sep 17 00:00:00 2001
From: Kyle Conroy <kyleconroy@gmail.com>
Date: Mon, 25 Nov 2024 09:02:52 -0500
Subject: [PATCH] custom API icons

Co-authored-by: Jennifer Kotler <jkotler@stsci.edu>
---
 jdaviz/app.py                                 |   4 +-
 jdaviz/app.vue                                |   2 +-
 jdaviz/components/data_menu_add.vue           |   3 +-
 jdaviz/components/hover_api_hint.vue          |  32 ++---
 .../default/plugins/data_menu/data_menu.vue   |   2 +
 jdaviz/data/icons/api.svg                     | 105 ++++++++++++++
 jdaviz/data/icons/api_lock.svg                | 136 ++++++++++++++++++
 7 files changed, 262 insertions(+), 22 deletions(-)
 create mode 100644 jdaviz/data/icons/api.svg
 create mode 100644 jdaviz/data/icons/api_lock.svg

diff --git a/jdaviz/app.py b/jdaviz/app.py
index 526a8e6a1f..7fd931a7f4 100644
--- a/jdaviz/app.py
+++ b/jdaviz/app.py
@@ -232,7 +232,9 @@ class ApplicationState(State):
         'radialtocheck': read_icon(os.path.join(ICON_DIR, 'radialtocheck.svg'), 'svg+xml'),
         'checktoradial': read_icon(os.path.join(ICON_DIR, 'checktoradial.svg'), 'svg+xml'),
         'nuer': read_icon(os.path.join(ICON_DIR, 'right-east.svg'), 'svg+xml'),
-        'nuel': read_icon(os.path.join(ICON_DIR, 'left-east.svg'), 'svg+xml')
+        'nuel': read_icon(os.path.join(ICON_DIR, 'left-east.svg'), 'svg+xml'),
+        'api': read_icon(os.path.join(ICON_DIR, 'api.svg'), 'svg+xml'),
+        'api-lock': read_icon(os.path.join(ICON_DIR, 'api_lock.svg'), 'svg+xml'),
     }, docstring="Custom application icons")
 
     viewer_icons = DictCallbackProperty({}, docstring="Indexed icons (numbers) for viewers across the app")  # noqa
diff --git a/jdaviz/app.vue b/jdaviz/app.vue
index 9c7152f65c..3a529d5123 100644
--- a/jdaviz/app.vue
+++ b/jdaviz/app.vue
@@ -57,7 +57,7 @@
         </j-tooltip>
         <j-tooltip v-if="state.show_toolbar_buttons && checkNotebookContext()" tipid="app-api-hints">
           <v-btn icon @click="state.show_api_hints = !state.show_api_hints" :class="{active : state.show_api_hints}">
-            <v-icon medium style="padding-top: 2px">mdi-code-tags</v-icon>
+            <img :src="state.icons['api']" width="24" class="invert-if-dark" style="opacity: 1.0"/>
           </v-btn>
         </j-tooltip>
         <j-tooltip v-if="state.show_toolbar_buttons" tipid="app-snackbar-history">
diff --git a/jdaviz/components/data_menu_add.vue b/jdaviz/components/data_menu_add.vue
index 2d41844281..21612b869e 100644
--- a/jdaviz/components/data_menu_add.vue
+++ b/jdaviz/components/data_menu_add.vue
@@ -66,6 +66,7 @@
         v-if="api_hints_enabled"
         :hover_api_hint.sync="hover_api_hint"
         :lock_hover_api_hint.sync="lock_hover_api_hint"
+        :icons="icons"
       />
     </v-list>
   </v-menu>
@@ -80,6 +81,6 @@ module.exports = {
         lock_hover_api_hint: false,
       }
     },
-  props: ['dataset_items', 'subset_tools', 'loaded_n_data', 'api_hints_enabled'],
+  props: ['dataset_items', 'subset_tools', 'loaded_n_data', 'api_hints_enabled', 'icons'],
 };
 </script>
\ No newline at end of file
diff --git a/jdaviz/components/hover_api_hint.vue b/jdaviz/components/hover_api_hint.vue
index 59fba111d8..5bf9e8a0a0 100644
--- a/jdaviz/components/hover_api_hint.vue
+++ b/jdaviz/components/hover_api_hint.vue
@@ -6,28 +6,22 @@
         {{ hover_api_hint }}
         </span>
     </v-list-item-content>
-    <v-list-item-action>
+    <v-list-item-action style="margin-right: -8px">
       <j-tooltip
         tooltipcontent="toggle whether API hints persist after hovering to allow for copying text"
       >
-        <v-badge
-          overlap
-          bottom
-          color="#007BA1"
-          :icon="lock_hover_api_hint ? 'mdi-lock-outline' : 'mdi-lock-open-outline'"
+        <v-btn
+          small
+          text
+          width="24"
+          :style="lock_hover_api_hint ? 'background-color: #c7510996 !important' : null"
+          @click="(e) => {e.stopPropagation(); $emit('update:lock_hover_api_hint', !lock_hover_api_hint); $emit('update:hover_api_hint', '')}"
         >
-          <v-btn
-            icon
-            small
-            @click="(e) => {e.stopPropagation(); $emit('update:lock_hover_api_hint', !lock_hover_api_hint); $emit('update:hover_api_hint', '')}"
-          >
-            <v-icon
-              :color="lock_hover_api_hint ? '#007BA1' : null"
-            >
-              mdi-code-tags
-            </v-icon>
-          </v-btn>
-        </v-badge>
+          <img
+            :src="icons['api-lock']"
+            width="20"
+            class="invert-if-dark"/>
+        </v-btn>
       </j-tooltip>
     </v-list-item-action>
   </v-list-item>
@@ -35,6 +29,6 @@
 
 <script>
   module.exports = {
-    props: ['hover_api_hint', 'lock_hover_api_hint'],
+    props: ['hover_api_hint', 'lock_hover_api_hint', 'icons'],
   };
 </script>
\ No newline at end of file
diff --git a/jdaviz/configs/default/plugins/data_menu/data_menu.vue b/jdaviz/configs/default/plugins/data_menu/data_menu.vue
index 686e1164d5..762efce4b5 100644
--- a/jdaviz/configs/default/plugins/data_menu/data_menu.vue
+++ b/jdaviz/configs/default/plugins/data_menu/data_menu.vue
@@ -141,6 +141,7 @@
                   :subset_tools="subset_tools"
                   :loaded_n_data="loaded_n_data"
                   :api_hints_enabled="api_hints_enabled"
+                  :icons="icons"
                   @add-data="(data_label) => {add_data_to_viewer({data_label: data_label})}"
                   @create-subset="(subset_type) => {create_subset({subset_type: subset_type}); data_menu_open = false}"
                 >
@@ -208,6 +209,7 @@
               v-if="api_hints_enabled" 
               :hover_api_hint.sync="hover_api_hint" 
               :lock_hover_api_hint.sync="lock_hover_api_hint" 
+              :icons="icons"
             /> 
             <v-list-item class="dm-footer" v-if="loaded_n_data > 0">
               <v-list-item-content style="display: inline-block">
diff --git a/jdaviz/data/icons/api.svg b/jdaviz/data/icons/api.svg
new file mode 100644
index 0000000000..4955459540
--- /dev/null
+++ b/jdaviz/data/icons/api.svg
@@ -0,0 +1,105 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 66.6 47">
+  <defs>
+    <style>
+      .cls-1, .cls-2, .cls-3, .cls-4, .cls-5, .cls-6, .cls-7, .cls-8, .cls-9, .cls-10 {
+        fill: #221f20;
+      }
+
+      .cls-1, .cls-2, .cls-9 {
+        font-size: 12px;
+      }
+
+      .cls-11 {
+        fill: #010101;
+      }
+
+      .cls-2, .cls-3, .cls-7, .cls-12 {
+        font-family: PTMono-Bold, 'PT Mono';
+        font-weight: 700;
+      }
+
+      .cls-3, .cls-5, .cls-6, .cls-10 {
+        font-size: 25px;
+      }
+
+      .cls-13, .cls-9 {
+        font-family: HighwayGothic, 'Highway Gothic';
+      }
+
+      .cls-14 {
+        fill: #e79dbf;
+      }
+
+      .cls-5 {
+        font-family: HiraKakuStd-W8-83pv-RKSJ-H, 'Hiragino Kaku Gothic Std';
+      }
+
+      .cls-6 {
+        font-family: BMDoHyeon-OTF-KSCpc-EUC-H, 'BM Dohyeon';
+      }
+
+      .cls-7 {
+        font-size: 7px;
+      }
+
+      .cls-8 {
+        font-size: 32px;
+      }
+
+      .cls-8, .cls-10 {
+        font-family: PatuaOne-Regular, 'Patua One';
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.7.2, SVG Export Plug-In . SVG Version: 1.2.0 Build 154)  -->
+  <g>
+    <g id="Layer_1">
+      <g id="Kgt5J8.tif">
+        <image id="Layer_0" width="62" height="62" transform="translate(459.8 40.5) scale(.5)" xlink:href="api-1.png"/>
+      </g>
+      <g id="w2i81C.tif">
+        <image id="Layer_0-2" data-name="Layer_0" width="50" height="60" transform="translate(405.8 42) scale(.5)" xlink:href="api-2.png"/>
+      </g>
+      <text class="cls-9" transform="translate(282.2 -60.3)"><tspan x="0" y="0">&lt;API&gt;</tspan></text>
+      <text class="cls-1" transform="translate(346 -62.7)"><tspan class="cls-13" x="0" y="0">&lt;</tspan><tspan class="cls-12" x="7" y="0">API</tspan><tspan class="cls-13" x="28.6" y="0">&gt;</tspan></text>
+      <text class="cls-2" transform="translate(445.7 -23.4)"><tspan x="0" y="0">API</tspan></text>
+      <text class="cls-1" transform="translate(339.2 -30.3)"><tspan class="cls-13" x="0" y="0">&lt;</tspan><tspan class="cls-12" x="7" y="0">api</tspan><tspan class="cls-13" x="28.6" y="0">&gt;</tspan></text>
+      <text class="cls-2" transform="translate(364.8 -11.9)"><tspan x="0" y="0">api</tspan></text>
+      <g id="EOJqSm.tif">
+        <image id="Layer_0-3" data-name="Layer_0" width="102" height="88" transform="translate(403.8 241) scale(.5)" xlink:href="api-3.png"/>
+      </g>
+      <path class="cls-11" d="M468.3-15l4.6-4.6-4.6-4.6,1.4-1.4,6,6-6,6-1.4-1.4"/>
+      <path class="cls-11" d="M534.5-50.5v15.5h6.2v-3.1h-3.1v-9.3h3.1v-3.1h-6.2M565.6-45.9v18.6c0,1.7-1.4,3.1-3.1,3.1h-24.9c-1.7,0-3.1-1.4-3.1-3.1v-4.7h3.1v4.7h24.9v-18.6h0v-3.1h0c1.7,0,3.1,1.4,3.1,3.1Z"/>
+      <path class="cls-11" d="M688.4,7v18.6c0,1.7-1.4,3.1-3.1,3.1h-24.9c-1.7,0-3.1-1.4-3.1-3.1v-4.7h3.1v4.7h24.9V7h0v-3.1h0c1.7,0,3.1,1.4,3.1,3.1Z"/>
+      <polygon class="cls-11" points="445 -26.8 440.4 -31.4 445 -36 443.6 -37.4 437.6 -31.4 443.6 -25.4 445 -26.8"/>
+      <rect class="cls-14" x="557.1" y="8.3" width="22.6" height="20.7"/>
+      <text class="cls-7" transform="translate(490.6 11.7)"><tspan x="0" y="0">api</tspan></text>
+      <text class="cls-3" transform="translate(624.8 -57.9)"><tspan x="0" y="0">api</tspan></text>
+      <text class="cls-7" transform="translate(541.3 -40.6)"><tspan x="0" y="0">api</tspan></text>
+      <polyline class="cls-11" points="486.9 .7 486.9 6.2 489.1 6.2 489.1 5.1 488 5.1 488 1.8 489.1 1.8 489.1 .7 486.9 .7"/>
+      <polyline class="cls-11" points="507.1 18.1 507.1 12.6 504.9 12.6 504.9 13.7 506 13.7 506 17 504.9 17 504.9 18.1 507.1 18.1"/>
+      <text class="cls-7" transform="translate(598.5 -10.6)"><tspan x="0" y="0">api</tspan></text>
+      <polyline class="cls-11" points="594.8 -15.3 594.8 -9.8 597 -9.8 597 -10.9 595.9 -10.9 595.9 -14.2 597 -14.2 597 -15.3 594.8 -15.3"/>
+      <polyline class="cls-11" points="615 -9.8 615 -15.3 612.8 -15.3 612.8 -14.2 613.9 -14.2 613.9 -10.9 612.8 -10.9 612.8 -9.8 615 -9.8"/>
+      <polyline class="cls-11" points="556.8 -38.1 553.7 -38.1 553.7 -35 559.9 -35 559.9 -50.5 553.7 -50.5 553.7 -47.4 556.8 -47.4 556.8 -38.1"/>
+      <polyline class="cls-11" points="673.3 -47.9 670.2 -47.9 670.2 -44.1 676.4 -44.1 676.4 -85.3 670.2 -85.3 670.2 -81.7 673.3 -81.7 673.3 -52.3"/>
+      <polyline class="cls-11" points="621.9 -81.5 625 -81.5 625 -85.3 618.7 -85.3 618.7 -44.1 625 -44.1 625 -47.7 621.9 -47.7 621.9 -77.1"/>
+      <text class="cls-3" transform="translate(194.8 81.9)"><tspan x="0" y="0">api</tspan></text>
+      <text class="cls-10" transform="translate(181.4 52.4)"><tspan x="0" y="0">API</tspan></text>
+      <g>
+        <path class="cls-4" d="M11.6,19.5c0-.3,0-.7,0-1.1,2.1-1.1,4.3-1.7,6.6-1.7s4.1.4,5.1,1.3c1,.9,1.5,2.4,1.5,4.5v7.1c.8.2,1.4.3,1.8.6v2.9c-1.1.5-2.7.8-4.8.8-.2-.6-.4-1.3-.6-2.1-1,1.4-2.7,2.1-5.2,2.1s-2.8-.4-3.8-1.3-1.6-2-1.6-3.5.5-2.7,1.5-3.5c1-.9,2.5-1.3,4.4-1.3h3.6v-1.6c0-1.7-.9-2.6-2.8-2.6s-1.3,0-1.7.2c0,.9-.2,1.6-.4,2.2h-3.3c-.4-.8-.6-1.8-.6-3ZM17.6,30.5c1.1,0,2-.3,2.7-1v-2.7h-2.3c-1.6,0-2.4.6-2.4,1.8s.2,1,.5,1.4c.3.4.8.5,1.5.5Z"/>
+        <path class="cls-4" d="M27.9,17c1.2-.3,2.3-.4,3.3-.4s1.8,0,2.4,0v1.6c1.5-1,3.1-1.6,4.7-1.6s3.8.6,4.8,1.9c1,1.3,1.5,3.4,1.5,6.3s-.2,3-.7,4.1c-.5,1.2-1.1,2.1-1.9,2.8-1.5,1.3-3.3,2-5.4,2s-1.8,0-2.6-.3v2.9c1.3.4,2.1.8,2.5,1.2l-.3,2.6h-8.3l-.3-2.6c.3-.4.9-.8,1.8-1.1v-15.9c-.8-.3-1.4-.6-1.8-1.1l.3-2.6ZM36.3,30.5c1.1,0,2-.5,2.6-1.5.6-1,1-2.3,1-4.1s-.2-2.9-.5-3.6c-.4-.6-1-1-1.9-1-1.4,0-2.5.3-3.4,1v8.8c.7.2,1.4.3,2.3.3Z"/>
+        <path class="cls-4" d="M46.8,17c1.2-.3,2.4-.4,3.5-.4s2,0,2.7,0v13.2c.9.3,1.5.7,1.8,1.1l-.3,2.6h-7.6l-.3-2.6c.3-.4.9-.8,1.8-1.1v-9.2c-.8-.3-1.4-.6-1.8-1.1l.3-2.6ZM50.6,14.7c-1.8,0-2.8-.8-2.8-2.5s.9-2.5,2.8-2.5,2.8.8,2.8,2.5-.9,2.5-2.8,2.5Z"/>
+      </g>
+      <text class="cls-8" transform="translate(-79.1 20.5)"><tspan x="0" y="0">api</tspan></text>
+      <text class="cls-6" transform="translate(160.6 22.6)"><tspan x="0" y="0">api</tspan></text>
+      <text class="cls-5" transform="translate(82.4 -18.9)"><tspan x="0" y="0">API</tspan></text>
+      <polyline class="cls-11" points="59.9 40.1 55.8 40.1 55.8 44.9 64 44.9 64 3.7 55.8 3.7 55.8 6.3 59.9 6.3 59.9 36.7"/>
+      <polyline class="cls-11" points="7 6.5 11.1 6.5 11.1 3.7 2.9 3.7 2.9 44.9 11.1 44.9 11.1 40.3 7 40.3 7 11.9"/>
+      <text class="cls-3" transform="translate(7.8 -51.5)"><tspan x="0" y="0">api</tspan></text>
+      <polyline class="cls-11" points="56.2 -41.6 53.1 -41.6 53.1 -37.8 59.3 -37.8 59.3 -79 53.1 -79 53.1 -75.4 56.2 -75.4 56.2 -46"/>
+      <polyline class="cls-11" points="4.8 -75.2 7.9 -75.2 7.9 -79 1.7 -79 1.7 -37.8 7.9 -37.8 7.9 -41.4 4.8 -41.4 4.8 -70.8"/>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/jdaviz/data/icons/api_lock.svg b/jdaviz/data/icons/api_lock.svg
new file mode 100644
index 0000000000..da8fba4533
--- /dev/null
+++ b/jdaviz/data/icons/api_lock.svg
@@ -0,0 +1,136 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 66.6 47">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+      }
+
+      .cls-2, .cls-3, .cls-4, .cls-5, .cls-6, .cls-7, .cls-8, .cls-9, .cls-10, .cls-11 {
+        fill: #221f20;
+      }
+
+      .cls-2, .cls-3, .cls-10 {
+        font-size: 12px;
+      }
+
+      .cls-12 {
+        fill: #010101;
+      }
+
+      .cls-3, .cls-4, .cls-8, .cls-13 {
+        font-family: PTMono-Bold, 'PT Mono';
+        font-weight: 700;
+      }
+
+      .cls-4, .cls-6, .cls-7, .cls-11 {
+        font-size: 25px;
+      }
+
+      .cls-14, .cls-10 {
+        font-family: HighwayGothic, 'Highway Gothic';
+      }
+
+      .cls-15 {
+        fill: #e79dbf;
+      }
+
+      .cls-6 {
+        font-family: HiraKakuStd-W8-83pv-RKSJ-H, 'Hiragino Kaku Gothic Std';
+      }
+
+      .cls-7 {
+        font-family: BMDoHyeon-OTF-KSCpc-EUC-H, 'BM Dohyeon';
+      }
+
+      .cls-16 {
+        fill: #fff;
+      }
+
+      .cls-8 {
+        font-size: 7px;
+      }
+
+      .cls-9 {
+        font-size: 32px;
+      }
+
+      .cls-9, .cls-11 {
+        font-family: PatuaOne-Regular, 'Patua One';
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.7.2, SVG Export Plug-In . SVG Version: 1.2.0 Build 154)  -->
+  <g>
+    <g id="Layer_1">
+      <g id="Kgt5J8.tif">
+        <image id="Layer_0" width="62" height="62" transform="translate(459.8 -47.9) scale(.5)" xlink:href="apiLock-1.png"/>
+      </g>
+      <g id="w2i81C.tif">
+        <image id="Layer_0-2" data-name="Layer_0" width="50" height="60" transform="translate(405.8 -46.4) scale(.5)" xlink:href="apiLock-2.png"/>
+      </g>
+      <text class="cls-10" transform="translate(282.2 -148.7)"><tspan x="0" y="0">&lt;API&gt;</tspan></text>
+      <text class="cls-2" transform="translate(346 -151)"><tspan class="cls-14" x="0" y="0">&lt;</tspan><tspan class="cls-13" x="7" y="0">API</tspan><tspan class="cls-14" x="28.6" y="0">&gt;</tspan></text>
+      <text class="cls-3" transform="translate(445.7 -111.8)"><tspan x="0" y="0">API</tspan></text>
+      <text class="cls-2" transform="translate(339.2 -118.7)"><tspan class="cls-14" x="0" y="0">&lt;</tspan><tspan class="cls-13" x="7" y="0">api</tspan><tspan class="cls-14" x="28.6" y="0">&gt;</tspan></text>
+      <text class="cls-3" transform="translate(364.8 -100.3)"><tspan x="0" y="0">api</tspan></text>
+      <g id="EOJqSm.tif">
+        <image id="Layer_0-3" data-name="Layer_0" width="102" height="88" transform="translate(403.8 152.6) scale(.5)" xlink:href="apiLock-3.png"/>
+      </g>
+      <path class="cls-12" d="M468.3-103.3l4.6-4.6-4.6-4.6,1.4-1.4,6,6-6,6-1.4-1.4"/>
+      <path class="cls-12" d="M534.5-138.9v15.5h6.2v-3.1h-3.1v-9.3h3.1v-3.1h-6.2M565.6-134.2v18.6c0,1.7-1.4,3.1-3.1,3.1h-24.9c-1.7,0-3.1-1.4-3.1-3.1v-4.7h3.1v4.7h24.9v-18.6h0v-3.1h0c1.7,0,3.1,1.4,3.1,3.1Z"/>
+      <path class="cls-12" d="M688.4-81.4v18.6c0,1.7-1.4,3.1-3.1,3.1h-24.9c-1.7,0-3.1-1.4-3.1-3.1v-4.7h3.1v4.7h24.9v-18.6h0v-3.1h0c1.7,0,3.1,1.4,3.1,3.1Z"/>
+      <polygon class="cls-12" points="445 -115.2 440.4 -119.8 445 -124.4 443.6 -125.8 437.6 -119.8 443.6 -113.8 445 -115.2"/>
+      <rect class="cls-15" x="557.1" y="-80" width="22.6" height="20.7"/>
+      <text class="cls-8" transform="translate(490.6 -76.6)"><tspan x="0" y="0">api</tspan></text>
+      <text class="cls-4" transform="translate(624.8 -146.2)"><tspan x="0" y="0">api</tspan></text>
+      <text class="cls-8" transform="translate(541.3 -129)"><tspan x="0" y="0">api</tspan></text>
+      <polyline class="cls-12" points="486.9 -87.7 486.9 -82.2 489.1 -82.2 489.1 -83.3 488 -83.3 488 -86.6 489.1 -86.6 489.1 -87.7 486.9 -87.7"/>
+      <polyline class="cls-12" points="507.1 -70.3 507.1 -75.7 504.9 -75.7 504.9 -74.6 506 -74.6 506 -71.4 504.9 -71.4 504.9 -70.3 507.1 -70.3"/>
+      <text class="cls-8" transform="translate(598.5 -99)"><tspan x="0" y="0">api</tspan></text>
+      <polyline class="cls-12" points="594.8 -103.6 594.8 -98.2 597 -98.2 597 -99.3 595.9 -99.3 595.9 -102.6 597 -102.6 597 -103.6 594.8 -103.6"/>
+      <polyline class="cls-12" points="615 -98.2 615 -103.6 612.8 -103.6 612.8 -102.6 613.9 -102.6 613.9 -99.3 612.8 -99.3 612.8 -98.2 615 -98.2"/>
+      <polyline class="cls-12" points="556.8 -126.5 553.7 -126.5 553.7 -123.3 559.9 -123.3 559.9 -138.9 553.7 -138.9 553.7 -135.8 556.8 -135.8 556.8 -126.5"/>
+      <polyline class="cls-12" points="673.3 -136.3 670.2 -136.3 670.2 -132.4 676.4 -132.4 676.4 -173.7 670.2 -173.7 670.2 -170.1 673.3 -170.1 673.3 -140.7"/>
+      <polyline class="cls-12" points="621.9 -169.9 625 -169.9 625 -173.7 618.7 -173.7 618.7 -132.4 625 -132.4 625 -136.1 621.9 -136.1 621.9 -165.5"/>
+      <text class="cls-4" transform="translate(194.8 -6.5)"><tspan x="0" y="0">api</tspan></text>
+      <text class="cls-11" transform="translate(181.4 -36)"><tspan x="0" y="0">API</tspan></text>
+      <text class="cls-9" transform="translate(-79.1 -67.9)"><tspan x="0" y="0">api</tspan></text>
+      <text class="cls-7" transform="translate(160.6 -65.7)"><tspan x="0" y="0">api</tspan></text>
+      <text class="cls-6" transform="translate(82.4 -107.3)"><tspan x="0" y="0">API</tspan></text>
+      <polyline class="cls-12" points="7 61.9 11.1 61.9 11.1 59.1 2.9 59.1 2.9 100.4 11.1 100.4 11.1 95.7 7 95.7 7 67.4"/>
+      <g>
+        <path class="cls-5" d="M11.6-68.9c0-.3,0-.7,0-1.1,2.1-1.1,4.3-1.7,6.6-1.7s4.1.4,5.1,1.3c1,.9,1.5,2.4,1.5,4.5v7.1c.8.2,1.4.3,1.8.6v2.9c-1.1.5-2.7.8-4.8.8-.2-.6-.4-1.3-.6-2.1-1,1.4-2.7,2.1-5.2,2.1s-2.8-.4-3.8-1.3-1.6-2-1.6-3.5.5-2.7,1.5-3.5c1-.9,2.5-1.3,4.4-1.3h3.6v-1.6c0-1.7-.9-2.6-2.8-2.6s-1.3,0-1.7.2c0,.9-.2,1.6-.4,2.2h-3.3c-.4-.8-.6-1.8-.6-3ZM17.6-57.9c1.1,0,2-.3,2.7-1v-2.7h-2.3c-1.6,0-2.4.6-2.4,1.8s.2,1,.5,1.4c.3.4.8.5,1.5.5Z"/>
+        <path class="cls-5" d="M27.9-71.3c1.2-.3,2.3-.4,3.3-.4s1.8,0,2.4,0v1.6c1.5-1,3.1-1.6,4.7-1.6s3.8.6,4.8,1.9c1,1.3,1.5,3.4,1.5,6.3s-.2,3-.7,4.1c-.5,1.2-1.1,2.1-1.9,2.8-1.5,1.3-3.3,2-5.4,2s-1.8,0-2.6-.3v2.9c1.3.4,2.1.8,2.5,1.2l-.3,2.6h-8.3l-.3-2.6c.3-.4.9-.8,1.8-1.1v-15.9c-.8-.3-1.4-.6-1.8-1.1l.3-2.6ZM36.3-57.9c1.1,0,2-.5,2.6-1.5.6-1,1-2.3,1-4.1s-.2-2.9-.5-3.6c-.4-.6-1-1-1.9-1-1.4,0-2.5.3-3.4,1v8.8c.7.2,1.4.3,2.3.3Z"/>
+        <path class="cls-5" d="M46.8-71.3c1.2-.3,2.4-.4,3.5-.4s2,0,2.7,0v13.2c.9.3,1.5.7,1.8,1.1l-.3,2.6h-7.6l-.3-2.6c.3-.4.9-.8,1.8-1.1v-9.2c-.8-.3-1.4-.6-1.8-1.1l.3-2.6ZM50.6-73.6c-1.8,0-2.8-.8-2.8-2.5s.9-2.5,2.8-2.5,2.8.8,2.8,2.5-.9,2.5-2.8,2.5Z"/>
+      </g>
+      <polyline class="cls-12" points="59.9 -48.2 55.8 -48.2 55.8 -43.4 64 -43.4 64 -84.7 55.8 -84.7 55.8 -82 59.9 -82 59.9 -51.7"/>
+      <polyline class="cls-12" points="7 -81.9 11.1 -81.9 11.1 -84.7 2.9 -84.7 2.9 -43.4 11.1 -43.4 11.1 -48 7 -48 7 -76.4"/>
+      <text class="cls-4" transform="translate(7.8 -139.9)"><tspan x="0" y="0">api</tspan></text>
+      <polyline class="cls-12" points="56.2 -129.9 53.1 -129.9 53.1 -126.1 59.3 -126.1 59.3 -167.4 53.1 -167.4 53.1 -163.7 56.2 -163.7 56.2 -134.4"/>
+      <polyline class="cls-12" points="4.8 -163.6 7.9 -163.6 7.9 -167.4 1.7 -167.4 1.7 -126.1 7.9 -126.1 7.9 -129.7 4.8 -129.7 4.8 -159.1"/>
+      <g>
+        <path class="cls-1" d="M37.4,75.8c-1.4,0-2.5.3-3.4,1v8.8c.7.2,1.4.3,2.3.3s2-.5,2.6-1.5c.6-1,1-2.3,1-4.1s-.2-2.9-.5-3.6c-.4-.6-1-1-1.9-1Z"/>
+        <path class="cls-1" d="M15.5,84c0,.6.2,1,.5,1.4.3.4.8.5,1.5.5,1.1,0,2-.3,2.7-1v-2.7h-2.3c-1.6,0-2.4.6-2.4,1.8Z"/>
+        <path d="M24.9,78c0-2.1-.5-3.6-1.5-4.5-1-.9-2.7-1.3-5.1-1.3s-4.6.6-6.6,1.7c0,.4,0,.7,0,1.1,0,1.2.2,2.2.6,3h3.3c.2-.5.4-1.2.4-2.2.4-.1,1-.2,1.7-.2,1.8,0,2.8.9,2.8,2.6v1.6h-3.6c-1.9,0-3.4.4-4.4,1.3-1,.9-1.5,2-1.5,3.5s.5,2.7,1.6,3.5c1.1.9,2.3,1.3,3.8,1.3,2.5,0,4.2-.7,5.2-2.1.2.8.3,1.5.6,2.1,2.1,0,3.7-.3,4.8-.8v-2.9c-.4-.2-1.1-.4-1.8-.6v-7.1ZM20.3,84.9c-.7.7-1.6,1-2.7,1s-1.2-.2-1.5-.5c-.3-.4-.5-.8-.5-1.4,0-1.2.8-1.8,2.4-1.8h2.3v2.7Z"/>
+        <path d="M44.7,80.4c0-2.9-.5-5-1.5-6.3-1-1.3-2.6-1.9-4.8-1.9s-3.3.5-4.7,1.6v-1.6c-.6,0-1.4,0-2.4,0s-2.1.1-3.3.4l-.3,2.6c.4.5,1.1.9,1.8,1.1v15.9c-.9.4-1.5.7-1.8,1.1l.3,2.6h8.3l.3-2.6c-.4-.5-1.2-.9-2.5-1.2v-2.9c.8.2,1.7.3,2.6.3,2.1,0,3.9-.7,5.4-2,.8-.7,1.4-1.6,1.9-2.8.5-1.2.7-2.6.7-4.1ZM38.9,84.4c-.6,1-1.5,1.5-2.6,1.5s-1.6,0-2.3-.3v-8.8c.8-.7,2-1,3.4-1s1.6.3,1.9,1c.4.6.5,1.8.5,3.6s-.3,3.1-1,4.1Z"/>
+        <path d="M52.9,72.1c-.7,0-1.6,0-2.7,0s-2.2.1-3.5.4l-.3,2.6c.4.5,1.1.9,1.8,1.1v8.3c1.3-.9,2.9-1.6,4.6-1.8v-10.5Z"/>
+        <path d="M50.6,70.1c1.8,0,2.8-.8,2.8-2.5s-.9-2.5-2.8-2.5-2.8.8-2.8,2.5.9,2.5,2.8,2.5Z"/>
+        <path class="cls-12" d="M64,89.6v-30.5h-8.2v2.6h4.1v22.5c1.9,1.3,3.4,3.1,4.1,5.3Z"/>
+        <polygon class="cls-16" points="55.8 95.6 59.9 95.6 59.9 92.1 59.9 89.8 55.8 89.8 55.8 95.6"/>
+      </g>
+      <path class="cls-12" d="M59.5,90.1c.8,0,1.4.6,1.4,1.4v7c0,.8-.6,1.4-1.4,1.4h-8.4c-.8,0-1.4-.6-1.4-1.4v-7c0-.8.6-1.4,1.4-1.4h6.3v-1.4c0-1.2-.9-2.1-2.1-2.1s-2.1.9-2.1,2.1h-1.4c0-1.9,1.6-3.5,3.5-3.5s3.5,1.6,3.5,3.5v1.4h.7M55.3,96.4c.8,0,1.4-.6,1.4-1.4s-.6-1.4-1.4-1.4-1.4.6-1.4,1.4.6,1.4,1.4,1.4Z"/>
+      <polyline class="cls-12" points="7 6.5 11.1 6.5 11.1 3.7 2.9 3.7 2.9 44.9 11.1 44.9 11.1 40.3 7 40.3 7 11.9"/>
+      <g>
+        <path class="cls-1" d="M37.4,20.4c-1.4,0-2.5.3-3.4,1v8.8c.7.2,1.4.3,2.3.3s2-.5,2.6-1.5c.6-1,1-2.3,1-4.1s-.2-2.9-.5-3.6c-.4-.6-1-1-1.9-1Z"/>
+        <path class="cls-1" d="M15.5,28.6c0,.6.2,1,.5,1.4.3.4.8.5,1.5.5,1.1,0,2-.3,2.7-1v-2.7h-2.3c-1.6,0-2.4.6-2.4,1.8Z"/>
+        <path d="M24.9,22.6c0-2.1-.5-3.6-1.5-4.5-1-.9-2.7-1.3-5.1-1.3s-4.6.6-6.6,1.7c0,.4,0,.7,0,1.1,0,1.2.2,2.2.6,3h3.3c.2-.5.4-1.2.4-2.2.4-.1,1-.2,1.7-.2,1.8,0,2.8.9,2.8,2.6v1.6h-3.6c-1.9,0-3.4.4-4.4,1.3-1,.9-1.5,2-1.5,3.5s.5,2.7,1.6,3.5c1.1.9,2.3,1.3,3.8,1.3,2.5,0,4.2-.7,5.2-2.1.2.8.3,1.5.6,2.1,2.1,0,3.7-.3,4.8-.8v-2.9c-.4-.2-1.1-.4-1.8-.6v-7.1ZM20.3,29.5c-.7.7-1.6,1-2.7,1s-1.2-.2-1.5-.5c-.3-.4-.5-.8-.5-1.4,0-1.2.8-1.8,2.4-1.8h2.3v2.7Z"/>
+        <path d="M44.5,22.4c-.2-1.6-.7-2.9-1.3-3.7-1-1.3-2.6-1.9-4.8-1.9s-3.3.5-4.7,1.6v-1.6c-.6,0-1.4,0-2.4,0s-2.1.1-3.3.4l-.3,2.6c.4.5,1.1.9,1.8,1.1v15.9c-.9.4-1.5.7-1.8,1.1l.3,2.6h8.3l.3-2.6c-.4-.5-1.2-.9-2.5-1.2v-2.9c.8.2,1.7.3,2.6.3,1.8,0,3.4-.5,4.8-1.5,0-.4,0-.9,0-1.4,0-3.4,1.2-6.4,3.1-8.7ZM38.9,29c-.6,1-1.5,1.5-2.6,1.5s-1.6,0-2.3-.3v-8.8c.8-.7,2-1,3.4-1s1.6.3,1.9,1c.4.6.5,1.8.5,3.6s-.3,3.1-1,4.1Z"/>
+        <path d="M52.9,18.4v-1.7c-.7,0-1.6,0-2.7,0s-2.2.1-3.5.4l-.3,2.6c.2.2.4.4.6.5,1.7-1.1,3.6-1.7,5.7-1.7s0,0,.1,0Z"/>
+        <path d="M50.6,14.7c1.8,0,2.8-.8,2.8-2.5s-.9-2.5-2.8-2.5-2.8.8-2.8,2.5.9,2.5,2.8,2.5Z"/>
+        <path class="cls-12" d="M64,28.3V3.7h-8.2v2.6h4.1v14.8c2,1.8,3.5,4.3,4.1,7.2Z"/>
+        <path class="cls-12" d="M62,30.7c-.1-1.1-1-1.9-2.1-1.9,0,0,0,0,0,0h-1.1v-2.2c0-3-2.4-5.4-5.4-5.4s-.3,0-.4,0c-2.1.1-3.9,1.5-4.6,3.3-.3.6-.4,1.4-.4,2.1v2.2h-1.1c-1.2,0-2.2,1-2.2,2.2v10.9c0,1.2,1,2.2,2.2,2.2h13.1c1.2,0,2.2-1,2.2-2.2v-10.9c0,0,0-.2,0-.3ZM53.3,38.6c-1.2,0-2.2-1-2.2-2.2s1-2.2,2.2-2.2,2.2,1,2.2,2.2-1,2.2-2.2,2.2ZM56.6,28.8h-6.5v-2.2c0-1.7,1.3-3,2.9-3.2.1,0,.3,0,.4,0,1.8,0,3.3,1.5,3.3,3.3v2.2Z"/>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file