From 52e2ca7cddbf508a4a15765cfc491c4084a2cd9b Mon Sep 17 00:00:00 2001 From: Naoki Nishiguchi Date: Fri, 7 Aug 2015 15:53:49 +0900 Subject: [PATCH 01/16] api::sequence --- app/controllers/api/application_controller.rb | 2 + app/controllers/api/sequence_controller.rb | 7 +++ config/routes.rb | 58 ++----------------- 3 files changed, 13 insertions(+), 54 deletions(-) create mode 100644 app/controllers/api/application_controller.rb create mode 100644 app/controllers/api/sequence_controller.rb diff --git a/app/controllers/api/application_controller.rb b/app/controllers/api/application_controller.rb new file mode 100644 index 0000000..181c989 --- /dev/null +++ b/app/controllers/api/application_controller.rb @@ -0,0 +1,2 @@ +class Api::ApplicationController < ActionController::Base +end diff --git a/app/controllers/api/sequence_controller.rb b/app/controllers/api/sequence_controller.rb new file mode 100644 index 0000000..89e6ef0 --- /dev/null +++ b/app/controllers/api/sequence_controller.rb @@ -0,0 +1,7 @@ +class Api::SequenceController < Api::ApplicationController + def index + end + + def search + end +end diff --git a/config/routes.rb b/config/routes.rb index 3f66539..9569dea 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -1,56 +1,6 @@ Rails.application.routes.draw do - # The priority is based upon order of creation: first created -> highest priority. - # See how all your routes lay out with "rake routes". - - # You can have the root of your site routed with "root" - # root 'welcome#index' - - # Example of regular route: - # get 'products/:id' => 'catalog#view' - - # Example of named route that can be invoked with purchase_url(id: product.id) - # get 'products/:id/purchase' => 'catalog#purchase', as: :purchase - - # Example resource route (maps HTTP verbs to controller actions automatically): - # resources :products - - # Example resource route with options: - # resources :products do - # member do - # get 'short' - # post 'toggle' - # end - # - # collection do - # get 'sold' - # end - # end - - # Example resource route with sub-resources: - # resources :products do - # resources :comments, :sales - # resource :seller - # end - - # Example resource route with more complex sub-resources: - # resources :products do - # resources :comments - # resources :sales do - # get 'recent', on: :collection - # end - # end - - # Example resource route with concerns: - # concern :toggleable do - # post 'toggle' - # end - # resources :posts, concerns: :toggleable - # resources :photos, concerns: :toggleable - - # Example resource route within a namespace: - # namespace :admin do - # # Directs /admin/products/* to Admin::ProductsController - # # (app/controllers/admin/products_controller.rb) - # resources :products - # end + namespace :api, defaults: {format: :json} do + get '/sequence', as: :sequence_index, to: 'sequence#index' + get '/sequence/search', as: :sequence_search, to: 'sequence#search' + end end From dd5304951fb19640bf5110204ba5448a99c1b444 Mon Sep 17 00:00:00 2001 From: Naoki Nishiguchi Date: Fri, 7 Aug 2015 15:54:47 +0900 Subject: [PATCH 02/16] Move togogenome-style - Use bootstrap - "togo.css" - compass, font-awesome --- Gemfile | 3 + Gemfile.lock | 49 +- app/assets/images/csssprite.png | Bin 0 -> 10212 bytes app/assets/javascripts/application.js | 1 + app/assets/stylesheets/application.css | 15 - app/assets/stylesheets/application.css.scss | 3 + app/assets/stylesheets/togo.css.scss | 1843 +++++++++++++++++++ app/views/layouts/application.html.erb | 14 - 8 files changed, 1896 insertions(+), 32 deletions(-) create mode 100644 app/assets/images/csssprite.png delete mode 100644 app/assets/stylesheets/application.css create mode 100644 app/assets/stylesheets/application.css.scss create mode 100644 app/assets/stylesheets/togo.css.scss delete mode 100644 app/views/layouts/application.html.erb diff --git a/Gemfile b/Gemfile index e7cacc8..a8208ee 100644 --- a/Gemfile +++ b/Gemfile @@ -2,7 +2,10 @@ source 'https://rubygems.org' gem 'rails', '4.2.3' +gem 'bootstrap-sass' +gem "compass-rails", github: "Compass/compass-rails", branch: "master" gem 'coffee-rails', '~> 4.1.0' +gem 'font-awesome-sass-rails' gem 'haml-rails' gem 'jbuilder', '~> 2.0' gem 'jquery-rails' diff --git a/Gemfile.lock b/Gemfile.lock index 7136b78..288452f 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -1,3 +1,13 @@ +GIT + remote: git://github.com/Compass/compass-rails.git + revision: 3e88f991150ffa39b0a539dffb3326248d18e6ad + branch: master + specs: + compass-rails (2.0.4) + compass (~> 1.0.0) + sass-rails (< 5.1) + sprockets (< 2.13) + GEM remote: https://rubygems.org/ specs: @@ -37,11 +47,18 @@ GEM thread_safe (~> 0.3, >= 0.3.4) tzinfo (~> 1.1) arel (6.0.3) + autoprefixer-rails (5.2.1.1) + execjs + json binding_of_caller (0.7.2) debug_inspector (>= 0.0.1) + bootstrap-sass (3.3.5.1) + autoprefixer-rails (>= 5.0.0.1) + sass (>= 3.3.0) builder (3.2.2) byebug (5.0.0) columnize (= 0.9.0) + chunky_png (1.3.4) coffee-rails (4.1.0) coffee-script (>= 2.2.0) railties (>= 4.0.0, < 5.0) @@ -50,9 +67,25 @@ GEM execjs coffee-script-source (1.9.1.1) columnize (0.9.0) + compass (1.0.3) + chunky_png (~> 1.2) + compass-core (~> 1.0.2) + compass-import-once (~> 1.0.5) + rb-fsevent (>= 0.9.3) + rb-inotify (>= 0.9) + sass (>= 3.3.13, < 3.5) + compass-core (1.0.3) + multi_json (~> 1.0) + sass (>= 3.3.0, < 3.5) + compass-import-once (1.0.5) + sass (>= 3.2, < 3.5) debug_inspector (0.0.2) erubis (2.7.0) execjs (2.5.2) + ffi (1.9.10) + font-awesome-sass-rails (3.0.2.2) + railties (>= 3.1.1) + sass-rails (>= 3.1.1) globalid (0.3.6) activesupport (>= 4.1.0) haml (4.0.6) @@ -63,6 +96,7 @@ GEM haml (>= 4.0.6, < 5.0) html2haml (>= 1.0.1) railties (>= 4.0.1) + hike (1.2.3) html2haml (2.0.0) erubis (~> 2.7.0) haml (~> 4.0.0) @@ -83,7 +117,7 @@ GEM mime-types (>= 1.16, < 3) mime-types (2.6.1) mini_portile (0.6.2) - minitest (5.7.0) + minitest (5.8.0) multi_json (1.11.2) nokogiri (1.6.6.2) mini_portile (~> 0.6.0) @@ -115,8 +149,11 @@ GEM rake (>= 0.8.7) thor (>= 0.18.1, < 2.0) rake (10.4.2) + rb-fsevent (0.9.5) + rb-inotify (0.9.5) + ffi (>= 0.5.0) rdoc (4.2.0) - ruby_parser (3.7.0) + ruby_parser (3.7.1) sexp_processor (~> 4.1) sass (3.4.16) sass-rails (5.0.3) @@ -130,8 +167,11 @@ GEM rdoc (~> 4.0) sexp_processor (4.6.0) spring (1.3.6) - sprockets (3.2.0) + sprockets (2.12.4) + hike (~> 1.2) + multi_json (~> 1.0) rack (~> 1.0) + tilt (~> 1.1, != 1.3.0) sprockets-rails (2.3.2) actionpack (>= 3.0) activesupport (>= 3.0) @@ -156,8 +196,11 @@ PLATFORMS ruby DEPENDENCIES + bootstrap-sass byebug coffee-rails (~> 4.1.0) + compass-rails! + font-awesome-sass-rails haml-rails jbuilder (~> 2.0) jquery-rails diff --git a/app/assets/images/csssprite.png b/app/assets/images/csssprite.png new file mode 100644 index 0000000000000000000000000000000000000000..173164e4cba2b34a4eecd397d410953e8c160580 GIT binary patch literal 10212 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 literal 0 HcmV?d00001 diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index e07c5a8..f0abf5e 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -12,5 +12,6 @@ // //= require jquery //= require jquery_ujs +//= require bootstrap-sprockets //= require turbolinks //= require_tree . diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css deleted file mode 100644 index f9cd5b3..0000000 --- a/app/assets/stylesheets/application.css +++ /dev/null @@ -1,15 +0,0 @@ -/* - * This is a manifest file that'll be compiled into application.css, which will include all the files - * listed below. - * - * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets, - * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path. - * - * You're free to add application-wide styles to this file and they'll appear at the bottom of the - * compiled file so the styles you add here take precedence over styles defined in any styles - * defined in the other CSS/SCSS files in this directory. It is generally better to create a new - * file per style scope. - * - *= require_tree . - *= require_self - */ diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss new file mode 100644 index 0000000..aa3efba --- /dev/null +++ b/app/assets/stylesheets/application.css.scss @@ -0,0 +1,3 @@ +@import 'bootstrap-sprockets'; +@import 'bootstrap'; +@import 'togo'; diff --git a/app/assets/stylesheets/togo.css.scss b/app/assets/stylesheets/togo.css.scss new file mode 100644 index 0000000..3e521d8 --- /dev/null +++ b/app/assets/stylesheets/togo.css.scss @@ -0,0 +1,1843 @@ +@charset "UTF-8"; +@import "compass"; +@import "font-awesome"; +$color_base_blue: #45b8cc; +$color_base_blue_dark: #33717f; +$color_pale_blue: #ecf8fa; + + +@mixin node-return-icon { + content: ""; + display: block; + position: absolute; + width: 10px; + height: 10px; + border-radius: 10px; + border: solid 3px #333; + background-color: #333; + background-position: -201px -40px; +} + +body { + padding-top: 85px; + background-color: #f4f3f2; + font-family: "Arial",san-serif; +} + +a { + color: #309DB0; +} + +h1, h2, h3, h4, h5, h6 { + margin: 5px 0; + font-family: inherit; + font-weight: bold; + line-height: 20px; + color: inherit; + text-rendering: optimizelegibility; +} + +h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { + font-weight: normal; + line-height: 1; + color: #999999; +} +h1 { + font-size: 22px; + line-height: 30px; + margin: 0; +} +h2 { + font-size: 20px; + line-height: 24px; +} +h3 { + font-size: 24.5px; +} +h4 { + font-size: 17.5px; +} +h5 { + font-size: 14px; +} +h6 { + font-size: 11.9px; +} +h1 small { + font-size: 24.5px; +} +h2 small { + font-size: 17.5px; +} +h3 small { + font-size: 14px; +} +h4 small { + font-size: 14px; +} +.page-header { + padding: 2px 0 0; + margin: 0; + border: none; +} +iframe { + margin: 0 -2px 0; +} +input, button, select, textarea { + font-family: "Myriad Pro","Helvetica Neue",san-serif; +} +select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input { + display: inline-block; + height: 24px; + -moz-box-sizing: border-box; + box-sizing: border-box; + padding: 4px 6px; + margin-bottom: 10px; + font-size: 16px; + line-height: 20px; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + vertical-align: middle; +} + +/* css sprite */ +.navbar .navbar-brand, .navbar .nav > li.active:after, #link-DBCLS, +.tg-button:before, +#search-methods-selector li.current:after, #methods:after, .method-container input[type="search"]:before, .facet .add-on, .facet .tree:before, #search-methods-selector li.search-methods-visibility-button:after, +.selector-display-button, .pagination-slider-indicator:after, +[data-mapping-mode="resolver"] #mapping-results-container .node.selected-route .small-db-icon:hover:after, +[data-mapping-mode="resolver"] #mapping-from-db.db-selector .icon:hover:after { + background-image: image-url('csssprite.png'); + background-repeat: no-repeat; +} +/* Retina */ +@media only screen and (-webkit-min-device-pixel-ratio: 2), +only screen and (min-device-pixel-ratio: 2), +(min-resolution: 2dppx) { + .navbar .navbar-brand, .navbar .nav > li.active:after, #link-DBCLS, + .tg-button:before, + #search-methods-selector li.current:after, #methods:after, .method-container input[type="search"]:before, .facet .add-on, .facet .tree:before, #search-methods-selector li.search-methods-visibility-button:after, + .selector-display-button, .pagination-slider-indicator:after, + [data-mapping-mode="resolver"] #mapping-results-container .node.selected-route .small-db-icon:hover:after, + [data-mapping-mode="resolver"] #mapping-from-db.db-selector .icon:hover:after { + background-image: image-url('csssprite@2x.png'); + background-size: 600px auto; + } +} + + + +/* common */ +.padding { + padding: 12px 20px; +} +.small-note { + color: #666; + line-height: 18px; +} +.small-note h2 { + font-size: 16px; + margin: 0; +} + +/* common ui */ +.tg-button { + display: inline-block; + background: $color_base_blue; + @include background-image(linear-gradient(top, $color_base_blue, $color_base_blue_dark)); + @include box-shadow(0 2px 2px rgba(0, 0, 0, 0.3)); + border-radius: 6px; + border: none; + cursor: pointer; + color: #fff; + font-size: 16px; + line-height: 30px; + padding: 0 16px; + position: relative; + &:hover { + @include transform(translateY(1px)); + @include box-shadow(0 1px 2px rgba(0, 0, 0, 0.5)); + } + &:before { + display: inline-block; + content: ""; + margin-right: .25em; + position: relative; + top: 5px; + position: relative; + } + &.clear { + background: #999; + @include background-image(linear-gradient(top, #999, #666)); + } + &.clear:before { + width: 20px; + height: 20px; + background-position: -180px -40px; + margin-left: -4px; + } + &.download:before { + width: 12px; + height: 9px; + background-position: -180px -60px; + margin-right: .5em; + top: -1px; + } +} + +/* pagination */ +.pagination { + position: relative; + -ms-user-select: none; + -moz-user-select: none; + -webkit-user-select: none; + user-select: none; +} +.pagination ul { + display: inline-block; + margin-left: 0; + margin-bottom: 0; + -webkit-border-radius: none; + -moz-border-radius: none; + border-radius: none; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; + z-index: 3; + position: relative; +} +.pagination ul > li > a, .pagination ul > li > span { + float: none; + display: inline-block; + padding: 4px 9px; + line-height: 14px; + background-color: $color_base_blue; + color: #fff; + border: none; +} +.pagination ul > li.prev > a, .pagination ul > li.prev > span, +.pagination ul > li.next > a, .pagination ul > li.next > span { + border-radius: 11px; +} +.pagination ul > li:nth-of-type(3) > a, .pagination ul > li:nth-of-type(3) > span { + border-top-left-radius: 11px; + border-bottom-left-radius: 11px; + padding-left: 18px; +} +.pagination ul > li:nth-last-of-type(3) > a, .pagination ul > li:nth-last-of-type(3) > span { + border-top-right-radius: 11px; + border-bottom-right-radius: 11px; + padding-right: 18px; +} +.pagination ul > li.prev > a, .pagination ul > li.prev > span { + margin-right: .6em; +} +.pagination ul > li.next > a, .pagination ul > li.next > span { + margin-left: .6em; +} +.pagination ul > .disabled > span, .pagination ul > .disabled > a, .pagination ul > .disabled > a:hover, .pagination ul > .disabled > a:focus { + color: #fff; + background-color: #ccc; +} +.pagination ul > li > a:hover, .pagination ul > li > a:focus, .pagination ul > .active > a, .pagination ul > .active > span { + background-color: $color_base_blue_dark; +} +.pagination ul > .active > a, .pagination ul > .active > span { + color: #fff; +} +/* pagination slider */ +.pagination-slider { + position: relative; + height: 56px; + clear: both; + -ms-user-select: none; + -moz-user-select: none; + -webkit-user-select: none; + user-select: none; +} +.pagination-slider > div { + position: absolute; +} +.pagination-slider-bar, .pagination-slider-current-bar { + height: 4px; + top: 34px; +} +.pagination-slider-bar { + width: 100%; + background-color: #ddd; +} +.pagination-slider-current-bar { + background-color: $color_base_blue; +} +.pagination-slider-indicator > .inner { + background-color: $color_base_blue; + color: #fff; + line-height: 26px; + text-align: center; + font-weight: bold; + font-size: 16px; + border-radius: 13px; + padding: 0 13px; + box-shadow: 0 1px 2px rgba(0,0,0,.2); + cursor: pointer; + position: relative; + left: -50%; +} +.pagination-slider-indicator:after { + content: ""; + display: block; + position: absolute; + width: 17px; + height: 9px; + background-position: 0 -40px; + bottom: -8px; + transform: translateX(-8px); + -ms-transform: translateX(-8px); + -moz-transform: translateX(-8px); + -webkit-transform: translateX(-8px); +} +.pagination-slider-dotted-line-left, +.pagination-slider-dotted-line-right { + border-top: dashed 1px $color_base_blue; +} + +/* header */ +header .navbar .nav { + padding-left: 10px; + & > li > a { + color: #888; + position: relative; + top: 4px; + font-weight: normal; + &:hover { + color: #888; + text-decoration: underline; + } + } +} +.navbar-inverse .navbar-inner { + background-color: #fff; + background-image: none; + border: none; + padding: 0 15px; + height: 45px; +} +.navbar-fixed-top .navbar-inner, .navbar-static-top .navbar-inner { + -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); + -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); + box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); +} +.navbar .navbar-brand { + padding: 0; + margin-right: 10px; + margin-left: 2px; + margin-top: 4px; + width: 179px; + height: 40px; + text-indent: -9999px; +} +#login { + position: absolute; + right: 13px; + top: 8px; + line-height: 28px; +} + +/* main */ +#main { + padding-bottom: 30px; +} +#main > section { + padding: 0 20px; +} +.container-fluid { + padding-right: 0; + padding-left: 0; +} + +/* navbar */ +#nav-wrapper { + position: fixed; + top: 40px; + width: 100%; +} +#navbar { + background-color: rgba(67, 185, 204, 0.9); + -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); + -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); + box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); + height: 40px; + margin: 0 -25px; +} +.navbar-inner { + padding: 0; + background-color: transparent; + background-image: none; + background-repeat: repeat-x; + border: none; + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; + height: 50px; + overflow: hidden; + padding-left: 20px; + padding-right: 20px; +} +#main .navbar .nav { + margin: 0 -12px; + padding: 0 25px; + position: absolute; +} +.navbar .nav > li { + position: relative; + padding-left: 17px; + margin-left: -17px; +} +.navbar .nav > li.active:after { + content: " "; + display: block; + position: absolute; + width: 17px; + height: 10px; + background-position: 0 -40px; + left: 50%; +} +.navbar .nav > li > a { + padding: 0 12px; + color: rgba(255, 255, 255, 0.7); + text-shadow: none; + line-height: 40px; + font-size: 16px; + font-weight: bold; + position: relative; + top: 4px; +} +.navbar .nav > li > a:hover { + color: #fff; +} +.navbar .nav > .active > a, .navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus { + color: #fff; + background-color: transparent; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} + +/* header */ +#header { + padding-top: 26px; + margin-bottom: 24px; + border-bottom: solid 3px #555; + &.tg-report-header { + p.tg-report-type { + font-size: 12px; + line-height: 14px; + font-weight: bold; + margin-bottom: 2px; + background-color: #333; + color: #fff; + padding: 1px 8px; + letter-spacing: .15em; + } + h1 { + padding: 3px 0 0; + span { + &:before { + color: $color_base_blue; + font-size: 14px; + font-weight: lighter; + } + &#tg-title-id:before { + content: "ID: "; + } + &#tg-title-label:before { + content: "Label: "; + } + & + span { + margin-left: .75em; + } + } + } + } +} + +/* footer */ +footer { + position: relative; + background-color: #555; + color: #fff; + padding: 25px 25px 15px; +} +footer a { + color: #fff; + text-decoration: underline; +} +footer a:hover { + color: $color_base_blue; +} +#link-DBCLS { + display: block; + text-indent: -9999px; + width: 99px; + height: 46px; + background-position: -20px -40px; + margin-bottom: 10px; +} +footer address { + font-size: 12px; + line-height: 20px; +} +#copyright { + font-size: 12px; +} + +/* search-methods */ +#search-methods-container { + background-color: #fff; + -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); + -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); + box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + margin-top: -16px; + margin-bottom: 12px; +} +#search-methods-selector { + margin: 0 0 8px; + padding: 10px 5px; + color: #fff; + font-weight: bold; + font-size: 16px; + line-height: 17px; + height: 37px; + position: relative; + background: $color_base_blue; + /* Old browsers */ + background: -moz-linear-gradient(top, $color_base_blue 1%, $color_base_blue_dark 100%); + /* FF3.6+ */ + background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, $color_base_blue), color-stop(100%, $color_base_blue_dark)); + /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(top, $color_base_blue 1%, $color_base_blue_dark 100%); + /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, $color_base_blue 1%, $color_base_blue_dark 100%); + /* Opera 11.10+ */ + background: -ms-linear-gradient(top, $color_base_blue 1%, $color_base_blue_dark 100%); + /* IE10+ */ + background: linear-gradient(to bottom, $color_base_blue 1%, $color_base_blue_dark 100%); + /* W3C */ + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$color_base_blue', endColorstr='$color_base_blue_dark',GradientType=0 ); + /* IE6-9 */ +} +#search-methods-selector li { + list-style: none; + cursor: pointer; +} +#search-methods-selector > li { + float: left; + line-height: 17px; + position: relative; + color: rgba(255, 255, 255, 0.5); + padding: 0 16px; + border-right: solid 1px rgba(255, 255, 255, 0.2); +} +#search-methods-selector > li a { + color: rgba(255, 255, 255, 0.5); + text-decoration: none; +} +#search-methods-selector > li.current, +#search-methods-selector > li:hover, +#search-methods-selector > li:hover a { + color: #fff; +} +#search-methods-selector > li.current:after { + content: ""; + display: block; + width: 19px; + height: 10px; + position: absolute; + bottom: -20px; + left: 50%; + transform: translateX(-10px); + -ms-transform: translateX(-10px); + -moz-transform: translateX(-10px); + -webkit-transform: translateX(-10px); + background-position: -120px -40px; +} +#search-methods-selector li.search-methods-visibility-button { + position: absolute; + top: 10px; + right: 16px; + font-weight: normal; + color: #fff; + border: none; + padding: 0; +} +#search-methods-selector li.search-methods-visibility-button:after { + content: ""; + display: inline-block; + width: 15px; + height: 14px; + background-position: -140px -60px; + margin-left: .5em; +} +#search-methods-selector li.search-methods-visibility-button.hide { + display: inline-block; +} +#search-methods-selector li.search-methods-visibility-button.hide:after { + background-position: -160px -60px; +} +#methods { + position: relative; +} +#methods:after { + content: ""; + display: block; + width: 19px; + height: 12px; + background-position: -140px -40px; + position: absolute; + bottom: -12px; + left: 22px; + z-index: 3; +} +#methods.no-result-column:after { + display: none; +} +.method-container { + padding: 4px 0; +} +#search-methods-container + div { + padding: 14px 20px; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +/* facet */ +.facet { + background-color: transparent; + position: relative; + padding: 10px 20px 4px 244px; + border-bottom: dashed 1px #ccc; + font-size: 16px; + line-height: 22px; + .selected { + position: relative; + .add-on { + display: block !important; + min-width: auto; + padding: 10px; + text-shadow: none; + background-color: transparent; + border: none; + position: absolute; + width: 20px; + height: 20px; + background-position: -156px -37px; + z-index: 3; + top: 1px; + left: 3px; + cursor: pointer; + @include box-sizing(border-box); + &.facet-selected { + background-position: -180px -40px; + } + } + } +} +h3[class^="icon-"], h3[class*=" icon-"] { + font-family: "Myriad Pro","Helvetica Neue",san-serif; + font-size: 16px; + font-weight: bold; + display: block; + width: 234px; + line-height: 22px; + vertical-align: baseline; + text-align: right; + position: absolute; + left: 0; +} +.icon-search::before { + content: none; +} +.icon-search::after { + content: "▶"; + font-size: 8px; + padding-left: 1em; + vertical-align: baseline; +} +.method-container { + input { + &[type="search"] { + -moz-appearance: none !important; + width: 100%; + @include box-sizing(border-box); + height: 22px; + padding-left: 24px; + position: relative; + background-color: $color_pale_blue; + display: block; + margin-bottom: 0; + &:before { + -moz-appearance: none !important; + content: ""; + display: block; + position: absolute; + height: 14px; + width: 14px; + background-position: -160px -40px; + left: 6px; + } + } + &.facet-selected { + background-color: $color_base_blue_dark !important; + background-image: none; + color: #fff; + } + } +} + +/* facet classes */ +.classes-container { + margin: 0 0 -4px; + padding: 6px 5px 0; + position: relative; + display: inline-block; +} +.classes-container .class-node { + display: inline-block; + list-style: none; +} +.classes-container .class-node span { + color: $color_base_blue; + font-weight: bold; + font-size: 16px; + line-height: 20px; + word-wrap: normal; + cursor: pointer; +} +.classes-container .class-node span:hover { + color: $color_base_blue_dark; +} +.selector-display-button { + display: inline-block; + width: 13px; + height: 13px; + background-position: -120px -60px; + margin-left: .5em; + cursor: pointer; + position: relative; +} +.selector-display-button:hover { + background-position: -120px -80px; +} +.classes-container .class-node + .class-node:before { + content: ">"; + font-weight: normal; + color: #ccc; + display: inline-block; + width: 26px; + height: 20px; + text-align: center; +} +.classes-selector { + height: auto; + overflow-y: auto; + color: #fff; + background-color: $color_base_blue; + padding: 8px; + -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); + -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); + box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); + z-index: 3; + -webkit-border-radius: 6px; + border-radius: 6px; + position: absolute; + margin: -13px 0; + z-index: 2001; + visibility: hidden; +} +.classes-selector.left-side { + right: 0; +} +.classes-selector li { + cursor: pointer; + -webkit-border-radius: 13px; + border-radius: 13px; + padding: 0 10px; + white-space: nowrap; + line-height: 26px; + font-size: 16px; + font-weight: bold; +} +.classes-selector li:hover { + background-color: rgba(255,255,255,.3); +} +.classes-selector li.selected { + color: $color_base_blue; + background-color: #fff; +} +.classes-container .hit-test { + position: fixed; + width: 100%; + height: 100%; + background-color: rgba(1,1,1,.0); + top: 0; + left: 0; + z-index: 2000; + display: none; +} + +#facets > div { + -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset; + -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset; + background-color: #fcfcfc; + position: relative; + margin-top: -1px; +} + +#result_panes.tab-content { + overflow: visible; +} + +/* autocomplete */ +.ui-autocomplete { + z-index: 20 !important; + -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); + -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); + box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); + border: none; +} +.ui-widget-content { + border: none; +} +.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { + background-color: #daf1f5; + background-image: none; + border-color: #cfeaf0; +} +.limit-message { + background-color: $color_base_blue; + color: #fff; +} + +/* genomes */ +#genomes { + -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); + -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); + box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); + z-index: 3; + -webkit-border-radius: 6px; + border-radius: 6px; + background-color: #fff; +} +#results_info, .dataTables_info { + color: #666; +} +.table { + border-top: none; + border-right: none; + padding-top: 10px; +} +table.dataTable { + margin-bottom: 6px; +} +table.table { + td, th { + border-left: none; + padding: 3px 10px 3px 3px; + } + thead td { + font-weight: bold; + } + tbody tr:first-child td { + border-top: solid 2px #555; + } + td.dataTables_empty { + padding: 15px; + } +} +.table-hover tbody tr:hover > td, .table-hover tbody tr:hover > th { + background-color: #daf1f5; +} + +.identifiers_processing { + left: 50%; + padding-top: 20px; + text-align: center; + font-weight: bold; +} + +div#result_panes .dataTables_processing, .identifiers_processing{ + box-shadow: 0 0 24px rgba(0,0,0,.2); + z-index: 100; + position: fixed; + background: image-url('loading.gif') no-repeat 50% 66% white; + top: 50% !important; + border: none !important; + height: 60px; + width: 250px; + margin-top: -30px; + margin-left: -125px; + color: #999; + font-size: 14px; +} +.dataTables_length { + position: relative; + z-index: 1; +} +table#results { + ul { + margin: 0 0 0 16px; + } + ul + ul { + padding-top: 10px; + } + li { + line-height: 14px; + padding: 3px 0; + } +} + +/* result download button */ +.result-upload-container a, +.result-download-container a { + color: #fff; + background-color: $color_base_blue; + line-height: 18px; + font-size: 14px; + font-weight: normal; + border-radius: 10px; + padding: 2px 10px 0; + cursor: pointer; + display: inline-block; +} +.result-upload-container a:hover, +.result-download-container a:hover { + background-color: $color_base_blue_dark; + text-decoration: none; +} +.result-upload-container a i, +.result-download-container a i { + margin-right: .5em; + font-size: 12px; + position: relative; + top: -1px; +} +.result-upload-container a + a, +.result-download-container a + a { + margin-left: 4px; +} + +/* sequence */ +#sequence-container .inner { + padding: 10px 20px 4px 20px; + position: relative; +} +#sequence-container.method-container input[type="search"] { + width: 100%; + margin-right: -90px; + padding-right: 100px; + height: 28px; + display: inline-block; +} +#sequence-container.method-container input[type="search"]:before { + top: 7px; +} +#sequence-container button { + width: 90px; + left: 10px; + margin-left: -10px; +} + + +/* ID Mapping ver. 2 */ +#mappings-selector-container { + width: 100%; + position: relative; + @include box-sizing(border-box); + padding: 20px 156px; +} +/* ID Mapping: large icon */ +.db-selector { + width: 27px; + height: 26px; + position: absolute; + top: 50%; + @include transform(translateY(-50%)); + z-index: 200; + & > div { + position: absolute; + } + .side, .lid { + width: 26px; + background-color: #aaa; + position: absolute; + @include transition(background-color .5s ease-out 0); + } + .side { + height: 8px; + border-radius: 0 0 13px 13px/0 0 5px 5px; + box-shadow: 0 3px 2px -3px rgba(0,0,0,.6); + } + .bottom.side { + box-shadow: 0 1.5px 2.5px -.5px rgba(0,0,0,.3); + } + .lid { + height: 10px; + border-radius: 13px/5px; + box-shadow: 0 .5px 0 rgba(255,255,255,.6); + &:after { + content: ""; + width: 26px; + height: 10px; + background-color: rgba(255,255,255,.4); + border-radius: 13px/5px; + position: absolute; + display: block; + top: 0; + left: 0; + } + } + .top.side { top: 5px; } + .middle.lid { top: 6px; } + .middle.side { top: 11px; } + .bottom.lid { top: 12px; } + .bottom.side { top: 17px; } +} +#mapping-from-db { + left: 144px; +} +#mapping-to-db { + right: 144px; +} +.db-selector .icon { + position: relative; + top: -2px; + z-index: 200; + height: 26px; +} +[data-mapping-mode="resolver"] #mapping-from-db.db-selector .icon { + cursor: pointer; + &:hover:after { + @include node-return-icon; + top: -20px; + left: 5px; + z-index: 1; + } +} +.db-selector { + .db-name-container { + width: 110px; + top: -8px; + height: 40px; + display: table; + position: absolute; + cursor: pointer; + } + .db-name { + font-size: 12px; + line-height: 12px; + vertical-align: middle; + display: table-cell; + &.selected { + font-weight: bold; + } + &:before, &:after { + content: ""; + display: block; + color: #000; + height: 2px; + position: absolute; + } + &:before { + border-left: 4px solid transparent; + border-right: 4px solid transparent; + border-bottom: 5px solid #000; + top: 12px; + } + &:after { + border-top: 5px solid #000; + border-left: 4px solid transparent; + border-right: 4px solid transparent; + top: 21px; + } + } +} +#mapping-from-db.db-selector { + .db-name-container { + left: -130px; + } + .db-name { + text-align: right; + &:before, &:after { + right: -12px; + } + } +} +#mapping-to-db.db-selector { + .db-name-container { + right: -128px; + } + .db-name { + text-align: left; + &:before, &:after { + left: -12px; + } + } +} +#mapping-results-container { + height: 120px; + min-height: 120px; + position: relative; + @include transition(height .8s ease-out 0); +} +.arrow-container, .node { + @include transition(opacity .1s ease-out 0, height .5s ease-out 0, top .5s ease-out 0, left .5s ease-out 0); +} +/* +@-webkit-keyframes node-hop { + 0% { -webkit-transform: translate(0px, 0px); } + 75% { -webkit-transform: translate(-10px, -80px); } + 100% { -webkit-transform: translate(0px, 0px); } +} +@keyframes node-hop { + 0% { transform: translate(0px 0px); } + 75% { transform: translate(-10px, -80px); } + 100% { transform: translate(0px 0px); } +} +*/ +.deciding-route #mapping-hovering-route .node { + -moz-transition: none; + -webkit-transition: none; + -o-transition: none; + -ms-transition: none; + transition: none; + /* + -webkit-animation-duration: 4.4s; + animation-duration: 4.4s; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + -webkit-animation-name: node-hop; + animation-name: node-hop; + */ +} +.node .small-db-icon { + -moz-transition: top 1.5s ease-out 0; + -webkit-transition: top 1.5s ease-out 0; + -o-transition: top 1.5s ease-out 0; + -ms-transition: top 1.5s ease-out 0; + transition: top 1.5s ease-out 0; + -moz-transition: left 1.5s ease-out 0; + -webkit-transition: left 1.5s ease-out 0; + -o-transition: left 1.5s ease-out 0; + -ms-transition: left 1.5s ease-out 0; + transition: left 1.5s ease-out 0; +} +.mapping-arrow { + -moz-transition: height .5s ease-out 0, border .5s ease-out 0; + -webkit-transition: height .5s ease-out 0, border .5s ease-out 0; + -o-transition: height .5s ease-out 0, border .5s ease-out 0; + -ms-transition: height .5s ease-out 0, border .5s ease-out 0; + transition: height .5s ease-out 0, border .5s ease-out 0; +} +.mapping-arrow:after { +} +/* arrow svg */ +#arrows-svg { + padding: 0; + margin: 0; +} +#arrows-svg path.arrow, +#arrows-svg path.arrowhead { + fill: none; + stroke: #000; + stroke-width: 2; +} +/* +#mapping-results-container.highlighting .arrow-container, +#mapping-results-container.highlighting .node { + opacity: .05; +} +*/ +#mapping-results-container.highlighting .highlighting { + z-index: 110; +} +#mapping-results-container > div { + -moz-box-sizing: border-box; + box-sizing: border-box; + padding: 0; + margin: 0; + position: absolute; + top: 0; + left: 0; + width: 100%; +} + +/* ID Mapping: small icon */ +#mapping-dbicons-container { +} +[data-mapping-mode="converter"] #mapping-dbicons-container { + z-index: 130; +} +#mapping-results-container .node { + position: absolute; + width: 16px; + height: 16px; + border-radius: 8px; + background-color: #4c443c; + -webkit-transform: translateX(-50%); + transform: translateX(-50%); +} +[data-mapping-mode="converter"] #mapping-results-container .node .small-db-icon { + cursor: pointer; + z-index: 131; +} +#mapping-results-container .node p { + pointer-events: none; +} +[data-mapping-mode="resolver"] #mapping-results-container .node { + cursor: pointer; +} +[data-mapping-mode="resolver"] #mapping-results-container .node.selected-route .small-db-icon:hover:after { + @include node-return-icon; + top: -20px; + left: -2px; + z-index: 1; +} +#mapping-results-container .node.category { + background-color: #fff; +} +#mapping-results-container .node.category .category-node{ + border-width: 3px; + border-style: solid; + width: 6px; + height: 6px; + position: absolute; + border-radius: 8px; + cursor: pointer; +} +#mapping-results-container .small-db-icon { + position: absolute; + width: 10px; + left: 3px; + top: 3px; +} +.small-db-icon .side, +.small-db-icon .lid { + position: absolute; + width: 10px; + left: 0; +} +.small-db-icon .side { + height: 3px; + border-radius: 0 0 5px 5px/0 0 2px 2px; +} +.small-db-icon .lid { + height: 4.5px; + border-radius: 5px/2px; +} +.small-db-icon .lid:after { + content: ""; + width: 10px; + height: 4.5px; + background-color: rgba(255,255,255,.4); + border-radius: 5px/2px; + position: absolute; + display: block; + top: 0; + left: 0; +} +.small-db-icon .top.side { top: 2.5px; } +.small-db-icon .middle.lid { top: 2.5px; } +.small-db-icon .middle.side { top: 5px; } +.small-db-icon .bottom.lid { top: 5px; } +.small-db-icon .bottom.side { top: 7.5px; } +.node .db-name { + position: absolute; + font-size: 12px; + font-weight: bolder; + line-height: 14px; + text-align: left; + -moz-transform: rotate(-45deg); + -webkit-transform: rotate(-45deg); + -o-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + transform: rotate(-45deg); + -webkit-transform-origin: 0% 50%; + -ms-transform-origin: 0% 50%; + -o-transform-origin: 0% 50%; + -ms-transform-origin: 0% 50%; + transform-origin: 0% 50%; + top: -8px; + left: 17px; + width: 250px; + text-shadow: -1px -1px 0px #fff, -1px 0px 0px #fff, -1px 1px 0px #fff, 0px -1px 0px #fff, 0px 1px 0px #fff, 1px -1px 0px #fff, 1px 0px 0px #fff, 1px 1px 0px #fff; +} +/* ID Mapping: arrow */ +.arrow-container { + position: absolute; + height: 21px; + width: 100%; + padding-left: 7.5px; + padding-right: 10.5px; + &.left { + padding-left: 0; + } + &.right { + padding-right: 16px; + &.top, + &.bottom { + padding-right: 0; + } + } + &.undefined { + position: relative; + height: 120px; + padding-left: 10px; + padding-right: 20px; + @include box-sizing(border-box); + @include transition(opacity .2s ease-out 0); + } +} +#mapping-results-container.showing-result .arrow-container.undefined { + opacity: 0; +} +.arrow-container { + .inner { + position: relative; + width: 100%; + height: 100%; + top: -3px; + } + &.bottom .inner { + top: -2px; + } +} +.mapping-arrow { + position: absolute; + border-style: solid; + border-color: #4c443c; + border-width: 0; + border-top-width: 2px; + width: 100%; + top: 50%; + @include box-sizing(border-box); + &.undefined { + border-top-style: dotted; + border-top-width: 2px; + } +} +[data-mapping-mode="resolver"] .mapping-arrow.undefined { + width: 10%; + opacity: .5; +} +.left .mapping-arrow { + border-left-width: 2px; +} +.right .mapping-arrow { + border-right-width: 2px; +} +.top.left .mapping-arrow { + border-top-left-radius: 4px; +} +.bottom.left .mapping-arrow { + border-bottom-left-radius: 4px; +} +.top.right .mapping-arrow { + border-top-right-radius: 4px; +} +.bottom.right .mapping-arrow { + border-bottom-right-radius: 4px; +} +.bottom .mapping-arrow { + border-top-width: 0; + border-bottom-width: 2px; + top: auto; + bottom: 50%; +} +.dotted .mapping-arrow { + border-style: dotted; + border-color: #000; +} +.mapping-arrow.right-arrowhead:after { + content: ""; + display: block; + width: 4px; + height: 4px; + border-top: solid 2px #4c443c; + border-right: solid 2px #4c443c; + position: absolute; + @include transform(rotate(45deg)); + top: -4px; + right: 0; + @include transition( + transform .2s ease-out 0, + left .2s ease-out 0, + right .2s ease-out 0, + top .2s ease-out 0, + bottom .2s ease-out 0); +} +.right .mapping-arrow.right-arrowhead:after { + right: -2px; +} +.top.right .mapping-arrow.right-arrowhead:after { + @include transform(rotate(135deg)); + top: auto; + bottom: 0; + right: -4px; +} +.bottom .mapping-arrow.right-arrowhead:after { + top: auto; + bottom: -4px; +} +.bottom.right .mapping-arrow.right-arrowhead:after { + @include transform(rotate(-45deg)); + top: 0; + right: -4px; +} +/* ID Mapping: routes */ +#mapping-routes-container { +} +#mapping-routes-container .route { + height: 21px; + cursor: pointer; + position: relative; + z-index: 120; +} +#mapping-hovering-route { + z-index: 0; +} +.deciding-route #mapping-hovering-route { + z-index: 100; +} +[data-mapping-mode="converter"] #mapping-results-container.highlighting #mapping-arrows-container, +[data-mapping-mode="converter"] #mapping-results-container.highlighting #mapping-dbicons-container { + opacity: .3; +} +[data-mapping-mode="resolver"] #mapping-results-container.highlighting #mapping-dbicons-container .node { + opacity: .3; +} +[data-mapping-mode="resolver"] #mapping-results-container.highlighting #mapping-dbicons-container .node.hovering, +[data-mapping-mode="resolver"] #mapping-results-container.highlighting #mapping-dbicons-container .node.selected-route { + opacity: 1; +} +#mapping-results-container.highlighting #mapping-arrows-container path { + stroke-opacity: .3; +} +#mapping-results-container.highlighting #mapping-arrows-container .hovering path, +#mapping-results-container.highlighting #mapping-arrows-container .selected-route path { + stroke-opacity: 1; +} + +/* result message */ +.result-message { + font-size: 12px; + line-height: 20px; + color: #666; + position: absolute; + top: -13px; +} +/* ID Mapping: db selector */ +.db-list-container { + width: auto; + min-width: 150px; + background-color: rgba(255,255,255,.975); + border-radius: 10px; + top: -90px; + box-shadow: 0 2px 6px rgba(0,0,0,.5); + opacity: 0; + visibility: hidden; + -webkit-transform: scale(.85); + transform: scale(.85); + -moz-transition: -ms-transform .2s ease-out 0, opacity .2s ease-out 0; + -webkit-transition: -webkit-transform .2s ease-out 0, opacity .2s ease-out 0; + -o-transition: -o-transform .2s ease-out 0, opacity .2s ease-out 0; + -ms-transition: -ms-transform .2s ease-out 0, opacity .2s ease-out 0; + transition: transform .2s ease-out 0, opacity .2s ease-out 0; + position: absolute; + z-index: 300; +} +.db-selector .db-list-container { + width: 380px; +} +.db-list-container.open { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); + visibility: visible; +} +.db-list-container { + /*left: 42px;*/ + -webkit-transform-origin:-10% 30%; + -moz-transform-origin:-10% 30%; + -o-transform-origin:-10% 30%; + -ms-transform-origin:-10% 30%; + transform-origin:-10% 30%; +} +.db-list-container.is-right { + /*right: 42px;*/ + -webkit-transform-origin:110% 30%; + -moz-transform-origin:110% 30%; + -o-transform-origin:110% 30%; + -ms-transform-origin:110% 30%; + transform-origin:110% 30%; +} +.db-list-container .bg { + position: fixed; + visibility: hidden; + z-index: 301; +} +.db-list-container.open .bg { + visibility: visible; +} +.db-list-container .arrow { + content: ""; + display: block; + position: absolute; + border-right: solid 11px #4B4738; + border-top: solid 7px transparent; + border-bottom: solid 7px transparent; + left: -11px; + -moz-transform: translateY(-50%); + -webkit-transform: translateY(-50%); + -o-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); +} +.db-list-container.is-right .arrow { + left: auto; + right: -11px; + border-right: none; + border-left: solid 11px #999482; +} +.db-list-container:before { + content: "Select database"; + font-size: 14px; + line-height: 20px; + color: #999482; + text-align: center; + display: block; + margin: 16px auto -4px; +} + +.db-list-container .inner { + position: relative; + padding: 0 10px 0 10px; + z-index: 302; +} +.db-selector + .db-list-container .inner { + padding-left: 135px; + padding-bottom: 10px; + overflow-y: scroll; +} +.db-list-container dl, +.db-list-container ul { + margin: 14px 0; +} +.db-list-container dt, +.db-list-container dd, +.db-list-container li { + line-height: 14px; +} +.db-list-container dt { + margin-bottom: -20px; + font-size: 12px; + font-weight: normal; + text-align: right; + left: -134px; + top: 6px; + position: relative; + width: 130px; + height: 20px; + line-height: 12px; +} +.db-list-container dd, +.db-list-container li { + font-style: 14px; + margin-left: 0; + list-style: none; +} +.db-list-container dd + dt { + margin-top: 10px; +} +.db-list-container dd p, +.db-list-container li p { + padding: 3px 7px; + margin: 0; + border: solid 2px rgba(1,1,1,0); + cursor: pointer; +} +.db-list-container dd:hover p, +.db-list-container li:hover p, +.db-list-container dd p.selected, +.db-list-container li p.selected { + background-color: #fff; + border: solid 2px #999482; + border-radius: 14px; +} +.db-list-container dd p.disable, +.db-list-container li p.disable { + cursor: auto; + border-color: rgba(1,1,1,0); + color: #ccc; +} +/* ID Mapping: ids */ +#mappings-id-container { + padding: 0 20px 10px; + h2 { + font-size: 18px; + line-height: 24px; + border-bottom: solid 2px #000; + } +} +#mappings-id-container h2 > span { + position: relative; + top: -2px; +} +#mapped-ids { + width: 100%; + table-layout: fixed; + position: relative; + margin-top: -6px; + border-top: solid 2px #000; +} +#mapped-ids th, +#mapped-ids td { + padding: 8px 24px 6px 0; + vertical-align: top; + line-height: 14px; +} +#mapped-ids th { + border-bottom: solid 2px #000; + text-align: left; +} +#mapped-ids th div.circle { + display: inline-block; + width: 5px; + height: 5px; + margin-right: .25em; + border-width: 3px; + border-style: solid; + border-radius: 6px; +} +#mapped-ids td { + border-bottom: solid 1px #ccc; + position: relative; +} +#mapped-ids td div { + position: relative; +} +#mapped-ids tbody td + td div:before { + content: ""; + display: block; + width: 5px; + height: 5px; + border-bottom: solid 1px #666; + border-right: solid 1px #666; + -moz-transform: rotate(-45deg) translateY(-3px); + -webkit-transform: rotate(-45deg) translateY(-3px); + -o-transform: rotate(-45deg) translateY(-3px); + -ms-transform: rotate(-45deg) translateY(-3px); + transform: rotate(-45deg) translateY(-3px); + position: absolute; + top: 50%; + left: -16px; +} +#mapped-ids td a { + line-height: 14px; + display: block; + padding: 2px 0; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} +#mapped-ids td a span { +} +#mapped-ids td a .id-name { + color: #000; + position: relative; + top: 1px; +} +#mapped-ids td a .url { + font-size: 10px; + position: relative; + top: -1px; +} +#add-new-id { + position: relative; + margin: 10px 100px 8px 0; + p { + position: absolute; + z-index: 10; + width: 50%; + top: 20px; + left: 25%; + text-align: center; + line-height: 12px; + font-size: 12px; + color: $color_base_blue; + } + textarea { + width: 100%; + height: 50px; + position: relative; + background-color: $color_pale_blue; + &:focus, &:hover { + z-index: 20; + border-color: $color_base_blue_dark; + @include box-shadow(0 0 6px $color_base_blue); + } + } + button { + position: absolute; + top: 0; + right: -100px; + height: 50px; + } + &.sample { + &:after { + content: "Sample"; + position: absolute; + bottom: 20px; + right: 17px; + color: #CAC8C8; + font-size: 18px; + font-weight: bold; + width: 200px; + height: 40px; + line-height: 50px; + overflow: hidden; + left: 50%; + text-align: center; + margin-left: -100px; + } + textarea { + background-color: #f3f2f2; + } + } +} + +div#mapping-reset-button { + color: #fff; + position: absolute; + top: -14px; + left: auto; + right: -130px; + font-size: 12px; + text-align: center; + width: 80px !important; + line-height: 28px; +} + +/* stanza */ +#lineage_information iframe, +#environment_inhabitants iframe { + max-height: 500px; + overflow: auto; +} + + +/* Nano Stanza + -------------------------------- */ + #nanostanzas { + margin-bottom: 30px; +} +.nanostanza-container { + height: 160px; + background: image-url('loading.gif') no-repeat 50% 50% #fff; + -webkit-box-shadow: 0 2px 2px rgba(0,0,0,.2); + -moz-box-shadow: 0 2px 2px rgba(0,0,0,.2); + box-shadow: 0 2px 2px rgba(0,0,0,.2); + display: inline-block; + margin: 0 2px 2px 0; + float: none; +} +.nanostanza-container iframe { + border: none; + margin: 0; + height: 160px; + -moz-transition: -ms-transform .2s ease-out 0, opacity .2s ease-out 0; + -webkit-transition: -webkit-transform .2s ease-out 0, opacity .2s ease-out 0; + -o-transition: -o-transform .2s ease-out 0, opacity .2s ease-out 0; + -ms-transition: -ms-transform .2s ease-out 0, opacity .2s ease-out 0; + transition: transform .2s ease-out 0, opacity .2s ease-out 0; +} +.nanostanza-container iframe.unload { + opacity: 0; + transform: scale(.5); +} +.nanostanza-container iframe, +.nanostanza-container[data-nanostanza-span="1"] iframe { + width: 160px !important; +} +.nanostanza-container[data-nanostanza-span="2"] iframe { + width: 326px !important; +} +.nanostanza-container[data-nanostanza-span="3"] iframe { + width: 492px !important; +} +.nanostanza-container[data-nanostanza-span="4"] iframe { + width: 658px !important; +} + +/* Text search */ +#textsearch-container .inner { + padding: 10px 20px 4px 20px; + position: relative; +} + +#textsearch-container .form-line { + display: table; + width: 100%; +} + +#textsearch-container select { + display: table-cell; + vertical-align: middle; +} + +#textsearch-container .form-line span { + display: table-cell; + width: 100%; + padding: 0px 0px 0px 10px; + vertical-align: middle; +} + +#textsearch-container.method-container .form-line span input[type="search"] { + width: 100%; + height: 28px; +} + +#textsearch-container.method-container .form-line span input[type="search"]:before { + top: 7px; +} + +#textsearch-container button { + width: 90px; + vertical-align: middle; + display: table-cell; +} + +#stanzas { + -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); + -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); + box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); + z-index: 3; + -webkit-border-radius: 6px; + border-radius: 6px; + background-color: #fff; +} + +#stanzas .textsearch_info { + color: #666; +} + +.textsearch_paginate { + text-align: center; +} diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb deleted file mode 100644 index 38421ef..0000000 --- a/app/views/layouts/application.html.erb +++ /dev/null @@ -1,14 +0,0 @@ - - - - Tg - <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> - <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> - <%= csrf_meta_tags %> - - - -<%= yield %> - - - From 3c6a2e3429075f9bc252b0167f21eedac8e08df3 Mon Sep 17 00:00:00 2001 From: Naoki Nishiguchi Date: Fri, 7 Aug 2015 19:08:51 +0900 Subject: [PATCH 03/16] Use 'action_args' --- Gemfile | 1 + Gemfile.lock | 2 ++ 2 files changed, 3 insertions(+) diff --git a/Gemfile b/Gemfile index a8208ee..3b2d794 100644 --- a/Gemfile +++ b/Gemfile @@ -2,6 +2,7 @@ source 'https://rubygems.org' gem 'rails', '4.2.3' +gem 'action_args' gem 'bootstrap-sass' gem "compass-rails", github: "Compass/compass-rails", branch: "master" gem 'coffee-rails', '~> 4.1.0' diff --git a/Gemfile.lock b/Gemfile.lock index 288452f..f3b944d 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -11,6 +11,7 @@ GIT GEM remote: https://rubygems.org/ specs: + action_args (1.5.4) actionmailer (4.2.3) actionpack (= 4.2.3) actionview (= 4.2.3) @@ -196,6 +197,7 @@ PLATFORMS ruby DEPENDENCIES + action_args bootstrap-sass byebug coffee-rails (~> 4.1.0) From 31fbcbc673471d2ab387dba4392d260f9f5d10b3 Mon Sep 17 00:00:00 2001 From: Naoki Nishiguchi Date: Mon, 10 Aug 2015 12:03:05 +0900 Subject: [PATCH 04/16] Build outline on rails view --- app/controllers/root_controller.rb | 4 +++ app/views/layouts/application.html.haml | 36 +++++++++++++++++++++++ app/views/root/show.html.haml | 38 +++++++++++++++++++++++++ config/routes.rb | 2 ++ 4 files changed, 80 insertions(+) create mode 100644 app/controllers/root_controller.rb create mode 100644 app/views/layouts/application.html.haml create mode 100644 app/views/root/show.html.haml diff --git a/app/controllers/root_controller.rb b/app/controllers/root_controller.rb new file mode 100644 index 0000000..ac3ebdf --- /dev/null +++ b/app/controllers/root_controller.rb @@ -0,0 +1,4 @@ +class RootController < ApplicationController + def show + end +end diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml new file mode 100644 index 0000000..0572f59 --- /dev/null +++ b/app/views/layouts/application.html.haml @@ -0,0 +1,36 @@ +!!! 5 + +%html + %head + %meta(charset='utf-8') + %title TogoGenome + = stylesheet_link_tag 'application', :media => 'all' + = javascript_include_tag 'd3' + = javascript_include_tag 'application' + = javascript_include_tag 'togogenome' + = csrf_meta_tags + = yield :header + + %body(data-spy='scroll' data-target='#navbar') + %header + .navbar.navbar-inverse.navbar-fixed-top + .navbar-inner + = link_to 'TogoGenome', root_path, class: 'navbar-brand' + + #main + %section + = yield + + #footer + %footer + %a#link-DBCLS(href='http://dbcls.rois.ac.jp' target='_blank') DBCLS - Database Center for Life Science, ライフサイエンス統合データベースセンター + + %address + Address: + %a(href="https://www.google.com/maps/place/35°53'41.1%22N+139°57'08.6%22E/@35.8947554,139.952394,15z/data=!3m1!4b1!4m2!3m1!1s0x0:0x0" target='_blank') Univ. of Tokyo Kashiwa-no-ha Campus Station Satellite 6F. 178-4-4 Wakashiba, Kashiwa-shi, Chiba 277-0871, JAPAN + %br/ + Phone: +81 (4) 7135 5508 + + %p#copyright Copyright © 2008-2014 Database Center for Life Science (DBCLS) + + = yield :javascript diff --git a/app/views/root/show.html.haml b/app/views/root/show.html.haml new file mode 100644 index 0000000..3461af1 --- /dev/null +++ b/app/views/root/show.html.haml @@ -0,0 +1,38 @@ +.main-container + #search-methods-container + %ul#search-methods-selector + %li.current.active + %a{href: "#facet", data: {toggle: :tab, target: "#facet-method, #facet-result"}} Facet + %li + %a{href: "#sequence", data: {toggle: :tab, target: "#sequence-method, #sequence-result"}} Sequence + %li + %a{href: "#converter", data: {toggle: :tab, target: "#converter-method, #converter-result"}} ID converter + %li + %a{href: "#resolver", data: {toggle: :tab, target: "#resolver-method, #resolver-result"}} ID resolver + %li{class: "search-methods-visibility-button"} Hide + + #methods.tab-content + #facet-method.tab-pane.active + Facet page + #sequence-method.tab-pane + .method-container#sequence-container + .inner + = form_tag(api_sequence_search_path, method: :get, class: 'form-search') do + = search_field_tag 'fragment', params[:fragment], class: 'input-xlarge' + = button_tag 'Search', class: 'tg-button' + .small-note + %p Search genomic sequences by an arbitrary sub-string of any DNA sequence fragments (e.g., "TGGAATTGTGAGCGGATAACAATT" for lac operator reported by Gilbert W and Maxam A, 1973) + #converter-method.tab-pane + ID Converter + #resolver-method.tab-pane + ID Resolver + + .tab-content#genomes.row-fluid + #facet-result.tab-pane.active + Facet result + #sequence-result.tab-pane + Sequence result + #converter-method.tab-pane + ID Converter result + #resolver-method.tab-pane + ID Resolver result diff --git a/config/routes.rb b/config/routes.rb index 9569dea..5691d5a 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -1,4 +1,6 @@ Rails.application.routes.draw do + root to: 'root#show' + namespace :api, defaults: {format: :json} do get '/sequence', as: :sequence_index, to: 'sequence#index' get '/sequence/search', as: :sequence_search, to: 'sequence#search' From 443b2eac5f1cb38321f28b6c9976e880e9edbab4 Mon Sep 17 00:00:00 2001 From: Naoki Nishiguchi Date: Mon, 10 Aug 2015 13:30:57 +0900 Subject: [PATCH 05/16] Add gem 'react-rails' --- Gemfile | 1 + Gemfile.lock | 13 +++++++++++++ 2 files changed, 14 insertions(+) diff --git a/Gemfile b/Gemfile index 3b2d794..d4d200e 100644 --- a/Gemfile +++ b/Gemfile @@ -10,6 +10,7 @@ gem 'font-awesome-sass-rails' gem 'haml-rails' gem 'jbuilder', '~> 2.0' gem 'jquery-rails' +gem 'react-rails' gem 'sass-rails', '~> 5.0' gem 'sdoc', '~> 0.4.0', group: :doc gem 'turbolinks' diff --git a/Gemfile.lock b/Gemfile.lock index f3b944d..5b346f9 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -51,6 +51,10 @@ GEM autoprefixer-rails (5.2.1.1) execjs json + babel-source (5.8.3) + babel-transpiler (0.7.0) + babel-source (>= 4.0, < 6) + execjs (~> 2.0) binding_of_caller (0.7.2) debug_inspector (>= 0.0.1) bootstrap-sass (3.3.5.1) @@ -80,6 +84,7 @@ GEM sass (>= 3.3.0, < 3.5) compass-import-once (1.0.5) sass (>= 3.2, < 3.5) + connection_pool (2.2.0) debug_inspector (0.0.2) erubis (2.7.0) execjs (2.5.2) @@ -154,6 +159,13 @@ GEM rb-inotify (0.9.5) ffi (>= 0.5.0) rdoc (4.2.0) + react-rails (1.1.0) + babel-transpiler (>= 0.7.0) + coffee-script-source (~> 1.8) + connection_pool + execjs + rails (>= 3.2) + tilt ruby_parser (3.7.1) sexp_processor (~> 4.1) sass (3.4.16) @@ -207,6 +219,7 @@ DEPENDENCIES jbuilder (~> 2.0) jquery-rails rails (= 4.2.3) + react-rails sass-rails (~> 5.0) sdoc (~> 0.4.0) spring From d7adbd7654bbdcccb2bc0cd5cd8be5e469480c78 Mon Sep 17 00:00:00 2001 From: Naoki Nishiguchi Date: Mon, 10 Aug 2015 13:31:54 +0900 Subject: [PATCH 06/16] bundle exec rails g react:install --- app/assets/javascripts/application.js | 3 +++ app/assets/javascripts/components.js | 1 + app/assets/javascripts/components/.gitkeep | 0 3 files changed, 4 insertions(+) create mode 100644 app/assets/javascripts/components.js create mode 100644 app/assets/javascripts/components/.gitkeep diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index f0abf5e..884d942 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -14,4 +14,7 @@ //= require jquery_ujs //= require bootstrap-sprockets //= require turbolinks +//= require react +//= require react_ujs +//= require components //= require_tree . diff --git a/app/assets/javascripts/components.js b/app/assets/javascripts/components.js new file mode 100644 index 0000000..9ce7a4f --- /dev/null +++ b/app/assets/javascripts/components.js @@ -0,0 +1 @@ +//= require_tree ./components diff --git a/app/assets/javascripts/components/.gitkeep b/app/assets/javascripts/components/.gitkeep new file mode 100644 index 0000000..e69de29 From 4b7b0d0b75a4d753ddff7bd3cd0bd5a6aeed4959 Mon Sep 17 00:00:00 2001 From: Naoki Nishiguchi Date: Mon, 10 Aug 2015 20:16:27 +0900 Subject: [PATCH 07/16] Pause include togogenome.js and d3.js --- app/views/layouts/application.html.haml | 2 -- 1 file changed, 2 deletions(-) diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml index 0572f59..eac134c 100644 --- a/app/views/layouts/application.html.haml +++ b/app/views/layouts/application.html.haml @@ -5,9 +5,7 @@ %meta(charset='utf-8') %title TogoGenome = stylesheet_link_tag 'application', :media => 'all' - = javascript_include_tag 'd3' = javascript_include_tag 'application' - = javascript_include_tag 'togogenome' = csrf_meta_tags = yield :header From 92fffde32300a4868d8756eddb28ac14ccea672e Mon Sep 17 00:00:00 2001 From: Naoki Nishiguchi Date: Mon, 10 Aug 2015 20:18:25 +0900 Subject: [PATCH 08/16] Set config.react.variant --- config/environments/development.rb | 2 ++ config/environments/production.rb | 2 ++ 2 files changed, 4 insertions(+) diff --git a/config/environments/development.rb b/config/environments/development.rb index 12293d7..0a54a21 100644 --- a/config/environments/development.rb +++ b/config/environments/development.rb @@ -38,4 +38,6 @@ # Raises error for missing translations # config.action_view.raise_on_missing_translations = true + + config.react.variant = :development end diff --git a/config/environments/production.rb b/config/environments/production.rb index a01b88d..70cf5eb 100644 --- a/config/environments/production.rb +++ b/config/environments/production.rb @@ -76,4 +76,6 @@ # Do not dump schema after migrations. # config.active_record.dump_schema_after_migration = false + + config.react.variant = :production end From 65aed2c38423f6e59ec4f646cabd0cf1f81b492e Mon Sep 17 00:00:00 2001 From: Naoki Nishiguchi Date: Mon, 10 Aug 2015 20:19:01 +0900 Subject: [PATCH 09/16] Converting rails to react ? --- .../components/converter_page.js.jsx | 6 +++ .../javascripts/components/facet_page.js.jsx | 7 ++++ .../components/resolver_page.js.jsx | 6 +++ .../components/sequence_form.js.jsx | 42 +++++++++++++++++++ .../components/sequence_result.js.jsx | 6 +++ app/controllers/api/sequence_controller.rb | 6 +-- app/views/root/show.html.haml | 28 +++++-------- 7 files changed, 80 insertions(+), 21 deletions(-) create mode 100644 app/assets/javascripts/components/converter_page.js.jsx create mode 100644 app/assets/javascripts/components/facet_page.js.jsx create mode 100644 app/assets/javascripts/components/resolver_page.js.jsx create mode 100644 app/assets/javascripts/components/sequence_form.js.jsx create mode 100644 app/assets/javascripts/components/sequence_result.js.jsx diff --git a/app/assets/javascripts/components/converter_page.js.jsx b/app/assets/javascripts/components/converter_page.js.jsx new file mode 100644 index 0000000..b92ac50 --- /dev/null +++ b/app/assets/javascripts/components/converter_page.js.jsx @@ -0,0 +1,6 @@ +var ConverterPage = React.createClass({ + + render: function() { + return
; + } +}); diff --git a/app/assets/javascripts/components/facet_page.js.jsx b/app/assets/javascripts/components/facet_page.js.jsx new file mode 100644 index 0000000..cd28b23 --- /dev/null +++ b/app/assets/javascripts/components/facet_page.js.jsx @@ -0,0 +1,7 @@ +var FacetPage = React.createClass({ + + render: function() { + return
Facet page
; + } +}); + diff --git a/app/assets/javascripts/components/resolver_page.js.jsx b/app/assets/javascripts/components/resolver_page.js.jsx new file mode 100644 index 0000000..75cb8e3 --- /dev/null +++ b/app/assets/javascripts/components/resolver_page.js.jsx @@ -0,0 +1,6 @@ +var ResolverPage = React.createClass({ + + render: function() { + return
; + } +}); diff --git a/app/assets/javascripts/components/sequence_form.js.jsx b/app/assets/javascripts/components/sequence_form.js.jsx new file mode 100644 index 0000000..c2f39f2 --- /dev/null +++ b/app/assets/javascripts/components/sequence_form.js.jsx @@ -0,0 +1,42 @@ +var SequenceForm = React.createClass({ + handleSubmit: function(e) { + e.preventDefault(); + var fragment = this.refs.fragment.getDOMNode().value.trim(); + + $.get( + '/api/sequence/search.json', + {'fragment': fragment} + ).done( + function(genes) { + console.log(genes) + console.log('success') + } + ) + }, + render: function() { + var divStyle = { + margin: 0, + padding: 0, + display: 'inline' + } + + return ( +
+
+
+
+ +
+ + +
+
+

+ Search genomic sequences by an arbitrary sub-string of any DNA sequence fragments (e.g., "TGGAATTGTGAGCGGATAACAATT" for lac operator reported by Gilbert W and Maxam A, 1973) +

+
+
+
+ ); + } +}); diff --git a/app/assets/javascripts/components/sequence_result.js.jsx b/app/assets/javascripts/components/sequence_result.js.jsx new file mode 100644 index 0000000..d2fce24 --- /dev/null +++ b/app/assets/javascripts/components/sequence_result.js.jsx @@ -0,0 +1,6 @@ +var SequenceResult = React.createClass({ + + render: function() { + return
; + } +}); diff --git a/app/controllers/api/sequence_controller.rb b/app/controllers/api/sequence_controller.rb index 89e6ef0..8c7d5b9 100644 --- a/app/controllers/api/sequence_controller.rb +++ b/app/controllers/api/sequence_controller.rb @@ -1,7 +1,5 @@ class Api::SequenceController < Api::ApplicationController - def index - end - - def search + def search(fragment) + render json: {length: fragment.length} end end diff --git a/app/views/root/show.html.haml b/app/views/root/show.html.haml index 3461af1..9581da8 100644 --- a/app/views/root/show.html.haml +++ b/app/views/root/show.html.haml @@ -1,9 +1,9 @@ .main-container #search-methods-container %ul#search-methods-selector - %li.current.active - %a{href: "#facet", data: {toggle: :tab, target: "#facet-method, #facet-result"}} Facet %li + %a{href: "#facet", data: {toggle: :tab, target: "#facet-method, #facet-result"}} Facet + %li.current.active %a{href: "#sequence", data: {toggle: :tab, target: "#sequence-method, #sequence-result"}} Sequence %li %a{href: "#converter", data: {toggle: :tab, target: "#converter-method, #converter-result"}} ID converter @@ -12,26 +12,20 @@ %li{class: "search-methods-visibility-button"} Hide #methods.tab-content - #facet-method.tab-pane.active - Facet page - #sequence-method.tab-pane - .method-container#sequence-container - .inner - = form_tag(api_sequence_search_path, method: :get, class: 'form-search') do - = search_field_tag 'fragment', params[:fragment], class: 'input-xlarge' - = button_tag 'Search', class: 'tg-button' - .small-note - %p Search genomic sequences by an arbitrary sub-string of any DNA sequence fragments (e.g., "TGGAATTGTGAGCGGATAACAATT" for lac operator reported by Gilbert W and Maxam A, 1973) + #facet-method.tab-pane + = react_component('FacetPage') + #sequence-method.tab-pane.active + = react_component('SequenceForm') #converter-method.tab-pane - ID Converter + = react_component('ConverterPage') #resolver-method.tab-pane - ID Resolver + = react_component('ResolverPage') .tab-content#genomes.row-fluid - #facet-result.tab-pane.active + #facet-result.tab-pane Facet result - #sequence-result.tab-pane - Sequence result + #sequence-result.tab-pane.active + = react_component('SequenceResult') #converter-method.tab-pane ID Converter result #resolver-method.tab-pane From b759f901805e9c873607437e9b9f04212d218c4b Mon Sep 17 00:00:00 2001 From: Naoki Nishiguchi Date: Fri, 14 Aug 2015 11:10:09 +0900 Subject: [PATCH 10/16] Grope one's way --- .../components/sequence_form.js.jsx | 42 ------- .../components/sequence_page.js.jsx | 111 ++++++++++++++++++ .../components/sequence_result.js.jsx | 6 - app/controllers/api/sequence_controller.rb | 3 +- app/views/root/show.html.haml | 30 ++--- config/routes.rb | 1 - 6 files changed, 123 insertions(+), 70 deletions(-) delete mode 100644 app/assets/javascripts/components/sequence_form.js.jsx create mode 100644 app/assets/javascripts/components/sequence_page.js.jsx delete mode 100644 app/assets/javascripts/components/sequence_result.js.jsx diff --git a/app/assets/javascripts/components/sequence_form.js.jsx b/app/assets/javascripts/components/sequence_form.js.jsx deleted file mode 100644 index c2f39f2..0000000 --- a/app/assets/javascripts/components/sequence_form.js.jsx +++ /dev/null @@ -1,42 +0,0 @@ -var SequenceForm = React.createClass({ - handleSubmit: function(e) { - e.preventDefault(); - var fragment = this.refs.fragment.getDOMNode().value.trim(); - - $.get( - '/api/sequence/search.json', - {'fragment': fragment} - ).done( - function(genes) { - console.log(genes) - console.log('success') - } - ) - }, - render: function() { - var divStyle = { - margin: 0, - padding: 0, - display: 'inline' - } - - return ( -
-
-
-
- -
- - -
-
-

