Zoom Out Button Zoom In Button DAG View Network Viewer Widget Cytoscape.js Renderer WebGL based renderer (Optional) Search Widget Query Panel Start Query Button Clear Query Button Query Text Box Search Result Panel Search Result List Search Result 1 Search Result n Property Panel Raw Interaction Data View NetworkViewer Widget Cytoscape.js Renderer Selected Edge Property Panel Edge Score List Edge Score Chart Filter List Widget Edge Type Filter Panel Type Checkbox 1 Type Checkbox n Edge Score Filters panel Z-Score Filter Integrated similarity score filter Title Panel Title UUID Description Base Tabbed Pane Gene Property Panel Gene Name Nested Property List List Item 1 List Item n Description Term Property Panel Selected Object’s Property Tab Nested Prop Interaction Tab Interaction List Inter Inter Assigned Genes Tab Gene List Gen Gen Toolbar Application Title Ұͭͷఆٛ
Out Button Zoom In Button DAG View Network Viewer Widget C W Search Widget Query Panel Start Que Clear Qu Query Te Search Result Panel S Property Panel Raw Interaction Data View Filter List Widget Edg Edg Title Panel Title UUID Description Base Tabbed Pane Gene Term Toolbar Application Title Ұͭͷఆٛ -ϞδϡʔϧԽ͞Ε͍ͯΔ -Α͘ΒΕͨՄࢹԽͷύλʔ ϯݪଇΛར༻͍ͯ͠Δ -ΞϓϦέʔγϣϯͷجຊઃܭ - σʔλͱUIͷઃܭ͕ߏ Խ͞Ε͍ͯΔ -σʔλͷཧʹҰఆͷϧʔϧ Λ࣋ͭ -ςετՄೳ ʢίϯϙʔωϯτɾπϦʔͷྫʣ
Panel Password Text Box ID Text Box DAG UUID Text Box Server URL Text Box Button Panel Back to home Button Start Button Command Bar Widget Fit Button Zoom Out Button Zoom In Button DAG View Network Viewer Widget Cytoscape.js Renderer WebGL based renderer (Optional) Search Widget Query Panel Start Query Button Clear Query Button Query Text Box Search Result Panel Search Result List Search Result 1 Search Result n Property Panel Raw Interaction Data View NetworkViewer Widget Cytoscape.js Renderer Selected Edge Property Panel Edge Score List Edge Score Chart Filter List Widget Edge Type Filter Panel Type Checkbox 1 Type Checkbox n Edge Score Filters panel Z-Score Filter Integrated similarity score filter Title Panel Title UUID Description Base Tabbed Pane Gene Property Panel Gene Name Nested Property List List Item 1 List Item n Description Term Property Panel Selected Object’s Property Tab Nested Property List List Item 1 List Item n Interaction Tab Interaction List Interaction 1 Source Type List Score for types Target Interaction n Assigned Genes Tab Gene List Gene 1 Gene props (TBD) Gene n Toolbar Application Title Toggle Menu Button Application Settings Widget Title Panel Links Panel Main View Settings Panel View Threshold Slider Controller’s View State Panel Show/Hide Search Panel Switch Show/Hide Command Bar Switch ՄࢹԽʹඞཁͳཁૉΛ ίϯϙʔωϯτͷπϦʔͱͯ͠
Node ID NDEx UUID Node 1 Node n Node Property 1 Node Property m Edge 1 Edge n Edge Property 1 Edge Property m Raw interaction network Position (x, y) Term Properties Nodes Edges Term ID Term Name Other property 1 Other property n Client Data Model Root Client Side Routing Current location Query User Credential NDEx ID NDEx Password Is search running Search Result Hit 1 Hit n Is loading network Past locations Is loading network 1st child of property 1 M-th child of property 1 Network in Cytoscape.js Edge ID Source Node Target Node Node ID Tree (In Cytoscape.js) Network Style (Renderer-dependent) Hidden Edges Hidden Edge 1 Hidden Edge n NDEx UUID NDEx UUID Term ID Filters Application Setting Rendering Options Main Tree View Threshold Edge Type Filter Edge Score Filters Edge Type 1 Edge Type n Is selected Appearence Title Score Threshold 1 Score Threshold 2 Is selected Background color location 1 location n σʔλϞσϧҰͭͷେ͖ͳπϦʔͱͯ͠
Raw interactions Main DAG (hierarchy) CX to Cytoscape.js Service CX Tool written in Go Graph Layout Service D3 Cluster Layout Other custom layouts ͦͯͦ͠ͷՄࢹԽΞϓϦέʔγϣϯ࣮ݱ ʹඞཁͳόοΫΤϯυΛγϯϓϧʹ࡞Δ