caravaggio 0.0.12

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 2c0d90d2672df3cc81691479e1e52a1e7f1deb48
+  data.tar.gz: f1d87ce1735d6344c04b587cdc07694160e525c5
+SHA512:
+  metadata.gz: ecabd7b1cb1e8b0ce714189c935f76a5fc39427977cdfeb1e6c8f971f4e5ec5995b8564361c9f454f007f711daae95b835afda6f67edd486b1b4e8630a6a6268
+  data.tar.gz: e15e0217418f1089ad832348c7a5c61874292df4153c65b65145c85d03a239bf8053a0186ef24bda103dd7e35df4342a92893f31f46d98761d0b20698fe59db7

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright 2021 jdzik
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/Rakefile

@@ -0,0 +1,37 @@
+begin
+  require 'bundler/setup'
+rescue LoadError
+  puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
+end
+
+require 'rdoc/task'
+
+RDoc::Task.new(:rdoc) do |rdoc|
+  rdoc.rdoc_dir = 'rdoc'
+  rdoc.title    = 'Caravaggio'
+  rdoc.options << '--line-numbers'
+  rdoc.rdoc_files.include('README.rdoc')
+  rdoc.rdoc_files.include('lib/**/*.rb')
+end
+
+APP_RAKEFILE = File.expand_path("../test/dummy/Rakefile", __FILE__)
+load 'rails/tasks/engine.rake'
+
+
+load 'rails/tasks/statistics.rake'
+
+
+
+Bundler::GemHelper.install_tasks
+
+require 'rake/testtask'
+
+Rake::TestTask.new(:test) do |t|
+  t.libs << 'lib'
+  t.libs << 'test'
+  t.pattern = 'test/**/*_test.rb'
+  t.verbose = false
+end
+
+
+task default: :test

data/app/assets/javascripts/caravaggio/application.js

@@ -0,0 +1,14 @@
+// This is a manifest file that'll be compiled into application.js, which will include all the files
+// listed below.
+//
+// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
+// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
+//
+// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
+// compiled file.
+//
+// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
+// about supported directives.
+//
+//= require_directory .
+//= require caravaggio_d3/caravaggio_d3.min

data/app/assets/javascripts/caravaggio/caravaggio.js

@@ -0,0 +1,265 @@
+function initializeCaravaggio() {
+  setAllModelChecked(false);
+  connectAssociations();
+  displayModels();
+}
+
+
+function displayModels() {
+  // clear out the playing field
+  clearModelLocations();
+  d3.select("svg").remove();  
+  var svg = d3.select('#canvas').append("svg").attr("width", 1000).attr("height", 1000)
+  
+  var defs = svg.append('svg:defs');
+  
+  createMarker(defs, "belongs_to", "red");
+  createMarker(defs, "has_one", "blue");
+  createMarker(defs, "has_many", "green");
+  createMarker(defs, "has_and_belongs_to_many", "orange");
+  
+  // apply forces
+  var linkForce = d3.forceLink();
+  var selectedModels = displayedModels();
+  var targetModels = expandModels(selectedModels);
+  var associationLinks = displayedAssociations(selectedModels, targetModels);
+  var collisionRadius = 200 / associationLinks.length;
+  if(collisionRadius < 8)
+    collisionRadius = 8;
+  
+  var simulation = d3.forceSimulation()
+    .force("charge", d3.forceManyBody().strength(-40))
+    .force("center", d3.forceCenter().x(500).y(500))
+    .force('collision', d3.forceCollide().radius(collisionRadius))
+    .force("centerSelected", isolate(d3.forceCenter().x(500).y(500), function(d) { return d.checked }))
+    .force("link", linkForce)
+    .nodes(targetModels)
+    .on("tick", updateNetwork);
+  
+  // add lines for all associations
+  svg.selectAll("line.association")
+    .data(associationLinks, d => `${d.source}-${d.target}`)
+    .enter()
+    .append("line")
+    .attr("class", d => "association " + d.association_type)
+    .attr("marker-end", d => "url(#" + d.association_type + "-arrowhead)")
+    .attr("onclick", d => "exhibitAssociation(" + d.index + ")");
+  
+  // add labelled circles for all models
+  var modelDisplay = svg
+    .selectAll("g.model")
+    .data(targetModels, d => d.id)
+    .enter()
+    .append("g")
+    .attr("class", "model");
+  modelDisplay.append("circle")
+    .attr("r", d => d.checked ? 8 : 5)
+    .attr("onclick", d => "clickCircle('" + d.id + "')")
+    .style("fill", d => d.checked ? "red" : "blue");
+  modelDisplay.append("text")
+    .style("text-anchor", "middle")
+    .attr("y", 15)
+    .text(d => d["short_name"])
+}
+
+function createMarker(defs, name, color) {
+  return defs.append("marker")
+    .attr('id', name + '-arrowhead')
+    .attr('markerHeight', 15)
+    .attr('markerWidth', 15)
+    .attr('orient', 'auto-start-reverse')
+    .attr('refX', 15)
+    .attr('refY',8)
+    .attr('viewBox', '0 0 15 15')
+    .append('svg:path')
+    .attr('d', 'M 0 0 L 15 8 L 0 15 z')
+    .attr('class', function(d,i) { i.association_type})
+    .attr("fill", color);
+}
+
+function isolate(force, filter) {
+  var initialize = force.initialize;
+  force.initialize = function() { initialize.call(force, models.filter(filter)); };
+  return force;
+}
+
+function clickCircle(modelId) {
+  model = findModel(modelId);
+  model.checked = !model.checked;
+  d3.select("input#" + model.friendly_name).property('checked', model.checked);
+  if(model.checked) {
+    exhibitFigure(model);
+  }
+  displayModels();
+}
+
+
+function updateNetwork() {
+  d3.selectAll("line.association")
+    .attr("x1", d => d.sourceModel.x)
+    .attr("x2", d => d.targetModel.x)
+    .attr("y1", d => d.sourceModel.y)
+    .attr("y2", d => d.targetModel.y)
+  d3.selectAll("g.model")
+    .attr("transform", d => `translate(${d.x},${d.y})`);
+}
+
+function connectAssociations() {
+  associations.forEach(association => {
+    association.sourceModel = findModel(association["source"]);
+    association.targetModel = findModel(association["target"]);
+  });
+  
+  associations = associations.filter(association => !((typeof(association.sourceModel) === 'undefined') || (typeof(association.targetModel) === 'undefined')))
+}
+
+function displayedAssociations(models, associatedModels) {
+  var modelIds = models.map(model => model.id);
+  var associatedModelIds = associatedModels.map(model => model.id);
+  
+  selectedAssociations = [];
+  
+  if(displayLinksFrom()) {
+    selectedAssociations = selectedAssociations.concat(linkedAssociations(modelIds, associatedModelIds));
+  }
+  if(displayLinksTo()) {
+    selectedAssociations = selectedAssociations.concat(linkedAssociations(associatedModelIds, modelIds));
+  }
+  return selectedAssociations;
+}
+
+function linkedAssociations(fromIds, toIds) {
+  var results = associations.filter(association => associationMatches(association, fromIds, toIds))
+  
+  results = results.sort((a1, a2) => {
+    if(a1.association_type > a2.association_type) {
+      return -1;
+    } else if (a2.association_type > a1.association_type) {
+      return 1;
+    } else {
+      return 0;
+    }
+  });
+  
+  return results;
+}
+
+function debugResults(label, results) {
+  console.log("RESULTS: " + label);
+  for(var i = 0; i < results.length; ++i) {
+    console.log("   " + results[i].association_type + " " + results[i].source + " -> " + results[i].target);
+  }
+}
+
+function associationMatches(association, fromIds, toIds) {
+  return (!fromIds || fromIds.includes(association.source)) && (!toIds || toIds.includes(association.target));
+}
+
+// For the list of models to display, find all models plus models they have associations to
+function displayedModels() {
+  return models.filter(model => model.checked);
+}
+
+function exhibitFigure(model) {
+  hideExhibits();
+  d3.select("#figure-" + model.friendly_name).classed("hidden", false);
+  document.getElementById("exhibit").scrollTop = 0;
+}
+
+function exhibitAssociation(associationIndex) {
+  hideExhibits();
+  d3.select("#association-" + associationIndex).classed("hidden", false);
+  document.getElementById("exhibit").scrollTop = 0;
+}
+
+function hideExhibits() {
+  d3.selectAll("div.detailed-content").classed("hidden", true);
+}
+
+function expandModels(coreModels) {
+  expandedModels = [...coreModels];
+  
+  if(!displayCheckedOnly()) {
+    var coreModelIds = coreModels.map(model => model.id)
+    var addedSet = new Set();
+  
+    if(displayLinksFrom()) {
+      var associations = linkedAssociations(coreModelIds, null);
+      for(var i = 0; i < associations.length; ++i) {
+        addedSet.add(associations[i].target);
+      }
+    }
+  
+    if(displayLinksTo()) {
+      var associations = linkedAssociations(null, coreModelIds);
+      for(var i = 0; i < associations.length; ++i) {
+        addedSet.add(associations[i].source);
+      }
+    }
+  
+    addedSet.forEach(addition => {
+      if(!coreModelIds.includes(addition)) {
+        var newModel = findModel(addition);
+        if(typeof(newModel) !== "undefined")
+          expandedModels.push(findModel(addition));
+      }
+    });
+  }
+
+  return expandedModels;
+}
+
+function displayLinksTo() {
+  return document.getElementById("links_to").checked;
+}
+
+function displayLinksFrom() {
+  return document.getElementById("links_from").checked;
+}
+
+function displayCheckedOnly() {
+  return document.getElementById("only_checked").checked;
+}
+
+function setAllModels(cb) {
+  checked = cb.checked;
+  checkboxes = document.getElementsByClassName("model-checkbox");
+  for(var i = 0; i < checkboxes.length; ++i) {
+    checkboxes[i].checked = checked;
+  }
+  setAllModelChecked(checked);
+  
+  displayModels();
+}
+
+function setModel(cb) {
+  if(!(typeof(model = findModel(cb.dataset.className)) === 'undefined')) {
+    model.checked = cb.checked;
+    if(model.checked) {
+      exhibitFigure(model);
+    }
+  }
+
+  displayModels();
+}
+
+function findModel(id) {
+  return models.find(model => model["id"] === id);
+}
+
+function setAllModelChecked(checked) {
+  for(i = 0; i < models.length; ++i) {
+    models[i].checked = checked;
+  }
+}
+
+// move all model to a random point near the center.
+// It can't be in the center, because putting them all exactly in the center has
+// unfortunate side-effects if there are too many.
+function clearModelLocations() {
+  for(i = 0; i < models.length; ++i) {
+    models[i].x = 400 + Math.random() * 200;
+    models[i].y = 500 + Math.random() * 200;
+  }
+}
+

