erd 0.6.3 → 0.6.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 19f3db87a114e08714d36a0f30667bdf13e414d4a31a05c9040cbcebb096c3e0
-  data.tar.gz: f9a57e8692ce03076fa560efd3d6d161735bd2f71c1947a39c164be24a84220b
+  metadata.gz: 614e01232d2efeca93c7bed35a751e25a9ee991e2f51e80e171f918fc7f243ef
+  data.tar.gz: 357077faae8695c34f34fda83f3f4437c95b1725d452c4b262cfbf68648edf28
 SHA512:
-  metadata.gz: 4e9ace58506b790f0467cb90a03bd0bb30030d02d952ca411b74a779e5a16eeb6f92c45c0a2cabb024d25e04be2b53a0c6bbd1b3b8b3ea892bd8558f0d8708c1
-  data.tar.gz: 7e7f9287350669a8d4a17672ec3e026c313182a4b569a79e809da839e51a2b64d05d13041429b04b732d00c1570ebec38210c66643e5e7fb9c80866bef18ec1d
+  metadata.gz: 07a9c92343e1d277fbe84f944f08c8d3adb7ae1e166bd04b59606d7325ed25adb2c60f03aee27696e8bda48fc56ba182fde0a31cb0110aa19ad81a41ea608285
+  data.tar.gz: 15f84992ff7fc3d83cf3df98902afaa22df912ea860345755dd21b06a7521c2d86b2a997d14ebd2cb2d59594ebf211f72271f0375b766c6bc526a58f84518144

data/.gitignore

@@ -3,6 +3,7 @@
 .bundle
 .config
 .yardoc
