TSUMUGI 1.0.1__py3-none-any.whl

TSUMUGI/web/css/top.css

@@ -0,0 +1,391 @@
+/* ======================================================== */
+/* General body styling */
+/* ======================================================== */
+body {
+    color: #333;
+    background-color: #FFEBD8;
+    font-family: 'Lato', 'Arial', 'Helvetica', sans-serif;
+    font-size: 1.2em;
+    min-height: 100vh;
+    margin: 0 auto;
+    padding-top: 50px;
+    display: flex;
+    justify-content: flex-start;
+    text-align: center;
+    align-items: center;
+    flex-direction: column;
+}
+
+h1 {
+    margin: 0 auto;
+}
+
+/* Inherit font settings for form elements */
+button,
+input,
+textarea,
+select {
+    color: inherit;
+    font-size: inherit;
+    font-family: inherit;
+}
+
+/* Subtitle styling */
+p.subtitle {
+    font-family: 'Lora', serif;
+    margin-bottom: 20px;
+}
+
+/* ======================================================== */
+/* Form container styling */
+/* ======================================================== */
+form {
+    background-color: #fefefe;
+    padding: 30px;
+    border-radius: 10px;
+    max-width: 600px;
+    width: 100%;
+    margin: 20px 0 40px;
+}
+
+/* Image styling */
+img {
+    width: 80%;
+    height: auto;
+}
+
+/* Label styling */
+label {
+    margin-bottom: 10px;
+    display: block;
+}
+
+/* Text input field styling */
+input[type="text"] {
+    width: 80%;
+    padding: 10px;
+    border: 2px solid #ccc;
+    border-radius: 10px;
+    margin-bottom: 10px;
+    box-sizing: border-box;
+    outline: none;
+}
+
+input[type="text"]:focus {
+    border-color: #ccc;
+    outline: none;
+}
+
+/* -------------------------------------------------------- */
+/* Suggestions list styling */
+/* -------------------------------------------------------- */
+
+ul.suggestions {
+    list-style: none;
+    padding: 0;
+    border: 1px solid #ccc;
+    border-radius: 10px;
+    max-height: 30vh;
+    overflow-y: auto;
+}
+
+ul.suggestions li {
+    padding: 10px;
+    cursor: pointer;
+    background-color: #fff;
+    transition: background-color 0.3s ease;
+}
+
+ul.suggestions li:hover {
+    background-color: #FFEBD8;
+}
+
+/* -------------------------------------------------------- */
+/* Tab styling */
+/* -------------------------------------------------------- */
+
+.Tab-container {
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: center;
+    gap: 5px;
+    flex-direction: row;
+}
+
+button.Tab {
+    flex: 0 1 auto;
+    padding: 10px 20px;
+    margin: 0 5px;
+    border: 2px solid #ff7800;
+    border-radius: 10px;
+    background-color: #fff;
+    cursor: pointer;
+    transition: background-color 0.3s ease, color 0.3s ease;
+    position: relative;
+    z-index: 1;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+}
+
+button.Tab:hover {
+    background-color: #ffe2c2;
+}
+
+button.Tab.active-tab {
+    background-color: #ff7800;
+    color: #fff;
+}
+
+button.Tab.active-tab::after {
+    content: '';
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 10px 10px 0 10px;
+    border-color: #ff7800 transparent transparent transparent;
+    position: absolute;
+    bottom: -10px;
+    left: 50%;
+    margin-left: -10px;
+}
+
+/* -------------------------------------------------------- */
+/* Input form of gene lists */
+/* -------------------------------------------------------- */
+textarea.geneList {
+    max-width: 1200px;
+    height: 120px;
+    padding: 12px;
+    border: 2px solid #ccc;
+    border-radius: 10px;
+    resize: both;
+}
+
+textarea.geneList:focus {
+    border-color: #ccc;
+    outline: none;
+}
+
+/* -------------------------------------------------------- */
+/* Submit button styling */
+/* -------------------------------------------------------- */
+button.submitBtn {
+    padding: 12px 20px;
+    color: #fff;
+    background-color: #ff7800;
+    border: none;
+    border-radius: 10px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+button.submitBtn:disabled {
+    background-color: #999;
+    cursor: not-allowed;
+}
+
+button.submitBtn:hover:enabled {
+    background-color: #e66900;
+}
+
+
+/* ======================================================== */
+/* Resources Section */
+/* ======================================================== */
+
+.resources-container {
+    max-width: 800px;
+    margin: 0 auto 40px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 30px;
+    justify-content: center;
+}
+
+.resource-section {
+    flex: 1;
+    min-width: 280px;
+    text-align: center;
+}
+
+.resource-section h3 {
+    margin-bottom: 15px;
+    font-size: 1.1em;
+    color: #555;
+    font-weight: normal;
+}
+
+.resource-buttons {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.resource-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #fff;
+    color: #555;
+    padding: 10px 16px;
+    border: 2px solid #ccc;
+    border-radius: 10px;
+    text-decoration: none;
+    font-size: 0.95em;
+    transition: all 0.2s ease;
+}
+
+.resource-btn:hover {
+    color: #333;
+    border-color: #ff7800;
+    background-color: rgba(255, 120, 0, 0.05);
+}
+
+.resource-btn i {
+    margin-right: 6px;
+    font-size: 0.9em;
+}
+
+/* ======================================================== */
+/* Info Tooltip Styles */
+/* ======================================================== */
+.info-tooltip-container {
+    position: relative;
+    display: inline-block;
+    margin-left: 8px;
+}
+
+.info-tooltip-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background-color: #555;
+    color: white;
+    font-size: 12px;
+    font-weight: bold;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+}
+
+.info-tooltip-icon:hover {
+    background-color: #333;
+}
+
+.info-tooltip-content {
+    visibility: hidden;
+    opacity: 0;
+    position: absolute;
+    bottom: 25px;
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: #333;
+    color: white;
+    text-align: left;
+    padding: 8px 12px;
+    border-radius: 6px;
+    font-size: 14px;
+    font-weight: normal;
+    line-height: 1.4;
+    white-space: nowrap;
+    z-index: 1000;
+    transition: opacity 0.3s ease, visibility 0.3s ease;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
+    max-width: 300px;
+    white-space: normal;
+}
+
+.info-tooltip-content::after {
+    content: "";
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    border: 5px solid transparent;
+    border-top-color: #333;
+}
+
+.info-tooltip-container:hover .info-tooltip-content,
+.info-tooltip-container.active .info-tooltip-content {
+    visibility: visible;
+    opacity: 1;
+}
+
+.info-tooltip-content a {
+    color: #4fc3f7;
+    text-decoration: underline;
+}
+
+.info-tooltip-content a:hover {
+    color: #81d4fa;
+}
+
+/* ======================================================== */
+/* Footer styling */
+/* ======================================================== */
+
+footer {
+    margin: 20px 0 10px;
+    padding: 20px;
+    width: 100%;
+    color: #666;
+    font-size: 0.9em;
+}
+
+footer p {
+    margin: 5px 0 0;
+}
+
+footer i {
+    margin-right: 8px;
+}
+
+footer a {
+    color: #666;
+    font-size: 1em;
+    text-decoration: none;
+    font-weight: bold;
+}
+
+footer a:hover {
+    text-decoration: underline;
+}
+
+
+
+/* ======================================================== */
+/* Responsive design for mobile devices */
+/* ======================================================== */
+@media screen and (max-width: 600px) {
+    body {
+        font-size: 1em;
+        padding-top: 20px;
+    }
+
+    form {
+        width: 90%;
+    }
+
+    button.Tab {
+        padding: 8px 10px;
+        font-size: 0.9em;
+        margin: 2px;
+        min-width: 30px;
+        white-space: nowrap;
+    }
+
+    .resources-container {
+        flex-direction: column;
+        gap: 20px;
+        margin-bottom: 30px;
+    }
+
+    .resource-section {
+        min-width: auto;
+    }
+}

