mindmap 0.1.0 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d48f12770e8cd94db047051cd34ef88e0f8034566cb6807baefd3e482992df4d
-  data.tar.gz: 7db3a47094521a723d4fb86626800b041160a4a1f662646354bfe12da1aac64b
+  metadata.gz: 8f9a87d885abe2676d51729bab2736a048eb05d8d6e263206438f559290a7544
+  data.tar.gz: f1ae3a3becb5c9427f6dbd6c73ecc52bf7f6e591f87896f1ca009a6b0a9a3081
 SHA512:
-  metadata.gz: 6ca4ae555fad394b6450ff6e8cbc20902dda34e500d768388aff67cb38ada04695aebd8351a18ec304bc125ae2fce07678b1afde9a2764f8b655c641f2697667
-  data.tar.gz: dab7e80341f957a989d3e64dae687db8677164bb1767cc8e141deddc002cf810f6f4f32f2031aa6a9c8763d6b8d9b7de1858166bbbc05cc0681b64f9ccce2552
+  metadata.gz: 2320b9755f841d51c777981f73c0ed7abc67359341a95f7ea23759d151c912dcfaeeb59c881671f2d6961c05ae3940d7e9108e41b3f978994ed7b415145ac7c5
+  data.tar.gz: a357c59789fd329e2f299083fe8f31e86e9e10ddca9700223d7c2cf8d5fd34dbc08d99841690777cad986ca78782313ee2c45fba2311d998048753c6a2589e29

data/README.md

@@ -1,19 +1,26 @@
-# Mindmap
+# Mindmap (Work In Progress)
+
+[![Gem Version](https://badge.fury.io/rb/mindmap.svg)](https://badge.fury.io/rb/mindmap)
 
 Mindmap is a tiny framework to render and browser a graph like structure,
 assuming you have set of simple classes that are related to each other.
 
-# Rational
+The following is the example project to browse file system, generated when issuing
+"mindmap new" command, and contains 2 nodes (File, Directory)
+
+[![file system browser](https://i.imgur.com/6ZVIN0x.gif)](https://imgur.com/a/tA7iCtp)
+
+# Rationale
 
 It started with another project I'm working on called
-[rubrowser](https://github.com/emad-elsaid/rubrowser) it statically analyse your
+[rubrowser](https://github.com/emad-elsaid/rubrowser) it statically analyze your
 ruby code and visualize it in a graph, I thought that this kind of data
 (tree/graph like) is everywhere, like my servers, that I can see files,
 processes and other open sockets on it, through it I can open another server in
 my network, browse through it, open a process there...and so on.
 
-Or Imagine how many times you went to wikipedia and you found yourself on a page
-and you can't remember what makes you land here after couple hours of reading.
+Or Imagine how many times you went to Wikipedia and you found yourself on a page
+and you can't remember what made you land here after couple hours of reading.
 
 so I wanted a setup that does the following:
 
@@ -23,12 +30,12 @@ so I wanted a setup that does the following:
   get back and take another path
 * it should be as simple as possible to generate new graph project and put my
   files in it.
-* I wanted to have ready made views, and the ability to override them and define
-  my own views.
+* I wanted to have ready made layouts, and the ability to override them and define
+  my own layouts.
 
 At first I thought of D3 and visualizing these nodes and make it interactive,
 but I had to discard this idea as visualizing nodes in different forms will be
-extermily hard for users, not to mention the graph will be very crowded.
+extremely hard for users, not to mention the graph will be very crowded.
 
 So I settled on a page that renders the root node children first, then when you
 try to open a node, I append children to the page and the path goes on
@@ -57,8 +64,7 @@ example/
 │   ├── directory_node.rb
 │   ├── file_node.rb
 │   └── root_node.rb
-├── public
-└── views
+└── public
 
 3 directories, 5 files
 ```
@@ -71,22 +77,25 @@ the project contains an example nodes to browse the file system content, you can
 start the server and open `http://localhost:9292` in your browser to see it in
 action.
 
+a tutorial could be found in the wiki [here](https://github.com/emad-elsaid/mindmap/wiki/Mindmap-tutorial-(file-system-browser))
+
 ## Project structure
 
 * config.ru : a rack config file that starts mindmap application and serves
   files from the public directory in both the gem and your project, with your
   project public directory having precedence, so any file you put there will
   override the library file.
-* Gemfile : the project has only one direct depedency `mindmap`
+* Gemfile : the project has only one direct dependency `mindmap`
 * nodes : a directory that has your classes that needs to be visualized, by
-  default it contains classes that visualize the file system.
+  default it contains classes that visualize the file system, it also holds the
+  views for these classes in `class_name.html.erb` format or other formats
+  wanted like `class_name.json.erb` or similar
 * public : the public directory, you can serve any files from there
-* views : that directory will hold your custom node views, if you'll use the
-  library views then you don't need that directory
+  css framework in your views as they're loaded by default.
 
 ## How to write your Nodes
 
-the `ndoes` directory holds your nodes, they're all loaded by default when
+the `nodes` directory holds your nodes, they're all loaded by default when
 starting the mindmap server, the following is a commented example for a node class
 
 ```ruby
@@ -106,12 +115,6 @@ class DirectoryNode
     File.basename(path)
   end
 
-  # children_title is the title that will be displayed on this
-  # node children container when opened
-  def children_title
-    path
-  end
-
   # it must return an array of other nodes that this node is related to
   def children
     Dir
@@ -121,15 +124,6 @@ class DirectoryNode
       .map { |file| child(File.expand_path(file, path)) }
   end
 
-  # returns the view ERB file name to render this node
-  # if you didn't define this method the default value will be
-  # the class name underscored, so a DirectoryNode class
-  # will be rendered using `directory_node.html.erb` template
-  # here we use a library view called tag
-  def view
-    :tag
-  end
-
   private
 
   def child(file_path)
@@ -140,7 +134,7 @@ class DirectoryNode
 end
 ```
 
-# How it works?
+## How it works?
 
 when you start the mindmap server, it loads all library code then loads the
 project nodes, it serves files from library public and project public
@@ -152,14 +146,14 @@ an empty page that load jquery and bulma css framework and
 
 `index.js` is what does the interaction part of the page, it request the `root`
 node, so your `nodes` directory must contain that class, mindmap will handle the
-request, creating `RootNode` object givving it all `parameters` sent with the
+request, creating `RootNode` object giving it all `parameters` sent with the
 request as a hash, `Mindmap::Node#initializer` will assign any key value to the
 object if the `key=` method is public, then mindmap will call the node children.
 
 for every child we'll render it and return the result to the page, the page will
 append the response, then wait until you click on any link that refer to a local
-page, whe you do it'll handle the request, will request the link content with
-ajax sending the `data-params` of the link as parameters to the ajax POST
+page, when you do it'll handle the request, will request the link content with
+Ajax sending the `data-params` of the link as parameters to the Ajax POST
 request.
 
 mindmap will know the node from the page, for example requesting `/file` will
@@ -167,37 +161,47 @@ signal mindmap to create a `FileNode` object with the passed arguments,
 `/directory/specific_dir` will create a `Directory::SpecificDir` object...etc
 
 
-# How rendering nodes works
+## How rendering nodes works
 
 the renderer will get the view name by calling `view` method, then search for a
-file first in the project views directory then in the library directory, when
+file in the project nodes directory, when
 found it'll be rendered as an ERB template with the node as a bounding context,
 so any method called in the view will be executed from the node.
 
-# How to form links in your views
+## How to form links in your views
 
-any link that points to a URL that starts with '/' is concidered an AJAX link
-and mindmap javascript will call the URL with a post request passing the
+any link that points to a URL that starts with '/' is considered an AJAX link
+and mindmap JavaScript will call the URL with a post request passing the
 `data-params` attribute as parameters in the request, so it's a good idea that
 you set some hash there that when gets assigned to the object it'll tell him
 what to do, an ID in most cases, or for our example nodes the file path, for
 others maybe UUID, by default the views will serialize the object as JSON and
 put it in the attribute, you can be selective with your views implementation if
-you wish, also `data-children-title` attribute is used by the mindmap javascript
+you wish, also `data-children-title` attribute is used by the mindmap JavaScript
 to use it as a title for the response when appended to the page, it's a good
 idea to print the node `children_title` in it.
 
-The example nodes are really simple and can give you some help in understanding
-how it works.
-
-# Root Node
+## Root Node
 
 every graph must have an entry point, `RootNode` is our entry point, this nodes
 doesn't have to have any views, an object is created from that class when the
 page loads, and the children will be called an rendered, so the node itself
-doesn't have to do anything but implmenting `children` method returning an array
+doesn't have to do anything but implementing `children` method returning an array
 of nodes to start with.
 
+## Hot code reload
+
+Mindmap doesn't have a hot reload feature, so if you want to change your code
+then see the changes without restarting your server manually you can use
+[reflex](https://github.com/cespare/reflex) or any other tool that executes a
+command on files change, with reflex you can use this command
+
+    $ reflex -s rackup
+
+or
+
+    $ reflex -s mindmap server
+
 ## Contributing
 
 Bug reports and pull requests are welcome on GitHub at https://github.com/emad-elsaid/mindmap.

data/example/nodes/directory_node.html.erb

@@ -0,0 +1,13 @@
+<div class="content is-inline-block">
+  <div class="tags has-addons">
+
+    <span class="tag is-dark is-medium">
+      <%= name %>
+    </span>
+
+    <a href="<%= url %>" class="tag is-link is-medium" data-params="<%= html_escape(to_json) %>" data-children-title="<%= name %>">
+      <i class="fas fa-folder"></i>
+    </a>
+
+  </div>
+</div>

data/example/nodes/directory_node.rb

@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 class DirectoryNode
   include Mindmap::Node
 
@@ -7,10 +9,6 @@ class DirectoryNode
     File.basename(path)
   end
 
-  def children_title
-    path
-  end
-
   def children
     Dir
       .entries(path)
@@ -19,10 +17,6 @@ class DirectoryNode
       .map { |file| child(File.expand_path(file, path)) }
   end
 
-  def view
-    :tag
-  end
-
   private
 
   def child(file_path)

data/example/nodes/file_node.html.erb

@@ -0,0 +1,9 @@
+<div class="content is-inline-block">
+  <div class="tags has-addons">
+
+    <span class="tag is-dark is-medium">
+      <%= name %>
+    </span>
+
+  </div>
+</div>

data/example/nodes/file_node.rb

@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 class FileNode
   include Mindmap::Node
 
@@ -6,8 +8,4 @@ class FileNode
   def name
     File.basename(path)
   end
-
-  def view
-    :tag
-  end
 end

data/example/nodes/root_node.rb

@@ -1,5 +1,9 @@
-class RootNode < DirectoryNode
-  def initialize(*)
-    super(path: '/')
+# frozen_string_literal: true
+
+class RootNode
+  include Mindmap::Node
+
+  def children
+    [DirectoryNode.new(path: '/')]
   end
 end

data/lib/mindmap.rb

@@ -1,20 +1,38 @@
+# frozen_string_literal: true
+
 require 'active_support/all'
+require 'rack'
 
 Dir[File.expand_path('./mindmap/**/*.rb', __dir__)].each { |fl| require fl }
 Dir[File.expand_path('./nodes/**/*.rb', Dir.pwd)].each { |fl| require fl }
 
 module Mindmap
-  def self.application
+  def self.application(config = {})
     apps = []
 
-    apps.unshift Application.new
-    apps.unshift Rack::Static.new(apps.first, urls: [''], root: File.expand_path('../public', __dir__), index: 'index.html')
-
+    app_config = Config.new(config)
+    apps.unshift Application.new(app_config)
+    lib_public = File.expand_path('../public', __dir__)
+    apps.unshift(
+      Rack::Static.new(
+        apps.first,
+        urls: [''],
+        root: lib_public,
+        index: app_config.index
+      )
+    )
 
-    project_public = File.expand_path('./public', Dir.pwd)
+    local_public = File.expand_path('./public', Dir.pwd)
 
-    if File.exist?(project_public)
-      apps.unshift Rack::Static.new(apps.first, urls: [''], root: project_public, index: 'index.html')
+    if File.exist?(local_public)
+      apps.unshift(
+        Rack::Static.new(
+          apps.first,
+          urls: [''],
+          root: local_public,
+          index: app_config.index
+        )
+      )
     end
 
     Rack::Cascade.new(apps)

data/lib/mindmap/application.rb

@@ -1,28 +1,19 @@
+# frozen_string_literal: true
+
 require 'json'
 
 module Mindmap
   class Application
-    def call(env)
-      request = Rack::Request.new(env)
+    def initialize(config)
+      @config = config
+    end
 
-      [200, headers, [render_page(request)]]
+    def call(env)
+      Request.new(env).response
     end
 
     private
 
-    def render_page(request)
-      node_name = request.path.camelize + 'Node'
-      node_klass = node_name.constantize
-
-      params = request.params.with_indifferent_access
-      node = node_klass.new(params)
-      node.children.map(&:render).join
-    end
-
-    def headers
-      {
-        'Content-Type' => 'text/html;charset=utf-8'
-      }
-    end
+    attr_accessor :config
   end
 end

data/lib/mindmap/cli.rb

@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 require 'thor'
 require 'fileutils'
 

data/lib/mindmap/config.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module Mindmap
+  # hold the configuration for an application
+  class Config
+    def initialize(config)
+      @config = config
+    end
+
+    def index
+      layouts.first
+    end
+
+    def layouts
+      config.fetch(:layouts, default_layouts)
+    end
+
+    private
+
+    attr_accessor :config
+
+    def default_layouts
+      ['endless_scroll.html']
+    end
+  end
+end

data/lib/mindmap/node.rb

@@ -1,7 +1,9 @@
+# frozen_string_literal: true
+
 require 'erb'
 
 module Mindmap
-  # a module that must be encluded to any graph node
+  # a module that must be included to any graph node
   # it has methods needed by the framework to render the node
   module Node
     include ERB::Util
@@ -10,25 +12,28 @@ module Mindmap
       assign_params(params)
     end
 
-    # assign a hash values to params with the same name
+    # assign a hash values to attributes with the same name
     def assign_params(params)
       params.each do |key, value|
-        public_send("#{key}=", value) if self.class.public_method_defined?("#{key}=")
+        if self.class.public_method_defined?("#{key}=")
+          public_send("#{key}=", value)
+        end
       end
     end
 
     # renders the node ERB view file and returns the result
-    def render
-      Renderer.render(view, binding)
+    def render(format = :html)
+      Renderer.render("#{view}.#{format}", binding)
     end
 
-    # The path to the view file relative to the "views" directory
+    # The path to the view file relative to the "nodes" directory
     # by default the file is the class name underscored e.g
     # if node class is `Graph::NodeName` it returns `graph/node_name`
     def view
       self.class.name.underscore
     end
 
+    # returns the node url that could be used for a link
     def url
       '/' + self.class.name.underscore.gsub('_node', '')
     end

data/lib/mindmap/renderer.rb

@@ -1,33 +1,43 @@
+# frozen_string_literal: true
+
 require 'erb'
 
 module Mindmap
   # Renders a view file from either the library views
   # or the project views with a binding
   class Renderer
-    class << self
-      def render(view, binding)
-        erb(view).result(binding)
-      end
-
-      private
-
-      def erb(view)
-        @erb ||= {}
-        @erb[view] ||= ERB.new(view_content(view))
-      end
-
-      def view_content(view)
-        view_path = view_paths(view).find { |file| File.exist?(file) }
-        raise(StandardError, "#{view} view file not found") unless view_path
-        File.read(view_path)
-      end
-
-      def view_paths(view)
-        [
-          File.expand_path("./views/#{view}.html.erb", Dir.pwd),
-          File.expand_path("../../views/#{view}.html.erb", __dir__)
-        ]
-      end
+    def self.render(view, binding)
+      renderer_instance(view).render(binding)
+    end
+
+    def self.renderer_instance(view)
+      @renderers ||= {}
+      @renderers[view] ||= new(view)
+    end
+
+    def initialize(view)
+      @view = view
+    end
+
+    def render(binding)
+      erb.result(binding)
+    end
+
+    private
+
+    attr_reader :view
+
+    def erb
+      @erb ||= ERB.new(view_content)
+    end
+
+    def view_content
+      raise(StandardError, "#{view} not found") unless File.exist?(view_path)
+      File.read(view_path)
+    end
+
+    def view_path
+      @view_path ||= File.expand_path("./nodes/#{view}.erb", Dir.pwd)
     end
   end
 end

data/lib/mindmap/request.rb

@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+
+module Mindmap
+  class Request < Rack::Request
+    def response
+      [200, response_headers, response_body]
+    end
+
+    def params
+      super.with_indifferent_access
+    end
+
+    private
+
+    def response_body
+      [node_children.map { |child| child.render(response_type) }.join]
+    end
+
+    def response_headers
+      {
+        'Content-Type' => "#{response_format};charset=utf-8"
+      }
+    end
+
+    def response_type
+      case response_format
+      when 'text/html'
+        :html
+      when 'image/svg+xml'
+        :svg
+      else
+        :html
+      end
+    end
+
+    def response_format
+      get_header('HTTP_ACCEPT') || 'text/html'
+    end
+
+    def node_children
+      @node_children ||= node.children
+    end
+
+    def node
+      @node ||= node_klass.new(params)
+    end
+
+    def node_klass
+      (path.camelize + 'Node').constantize
+    end
+  end
+end

data/lib/mindmap/version.rb

@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 module Mindmap
-  VERSION = '0.1.0'
+  VERSION = '0.2.0'.freeze
 end

data/mindmap.gemspec

@@ -1,4 +1,4 @@
-lib = File.expand_path('../lib', __FILE__)
+lib = File.expand_path('lib', __dir__)
 $LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
 require 'mindmap/version'
 
@@ -8,8 +8,12 @@ Gem::Specification.new do |spec|
   spec.authors       = ['Emad Elsaid']
   spec.email         = ['emad.elsaid@blacklane.com']
 
-  spec.summary       = 'A very specific and opinionated web framework to traverse a graph data structure'
-  spec.description   = 'A very specific and opinionated web framework to traverse a graph data structure'
+  spec.summary       = <<-SUMMARY
+  A very specific and opinionated web framework to traverse a graph data structure
+SUMMARY
+  spec.description = <<-DESC
+  A very specific and opinionated web framework to traverse a graph data structure
+DESC
   spec.homepage      = 'https://github.com/emad-elsaid/mindmap'
   spec.license       = 'MIT'
 

data/public/assets/{index.js → endless_scroll.js}

@@ -1,25 +1,48 @@
-const childrenContainer = function (title, content){
-  var contents = $('<div class="card">')
-
-  if( title ){
-    contents.append('<div class="card-header"><p class="card-header-title">'+ title +'</p></div>')
+$.ajax({
+  type: "POST",
+  url: '/root',
+  headers: {
+    Accept: 'text/html'
+  },
+  success: function (data, text) {
+    $('#content').html(childrenContainer(null, data));
+  },
+  error: function (request, status, error) {
+    $('#content').html(childrenContainer(null, request.responseText));
   }
+});
 
-  contents.append('<div class="card-content">' + content + '</div>')
+$(document).on('click', 'a[href^="/"]', function(evt){
+  evt.preventDefault()
 
-  var children = $("<div>", {class: "children"}).html(contents)
+  var element = $(this),
+      params = element.data('params'),
+      href = element.attr('href')
 
-  return children
-}
+  $.ajax({
+    type: "POST",
+    url: href,
+    data: params,
+    headers: {
+      Accept: 'text/html'
+    },
+    success: function (data, text) {
+      insertChildren(data, element)
+    },
+    error: function (request, status, error) {
+      insertChildren(request.responseText, element)
+    }
+  });
+})
 
 const insertChildren = function (content, element){
-  var parentContainer = $(element).parents(".children")
+  var parentContainer = element.parents(".children")
 
   parentContainer
     .nextAll()
     .remove()
 
-  var title = $(element).data('children-title'),
+  var title = element.data('children-title'),
       children = childrenContainer(title, content)
 
   children.insertAfter(parentContainer)
@@ -29,25 +52,16 @@ const insertChildren = function (content, element){
   }, 500);
 }
 
-$.get("/root", function(response){
-  $('body').html(childrenContainer(null, response));
-})
+const childrenContainer = function (title, content){
+  var contents = $('<div class="message is-info">')
 
-$(document).on('click', 'a[href^="/"]', function(evt){
-  var element = this,
-      params = $(this).data('params')
-  evt.preventDefault()
-  evt.stopPropagation()
+  if( title ){
+    contents.append('<div class="message-header">'+ title +'</div>')
+  }
 
-  $.ajax({
-    type: "POST",
-    url: this.href,
-    data: params,
-    success: function (data, text) {
-      insertChildren(data, element)
-    },
-    error: function (request, status, error) {
-      insertChildren(request.responseText, element)
-    }
-  });
-})
+  contents.append('<div class="message-body">' + content + '</div>')
+
+  var children = $("<div>", {class: "children"}).html(contents)
+
+  return children
+}

data/public/{index.html → endless_scroll.html}

@@ -5,9 +5,10 @@
     <title></title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1">
+
     <script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
     <script type="application/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
-    <script type="application/javascript" src="/assets/index.js"></script>
+    <script type="application/javascript" src="/assets/endless_scroll.js"></script>
 
     <link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.0/css/bulma.css" rel="stylesheet"/>
   </head>

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: mindmap
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.2.0
 platform: ruby
 authors:
 - Emad Elsaid
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2018-04-19 00:00:00.000000000 Z
+date: 2018-05-13 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: activesupport
@@ -80,8 +80,8 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '10.0'
-description: A very specific and opinionated web framework to traverse a graph data
-  structure
+description: "  A very specific and opinionated web framework to traverse a graph
+  data structure\n"
 email:
 - emad.elsaid@blacklane.com
 executables:
@@ -99,23 +99,25 @@ files:
 - bin/setup
 - example/Gemfile
 - example/config.ru
+- example/nodes/directory_node.html.erb
 - example/nodes/directory_node.rb
+- example/nodes/file_node.html.erb
 - example/nodes/file_node.rb
 - example/nodes/root_node.rb
 - example/public/.gitkeep
-- example/views/.gitkeep
 - exe/mindmap
 - lib/mindmap.rb
 - lib/mindmap/application.rb
 - lib/mindmap/cli.rb
+- lib/mindmap/config.rb
 - lib/mindmap/node.rb
 - lib/mindmap/renderer.rb
+- lib/mindmap/request.rb
 - lib/mindmap/version.rb
 - mindmap.gemspec
-- public/assets/index.js
+- public/assets/endless_scroll.js
+- public/endless_scroll.html
 - public/favicon.ico
-- public/index.html
-- views/tag.html.erb
 homepage: https://github.com/emad-elsaid/mindmap
 licenses:
 - MIT

data/views/tag.html.erb

@@ -1,15 +0,0 @@
-<div class="content is-inline-block">
-  <div class="tags has-addons">
-
-    <span class="tag is-dark is-medium">
-      <%= name %>
-    </span>
-
-    <% if respond_to?(:children) %>
-      <a href="<%= url %>" class="tag is-link is-medium" data-params="<%= html_escape(to_json) %>" data-children-title="<%= children_title %>">
-        <i class="fas fa-folder"></i>
-      </a>
-    <% end %>
-
-  </div>
-</div>