feature: query lineage visualizer advanced styling & interactive component handle

Author: Yi-Ting Lee

src/sagemaker/lineage/query.py

@@ -258,7 +258,7 @@ def _get_app(self, elements):
                     id="cytoscape-graph",
                     elements=elements,
                     style={
-                        "width": "85%",
+                        "width": "84%",
                         "height": "350px",
                         "display": "inline-block",
                         "border-width": "1vw",
@@ -306,6 +306,15 @@ def _get_app(self, elements):
                     ],
                     responsive=True,
                 ),
+                self.html.Div(
+                    style={
+                        "width": "0.5%",
+                        "display": "inline-block",
+                        "font-size": "1vw",
+                        "font-family": "verdana",
+                        "vertical-align": "top",
+                    },
+                ),
                 self.html.Div(
                     [
                         self.html.Div(
@@ -427,7 +436,6 @@ def _get_app(self, elements):
                         ),
                     ],
                     style={
-                        "width": "15%",
                         "display": "inline-block",
                         "font-size": "1vw",
                         "font-family": "verdana",