From 2cc4002de79b59f9b7149691294093b4d6611e84 Mon Sep 17 00:00:00 2001 From: hyung-hwan Date: Fri, 30 Dec 2016 14:47:44 +0000 Subject: [PATCH] refactored the revision graph subview in the code folder view --- codepot/src/codepot/views/code_folder.php | 322 +++++++++++++------- codepot/src/codepot/views/code_revision.php | 2 +- 2 files changed, 209 insertions(+), 115 deletions(-) diff --git a/codepot/src/codepot/views/code_folder.php b/codepot/src/codepot/views/code_folder.php index 753665a3..7ccba1a9 100644 --- a/codepot/src/codepot/views/code_folder.php +++ b/codepot/src/codepot/views/code_folder.php @@ -51,7 +51,6 @@ $revreqroot = ''; $history_path = "/code/history/{$project->id}/{$hex_headpath}"; - } else { @@ -105,6 +104,195 @@ function show_tooltip(id, x, y, contents) { }).appendTo("body").fadeIn(200); } + +var RevGraphApp = (function () +{ + // ------------------------------------------------------------------- + // CONSTRUCTOR + // ------------------------------------------------------------------- + function App () + { + if (this.constructor != App) + { + return new App (); + } + + this.window = $(window); + this.graph_container = $("#code_folder_revision_graph_container"); + this.graph_canvas = $("#code_folder_revision_graph"); + this.graph_button = $("#code_folder_revision_graph_button"); + this.graph_spin = $("#code_folder_revision_graph_spin"); + + this.graph_ajax = null; + this.revision_network = null; + + return this; + } + + // ------------------------------------------------------------------- + // PRIVATE FUNCTIONS + // ------------------------------------------------------------------- + function on_graph_success (response, textStatus, jqXHR) + { + var data; + try { data = $.parseJSON(response); } + catch (e) { data = null; } + + if (data == null) + { + show_alert ('Invalid data received', "lang->line('Error')?>"); + } + else if (data.nodes.length <= 0) + { + show_alert ('No data to show', "lang->line('Error')?>"); + } + else + { + var options = { + autoResize: false, + height: '500px', + width: '100%', + clickToUse: false, + layout: { + hierarchical: { + enabled: true, + //levelSeparation: 150, + //nodeSpacing: 200, + //treeSpacing: 300, + direction: 'LR', //'LR' 'UD', 'DU', 'RL' + sortMethod: 'directed' // 'hubsize' + } + }, + edges: { + smooth: { + type: 'cubicBezier', + forceDirection: 'horizontal', // 'vertical', + roundness: 0.4 + } + }, + physics: { + enabled: true + } + }; + + var i, j; + + j = data.nodes.length; + for (i = 0; i < j; i++) + { + data.nodes[i].shape = 'box'; + } + + j = data.edges.length; + for (i = 0; i < j; i++) + { + data.edges[i].length = 60; + data.edges[i].width = 1; + data.edges[i].arrows = 'to'; + data.edges[i].font = { color: 'red' }; + } + + if (this.revision_network === null) + { + this.revision_network = new vis.Network(this.graph_canvas[0], data, options); + } + else + { + this.revision_network.setData (data); + } + + this.graph_container.dialog("option", "height", (this.window.height() * 90 / 100)); + this.graph_container.dialog("option", "width", (this.window.width() * 90 / 100)); + this.graph_container.dialog ({ + position: { + my: "center center", + at: "center center", + of: this.window + } + }); + on_graph_container_resize.call (this); + } + + this.graph_button.button("enable"); + this.graph_spin.removeClass ("fa-cog fa-spin"); + } + + function on_graph_error (jqXHR, textStatus, errorThrown) + { + show_alert (xhr.status + ' ' + thrownError, "lang->line('Error')?>"); + this.graph_button.button("enable"); + this.graph_spin.removeClass ("fa-cog fa-spin"); + } + + function open_revision_graph() + { + this.graph_button.button ("disable"); + this.graph_spin.addClass ("fa-cog fa-spin"); + this.graph_container.dialog ("open"); + + if (this.graph_ajax != null) this.graph_ajax.abort(); + this.graph_ajax = $.ajax ({ + url: codepot_merge_path ( + "", + "/graph/enjson_revision_graph/id; ?>/"), + context: this, + success: on_graph_success, + error: on_graph_error + }); + } + + function on_graph_container_resize() + { + if (this.revision_network != null) + { + this.revision_network.setSize (this.graph_container.width(), this.graph_container.height()); + this.revision_network.redraw(); + this.revision_network.fit(); + } + } + + // ------------------------------------------------------------------- + // PUBLIC FUNCTIONS + // ------------------------------------------------------------------- + App.prototype.initWidgets = function () + { + var self = this; + + this.graph_container.dialog ({ + title: 'lang->line('Revision')?>', + resizable: true, + autoOpen: false, + width: 'auto', + height: 'auto', + modal: true, + buttons: { + 'lang->line('Close')?>': function () { + if (this.graph_ajax != null) return; + self.graph_container.dialog('close'); + } + }, + + beforeClose: function() { + return this.graph_ajax == null; + }, + }); + + this.graph_container.on ("dialogresize", function (evt, ui) { + on_graph_container_resize.call (self); + }); + + this.graph_button.button().click (function () + { + open_revision_graph.call (self); + return false; + }); + }; + + return App; +})(); + + + function show_loc_by_lang_graph (response) { var loc; @@ -160,25 +348,25 @@ function show_loc_by_lang_graph (response) yaxes: { } }; - $("#code_folder_result_loc_by_lang_graph").width(550).height(400); - $.plot($("#code_folder_result_loc_by_lang_graph"), dataset, options); + $("#code_folder_loc_by_lang_graph").width(550).height(400); + $.plot($("#code_folder_loc_by_lang_graph"), dataset, options); - var code_folder_result_loc_by_lang_graph_previous_point = null; + var code_folder_loc_by_lang_graph_previous_point = null; - $("#code_folder_result_loc_by_lang_graph").bind("plothover", function (event, pos, item) { + $("#code_folder_loc_by_lang_graph").bind("plothover", function (event, pos, item) { if (item) { - if (code_folder_result_loc_by_lang_graph_previous_point != item.datapoint) + if (code_folder_loc_by_lang_graph_previous_point != item.datapoint) { - code_folder_result_loc_by_lang_graph_previous_point = item.datapoint; - $("#code_folder_result_loc_by_lang_graph_tooltip").remove(); - show_tooltip("code_folder_result_loc_by_lang_graph_tooltip", item.pageX, item.pageY - 20, item.datapoint[1]); + code_folder_loc_by_lang_graph_previous_point = item.datapoint; + $("#code_folder_loc_by_lang_graph_tooltip").remove(); + show_tooltip("code_folder_loc_by_lang_graph_tooltip", item.pageX, item.pageY - 20, item.datapoint[1]); } } else { - $("#code_folder_result_loc_by_lang_graph_tooltip").remove(); - code_folder_result_loc_by_lang_graph_previous_point = null; + $("#code_folder_loc_by_lang_graph_tooltip").remove(); + code_folder_loc_by_lang_graph_previous_point = null; } }); } @@ -199,7 +387,7 @@ function show_loc_by_file_graph (response) } else { - var f = new CodeFlower("#code_folder_result_loc_by_file_graph", 550, 400); + var f = new CodeFlower("#code_folder_loc_by_file_graph", 550, 400); f.update (loc); } @@ -207,88 +395,6 @@ function show_loc_by_file_graph (response) $("#code_folder_loc_by_file_spin" ).removeClass ("fa-cog fa-spin"); } -var revision_network = null; - -function show_revision_graph (response) -{ - var data; - try { data = $.parseJSON(response); } - catch (e) { data = null; } - - if (data == null) - { - show_alert ('Invalid data received', "lang->line('Error')?>"); - } - else if (data.nodes.length <= 0) - { - show_alert ('No data to show', "lang->line('Error')?>"); - } - else - { - var options = { - autoResize: false, - height: '500px', - width: '100%', - clickToUse: false, - layout: { - hierarchical: { - enabled: true, - //levelSeparation: 150, - //nodeSpacing: 200, - //treeSpacing: 300, - direction: 'LR', //'LR' 'UD', 'DU', 'RL' - sortMethod: 'directed' // 'hubsize' - } - }, - edges: { - smooth: { - type: 'cubicBezier', - forceDirection: 'horizontal', // 'vertical', - roundness: 0.4 - } - }, - physics: { - enabled: true - } - }; - - var i, j; - - j = data.nodes.length; - for (i = 0; i < j; i++) - { - data.nodes[i].shape = 'box'; - } - - j = data.edges.length; - for (i = 0; i < j; i++) - { - data.edges[i].length = 60; - data.edges[i].width = 1; - data.edges[i].arrows = 'to'; - data.edges[i].font = { color: 'red' }; - } - - if (revision_network === null) - { - revision_network = new vis.Network(document.getElementById('code_folder_result_revision_graph'), data, options); - $('#code_folder_result_revision_graph').resizable({ - resize: function (event, ui) { - revision_network.setSize (ui.size.width - 10, ui.size.height - 10); - revision_network.redraw(); - } - }); - } - else - { - revision_network.setData (data); - } - } - - $("#code_folder_revision_graph_button").button("enable"); - $("#code_folder_revision_graph_spin" ).removeClass ("fa-cog fa-spin"); -} - function render_readme() { ", - "/graph/enjson_revision_graph/id; ?>/"), - context: document.body, - success: show_revision_graph, - error: function (xhr, ajaxOptions, thrownError) { - show_alert (xhr.status + ' ' + thrownError, "lang->line('Error')?>"); - $("#code_folder_revision_graph_button").button("enable"); - $("#code_folder_revision_graph_spin" ).removeClass ("fa-cog fa-spin"); - } - }); - return false; - }); + var rev_graph_app = new RevGraphApp (); + rev_graph_app.initWidgets (); $('#code_search_invertedly').button(); @@ -1044,9 +1135,12 @@ $this->load->view (
-
-
-
+
+
+ +
+
+