The visualizer is a tool developped by the cheminformatics department of the Swiss Federal Institute of Technology

Overview

Concept

The visualizer is a tool developped by the cheminformatics department of the Swiss Federal Institute of Technology. We promote the development of open source projects that we use internally for our daily research. As a consequence, we release the visualizer under the MIT license unless specified otherwise. We try to use only open source third party libraries.

The visualizer aims at the rendering of complex datasets. It is suited to display and interact in a multiple of ways thanks to modules that can be placed on your browser page. The modules display some type of information in some way (table, chart, matrix, 2D list, 1D list), and they can interact with each other through a central API. The visualization is started by passing only three URLs in the browser address bar.

Modules may be added, moved, duplicated, resized and removed through the UI. Each module can be configured with built-in options to allow their customization. In addition, some modules can interact with the mouse pointer and are able to send variables and actions to other modules through an event-based system.

Visualize your data

To get started, you need three json files located anywhere accessible by XHR requests.

  • view.json
  • data.json
  • config.json

The view file will contain information about the visualization in a JSON format : which modules should be placed and where, which mouse interactions should be defined, which variables or actions to send or receive, etc. The view.json is independant on the dataset you want to visualize. In the view file will be defined which modules should be displayed and which initial variables from the dataset should be readily available to the modules.

The data file contains the data to visualize in a JSON format. The user is responsible to generate that file according to a few guidelines.

The config file is typically common to your projects. It defines which modules are available (built-in or not), which buttons should be displayed in the header, which variable filters and action files should be available to the visualizer.

Variables and Actions

The visualizer allows the modules to comminucate via a central repository of variables and actions. When an event is triggered on a module ( mouse click, mouse hover, resize, ... ), a variable or an action is sent towards the repository.

Installation

To install the development version of the visualizer, you need Node.js.
Run npm install and all the dependencies will be downloaded.

