src/app/js/menu/searchMenu.js

/**
 * Contains the search "engine"
 *
 * @param graph the associated webvowl graph
 * @returns {{}}
 */
module.exports = function ( graph ){
  var searchMenu = {},
    dictionary = [],
    entryNames = [],
    searchLineEdit,
    mergedStringsList,
    mergedIdList,
    maxEntries = 6,
    dictionaryUpdateRequired = true,
    labelDictionary,
    inputText,
    viewStatusOfSearchEntries = false;
  
  var results = [];
  var resultID = [];
  var c_locate = d3.select("#locateSearchResult");
  var c_search = d3.select("#c_search");
  var m_search = d3.select("#m_search"); // << dropdown container;
  
  
  String.prototype.beginsWith = function ( string ){
    return (this.indexOf(string) === 0);
  };
  
  searchMenu.requestDictionaryUpdate = function (){
    dictionaryUpdateRequired = true;
    // clear possible pre searched entries
    var htmlCollection = m_search.node().children;
    var numEntries = htmlCollection.length;
    
    for ( var i = 0; i < numEntries; i++ )
      htmlCollection[0].remove();
    searchLineEdit.node().value = "";
  };
  
  
  function updateSearchDictionary(){
    labelDictionary = graph.getUpdateDictionary();
    dictionaryUpdateRequired = false;
    dictionary = [];
    entryNames = [];
    var idList = [];
    var stringList = [];
    
    var i;
    for ( i = 0; i < labelDictionary.length; i++ ) {
      var lEntry = labelDictionary[i].labelForCurrentLanguage();
      idList.push(labelDictionary[i].id());
      stringList.push(lEntry);
      // add all equivalents to the search space;
      if ( labelDictionary[i].equivalents && labelDictionary[i].equivalents().length > 0 ) {
        var eqs = labelDictionary[i].equivalentsString();
        var eqsLabels = eqs.split(", ");
        for ( var e = 0; e < eqsLabels.length; e++ ) {
          idList.push(labelDictionary[i].id());
          stringList.push(eqsLabels[e]);
        }
      }
    }
    
    mergedStringsList = [];
    mergedIdList = [];
    var indexInStringList = -1;
    var currentString;
    var currentObjectId;
    
    for ( i = 0; i < stringList.length; i++ ) {
      if ( i === 0 ) {
        // just add the elements
        mergedStringsList.push(stringList[i]);
        mergedIdList.push([]);
        mergedIdList[0].push(idList[i]);
        continue;
      }
      else {
        currentString = stringList[i];
        currentObjectId = idList[i];
        indexInStringList = mergedStringsList.indexOf(currentString);
      }
      if ( indexInStringList === -1 ) {
        mergedStringsList.push(stringList[i]);
        mergedIdList.push([]);
        var lastEntry = mergedIdList.length;
        mergedIdList[lastEntry - 1].push(currentObjectId);
      } else {
        mergedIdList[indexInStringList].push(currentObjectId);
      }
    }
    
    for ( i = 0; i < mergedStringsList.length; i++ ) {
      var aString = mergedStringsList[i];
      var correspondingIdList = mergedIdList[i];
      var idListResult = "[ ";
      for ( var j = 0; j < correspondingIdList.length; j++ ) {
        idListResult = idListResult + correspondingIdList[j].toString();
        idListResult = idListResult + ", ";
      }
      idListResult = idListResult.substring(0, idListResult.length - 2);
      idListResult = idListResult + " ]";
      
      dictionary.push(aString);
      entryNames.push(aString);
    }
  }
  
  searchMenu.setup = function (){
    // clear dictionary;
    dictionary = [];
    searchLineEdit = d3.select("#search-input-text");
    searchLineEdit.on("input", userInput);
    searchLineEdit.on("keydown", userNavigation);
    searchLineEdit.on("click", toggleSearchEntryView);
    searchLineEdit.on("mouseover", hoverSearchEntryView);
    
    c_locate.on("click", function (){
      graph.locateSearchResult();
    });
    
    c_locate.on("mouseover", function (){
      searchMenu.hideSearchEntries();
    });
    
  };
  
  function hoverSearchEntryView(){
    updateSelectionStatusFlags();
    searchMenu.showSearchEntries();
  }
  
  function toggleSearchEntryView(){
    if ( viewStatusOfSearchEntries ) {
      searchMenu.hideSearchEntries();
    } else {
      searchMenu.showSearchEntries();
    }
  }
  
  searchMenu.hideSearchEntries = function (){
    m_search.style("display", "none");
    viewStatusOfSearchEntries = false;
  };
  
  searchMenu.showSearchEntries = function (){
    m_search.style("display", "block");
    viewStatusOfSearchEntries = true;
  };
  
  function ValidURL( str ){
    var urlregex = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/;
    return urlregex.test(str);
    
  }
  
  
  function updateSelectionStatusFlags(){
    if ( searchLineEdit.node().value.length === 0 ) {
      createSearchEntries();
      return;
    }
    handleAutoCompletion();
  }
  
  function userNavigation(){
    if ( dictionaryUpdateRequired ) {
      updateSearchDictionary();
    }
    
    var htmlCollection = m_search.node().children;
    var numEntries = htmlCollection.length;
    
    
    var move = 0;
    var i;
    var selectedEntry = -1;
    for ( i = 0; i < numEntries; i++ ) {
      var atr = htmlCollection[i].getAttribute('class');
      if ( atr === "dbEntrySelected" ) {
        selectedEntry = i;
      }
    }
    if ( d3.event.keyCode === 13 ) {
      if ( selectedEntry >= 0 && selectedEntry < numEntries ) {
        // simulate onClick event
        htmlCollection[selectedEntry].onclick();
        searchMenu.hideSearchEntries();
      }
      else if ( numEntries === 0 ) {
        inputText = searchLineEdit.node().value;
        // check if input text ends or begins with with space
        // remove first spaces
        var clearedText = inputText.replace(/%20/g, " ");
        while ( clearedText.beginsWith(" ") ) {
          clearedText = clearedText.substr(1, clearedText.length);
        }
        // remove ending spaces
        while ( clearedText.endsWith(" ") ) {
          clearedText = clearedText.substr(0, clearedText.length - 1);
        }
        var iri = clearedText.replace(/ /g, "%20");
        
        var valid = ValidURL(iri);
        // validate url:
        if ( valid ) {
          var ontM = graph.options().ontologyMenu();
          ontM.setIriText(iri);
          searchLineEdit.node().value = "";
        }
        else {
          console.log(iri + " is not a valid URL!");
        }
      }
    }
    if ( d3.event.keyCode === 38 ) {
      move = -1;
      searchMenu.showSearchEntries();
    }
    if ( d3.event.keyCode === 40 ) {
      move = +1;
      searchMenu.showSearchEntries();
    }
    
    var newSelection = selectedEntry + move;
    if ( newSelection !== selectedEntry ) {
      
      if ( newSelection < 0 && selectedEntry <= 0 ) {
        htmlCollection[0].setAttribute('class', "dbEntrySelected");
      }
      
      if ( newSelection >= numEntries ) {
        htmlCollection[selectedEntry].setAttribute('class', "dbEntrySelected");
      }
      if ( newSelection >= 0 && newSelection < numEntries ) {
        htmlCollection[newSelection].setAttribute('class', "dbEntrySelected");
        if ( selectedEntry >= 0 )
          htmlCollection[selectedEntry].setAttribute('class', "dbEntry");
      }
    }
  }
  
  searchMenu.getSearchString = function (){
    return searchLineEdit.node().value;
  };
  
  
  function clearSearchEntries(){
    var htmlCollection = m_search.node().children;
    var numEntries = htmlCollection.length;
    for ( var i = 0; i < numEntries; i++ ) {
      htmlCollection[0].remove();
    }
    results = [];
    resultID = [];
    
  }
  
  function createSearchEntries(){
    inputText = searchLineEdit.node().value;
    var i;
    var lc_text = inputText.toLowerCase();
    var token;
    
    for ( i = 0; i < dictionary.length; i++ ) {
      var tokenElement = dictionary[i];
      if ( tokenElement === undefined ) {
        //@WORKAROUND : nodes with undefined labels are skipped
        //@FIX: these nodes are now not added to the dictionary
        continue;
      }
      token = dictionary[i].toLowerCase();
      if ( token.indexOf(lc_text) > -1 ) {
        results.push(dictionary[i]);
        resultID.push(i);
      }
    }
  }
  
  function measureTextWidth( text, textStyle ){
    // Set a default value
    if ( !textStyle ) {
      textStyle = "text";
    }
    var d = d3.select("body")
        .append("div")
        .attr("class", textStyle)
        .attr("id", "width-test") // tag this element to identify it
        .attr("style", "position:absolute; float:left; white-space:nowrap; visibility:hidden;")
        .text(text),
      w = document.getElementById("width-test").offsetWidth;
    d.remove();
    return w;
  }
  
  function cropText( input ){
    var maxWidth = 250;
    var textStyle = "dbEntry";
    var truncatedText = input;
    var textWidth;
    var ratio;
    var newTruncatedTextLength;
    while ( true ) {
      textWidth = measureTextWidth(truncatedText, textStyle);
      if ( textWidth <= maxWidth ) {
        break;
      }
      
      ratio = textWidth / maxWidth;
      newTruncatedTextLength = Math.floor(truncatedText.length / ratio);
      
      // detect if nothing changes
      if ( truncatedText.length === newTruncatedTextLength ) {
        break;
      }
      
      truncatedText = truncatedText.substring(0, newTruncatedTextLength);
    }
    
    if ( input.length > truncatedText.length ) {
      return input.substring(0, truncatedText.length - 6);
    }
    return input;
  }
  
  function createDropDownElements(){
    var numEntries;
    var copyRes = results;
    var i;
    var token;
    var newResults = [];
    var newResultsIds = [];
    
    var lc_text = searchLineEdit.node().value.toLowerCase();
    // set the number of shown results to be maxEntries or less;
    numEntries = results.length;
    if ( numEntries > maxEntries )
      numEntries = maxEntries;
    
    
    for ( i = 0; i < numEntries; i++ ) {
      // search for the best entry
      var indexElement = 1000000;
      var lengthElement = 1000000;
      var bestElement = -1;
      for ( var j = 0; j < copyRes.length; j++ ) {
        token = copyRes[j].toLowerCase();
        var tIe = token.indexOf(lc_text);
        var tLe = token.length;
        if ( tIe > -1 && tIe <= indexElement && tLe <= lengthElement ) {
          bestElement = j;
          indexElement = tIe;
          lengthElement = tLe;
        }
      }
      newResults.push(copyRes[bestElement]);
      newResultsIds.push(resultID[bestElement]);
      copyRes[bestElement] = "";
    }
    
    // add the results to the entry menu
    //******************************************
    numEntries = results.length;
    if ( numEntries > maxEntries )
      numEntries = maxEntries;
    
    var filteredOutElements = 0;
    for ( i = 0; i < numEntries; i++ ) {
      //add results to the dropdown menu
      var testEntry = document.createElement('li');
      testEntry.setAttribute('elementID', newResultsIds[i]);
      testEntry.onclick = handleClick(newResultsIds[i]);
      testEntry.setAttribute('class', "dbEntry");
      
      var entries = mergedIdList[newResultsIds[i]];
      var eLen = entries.length;
      
      var croppedText = cropText(newResults[i]);
      
      var el0 = entries[0];
      var allSame = true;
      var nodeMap = graph.getNodeMapForSearch();
      var visible = eLen;
      if ( eLen > 1 ) {
        for ( var q = 0; q < eLen; q++ ) {
          if ( nodeMap[entries[q]] === undefined ) {
            visible--;
          }
        }
      }
      
      for ( var a = 0; a < eLen; a++ ) {
        if ( el0 !== entries[a] ) {
          allSame = false;
        }
      }
      if ( croppedText !== newResults[i] ) {
        // append ...(#numElements) if needed
        if ( eLen > 1 && allSame === false ) {
          if ( eLen !== visible )
            croppedText += "... (" + visible + "/" + eLen + ")";
        }
        else {
          croppedText += "...";
        }
        testEntry.title = newResults[i];
      }
      else {
        if ( eLen > 1 && allSame === false ) {
          if ( eLen !== visible )
            croppedText += " (" + visible + "/" + eLen + ")";
          else
            croppedText += " (" + eLen + ")";
        }
      }
      
      var searchEntryNode = d3.select(testEntry);
      if ( eLen === 1 || allSame === true ) {
        if ( nodeMap[entries[0]] === undefined ) {
          searchEntryNode.style("color", "#979797");
          testEntry.title = newResults[i] + "\nElement is filtered out.";
          testEntry.onclick = function (){
          };
          d3.select(testEntry).style("cursor", "default");
          filteredOutElements++;
        }
      } else {
        if ( visible < 1 ) {
          searchEntryNode.style("color", "#979797");
          testEntry.onclick = function (){
          };
          testEntry.title = newResults[i] + "\nAll elements are filtered out.";
          d3.select(testEntry).style("cursor", "default");
          filteredOutElements++;
        } else {
          searchEntryNode.style("color", "");
        }
        if ( visible < eLen && visible > 1 ) {
          testEntry.title = newResults[i] + "\n" + visible + "/" + eLen + " elements are visible.";
        }
      }
      searchEntryNode.node().innerHTML = croppedText;
      m_search.node().appendChild(testEntry);
    }
  }
  
  
  function handleAutoCompletion(){
    /**  pre condition: autoCompletion has already a valid text**/
    clearSearchEntries();
    createSearchEntries();
    createDropDownElements();
  }
  
  function userInput(){
    c_locate.classed("highlighted", false);
    c_locate.node().title = "Nothing to locate";
    
    if ( dictionaryUpdateRequired ) {
      updateSearchDictionary();
    }
    graph.resetSearchHighlight();
    
    if ( dictionary.length === 0 ) {
      console.log("dictionary is empty");
      return;
    }
    inputText = searchLineEdit.node().value;
    
    clearSearchEntries();
    if ( inputText.length !== 0 ) {
      createSearchEntries();
      createDropDownElements();
    }
    
    searchMenu.showSearchEntries();
  }
  
  function handleClick( elementId ){
    
    return function (){
      var id = elementId;
      var correspondingIds = mergedIdList[id];
      
      // autoComplete the text for the user
      var autoComStr = entryNames[id];
      searchLineEdit.node().value = autoComStr;
      
      graph.resetSearchHighlight();
      graph.highLightNodes(correspondingIds);
      c_locate.node().title = "Locate search term";
      if ( autoComStr !== inputText ) {
        handleAutoCompletion();
      }
      searchMenu.hideSearchEntries();
    };
  }
  
  searchMenu.clearText = function (){
    searchLineEdit.node().value = "";
    c_locate.classed("highlighted", false);
    c_locate.node().title = "Nothing to locate";
    var htmlCollection = m_search.node().children;
    var numEntries = htmlCollection.length;
    for ( var i = 0; i < numEntries; i++ ) {
      htmlCollection[0].remove();
    }
  };
  
  return searchMenu;
};