Md to react (#6)

* added aggrid

* added aggrid

# Conflicts:
#	docs/index.html
#	profile_manager/index.md

* replaced readers with aggrid

* added profile table & removed markdown

* Delete profile_manager/__pycache__/__init__.cpython-312.pyc

* Delete profile_manager/__pycache__/parse_ast.cpython-312.pyc

---------

Co-authored-by: David H <113030128+herrdivad@users.noreply.github.com>

Author: headri

build/index.md

@@ -2,8 +2,6 @@
 Chemotion Converter
 ===================
 
-
-Chemotion Converter is a very powerful python file converter running as a stand-alone flask server or included in an ELN and called via API during file upload. For local and offline users, it is also possible to use it as an CLI tool.
 # Profiles
 
 

docs/index.html

@@ -6,13 +6,10 @@
 from importlib.resources import files
 from pathlib import Path
 
-import markdown
 import pyprojroot
 from converter_app.profile_migration.utils.registration import Migrations
 from converter_app.validation import validate_profile
 
-from mdutils.mdutils import MdUtils # https://github.com/didix21/mdutils
-
 from profile_manager.parse_ast import read_metadata_from_readercode
 
 program_name = "Chemotion Converter"
@@ -48,13 +45,6 @@ def build_index():
     docs_reader_dir = Path(base_path, "docs", "atch", "server", "readers")
     os.makedirs(docs_profile_dir, exist_ok=True)
     os.makedirs(docs_reader_dir, exist_ok=True)
-    md_file = MdUtils(file_name='index', title=program_name)
-    # Additional Markdown syntax...
-    md_file.new_paragraph(f"{program_name} is a very powerful python file converter "
-                          f"running as a stand-alone flask server or included in an ELN or scientific Repository "
-                          f"(like the {md_file.new_inline_link(link="https://chemotion.net/", text="Chemotion ELN")}, other ELNs we cannot guarantee) "
-                          f"and called via API during file upload. "
-                          f"For local and offline users, it is also possible to use it as an CLI tool.")
 
     reader_dir = files("converter_app") / "readers"
 
@@ -74,7 +64,6 @@ def build_index():
                         shutil.copyfileobj(
                             cast(BinaryIO, source), cast(BinaryIO, dest)
                         )
-                reader_link = f"<a href=\"atch/server/readers/{reader.name}\" download>{reader.name}</a>"
 
                 reader_entry = {
                     "class name": my_ast[0],
@@ -83,24 +72,18 @@ def build_index():
                     "check": my_ast[3].strip() if my_ast[3] else "",
                 }
 
-                readers_dict[reader_link] = reader_entry
+                readers_dict[reader.name] = reader_entry
 
             except Exception as e:
                 print(f"Skipping {reader.name}: {e}")
                 continue
 
-    md_file.new_header(level=1, title='Readers')
-
-    md_file.new_paragraph("A reader is a python class file handling the translation of your input file format to a usable python object."
-                          " It is created by providing an example file to the developers or python coders and used and defined by the " +
-                          md_file.new_inline_link(link="https://github.com/ComPlat/chemotion-converter-app",
-                                                  text="converter app backend") + ".")
-
     table_header = ["file name (click to download from this GitHub.io mirror)"]
     if reader_entry:
         table_header += list(reader_entry.keys())
-    dict_to_md_table(md_file, table_header, readers_dict)
 
+    readers_row_data, readers_column_defs = readers_dict_to_grid_config()
+    readers_table = dict_to_ag_grid_html(readers_row_data, readers_column_defs,  "readers")
 
     for profile in profile_dir.glob("*.json"):
         with open(profile, "r") as file:
@@ -130,88 +113,136 @@ def build_index():
 
         # Copy profile JSON to docs and link to the local docs path
         shutil.copy2(profile, docs_profile_dir / profile.name)
-        profile_link = (
-            f"<a href=\"atch/server/profiles/{profile_id}.json\" download>{profile_id}</a>"
-        )
-        profiles_dict[profile_link] = profile_entry
-
-    md_file.new_header(level=1, title='Profiles')
-
-    md_file.new_paragraph("A profile is JSON file defining a ruleset on how to convert your input file."
-                          " Normally, it is created by uploading an example of your input file to the GUI of the "+
-                          md_file.new_inline_link(link="https://github.com/ComPlat/chemotion-converter-client", text="converter client frontend") + ".")
+        profiles_dict[profile_id] = profile_entry
 
     table_header = ["id (click to download from this GitHub.io mirror)"] + list(profile_entry.keys())
     profiles_sorted = dict(sorted(
         profiles_dict.items(),
         key=lambda item: (item[1].get("extension") or "").lower(),
     ))
-    dict_to_md_table(md_file, table_header, profiles_sorted)
-
-    md_file.create_md_file()
+    profiles_row_data, profiles_column_defs = profiles_dict_to_grid_config()
+    profiles_table = dict_to_ag_grid_html(profiles_row_data, profiles_column_defs, "profiles")
 
     template_path = Path(__file__).parent.joinpath("index_template.html")
-    fill_md_into_html(md_file, template_path)
+    fill_data_into_html(template_path, readers_table, profiles_table)
 
 
+def readers_dict_to_grid_config():
+    row_data = [
+        {"file name": k, **v}
+        for k, v in readers_dict.items()
+    ]
 
-def fill_md_into_html(md_file: MdUtils, html_file: Path):
+    column_defs = [
+        {"field": "file name", "pinned": "left",  "cellRenderer": "linkRenderer"},
+        *[
+            {
+                "field": key,
+                **({"cellRenderer": "codeCellRenderer", "flex": 3} if key == "check" else {})
+            }
+            for key in next(iter(readers_dict.values()))
+        ],
+    ]
+    return row_data, column_defs
+
+def profiles_dict_to_grid_config():
+    row_data = [
+        {"id": k, **v}
+        for k, v in profiles_dict.items()
+    ]
+    column_defs = [
+        {"field": "id", "pinned": "left", "cellRenderer": "linkRenderer"},
+        *[
+            {
+                "field": key,
+                **({"valueFormatter": "value && value.map(v => `${v[0]}: ${v[1]}`).join(', ')"}
+                   if key in ["identifiers", "software", "devices"] else {}
+                )
+            }
+            for key in next(iter(profiles_dict.values()))
+        ],
+    ]
+    return row_data, column_defs
+
+
+def dict_to_ag_grid_html(row_data, column_defs, dict_type):
+    grid_id = f"""{dict_type}Grid"""
+
+    return f"""<div id="{grid_id}" class="ag-theme-alpine" style="height: 400px; width: 100%;"></div>
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ag-grid-community/styles/ag-grid.css">
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ag-grid-community/styles/ag-theme-alpine.css">
+        <script src="https://cdn.jsdelivr.net/npm/ag-grid-community/dist/ag-grid-community.min.js"></script>
+        
+        <script>
+        document.addEventListener("DOMContentLoaded", function () {{
+        
+          function codeCellRenderer(params) {{
+            if (!params.value) return "";
+        
+            return `
+              <code style="
+                font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+                white-space: pre-wrap;
+                display: block;
+                font-size: 12px;
+                background: #f6f8fa;
+                padding: 6px 8px;
+                border-radius: 6px;
+                line-height: 1.4;
+              ">${{params.value}}</code>
+            `;
+          }}
+          
+          function linkRenderer(params) {{
+            if (!params.value) return "";
+              return `<a href="atch/server/{dict_type}/${{params.value}}{'.json' if dict_type == 'profiles' else ''}" download
+                         target="_blank"
+                         rel="noopener"
+                      >
+                ${{params.value}}
+              </a>`;
+          }}
+        
+          const gridOptions = {{
+            theme: "legacy",
+            columnDefs: {json.dumps(column_defs)},
+            rowData: {json.dumps(row_data)},
+            defaultColDef: {{
+              flex: 1,
+              sortable: true,
+              filter: true,
+              resizable: true,
+              wrapText: true,
+              autoHeight: true
+            }},
+            components: {{
+              codeCellRenderer: codeCellRenderer,
+              linkRenderer: linkRenderer,
+            }}
+          }};
+        
+          agGrid.createGrid(
+            document.getElementById("{grid_id}"),
+            gridOptions
+          );
+        }});
+        </script>
+        """
+
+
+
+def fill_data_into_html(html_file: Path, readers_table, profiles_table):
     with open(html_file, "r") as file:
         html_content = file.read()
-    markdown_content = markdown.markdown(md_file.file_data_text, extensions=["tables", "fenced_code"])
     html_content = html_content.replace("{{ PROGRAM_NAME }}", program_name)
-    html_content = html_content.replace("{{  TABLE_CONTENT  }}", markdown_content)
+    html_content = html_content.replace("{{ READERS_TABLE }}", readers_table)
+    html_content = html_content.replace("{{ PROFILES_TABLE }}", profiles_table)
     base_path = pyprojroot.find_root(pyprojroot.has_dir("build"))
     os.makedirs(os.path.join(base_path, "docs"), exist_ok=True)
     index_path = Path(base_path, "docs", "index.html")
     with open(index_path, "w") as file:
         file.write(html_content)
 
-def convert_docs_md_to_html():
-    docs_dir = Path(__file__).parent.parent.joinpath("docs")
-    if not docs_dir.exists():
-        return
-    for md_file in docs_dir.glob("*.md"):
-        with open(md_file, "r") as file:
-            md_text = file.read()
-        html_body = markdown.markdown(md_text, extensions=["tables", "fenced_code"])
-        html_title = md_file.stem.replace("_", " ").title()
-        html_text = (
-            "<!doctype html>\n"
-            "<html lang=\"en\">\n"
-            "<head>\n"
-            "  <meta charset=\"utf-8\">\n"
-            f"  <title>{html_title}</title>\n"
-            "  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n"
-            "  <style>\n"
-            "    body { font-family: Arial, sans-serif; margin: 2rem; line-height: 1.6; }\n"
-            "    pre { overflow-x: auto; }\n"
-            "    code { font-family: \"Courier New\", monospace; }\n"
-            "    table { border-collapse: collapse; }\n"
-            "    th, td { border: 1px solid #ccc; padding: 0.4rem 0.6rem; }\n"
-            "  </style>\n"
-            "</head>\n"
-            "<body>\n"
-            f"{html_body}\n"
-            "</body>\n"
-            "</html>\n"
-        )
-        html_path = md_file.with_suffix(".html")
-        with open(html_path, "w") as file:
-            file.write(html_text)
-
-def dict_to_md_table(md_file, table_header, dict_to_write):
-    table_content = []
-    for key in dict_to_write:
-        row = [key] + [clean_value(value) for value in dict_to_write[key].values()]
-        table_content.append(row)
-    table = [table_header] + table_content
-    # Flatten for Markdown or similar tools
-    flat_table = [cell for row in table for cell in row]
-    md_file.new_line()
-    md_file.new_table(columns=len(table_header), rows=int(len(flat_table) / len(table_header)), text=flat_table)
-
-
 def validate_profiles():
     profile_dir = Path(__file__).parent.parent.joinpath('profiles/public')
     for profile in profile_dir.glob("*.json"):
@@ -229,5 +260,4 @@ def migrate_profiles():
     if len(sysargs) >= 2:
         if sys.argv[1] == 'build_index':
             build_index()
-            convert_docs_md_to_html()
     print("EOC reached")