data/app/assets/stylesheets/caravaggio/application.css

@@ -0,0 +1,15 @@
+/*
+ * 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
+ */

data/app/assets/stylesheets/caravaggio/caravaggio.css

@@ -0,0 +1,90 @@
+html {
+    height: 100%;
+}
+body {
+    height: 100%;
+    margin: 0;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    background-image: linear-gradient(#93a9fc, #ccc);
+}
+
+.color-key {
+  background: #fff;
+  border: 3px solid #414652;
+}
+svg {
+  background: #fff;
+}
+
+h1 {
+  text-align: center;
+  padding: 10px 0px;
+}
+
+h2, h3 {
+  text-align: center;
+}
+
+div.sidebar {
+  float: left;
+  padding: 0px 3px;
+  height: 85vh;
+  min-height: 85vh;
+  overflow-y: scroll;
+}
+
+div.left-sidebar {
+  width: 15%;
+}
+
+div.right-sidebar {
+  width: 18%;
+}
+
+ul {
+  list-style-type: none;
+  padding-left: 5px;
+}
+
+li {
+  margin-left: 2em; 
+  text-indent: -2em;
+}
+
+div#canvas {
+  border: 5px solid #414652;
+  max-width: 65%;
+  float: left;
+  height: 85vh;
+  min-height: 85vh;
+  overflow: scroll;
+}
+
+.belongs_to {
+  stroke: red;
+  color: red;
+  fill: red;
+}
+
+.has_many {
+  stroke: green;
+  color: green;
+  fill: green;
+}
+
+.has_one {
+  stroke: blue;
+  color: blue;
+  fill: blue;
+}
+
+.has_and_belongs_to_many {
+  stroke: orange;
+  color: orange;
+  fill: orange;
+}
+
+.hidden {
+  display: none;
+}