Comments
  • couchDB button and upload attachments

    couchDB button and upload attachments

    It is important that the test cases and even some "production" tools are self-contained. Because some of the testcases require big data set (like the distance matrix of IR spectra) it would be nice to be able to attach directly to a view. This would allow for example to create small database of reference molecule (project of Cyril) or demonstration of the NMR 1D auto-assignment (project from Andres). Would be nice that when you click on a specific view there is a button next to "Make public" that opens a dialog that allow to upload / rename / delete files. Should we consider folders (consequence for couch and URL to retrieve the document) ? It should be feasible because we used them when we were adding the visualizer directly in couchDB. What kind of project could we do with this kind of approach ? Infra-red spectra are around 100kB in jcamp format. If we should consider having 1000 attachments and that the system works correctly with 1000 attachments. This means the document with the attachment would have around 100Mb. We had some trouble with couchDB when we were adding the visualizer directly in the database but we still had more documents in this case.

    • https://wiki.apache.org/couchdb/HTTP_Document_API#Attachments
    • http://elegantcode.com/2009/07/10/adding-attachments-to-documents-in-couchdb/
    enhancement question H-couchdb2 
    opened by lpatiny 21
  • Modify modules file system

    Modify modules file system

    We need to put some order in the basic available modules.

    In order to change the file system we need to change the way a module is defined. Currently

    "Server interaction": {
            "button_url": "Button URL",
    }
    

    Each module must include the URL of a folder (relative or absolute) that MUST contain controller.js, model.js and view.js

    We could actually think about a 4th file, config.json which contains all the config currently in the controller. Would make a lot of sense then to parse it and create an automatic documentation.

    enhancement 
    opened by NPellet 14
  • JsChart bug when changing the spectra and vertical scale

    JsChart bug when changing the spectra and vertical scale

    When replacing an existing spectrum for which minY / maxY are different the vertical axis value does not change (or at least is not redraw). If you change again the data the axis value of the previous spectrum is displayed.

    Testcase: http://visualizer.epfl.ch/tiny/Y00J8B5uYgBBbRytid1a (Original URL)

    opened by visualizer-feedback 13
  • spectra displayer strange behaviour

    spectra displayer strange behaviour

    https://visualizer.epfl.ch/tiny/LRthDGHoewaR9y146jTa

    If you look at this view the spectra looks correct.

    Now change the last value of the array

    var peak = [1,1,5,1,4,2];

    (2 instead of 1)

    The peaks are now combined.

    But if you force the Y axe this does not happen

    bug M-spectra-displayer 
    opened by lpatiny 11
  • Problem wish spectra displayer

    Problem wish spectra displayer

    You can zoom correctly in the spectra displayer. In the last version the spectrum disappear.

    Testcase: http://visualizer.epfl.ch/tiny/P6EzbVQx0wk76IIZpDaU (Original URL)

    opened by visualizer-feedback 11
  • spectra displayer: display bug when zooming in

    spectra displayer: display bug when zooming in

    When zooming in markers don't disappear

    ALso the legend shows chart and chart-1, when there is only chart

    Testcase: http://visualizer.epfl.ch/tiny/tf5x2M5PprvWn1ttJVE7 (Original URL)

    bug M-spectra-displayer L-jsgraph 
    opened by visualizer-feedback 11
  • Cannot move elements in the layer

    Cannot move elements in the layer

    Once I change of layer, I could neither move nor resize any module in the view.

    Testcase: http://visualizer.epfl.ch/tiny/THmIvQGa6mJfV9Q4bHrN (Original URL)

    bug priority core 
    opened by visualizer-feedback 11
  • spectradisplayer and missing horizontal legend

    spectradisplayer and missing horizontal legend

    Don't understand why the horizontal axe legend is not being displayed in the view:

    (just draw anything and click Calculate spectrum)

    In the preferences it should be 'δ (ppm)'

    It seems that when the input variable is jcamp the label is not set but only in the case of chart. Should not label not be added independently of the input variable kind ?

    bug M-spectra-displayer 
    opened by lpatiny 10
  • Position of the menu in

    Position of the menu in "view manager"

    I have problems to select elements in the view manager menu, because at 100% zoom, the menu appears above the project list. Why this happens? Zoom 100% screen shot 2016-09-28 at 8 30 30 am Zoom 65% screen shot 2016-09-28 at 8 30 43 am

    H-roc-views 
    opened by andcastillo 9
  • spectra displayer & tracking line

    spectra displayer & tracking line

    Hey @targos, I implemented a basic method to allow the tracking line on individual series: graph.getSerie("CA").allowTrackingLine( {} ); Does not need any prior options given to the graph instance. Can you implement an option in the visualizer. This way, when it breaks, I'll know soon enough :D

    enhancement M-spectra-displayer 
    opened by NPellet 9
  • FYI: Breaking change in jsGraph

    FYI: Breaking change in jsGraph

    in jsGraph 1.11.3-11, graph.newSerie( name ), name has now to be unique. If the serie already exists, jsGraph will return the currently existing serie.

    You should check your code that nothing will break before you upgrade the library

    wontfix 
    opened by NPellet 9
  • Double paste in quill problem

    Double paste in quill problem

    When we paste an image in the quill module on

    https://www.lactame.com/visualizer/src/index.html?config=../testcase/config/default.json&viewURL=../testcase/data/quill/view.json&dataURL=../testcase/data/quill/data.json

    We have the image that is pasted twice.

    If we disable the module imageDrop it works correctly.

    https://github.com/NPellet/visualizer/blob/7264cd6edd1ca0511a5999ca1220b47f4b48ac21/src/modules/types/edition/quill_editor/view.js#L88-L89

    There is another plugin: https://www.npmjs.com/package/quill-image-drop-and-paste that could be tested

    https://github.com/NPellet/visualizer/blob/d00e4f45ae8677eaf60e4125d1af434b29cc64e3/package.json#L85-L86

    @stropitek could you have a look at this ?

    opened by lpatiny 0
  • `npm install` fails: ERESOLVE unable to resolve dependency tree

    `npm install` fails: ERESOLVE unable to resolve dependency tree

    Hi,

    I tested getting Visualizer to run in a Node docker:

    docker run -it --rm -p 8080:80 -v $(pwd):/nodeapp node bash
    # in the docker: 
    cd /nodeapp
    npm install
    

    This results in the following error. I tried with images node and node:16. Is this an obvious problem from my side?

    root@96ac787d5393:/nodeapp# npm install
    npm notice
    npm notice New patch version of npm available! 8.1.2 -> 8.1.4
    npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.1.4
    npm notice Run npm install -g [email protected] to update!
    npm notice
    npm ERR! code ERESOLVE
    npm ERR! ERESOLVE unable to resolve dependency tree
    npm ERR!
    npm ERR! While resolving: [email protected]
    npm ERR! Found: [email protected]
    npm ERR! node_modules/grunt
    npm ERR!   dev grunt@"^1.0.3" from the root project
    npm ERR!
    npm ERR! Could not resolve dependency:
    npm ERR! peer grunt@"~0.4.1" from [email protected]
    npm ERR! node_modules/grunt-rename
    npm ERR!   dev grunt-rename@"^0.1.4" from the root project
    npm ERR!
    npm ERR! Fix the upstream dependency conflict, or retry
    npm ERR! this command with --force, or --legacy-peer-deps
    npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
    npm ERR!
    npm ERR! See /root/.npm/eresolve-report.txt for a full report.
    
    npm ERR! A complete log of this run can be found in:
    npm ERR!     /root/.npm/_logs/2021-11-26T13_31_41_404Z-debug.log
    
    opened by meowcat 2
  • Twig form not updated if variable undefined

    Twig form not updated if variable undefined

    In a twig form template when a variable is undefined we have a blank event but not an update event.

    This has as consequence that the form disappear.

    I would like that even if an input variable is undefined the rendering of the form still happens.

    It can be test in the following testcase if you click on the button of the bottom executor module.

    http://127.0.0.1:5501/src/index.html?config=../testcase/config/default.json&viewURL=../testcase/data/twig-form-light/view.json&dataURL=../testcase/data/twig-form-light/data.json

    opened by lpatiny 1
  • Create a new module with seqviz

    Create a new module with seqviz

    https://github.com/Lattice-Automation/seqviz

    Possibility to have DNA sequences as input that are translated automatically

    import { translateDNA } from "./utils/sequence";
    let result = translateDNA("AAATTTCCCGGG");
    console.log(result);
    
    opened by lpatiny 0
  • Problem with order of actions

    Problem with order of actions

    When loading a module you have an event that generate an action when the module is loaded. The problem is that you want to be sure that the action already exists otherwise it will not be executed obviously.

    In order to be 'sure' that the action exists I add it in the general preferences. However I get random results. Apparently in some case the action out from the module is executed before the general preferences action has been loaded and I don't understand why.

    The relate loading order is I think here:

    https://github.com/NPellet/visualizer/blob/0369baee45b70071656a7b41771696cf75b4c520/src/src/main/entrypoint.js#L127-L148

    opened by lpatiny 0
  • add API.getPreferences(moduleID);

    add API.getPreferences(moduleID);

    Using a similar API as

    function updatePreferences(moduleId, values)

    It would be nice to also have the method

    let values = getPreferences(moduleId);

    The goal is really that we can do API.updatePreferences(4, API.getPreferences(4)); and nothing should change. I'm quite lost with alias and I don't know how easy it is to do.

    opened by lpatiny 0