- Search genomic sequences by an arbitrary sub-string of any DNA sequence fragments (e.g., "TGGAATTGTGAGCGGATAACAATT" for lac operator reported by Gilbert W and Maxam A, 1973) -

-
-
-
- ); - } -}); diff --git a/app/assets/javascripts/components/sequence_page.js.jsx b/app/assets/javascripts/components/sequence_page.js.jsx new file mode 100644 index 0000000..6e5569e --- /dev/null +++ b/app/assets/javascripts/components/sequence_page.js.jsx @@ -0,0 +1,111 @@ +var SequenceSearchForm = React.createClass({ + handleSubmit: function(e) { + e.preventDefault(); + var fragment = React.findDOMNode(this.refs.fragment).value.trim(); + if (!fragment) { + return; + } + this.props.onSearchSubmit({fragment: fragment}); + }, + render: function() { + var divStyle = { + margin: 0, + padding: 0, + display: 'inline' + } + + return ( +
+
+
+
+
+ +
+ + +
+
+

+ Search genomic sequences by an arbitrary sub-string of any DNA sequence fragments (e.g., "TGGAATTGTGAGCGGATAACAATT" for lac operator reported by Gilbert W and Maxam A, 1973) +

+
+
+
+
+ ); + } +}); + +var SequenceSearchResultRaw = React.createClass({ + render: function() { + var {name, position, position_end, snippet} = this.props.gene; + + return ( + + {name} + + + + {position} + {position_end} + {snippet} + + ); + } +}) + +var SequenceSearchResultTable = React.createClass({ + render: function() { + var sequenceSearchResultRaws = this.props.data.map(function(gene, index) { + return ( + + ); + }); + return ( +
+ + + + + + + + + + + + + + {sequenceSearchResultRaws} + +
Sequence nameLocus tagProductSequence ontologyPosition beginPosition endSequence
+
+ ); + } +}); + +var SequencePage = React.createClass({ + handleSearchSubmit: function(fragment) { + $.get( + '/api/sequence/search.json', + fragment + ).done( + function(genes) { + this.setState({data: genes}); + }.bind(this) + ) + }, + getInitialState: function() { + return {data: []}; + }, + render: function() { + var sequenceSearchResult = (this.state.data.length === 0) ? "" : ; + return ( +
+ + {sequenceSearchResult} +
+ ); + } +}); diff --git a/app/assets/javascripts/components/sequence_result.js.jsx b/app/assets/javascripts/components/sequence_result.js.jsx deleted file mode 100644 index d2fce24..0000000 --- a/app/assets/javascripts/components/sequence_result.js.jsx +++ /dev/null @@ -1,6 +0,0 @@ -var SequenceResult = React.createClass({ - - render: function() { - return
; - } -}); diff --git a/app/controllers/api/sequence_controller.rb b/app/controllers/api/sequence_controller.rb index 8c7d5b9..5b94e06 100644 --- a/app/controllers/api/sequence_controller.rb +++ b/app/controllers/api/sequence_controller.rb @@ -1,5 +1,6 @@ class Api::SequenceController < Api::ApplicationController def search(fragment) - render json: {length: fragment.length} + result = [{:bioproject=>"PRJNA20713", :name=>"Escherichia coli BL21(DE3) chromosome, complete genome.", :position=>749900, :position_end=>749923, :refseq=>"NC_012971.2", :snippet=>"CTGGAAAGCG", :snippet_end=>750023, :snippet_pos=>749800, :strand=>"+", :taxonomy=>469008, :sequence_ontologies=>[{:uri=>"http://purl.obolibrary.org/obo/SO_0000001", :name=>"region"}, {:uri=>"http://purl.obolibrary.org/obo/SO_0000331", :name=>"STS"}], :locus_tags=>[], :products=>[]}, {:bioproject=>"PRJEA28965", :name=>"Escherichia coli BL21(DE3), complete genome.", :position=>749894, :position_end=>749917, :refseq=>"NC_012892.2", :snippet=>"CTGGAAAGCG", :snippet_end=>750017, :snippet_pos=>749794, :strand=>"+", :taxonomy=>469008, :sequence_ontologies=>[{:uri=>"http://purl.obolibrary.org/obo/SO_0000331", :name=>"STS"}], :locus_tags=>[], :products=>[]}, {:bioproject=>"PRJNA30031", :name=>"Escherichia coli DH1 chromosome, complete genome.", :position=>3504609, :position_end=>3504632, :refseq=>"NC_017625.1", :snippet=>"CTGGAAAGCG", :snippet_end=>3504732, :snippet_pos=>3504509, :strand=>"+", :taxonomy=>536056, :sequence_ontologies=>[{:uri=>"http://purl.obolibrary.org/obo/SO_0000331", :name=>"STS"}], :locus_tags=>[], :products=>[]}, {:bioproject=>"PRJNA203308", :name=>"Escherichia coli LY180, complete genome.", :position=>4570936, :position_end=>4570959, :refseq=>"NC_022364.1", :snippet=>"CTGGAAAGCG", :snippet_end=>4571059, :snippet_pos=>4570836, :strand=>"+", :taxonomy=>1335916, :sequence_ontologies=>[{:uri=>"http://purl.obolibrary.org/obo/SO_0000331", :name=>"STS"}], :locus_tags=>[], :products=>[]}, {:bioproject=>"PRJNA61191", :name=>"Bacillus subtilis BSn5 chromosome, complete genome.", :position=>2247512, :position_end=>2247535, :refseq=>"NC_014976.1", :snippet=>"CTGGAAAGCG", :snippet_end=>2247635, :snippet_pos=>2247412, :strand=>"-", :taxonomy=>936156, :sequence_ontologies=>[], :locus_tags=>[], :products=>[]}] + render json: result end end diff --git a/app/views/root/show.html.haml b/app/views/root/show.html.haml index 9581da8..9510352 100644 --- a/app/views/root/show.html.haml +++ b/app/views/root/show.html.haml @@ -2,31 +2,21 @@ #search-methods-container %ul#search-methods-selector %li - %a{href: "#facet", data: {toggle: :tab, target: "#facet-method, #facet-result"}} Facet + %a{href: "#facet", data: {toggle: :tab}} Facet %li.current.active - %a{href: "#sequence", data: {toggle: :tab, target: "#sequence-method, #sequence-result"}} Sequence + %a{href: "#sequence", data: {toggle: :tab}} Sequence %li - %a{href: "#converter", data: {toggle: :tab, target: "#converter-method, #converter-result"}} ID converter + %a{href: "#converter", data: {toggle: :tab}} ID converter %li - %a{href: "#resolver", data: {toggle: :tab, target: "#resolver-method, #resolver-result"}} ID resolver + %a{href: "#resolver", data: {toggle: :tab}} ID resolver %li{class: "search-methods-visibility-button"} Hide - #methods.tab-content - #facet-method.tab-pane + .tab-content + #facet.tab-pane = react_component('FacetPage') - #sequence-method.tab-pane.active - = react_component('SequenceForm') - #converter-method.tab-pane + #sequence.tab-pane.active + = react_component('SequencePage') + #converter.tab-pane = react_component('ConverterPage') - #resolver-method.tab-pane + #resolver.tab-pane = react_component('ResolverPage') - - .tab-content#genomes.row-fluid - #facet-result.tab-pane - Facet result - #sequence-result.tab-pane.active - = react_component('SequenceResult') - #converter-method.tab-pane - ID Converter result - #resolver-method.tab-pane - ID Resolver result diff --git a/config/routes.rb b/config/routes.rb index 5691d5a..d9b5ddd 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -2,7 +2,6 @@ root to: 'root#show' namespace :api, defaults: {format: :json} do - get '/sequence', as: :sequence_index, to: 'sequence#index' get '/sequence/search', as: :sequence_search, to: 'sequence#search' end end From daa8250aa13aa2b449c720d0f679d86573de9456 Mon Sep 17 00:00:00 2001 From: Naoki Nishiguchi Date: Fri, 14 Aug 2015 18:16:49 +0900 Subject: [PATCH 11/16] Add gem 'bio', 'bio-gggenome' --- Gemfile | 2 ++ Gemfile.lock | 4 ++++ 2 files changed, 6 insertions(+) diff --git a/Gemfile b/Gemfile index d4d200e..c938197 100644 --- a/Gemfile +++ b/Gemfile @@ -4,6 +4,8 @@ gem 'rails', '4.2.3' gem 'action_args' gem 'bootstrap-sass' +gem 'bio' # 'bio-gggenome' dependency gem +gem 'bio-gggenome' gem "compass-rails", github: "Compass/compass-rails", branch: "master" gem 'coffee-rails', '~> 4.1.0' gem 'font-awesome-sass-rails' diff --git a/Gemfile.lock b/Gemfile.lock index 5b346f9..17c4e66 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -57,6 +57,8 @@ GEM execjs (~> 2.0) binding_of_caller (0.7.2) debug_inspector (>= 0.0.1) + bio (1.5.0) + bio-gggenome (0.2.0) bootstrap-sass (3.3.5.1) autoprefixer-rails (>= 5.0.0.1) sass (>= 3.3.0) @@ -210,6 +212,8 @@ PLATFORMS DEPENDENCIES action_args + bio + bio-gggenome bootstrap-sass byebug coffee-rails (~> 4.1.0) From a93c9a0a29d04017418469549c4b2e4176367d09 Mon Sep 17 00:00:00 2001 From: Naoki Nishiguchi Date: Fri, 21 Aug 2015 20:23:02 +0900 Subject: [PATCH 12/16] Search by sequence MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit gggenome 検索し、その結果を元に、SPARQL を生成し RDFストアに問い合わせ、 その結果の JSON を表示するようにした。これで1本通したつもり。 --- Gemfile | 3 +- Gemfile.lock | 6 ++ .../components/sequence_page.js.jsx | 55 +++++++++++++++++-- app/controllers/api/sequence_controller.rb | 5 +- app/models/concerns/queryable.rb | 39 +++++++++++++ .../sequence_search/sequence.rq.erb | 33 +++++++++++ app/models/sequence_search/sequence.rb | 31 +++++++++++ 7 files changed, 164 insertions(+), 8 deletions(-) create mode 100644 app/models/concerns/queryable.rb create mode 100644 app/models/concerns/sparql_templates/sequence_search/sequence.rq.erb create mode 100644 app/models/sequence_search/sequence.rb diff --git a/Gemfile b/Gemfile index c938197..77e2556 100644 --- a/Gemfile +++ b/Gemfile @@ -8,8 +8,10 @@ gem 'bio' # 'bio-gggenome' dependency gem gem 'bio-gggenome' gem "compass-rails", github: "Compass/compass-rails", branch: "master" gem 'coffee-rails', '~> 4.1.0' +gem 'faraday' gem 'font-awesome-sass-rails' gem 'haml-rails' +gem 'hashie' gem 'jbuilder', '~> 2.0' gem 'jquery-rails' gem 'react-rails' @@ -23,4 +25,3 @@ group :development, :test do gem 'spring' gem 'web-console', '~> 2.0' end - diff --git a/Gemfile.lock b/Gemfile.lock index 17c4e66..61422f7 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -90,6 +90,8 @@ GEM debug_inspector (0.0.2) erubis (2.7.0) execjs (2.5.2) + faraday (0.9.1) + multipart-post (>= 1.2, < 3) ffi (1.9.10) font-awesome-sass-rails (3.0.2.2) railties (>= 3.1.1) @@ -104,6 +106,7 @@ GEM haml (>= 4.0.6, < 5.0) html2haml (>= 1.0.1) railties (>= 4.0.1) + hashie (3.4.2) hike (1.2.3) html2haml (2.0.0) erubis (~> 2.7.0) @@ -127,6 +130,7 @@ GEM mini_portile (0.6.2) minitest (5.8.0) multi_json (1.11.2) + multipart-post (2.0.0) nokogiri (1.6.6.2) mini_portile (~> 0.6.0) rack (1.6.4) @@ -218,8 +222,10 @@ DEPENDENCIES byebug coffee-rails (~> 4.1.0) compass-rails! + faraday font-awesome-sass-rails haml-rails + hashie jbuilder (~> 2.0) jquery-rails rails (= 4.2.3) diff --git a/app/assets/javascripts/components/sequence_page.js.jsx b/app/assets/javascripts/components/sequence_page.js.jsx index 6e5569e..a9a8336 100644 --- a/app/assets/javascripts/components/sequence_page.js.jsx +++ b/app/assets/javascripts/components/sequence_page.js.jsx @@ -37,19 +37,64 @@ var SequenceSearchForm = React.createClass({ } }); +var LocusTagListItem = React.createClass({ + render: function() { + var url = "/gene/" + this.props.taxonomy + ":" +this.props.locus_tag; + return ( +
  • {this.props.locus_tag}
    • + ); + } +}) + +var ProductListItem = React.createClass({ + render: function() { + return ( +
  • {this.props.product}
    • + ); + } +}) + +var SequenceOntologyListItem = React.createClass({ + render: function() { + var {name, uri} = this.props.ontology; + return ( +
  • {name}
    • + ); + } +}) + var SequenceSearchResultRaw = React.createClass({ + _highlightQuery: function(snippet, query) { + var regex = new RegExp("(" + query + ")", "gi"); + return snippet.replace(regex, "$1"); + }, render: function() { - var {name, position, position_end, snippet} = this.props.gene; + var {name, taxonomy, position, position_end, snippet, fragment} = this.props.gene; + var locusTagList = this.props.gene.locus_tags.map(function(locus_tag, index) { + return ( + + ); + }); + var productList = this.props.gene.products.map(function(product, index) { + return ( + + ); + }); + var sequenceOntologyList = this.props.gene.sequence_ontologies.map(function(ontology, index) { + return ( + + ); + }); return ( {name} - - - +
      {locusTagList}
    +
      {productList}
    +
      {sequenceOntologyList}
    {position} {position_end} - {snippet} + ); } diff --git a/app/controllers/api/sequence_controller.rb b/app/controllers/api/sequence_controller.rb index 5b94e06..cd4747d 100644 --- a/app/controllers/api/sequence_controller.rb +++ b/app/controllers/api/sequence_controller.rb @@ -1,6 +1,7 @@ class Api::SequenceController < Api::ApplicationController def search(fragment) - result = [{:bioproject=>"PRJNA20713", :name=>"Escherichia coli BL21(DE3) chromosome, complete genome.", :position=>749900, :position_end=>749923, :refseq=>"NC_012971.2", :snippet=>"CTGGAAAGCG", :snippet_end=>750023, :snippet_pos=>749800, :strand=>"+", :taxonomy=>469008, :sequence_ontologies=>[{:uri=>"http://purl.obolibrary.org/obo/SO_0000001", :name=>"region"}, {:uri=>"http://purl.obolibrary.org/obo/SO_0000331", :name=>"STS"}], :locus_tags=>[], :products=>[]}, {:bioproject=>"PRJEA28965", :name=>"Escherichia coli BL21(DE3), complete genome.", :position=>749894, :position_end=>749917, :refseq=>"NC_012892.2", :snippet=>"CTGGAAAGCG", :snippet_end=>750017, :snippet_pos=>749794, :strand=>"+", :taxonomy=>469008, :sequence_ontologies=>[{:uri=>"http://purl.obolibrary.org/obo/SO_0000331", :name=>"STS"}], :locus_tags=>[], :products=>[]}, {:bioproject=>"PRJNA30031", :name=>"Escherichia coli DH1 chromosome, complete genome.", :position=>3504609, :position_end=>3504632, :refseq=>"NC_017625.1", :snippet=>"CTGGAAAGCG", :snippet_end=>3504732, :snippet_pos=>3504509, :strand=>"+", :taxonomy=>536056, :sequence_ontologies=>[{:uri=>"http://purl.obolibrary.org/obo/SO_0000331", :name=>"STS"}], :locus_tags=>[], :products=>[]}, {:bioproject=>"PRJNA203308", :name=>"Escherichia coli LY180, complete genome.", :position=>4570936, :position_end=>4570959, :refseq=>"NC_022364.1", :snippet=>"CTGGAAAGCG", :snippet_end=>4571059, :snippet_pos=>4570836, :strand=>"+", :taxonomy=>1335916, :sequence_ontologies=>[{:uri=>"http://purl.obolibrary.org/obo/SO_0000331", :name=>"STS"}], :locus_tags=>[], :products=>[]}, {:bioproject=>"PRJNA61191", :name=>"Bacillus subtilis BSn5 chromosome, complete genome.", :position=>2247512, :position_end=>2247535, :refseq=>"NC_014976.1", :snippet=>"CTGGAAAGCG", :snippet_end=>2247635, :snippet_pos=>2247412, :strand=>"-", :taxonomy=>936156, :sequence_ontologies=>[], :locus_tags=>[], :products=>[]}] - render json: result + sequences = SequenceSearch::Sequence.search(fragment) + + render json: sequences end end diff --git a/app/models/concerns/queryable.rb b/app/models/concerns/queryable.rb new file mode 100644 index 0000000..f91e4ab --- /dev/null +++ b/app/models/concerns/queryable.rb @@ -0,0 +1,39 @@ +require 'erb' + +module Queryable + extend ActiveSupport::Concern + + included do + class << self + def query(sparql) + rdfstore = "http://dev.togogenome.org/sparql-test" + Rails.logger.info "===== SPARQL (EP: #{rdfstore}) =====\n" + sparql + + conn = Faraday::Connection.new(url: rdfstore) do |faraday| + faraday.request :url_encoded + faraday.response :logger + faraday.adapter Faraday.default_adapter + end + + response = conn.post do |req| + req.headers['Accept'] = 'application/sparql-results+json' + req.body = { query: sparql } + end + + result_json = JSON.parse(response.body) + + bindings = result_json['results']['bindings'].map do |b| + result_json['head']['vars'].each_with_object({}) do |key, hash| + # OPTIONAL 指定で結果が無い場合、head vars には SELECT対象の変数が key として含まれるが、results にはその key 自体も含まれない + hash[key.to_sym] = b[key]['value'] if b.has_key?(key) + end + end + + Hashie::Mash.new(rows: bindings) + end + + extend ERB::DefMethod + def_erb_method('sequence_sparql(bind_values)', 'app/models/concerns/sparql_templates/sequence_search/sequence.rq.erb') + end + end +end diff --git a/app/models/concerns/sparql_templates/sequence_search/sequence.rq.erb b/app/models/concerns/sparql_templates/sequence_search/sequence.rq.erb new file mode 100644 index 0000000..56e5ea6 --- /dev/null +++ b/app/models/concerns/sparql_templates/sequence_search/sequence.rq.erb @@ -0,0 +1,33 @@ +DEFINE sql:select-option "order" +PREFIX insdc: +PREFIX faldo: +PREFIX obo: + +SELECT DISTINCT ?name ?sequence_ontology ?sequence_ontology_name ?locus_tag ?product +FROM +FROM +WHERE { + { + SELECT DISTINCT ?name ?sequence_ontology ?sequence_ontology_name ?feature + WHERE { + VALUES (?name ?position ?position_end ?refseq ?strand ) { + <%= bind_values %> + } + ?refseq_uri insdc:sequence_version ?refseq . + ?refseq_uri insdc:sequence ?sequence . + + ?feature obo:so_part_of+ ?sequence . + ?feature faldo:location ?loc . + ?loc faldo:begin/faldo:position ?feature_position_beg . + ?loc faldo:end/faldo:position ?feature_position_end . + ?feature rdfs:subClassOf ?sequence_ontology . + ?sequence_ontology rdfs:label ?sequence_ontology_name . + + BIND ( IF (?strand = "+", ?feature_position_beg, ?feature_position_end) AS ?begin ). + BIND ( IF (?strand = "+", ?feature_position_end, ?feature_position_beg) AS ?end ). + FILTER(?begin < ?position && ?position < ?end && ?begin != 1) + } + } + OPTIONAL { ?feature insdc:locus_tag ?locus_tag . } + OPTIONAL { ?feature insdc:product ?product .} +} diff --git a/app/models/sequence_search/sequence.rb b/app/models/sequence_search/sequence.rb new file mode 100644 index 0000000..7e7e4c6 --- /dev/null +++ b/app/models/sequence_search/sequence.rb @@ -0,0 +1,31 @@ +module SequenceSearch + class Sequence + include Queryable + + def self.search(fragment) + genomes = Bio::GGGenome.search('prok', 0, fragment)['results'] + + binds = genomes.map {|genome| + "( #{genome['name'].inspect} #{genome['position']} #{genome['position_end']} #{genome['refseq'].inspect} #{genome['strand'].inspect} )" + }.join("\n") + + sparql = sequence_sparql(binds) + results = query(sparql) + + genomes.map do |genome| + so = results.rows.select {|r| r.name == genome['name'] } + + start_index = genome['position'] - genome['snippet_pos'] - 10 + end_index = genome['position_end'] - genome['snippet_pos'] + 10 + + genome.to_h.merge( + fragment: fragment, + snippet: genome['snippet'][start_index..end_index], + sequence_ontologies: so.map {|r| {uri: r.sequence_ontology, name: r.sequence_ontology_name} }, + locus_tags: so.map {|r| r.locus_tag }.compact.uniq, + products: so.map {|r| r.product }.compact.uniq + ) + end + end + end +end From e1650374fd2aac25021229ede7910f1f67927c93 Mon Sep 17 00:00:00 2001 From: Naoki Nishiguchi Date: Mon, 24 Aug 2015 14:57:55 +0900 Subject: [PATCH 13/16] Design base bootstrap MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit SPA化にともない、デザインのために元々のDOMツリーを保ちつつ開発を続けることはコストが非常に大きいため、 いったん既存のデザインを当てないようにすることにし、Bootstrap ベースにすることにした。 また、4.0.0.alpha がでたのでそれに乗るようにする。 --- Gemfile | 8 +- Gemfile.lock | 49 +- app/assets/images/csssprite.png | Bin 10212 -> 0 bytes app/assets/javascripts/application.js | 3 +- .../components/sequence_page.js.jsx | 37 +- app/assets/stylesheets/application.css.scss | 2 - app/assets/stylesheets/togo.css.scss | 1843 ----------------- app/views/layouts/application.html.haml | 27 +- app/views/root/show.html.haml | 41 +- 9 files changed, 45 insertions(+), 1965 deletions(-) delete mode 100644 app/assets/images/csssprite.png delete mode 100644 app/assets/stylesheets/togo.css.scss diff --git a/Gemfile b/Gemfile index 77e2556..5d4fb3c 100644 --- a/Gemfile +++ b/Gemfile @@ -3,17 +3,13 @@ source 'https://rubygems.org' gem 'rails', '4.2.3' gem 'action_args' -gem 'bootstrap-sass' gem 'bio' # 'bio-gggenome' dependency gem gem 'bio-gggenome' -gem "compass-rails", github: "Compass/compass-rails", branch: "master" gem 'coffee-rails', '~> 4.1.0' gem 'faraday' -gem 'font-awesome-sass-rails' gem 'haml-rails' gem 'hashie' gem 'jbuilder', '~> 2.0' -gem 'jquery-rails' gem 'react-rails' gem 'sass-rails', '~> 5.0' gem 'sdoc', '~> 0.4.0', group: :doc @@ -25,3 +21,7 @@ group :development, :test do gem 'spring' gem 'web-console', '~> 2.0' end + +source 'https://rails-assets.org' do + gem 'rails-assets-bootstrap', '~> 4.0.0.alpha' +end diff --git a/Gemfile.lock b/Gemfile.lock index 61422f7..e76fadf 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -1,15 +1,6 @@ -GIT - remote: git://github.com/Compass/compass-rails.git - revision: 3e88f991150ffa39b0a539dffb3326248d18e6ad - branch: master - specs: - compass-rails (2.0.4) - compass (~> 1.0.0) - sass-rails (< 5.1) - sprockets (< 2.13) - GEM remote: https://rubygems.org/ + remote: https://rails-assets.org/ specs: action_args (1.5.4) actionmailer (4.2.3) @@ -48,9 +39,6 @@ GEM thread_safe (~> 0.3, >= 0.3.4) tzinfo (~> 1.1) arel (6.0.3) - autoprefixer-rails (5.2.1.1) - execjs - json babel-source (5.8.3) babel-transpiler (0.7.0) babel-source (>= 4.0, < 6) @@ -59,13 +47,9 @@ GEM debug_inspector (>= 0.0.1) bio (1.5.0) bio-gggenome (0.2.0) - bootstrap-sass (3.3.5.1) - autoprefixer-rails (>= 5.0.0.1) - sass (>= 3.3.0) builder (3.2.2) byebug (5.0.0) columnize (= 0.9.0) - chunky_png (1.3.4) coffee-rails (4.1.0) coffee-script (>= 2.2.0) railties (>= 4.0.0, < 5.0) @@ -74,28 +58,12 @@ GEM execjs coffee-script-source (1.9.1.1) columnize (0.9.0) - compass (1.0.3) - chunky_png (~> 1.2) - compass-core (~> 1.0.2) - compass-import-once (~> 1.0.5) - rb-fsevent (>= 0.9.3) - rb-inotify (>= 0.9) - sass (>= 3.3.13, < 3.5) - compass-core (1.0.3) - multi_json (~> 1.0) - sass (>= 3.3.0, < 3.5) - compass-import-once (1.0.5) - sass (>= 3.2, < 3.5) connection_pool (2.2.0) debug_inspector (0.0.2) erubis (2.7.0) execjs (2.5.2) faraday (0.9.1) multipart-post (>= 1.2, < 3) - ffi (1.9.10) - font-awesome-sass-rails (3.0.2.2) - railties (>= 3.1.1) - sass-rails (>= 3.1.1) globalid (0.3.6) activesupport (>= 4.1.0) haml (4.0.6) @@ -117,10 +85,6 @@ GEM jbuilder (2.3.1) activesupport (>= 3.0.0, < 5) multi_json (~> 1.2) - jquery-rails (4.0.4) - rails-dom-testing (~> 1.0) - railties (>= 4.2.0) - thor (>= 0.14, < 2.0) json (1.8.3) loofah (2.0.2) nokogiri (>= 1.5.9) @@ -147,6 +111,9 @@ GEM bundler (>= 1.3.0, < 2.0) railties (= 4.2.3) sprockets-rails + rails-assets-bootstrap (4.0.0.alpha) + rails-assets-jquery (>= 1.9.1, < 3) + rails-assets-jquery (2.1.4) rails-deprecated_sanitizer (1.0.3) activesupport (>= 4.2.0.alpha) rails-dom-testing (1.0.6) @@ -161,9 +128,6 @@ GEM rake (>= 0.8.7) thor (>= 0.18.1, < 2.0) rake (10.4.2) - rb-fsevent (0.9.5) - rb-inotify (0.9.5) - ffi (>= 0.5.0) rdoc (4.2.0) react-rails (1.1.0) babel-transpiler (>= 0.7.0) @@ -218,17 +182,14 @@ DEPENDENCIES action_args bio bio-gggenome - bootstrap-sass byebug coffee-rails (~> 4.1.0) - compass-rails! faraday - font-awesome-sass-rails haml-rails hashie jbuilder (~> 2.0) - jquery-rails rails (= 4.2.3) + rails-assets-bootstrap (~> 4.0.0.alpha)! react-rails sass-rails (~> 5.0) sdoc (~> 0.4.0) diff --git a/app/assets/images/csssprite.png b/app/assets/images/csssprite.png deleted file mode 100644 index 173164e4cba2b34a4eecd397d410953e8c160580..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 10212 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 diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index 884d942..3b6f15a 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -11,8 +11,7 @@ // about supported directives. // //= require jquery -//= require jquery_ujs -//= require bootstrap-sprockets +//= require bootstrap //= require turbolinks //= require react //= require react_ujs diff --git a/app/assets/javascripts/components/sequence_page.js.jsx b/app/assets/javascripts/components/sequence_page.js.jsx index a9a8336..29cc988 100644 --- a/app/assets/javascripts/components/sequence_page.js.jsx +++ b/app/assets/javascripts/components/sequence_page.js.jsx @@ -8,30 +8,17 @@ var SequenceSearchForm = React.createClass({ this.props.onSearchSubmit({fragment: fragment}); }, render: function() { - var divStyle = { - margin: 0, - padding: 0, - display: 'inline' - } - return (
    -
    -
    -
    -
    - -
    - - -
    -
    -

    - Search genomic sequences by an arbitrary sub-string of any DNA sequence fragments (e.g., "TGGAATTGTGAGCGGATAACAATT" for lac operator reported by Gilbert W and Maxam A, 1973) -

    -
    -
    -
    +
    +
    + + +
    +
    + + Search genomic sequences by an arbitrary sub-string of any DNA sequence fragments (e.g., "TGGAATTGTGAGCGGATAACAATT" for lac operator reported by Gilbert W and Maxam A, 1973) +
    ); } @@ -108,9 +95,9 @@ var SequenceSearchResultTable = React.createClass({ ); }); return ( -
    - - +
    +
    + diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss index aa3efba..f9030ae 100644 --- a/app/assets/stylesheets/application.css.scss +++ b/app/assets/stylesheets/application.css.scss @@ -1,3 +1 @@ -@import 'bootstrap-sprockets'; @import 'bootstrap'; -@import 'togo'; diff --git a/app/assets/stylesheets/togo.css.scss b/app/assets/stylesheets/togo.css.scss deleted file mode 100644 index 3e521d8..0000000 --- a/app/assets/stylesheets/togo.css.scss +++ /dev/null @@ -1,1843 +0,0 @@ -@charset "UTF-8"; -@import "compass"; -@import "font-awesome"; -$color_base_blue: #45b8cc; -$color_base_blue_dark: #33717f; -$color_pale_blue: #ecf8fa; - - -@mixin node-return-icon { - content: ""; - display: block; - position: absolute; - width: 10px; - height: 10px; - border-radius: 10px; - border: solid 3px #333; - background-color: #333; - background-position: -201px -40px; -} - -body { - padding-top: 85px; - background-color: #f4f3f2; - font-family: "Arial",san-serif; -} - -a { - color: #309DB0; -} - -h1, h2, h3, h4, h5, h6 { - margin: 5px 0; - font-family: inherit; - font-weight: bold; - line-height: 20px; - color: inherit; - text-rendering: optimizelegibility; -} - -h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { - font-weight: normal; - line-height: 1; - color: #999999; -} -h1 { - font-size: 22px; - line-height: 30px; - margin: 0; -} -h2 { - font-size: 20px; - line-height: 24px; -} -h3 { - font-size: 24.5px; -} -h4 { - font-size: 17.5px; -} -h5 { - font-size: 14px; -} -h6 { - font-size: 11.9px; -} -h1 small { - font-size: 24.5px; -} -h2 small { - font-size: 17.5px; -} -h3 small { - font-size: 14px; -} -h4 small { - font-size: 14px; -} -.page-header { - padding: 2px 0 0; - margin: 0; - border: none; -} -iframe { - margin: 0 -2px 0; -} -input, button, select, textarea { - font-family: "Myriad Pro","Helvetica Neue",san-serif; -} -select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input { - display: inline-block; - height: 24px; - -moz-box-sizing: border-box; - box-sizing: border-box; - padding: 4px 6px; - margin-bottom: 10px; - font-size: 16px; - line-height: 20px; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; - vertical-align: middle; -} - -/* css sprite */ -.navbar .navbar-brand, .navbar .nav > li.active:after, #link-DBCLS, -.tg-button:before, -#search-methods-selector li.current:after, #methods:after, .method-container input[type="search"]:before, .facet .add-on, .facet .tree:before, #search-methods-selector li.search-methods-visibility-button:after, -.selector-display-button, .pagination-slider-indicator:after, -[data-mapping-mode="resolver"] #mapping-results-container .node.selected-route .small-db-icon:hover:after, -[data-mapping-mode="resolver"] #mapping-from-db.db-selector .icon:hover:after { - background-image: image-url('csssprite.png'); - background-repeat: no-repeat; -} -/* Retina */ -@media only screen and (-webkit-min-device-pixel-ratio: 2), -only screen and (min-device-pixel-ratio: 2), -(min-resolution: 2dppx) { - .navbar .navbar-brand, .navbar .nav > li.active:after, #link-DBCLS, - .tg-button:before, - #search-methods-selector li.current:after, #methods:after, .method-container input[type="search"]:before, .facet .add-on, .facet .tree:before, #search-methods-selector li.search-methods-visibility-button:after, - .selector-display-button, .pagination-slider-indicator:after, - [data-mapping-mode="resolver"] #mapping-results-container .node.selected-route .small-db-icon:hover:after, - [data-mapping-mode="resolver"] #mapping-from-db.db-selector .icon:hover:after { - background-image: image-url('csssprite@2x.png'); - background-size: 600px auto; - } -} - - - -/* common */ -.padding { - padding: 12px 20px; -} -.small-note { - color: #666; - line-height: 18px; -} -.small-note h2 { - font-size: 16px; - margin: 0; -} - -/* common ui */ -.tg-button { - display: inline-block; - background: $color_base_blue; - @include background-image(linear-gradient(top, $color_base_blue, $color_base_blue_dark)); - @include box-shadow(0 2px 2px rgba(0, 0, 0, 0.3)); - border-radius: 6px; - border: none; - cursor: pointer; - color: #fff; - font-size: 16px; - line-height: 30px; - padding: 0 16px; - position: relative; - &:hover { - @include transform(translateY(1px)); - @include box-shadow(0 1px 2px rgba(0, 0, 0, 0.5)); - } - &:before { - display: inline-block; - content: ""; - margin-right: .25em; - position: relative; - top: 5px; - position: relative; - } - &.clear { - background: #999; - @include background-image(linear-gradient(top, #999, #666)); - } - &.clear:before { - width: 20px; - height: 20px; - background-position: -180px -40px; - margin-left: -4px; - } - &.download:before { - width: 12px; - height: 9px; - background-position: -180px -60px; - margin-right: .5em; - top: -1px; - } -} - -/* pagination */ -.pagination { - position: relative; - -ms-user-select: none; - -moz-user-select: none; - -webkit-user-select: none; - user-select: none; -} -.pagination ul { - display: inline-block; - margin-left: 0; - margin-bottom: 0; - -webkit-border-radius: none; - -moz-border-radius: none; - border-radius: none; - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; - z-index: 3; - position: relative; -} -.pagination ul > li > a, .pagination ul > li > span { - float: none; - display: inline-block; - padding: 4px 9px; - line-height: 14px; - background-color: $color_base_blue; - color: #fff; - border: none; -} -.pagination ul > li.prev > a, .pagination ul > li.prev > span, -.pagination ul > li.next > a, .pagination ul > li.next > span { - border-radius: 11px; -} -.pagination ul > li:nth-of-type(3) > a, .pagination ul > li:nth-of-type(3) > span { - border-top-left-radius: 11px; - border-bottom-left-radius: 11px; - padding-left: 18px; -} -.pagination ul > li:nth-last-of-type(3) > a, .pagination ul > li:nth-last-of-type(3) > span { - border-top-right-radius: 11px; - border-bottom-right-radius: 11px; - padding-right: 18px; -} -.pagination ul > li.prev > a, .pagination ul > li.prev > span { - margin-right: .6em; -} -.pagination ul > li.next > a, .pagination ul > li.next > span { - margin-left: .6em; -} -.pagination ul > .disabled > span, .pagination ul > .disabled > a, .pagination ul > .disabled > a:hover, .pagination ul > .disabled > a:focus { - color: #fff; - background-color: #ccc; -} -.pagination ul > li > a:hover, .pagination ul > li > a:focus, .pagination ul > .active > a, .pagination ul > .active > span { - background-color: $color_base_blue_dark; -} -.pagination ul > .active > a, .pagination ul > .active > span { - color: #fff; -} -/* pagination slider */ -.pagination-slider { - position: relative; - height: 56px; - clear: both; - -ms-user-select: none; - -moz-user-select: none; - -webkit-user-select: none; - user-select: none; -} -.pagination-slider > div { - position: absolute; -} -.pagination-slider-bar, .pagination-slider-current-bar { - height: 4px; - top: 34px; -} -.pagination-slider-bar { - width: 100%; - background-color: #ddd; -} -.pagination-slider-current-bar { - background-color: $color_base_blue; -} -.pagination-slider-indicator > .inner { - background-color: $color_base_blue; - color: #fff; - line-height: 26px; - text-align: center; - font-weight: bold; - font-size: 16px; - border-radius: 13px; - padding: 0 13px; - box-shadow: 0 1px 2px rgba(0,0,0,.2); - cursor: pointer; - position: relative; - left: -50%; -} -.pagination-slider-indicator:after { - content: ""; - display: block; - position: absolute; - width: 17px; - height: 9px; - background-position: 0 -40px; - bottom: -8px; - transform: translateX(-8px); - -ms-transform: translateX(-8px); - -moz-transform: translateX(-8px); - -webkit-transform: translateX(-8px); -} -.pagination-slider-dotted-line-left, -.pagination-slider-dotted-line-right { - border-top: dashed 1px $color_base_blue; -} - -/* header */ -header .navbar .nav { - padding-left: 10px; - & > li > a { - color: #888; - position: relative; - top: 4px; - font-weight: normal; - &:hover { - color: #888; - text-decoration: underline; - } - } -} -.navbar-inverse .navbar-inner { - background-color: #fff; - background-image: none; - border: none; - padding: 0 15px; - height: 45px; -} -.navbar-fixed-top .navbar-inner, .navbar-static-top .navbar-inner { - -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); - -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); - box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); -} -.navbar .navbar-brand { - padding: 0; - margin-right: 10px; - margin-left: 2px; - margin-top: 4px; - width: 179px; - height: 40px; - text-indent: -9999px; -} -#login { - position: absolute; - right: 13px; - top: 8px; - line-height: 28px; -} - -/* main */ -#main { - padding-bottom: 30px; -} -#main > section { - padding: 0 20px; -} -.container-fluid { - padding-right: 0; - padding-left: 0; -} - -/* navbar */ -#nav-wrapper { - position: fixed; - top: 40px; - width: 100%; -} -#navbar { - background-color: rgba(67, 185, 204, 0.9); - -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); - -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); - box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); - height: 40px; - margin: 0 -25px; -} -.navbar-inner { - padding: 0; - background-color: transparent; - background-image: none; - background-repeat: repeat-x; - border: none; - -webkit-border-radius: 0; - -moz-border-radius: 0; - border-radius: 0; - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; - height: 50px; - overflow: hidden; - padding-left: 20px; - padding-right: 20px; -} -#main .navbar .nav { - margin: 0 -12px; - padding: 0 25px; - position: absolute; -} -.navbar .nav > li { - position: relative; - padding-left: 17px; - margin-left: -17px; -} -.navbar .nav > li.active:after { - content: " "; - display: block; - position: absolute; - width: 17px; - height: 10px; - background-position: 0 -40px; - left: 50%; -} -.navbar .nav > li > a { - padding: 0 12px; - color: rgba(255, 255, 255, 0.7); - text-shadow: none; - line-height: 40px; - font-size: 16px; - font-weight: bold; - position: relative; - top: 4px; -} -.navbar .nav > li > a:hover { - color: #fff; -} -.navbar .nav > .active > a, .navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus { - color: #fff; - background-color: transparent; - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; -} - -/* header */ -#header { - padding-top: 26px; - margin-bottom: 24px; - border-bottom: solid 3px #555; - &.tg-report-header { - p.tg-report-type { - font-size: 12px; - line-height: 14px; - font-weight: bold; - margin-bottom: 2px; - background-color: #333; - color: #fff; - padding: 1px 8px; - letter-spacing: .15em; - } - h1 { - padding: 3px 0 0; - span { - &:before { - color: $color_base_blue; - font-size: 14px; - font-weight: lighter; - } - &#tg-title-id:before { - content: "ID: "; - } - &#tg-title-label:before { - content: "Label: "; - } - & + span { - margin-left: .75em; - } - } - } - } -} - -/* footer */ -footer { - position: relative; - background-color: #555; - color: #fff; - padding: 25px 25px 15px; -} -footer a { - color: #fff; - text-decoration: underline; -} -footer a:hover { - color: $color_base_blue; -} -#link-DBCLS { - display: block; - text-indent: -9999px; - width: 99px; - height: 46px; - background-position: -20px -40px; - margin-bottom: 10px; -} -footer address { - font-size: 12px; - line-height: 20px; -} -#copyright { - font-size: 12px; -} - -/* search-methods */ -#search-methods-container { - background-color: #fff; - -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); - -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); - box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; - margin-top: -16px; - margin-bottom: 12px; -} -#search-methods-selector { - margin: 0 0 8px; - padding: 10px 5px; - color: #fff; - font-weight: bold; - font-size: 16px; - line-height: 17px; - height: 37px; - position: relative; - background: $color_base_blue; - /* Old browsers */ - background: -moz-linear-gradient(top, $color_base_blue 1%, $color_base_blue_dark 100%); - /* FF3.6+ */ - background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, $color_base_blue), color-stop(100%, $color_base_blue_dark)); - /* Chrome,Safari4+ */ - background: -webkit-linear-gradient(top, $color_base_blue 1%, $color_base_blue_dark 100%); - /* Chrome10+,Safari5.1+ */ - background: -o-linear-gradient(top, $color_base_blue 1%, $color_base_blue_dark 100%); - /* Opera 11.10+ */ - background: -ms-linear-gradient(top, $color_base_blue 1%, $color_base_blue_dark 100%); - /* IE10+ */ - background: linear-gradient(to bottom, $color_base_blue 1%, $color_base_blue_dark 100%); - /* W3C */ - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$color_base_blue', endColorstr='$color_base_blue_dark',GradientType=0 ); - /* IE6-9 */ -} -#search-methods-selector li { - list-style: none; - cursor: pointer; -} -#search-methods-selector > li { - float: left; - line-height: 17px; - position: relative; - color: rgba(255, 255, 255, 0.5); - padding: 0 16px; - border-right: solid 1px rgba(255, 255, 255, 0.2); -} -#search-methods-selector > li a { - color: rgba(255, 255, 255, 0.5); - text-decoration: none; -} -#search-methods-selector > li.current, -#search-methods-selector > li:hover, -#search-methods-selector > li:hover a { - color: #fff; -} -#search-methods-selector > li.current:after { - content: ""; - display: block; - width: 19px; - height: 10px; - position: absolute; - bottom: -20px; - left: 50%; - transform: translateX(-10px); - -ms-transform: translateX(-10px); - -moz-transform: translateX(-10px); - -webkit-transform: translateX(-10px); - background-position: -120px -40px; -} -#search-methods-selector li.search-methods-visibility-button { - position: absolute; - top: 10px; - right: 16px; - font-weight: normal; - color: #fff; - border: none; - padding: 0; -} -#search-methods-selector li.search-methods-visibility-button:after { - content: ""; - display: inline-block; - width: 15px; - height: 14px; - background-position: -140px -60px; - margin-left: .5em; -} -#search-methods-selector li.search-methods-visibility-button.hide { - display: inline-block; -} -#search-methods-selector li.search-methods-visibility-button.hide:after { - background-position: -160px -60px; -} -#methods { - position: relative; -} -#methods:after { - content: ""; - display: block; - width: 19px; - height: 12px; - background-position: -140px -40px; - position: absolute; - bottom: -12px; - left: 22px; - z-index: 3; -} -#methods.no-result-column:after { - display: none; -} -.method-container { - padding: 4px 0; -} -#search-methods-container + div { - padding: 14px 20px; - -moz-box-sizing: border-box; - box-sizing: border-box; -} - -/* facet */ -.facet { - background-color: transparent; - position: relative; - padding: 10px 20px 4px 244px; - border-bottom: dashed 1px #ccc; - font-size: 16px; - line-height: 22px; - .selected { - position: relative; - .add-on { - display: block !important; - min-width: auto; - padding: 10px; - text-shadow: none; - background-color: transparent; - border: none; - position: absolute; - width: 20px; - height: 20px; - background-position: -156px -37px; - z-index: 3; - top: 1px; - left: 3px; - cursor: pointer; - @include box-sizing(border-box); - &.facet-selected { - background-position: -180px -40px; - } - } - } -} -h3[class^="icon-"], h3[class*=" icon-"] { - font-family: "Myriad Pro","Helvetica Neue",san-serif; - font-size: 16px; - font-weight: bold; - display: block; - width: 234px; - line-height: 22px; - vertical-align: baseline; - text-align: right; - position: absolute; - left: 0; -} -.icon-search::before { - content: none; -} -.icon-search::after { - content: "▶"; - font-size: 8px; - padding-left: 1em; - vertical-align: baseline; -} -.method-container { - input { - &[type="search"] { - -moz-appearance: none !important; - width: 100%; - @include box-sizing(border-box); - height: 22px; - padding-left: 24px; - position: relative; - background-color: $color_pale_blue; - display: block; - margin-bottom: 0; - &:before { - -moz-appearance: none !important; - content: ""; - display: block; - position: absolute; - height: 14px; - width: 14px; - background-position: -160px -40px; - left: 6px; - } - } - &.facet-selected { - background-color: $color_base_blue_dark !important; - background-image: none; - color: #fff; - } - } -} - -/* facet classes */ -.classes-container { - margin: 0 0 -4px; - padding: 6px 5px 0; - position: relative; - display: inline-block; -} -.classes-container .class-node { - display: inline-block; - list-style: none; -} -.classes-container .class-node span { - color: $color_base_blue; - font-weight: bold; - font-size: 16px; - line-height: 20px; - word-wrap: normal; - cursor: pointer; -} -.classes-container .class-node span:hover { - color: $color_base_blue_dark; -} -.selector-display-button { - display: inline-block; - width: 13px; - height: 13px; - background-position: -120px -60px; - margin-left: .5em; - cursor: pointer; - position: relative; -} -.selector-display-button:hover { - background-position: -120px -80px; -} -.classes-container .class-node + .class-node:before { - content: ">"; - font-weight: normal; - color: #ccc; - display: inline-block; - width: 26px; - height: 20px; - text-align: center; -} -.classes-selector { - height: auto; - overflow-y: auto; - color: #fff; - background-color: $color_base_blue; - padding: 8px; - -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); - -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); - box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); - z-index: 3; - -webkit-border-radius: 6px; - border-radius: 6px; - position: absolute; - margin: -13px 0; - z-index: 2001; - visibility: hidden; -} -.classes-selector.left-side { - right: 0; -} -.classes-selector li { - cursor: pointer; - -webkit-border-radius: 13px; - border-radius: 13px; - padding: 0 10px; - white-space: nowrap; - line-height: 26px; - font-size: 16px; - font-weight: bold; -} -.classes-selector li:hover { - background-color: rgba(255,255,255,.3); -} -.classes-selector li.selected { - color: $color_base_blue; - background-color: #fff; -} -.classes-container .hit-test { - position: fixed; - width: 100%; - height: 100%; - background-color: rgba(1,1,1,.0); - top: 0; - left: 0; - z-index: 2000; - display: none; -} - -#facets > div { - -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset; - -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset; - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset; - background-color: #fcfcfc; - position: relative; - margin-top: -1px; -} - -#result_panes.tab-content { - overflow: visible; -} - -/* autocomplete */ -.ui-autocomplete { - z-index: 20 !important; - -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); - -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); - box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); - border: none; -} -.ui-widget-content { - border: none; -} -.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { - background-color: #daf1f5; - background-image: none; - border-color: #cfeaf0; -} -.limit-message { - background-color: $color_base_blue; - color: #fff; -} - -/* genomes */ -#genomes { - -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); - -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); - box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); - z-index: 3; - -webkit-border-radius: 6px; - border-radius: 6px; - background-color: #fff; -} -#results_info, .dataTables_info { - color: #666; -} -.table { - border-top: none; - border-right: none; - padding-top: 10px; -} -table.dataTable { - margin-bottom: 6px; -} -table.table { - td, th { - border-left: none; - padding: 3px 10px 3px 3px; - } - thead td { - font-weight: bold; - } - tbody tr:first-child td { - border-top: solid 2px #555; - } - td.dataTables_empty { - padding: 15px; - } -} -.table-hover tbody tr:hover > td, .table-hover tbody tr:hover > th { - background-color: #daf1f5; -} - -.identifiers_processing { - left: 50%; - padding-top: 20px; - text-align: center; - font-weight: bold; -} - -div#result_panes .dataTables_processing, .identifiers_processing{ - box-shadow: 0 0 24px rgba(0,0,0,.2); - z-index: 100; - position: fixed; - background: image-url('loading.gif') no-repeat 50% 66% white; - top: 50% !important; - border: none !important; - height: 60px; - width: 250px; - margin-top: -30px; - margin-left: -125px; - color: #999; - font-size: 14px; -} -.dataTables_length { - position: relative; - z-index: 1; -} -table#results { - ul { - margin: 0 0 0 16px; - } - ul + ul { - padding-top: 10px; - } - li { - line-height: 14px; - padding: 3px 0; - } -} - -/* result download button */ -.result-upload-container a, -.result-download-container a { - color: #fff; - background-color: $color_base_blue; - line-height: 18px; - font-size: 14px; - font-weight: normal; - border-radius: 10px; - padding: 2px 10px 0; - cursor: pointer; - display: inline-block; -} -.result-upload-container a:hover, -.result-download-container a:hover { - background-color: $color_base_blue_dark; - text-decoration: none; -} -.result-upload-container a i, -.result-download-container a i { - margin-right: .5em; - font-size: 12px; - position: relative; - top: -1px; -} -.result-upload-container a + a, -.result-download-container a + a { - margin-left: 4px; -} - -/* sequence */ -#sequence-container .inner { - padding: 10px 20px 4px 20px; - position: relative; -} -#sequence-container.method-container input[type="search"] { - width: 100%; - margin-right: -90px; - padding-right: 100px; - height: 28px; - display: inline-block; -} -#sequence-container.method-container input[type="search"]:before { - top: 7px; -} -#sequence-container button { - width: 90px; - left: 10px; - margin-left: -10px; -} - - -/* ID Mapping ver. 2 */ -#mappings-selector-container { - width: 100%; - position: relative; - @include box-sizing(border-box); - padding: 20px 156px; -} -/* ID Mapping: large icon */ -.db-selector { - width: 27px; - height: 26px; - position: absolute; - top: 50%; - @include transform(translateY(-50%)); - z-index: 200; - & > div { - position: absolute; - } - .side, .lid { - width: 26px; - background-color: #aaa; - position: absolute; - @include transition(background-color .5s ease-out 0); - } - .side { - height: 8px; - border-radius: 0 0 13px 13px/0 0 5px 5px; - box-shadow: 0 3px 2px -3px rgba(0,0,0,.6); - } - .bottom.side { - box-shadow: 0 1.5px 2.5px -.5px rgba(0,0,0,.3); - } - .lid { - height: 10px; - border-radius: 13px/5px; - box-shadow: 0 .5px 0 rgba(255,255,255,.6); - &:after { - content: ""; - width: 26px; - height: 10px; - background-color: rgba(255,255,255,.4); - border-radius: 13px/5px; - position: absolute; - display: block; - top: 0; - left: 0; - } - } - .top.side { top: 5px; } - .middle.lid { top: 6px; } - .middle.side { top: 11px; } - .bottom.lid { top: 12px; } - .bottom.side { top: 17px; } -} -#mapping-from-db { - left: 144px; -} -#mapping-to-db { - right: 144px; -} -.db-selector .icon { - position: relative; - top: -2px; - z-index: 200; - height: 26px; -} -[data-mapping-mode="resolver"] #mapping-from-db.db-selector .icon { - cursor: pointer; - &:hover:after { - @include node-return-icon; - top: -20px; - left: 5px; - z-index: 1; - } -} -.db-selector { - .db-name-container { - width: 110px; - top: -8px; - height: 40px; - display: table; - position: absolute; - cursor: pointer; - } - .db-name { - font-size: 12px; - line-height: 12px; - vertical-align: middle; - display: table-cell; - &.selected { - font-weight: bold; - } - &:before, &:after { - content: ""; - display: block; - color: #000; - height: 2px; - position: absolute; - } - &:before { - border-left: 4px solid transparent; - border-right: 4px solid transparent; - border-bottom: 5px solid #000; - top: 12px; - } - &:after { - border-top: 5px solid #000; - border-left: 4px solid transparent; - border-right: 4px solid transparent; - top: 21px; - } - } -} -#mapping-from-db.db-selector { - .db-name-container { - left: -130px; - } - .db-name { - text-align: right; - &:before, &:after { - right: -12px; - } - } -} -#mapping-to-db.db-selector { - .db-name-container { - right: -128px; - } - .db-name { - text-align: left; - &:before, &:after { - left: -12px; - } - } -} -#mapping-results-container { - height: 120px; - min-height: 120px; - position: relative; - @include transition(height .8s ease-out 0); -} -.arrow-container, .node { - @include transition(opacity .1s ease-out 0, height .5s ease-out 0, top .5s ease-out 0, left .5s ease-out 0); -} -/* -@-webkit-keyframes node-hop { - 0% { -webkit-transform: translate(0px, 0px); } - 75% { -webkit-transform: translate(-10px, -80px); } - 100% { -webkit-transform: translate(0px, 0px); } -} -@keyframes node-hop { - 0% { transform: translate(0px 0px); } - 75% { transform: translate(-10px, -80px); } - 100% { transform: translate(0px 0px); } -} -*/ -.deciding-route #mapping-hovering-route .node { - -moz-transition: none; - -webkit-transition: none; - -o-transition: none; - -ms-transition: none; - transition: none; - /* - -webkit-animation-duration: 4.4s; - animation-duration: 4.4s; - -webkit-animation-timing-function: ease-in-out; - animation-timing-function: ease-in-out; - -webkit-animation-name: node-hop; - animation-name: node-hop; - */ -} -.node .small-db-icon { - -moz-transition: top 1.5s ease-out 0; - -webkit-transition: top 1.5s ease-out 0; - -o-transition: top 1.5s ease-out 0; - -ms-transition: top 1.5s ease-out 0; - transition: top 1.5s ease-out 0; - -moz-transition: left 1.5s ease-out 0; - -webkit-transition: left 1.5s ease-out 0; - -o-transition: left 1.5s ease-out 0; - -ms-transition: left 1.5s ease-out 0; - transition: left 1.5s ease-out 0; -} -.mapping-arrow { - -moz-transition: height .5s ease-out 0, border .5s ease-out 0; - -webkit-transition: height .5s ease-out 0, border .5s ease-out 0; - -o-transition: height .5s ease-out 0, border .5s ease-out 0; - -ms-transition: height .5s ease-out 0, border .5s ease-out 0; - transition: height .5s ease-out 0, border .5s ease-out 0; -} -.mapping-arrow:after { -} -/* arrow svg */ -#arrows-svg { - padding: 0; - margin: 0; -} -#arrows-svg path.arrow, -#arrows-svg path.arrowhead { - fill: none; - stroke: #000; - stroke-width: 2; -} -/* -#mapping-results-container.highlighting .arrow-container, -#mapping-results-container.highlighting .node { - opacity: .05; -} -*/ -#mapping-results-container.highlighting .highlighting { - z-index: 110; -} -#mapping-results-container > div { - -moz-box-sizing: border-box; - box-sizing: border-box; - padding: 0; - margin: 0; - position: absolute; - top: 0; - left: 0; - width: 100%; -} - -/* ID Mapping: small icon */ -#mapping-dbicons-container { -} -[data-mapping-mode="converter"] #mapping-dbicons-container { - z-index: 130; -} -#mapping-results-container .node { - position: absolute; - width: 16px; - height: 16px; - border-radius: 8px; - background-color: #4c443c; - -webkit-transform: translateX(-50%); - transform: translateX(-50%); -} -[data-mapping-mode="converter"] #mapping-results-container .node .small-db-icon { - cursor: pointer; - z-index: 131; -} -#mapping-results-container .node p { - pointer-events: none; -} -[data-mapping-mode="resolver"] #mapping-results-container .node { - cursor: pointer; -} -[data-mapping-mode="resolver"] #mapping-results-container .node.selected-route .small-db-icon:hover:after { - @include node-return-icon; - top: -20px; - left: -2px; - z-index: 1; -} -#mapping-results-container .node.category { - background-color: #fff; -} -#mapping-results-container .node.category .category-node{ - border-width: 3px; - border-style: solid; - width: 6px; - height: 6px; - position: absolute; - border-radius: 8px; - cursor: pointer; -} -#mapping-results-container .small-db-icon { - position: absolute; - width: 10px; - left: 3px; - top: 3px; -} -.small-db-icon .side, -.small-db-icon .lid { - position: absolute; - width: 10px; - left: 0; -} -.small-db-icon .side { - height: 3px; - border-radius: 0 0 5px 5px/0 0 2px 2px; -} -.small-db-icon .lid { - height: 4.5px; - border-radius: 5px/2px; -} -.small-db-icon .lid:after { - content: ""; - width: 10px; - height: 4.5px; - background-color: rgba(255,255,255,.4); - border-radius: 5px/2px; - position: absolute; - display: block; - top: 0; - left: 0; -} -.small-db-icon .top.side { top: 2.5px; } -.small-db-icon .middle.lid { top: 2.5px; } -.small-db-icon .middle.side { top: 5px; } -.small-db-icon .bottom.lid { top: 5px; } -.small-db-icon .bottom.side { top: 7.5px; } -.node .db-name { - position: absolute; - font-size: 12px; - font-weight: bolder; - line-height: 14px; - text-align: left; - -moz-transform: rotate(-45deg); - -webkit-transform: rotate(-45deg); - -o-transform: rotate(-45deg); - -ms-transform: rotate(-45deg); - transform: rotate(-45deg); - -webkit-transform-origin: 0% 50%; - -ms-transform-origin: 0% 50%; - -o-transform-origin: 0% 50%; - -ms-transform-origin: 0% 50%; - transform-origin: 0% 50%; - top: -8px; - left: 17px; - width: 250px; - text-shadow: -1px -1px 0px #fff, -1px 0px 0px #fff, -1px 1px 0px #fff, 0px -1px 0px #fff, 0px 1px 0px #fff, 1px -1px 0px #fff, 1px 0px 0px #fff, 1px 1px 0px #fff; -} -/* ID Mapping: arrow */ -.arrow-container { - position: absolute; - height: 21px; - width: 100%; - padding-left: 7.5px; - padding-right: 10.5px; - &.left { - padding-left: 0; - } - &.right { - padding-right: 16px; - &.top, - &.bottom { - padding-right: 0; - } - } - &.undefined { - position: relative; - height: 120px; - padding-left: 10px; - padding-right: 20px; - @include box-sizing(border-box); - @include transition(opacity .2s ease-out 0); - } -} -#mapping-results-container.showing-result .arrow-container.undefined { - opacity: 0; -} -.arrow-container { - .inner { - position: relative; - width: 100%; - height: 100%; - top: -3px; - } - &.bottom .inner { - top: -2px; - } -} -.mapping-arrow { - position: absolute; - border-style: solid; - border-color: #4c443c; - border-width: 0; - border-top-width: 2px; - width: 100%; - top: 50%; - @include box-sizing(border-box); - &.undefined { - border-top-style: dotted; - border-top-width: 2px; - } -} -[data-mapping-mode="resolver"] .mapping-arrow.undefined { - width: 10%; - opacity: .5; -} -.left .mapping-arrow { - border-left-width: 2px; -} -.right .mapping-arrow { - border-right-width: 2px; -} -.top.left .mapping-arrow { - border-top-left-radius: 4px; -} -.bottom.left .mapping-arrow { - border-bottom-left-radius: 4px; -} -.top.right .mapping-arrow { - border-top-right-radius: 4px; -} -.bottom.right .mapping-arrow { - border-bottom-right-radius: 4px; -} -.bottom .mapping-arrow { - border-top-width: 0; - border-bottom-width: 2px; - top: auto; - bottom: 50%; -} -.dotted .mapping-arrow { - border-style: dotted; - border-color: #000; -} -.mapping-arrow.right-arrowhead:after { - content: ""; - display: block; - width: 4px; - height: 4px; - border-top: solid 2px #4c443c; - border-right: solid 2px #4c443c; - position: absolute; - @include transform(rotate(45deg)); - top: -4px; - right: 0; - @include transition( - transform .2s ease-out 0, - left .2s ease-out 0, - right .2s ease-out 0, - top .2s ease-out 0, - bottom .2s ease-out 0); -} -.right .mapping-arrow.right-arrowhead:after { - right: -2px; -} -.top.right .mapping-arrow.right-arrowhead:after { - @include transform(rotate(135deg)); - top: auto; - bottom: 0; - right: -4px; -} -.bottom .mapping-arrow.right-arrowhead:after { - top: auto; - bottom: -4px; -} -.bottom.right .mapping-arrow.right-arrowhead:after { - @include transform(rotate(-45deg)); - top: 0; - right: -4px; -} -/* ID Mapping: routes */ -#mapping-routes-container { -} -#mapping-routes-container .route { - height: 21px; - cursor: pointer; - position: relative; - z-index: 120; -} -#mapping-hovering-route { - z-index: 0; -} -.deciding-route #mapping-hovering-route { - z-index: 100; -} -[data-mapping-mode="converter"] #mapping-results-container.highlighting #mapping-arrows-container, -[data-mapping-mode="converter"] #mapping-results-container.highlighting #mapping-dbicons-container { - opacity: .3; -} -[data-mapping-mode="resolver"] #mapping-results-container.highlighting #mapping-dbicons-container .node { - opacity: .3; -} -[data-mapping-mode="resolver"] #mapping-results-container.highlighting #mapping-dbicons-container .node.hovering, -[data-mapping-mode="resolver"] #mapping-results-container.highlighting #mapping-dbicons-container .node.selected-route { - opacity: 1; -} -#mapping-results-container.highlighting #mapping-arrows-container path { - stroke-opacity: .3; -} -#mapping-results-container.highlighting #mapping-arrows-container .hovering path, -#mapping-results-container.highlighting #mapping-arrows-container .selected-route path { - stroke-opacity: 1; -} - -/* result message */ -.result-message { - font-size: 12px; - line-height: 20px; - color: #666; - position: absolute; - top: -13px; -} -/* ID Mapping: db selector */ -.db-list-container { - width: auto; - min-width: 150px; - background-color: rgba(255,255,255,.975); - border-radius: 10px; - top: -90px; - box-shadow: 0 2px 6px rgba(0,0,0,.5); - opacity: 0; - visibility: hidden; - -webkit-transform: scale(.85); - transform: scale(.85); - -moz-transition: -ms-transform .2s ease-out 0, opacity .2s ease-out 0; - -webkit-transition: -webkit-transform .2s ease-out 0, opacity .2s ease-out 0; - -o-transition: -o-transform .2s ease-out 0, opacity .2s ease-out 0; - -ms-transition: -ms-transform .2s ease-out 0, opacity .2s ease-out 0; - transition: transform .2s ease-out 0, opacity .2s ease-out 0; - position: absolute; - z-index: 300; -} -.db-selector .db-list-container { - width: 380px; -} -.db-list-container.open { - opacity: 1; - -webkit-transform: scale(1); - transform: scale(1); - visibility: visible; -} -.db-list-container { - /*left: 42px;*/ - -webkit-transform-origin:-10% 30%; - -moz-transform-origin:-10% 30%; - -o-transform-origin:-10% 30%; - -ms-transform-origin:-10% 30%; - transform-origin:-10% 30%; -} -.db-list-container.is-right { - /*right: 42px;*/ - -webkit-transform-origin:110% 30%; - -moz-transform-origin:110% 30%; - -o-transform-origin:110% 30%; - -ms-transform-origin:110% 30%; - transform-origin:110% 30%; -} -.db-list-container .bg { - position: fixed; - visibility: hidden; - z-index: 301; -} -.db-list-container.open .bg { - visibility: visible; -} -.db-list-container .arrow { - content: ""; - display: block; - position: absolute; - border-right: solid 11px #4B4738; - border-top: solid 7px transparent; - border-bottom: solid 7px transparent; - left: -11px; - -moz-transform: translateY(-50%); - -webkit-transform: translateY(-50%); - -o-transform: translateY(-50%); - -ms-transform: translateY(-50%); - transform: translateY(-50%); -} -.db-list-container.is-right .arrow { - left: auto; - right: -11px; - border-right: none; - border-left: solid 11px #999482; -} -.db-list-container:before { - content: "Select database"; - font-size: 14px; - line-height: 20px; - color: #999482; - text-align: center; - display: block; - margin: 16px auto -4px; -} - -.db-list-container .inner { - position: relative; - padding: 0 10px 0 10px; - z-index: 302; -} -.db-selector + .db-list-container .inner { - padding-left: 135px; - padding-bottom: 10px; - overflow-y: scroll; -} -.db-list-container dl, -.db-list-container ul { - margin: 14px 0; -} -.db-list-container dt, -.db-list-container dd, -.db-list-container li { - line-height: 14px; -} -.db-list-container dt { - margin-bottom: -20px; - font-size: 12px; - font-weight: normal; - text-align: right; - left: -134px; - top: 6px; - position: relative; - width: 130px; - height: 20px; - line-height: 12px; -} -.db-list-container dd, -.db-list-container li { - font-style: 14px; - margin-left: 0; - list-style: none; -} -.db-list-container dd + dt { - margin-top: 10px; -} -.db-list-container dd p, -.db-list-container li p { - padding: 3px 7px; - margin: 0; - border: solid 2px rgba(1,1,1,0); - cursor: pointer; -} -.db-list-container dd:hover p, -.db-list-container li:hover p, -.db-list-container dd p.selected, -.db-list-container li p.selected { - background-color: #fff; - border: solid 2px #999482; - border-radius: 14px; -} -.db-list-container dd p.disable, -.db-list-container li p.disable { - cursor: auto; - border-color: rgba(1,1,1,0); - color: #ccc; -} -/* ID Mapping: ids */ -#mappings-id-container { - padding: 0 20px 10px; - h2 { - font-size: 18px; - line-height: 24px; - border-bottom: solid 2px #000; - } -} -#mappings-id-container h2 > span { - position: relative; - top: -2px; -} -#mapped-ids { - width: 100%; - table-layout: fixed; - position: relative; - margin-top: -6px; - border-top: solid 2px #000; -} -#mapped-ids th, -#mapped-ids td { - padding: 8px 24px 6px 0; - vertical-align: top; - line-height: 14px; -} -#mapped-ids th { - border-bottom: solid 2px #000; - text-align: left; -} -#mapped-ids th div.circle { - display: inline-block; - width: 5px; - height: 5px; - margin-right: .25em; - border-width: 3px; - border-style: solid; - border-radius: 6px; -} -#mapped-ids td { - border-bottom: solid 1px #ccc; - position: relative; -} -#mapped-ids td div { - position: relative; -} -#mapped-ids tbody td + td div:before { - content: ""; - display: block; - width: 5px; - height: 5px; - border-bottom: solid 1px #666; - border-right: solid 1px #666; - -moz-transform: rotate(-45deg) translateY(-3px); - -webkit-transform: rotate(-45deg) translateY(-3px); - -o-transform: rotate(-45deg) translateY(-3px); - -ms-transform: rotate(-45deg) translateY(-3px); - transform: rotate(-45deg) translateY(-3px); - position: absolute; - top: 50%; - left: -16px; -} -#mapped-ids td a { - line-height: 14px; - display: block; - padding: 2px 0; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; -} -#mapped-ids td a span { -} -#mapped-ids td a .id-name { - color: #000; - position: relative; - top: 1px; -} -#mapped-ids td a .url { - font-size: 10px; - position: relative; - top: -1px; -} -#add-new-id { - position: relative; - margin: 10px 100px 8px 0; - p { - position: absolute; - z-index: 10; - width: 50%; - top: 20px; - left: 25%; - text-align: center; - line-height: 12px; - font-size: 12px; - color: $color_base_blue; - } - textarea { - width: 100%; - height: 50px; - position: relative; - background-color: $color_pale_blue; - &:focus, &:hover { - z-index: 20; - border-color: $color_base_blue_dark; - @include box-shadow(0 0 6px $color_base_blue); - } - } - button { - position: absolute; - top: 0; - right: -100px; - height: 50px; - } - &.sample { - &:after { - content: "Sample"; - position: absolute; - bottom: 20px; - right: 17px; - color: #CAC8C8; - font-size: 18px; - font-weight: bold; - width: 200px; - height: 40px; - line-height: 50px; - overflow: hidden; - left: 50%; - text-align: center; - margin-left: -100px; - } - textarea { - background-color: #f3f2f2; - } - } -} - -div#mapping-reset-button { - color: #fff; - position: absolute; - top: -14px; - left: auto; - right: -130px; - font-size: 12px; - text-align: center; - width: 80px !important; - line-height: 28px; -} - -/* stanza */ -#lineage_information iframe, -#environment_inhabitants iframe { - max-height: 500px; - overflow: auto; -} - - -/* Nano Stanza - -------------------------------- */ - #nanostanzas { - margin-bottom: 30px; -} -.nanostanza-container { - height: 160px; - background: image-url('loading.gif') no-repeat 50% 50% #fff; - -webkit-box-shadow: 0 2px 2px rgba(0,0,0,.2); - -moz-box-shadow: 0 2px 2px rgba(0,0,0,.2); - box-shadow: 0 2px 2px rgba(0,0,0,.2); - display: inline-block; - margin: 0 2px 2px 0; - float: none; -} -.nanostanza-container iframe { - border: none; - margin: 0; - height: 160px; - -moz-transition: -ms-transform .2s ease-out 0, opacity .2s ease-out 0; - -webkit-transition: -webkit-transform .2s ease-out 0, opacity .2s ease-out 0; - -o-transition: -o-transform .2s ease-out 0, opacity .2s ease-out 0; - -ms-transition: -ms-transform .2s ease-out 0, opacity .2s ease-out 0; - transition: transform .2s ease-out 0, opacity .2s ease-out 0; -} -.nanostanza-container iframe.unload { - opacity: 0; - transform: scale(.5); -} -.nanostanza-container iframe, -.nanostanza-container[data-nanostanza-span="1"] iframe { - width: 160px !important; -} -.nanostanza-container[data-nanostanza-span="2"] iframe { - width: 326px !important; -} -.nanostanza-container[data-nanostanza-span="3"] iframe { - width: 492px !important; -} -.nanostanza-container[data-nanostanza-span="4"] iframe { - width: 658px !important; -} - -/* Text search */ -#textsearch-container .inner { - padding: 10px 20px 4px 20px; - position: relative; -} - -#textsearch-container .form-line { - display: table; - width: 100%; -} - -#textsearch-container select { - display: table-cell; - vertical-align: middle; -} - -#textsearch-container .form-line span { - display: table-cell; - width: 100%; - padding: 0px 0px 0px 10px; - vertical-align: middle; -} - -#textsearch-container.method-container .form-line span input[type="search"] { - width: 100%; - height: 28px; -} - -#textsearch-container.method-container .form-line span input[type="search"]:before { - top: 7px; -} - -#textsearch-container button { - width: 90px; - vertical-align: middle; - display: table-cell; -} - -#stanzas { - -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); - -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); - box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); - z-index: 3; - -webkit-border-radius: 6px; - border-radius: 6px; - background-color: #fff; -} - -#stanzas .textsearch_info { - color: #666; -} - -.textsearch_paginate { - text-align: center; -} diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml index eac134c..ee3d9b1 100644 --- a/app/views/layouts/application.html.haml +++ b/app/views/layouts/application.html.haml @@ -4,31 +4,10 @@ %head %meta(charset='utf-8') %title TogoGenome - = stylesheet_link_tag 'application', :media => 'all' + = stylesheet_link_tag 'application', media: 'all' = javascript_include_tag 'application' = csrf_meta_tags - = yield :header %body(data-spy='scroll' data-target='#navbar') - %header - .navbar.navbar-inverse.navbar-fixed-top - .navbar-inner - = link_to 'TogoGenome', root_path, class: 'navbar-brand' - - #main - %section - = yield - - #footer - %footer - %a#link-DBCLS(href='http://dbcls.rois.ac.jp' target='_blank') DBCLS - Database Center for Life Science, ライフサイエンス統合データベースセンター - - %address - Address: - %a(href="https://www.google.com/maps/place/35°53'41.1%22N+139°57'08.6%22E/@35.8947554,139.952394,15z/data=!3m1!4b1!4m2!3m1!1s0x0:0x0" target='_blank') Univ. of Tokyo Kashiwa-no-ha Campus Station Satellite 6F. 178-4-4 Wakashiba, Kashiwa-shi, Chiba 277-0871, JAPAN - %br/ - Phone: +81 (4) 7135 5508 - - %p#copyright Copyright © 2008-2014 Database Center for Life Science (DBCLS) - - = yield :javascript + .container-fluid + = yield diff --git a/app/views/root/show.html.haml b/app/views/root/show.html.haml index 9510352..e1efd20 100644 --- a/app/views/root/show.html.haml +++ b/app/views/root/show.html.haml @@ -1,22 +1,21 @@ -.main-container - #search-methods-container - %ul#search-methods-selector - %li - %a{href: "#facet", data: {toggle: :tab}} Facet - %li.current.active - %a{href: "#sequence", data: {toggle: :tab}} Sequence - %li - %a{href: "#converter", data: {toggle: :tab}} ID converter - %li - %a{href: "#resolver", data: {toggle: :tab}} ID resolver - %li{class: "search-methods-visibility-button"} Hide +%nav.navbar.navbar-inverse.navbar-fixed-top + = link_to 'TogoGenome', root_path, class: 'navbar-brand' + %ul.nav.nav-pills.nav-tabs + %li.nav-item + %a.nav-link{href: "#facet", data: {toggle: :tab}} Facet + %li.nav-item + %a.nav-link.active{href: "#sequence", data: {toggle: :tab}} Sequence + %li.nav-item + %a.nav-link{href: "#converter", data: {toggle: :tab}} ID converter + %li.nav-item + %a.nav-link{href: "#resolver", data: {toggle: :tab}} ID resolver - .tab-content - #facet.tab-pane - = react_component('FacetPage') - #sequence.tab-pane.active - = react_component('SequencePage') - #converter.tab-pane - = react_component('ConverterPage') - #resolver.tab-pane - = react_component('ResolverPage') + .tab-content + #facet.tab-pane + = react_component('FacetPage') + #sequence.tab-pane.active + = react_component('SequencePage') + #converter.tab-pane + = react_component('ConverterPage') + #resolver.tab-pane + = react_component('ResolverPage') From 992054019b58feed5f52b060ffa20eb077b6fe8b Mon Sep 17 00:00:00 2001 From: Naoki Nishiguchi Date: Mon, 24 Aug 2015 16:12:18 +0900 Subject: [PATCH 14/16] Fix hilight fragment MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 検索結果にマイナス鎖があることを考慮して、正規表現でハイライト箇所を探すのではなく、 Sequence内の位置を見てハイライトするようにした --- app/assets/javascripts/components/sequence_page.js.jsx | 9 ++++----- app/models/sequence_search/sequence.rb | 7 ++++--- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/app/assets/javascripts/components/sequence_page.js.jsx b/app/assets/javascripts/components/sequence_page.js.jsx index 29cc988..00feb69 100644 --- a/app/assets/javascripts/components/sequence_page.js.jsx +++ b/app/assets/javascripts/components/sequence_page.js.jsx @@ -51,12 +51,11 @@ var SequenceOntologyListItem = React.createClass({ }) var SequenceSearchResultRaw = React.createClass({ - _highlightQuery: function(snippet, query) { - var regex = new RegExp("(" + query + ")", "gi"); - return snippet.replace(regex, "$1"); + _highlightQuery: function(text, index) { + return text.slice(0, index) + "" + text.slice(index, -index) + "" + text.slice(-index); }, render: function() { - var {name, taxonomy, position, position_end, snippet, fragment} = this.props.gene; + var {name, taxonomy, position, position_end, snippet, metadescription_size} = this.props.gene; var locusTagList = this.props.gene.locus_tags.map(function(locus_tag, index) { return ( @@ -81,7 +80,7 @@ var SequenceSearchResultRaw = React.createClass({ - + ); } diff --git a/app/models/sequence_search/sequence.rb b/app/models/sequence_search/sequence.rb index 7e7e4c6..299827a 100644 --- a/app/models/sequence_search/sequence.rb +++ b/app/models/sequence_search/sequence.rb @@ -3,6 +3,7 @@ class Sequence include Queryable def self.search(fragment) + metadescription_size = 10 genomes = Bio::GGGenome.search('prok', 0, fragment)['results'] binds = genomes.map {|genome| @@ -15,11 +16,11 @@ def self.search(fragment) genomes.map do |genome| so = results.rows.select {|r| r.name == genome['name'] } - start_index = genome['position'] - genome['snippet_pos'] - 10 - end_index = genome['position_end'] - genome['snippet_pos'] + 10 + start_index = genome['position'] - genome['snippet_pos'] - metadescription_size + end_index = genome['position_end'] - genome['snippet_pos'] + metadescription_size genome.to_h.merge( - fragment: fragment, + metadescription_size: metadescription_size, snippet: genome['snippet'][start_index..end_index], sequence_ontologies: so.map {|r| {uri: r.sequence_ontology, name: r.sequence_ontology_name} }, locus_tags: so.map {|r| r.locus_tag }.compact.uniq, From a951c4e895571900f899017888d53ee8e78e45c6 Mon Sep 17 00:00:00 2001 From: Naoki Nishiguchi Date: Tue, 25 Aug 2015 11:45:03 +0900 Subject: [PATCH 15/16] Add gem "unicorn" --- Gemfile | 1 + Gemfile.lock | 7 +++++++ 2 files changed, 8 insertions(+) diff --git a/Gemfile b/Gemfile index 5d4fb3c..20a851a 100644 --- a/Gemfile +++ b/Gemfile @@ -15,6 +15,7 @@ gem 'sass-rails', '~> 5.0' gem 'sdoc', '~> 0.4.0', group: :doc gem 'turbolinks' gem 'uglifier', '>= 1.3.0' +gem 'unicorn' group :development, :test do gem 'byebug' diff --git a/Gemfile.lock b/Gemfile.lock index e76fadf..9dd641d 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -86,6 +86,7 @@ GEM activesupport (>= 3.0.0, < 5) multi_json (~> 1.2) json (1.8.3) + kgio (2.9.3) loofah (2.0.2) nokogiri (>= 1.5.9) mail (2.6.3) @@ -127,6 +128,7 @@ GEM activesupport (= 4.2.3) rake (>= 0.8.7) thor (>= 0.18.1, < 2.0) + raindrops (0.15.0) rake (10.4.2) rdoc (4.2.0) react-rails (1.1.0) @@ -169,6 +171,10 @@ GEM uglifier (2.7.1) execjs (>= 0.3.0) json (>= 1.8.0) + unicorn (4.9.0) + kgio (~> 2.6) + rack + raindrops (~> 0.7) web-console (2.2.1) activemodel (>= 4.0) binding_of_caller (>= 0.7.2) @@ -196,6 +202,7 @@ DEPENDENCIES spring turbolinks uglifier (>= 1.3.0) + unicorn web-console (~> 2.0) BUNDLED WITH From 42d6263748e9ecf32e2d1acaf68c8da84fd083dc Mon Sep 17 00:00:00 2001 From: Naoki Nishiguchi Date: Tue, 25 Aug 2015 18:51:13 +0900 Subject: [PATCH 16/16] refactor --- .../components/sequence_page.js.jsx | 62 +++++++++---------- 1 file changed, 30 insertions(+), 32 deletions(-) diff --git a/app/assets/javascripts/components/sequence_page.js.jsx b/app/assets/javascripts/components/sequence_page.js.jsx index 00feb69..e87a0e8 100644 --- a/app/assets/javascripts/components/sequence_page.js.jsx +++ b/app/assets/javascripts/components/sequence_page.js.jsx @@ -1,5 +1,5 @@ var SequenceSearchForm = React.createClass({ - handleSubmit: function(e) { + handleSubmit(e) { e.preventDefault(); var fragment = React.findDOMNode(this.refs.fragment).value.trim(); if (!fragment) { @@ -7,9 +7,9 @@ var SequenceSearchForm = React.createClass({ } this.props.onSearchSubmit({fragment: fragment}); }, - render: function() { + render() { return ( -
    +
    @@ -25,7 +25,7 @@ var SequenceSearchForm = React.createClass({ }); var LocusTagListItem = React.createClass({ - render: function() { + render() { var url = "/gene/" + this.props.taxonomy + ":" +this.props.locus_tag; return (
  • {this.props.locus_tag}
    • @@ -34,7 +34,7 @@ var LocusTagListItem = React.createClass({ }) var ProductListItem = React.createClass({ - render: function() { + render() { return (
  • {this.props.product}
    • ); @@ -42,7 +42,7 @@ var ProductListItem = React.createClass({ }) var SequenceOntologyListItem = React.createClass({ - render: function() { + render() { var {name, uri} = this.props.ontology; return (
  • {name}
    • @@ -51,10 +51,10 @@ var SequenceOntologyListItem = React.createClass({ }) var SequenceSearchResultRaw = React.createClass({ - _highlightQuery: function(text, index) { + _highlightQuery(text, index) { return text.slice(0, index) + "" + text.slice(index, -index) + "" + text.slice(-index); }, - render: function() { + render() { var {name, taxonomy, position, position_end, snippet, metadescription_size} = this.props.gene; var locusTagList = this.props.gene.locus_tags.map(function(locus_tag, index) { return ( @@ -73,7 +73,7 @@ var SequenceSearchResultRaw = React.createClass({ }); return ( -
    + @@ -87,37 +87,35 @@ var SequenceSearchResultRaw = React.createClass({ }) var SequenceSearchResultTable = React.createClass({ - render: function() { + render() { var sequenceSearchResultRaws = this.props.data.map(function(gene, index) { return ( ); }); return ( -
    -
    Sequence name Locus tag
      {sequenceOntologyList}
    		 {position} {position_end}
    {name}
      {locusTagList}
      {productList}
    - - - - - - - - - - - - - {sequenceSearchResultRaws} - -
    Sequence nameLocus tagProductSequence ontologyPosition beginPosition endSequence
    -
    + + + + + + + + + + + + + + {sequenceSearchResultRaws} + +
    Sequence nameLocus tagProductSequence ontologyPosition beginPosition endSequence
    ); } }); var SequencePage = React.createClass({ - handleSearchSubmit: function(fragment) { + handleSearchSubmit(fragment) { $.get( '/api/sequence/search.json', fragment @@ -127,13 +125,13 @@ var SequencePage = React.createClass({ }.bind(this) ) }, - getInitialState: function() { + getInitialState() { return {data: []}; }, - render: function() { + render() { var sequenceSearchResult = (this.state.data.length === 0) ? "" : ; return ( -
    +
    {sequenceSearchResult}