<commit_before>var d3 = require('d3');
var modal = require('../node_modules/PicoModal/src/picoModal.js');

function addNodeModalEvents(kg, graph, nodes) {
  nodes.select('text')
    .on('click', function render(conceptId) {
      var concept = graph.node(conceptId).concept;
      var contents = concept.content;
      if(!contents || !contents.forEach) {
        concept.content = contents = [];
      }
      var title = concept.name;
      var texts = [];
      var links = [];

      // Collect different content types.
      contents.forEach(function(content) {
        if(content.link) {
          links.push(content);
        } else if(content.text) {
          content.toString = function() { return this.text; };
          texts.push(content);
        }
      });

      var html = '<input type="text" id="title" value="' + title + '" />';
      if(!texts.length && !links.length) {
        // Oops.
        html += '<p>This node has no content!</p>';
      } else {
        function article(type, header, content) {
          return '<article class="' + type + '">' + header + '<p>' + content + '</p></article>';
        };

        // Fuse content into HTML template.
        if(texts.length) {
          html += texts.map(function(content) {
            if(!content.title) {
              content.title = "";
            }
            return article('textContent', '<input class="title" type="text" value="' + content.title + '" />', '<textarea>' + content.text + '</textarea>');
          }).join('');
        }
        if(links.length) {
          html += links.map(function(content) {
            return article('linkContent', '<input type="url" value="' + content.link + '" /><input type="text" value="' + content.title + '" />', '<textarea>' + content.description + '</textarea>');
          }).join('');
        }
      }
      html += '<button id="addContentBtn">Add Content</button>';
      html += '<button id="saveBtn">Save</button>';

      var editModal = modal({
        content: html,
        width: 700,
        closeButton: true,
        modalStyles: {
          'overflow-y': 'scroll',
          'max-height': '500px',
          'background-color': 'white',
          'padding': '20px'
        }
      });

      d3.select('#addContentBtn').on('click', function() {
        concept.content.push({
          title: 'New Content',
          text: 'New content text.',
        });
        editModal.close();
        render(conceptId);
      });

      d3.select('#saveBtn').on('click', function() {
        // Update the value of whatever was changed in the modal into the graph.
        var newTitle = d3.select('#title').property('value');
        concept.name = newTitle;
        graph.node(conceptId).label = newTitle;

        var texts = d3.selectAll('.textContent')[0];
        concept.content = [];
        texts.forEach(function(textContent) {
          var childNodes = textContent.childNodes;
          var contentTitle = d3.select(childNodes[0]).property('value');
          var childTextNode = childNodes[1].childNodes;
          var contentText = d3.select(childTextNode[0]).property('value');
          concept.content.push({
            title: contentTitle,
            text: contentText
          });
        });

        var links = d3.selectAll('.linkContent')[0];
        links.forEach(function(linkContent) {
          var childNodes = linkContent.childNodes;
          var contentUrl = d3.select(childNodes[0]).property('value');
          var contentTitle = d3.select(childNodes[1]).property('value');
          var childTextNode = childNodes[2].childNodes;
          var contentDesc = d3.select(childTextNode[0]).property('value');
          concept.content.push({
            title: contentTitle,
            link: contentUrl,
            description: contentDesc
          });
        });

        kg.render();
        editModal.close();
      });

    });
}

function setupModals(kg) {
  kg.onEvent('renderGraph', function(e) {
    addNodeModalEvents(kg, e.graph, e.nodes);
  });
};

module.exports = {
  name: 'editing-modals',
  run: setupModals,
};
<commit_msg>Edit modals don't reset when adding new content<commit_after>var d3 = require('d3');
var modal = require('../node_modules/PicoModal/src/picoModal.js');

function addNodeModalEvents(kg, graph, nodes) {
  nodes.select('text')
    .on('click', function render(conceptId) {
      var concept = graph.node(conceptId).concept;
      var contents = concept.content;
      if(!contents || !contents.forEach) {
        concept.content = contents = [];
      }
      var title = concept.name;
      var texts = [];
      var links = [];

      // Collect different content types.
      contents.forEach(function(content) {
        if(content.link) {
          links.push(content);
        } else if(content.text) {
          content.toString = function() { return this.text; };
          texts.push(content);
        }
      });

      var html = '<input type="text" id="title" value="' + title + '" />';
      if(!texts.length && !links.length) {
        // Oops.
        html += '<p>This node has no content!</p>';
      } else {
        function article(type, header, content) {
          return '<article class="' + type + '">' + header + '<p>' + content + '</p></article>';
        };

        // Fuse content into HTML template.
        if(texts.length) {
          html += texts.map(function(content) {
            if(!content.title) {
              content.title = "";
            }
            return article('textContent', '<input class="title" type="text" value="' + content.title + '" />', '<textarea>' + content.text + '</textarea>');
          }).join('');
        }
        if(links.length) {
          html += links.map(function(content) {
            return article('linkContent', '<input type="url" value="' + content.link + '" /><input type="text" value="' + content.title + '" />', '<textarea>' + content.description + '</textarea>');
          }).join('');
        }
      }
      html += '<button id="addContentBtn">Add Content</button>';
      html += '<button id="saveBtn">Save</button>';

      var editModal = modal({
        content: html,
        width: 700,
        closeButton: true,
        modalStyles: {
          'overflow-y': 'scroll',
          'max-height': '500px',
          'background-color': 'white',
          'padding': '20px'
        }
      });

      var saveContent = function() {
        // Update the value of whatever was changed in the modal into the graph.
        var newTitle = d3.select('#title').property('value');
        concept.name = newTitle;
        graph.node(conceptId).label = newTitle;

        var texts = d3.selectAll('.textContent')[0];
        concept.content = [];
        texts.forEach(function(textContent) {
          var childNodes = textContent.childNodes;
          var contentTitle = d3.select(childNodes[0]).property('value');
          var childTextNode = childNodes[1].childNodes;
          var contentText = d3.select(childTextNode[0]).property('value');
          concept.content.push({
            title: contentTitle,
            text: contentText
          });
        });

        var links = d3.selectAll('.linkContent')[0];
        links.forEach(function(linkContent) {
          var childNodes = linkContent.childNodes;
          var contentUrl = d3.select(childNodes[0]).property('value');
          var contentTitle = d3.select(childNodes[1]).property('value');
          var childTextNode = childNodes[2].childNodes;
          var contentDesc = d3.select(childTextNode[0]).property('value');
          concept.content.push({
            title: contentTitle,
            link: contentUrl,
            description: contentDesc
          });
        });
      };

      d3.select('#addContentBtn').on('click', function() {
        saveContent();
        concept.content.push({
          title: 'New Content',
          text: 'New content text.',
        });
        editModal.close();
        render(conceptId);
      });

      d3.select('#saveBtn').on('click', function() {
        saveContent();
        kg.render();
        editModal.close();
      });
    });
}

function setupModals(kg) {
  kg.onEvent('renderGraph', function(e) {
    addNodeModalEvents(kg, e.graph, e.nodes);
  });
};

module.exports = {
  name: 'editing-modals',
  run: setupModals,
};

{'fraction_non_alphanumeric': 0.16186146668261753, 'fraction_numerical': 0.00693862902261036, 'mean_word_length': 2.1654676258992804, 'pattern_counts': {'":': 0, '<': 39, '<?xml version=': 0, '>': 39, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1050045', 'n_tokens_mistral': 2374, 'n_tokens_neox': 2317, 'n_words': 478}