Releases(v2.15.3)
Owner
Norman Pellet
Fullstack Engineer at Centre Suisse d'Electronique et de Microtechnique
Norman Pellet
Use real-time computing technology and web technology to build a big data Kanban l to solve the problem. Among them, practical technologies include MySQL, Kafka, Flink, Redis, Flask and Echarts

实时计算(English Version) 运用实时计算技术、Web 技术构建一个大数据看板来解决问题。其中实用技术包括Mysql、Kafka、Flink、Redis、Flask和Echarts 目录 1.问题需求 2.方案分析 3.安装环境 4.环境启动命令和运行代码的方法 5.代码目录结构说明

Serendipity 2 Jan 8, 2022
Rapidamente faça consultas a Receita federal.

Better CPF Uma aplicação desenvolvida para automatizar verificações de CPF Better CPF é uma aplicação criada para fazer consultas a RECEITA FEDERAL pa

Alexsandro Xavier da Silveira 3 Aug 10, 2022
Tiny website for previewing the ballot papers (house and senate) for Austalian federal elections

AusBallot Code for https://ausballot.netlify.app/ The AEC (Australian Electoral Commission) has this page to view all the candidates for an upcoming e

Robin Stocker 4 Jun 1, 2022
A SolidJS signal tracking dependency & structural visualizer developer tool

Solid JS DevTool Developer tool that visualizes Solid's signal architecture, including the components. It can be added to any Solid JS application. In

OSLabs Beta 58 Nov 5, 2022
Algorithm visualizer made with React, Material UI and P5JS.

