ob-metaflow 2.11.13.1__py2.py3-none-any.whl → 2.19.7.1rc0__py2.py3-none-any.whl

metaflow/plugins/cards/card_modules/convert_to_native_type.py

@@ -8,7 +8,9 @@ TypeResolvedObject = namedtuple("TypeResolvedObject", ["data", "is_image", "is_t
 
 
 TIME_FORMAT = "%Y-%m-%d %I:%M:%S %p"
-MAX_ARTIFACT_SIZE = 1  # in 1 MB
+# Maximum artifact size to render in cards: 200MB (in bytes)
+# Artifacts larger than this will be skipped during card rendering to avoid memory issues
+MAX_ARTIFACT_SIZE = 256 * 1024 * 1024  # 256 MB = 268435456 bytes
 
 
 def _get_object_size(obj, seen=None):
@@ -44,7 +46,7 @@ def _full_classname(obj):
 
 
 class TaskToDict:
-    def __init__(self, only_repr=False, runtime=False):
+    def __init__(self, only_repr=False, runtime=False, max_artifact_size=None):
         # this dictionary holds all the supported functions
         import reprlib
         import pprint
@@ -61,6 +63,10 @@ class TaskToDict:
         self._repr = r
         self._runtime = runtime
         self._only_repr = only_repr
+        # Use the global MAX_ARTIFACT_SIZE constant if not specified
+        self._max_artifact_size = (
+            max_artifact_size if max_artifact_size is not None else MAX_ARTIFACT_SIZE
+        )
         self._supported_types = {
             "tuple": self._parse_tuple,
             "NoneType": self._parse_nonetype,
@@ -110,6 +116,19 @@ class TaskToDict:
         task_data_dict = {}
         type_inferred_objects = {"images": {}, "tables": {}}
         for data in task:
+            # Check if artifact size exceeds the maximum allowed size
+            if data.size > self._max_artifact_size:
+                # Skip artifacts that are too large
+                task_data_dict[data.id] = dict(
+                    type="skipped",
+                    data=f"<artifact too large: {data.size} bytes, max: {self._max_artifact_size} bytes>",
+                    large_object=True,
+                    supported_type=False,
+                    only_repr=self._only_repr,
+                    name=data.id,
+                )
+                continue
+
             try:
                 data_object = data.data
                 task_data_dict[data.id] = self._convert_to_native_type(data_object)
@@ -143,7 +162,16 @@ class TaskToDict:
         obj_type_name = self._get_object_type(data_object)
         if obj_type_name == "bytes":
             # Works for python 3.1+
-            import imghdr
+            # Python 3.13 removes the standard ``imghdr`` module. Metaflow
+            # vendors a copy so we can keep using ``what`` to detect image
+            # formats irrespective of the Python version.
+            import warnings
+
+            with warnings.catch_warnings():
+                warnings.filterwarnings(
+                    "ignore", category=DeprecationWarning, module="imghdr"
+                )
+                from metaflow._vendor import imghdr
 
             resp = imghdr.what(None, h=data_object)
             # Only accept types supported on the web
@@ -157,7 +185,7 @@ class TaskToDict:
         obj_type_name = self._get_object_type(data_object)
         if obj_type_name == "bytes":
             # Works for python 3.1+
-            import imghdr
+            from metaflow._vendor import imghdr
 
             resp = imghdr.what(None, h=data_object)
             # Only accept types supported on the web
@@ -232,7 +260,8 @@ class TaskToDict:
             supported_type = True
             type_parsing_func = self._supported_types[obj_type_name]
             data_obj = type_parsing_func(data_object)
-            if _get_object_size(data_obj) * 1e-6 > MAX_ARTIFACT_SIZE:
+            # Secondary check: if the in-memory object size exceeds our limit, use repr instead
+            if _get_object_size(data_obj) > self._max_artifact_size:
                 data_obj = rep.repr(data_obj)
                 large_object = True
         else:
@@ -314,8 +343,8 @@ class TaskToDict:
         # If there is any form of TypeError or ValueError we set the column value to "Unsupported Type"
         # We also set columns which are have null values to "null" strings
         time_format = "%Y-%m-%dT%H:%M:%S%Z"
-        truncate_long_objects = (
-            lambda x: x.astype("string").str.slice(0, 30) + "..."
+        truncate_long_objects = lambda x: (
+            x.astype("string").str.slice(0, 30) + "..."
             if len(x) > 0 and x.astype("string").str.len().max() > 30
             else x.astype("string")
         )

metaflow/plugins/cards/card_modules/json_viewer.py

@@ -0,0 +1,232 @@
+"""
+JSONViewer component for displaying JSON data with syntax highlighting and collapsible sections.
+"""
+
+from typing import Any, Optional, Union
+from .card import MetaflowCardComponent, with_default_component_id
+from .renderer_tools import render_safely
+import json
+from metaflow._vendor import yaml
+
+
+class JSONViewer(MetaflowCardComponent):
+    """
+    A component for displaying JSON data with syntax highlighting and collapsible sections.
+
+    This component provides a rich view of JSON data with proper formatting, syntax highlighting,
+    and the ability to collapse/expand sections for better readability.
+
+    Example:
+    ```python
+    from metaflow.cards import JSONViewer
+    from metaflow import current
+
+    data = {
+        "user": {"name": "Alice", "age": 30},
+        "items": [{"id": 1, "name": "Item 1"}, {"id": 2, "name": "Item 2"}],
+        "metadata": {"created": "2024-01-01", "version": "1.0"}
+    }
+
+    json_viewer = JSONViewer(data, collapsible=True, max_height="400px")
+    current.card.append(json_viewer)
+    ```
+
+    Parameters
+    ----------
+    data : Any
+        The data to display as JSON. Will be serialized using json.dumps().
+    collapsible : bool, default True
+        Whether to make the JSON viewer collapsible.
+    max_height : str, optional
+        Maximum height for the viewer (CSS value like "300px" or "20rem").
+    show_copy_button : bool, default True
+        Whether to show a copy-to-clipboard button.
+    """
+
+    type = "jsonViewer"
+
+    REALTIME_UPDATABLE = True
+
+    def __init__(
+        self,
+        data: Any,
+        collapsible: bool = True,
+        max_height: Optional[str] = None,
+        show_copy_button: bool = True,
+        title: Optional[str] = None,
+    ):
+        self._data = data
+        self._collapsible = collapsible
+        self._max_height = max_height
+        self._show_copy_button = show_copy_button
+        self._title = title
+
+    def update(self, data: Any):
+        """
+        Update the JSON data.
+
+        Parameters
+        ----------
+        data : Any
+            New data to display as JSON.
+        """
+        self._data = data
+
+    @with_default_component_id
+    @render_safely
+    def render(self):
+        # Serialize data to JSON string
+        try:
+            if isinstance(self._data, str):
+                # If already a string, try to parse and re-serialize for formatting
+                try:
+                    parsed = json.loads(self._data)
+                    json_string = json.dumps(parsed, indent=2, ensure_ascii=False)
+                except json.JSONDecodeError:
+                    # If not valid JSON, treat as plain string
+                    json_string = json.dumps(self._data, indent=2, ensure_ascii=False)
+            else:
+                json_string = json.dumps(
+                    self._data, indent=2, ensure_ascii=False, default=str
+                )
+        except Exception as e:
+            # Fallback for non-serializable objects
+            json_string = json.dumps(
+                {"error": f"Could not serialize data: {str(e)}"}, indent=2
+            )
+
+        data = {
+            "type": self.type,
+            "id": self.component_id,
+            "json_string": json_string,
+            "collapsible": self._collapsible,
+            "show_copy_button": self._show_copy_button,
+            "title": self._title or "JSON",
+        }
+
+        if self._max_height:
+            data["max_height"] = self._max_height
+
+        return data
+
+
+class YAMLViewer(MetaflowCardComponent):
+    """
+    A component for displaying YAML data with syntax highlighting and collapsible sections.
+
+    This component provides a rich view of YAML data with proper formatting and syntax highlighting.
+
+    Example:
+    ```python
+    from metaflow.cards import YAMLViewer
+    from metaflow import current
+
+    data = {
+        "database": {
+            "host": "localhost",
+            "port": 5432,
+            "credentials": {"username": "admin", "password": "secret"}
+        },
+        "features": ["auth", "logging", "monitoring"]
+    }
+
+    yaml_viewer = YAMLViewer(data, collapsible=True)
+    current.card.append(yaml_viewer)
+    ```
+
+    Parameters
+    ----------
+    data : Any
+        The data to display as YAML. Will be serialized to YAML format.
+    collapsible : bool, default True
+        Whether to make the YAML viewer collapsible.
+    max_height : str, optional
+        Maximum height for the viewer (CSS value like "300px" or "20rem").
+    show_copy_button : bool, default True
+        Whether to show a copy-to-clipboard button.
+    """
+
+    type = "yamlViewer"
+
+    REALTIME_UPDATABLE = True
+
+    def __init__(
+        self,
+        data: Any,
+        collapsible: bool = True,
+        max_height: Optional[str] = None,
+        show_copy_button: bool = True,
+        title: Optional[str] = None,
+    ):
+        self._data = data
+        self._collapsible = collapsible
+        self._max_height = max_height
+        self._show_copy_button = show_copy_button
+        self._title = title
+
+    def update(self, data: Any):
+        """
+        Update the YAML data.
+
+        Parameters
+        ----------
+        data : Any
+            New data to display as YAML.
+        """
+        self._data = data
+
+    def _to_yaml_string(self, data: Any) -> str:
+        """
+        Convert data to YAML string format using vendored YAML module.
+        """
+        try:
+            if isinstance(data, str):
+                # Try to parse as JSON first, then convert to YAML
+                try:
+                    import json
+
+                    parsed = json.loads(data)
+                    yaml_result = yaml.dump(
+                        parsed, default_flow_style=False, indent=2, sort_keys=False
+                    )
+                    return (
+                        str(yaml_result)
+                        if yaml_result is not None
+                        else "# Empty YAML result"
+                    )
+                except json.JSONDecodeError:
+                    # If not JSON, return as-is
+                    return data
+            else:
+                yaml_result = yaml.dump(
+                    data, default_flow_style=False, indent=2, sort_keys=False
+                )
+                return (
+                    str(yaml_result)
+                    if yaml_result is not None
+                    else "# Empty YAML result"
+                )
+        except Exception as e:
+            # Fallback to JSON on any error
+            import json
+
+            return f"# Error converting to YAML: {str(e)}\n{json.dumps(data, indent=2, default=str)}"
+
+    @with_default_component_id
+    @render_safely
+    def render(self):
+        yaml_string = self._to_yaml_string(self._data)
+
+        data = {
+            "type": self.type,
+            "id": self.component_id,
+            "yaml_string": yaml_string,
+            "collapsible": self._collapsible,
+            "show_copy_button": self._show_copy_button,
+            "title": self._title or "YAML",
+        }
+
+        if self._max_height:
+            data["max_height"] = self._max_height
+
+        return data

metaflow/plugins/cards/card_modules/main.css

@@ -0,0 +1 @@
+@import"https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap";code[class*=language-],pre[class*=language-]{color:#000;background:0 0;text-shadow:0 1px #fff;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{text-shadow:none;background:#b3d4fc}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow:none;background:#b3d4fc}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#f5f2f0}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#999}.token.namespace{opacity:.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#9a6e3a;background:#ffffff80}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.class-name,.token.function{color:#dd4a68}.token.important,.token.regex,.token.variable{color:#e90}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}:root{--bg: #ffffff;--black: #333;--blue: #0c66de;--dk-grey: #767676;--dk-primary: #ef863b;--dk-secondary: #13172d;--dk-tertiary: #0f426e;--error: #cf483e;--grey: rgba(0, 0, 0, .125);--highlight: #f8d9d8;--lt-blue: #4fa7ff;--lt-grey: #f3f3f3;--lt-lt-grey: #f9f9f9;--lt-primary: #ffcb8b;--lt-secondary: #434d81;--lt-tertiary: #4189c9;--primary: #faab4a;--quadrary: #f8d9d8;--secondary: #2e3454;--tertiary: #2a679d;--white: #ffffff;--component-spacer: 3rem;--aside-width: 20rem;--embed-card-min-height: 12rem;--mono-font: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace}html,body{margin:0;min-height:100vh;overflow-y:visible;padding:0;width:100%}.card_app{width:100%;min-height:100vh}.embed .card_app{min-height:var(--embed-card-min-height)}.mf-card *{box-sizing:border-box}.mf-card{background:var(--bg);color:var(--black);font-family:Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:14px;font-weight:400;line-height:1.5;text-size-adjust:100%;margin:0;min-height:100vh;overflow-y:visible;padding:0;text-align:left;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;width:100%}.embed .mf-card{min-height:var(--embed-card-min-height)}.mf-card :is(.mono,code.mono,pre.mono){font-family:var(--mono-font);font-weight:lighter}.mf-card :is(table,th,td){border-spacing:1px;text-align:center;color:var(--black)}.mf-card table{position:relative;min-width:100%;table-layout:inherit!important}.mf-card td{padding:.66rem 1.25rem;background:var(--lt-lt-grey);border:none}.mf-card th{border:none;color:var(--dk-grey);font-weight:400;padding:.5rem}.mf-card :is(h1,h2,h3,h4,h5){font-weight:700;margin:.5rem 0}.mf-card ul{margin:0;padding:0}.mf-card p{margin:0 0 1rem}.mf-card p:last-of-type{margin:0}.mf-card button{font-size:1rem}.mf-card .textButton{cursor:pointer;text-align:left;background:none;border:1px solid transparent;outline:none;padding:0}.mf-card :is(button.textButton:focus,a:focus,button.textButton:active){border:1px dashed var(--grey);background:transparent}.mf-card button.textButton:hover{color:var(--blue);text-decoration:none}.mf-card :is(:not(pre)>code[class*=language-],pre[class*=language-]){background:transparent!important;text-shadow:none;-webkit-user-select:auto;user-select:auto}aside.svelte-1okdv0e{display:none;line-height:2;text-align:left}@media (min-width: 60rem){aside.svelte-1okdv0e{display:flex;flex-direction:column;height:100vh;justify-content:space-between;padding:2.5rem 0 1.5rem 1.5rem;position:fixed;width:var(--aside-width)}}.embed aside{display:none}aside ul{list-style-type:none}aside a,aside button,aside a:visited{text-decoration:none;cursor:pointer;font-weight:700;color:var(--black)}aside a:hover,aside button:hover{text-decoration:underline}.logoContainer svg{width:100%;max-width:140px;margin-bottom:3.75rem;height:auto}.idCell.svelte-pt8vzv{font-weight:700;text-align:right;background:var(--lt-grey);width:12%}.codeCell.svelte-pt8vzv{text-align:left;-webkit-user-select:all;user-select:all}.container.svelte-ubs992{width:100%;overflow:auto}table.svelte-ubs992{width:100%}:root{--dag-border: #282828;--dag-bg-static: var(--lt-grey);--dag-bg-success: #a5d46a;--dag-bg-running: #ffdf80;--dag-bg-error: #ffa080;--dag-connector: #cccccc;--dag-gap: 5rem;--dag-step-height: 6.25rem;--dag-step-width: 11.25rem;--dag-selected: #ffd700}.connectorwrapper.svelte-1hyaq5f{transform-origin:0 0;position:absolute;z-index:0;min-width:var(--strokeWidth)}.flip.svelte-1hyaq5f{transform:scaleX(-1)}.path.svelte-1hyaq5f{--strokeWidth: .5rem;--strokeColor: var(--dag-connector);--borderRadius: 1.25rem;box-sizing:border-box}.straightLine.svelte-1hyaq5f{position:absolute;inset:0;border-left:var(--strokeWidth) solid var(--strokeColor)}.topLeft.svelte-1hyaq5f{position:absolute;top:0;left:0;right:50%;bottom:calc(var(--dag-gap) / 2 - var(--strokeWidth) / 2);border-radius:0 0 0 var(--borderRadius);border-left:var(--strokeWidth) solid var(--strokeColor);border-bottom:var(--strokeWidth) solid var(--strokeColor)}.bottomRight.svelte-1hyaq5f{position:absolute;top:calc(100% - (var(--dag-gap) / 2 + var(--strokeWidth) / 2));left:50%;right:0;bottom:0;border-radius:0 var(--borderRadius) 0 0;border-top:var(--strokeWidth) solid var(--strokeColor);border-right:var(--strokeWidth) solid var(--strokeColor)}.wrapper.svelte-117ceti{position:relative;z-index:1}.step.svelte-117ceti{font-size:.75rem;padding:.5rem;color:var(--dk-grey)}.rectangle.svelte-117ceti{background-color:var(--dag-bg-static);border:1px solid var(--dag-border);box-sizing:border-box;position:relative;height:var(--dag-step-height);width:var(--dag-step-width)}.rectangle.error.svelte-117ceti{background-color:var(--dag-bg-error)}.rectangle.success.svelte-117ceti{background-color:var(--dag-bg-success)}.rectangle.running.svelte-117ceti{background-color:var(--dag-bg-running)}.level.svelte-117ceti{z-index:-1;filter:contrast(.5);position:absolute}.inner.svelte-117ceti{position:relative;height:100%;width:100%}.name.svelte-117ceti{font-weight:700;overflow:hidden;text-overflow:ellipsis;display:block}.description.svelte-117ceti{position:absolute;max-height:4rem;bottom:0;left:0;right:0;overflow:hidden;-webkit-line-clamp:4;line-clamp:4;display:-webkit-box;-webkit-box-orient:vertical}.overflown.description.svelte-117ceti{cursor:help}.current.svelte-117ceti .rectangle:where(.svelte-117ceti){box-shadow:0 0 10px var(--dag-selected)}.levelstoshow.svelte-117ceti{position:absolute;bottom:100%;right:0;font-size:.75rem;font-weight:100;text-align:right}.stepwrapper.svelte-18aex7a{display:flex;align-items:center;flex-direction:column;width:100%;position:relative;min-width:var(--dag-step-width)}.childwrapper.svelte-18aex7a{display:flex;width:100%}.gap.svelte-18aex7a{height:var(--dag-gap)}.title.svelte-117s0ws{text-align:left}.subtitle.svelte-lu9pnn{font-size:1rem;text-align:left}header.svelte-1ugmt5d{margin-bottom:var(--component-spacer)}figure.svelte-1x96yvr{background:var(--lt-grey);padding:1rem;border-radius:5px;text-align:center;margin:0 auto var(--component-spacer)}@media (min-width: 60rem){figure.svelte-1x96yvr{margin-bottom:0}}img.svelte-1x96yvr{max-width:100%;max-height:500px}.label.svelte-1x96yvr{font-weight:700;margin:.5rem 0}.description.svelte-1x96yvr{font-size:.9rem;font-style:italic;text-align:center;margin:.5rem 0}.log.svelte-1jhmsu{background:var(--lt-grey)!important;font-size:.9rem;padding:2rem}.page.svelte-v7ihqd:last-of-type{margin-bottom:var(--component-spacer)}.page:last-of-type section:last-of-type hr{display:none}progress.svelte-ljrmzp::-webkit-progress-bar{background-color:#fff!important;min-width:100%}progress.svelte-ljrmzp{background-color:#fff;color:#326cded9!important}progress.svelte-ljrmzp::-moz-progress-bar{background-color:#326cde!important}table .container{background:transparent!important;font-size:10px!important;padding:0!important}table progress{height:4px!important}.container.svelte-ljrmzp{display:flex;align-items:center;justify-content:center;font-size:12px;border-radius:3px;background:#edf5ff;padding:3rem}.inner.svelte-ljrmzp{max-width:410px;width:100%;text-align:center}.info.svelte-ljrmzp{display:flex;justify-content:space-between}table .info{text-align:left;flex-direction:column}label.svelte-ljrmzp{font-weight:700}.labelValue.svelte-ljrmzp{border-left:1px solid rgba(0,0,0,.1);margin-left:.25rem;padding-left:.5rem}.details.svelte-ljrmzp{font-family:var(--mono-font);font-size:8px;color:#333433;line-height:18px;overflow:hidden;white-space:nowrap}progress.svelte-ljrmzp{width:100%;border:none;border-radius:5px;height:8px;background:#fff}.heading.svelte-17n0qr8{margin-bottom:1.5rem}.sectionItems.svelte-17n0qr8{display:block}.sectionItems .imageContainer{max-height:500px}.container.svelte-17n0qr8{scroll-margin:var(--component-spacer)}hr.svelte-17n0qr8{background:var(--grey);border:none;height:1px;margin:var(--component-spacer) 0;padding:0}@media (min-width: 60rem){.sectionItems.svelte-17n0qr8{display:grid;grid-gap:2rem}}td.svelte-gl9h79{text-align:left}td.labelColumn.svelte-gl9h79{text-align:right;background-color:var(--lt-grey);font-weight:700;width:12%;white-space:nowrap}.tableContainer.svelte-q3hq57{overflow:auto}th.svelte-q3hq57{position:sticky;top:-1px;z-index:2;white-space:nowrap;background:var(--white)}.mainContainer.svelte-mqeomk{max-width:110rem}main.svelte-mqeomk{flex:0 1 auto;max-width:100rem;padding:1.5rem}@media (min-width: 60rem){main.svelte-mqeomk{margin-left:var(--aside-width)}}.embed main{margin:0 auto;min-width:80%}.modal.svelte-1hhf5ym{align-items:center;background:#00000080;cursor:pointer;display:flex;height:100%;justify-content:center;inset:0;overflow:hidden;position:fixed;width:100%;z-index:100}.modalContainer>*{background-color:#fff;border-radius:5px;cursor:default;flex:0 1 auto;padding:1rem;position:relative}.modal img{max-height:80vh!important}.cancelButton.svelte-1hhf5ym{color:#fff;cursor:pointer;font-size:2rem;position:absolute;right:1rem;top:1rem}.cancelButton.svelte-1hhf5ym:hover{color:var(--blue)}.nav.svelte-1kdpgko{border-radius:0 0 5px;display:none;margin:0;top:0}ul.navList.svelte-1kdpgko{list-style-type:none}ul.navList.svelte-1kdpgko ul:where(.svelte-1kdpgko){margin:.5rem 1rem 2rem}.navList.svelte-1kdpgko li:where(.svelte-1kdpgko){display:block;margin:0}.navItem.svelte-1kdpgko li:where(.svelte-1kdpgko):hover{color:var(--blue)}.pageId.svelte-1kdpgko{display:block;border-bottom:1px solid var(--grey);padding:0 .5rem;margin-bottom:1rem}@media (min-width: 60rem){.nav.svelte-1kdpgko{display:block}ul.navList.svelte-1kdpgko{text-align:left}.navList.svelte-1kdpgko li:where(.svelte-1kdpgko){display:block;margin:.5rem 0}}.container.svelte-teyund{width:100%;display:flex;flex-direction:column;position:relative}