+.sass-cache
 Gemfile.lock
 gemfiles/*.lock
 InstalledFiles

data/.travis.yml

@@ -14,7 +14,6 @@ cache:
 
 before_install:
   - sudo apt install -y chromium-chromedriver
-  - sudo ln -s /usr/lib/chromium-browser/chromedriver /usr/bin/
   - gem i bundler -v '<2'
 
 rvm:
@@ -22,6 +21,7 @@ rvm:
   - 2.0.0
 
 gemfile:
+  - gemfiles/rails_60.gemfile
   - gemfiles/rails_52.gemfile
   - gemfiles/rails_51.gemfile
   - gemfiles/rails_50.gemfile
@@ -32,6 +32,8 @@ gemfile:
 
 matrix:
   exclude:
+    - rvm: 2.0.0
+      gemfile: gemfiles/rails_60.gemfile
     - rvm: 2.0.0
       gemfile: gemfiles/rails_52.gemfile
     - rvm: 2.0.0
@@ -46,6 +48,3 @@ matrix:
       gemfile: gemfiles/rails_40.gemfile
     - rvm: 2.6.0
       gemfile: gemfiles/rails_32.gemfile
-  include:
-    - rvm: 1.8.7
-      gemfile: gemfiles/rails_32.gemfile

data/README.rdoc

@@ -43,7 +43,7 @@ Browse at your http://localhost:3000/erd
 
 * drop column (need to think of the UI)
 
-* stop depending on rails-erd and Graphviz
+* stop depending on Graphviz
 
 * tests
 

data/app/controllers/erd/erd_controller.rb

@@ -1,16 +1,13 @@
 # frozen_string_literal: true
 
 require 'nokogiri'
-require 'rails_erd/diagram/graphviz'
+require 'ruby-graphviz'
 require 'erd/application_controller'
 
 module Erd
   class ErdController < ::Erd::ApplicationController
     def index
-      Rails.application.eager_load!
-      RailsERD.options[:filename], RailsERD.options[:filetype] = Rails.root.join('tmp/erd'), 'plain'
-      RailsERD::Diagram::Graphviz.create
-      plain = Rails.root.join('tmp/erd.plain').read
+      plain = generate_plain
       positions = if (json = Rails.root.join('tmp/erd_positions.json')).exist?
         ActiveSupport::JSON.decode json.read
       else
@@ -22,7 +19,7 @@ module Erd
     end
 
     def update
-      changes = ActiveSupport::JSON.decode(params[:changes])
+      changes = params[:changes].present? ? ActiveSupport::JSON.decode(params[:changes]) : []
       executed_migrations, failed_migrations = [], []
       changes.each do |row|
         begin
@@ -79,27 +76,58 @@ module Erd
     end
 
     private
+
+    def generate_plain
+      if Rails.respond_to?(:autoloaders) && Rails.autoloaders.try(:zeitwerk_enabled?)
+        Zeitwerk::Loader.eager_load_all
+      else
+        Rails.application.eager_load!
+      end
+      ar_descendants = ActiveRecord::Base.descendants.reject {|m| m.name.in?(%w(ActiveRecord::SchemaMigration ActiveRecord::InternalMetadata ApplicationRecord)) }
+      ar_descendants.reject! {|m| !m.table_exists? }
+
+      g = GraphViz.new('ERD', :type => :digraph, :rankdir => 'LR', :labelloc => :t, :ranksep => '1.5', :nodesep => '1.8', :margin => '0,0', :splines => 'spline') {|g|
+        nodes = ar_descendants.each_with_object({}) do |model, hash|
+          next if model.name.start_with? 'HABTM_'
+          hash[model.name] = model.columns.reject {|c| c.name.in? %w(id created_at updated_at) }.map {|c| [c.name, c.type]}
+        end
+
+        edges = []
+        ar_descendants.each do |model|
+          model.reflect_on_all_associations.each do |reflection|
+            next unless nodes.key? model.name
+            next if reflection.macro == :belongs_to
+            next unless nodes.key?(reflection.klass.name)
+
+            edges << [model.name, reflection.klass.name]
+            # don't include the FKs in the diagram
+            nodes[reflection.klass.name].delete_if {|col, _type| col == reflection.foreign_key }
+          end
+        end
+
+        nodes.each_pair do |model_name, cols|
+          g.add_nodes model_name, 'shape' => 'record', 'label' => "#{model_name}|#{cols.map {|name, type| "#{name}(#{type})"}.join('\l')}"
+        end
+        edges.each do |from, to|
+          g.add_edge g.search_node(from), g.search_node(to)
+        end
+      }
+      g.output('plain' => String)
+    end
+
     def render_plain(plain, positions)
-      _scale, svg_width, svg_height = plain.scan(/\Agraph ([0-9\.]+) ([0-9\.]+) ([0-9\.]+)$/).first
+      _scale, svg_width, svg_height = plain.scan(/\Agraph ([\d\.]+) ([\d\.]+) ([\d\.]+)$/).first
       # node name x y width height label style shape color fillcolor
       max_model_x, max_model_y = 0, 0
-      models = plain.scan(/^node ([^ ]+) ([0-9\.]+) ([0-9\.]+) ([0-9\.]+) ([0-9\.]+) <\{?(<((?!^\}?>).)*)^\}?> [^ ]+ [^ ]+ [^ ]+ [^ ]+\n/m).map {|node_name, x, y, width, height, label|
-        label_doc = Nokogiri::HTML::DocumentFragment.parse(label)
-        model_name = node_name.dup
-        model_name[0] = model_name[-1] = '' if (model_name.first == '"') && (model_name.last == '"')
-        model_name = model_name.sub(/^m_/, '')
-        next if model_name.in? ['ActiveRecord::SchemaMigration', 'ActiveRecord::InternalMetadata']
-        columns = []
-        if (cols_table = label_doc.search('table')[1])
-          columns = cols_table.search('tr > td').map {|col| col_name, col_type = col.text.split(' '); {:name => col_name, :type => col_type}}
-        end
+      models = plain.scan(/^node ([^ ]+) ([\d\.]+) ([\d\.]+) ([\d\.]+) ([\d\.]+) ([^ ]+) [^ ]+ [^ ]+ [^ ]+ [^ ]+\n/m).map {|model_name, x, y, width, height, label|
+        columns = label.gsub("\\\n", '').split('|')[1].split('\l').map {|name_and_type| name_and_type.scan(/(.*?)\((.*?)\)/).first }.map {|n, t| {:name => n, :type => t} }
         custom_x, custom_y = positions[model_name.tableize].try(:split, ',')
         h = {:model => model_name, :x => (custom_x || (BigDecimal(x) * 72).round), :y => (custom_y || (BigDecimal(y) * 72).round), :width => (BigDecimal(width) * 72).round, :height => height, :columns => columns}
         max_model_x, max_model_y = [h[:x].to_i + h[:width].to_i, max_model_x, 1024].max, [h[:y].to_i + h[:height].to_i, max_model_y, 768].max
         h
       }.compact
       # edge tail head n x1 y1 .. xn yn [label xl yl] style color
-      edges = plain.scan(/^edge ([^ ]+)+ ([^ ]+)/).map {|from, to| {:from => from.sub(/^m_/, ''), :to => to.sub(/^m_/, '')}}
+      edges = plain.scan(/^edge ([^ ]+)+ ([^ ]+)/).map {|from, to| {:from => from, :to => to}}
       render_to_string 'erd/erd/erd', :layout => nil, :locals => {:width => [(BigDecimal(svg_width) * 72).round, max_model_x].max, :height => [(BigDecimal(svg_height) * 72).round, max_model_y].max, :models => models, :edges => edges}
     end
 

data/app/views/erd/erd/_column.html.erb

@@ -6,7 +6,7 @@
         <form class="rename_column_form"><span><input name="model" type="hidden" value="<%= model[:model] %>" /><input name="column" type="hidden" value="<%= column[:name] %>" /><input name="to" type="text" /><input type="submit" value="Change" /></span><a href="#!" class="cancel">Cancel</a></form>
       </td>
       <td>
-        <span class="column_type_text <%= column[:type].delete(" ∗") %>"><%= column[:type] %></span>
+        <span class="column_type_text <%= column[:type] %>"><%= column[:type] %></span>
         <form class="alter_column_form"><span><input name="model" type="hidden" value="<%= model[:model] %>" /><input name="column" type="hidden" value="<%= column[:name] %>" /><input name="type" type="hidden" value="<%= column[:type] %>" /><input name="to" type="text" /><input type="submit" value="Change" /></span><a href="#!" class="cancel">Cancel</a></form>
       </td>
     </tr>

data/app/views/erd/erd/_model.html.erb

@@ -1,5 +1,5 @@
 <div id="erd-<%= model[:model] %>" class="model" style="top: <%= model[:y] %>px; left: <%= model[:x] %>px;" data-model_name="<%= model[:model] %>">
-  <a href="#!" class="close"><%= image_tag("/assets/erd/close.png") %></a>
+  <a href="#!" class="close"><%= image_tag '/erd/close.png' %></a>
   <div class="model_name">
     <div class="model_name_text"><%= model[:model] %></div>
     <form class="rename_model_form">

data/app/views/erd/erd/index.html.erb

@@ -2,9 +2,9 @@
   <div id="erd_container">
     <%=raw @erd %>
   </div>
-  <div id="open_migration"><%= image_tag("/assets/erd/angle-left.png") %></div>
+  <div id="open_migration"><%= image_tag '/erd/angle-left.png' %></div>
   <div id="migration">
-    <div id="close_migration"><%= image_tag("/assets/erd/angle-right.png") %></div>
+    <div id="close_migration"><%= image_tag '/erd/angle-right.png' %></div>
     <%- if flash[:executed_migrations].present? -%>
       <div id="executed">
         <h2>Successfully executed following <%= flash[:executed_migrations].values.flatten.count %> migrations!</h2>

data/app/views/layouts/erd/application.html.erb

@@ -3,11 +3,12 @@
 <head>
   <meta charset='utf-8'>
   <title>ERD - <%= Rails.application.class.parent.name %></title>
-  <%= stylesheet_link_tag    'erd/application', :media => 'all' %>
+  <%= stylesheet_link_tag    '/erd/erd', :media => 'all' %>
   <%= stylesheet_link_tag    'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css', :media => 'all' %>
   <%= javascript_include_tag 'https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js' %>
   <%= javascript_include_tag 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js' %>
-  <%= javascript_include_tag 'erd/application' %>
+  <%= javascript_include_tag 'https://cdnjs.cloudflare.com/ajax/libs/raphael/2.3.0/raphael.min.js' %>
+  <%= javascript_include_tag '/erd/erd' %>
   <%= csrf_meta_tags %>
 </head>
 <body>

data/erd.gemspec

@@ -18,7 +18,7 @@ Gem::Specification.new do |gem|
   gem.require_paths = ['lib']
   gem.version       = Erd::VERSION
 
-  gem.add_runtime_dependency 'rails-erd', ['>= 0.4.5']
+  gem.add_runtime_dependency 'ruby-graphviz'
   gem.add_runtime_dependency 'nokogiri'
 
   gem.add_development_dependency 'rails', '>= 3.2'

data/gemfiles/rails_32.gemfile

@@ -11,4 +11,4 @@ gem 'rubyzip', '0.9.9' if RUBY_VERSION < '1.9'
 
 gem 'test-unit-rails', '1.0.2'
 gem 'test-unit', '< 3.1'
-gem 'rails-erd', '< 1.2'
+gem 'sqlite3', '< 1.4'

data/gemfiles/rails_40.gemfile

@@ -6,3 +6,4 @@ gemspec :path => '../'
 
 gem 'rails', '~> 4.0.0'
 gem 'nokogiri', RUBY_VERSION < '2.1' ? '~> 1.6.0' : '>= 1.7'
+gem 'sqlite3', '< 1.4'

data/gemfiles/rails_41.gemfile

@@ -6,3 +6,4 @@ gemspec :path => '../'
 
 gem 'rails', '~> 4.1.0'
 gem 'nokogiri', RUBY_VERSION < '2.1' ? '~> 1.6.0' : '>= 1.7'
+gem 'sqlite3', '< 1.4'

data/gemfiles/rails_42.gemfile

@@ -6,3 +6,4 @@ gemspec :path => '../'
 
 gem 'rails', '~> 4.2.0'
 gem 'nokogiri', RUBY_VERSION < '2.1' ? '~> 1.6.0' : '>= 1.7'
+gem 'sqlite3', '< 1.4'

data/gemfiles/rails_50.gemfile

@@ -5,3 +5,4 @@ source 'https://rubygems.org'
 gemspec :path => '../'
 
 gem 'rails', '~> 5.0.0'
+gem 'sqlite3', '< 1.4'

data/gemfiles/rails_51.gemfile

@@ -5,3 +5,4 @@ source 'https://rubygems.org'
 gemspec :path => '../'
 
 gem 'rails', '~> 5.1.0'
+gem 'sqlite3', '< 1.4'

data/gemfiles/rails_52.gemfile

@@ -6,3 +6,4 @@ gemspec :path => '../'
 
 gem 'rails', '~> 5.2.0'
 gem 'puma'
+gem 'sqlite3', '< 1.4'

data/gemfiles/rails_60.gemfile

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+source 'https://rubygems.org'
+
+gemspec :path => '../'
+
+gem 'rails', '~> 6.0.0'
+gem 'puma'
+gem 'sqlite3'

data/gemfiles/rails_edge.gemfile

@@ -6,3 +6,4 @@ gemspec :path => '../'
 
 gem 'rails', git: 'https://github.com/rails/rails'
 gem 'puma'
+gem 'sqlite3'

data/lib/erd.rb

@@ -1,4 +1,10 @@
 # frozen_string_literal: true
 
 require 'erd/version'
-require 'erd/railtie'
+require 'rails'
+require 'erd/engine'
+
+module Erd
+  autoload :Migrator, 'erd/migrator'
+  autoload :GenaratorRunner, 'erd/generator_runner'
+end

data/lib/erd/engine.rb

@@ -3,5 +3,17 @@
 module Erd
   class Engine < ::Rails::Engine
     isolate_namespace Erd
+
+    initializer 'erd' do |app|
+      if Rails.env.development?
+        ActiveSupport.on_load :after_initialize do
+          Rails.application.routes.prepend do
+            mount Erd::Engine, :at => '/erd'
+          end
+        end
+
+        app.middleware.insert_before ::ActionDispatch::Static, ::ActionDispatch::Static, root.join('public').to_s
+      end
+    end
   end
 end

data/lib/erd/migrator.rb

@@ -8,9 +8,11 @@ module Erd
   class Migrator
     class << self
       def status
+        migrations = []
         migration_table_name = defined?(ActiveRecord::SchemaMigration) ? ActiveRecord::SchemaMigration.table_name : ActiveRecord::Migrator.schema_migrations_table_name
+        return migrations unless ActiveRecord::Base.connection.table_exists? migration_table_name
+
         migrated_versions = ActiveRecord::Base.connection.select_values("SELECT version FROM #{migration_table_name}").map {|v| '%.3d' % v}
-        migrations = []
         ActiveRecord::Migrator.migrations_paths.each do |path|
           Dir.foreach(Rails.root.join(path)) do |file|
             if (version_and_name = /^(\d{3,})_(.+)\.rb$/.match(file))

data/lib/erd/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Erd
-  VERSION = '0.6.3'
+  VERSION = '0.6.4'
 end

data/public/erd/erd.css

@@ -0,0 +1,549 @@
+html, body, p, ul, ol, dl, p, li, dt, dd, tr, td, form {
+  margin: 0;
+  padding: 0; }
+
+li {
+  list-style-type: none; }
+
+.cancel {
+  display: block;
+  margin: 0.4em auto 0;
+  background: rgba(0, 0, 0, 0.4);
+  font-size: 12px;
+  width: 70px;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  -ms-border-radius: 4px;
+  -o-border-radius: 4px;
+  border-radius: 4px;
+  text-decoration: none;
+  line-height: 1.8;
+  text-align: center;
+  color: white;
+  position: relative;
+  padding: 2px 0 0 8px;
+  text-shadow: none; }
+  .cancel:hover {
+    background: rgba(0, 0, 0, 0.6); }
+  .cancel:before {
+    content: "";
+    display: block;
+    height: 10px;
+    width: 10px;
+    position: absolute;
+    left: 8px;
+    top: 6px;
+    background-image: image_url("erd/cancel.png");
+    background-size: 10px 10px;
+    background-position: center center; }
+
+#erd_box {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-box;
+  display: -o-box;
+  display: box; }
+
+#erd_container {
+  -webkit-box-flex: 1;
+  -moz-box-flex: 1;
+  -ms-box-flex: 1;
+  -o-box-flex: 1;
+  box-flex: 1; }
+
+#open_migration,
+#close_migration {
+  position: fixed;
+  top: 0;
+  background: rgba(0, 0, 0, 0.6);
+  width: 80px;
+  text-align: center;
+  color: white;
+  cursor: pointer;
+  z-index: 5; }
+  #open_migration:hover,
+  #close_migration:hover {
+    background: rgba(0, 0, 0, 0.8); }
+  #open_migration img,
+  #close_migration img {
+    width: 16px;
+    height: 27px;
+    display: block;
+    margin: 16px auto; }
+
+#open_migration {
+  right: 15px; }
+
+#migrate_form {
+  position: relative; }
+  #migrate_form #open_buttons {
+    position: absolute;
+    right: 0;
+    top: 0; }
+    #migrate_form #open_buttons li {
+      display: -moz-inline-stack;
+      display: inline-block;
+      vertical-align: middle;
+      *vertical-align: auto;
+      zoom: 1;
+      *display: inline; }
+
+#migration {
+  padding: 10px 10px;
+  min-width: 500px;
+  overflow-x: auto;
+  -webkit-box-sizing: content-box;
+  -moz-box-sizing: content-box;
+  -ms-box-sizing: content-box;
+  -o-box-sizing: content-box;
+  box-sizing: content-box;
+  position: relative;
+  display: none; }
+  #migration table,
+  #migration th,
+  #migration td {
+    border: 1px #444444 solid;
+    border-collapse: collapse; }
+  #migration table {
+    width: 100%;
+    margin: 0 0 0.6em; }
+    #migration table caption {
+      font-weight: bold;
+      margin: 0 0 0.5em; }
+    #migration table thead td {
+      text-align: center; }
+      #migration table thead td button {
+        padding: 3px 30px; }
+    #migration table td {
+      font-size: 12px;
+      padding: 2px 0.8em;
+      line-height: 1.4; }
+      #migration table td.migrations {
+        background: #444444;
+        color: white; }
+      #migration table td.migration_file_name {
+        white-space: normal !important;
+        word-break: break-all;
+        -ms-word-wrap: break-word;
+        max-width: 200px; }
+    #migration table th {
+      background: -webkit-linear-gradient(top, #eeeeee 0%, #d0d0d0 88%);
+      background: -moz-linear-gradient(top, #eeeeee 0%, #d0d0d0 88%);
+      background: -ms-linear-gradient(top, #eeeeee 0%, #d0d0d0 88%);
+      background: -o-linear-gradient(top, #eeeeee 0%, #d0d0d0 88%);
+      background: linear-gradient(top, #eeeeee 0%, #d0d0d0 88%);
+      font-size: 13px;
+      font-weight: bold;
+      text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
+      line-height: 2.2;
+      padding: 0 0.8em; }
+      #migration table th.status {
+        width: 60px; }
+      #migration table th.version {
+        width: 140px; }
+  #migration #changes_form {
+    margin: 0 0 20px; }
+
+#migration_status {
+  width: 386px; }
+  #migration_status td.migration_file_name {
+    word-break: break-all; }
+  #migration_status td label {
+    white-space: nowrap; }
+  #migration_status tr.up, #migration_status tr.down {
+    font-size: 0;
+    height: 2px;
+    overflow: hidden; }
+    #migration_status tr.up *, #migration_status tr.down * {
+      font-size: 0;
+      overflow: hidden; }
+    #migration_status tr.up input, #migration_status tr.down input {
+      display: none; }
+    #migration_status tr.up:hover, #migration_status tr.up.active, #migration_status tr.up.open, #migration_status tr.down:hover, #migration_status tr.down.active, #migration_status tr.down.open {
+      height: auto;
+      background: white; }
+      #migration_status tr.up:hover *, #migration_status tr.up.active *, #migration_status tr.up.open *, #migration_status tr.down:hover *, #migration_status tr.down.active *, #migration_status tr.down.open * {
+        font-size: small;
+        height: auto;
+        overflow: auto; }
+      #migration_status tr.up:hover td, #migration_status tr.up.active td, #migration_status tr.up.open td, #migration_status tr.down:hover td, #migration_status tr.down.active td, #migration_status tr.down.open td {
+        padding: 4px 0.8em; }
+      #migration_status tr.up:hover input, #migration_status tr.up.active input, #migration_status tr.up.open input, #migration_status tr.down:hover input, #migration_status tr.down.active input, #migration_status tr.down.open input {
+        display: -moz-inline-stack;
+        display: inline-block;
+        vertical-align: middle;
+        *vertical-align: auto;
+        zoom: 1;
+        *display: inline; }
+    #migration_status tr.up.active, #migration_status tr.down.active {
+      background: #fffebe; }
+  #migration_status.show_all_migrations .up,
+  #migration_status.show_all_migrations .down {
+    height: auto;
+    background: white; }
+    #migration_status.show_all_migrations .up *,
+    #migration_status.show_all_migrations .down * {
+      font-size: small;
+      height: auto;
+      overflow: auto; }
+    #migration_status.show_all_migrations .up td,
+    #migration_status.show_all_migrations .down td {
+      padding: 4px 0.8em; }
+    #migration_status.show_all_migrations .up input,
+    #migration_status.show_all_migrations .down input {
+      display: -moz-inline-stack;
+      display: inline-block;
+      vertical-align: middle;
+      *vertical-align: auto;
+      zoom: 1;
+      *display: inline; }
+
+#erd {
+  overflow: auto;
+  position: relative;
+  background-color: #3aade3;
+  background-image: image_url("/erd/background.png"); }
+  #erd form {
+    display: none; }
+  #erd .model {
+    background-color: white;
+    position: absolute;
+    border: 1px #444444 solid;
+    cursor: move;
+    z-index: 1; }
+    #erd .model:hover {
+      -webkit-box-shadow: rgba(0, 0, 0, 0.7) 0 2px 2px;
+      -moz-box-shadow: rgba(0, 0, 0, 0.7) 0 2px 2px;
+      -ms-box-shadow: rgba(0, 0, 0, 0.7) 0 2px 2px;
+      -o-box-shadow: rgba(0, 0, 0, 0.7) 0 2px 2px;
+      box-shadow: rgba(0, 0, 0, 0.7) 0 2px 2px; }
+    #erd .model .model_name {
+      border-bottom: 1px #444444 solid;
+      cursor: pointer;
+      margin: 1px 5px 0 5px auto; }
+      #erd .model .model_name .model_name_text {
+        text-align: center;
+        display: block;
+        background: -webkit-linear-gradient(top, #eeeeee 0%, #d0d0d0 88%);
+        background: -moz-linear-gradient(top, #eeeeee 0%, #d0d0d0 88%);
+        background: -ms-linear-gradient(top, #eeeeee 0%, #d0d0d0 88%);
+        background: -o-linear-gradient(top, #eeeeee 0%, #d0d0d0 88%);
+        background: linear-gradient(top, #eeeeee 0%, #d0d0d0 88%);
+        font-size: 13px;
+        font-weight: bold;
+        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
+        line-height: 2.2;
+        padding: 0 0.8em; }
+        #erd .model .model_name .model_name_text.unsaved {
+          background: #fffebe;
+          position: relative;
+          background: #fffebe;
+          position: relative; }
+          #erd .model .model_name .model_name_text.unsaved:before {
+            content: "!";
+            display: block;
+            position: absolute;
+            width: 18px;
+            height: 18px;
+            background: #ec7500;
+            left: -14px;
+            top: 6px;
+            text-align: center;
+            line-height: 18px;
+            color: white;
+            -webkit-border-radius: 100px;
+            -moz-border-radius: 100px;
+            -ms-border-radius: 100px;
+            -o-border-radius: 100px;
+            border-radius: 100px;
+            -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 1px;
+            -moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 1px;
+            -ms-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 1px;
+            -o-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 1px;
+            box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 1px;
+            font-size: 12px;
+            font-family: Arial, sans-serif; }
+          #erd .model .model_name .model_name_text.unsaved:hover {
+            background: #f9f8b8; }
+      #erd .model .model_name form {
+        background: -webkit-linear-gradient(top, #eeeeee 0%, #d0d0d0 88%);
+        background: -moz-linear-gradient(top, #eeeeee 0%, #d0d0d0 88%);
+        background: -ms-linear-gradient(top, #eeeeee 0%, #d0d0d0 88%);
+        background: -o-linear-gradient(top, #eeeeee 0%, #d0d0d0 88%);
+        background: linear-gradient(top, #eeeeee 0%, #d0d0d0 88%);
+        font-size: 13px;
+        font-weight: bold;
+        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
+        line-height: 2.2;
+        padding: 0 0.8em;
+        padding: 8px; }
+      #erd .model .model_name > div.model_name_text:hover {
+        background: -webkit-linear-gradient(top, #b9e0f5 0%, #9bc2d7 88%);
+        background: -moz-linear-gradient(top, #b9e0f5 0%, #9bc2d7 88%);
+        background: -ms-linear-gradient(top, #b9e0f5 0%, #9bc2d7 88%);
+        background: -o-linear-gradient(top, #b9e0f5 0%, #9bc2d7 88%);
+        background: linear-gradient(top, #b9e0f5 0%, #9bc2d7 88%); }
+    #erd .model a.close {
+      position: absolute;
+      top: -6px;
+      right: -6px;
+      z-index: 2;
+      background-color: #444444;
+      border: 1px solid #444444;
+      display: block;
+      width: 16px;
+      height: 13px;
+      text-align: center;
+      -webkit-border-radius: 9px;
+      -moz-border-radius: 9px;
+      -ms-border-radius: 9px;
+      -o-border-radius: 9px;
+      border-radius: 9px;
+      padding: 3px 0 0; }
+      #erd .model a.close:hover {
+        background: #767676; }
+      #erd .model a.close img {
+        width: 10px;
+        height: 10px;
+        display: block;
+        margin: 0 auto; }
+
+.add_column_box {
+  text-align: center; }
+  .add_column_box a.add_column {
+    font-size: small;
+    display: block;
+    padding: 0 5px;
+    line-height: 2;
+    background: #444444;
+    color: white;
+    text-decoration: none; }
+    .add_column_box a.add_column:hover {
+      background: #3a3a3a; }
+
+.add_column_form {
+  background: #444444;
+  color: white;
+  padding: 8px; }
+
+.columns .column {
+  border-bottom: dotted 1px #cccccc;
+  padding: 0 0.8em;
+  clear: both;
+  line-height: 28px;
+  font-size: 14px; }
+  .columns .column table {
+    width: 100%; }
+  .columns .column:nth-child(even) {
+    background: #f9f9f9; }
+  .columns .column:last-child {
+    border-bottom: none; }
+  .columns .column .column_name_text,
+  .columns .column .column_type_text {
+    cursor: pointer; }
+  .columns .column .column_name_text {
+    margin: 0 1.4em 0 0; }
+    .columns .column .column_name_text:hover {
+      text-decoration: underline; }
+  .columns .column.unsaved {
+    background: #fffebe;
+    position: relative; }
+    .columns .column.unsaved:before {
+      content: "!";
+      display: block;
+      position: absolute;
+      width: 18px;
+      height: 18px;
+      background: #ec7500;
+      left: -14px;
+      top: 6px;
+      text-align: center;
+      line-height: 18px;
+      color: white;
+      -webkit-border-radius: 100px;
+      -moz-border-radius: 100px;
+      -ms-border-radius: 100px;
+      -o-border-radius: 100px;
+      border-radius: 100px;
+      -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 1px;
+      -moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 1px;
+      -ms-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 1px;
+      -o-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 1px;
+      box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 1px;
+      font-size: 12px;
+      font-family: Arial, sans-serif; }
+    .columns .column.unsaved:hover {
+      background: #f9f8b8; }
+  .columns .column .rename_column_form {
+    padding: 8px; }
+  .columns .column .column_type_text {
+    font-size: 10px;
+    float: right;
+    display: block;
+    line-height: 16px;
+    margin: 5px 0 0;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    -ms-border-radius: 4px;
+    -o-border-radius: 4px;
+    border-radius: 4px;
+    border-width: 1px;
+    border-style: solid;
+    width: 70px;
+    text-align: center;
+    border-color: #e98c60;
+    background: #f9eee9;
+    color: #444444;
+    border-style: solid; }
+    .columns .column .column_type_text:hover {
+      border-color: #e36c33;
+      background: #edd0c2; }
+    .columns .column .column_type_text.date, .columns .column .column_type_text.time, .columns .column .column_type_text.timestamp, .columns .column .column_type_text.datetime {
+      border-color: #da6272;
+      background: #f3e2e4;
+      color: #444444;
+      border-style: solid; }
+      .columns .column .column_type_text.date:hover, .columns .column .column_type_text.time:hover, .columns .column .column_type_text.timestamp:hover, .columns .column .column_type_text.datetime:hover {
+        border-color: #d0394d;
+        background: #e4bec3; }
+    .columns .column .column_type_text.boolean {
+      border-color: #45a1cf;
+      background: #c7dce6;
+      color: #444444;
+      border-style: solid; }
+      .columns .column .column_type_text.boolean:hover {
+        border-color: #2e87b3;
+        background: #a3c6d7; }
+    .columns .column .column_type_text.text {
+      border-color: #dab24f;
+      background: #efe7d3;
+      color: #444444;
+      border-style: solid; }
+      .columns .column .column_type_text.text:hover {
+        border-color: #cb9d2b;
+        background: #e1d2ae; }
+    .columns .column .column_type_text.decimal {
+      border-color: #8e8e08;
+      background: #dfdf50;
+      color: #444444;
+      border-style: solid; }
+      .columns .column .column_type_text.decimal:hover {
+        border-color: #5e5e05;
+        background: #d5d527; }
+    .columns .column .column_type_text.float {
+      border-color: #85616b;
+      background: silver;
+      color: #444444;
+      border-style: solid; }
+      .columns .column .column_type_text.float:hover {
+        border-color: #684b53;
+        background: #a6a6a6; }
+    .columns .column .column_type_text.integer {
+      border-color: #7c80aa;
+      background: #dfdfe0;
+      color: #444444;
+      border-style: solid; }
+      .columns .column .column_type_text.integer:hover {
+        border-color: #606493;
+        background: #c5c5c7; }
+    .columns .column .column_type_text.primary_key {
+      border-color: #ea9a5d;
+      background: #f9efe7;
+      color: #444444;
+      border-style: solid; }
+      .columns .column .column_type_text.primary_key:hover {
+        border-color: #e47e30;
+        background: #eed3bf; }
+    .columns .column .column_type_text.string {
+      border-color: #a4c520;
+      background: #d3e09e;
+      color: #444444;
+      border-style: solid; }
+      .columns .column .column_type_text.string:hover {
+        border-color: #7f9919;
+        background: #c1d477; }
+    .columns .column .column_type_text.unsaved {
+      border-color: #a55d00;
+      background: #eca952;
+      color: #444444;
+      border-style: solid; }
+      .columns .column .column_type_text.unsaved:hover {
+        border-color: #724000;
+        background: #e79224; }
+  .columns .column .alter_column_form {
+    padding: 8px; }
+  .columns .column:hover {
+    background-color: #ebebeb; }
+
+#executed, #failed {
+  padding: 7px;
+  padding-bottom: 0;
+  margin-bottom: 20px;
+  background-color: #f0f0f0; }
+  #executed h2, #failed h2 {
+    text-align: left;
+    font-weight: bold;
+    padding: 5px 5px 5px 15px;
+    font-size: 12px;
+    margin: -7px;
+    margin-bottom: 0px;
+    color: white; }
+  #executed h3, #failed h3 {
+    font-size: 12px;
+    margin: 0;
+    padding: 0; }
+  #executed ul li, #failed ul li {
+    margin-left: 25px;
+    font-size: 12px;
+    list-style: square; }
+
+#executed {
+  border: 2px lime solid; }
+  #executed h2 {
+    background-color: #00cc00; }
+
+#failed {
+  border: 2px red solid; }
+  #failed h2 {
+    background-color: #cc0000; }
+
+#model_name_changes, #column_name_changes {
+  display: none; }
+
+#open_create_model_dialog {
+  position: fixed;
+  right: 15px;
+  top: 70px;
+  background: rgba(0, 0, 0, 0.6);
+  padding: 12px 20px;
+  color: white;
+  text-decoration: none;
+  font-size: 13px; }
+  #open_create_model_dialog:hover {
+    background: rgba(0, 0, 0, 0.8); }
+
+#create_model_form {
+  font-size: 14px; }
+
+#create_model_table {
+  margin: 12px auto;
+  border-spacing: 0;
+  width: 100%; }
+  #create_model_table tr:nth-child(odd) td {
+    background: #f8f8f8; }
+  #create_model_table tr:nth-child(even) td {
+    background: #eee; }
+  #create_model_table tr td {
+    padding: 6px 12px; }
+    #create_model_table tr td input {
+      width: 100%;
+      box-sizing: border-box; }
+    #create_model_table tr td.separator {
+      padding: 6px 0; }
+
+#new_model_add_column {
+  margin: 10px auto 0;
+  display: block;
+  width: 160px;
+  padding: 2px 10px;
+  text-decoration: none; }