Made with React, P5JS and Material UI. Link https://andresrodriguez55.github.io/algorithmsVisualizer/#/ Description The purpose of doing this was to l

Andres Arturo Rodriguez Calderon 31 Nov 22, 2022
Sorting visualizer to introduce students to different sorting algorithms, how they work, and how to apply them

sorting-visualizer Sorting visualizer to introduce students to different sorting algorithms, how they work, and how to apply them Iteration 1 Demo: ht

Aditya Malik 1 Nov 14, 2022
Path-finding & Sorting algorithms Visualizer

Update - Changelog ?? 09.05.2022 AlgoVision is now fully mobile-responsive for all its features ! On mobile, the 'Mouse Chase' option in Dynamic Mode

Eliya Shalom 23 Dec 18, 2022
A graphical web-based audio visualizer which reads music data using Pure JavaScript, and draws a graphical view in Canvas.

Audio Visualizer JS A graphical web-based audio visualizer which reads music data using Pure JavaScript, and draws a graphical view in Canvas. Demo: h

Max Base 9 Aug 9, 2022
Lumos is an AWS Lambda visualizer and open source alternative to AWS CloudWatch.

Lumos Lambda Metrics Visualizer Table of Contents About Lumos Techologies Used Getting Started Key Lambda Metrics How to Contribute License Contributo

OSLabs Beta 36 Nov 5, 2022
Online Inventory Control System for an apparel manufacturing company "CASANOVA" (Pvt) Ltd. Technology stack: Node.js, Express.js, MongoDB Atlas, React.js (MERN Stack).

Project Name - Online Inventory Control System for an apparel manufacturing company "CASANOVA". The project was given a "A" grade. Group Leader - IT20

Pasindu Rukshan 1 Dec 26, 2021
This "To-do-list" app is a simple web application that displays a list of task and allows you to add and remove task from that list. it is built with the latest technology namely; JavaScript with webpack Configuration.

To-do-list "To-do-list" is a simple web application that displays a list of task and allows you to add and remove task from that list. Built With HTML

Aniekan udo 10 Nov 21, 2022
NewsStation is a news app which can be used to grab daily news bites. If you are interested in news whether politics, business, entertainment, general, health, science, sports and technology news NewsStation is for you!

This is a NewsStation WebApp Project Using News API NewsStation is a news app which can be used to grab daily news bites. If you are interested in new

Ravi Chauhan 2 Feb 7, 2022
📜 Sharable eslint configuration rimac technology uses in all of its projects.

Eslint Config Usage Install the library as a dev dependency alongside required dependencies using yarn add -D @rimac-technology/eslint-config

Rimac Technology 8 Nov 23, 2022
This simple extension can automatically load NBN availability information for properties on realestate.com.au & domain.com.au including technology type, maximum line speed, and co-existance status if available.

NBN Availability Check Chrome Extension This simple extension can automatically load NBN availability information for properties on realestate.com.au

Luke Prior 17 Aug 17, 2022
Open Harvest is a technology designed farmers to publicly share the details of their crops/land to allow all farmers to stay informed on the best crops they can grow without risking a surplus crisis.

OpenHarvest OpenHarvest is a web application designed to balance farming production in India. Farmers in India are struggling with marketing their cro

Call for Code® with The Linux Foundation 11 Dec 8, 2022
The project is a To-Do list project to help plan daily, weekly or monthly activity. I used Html, CSS and JavaScript Technology to execute the project.

<<<<<<< HEAD To Do List This project is geared towards applying acguired skills for development of my porfolio through the following practices: Create

Victor Efosa Osagie 6 Dec 19, 2022
Web-Technology with Aj Zero Coding. In this tutorial we learn front-end and back-end development.

Installation through NPM: The jQWidgets framework is available as NPM package: jQuery, Javascript, Angular, Vue, React, Web Components: https://www

Ajay Dhangar 3 Nov 19, 2022
A multi-application bot that publishes the latest technology-related news

Dev Informado A multi-application bot that publishes the latest technology-related news Compatible Apps | Technologies | How To Use | License ?? Compa

Fernando Groders 4 Jul 24, 2022
A prototype on how web3 technology can enable us to build an open, immutable, reproducible, and permanently accessible scientific record.

Web3 Research A prototype on how web3 technology can enable us to build an open, immutable, reproducible, and permanently accessible scientific record

manveer 0 Nov 27, 2022