/* ========================================================= HEADER DROPDOWN MENUS ========================================================= */ function addDropdown() { const dropdownConfig = { "CUT&RUN": `

`, "CUT&Tag": `

Experimental Controls & Success Metrics

Sample Prep Protocol & Related FAQs

Antibody Validation & FAQs

SNAP-CUTANA Spike-Ins

Sequencing & Data Analysis

CUT&Tag DIY Protocol

`, "NEW! Fiber-Seq": `

Explore Fiber-seq

NEW! Shallow QC Sequencing for Fiber-seq

`, "More Technologies": `

NEW! ATAC-seq

NEW! CUTANA Sample Prep

CUTANA Cloud

Library Prep Kit

Nucleosomes

meCUT&RUN

` }; const navLinks = document.querySelectorAll("a"); navLinks.forEach(link => { const text = link.textContent.trim(); if ( dropdownConfig[text] && !link.dataset.dropdownAttached ) { link.dataset.dropdownAttached = "true"; const dropdown = document.createElement("ul"); dropdown.className = "submenu"; dropdown.innerHTML = dropdownConfig[text]; const parentLi = link.closest("li"); if (parentLi) { parentLi.classList.add("nav-dropdown"); parentLi.appendChild(dropdown); initializeNestedSubmenus(dropdown); } } }); } /* --------------------------------------------------------- SECOND-LEVEL FLYOUT MENUS --------------------------------------------------------- */ function ensureNestedMenuArrowStyles() { if (document.getElementById("epicypher-nested-menu-arrow-styles")) { return; } const style = document.createElement("style"); style.id = "epicypher-nested-menu-arrow-styles"; style.textContent = ` .nav-dropdown > .submenu > li.has-children > a { position: relative; padding-right: 28px !important; } /* Remove old Unicode arrow that was displaying incorrectly. */ .nav-dropdown > .submenu > li.has-children > a::after { content: none !important; display: none !important; } /* CSS-drawn arrow avoids character-encoding problems. */ .nav-dropdown > .submenu > li.has-children > a > .submenu-arrow { position: absolute; right: 10px; top: 50%; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 6px solid currentColor; transform: translateY(-50%); pointer-events: none; } `; document.head.appendChild(style); } function initializeNestedSubmenus(dropdown) { ensureNestedMenuArrowStyles(); const parents = dropdown.querySelectorAll("li.has-children"); parents.forEach(parent => { if ( parent.dataset.nestedMenuAttached === "true" ) { return; } const submenu = parent.querySelector( ":scope > .submenu-level2" ); if (!submenu) { return; } parent.dataset.nestedMenuAttached = "true"; parent.style.position = "relative"; const parentLink = parent.querySelector(":scope > a"); if ( parentLink && !parentLink.querySelector( ":scope > .submenu-arrow" ) ) { const arrow = document.createElement("span"); arrow.className = "submenu-arrow"; arrow.setAttribute( "aria-hidden", "true" ); parentLink.appendChild(arrow); } /* * Slight overlap prevents a dead zone * between first- and second-level menus. */ submenu.style.position = "absolute"; submenu.style.top = "0"; submenu.style.left = "calc(100% - 2px)"; submenu.style.right = "auto"; submenu.style.zIndex = "10001"; submenu.style.display = "none"; submenu.style.visibility = "hidden"; submenu.style.opacity = "0"; submenu.style.pointerEvents = "none"; function openSubmenu() { const siblings = parent.parentElement ? parent.parentElement.querySelectorAll( ":scope > li.has-children" ) : []; siblings.forEach(sibling => { if (sibling !== parent) { closeNestedSubmenu( sibling ); } }); submenu.style.display = "block"; submenu.style.visibility = "visible"; submenu.style.opacity = "1"; submenu.style.pointerEvents = "auto"; /* * Default to opening right. */ submenu.style.left = "calc(100% - 2px)"; submenu.style.right = "auto"; /* * If it would run off-screen, * open it to the left instead. */ const rect = submenu.getBoundingClientRect(); if ( rect.right > window.innerWidth - 8 ) { submenu.style.left = "auto"; submenu.style.right = "calc(100% - 2px)"; } } function closeSubmenu() { closeNestedSubmenu( parent ); } parent.addEventListener( "mouseenter", openSubmenu ); parent.addEventListener( "mouseleave", closeSubmenu ); /* Keyboard accessibility */ parent.addEventListener( "focusin", openSubmenu ); parent.addEventListener( "focusout", event => { if ( !parent.contains( event.relatedTarget ) ) { closeSubmenu(); } } ); }); } function closeNestedSubmenu(parent) { const submenu = parent.querySelector( ":scope > .submenu-level2" ); if (!submenu) { return; } submenu.style.display = "none"; submenu.style.visibility = "hidden"; submenu.style.opacity = "0"; submenu.style.pointerEvents = "none"; } /* --------------------------------------------------------- DOCUMENT360 DYNAMIC NAVIGATION --------------------------------------------------------- */ function startDropdownObserver() { addDropdown(); if (!document.body) { return; } const observer = new MutationObserver(() => { addDropdown(); }); observer.observe( document.body, { childList: true, subtree: true } ); } if ( document.readyState === "loading" ) { document.addEventListener( "DOMContentLoaded", startDropdownObserver ); } else { startDropdownObserver(); } /* ========================================================= DATATABLES FOR NORMAL TABLES ONLY ========================================================= */ function initializeNormalTables() { if ( typeof $ === "undefined" || !$.fn || !$.fn.DataTable ) { return; } /* * Publication table is explicitly excluded. */ $("table:not(.publication-table)").each(function () { if (!$.fn.DataTable.isDataTable(this)) { $(this).DataTable(); } }); } document.addEventListener( "DOMContentLoaded", initializeNormalTables ); document.addEventListener( "articleload", initializeNormalTables ); window.addEventListener( "articleload", initializeNormalTables ); /* ========================================================= STABLE KB CARD FLIP ========================================================= */ document.addEventListener("mouseover", (e) => { const arrow = e.target.closest(".kb-flip-arrow"); if (!arrow) return; const card = arrow.closest(".kb-card"); if ( !card || card.classList.contains("kb-card-static") ) { return; } card.classList.add("kb-flipped"); }); document.addEventListener("mouseout", (e) => { const card = e.target.closest(".kb-card"); if (!card) return; if (!card.contains(e.relatedTarget)) { card.classList.remove("kb-flipped"); } }); /* ========================================================= CSV PUBLICATION TABLE ========================================================= */ (function () { const CSV_URL = "https://cdn.document360.io/1fc69f91-cf1e-45ab-bc51-4063eb80e37c/Images/Documentation/celltypes_abbrevfordoc360.csv"; const MARKER = "[[Publication_Table]]"; /* ----------------------------------------------------- CSV PARSER ----------------------------------------------------- */ function parseCSV(text) { const rows = []; let row = []; let cell = ""; let insideQuotes = false; for ( let i = 0; i < text.length; i++ ) { const char = text[i]; const nextChar = text[i + 1]; if (char === '"') { if ( insideQuotes && nextChar === '"' ) { cell += '"'; i++; } else { insideQuotes = !insideQuotes; } } else if ( char === "," && !insideQuotes ) { row.push(cell); cell = ""; } else if ( ( char === "\n" || char === "\r" ) && !insideQuotes ) { if ( char === "\r" && nextChar === "\n" ) { i++; } row.push(cell); if ( row.some( value => value.trim() !== "" ) ) { rows.push(row); } row = []; cell = ""; } else { cell += char; } } if ( cell.length > 0 || row.length > 0 ) { row.push(cell); if ( row.some( value => value.trim() !== "" ) ) { rows.push(row); } } return rows; } /* ----------------------------------------------------- FIND ARTICLE MARKER ----------------------------------------------------- */ function findMarker() { const article = document.querySelector("article") || document.querySelector(".article-content") || document.querySelector(".content") || document.body; const elements = article.querySelectorAll( "p, div, span" ); for ( const element of elements ) { if ( element.textContent.trim() === MARKER ) { return element; } } return null; } /* ----------------------------------------------------- BUILD TABLE ----------------------------------------------------- */ async function loadPublicationTable() { const marker = findMarker(); /* * This page does not contain * the publication table. */ if (!marker) return; /* * Prevent duplicate loads. */ if ( marker.dataset .publicationTableLoading === "true" ) { return; } marker.dataset .publicationTableLoading = "true"; marker.textContent = "Loading table..."; try { const response = await fetch(CSV_URL); if (!response.ok) { throw new Error( "CSV request failed with status " + response.status ); } const csvText = await response.text(); const data = parseCSV(csvText); if ( data.length < 2 ) { throw new Error( "CSV does not contain enough data." ); } const headers = data[0]; const rows = data.slice(1); /* --------------------------------------------- MAIN WRAPPER --------------------------------------------- */ const wrapper = document.createElement( "div" ); wrapper.className = "publication-table-wrapper"; /* --------------------------------------------- TABLE CONTROLS --------------------------------------------- */ const tableControls = document.createElement( "div" ); tableControls.className = "publication-table-controls"; const restoreBtn = document.createElement( "button" ); restoreBtn.type = "button"; restoreBtn.className = "restore-columns-btn"; restoreBtn.textContent = "Restore All Columns"; restoreBtn.style.display = "none"; const clearSearchesBtn = document.createElement( "button" ); clearSearchesBtn.type = "button"; clearSearchesBtn.className = "clear-searches-btn"; clearSearchesBtn.textContent = "Clear All Searches"; clearSearchesBtn.style.display = "none"; tableControls.appendChild( restoreBtn ); tableControls.appendChild( clearSearchesBtn ); wrapper.appendChild( tableControls ); /* --------------------------------------------- SCROLL CONTAINER --------------------------------------------- */ const scrollContainer = document.createElement( "div" ); scrollContainer.className = "publication-table-scroll"; /* --------------------------------------------- HORIZONTAL SCROLL FALLBACK BUTTONS --------------------------------------------- */ const scrollLeftBtn = document.createElement( "button" ); scrollLeftBtn.type = "button"; scrollLeftBtn.className = "publication-scroll-btn publication-scroll-left-btn"; scrollLeftBtn.textContent = "Scroll Left"; scrollLeftBtn.style.display = "none"; const scrollRightBtn = document.createElement( "button" ); scrollRightBtn.type = "button"; scrollRightBtn.className = "publication-scroll-btn publication-scroll-right-btn"; scrollRightBtn.textContent = "Scroll Right"; scrollRightBtn.style.display = "none"; tableControls.appendChild( scrollLeftBtn ); tableControls.appendChild( scrollRightBtn ); function updateScrollButtons() { const canScroll = scrollContainer.scrollWidth > scrollContainer.clientWidth + 2; scrollLeftBtn.style.display = canScroll ? "" : "none"; scrollRightBtn.style.display = canScroll ? "" : "none"; } scrollLeftBtn.addEventListener( "click", function () { scrollContainer.scrollBy({ left: -350, behavior: "smooth" }); } ); scrollRightBtn.addEventListener( "click", function () { scrollContainer.scrollBy({ left: 350, behavior: "smooth" }); } ); scrollContainer.addEventListener( "scroll", updateScrollButtons ); window.addEventListener( "resize", updateScrollButtons ); /* --------------------------------------------- TABLE --------------------------------------------- */ const table = document.createElement( "table" ); /* * This class excludes this table * from DataTables. */ table.className = "publication-table"; /* --------------------------------------------- HEADER --------------------------------------------- */ const thead = document.createElement( "thead" ); const headerRow = document.createElement( "tr" ); const columnFilters = []; let columnFilterTimer; function updateClearSearchesButton() { const hasActiveSearch = columnFilters.some( input => input.value.trim() !== "" ); clearSearchesBtn.style.display = hasActiveSearch ? "" : "none"; } function applyColumnFilters() { updateClearSearchesButton(); const activeFilters = columnFilters .map(input => ({ index: Number( input.dataset.columnIndex ), query: input.value .trim() .toLowerCase(), hidden: input.closest("th") && input.closest("th") .style.display === "none" })) .filter(filter => filter.query && !filter.hidden ); Array .from(tbody.rows) .forEach(row => { const matches = activeFilters.every( filter => { const cell = row.cells[ filter.index ]; return ( cell && cell.textContent .toLowerCase() .includes( filter.query ) ); } ); row.style.display = matches ? "" : "none"; }); } headers.forEach( ( header, columnIndex ) => { const th = document.createElement( "th" ); const name = header.trim(); switch ( name.toLowerCase() ) { case "species": th.style.width = "90px"; th.style.minWidth = "90px"; break; case "cell type": th.style.width = "180px"; th.style.minWidth = "180px"; break; case "target": th.style.width = "140px"; th.style.minWidth = "140px"; break; case "antibody": th.style.width = "170px"; th.style.minWidth = "170px"; break; case "journal": th.style.width = "170px"; th.style.minWidth = "170px"; break; case "pmid": th.style.width = "90px"; th.style.minWidth = "90px"; break; case "year": th.style.width = "70px"; th.style.minWidth = "70px"; break; default: th.style.width = "180px"; th.style.minWidth = "180px"; } const headerTop = document.createElement( "div" ); headerTop.className = "publication-header-top"; const label = document.createElement( "span" ); label.className = "publication-header-label"; label.textContent = name; const hideBtn = document.createElement( "button" ); hideBtn.type = "button"; hideBtn.className = "column-hide-btn"; hideBtn.textContent = "×"; hideBtn.title = "Hide this column"; hideBtn.setAttribute( "aria-label", "Hide " + name + " column" ); hideBtn.addEventListener( "click", function (event) { event.preventDefault(); event.stopPropagation(); table .querySelectorAll( "tr" ) .forEach(row => { if ( row.cells[ columnIndex ] ) { row.cells[ columnIndex ].style.display = "none"; } }); restoreBtn.style.display = ""; applyColumnFilters(); } ); headerTop.appendChild( label ); headerTop.appendChild( hideBtn ); const columnSearch = document.createElement( "input" ); columnSearch.type = "search"; columnSearch.className = "publication-column-search"; columnSearch.placeholder = "Search " + name; columnSearch.dataset.columnIndex = String(columnIndex); columnSearch.setAttribute( "aria-label", "Search " + name + " column" ); columnSearch.addEventListener( "input", function () { clearTimeout( columnFilterTimer ); columnFilterTimer = setTimeout( applyColumnFilters, 100 ); } ); columnFilters.push( columnSearch ); th.appendChild( headerTop ); th.appendChild( columnSearch ); headerRow.appendChild( th ); } ); thead.appendChild( headerRow ); table.appendChild( thead ); /* --------------------------------------------- BODY --------------------------------------------- */ const tbody = document.createElement( "tbody" ); const fragment = document.createDocumentFragment(); rows.forEach(rowData => { const tr = document.createElement( "tr" ); /* * Cache row text for fast searching. */ tr.dataset.searchText = rowData .join(" ") .toLowerCase(); headers.forEach( ( header, index ) => { const td = document.createElement( "td" ); const value = rowData[index] ? rowData[index] .trim() : ""; /* * Convert cells containing only * a URL into clickable links. */ if ( /^https?:\/\/\S+$/i.test( value ) ) { const link = document.createElement( "a" ); link.href = value; link.textContent = value; link.target = "_blank"; link.rel = "noopener noreferrer"; td.appendChild( link ); } else { td.textContent = value; } tr.appendChild( td ); } ); fragment.appendChild( tr ); }); tbody.appendChild( fragment ); table.appendChild( tbody ); /* * Table lives inside the horizontal * scrolling container. */ scrollContainer.appendChild( table ); wrapper.appendChild( scrollContainer ); /* --------------------------------------------- CLEAR COLUMN SEARCHES --------------------------------------------- */ clearSearchesBtn.addEventListener( "click", function () { columnFilters.forEach( input => { input.value = ""; } ); applyColumnFilters(); } ); /* --------------------------------------------- RESTORE HIDDEN COLUMNS --------------------------------------------- */ restoreBtn.addEventListener( "click", function () { table .querySelectorAll( "tr" ) .forEach(row => { Array .from( row.cells ) .forEach( cell => { cell.style.display = ""; } ); }); restoreBtn.style.display = "none"; applyColumnFilters(); } ); /* --------------------------------------------- REPLACE [[Publication_Table]] --------------------------------------------- */ marker.replaceWith( wrapper ); requestAnimationFrame( updateScrollButtons ); } catch (error) { console.error( "Publication table could not be loaded:", error ); marker.textContent = "The table could not be loaded. Please refresh the page."; } } /* ----------------------------------------------------- INITIAL LOAD ----------------------------------------------------- */ if ( document.readyState === "loading" ) { document.addEventListener( "DOMContentLoaded", loadPublicationTable ); } else { loadPublicationTable(); } /* ----------------------------------------------------- DOCUMENT360 SPA NAVIGATION ----------------------------------------------------- */ document.addEventListener( "articleload", loadPublicationTable ); window.addEventListener( "articleload", loadPublicationTable ); })();

CUT&RUN Protocol Video