HTML+Javascript+cyREST-AAPI로 데스크톱 Cytooscape의 확장 GUI를 쉽게 만드는 방법

10322 단어 CytoscapeJavaScript데이터 시각화XMLHttpRequest
평소 Qita의 배려를 받아왔기 때문에 블로그에 쓴 내용 중 과거 자신이 원했던 정보(이동에 필요한 부분)를 총결산해 소개한다.
원래의 블로그 보도는 여기에 있다.
네트워크 시각화 도구 "Cytooscape"의 확장 GUI, 간단한 파일 ""
Cytooscape 자체의 사용법에 대해서도 썼으니 가능하면 참고해주세요.
네트워크 시각화 도구 "Cytooscape"에 접속해서 빠르게 사용하면

개요


HTML+Javascript에서 시작하여 XMLHttpRequest(xhr)를 사용하여 CyREST API를 두드리는 방법.
데스크톱 버전의 Cytooscape에서는 외장형 GUI를 쉽게 생성할 수 있습니다.

예를 들어 샘플 세션의'Yeast Perturbation.cys'를 사용하여'선택의 가장자리를 실시간으로 표시하는EdgeBetweenness의 합계값'GUI를 만들어 보았다.
오른쪽 창문이 바로 그거예요.

위의 예제 세션을 Cytooscape에서 연 후 다음 소스 코드를 UTF-8 HTML로 저장하고 IE 이외의 브라우저에서 엽니다.
Shift + 드래그하여 여러 가장자리를 선택하면 기본적으로 합계가 실시간으로 표시됩니다.

소스 코드


소스 코드에 대한 설명은 코드의 설명을 참조하십시오.
HTML,Javascript,Cytooscape은 모두 전문 외의 것으로 품질을 보장할 수 없지만 목표에 따라 행동할 것을 확인했다.
cy.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <style>
    #result {
      font-size: 25pt;
    }
  </style>
</head>

<body>
  <div id="result">ここに結果が入ります。</div>
  <script>
    // 計算結果を表示する用のdivを取得
    const result = document.getElementById("result");

    // たまにメモリー解放してあげないと暴走するので、メモリー解放コマンドを用意
    const free_unused_memory = () => {
      const xhr = new XMLHttpRequest();
      xhr.open('GET', 'http://localhost:1234/v1/gc');
      xhr.send(null);
    }

    // とりあえずHTTPリクエストのとこ全部囲む
    const update = () => {

      // APIのリクエストボディを、Json文字列として用意する（書き方はCytoscapeのヘルプを参照）
      const request_body = JSON.stringify({
        "columnList": "EdgeBetweenness",
        "edgeList": "selected",
        "network": "current"
      });

      // xhrを使う準備
      const xhr = new XMLHttpRequest();

      // Edgeのアトリビュートを取得するAPI
      xhr.open('POST', 'http://localhost:1234/v1/commands/edge/get attribute');

      // リクエストはJson形式で送る
      xhr.setRequestHeader('Content-Type', 'application/json');

      // 返事はJson形式で解釈する
      xhr.responseType = 'json';

      // HTTPリクエストに返事が来たときの処理
      xhr.onload = () => {

        // 返事の中身を取り出して
        const response_body = xhr.response.data;

        // reduce関数でEdgeBetweennessを積算してtoFixedで小数点1桁表示
        // 0を足しているのはnull値対策
        const total_Betweenness = (response_body.reduce((acc, x) => acc + x.EdgeBetweenness, 0) + 0).toFixed(1);

        // テンプレートリテラルで結果のhtml文字列を作る
        const html = `選択中のEdgeは${response_body.length}本です。<br>
                               EdgeBetweennessの合計は${total_Betweenness}です。`;

        // 結果をhtmlに書き込む
        result.innerHTML = html;
      }

      // HTTPリクエストを送信
      xhr.send(request_body);

      // 10回毎にメモリ開放
      if (update_count > 10) {
        free_unused_memory();
        update_count = 0;
      } else { update_count++ }
    }

    // メモリ解放するタイミング用のカウンタ
    let update_count = 0;

    // 最初の1回はすぐに実行
    update();

    // あとは1秒間隔でアップデート
    setInterval(update, 1000);
  </script>
</body>

</html>

덤

  • Json에 요청한 "columnList"의 값도 쉼표 구분자로 여러 개의 뷰어를 지정할 수 있다.
  • 이 예에서는 결과를 문자열로만 표시하지만 총 데이터를 Chart로 표시합니다.나는 js 등 실시간 도표화된 사용 방법을 사용해도 된다고 생각한다.

  • 블로거에도 Cytooscape 창에서 HTML을 여는 방법이 있는데 가능하면 한번 보세요.
    • Kubbernetes in Docker(kind)를 시도했습니다.
    RFC6902 대체 의미 일치

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage