diffux_ci 0.5.0 → 0.6.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: d71ccdac8e66bd426e7ddb84f4d09423780606d7
-  data.tar.gz: 0adf694bcf203f34bb8dc87b08e79c596c68d80f
+  metadata.gz: b444d088ff7fdcfd876e26252d4a9180b7e4aa71
+  data.tar.gz: cfd65df089cee0611a3fe98a6555d1275a3285da
 SHA512:
-  metadata.gz: 778314460045c284beeb1eab8446e58c8f95d5619220c2d2c6887ff121b095cb73bbfbd7891055c32c3dc5ff4e2454551447119c2b2aeacfa3c164d81b0d89d0
-  data.tar.gz: 4f242e480d4a70d4aa098b2a1ea29ec0bc8cf32128b952c48e419ec7f8b1e77092b38a50a57e9df23358ca5e92c402cad3afa0c158f46d4e2d48cad00577b041
+  metadata.gz: 3a65d2651905017d4c1a7a032e1483ecfce10c28028c6380ea3a036251d78213dde25e24b7980e001bd7a677288b50eb93f23600ad42535d1869ce48348c0a7f
+  data.tar.gz: 5575fb5c88d9769503a9e8f7d9e796e7e35560dec30f5f064334c6b4332cff989cdee8d887147a77d7bf64a36ec32ac3c62c2250538322c1d6339eca7171d6bf

data/lib/diffux_ci/diff_cluster_finder.rb

@@ -0,0 +1,47 @@
+require 'set'
+module Diffux
+  # This class finds clusters in a diff. A cluster is defined as rows that are
+  # different, and are closer than DIFF_ROW_THRESHOLD pixels to its neighboring
+  # diff row.
+  class DiffClusterFinder
+    MAXIMUM_ADJACENCY_GAP = 5
+
+    # @param number_of_rows [Numeric]
+    def initialize(number_of_rows)
+      @number_of_rows = number_of_rows
+      @rows_with_diff = SortedSet.new
+    end
+
+    # Tell the DiffClusterFinder about a row that is different.
+    #
+    # @param row [Numeric]
+    def row_is_different(row)
+      @rows_with_diff.add row
+    end
+
+    # @return [Float] the percent of rows that are different
+    def percent_of_rows_different
+      @rows_with_diff.length.to_f / @number_of_rows * 100
+    end
+
+    # Calculate clusters from diff-rows that are close to each other.
+    #
+    # @return [Array<Hash>] a list of clusters modeled as hashes:
+    #   `{ start: x, finish: y }`
+    def clusters
+      results = []
+      @rows_with_diff.each do |row|
+        current = results.last
+        if !current || current[:finish] + MAXIMUM_ADJACENCY_GAP < row
+          results << {
+            start:  row,
+            finish: row,
+          }
+        else
+          current[:finish] = row
+        end
+      end
+      results
+    end
+  end
+end

data/lib/diffux_ci/server.rb

@@ -38,6 +38,21 @@ module DiffuxCI
       end
     end
 
+    get '/*' do
+      config = DiffuxCI::Utils.config
+      file = params[:splat].first
+      if File.exist?(file)
+        send_file file
+      else
+        config['public_directories'].each do |pub_dir|
+          filepath = File.join(Dir.pwd, pub_dir, file)
+          if File.exist?(filepath)
+            send_file filepath
+          end
+        end
+      end
+    end
+
     post '/reject' do
       DiffuxCI::Action.new(params[:description], params[:viewport]).reject
       redirect back

data/lib/diffux_ci/snapshot_comparer.rb

@@ -0,0 +1,88 @@
+require 'oily_png'
+require 'diff-lcs'
+require_relative 'diff_cluster_finder'
+
+module DiffuxCI
+  # This class is responsible for comparing two Snapshots and generating a diff.
+  class SnapshotComparer
+    # @param png_before [ChunkyPNG::Image]
+    # @param png_after  [ChunkyPNG::Image]
+    def initialize(png_before, png_after)
+      @png_after  = png_after
+      @png_before = png_before
+    end
+
+    # @return [Hash]
+    def compare!
+      no_diff = {
+        diff_in_percent: 0,
+        diff_image: nil,
+        diff_clusters: []
+      }
+
+      # If these images are totally identical, we don't need to do any more
+      # work.
+      return no_diff if @png_before == @png_after
+
+      array_before = to_array_of_arrays(@png_before)
+      array_after = to_array_of_arrays(@png_after)
+
+      # If the arrays of arrays of colors are identical, we don't need to do any
+      # more work. This might happen if some of the headers are different.
+      return no_diff if array_before == array_after
+
+      sdiff = Diff::LCS.sdiff(array_before, array_after)
+      cluster_finder  = DiffClusterFinder.new(sdiff.size)
+      sprite, all_comparisons = initialize_comparison_images(
+        [@png_after.width, @png_before.width].max, sdiff.size)
+
+      sdiff.each_with_index do |row, y|
+        # each row is a Diff::LCS::ContextChange instance
+        all_comparisons.each { |image| image.render_row(y, row) }
+        cluster_finder.row_is_different(y) unless row.unchanged?
+      end
+
+      percent_changed = cluster_finder.percent_of_rows_different
+      {
+        diff_in_percent: percent_changed,
+        diff_image:      (sprite if percent_changed > 0),
+        diff_clusters:   cluster_finder.clusters,
+      }
+    end
+
+    private
+
+    # @param [ChunkyPNG::Image]
+    # @return [Array<Array<Integer>>]
+    def to_array_of_arrays(chunky_png)
+      array_of_arrays = []
+      chunky_png.height.times do |y|
+        array_of_arrays << chunky_png.row(y)
+      end
+      array_of_arrays
+    end
+
+    # @param canvas [ChunkyPNG::Image] The output image to draw pixels on
+    # @return [Array<SnapshotComparisonImage>]
+    def initialize_comparison_images(width, height)
+      gutter_width = SnapshotComparisonImage::Gutter::WIDTH
+      total_width = (width * 3) + (gutter_width * 3)
+
+      sprite = ChunkyPNG::Image.new(total_width, height)
+      offset, comparison_images = 0, []
+      comparison_images << SnapshotComparisonImage::Gutter.new(offset, sprite)
+      offset += gutter_width
+      comparison_images << SnapshotComparisonImage::Before.new(offset, sprite)
+      offset += width
+      comparison_images << SnapshotComparisonImage::Gutter.new(offset, sprite)
+      offset += gutter_width
+      comparison_images << SnapshotComparisonImage::Overlayed.new(offset, sprite)
+      offset += width
+      comparison_images << SnapshotComparisonImage::Gutter.new(offset, sprite)
+      offset += gutter_width
+      comparison_images << SnapshotComparisonImage::After.new(offset, sprite)
+
+      [sprite, comparison_images]
+    end
+  end
+end

data/lib/diffux_ci/snapshot_comparison_image/after.rb

@@ -0,0 +1,21 @@
+module Diffux
+  module SnapshotComparisonImage
+    # This subclass of `SnapshotComparisonImage` knows how to draw the
+    # representation of the "after" image.
+    class After < SnapshotComparisonImage::Base
+      # @param y [Integer]
+      # @param row [Diff::LCS:ContextChange]
+      def render_changed_row(y, row)
+        render_added_row(y, row)
+      end
+
+      # @param y [Integer]
+      # @param row [Diff::LCS:ContextChange]
+      def render_added_row(y, row)
+        row.new_element.each_with_index do |pixel_after, x|
+          render_pixel(x, y, pixel_after)
+        end
+      end
+    end
+  end
+end

data/lib/diffux_ci/snapshot_comparison_image/base.rb

@@ -0,0 +1,107 @@
+require 'chunky_png'
+module Diffux
+  module SnapshotComparisonImage
+    # This model represents a "comparison image". Basically it's just a wrapper
+    # around a ChunkyPNG image with some nice methods to make life easier in the
+    # world of diffs.
+    #
+    # This model is never persisted.
+    class Base
+      include ChunkyPNG::Color
+
+      BASE_OPACITY    = 0.1
+      BASE_ALPHA      = (255 * BASE_OPACITY).round
+      BASE_DIFF_ALPHA = BASE_ALPHA * 2
+
+      MAGENTA = ChunkyPNG::Color.from_hex '#b33682'
+      RED     = ChunkyPNG::Color.from_hex '#dc322f'
+      GREEN   = ChunkyPNG::Color.from_hex '#859900'
+
+      # @param offset [Integer] the x-offset that this comparison image should
+      #   use when rendering on the canvas image.
+      # @param canvas [ChunkyPNG::Image] The canvas image to render pixels on.
+      def initialize(offset, canvas)
+        @offset = offset
+        @canvas = canvas
+      end
+
+      # @param y [Integer]
+      # @param row [Diff::LCS:ContextChange]
+      def render_row(y, row)
+        if row.unchanged?
+          render_unchanged_row(y, row)
+        elsif row.deleting?
+          render_deleted_row(y, row)
+        elsif row.adding?
+          render_added_row(y, row)
+        else # changing?
+          render_changed_row(y, row)
+        end
+      end
+
+      # @param y [Integer]
+      # @param row [Diff::LCS:ContextChange]
+      def render_unchanged_row(y, row)
+        row.new_element.each_with_index do |pixel, x|
+          # Render the unchanged pixel as-is
+          render_pixel(x, y, pixel)
+        end
+      end
+
+      # @param y [Integer]
+      # @param row [Diff::LCS:ContextChange]
+      def render_changed_row(y, row)
+        # no default implementation
+      end
+
+      # @param y [Integer]
+      # @param row [Diff::LCS:ContextChange]
+      def render_added_row(y, row)
+        # no default implementation
+      end
+
+      # @param y [Integer]
+      # @param row [Diff::LCS:ContextChange]
+      def render_deleted_row(y, row)
+        # no default implementation
+      end
+
+      # Compute a score that represents the difference between 2 pixels
+      #
+      # This method simply takes the Euclidean distance between the RGBA channels
+      # of 2 colors over the maximum possible Euclidean distance. This gives us a
+      # percentage of how different the two colors are.
+      #
+      # Although it would be more perceptually accurate to calculate a proper
+      # Delta E in Lab colorspace, we probably don't need perceptual accuracy for
+      # this application, and it is nice to avoid the overhead of converting RGBA
+      # to Lab.
+      #
+      # @param pixel_after [Integer]
+      # @param pixel_before [Integer]
+      # @return [Float] number between 0 and 1 where 1 is completely different
+      #   and 0 is no difference
+      def pixel_diff_score(pixel_after, pixel_before)
+        ChunkyPNG::Color::euclidean_distance_rgba(pixel_after, pixel_before) /
+          ChunkyPNG::Color::MAX_EUCLIDEAN_DISTANCE_RGBA
+      end
+
+      # @param diff_score [Float]
+      # @return [Integer] a number between 0 and 255 that represents the alpha
+      #   channel of of the difference
+      def diff_alpha(diff_score)
+        (BASE_DIFF_ALPHA + ((255 - BASE_DIFF_ALPHA) * diff_score)).round
+      end
+
+      # Renders a pixel on the specified x and y position. Uses the offset that
+      # the comparison image has been configured with.
+      #
+      # @param x [Integer]
+      # @param y [Integer]
+      # @param pixel [Integer]
+      def render_pixel(x, y, pixel)
+        @canvas.set_pixel(x + @offset, y, pixel)
+      end
+    end
+  end
+end

data/lib/diffux_ci/snapshot_comparison_image/before.rb

@@ -0,0 +1,21 @@
+module Diffux
+  module SnapshotComparisonImage
+    # This subclass of `SnapshotComparisonImage` knows how to draw the
+    # representation of the "before" image.
+    class Before < SnapshotComparisonImage::Base
+      # @param y [Integer]
+      # @param row [Diff::LCS:ContextChange]
+      def render_changed_row(y, row)
+        render_deleted_row(y, row)
+      end
+
+      # @param y [Integer]
+      # @param row [Diff::LCS:ContextChange]
+      def render_deleted_row(y, row)
+        row.old_element.each_with_index do |pixel_before, x|
+          render_pixel(x, y, pixel_before)
+        end
+      end
+    end
+  end
+end

data/lib/diffux_ci/snapshot_comparison_image/gutter.rb

@@ -0,0 +1,34 @@
+module Diffux
+  module SnapshotComparisonImage
+    # This class renders a gutter-column with a color representing the type of
+    # change that has happened.
+    class Gutter < SnapshotComparisonImage::Base
+      WIDTH = 10
+      GRAY  = ChunkyPNG::Color.from_hex '#cccccc'
+
+      def render_row(y, row)
+        WIDTH.times do |x|
+          render_pixel(x, y, gutter_color(row))
+        end
+        # render a two-pixel empty column
+        2.times do |x|
+          render_pixel(WIDTH - 1 - x, y, WHITE)
+        end
+      end
+
+      private
+
+      def gutter_color(row)
+        if row.unchanged?
+          WHITE
+        elsif row.deleting?
+          RED
+        elsif row.adding?
+          GREEN
+        else # changed?
+          GRAY
+        end
+      end
+    end
+  end
+end

data/lib/diffux_ci/snapshot_comparison_image/overlayed.rb

@@ -0,0 +1,88 @@
+module Diffux
+  module SnapshotComparisonImage
+    # This subclass of `SnapshotComparisonImage` knows how to overlay the
+    # after-image on top of the before-image, and render the difference in a
+    # scaled magenta color.
+    class Overlayed < SnapshotComparisonImage::Base
+      WHITE_OVERLAY = ChunkyPNG::Color.fade(WHITE, 1 - BASE_ALPHA)
+
+      # @param offset [Integer]
+      # @param canvas [ChunkyPNG::Image]
+      # @see SnapshotComparisonImage::Base
+      def initialize(offset, canvas)
+        @diff_pixels  = {}
+        @faded_pixels = {}
+        super
+      end
+
+      # @param y [Integer]
+      # @param row [Diff::LCS:ContextChange]
+      def render_unchanged_row(y, row)
+        # Render translucent original pixels
+        row.new_element.each_with_index do |pixel, x|
+          render_faded_pixel(x, y, pixel)
+        end
+      end
+
+      # @param y [Integer]
+      # @param row [Diff::LCS:ContextChange]
+      def render_deleted_row(y, row)
+        row.old_element.each_with_index do |pixel_before, x|
+          render_faded_magenta_pixel(TRANSPARENT, pixel_before, x, y)
+        end
+      end
+
+      # @param y [Integer]
+      # @param row [Diff::LCS:ContextChange]
+      def render_added_row(y, row)
+        row.new_element.each_with_index do |pixel_after, x|
+          render_faded_magenta_pixel(pixel_after, TRANSPARENT, x, y)
+        end
+      end
+
+      # @param y [Integer]
+      # @param row [Diff::LCS:ContextChange]
+      def render_changed_row(y, row)
+        row.old_element.zip(row.new_element).each_with_index do |pixels, x|
+          pixel_before, pixel_after = pixels
+          render_faded_magenta_pixel(
+            pixel_after  || TRANSPARENT,
+            pixel_before || TRANSPARENT,
+            x, y)
+        end
+      end
+
+      private
+
+      # @param pixel_after [Integer]
+      # @param pixel_before [Integer]
+      # @param x [Integer]
+      # @param y [Integer]
+      def render_faded_magenta_pixel(pixel_after, pixel_before, x, y)
+        score = pixel_diff_score(pixel_after, pixel_before)
+        if score > 0
+          render_diff_pixel(x, y, score)
+        else
+          render_faded_pixel(x, y, pixel_after)
+        end
+      end
+
+      # @param x [Integer]
+      # @param y [Integer]
+      # @param score [Float]
+      def render_diff_pixel(x, y, score)
+        @diff_pixels[score] ||= compose_quick(fade(MAGENTA, diff_alpha(score)),
+                                              WHITE)
+        render_pixel(x, y, @diff_pixels[score])
+      end
+
+      # @param x [Integer]
+      # @param y [Integer]
+      # @param pixel [Integer]
+      def render_faded_pixel(x, y, pixel)
+        @faded_pixels[pixel] ||= compose_quick(WHITE_OVERLAY, pixel)
+        render_pixel(x, y, @faded_pixels[pixel])
+      end
+    end
+  end
+end

data/lib/diffux_ci/utils.rb

@@ -10,6 +10,7 @@ module DiffuxCI
         'snapshots_folder' => './snapshots',
         'source_files' => [],
         'stylesheets' => [],
+        'public_directories' => [],
         'port' => 4567,
         'driver' => :firefox,
         'viewports' => {
@@ -35,7 +36,7 @@ module DiffuxCI
     end
 
     def self.normalize_description(description)
-      Base64.encode64(description).strip
+      Base64.strict_encode64(description).strip
     end
 
     def self.path_to(description, viewport_name, file_name)

data/lib/diffux_ci/version.rb

@@ -1,4 +1,4 @@
 # Defines the gem version.
 module DiffuxCI
-  VERSION = '0.5.0'
+  VERSION = '0.6.0'
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: diffux_ci
 version: !ruby/object:Gem::Version
-  version: 0.5.0
+  version: 0.6.0
 platform: ruby
 authors:
 - Henric Trotzig
@@ -137,12 +137,19 @@ files:
 - bin/diffux
 - lib/diffux_ci.rb
 - lib/diffux_ci/action.rb
+- lib/diffux_ci/diff_cluster_finder.rb
 - lib/diffux_ci/diffs.html.erb
 - lib/diffux_ci/logger.rb
 - lib/diffux_ci/public/diffux_ci-runner.js
 - lib/diffux_ci/public/diffux_ci-styles.css
 - lib/diffux_ci/runner.rb
 - lib/diffux_ci/server.rb
+- lib/diffux_ci/snapshot_comparer.rb
+- lib/diffux_ci/snapshot_comparison_image/after.rb
+- lib/diffux_ci/snapshot_comparison_image/base.rb
+- lib/diffux_ci/snapshot_comparison_image/before.rb
+- lib/diffux_ci/snapshot_comparison_image/gutter.rb
+- lib/diffux_ci/snapshot_comparison_image/overlayed.rb
 - lib/diffux_ci/uploader.rb
 - lib/diffux_ci/utils.rb
 - lib/diffux_ci/version.rb