TSUMUGI 1.0.1__py3-none-any.whl

TSUMUGI/web/app/js/search/phenotypeSearcher.js

@@ -0,0 +1,292 @@
+// ############################################################
+// Phenotype Search and Highlight Functions
+// ############################################################
+
+// Hold the available and selected phenotype lists
+let allPhenotypes = [];
+let selectedPhenotypes = new Set();
+let cytoscapeInstance = null;
+
+/**
+ * Initialize the phenotype search feature.
+ * @param {Object} params - Initialization parameters
+ * @param {Object} params.cy - Cytoscape instance
+ * @param {Array} params.elements - Network elements
+ */
+export function setupPhenotypeSearch({ cy, elements }) {
+    cytoscapeInstance = cy;
+    initializePhenotypeSearch(cy);
+    setupPhenotypeSearchInput();
+
+    // Expose helper for the inline onclick handlers
+    window.removeSelectedPhenotype = removeSelectedPhenotype;
+
+    // Make updatePhenotypeHighlight available to other modules
+    window.updatePhenotypeHighlight = () => updatePhenotypeHighlight(cy);
+
+    // Allow other modules to refresh the phenotype list after filtering
+    window.refreshPhenotypeList = () => refreshPhenotypeList();
+}
+
+/**
+ * Build the phenotype list from the currently visible genes.
+ * @param {Object} cy - Cytoscape instance
+ */
+function initializePhenotypeSearch(cy) {
+    const phenotypeSet = new Set();
+
+    // Extract phenotypes only from visible nodes
+    cy.nodes().forEach((node) => {
+        // Skip nodes that are hidden
+        if (node.style("display") !== "none" && !node.hidden()) {
+            const nodeData = node.data();
+            if (nodeData.phenotype) {
+                const phenotypes = Array.isArray(nodeData.phenotype) ? nodeData.phenotype : [nodeData.phenotype];
+                phenotypes.forEach((phenotype) => {
+                    if (phenotype && phenotype.trim() !== "") {
+                        phenotypeSet.add(phenotype.trim());
+                    }
+                });
+            }
+        }
+    });
+
+    allPhenotypes = Array.from(phenotypeSet).sort();
+}
+
+/**
+ * Wire up event handlers for the phenotype search input.
+ */
+function setupPhenotypeSearchInput() {
+    const searchInput = document.getElementById("phenotype-search");
+    const suggestionsList = document.getElementById("phenotype-suggestions");
+
+    if (!searchInput || !suggestionsList) {
+        console.warn("Phenotype search elements not found in DOM");
+        return;
+    }
+
+    searchInput.addEventListener("input", function () {
+        const searchTerm = this.value.toLowerCase().trim();
+
+        if (searchTerm.length === 0) {
+            suggestionsList.hidden = true;
+            return;
+        }
+
+        // Filter out phenotypes that are already selected
+        const filteredPhenotypes = allPhenotypes.filter(
+            (phenotype) => phenotype.toLowerCase().includes(searchTerm) && !selectedPhenotypes.has(phenotype),
+        );
+
+        displayPhenotypeSuggestions(filteredPhenotypes);
+    });
+
+    // Display suggestions when the field is clicked
+    searchInput.addEventListener("click", function () {
+        const searchTerm = this.value.toLowerCase().trim();
+
+        if (searchTerm.length === 0) {
+            // If empty, show all phenotypes except the selected ones
+            const availablePhenotypes = allPhenotypes.filter((phenotype) => !selectedPhenotypes.has(phenotype));
+            displayPhenotypeSuggestions(availablePhenotypes);
+        } else {
+            // Otherwise, show matching phenotypes
+            const filteredPhenotypes = allPhenotypes.filter(
+                (phenotype) => phenotype.toLowerCase().includes(searchTerm) && !selectedPhenotypes.has(phenotype),
+            );
+            displayPhenotypeSuggestions(filteredPhenotypes);
+        }
+    });
+
+    // Also display suggestions when the field gains focus
+    searchInput.addEventListener("focus", function () {
+        const searchTerm = this.value.toLowerCase().trim();
+
+        if (searchTerm.length === 0) {
+            // If empty, show all phenotypes except the selected ones
+            const availablePhenotypes = allPhenotypes.filter((phenotype) => !selectedPhenotypes.has(phenotype));
+            displayPhenotypeSuggestions(availablePhenotypes);
+        }
+    });
+
+    // Hide the suggestions when clicking outside the input
+    document.addEventListener("click", function (event) {
+        if (!searchInput.contains(event.target) && !suggestionsList.contains(event.target)) {
+            suggestionsList.hidden = true;
+        }
+    });
+}
+
+/**
+ * Render the phenotype suggestions list.
+ * @param {Array} phenotypes - Phenotypes to display
+ */
+function displayPhenotypeSuggestions(phenotypes) {
+    const suggestionsList = document.getElementById("phenotype-suggestions");
+    suggestionsList.innerHTML = "";
+
+    if (phenotypes.length === 0) {
+        suggestionsList.hidden = true;
+        return;
+    }
+
+    // Use the full list (scroll is possible in the UI)
+    const displayPhenotypes = phenotypes;
+
+    displayPhenotypes.forEach((phenotype) => {
+        const li = document.createElement("li");
+        li.textContent = phenotype;
+        li.addEventListener("click", function () {
+            addSelectedPhenotype(phenotype);
+            document.getElementById("phenotype-search").value = "";
+            suggestionsList.hidden = true;
+        });
+        suggestionsList.appendChild(li);
+    });
+
+    suggestionsList.hidden = false;
+}
+
+/**
+ * Add a phenotype to the selection list.
+ * @param {string} phenotype - Phenotype to add
+ */
+function addSelectedPhenotype(phenotype) {
+    if (selectedPhenotypes.has(phenotype)) return;
+
+    selectedPhenotypes.add(phenotype);
+    displaySelectedPhenotypes();
+
+    // Invoke the globally exposed updatePhenotypeHighlight helper
+    if (window.updatePhenotypeHighlight) {
+        window.updatePhenotypeHighlight();
+    }
+}
+
+/**
+ * Remove a selected phenotype (called from inline handlers).
+ * @param {string} phenotype - Phenotype to remove
+ */
+function removeSelectedPhenotype(phenotype) {
+    selectedPhenotypes.delete(phenotype);
+    displaySelectedPhenotypes();
+
+    // Invoke the globally exposed updatePhenotypeHighlight helper
+    if (window.updatePhenotypeHighlight) {
+        window.updatePhenotypeHighlight();
+    }
+}
+
+/**
+ * Render the currently selected phenotypes as tags.
+ */
+function displaySelectedPhenotypes() {
+    const container = document.getElementById("selected-phenotypes");
+    if (!container) return;
+
+    container.innerHTML = "";
+
+    selectedPhenotypes.forEach((phenotype) => {
+        const tag = document.createElement("div");
+        tag.className = "selected-phenotype-tag";
+        tag.innerHTML = `
+            <span class="phenotype-text">${phenotype}</span>
+            <button class="remove-btn" onclick="removeSelectedPhenotype('${phenotype.replace(/'/g, "\\'")}')">&times;</button>
+        `;
+        container.appendChild(tag);
+    });
+}
+
+/**
+ * Highlight genes that match any of the selected phenotypes.
+ * @param {Object} cy - Cytoscape instance
+ */
+function updatePhenotypeHighlight(cy) {
+    // Reset existing highlights
+    cy.nodes().removeClass("phenotype-highlight");
+
+    if (selectedPhenotypes.size === 0) {
+        return; // Nothing to highlight
+    }
+
+    // Highlight genes that match the selected phenotypes
+    cy.nodes().forEach((node) => {
+        const nodeData = node.data();
+
+        if (nodeData.phenotype) {
+            const nodePhenotypes = Array.isArray(nodeData.phenotype) ? nodeData.phenotype : [nodeData.phenotype];
+
+            // Look for any overlap between the node's phenotypes and the selected ones
+            const hasSelectedPhenotype = Array.from(selectedPhenotypes).some((selectedPhenotype) =>
+                nodePhenotypes.some(
+                    (nodePhenotype) => nodePhenotype && nodePhenotype.trim() === selectedPhenotype.trim(),
+                ),
+            );
+
+            if (hasSelectedPhenotype) {
+                node.addClass("phenotype-highlight");
+            }
+        }
+    });
+}
+
+/**
+ * Return the set of currently selected phenotypes.
+ * @returns {Set} Selected phenotype set
+ */
+export function getSelectedPhenotypes() {
+    return new Set(selectedPhenotypes);
+}
+
+/**
+ * Clear all selected phenotypes.
+ */
+export function clearSelectedPhenotypes() {
+    selectedPhenotypes.clear();
+    displaySelectedPhenotypes();
+
+    if (window.updatePhenotypeHighlight) {
+        window.updatePhenotypeHighlight();
+    }
+}
+
+/**
+ * Rebuild the phenotype list after filters change.
+ */
+function refreshPhenotypeList() {
+    if (!cytoscapeInstance) return;
+
+    // Preserve the current search term
+    const searchInput = document.getElementById("phenotype-search");
+    const currentSearchValue = searchInput ? searchInput.value : "";
+
+    // Reinitialize the phenotype list
+    initializePhenotypeSearch(cytoscapeInstance);
+
+    // Drop selected phenotypes that no longer exist
+    const updatedSelectedPhenotypes = new Set();
+    selectedPhenotypes.forEach((phenotype) => {
+        if (allPhenotypes.includes(phenotype)) {
+            updatedSelectedPhenotypes.add(phenotype);
+        }
+    });
+    selectedPhenotypes = updatedSelectedPhenotypes;
+
+    // Refresh the UI
+    displaySelectedPhenotypes();
+
+    // Update suggestions if a search term was present
+    if (searchInput && currentSearchValue.trim().length > 0) {
+        const searchTerm = currentSearchValue.toLowerCase().trim();
+        const filteredPhenotypes = allPhenotypes.filter(
+            (phenotype) => phenotype.toLowerCase().includes(searchTerm) && !selectedPhenotypes.has(phenotype),
+        );
+        displayPhenotypeSuggestions(filteredPhenotypes);
+    }
+
+    // Refresh highlights
+    if (window.updatePhenotypeHighlight) {
+        window.updatePhenotypeHighlight();
+    }
+}

