chore: adding 'Load this SAE' popup to docs table

docs/assets/saetable.css

@@ -0,0 +1,64 @@
+.saetable-loadSaeId {
+    display: inline-block;
+    margin-top: 10px;
+    cursor: pointer;
+}
+/* Modal styles */
+.saetable-modal {
+    display: none;
+    position: fixed;
+    z-index: 1000;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    margin: 0 !important;
+    background-color: rgba(0,0,0,0.4);
+}
+
+.saetable-modalContent {
+    background-color: white;
+    margin: 15% auto;
+    padding: 2px;
+    border: 1px solid #888;
+    width: 80%;
+    max-width: 600px;
+    border-radius: 5px;
+    position: relative;
+}
+
+.saetable-close {
+    color: #aaa;
+    font-size: 28px;
+    font-weight: bold;
+    cursor: pointer;
+    position: absolute;
+    right: 15px;
+    top: 0;
+    z-index: 1001;
+}
+
+.saetable-close:hover {
+    color: black;
+}
+
+.saetable-modalContent pre {
+    padding: 5px;
+    border-radius: 5px;
+    overflow-x: auto;
+    margin: 0;
+}
+
+.saetable-copyButton {
+    margin: 0 5px 5px 5px;
+    padding: 8px 16px;
+    background-color: #4CAF50;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+.saetable-copyButton:hover {
+    background-color: #45a049;
+}

docs/assets/saetable.js

@@ -0,0 +1,57 @@
+window.SaeTable = {
+  showCode: function (release, saeId) {
+    const modal = document.getElementById("codeModal");
+    const codeContent = document.getElementById("codeContent");
+    codeContent.textContent = `from sae_lens import SAE
+
+release = "${release}"
+sae_id = "${saeId}"
+sae = SAE.from_pretrained(release, sae_id)[0]`;
+    modal.style.display = "block";
+    return false; // Prevent default link behavior
+  },
+
+  closeCode: function () {
+    document.getElementById("codeModal").style.display = "none";
+  },
+
+  copyCode: function () {
+    const codeContent = document.getElementById("codeContent");
+    const textArea = document.createElement("textarea");
+    textArea.value = codeContent.textContent;
+    document.body.appendChild(textArea);
+    textArea.select();
+    document.execCommand("copy");
+    document.body.removeChild(textArea);
+
+    // Show feedback
+    const copyButton = document.querySelector(".saetable-copyButton");
+    const originalText = copyButton.textContent;
+    copyButton.textContent = "Copied!";
+    setTimeout(() => {
+      copyButton.textContent = originalText;
+    }, 2000);
+  },
+
+  selectCode: function (element) {
+    const range = document.createRange();
+    range.selectNodeContents(element);
+    const selection = window.getSelection();
+    selection.removeAllRanges();
+    selection.addRange(range);
+  },
+};
+
+// Close modal when clicking the X
+document
+  .querySelector(".saetable-close")
+  .addEventListener("click", function () {
+    document.getElementById("codeModal").style.display = "none";
+  });
+
+window.addEventListener("click", function (event) {
+  const modal = document.getElementById("codeModal");
+  if (event.target == modal) {
+    modal.style.display = "none";
+  }
+});

docs/generate_sae_table.py

@@ -1,5 +1,6 @@
 # type: ignore
 from pathlib import Path
+from textwrap import dedent
 
 import pandas as pd
 import yaml
@@ -77,9 +78,23 @@ def generate_sae_table():
         # Keep only 'id' and 'path' columns
         df = df[INCLUDED_CFG]
 
+        def style_id(val):
+            return f"<div>{val}</div><a class=\"saetable-loadSaeId\" onclick=\"SaeTable.showCode('{release}', '{val}')\">Load this SAE</a>"
+
+        df["id"] = df["id"].apply(style_id)
         table = df.to_markdown(index=False)
         markdown_content += table + "\n\n"
-
+    markdown_content += dedent(
+        """
+        <div id="codeModal" class="saetable-modal">
+            <div class="saetable-modalContent">
+                <span class="saetable-close" onclick="SaeTable.closeCode()">&times;</span>
+                <pre><code id="codeContent" onclick="SaeTable.selectCode(this)"></code></pre>
+                <button onclick="SaeTable.copyCode()" class="saetable-copyButton">Copy Code</button>
+            </div>
+        </div>
+        """
+    )
     # Write the content to a Markdown file
     output_path = Path("docs/sae_table.md")
     with open(output_path, "w") as file:

mkdocs.yml

@@ -36,12 +36,13 @@ theme:
 
 
 extra_javascript:
-  - javascript/custom_formatting.js
+  - assets/saetable.js
   # The below three make MathJax work, see https://squidfunk.github.io/mkdocs-material/reference/mathjax/
-  - javascript/mathjax.js
-  - https://polyfill.io/v3/polyfill.min.js?features=es6
+  # - javascript/mathjax.js
   - https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js
 
+extra_css:
+  - assets/saetable.css
 nav:
   - Home: index.md
   - Roadmap: roadmap.md