TSUMUGI/web/image/tsumugi-logo.svg

@@ -0,0 +1,69 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="211.125pt"
+   height="89.0625pt"
+   viewBox="0 0 211.125 89.0625"
+   version="1.1"
+   id="svg9"
+   xml:space="preserve"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/"><metadata
+     id="metadata1"><rdf:RDF><cc:Work><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:date>2024-09-02T05:33:13.416149</dc:date><dc:format>image/svg+xml</dc:format><dc:creator><cc:Agent><dc:title>Matplotlib v3.6.3, https://matplotlib.org/</dc:title></cc:Agent></dc:creator></cc:Work></rdf:RDF></metadata><defs
+     id="defs1"><style
+       type="text/css"
+       id="style1">*{stroke-linejoin: round; stroke-linecap: butt}</style></defs><text
+     xml:space="preserve"
+     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:50px;line-height:1;font-family:Rubik;-inkscape-font-specification:Rubik;text-align:center;text-decoration-color:#000000;letter-spacing:0px;word-spacing:0px;fill:#241f31;stroke:none;stroke-width:1;stroke-dasharray:none;paint-order:stroke fill markers"
+     x="9.4352112"
+     y="38.838974"
+     id="text9"><tspan
+       id="tspan9"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:50px;font-family:Sitka;-inkscape-font-specification:Sitka;fill:#241f31;stroke:#241f31;stroke-width:1;stroke-dasharray:none"
+       x="9.4352112"
+       y="38.838974">TSUMUGI</tspan></text><defs
+     id="defs9" /><g
+     id="g36"
+     transform="translate(-513.71215,-178.53485)"><path
+       style="fill:none;stroke:#9a9996;stroke-width:2;stroke-linecap:round;stroke-linejoin:bevel;stroke-dasharray:none;paint-order:stroke fill markers"
+       d="m 554.80558,244.25989 c 0,0 -3.11994,-9.82714 9.57484,-14.20237 8.68817,-2.81702 26.68892,6.90156 21.03104,14.87692 -2.04715,6.88644 14.82807,12.80336 18.94991,11.23936 11.80553,-4.47952 -2.22922,-18.21465 5.05772,-25.7882 2.41151,-2.50636 10.10116,-4.69468 19.69798,-1.6373 15.0872,4.80653 4.03664,16.85815 6.35645,23.20184 3.04075,4.5015 1.98067,9.04247 13.54931,8.30912 9.65289,-1.68304 9.27859,-8.0446 8.44725,-12.22987 -1.15959,-5.83777 -6.53765,-15.52976 2.87892,-17.84795 4.57253,-1.22483 11.06863,-1.20626 14.54124,7.71923 1.39314,3.58072 8.78514,4.46414 12.84501,4.87374"
+       id="path31-4" /><circle
+       style="fill:#ff7800;stroke:none;stroke-width:2;stroke-linecap:butt;stroke-linejoin:round;paint-order:stroke fill markers"
+       id="circle31-5"
+       cx="555.45587"
+       cy="244.82098"
+       r="6.4558659" /><circle
+       style="fill:#ff7800;stroke:none;stroke-width:2;stroke-linecap:butt;stroke-linejoin:round;paint-order:stroke fill markers"
+       id="circle32-8"
+       cx="585.62347"
+       cy="245.68243"
+       r="6.4558659" /><circle
+       style="fill:#ff7800;stroke:none;stroke-width:2;stroke-linecap:butt;stroke-linejoin:round;paint-order:stroke fill markers"
+       id="circle33-6"
+       cx="610.17987"
+       cy="230.70587"
+       r="6.4558659" /><circle
+       style="fill:#ff7800;stroke:none;stroke-width:2;stroke-linecap:butt;stroke-linejoin:round;paint-order:stroke fill markers"
+       id="circle34-3"
+       cx="636.00336"
+       cy="251.17627"
+       r="6.4558659" /><circle
+       style="fill:#ff7800;stroke:none;stroke-width:2;stroke-linecap:butt;stroke-linejoin:round;paint-order:stroke fill markers"
+       id="circle35-8"
+       cx="657.3017"
+       cy="248.20645"
+       r="6.4558659" /><circle
+       style="fill:#ff7800;stroke:none;stroke-width:2;stroke-linecap:butt;stroke-linejoin:round;paint-order:stroke fill markers"
+       id="circle36-8"
+       cx="688.01227"
+       cy="242.42432"
+       r="6.4558659" /></g><rect
+     style="fill:none;stroke:none;stroke-width:0.999997;stroke-linecap:round;stroke-linejoin:bevel;stroke-dasharray:none;paint-order:stroke fill markers"
+     id="rect36"
+     width="211.125"
+     height="89.0625"
+     x="-1.1368684e-13"
+     y="-2.8421709e-14" /></svg>

