Merge pull request #8753 from madhavajay/madhava/css

Fixed broken HTML in job widget
OpenMined · Apr 25, 2024 · 24036b3 · 24036b3
2 parents a977068 + 9769a37
commit 24036b3
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 23 deletions.
diff --git a/packages/syft/src/syft/service/api/api.py b/packages/syft/src/syft/service/api/api.py
@@ -112,12 +112,16 @@ def _coll_repr_(self) -> dict[str, Any]:
                 for node in ast.walk(private_parsed_code)
                 if isinstance(node, ast.FunctionDef)
             ][0]
+        worker_pool = "UNSET (DEFAULT)"
+        if self.worker_pool is not None:
+            worker_pool = self.worker_pool
         return {
             "API path": self.path,
             "Signature": self.path + str(self.signature),
             "Access": self.access,
             "Mock Function": mock_function_name,
             "Private Function": private_function_name,
+            "Worker Pool": worker_pool,
         }
 
 

diff --git a/packages/syft/src/syft/service/job/html_template.py b/packages/syft/src/syft/service/job/html_template.py
@@ -1,5 +1,6 @@
 # relative
 from ...util.notebook_ui.notebook_addons import CSS_CODE
+from ...util.notebook_ui.notebook_addons import JS_DOWNLOAD_FONTS
 
 type_html = """
             <div class="label label-light-blue"
@@ -77,6 +78,7 @@
             </td>
         </tr>
         ${logs_lines_html}
+        </table>
     </div>
 </div>
 """
@@ -120,20 +122,21 @@
 """
 
 LIST_CSS = """
-    ul {
+<style>
+    .syft-widget ul {
         list-style-type: none;
         margin: 0;
         padding: 0;
         overflow: hidden;
     }
 
-    li {
+    .syft-widget li {
         float: left;
         border-bottom: solid;
         border-bottom-color: #CFCDD6;
     }
 
-    li a {
+    .syft-widget li a {
         display: block;
         text-align: center;
         padding: 14px 16px;
@@ -153,9 +156,11 @@
         color: #1F567A
     }
 
-    li a:hover {
+    .syft-widget li a:hover {
         background-color: #C2DEF0;
-    }"""
+    }
+</style>
+"""
 
 result_html = """<div id="${result_tab_id}" class="tab-${identifier}" style="background: #F4F3F6;
     border-color: #CFCDD6; border-width: 0.5px; border-style: solid; padding: 24px; gap: 8px; margin-top: 24px">
@@ -166,17 +171,46 @@
 """
 
 job_repr_template = f"""
-    <style>
-    {CSS_CODE}
-    </style>
-    <style>
-    {LIST_CSS}
-    </style>
-    {header_line_html}
-    {attrs_html}
-    {tabs_html}
-    {result_html}
-    {logs_html}
-    {onclick_html}
-    <div style='height: 16px;'></div>
+<!-- Start job_repr_template -->
+<div class="syft-widget">
+
+<!-- Start JS_DOWNLOAD_FONTS -->
+{JS_DOWNLOAD_FONTS}
+<!-- End JS_DOWNLOAD_FONTS -->
+
+<!-- Start CSS_CODE -->
+{CSS_CODE}
+<!-- End CSS_CODE -->
+
+<!-- Start LIST_CSS -->
+{LIST_CSS}
+<!-- End LIST_CSS -->
+
+<!-- Start header_line_html -->
+{header_line_html}
+<!-- End header_line_html -->
+
+<!-- Start attrs_html -->
+{attrs_html}
+<!-- End attrs_html -->
+
+<!-- Start tabs_html -->
+{tabs_html}
+<!-- End tabs_html -->
+
+<!-- Start result_html -->
+{result_html}
+<!-- End result_html -->
+
+<!-- Start logs_html -->
+{logs_html}
+<!-- End logs_html -->
+
+<!-- Start onclick_html -->
+{onclick_html}
+<!-- End onclick_html -->
+
+<div style='height: 16px;'></div>
+</div>
+<!-- End job_repr_template -->
 """
diff --git a/packages/syft/src/syft/util/notebook_ui/components/sync.py b/packages/syft/src/syft/util/notebook_ui/components/sync.py
@@ -262,7 +262,7 @@ def to_html(self) -> str:
         third_line_html = f"<span style='color: #5E5A72;'>This would sync <span style='color: #B8520A'>{num_diffs} changes </span> from <i>{source_side} Node</i> to <i>{target_side} Node</i></span>"  # noqa: E501
 
         header_html = f"""
-        <style>{style}</style>
+        {style}
         {first_line_html}
         {second_line_html}
         {third_line_html}

diff --git a/packages/syft/src/syft/util/notebook_ui/notebook_addons.py b/packages/syft/src/syft/util/notebook_ui/notebook_addons.py
@@ -35,14 +35,14 @@
 
 CSS = """
 <style>
-  body[data-jp-theme-light='false'] {
+  .syft-widget body[data-jp-theme-light='false'] {
         --primary-color: #111111;
         --secondary-color: #212121;
         --tertiary-color: #CFCDD6;
         --button-color: #111111;
   }
 
-  body {
+  .syft-widget body {
         --primary-color: #ffffff;
         --secondary-color: #f5f5f5;
         --tertiary-color: #000000de;
@@ -256,6 +256,7 @@
         font-weight: 600;
         background-color: var(--secondary-color) !important;
         color: var(--tertiary-color);
+        height: 100%;
     }
 
     .center-content-cell{
@@ -553,7 +554,6 @@
 """
 
 CSS_CODE = f"""
-{JS_DOWNLOAD_FONTS}
 {CSS}
 """
 
@@ -918,7 +918,7 @@ def create_table_template(
         cols = (len(items[0].keys())) * 4
     if "{cols}" in grid_template_columns:
         grid_template_columns = grid_template_columns.format(cols=cols)
-    return template.substitute(
+    final_html = template.substitute(
         uid=str(UID()),
         element=items_dict,
         list_name=list_name,
@@ -930,3 +930,4 @@ def create_table_template(
         grid_template_columns=grid_template_columns,
         grid_template_cell_columns=grid_template_cell_columns,
     )
+    return final_html