TSUMUGI/web/app/js/ui/dynamicFontSize.js

@@ -0,0 +1,30 @@
+// ============================================================
+// Dynamic header font sizing
+// ============================================================
+
+export function initDynamicFontSize() {
+    const adjustHeaderFontSize = () => {
+        const header = document.querySelector(".header-container h1");
+        if (!header) return;
+
+        const viewportWidth = window.innerWidth;
+
+        // Base font size derived from viewport width.
+        let baseFontSize = viewportWidth * 0.04;
+        baseFontSize = Math.max(14, Math.min(36, baseFontSize));
+
+        if (viewportWidth <= 600) {
+            baseFontSize = Math.min(baseFontSize, viewportWidth * 0.045);
+        }
+
+        header.style.fontSize = `${baseFontSize}px`;
+    };
+
+    adjustHeaderFontSize();
+
+    let resizeTimer;
+    window.addEventListener("resize", () => {
+        clearTimeout(resizeTimer);
+        resizeTimer = setTimeout(adjustHeaderFontSize, 100);
+    });
+}

TSUMUGI/web/app/js/ui/mobilePanel.js

@@ -0,0 +1,77 @@
+// ============================================================
+// Mobile panel toggles for small screens
+// ============================================================
+
+export function initMobilePanel() {
+    const menuToggle = document.getElementById("menu-toggle");
+    const leftPanel = document.querySelector(".left-control-panel-container");
+    const rightPanel = document.querySelector(".right-control-panel-container");
+    const closeButton = document.getElementById("close-panel");
+
+    if (!menuToggle || !leftPanel || !rightPanel || !closeButton) {
+        return;
+    }
+
+    // On small screens move the right panel beneath the left panel.
+    const reorganizePanels = () => {
+        if (window.innerWidth <= 600) {
+            if (rightPanel.parentNode !== leftPanel) {
+                leftPanel.appendChild(rightPanel);
+            }
+        } else {
+            const bodyContainer = document.querySelector(".body-container");
+            if (rightPanel.parentNode === leftPanel && bodyContainer) {
+                bodyContainer.appendChild(rightPanel);
+            }
+        }
+    };
+
+    reorganizePanels();
+    window.addEventListener("resize", reorganizePanels);
+
+    const openPanel = (event) => {
+        event.stopPropagation();
+        event.preventDefault();
+
+        menuToggle.style.display = "none";
+        leftPanel.classList.add("active");
+        if (window.innerWidth <= 600) {
+            rightPanel.classList.add("active");
+        }
+        closeButton.style.display = "block";
+    };
+
+    const closePanel = (event) => {
+        if (event) {
+            event.stopPropagation();
+            event.preventDefault();
+        }
+
+        leftPanel.classList.remove("active");
+        rightPanel.classList.remove("active");
+        closeButton.style.display = "none";
+
+        setTimeout(() => {
+            menuToggle.style.display = "block";
+        }, 50);
+    };
+
+    ["click", "touchstart"].forEach((eventName) => {
+        menuToggle.addEventListener(eventName, openPanel);
+    });
+
+    ["click", "touchstart"].forEach((eventName) => {
+        closeButton.addEventListener(eventName, closePanel);
+    });
+
+    document.addEventListener("click", (event) => {
+        if (
+            leftPanel.classList.contains("active") &&
+            !leftPanel.contains(event.target) &&
+            !menuToggle.contains(event.target) &&
+            !closeButton.contains(event.target)
+        ) {
+            closePanel();
+        }
+    });
+}

TSUMUGI/web/app/js/ui/slider.js

@@ -0,0 +1,22 @@
+// Generic slider factory supporting single-value and range sliders
+export function createSlider(id, start, min, max, step, updateCallback, isRange = false) {
+    const slider = document.getElementById(id);
+    if (!slider) {
+        console.error(`Slider with ID '${id}' not found.`);
+        return null;
+    }
+
+    noUiSlider.create(slider, {
+        start: isRange ? start : [start], // Use [start, end] when range mode is enabled
+        connect: true,
+        range: { min: min, max: max },
+        step: step,
+    });
+
+    slider.noUiSlider.on("update", function (value) {
+        const intValues = isRange ? value.map(Math.round) : Math.round(value);
+        updateCallback(intValues);
+    });
+
+    return slider.noUiSlider;
+}