TSUMUGI/web/js/genelist_formatter.js

@@ -0,0 +1,123 @@
+export async function fetchGzippedJson(url) {
+    try {
+        const response = await fetch(url);
+        if (!response.ok) {
+            throw new Error(`HTTP error: ${response.status}`);
+        }
+        const compressedData = await response.arrayBuffer();
+        const decompressedData = pako.inflate(compressedData, { to: "string" });
+        return JSON.parse(decompressedData);
+    } catch (error) {
+        console.error(`Data fetch error (${url}):`, error);
+        return null; // Skip on error
+    }
+}
+
+export function filterJson(jsonDataList, geneKeys) {
+    const elementsMap = new Map();
+
+    const serializePhenotypes = (phenotype) => {
+        if (Array.isArray(phenotype)) {
+            return JSON.stringify([...phenotype].sort());
+        }
+        if (typeof phenotype === "string") {
+            return JSON.stringify([phenotype]);
+        }
+        return JSON.stringify([]);
+    };
+
+    const buildEdgeKey = (data) => {
+        if (!("source" in data) || !("target" in data)) return null;
+        const pairKey = [data.source, data.target].sort().join("||");
+        return `edge:${pairKey}|${serializePhenotypes(data.phenotype)}`;
+    };
+
+    const buildNodeKey = (data) => ("id" in data ? `node:${data.id}` : null);
+
+    const upsertEdge = (key, item) => {
+        const existing = elementsMap.get(key);
+        const newEdgeSize = Number.isFinite(item.data.edge_size) ? item.data.edge_size : Number.NEGATIVE_INFINITY;
+        if (!existing) {
+            elementsMap.set(key, item);
+            return;
+        }
+        const existingEdgeSize = Number.isFinite(existing.data.edge_size)
+            ? existing.data.edge_size
+            : Number.NEGATIVE_INFINITY;
+        if (newEdgeSize > existingEdgeSize) {
+            elementsMap.set(key, item);
+        }
+    };
+
+    jsonDataList.forEach((jsonData) => {
+        jsonData.forEach((item) => {
+            const data = item.data;
+
+            if ("node_color" in data && data.node_color !== 1) return;
+
+            const isEdge = "source" in data && "target" in data;
+
+            if (isEdge) {
+                if (!geneKeys.includes(data.source) || !geneKeys.includes(data.target)) return;
+                const edgeKey = buildEdgeKey(data);
+                if (!edgeKey) return;
+                upsertEdge(edgeKey, item);
+                return;
+            }
+
+            if ("id" in data && !geneKeys.includes(data.id)) return;
+
+            const nodeKey = buildNodeKey(data);
+            if (!nodeKey) return;
+            if (!elementsMap.has(nodeKey)) {
+                elementsMap.set(nodeKey, item);
+            }
+        });
+    });
+
+    return Array.from(elementsMap.values());
+}
+
+export async function fetchGeneData() {
+    let jsonDataList = [];
+
+    const geneList = document.getElementById("geneList").value;
+    const geneKeys = geneList
+        .split(/\r?\n/)
+        .map((gene) => gene.trim())
+        .filter((gene) => gene !== "");
+
+    const fetchPromises = geneKeys.map((gene) => fetchGzippedJson(`./data/genesymbol/${gene}.json.gz`));
+
+    const results = await Promise.all(fetchPromises);
+    jsonDataList = results.filter((data) => data !== null);
+
+    const elements = filterJson(jsonDataList, geneKeys);
+
+    const uniqueIds = new Set(elements.map((el) => el.data.id).filter((id) => id !== undefined));
+
+    if (uniqueIds.size === 0) {
+        alert("No similar phenotypes were found among the entered genes.");
+        return;
+    } else if (uniqueIds.size >= 200) {
+        alert("Too many genes submitted. Please limit the number to 200 or fewer.");
+        return;
+    }
+
+    localStorage.removeItem("elements");
+    localStorage.setItem("elements", JSON.stringify(elements));
+    const query = new URLSearchParams({
+        mode: "genelist",
+        name: "geneList",
+        title: "Gene List",
+    });
+    window.open(`./app/viewer.html?${query.toString()}`, "_blank");
+}
+
+// Expose for form submission handler
+window.fetchGeneData = fetchGeneData;
+
+// Assign event listener to button
+document.addEventListener("DOMContentLoaded", () => {
+    document.getElementById("submitBtn_List").addEventListener("click", fetchGeneData);
+});