text: <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0, minimal-ui">
      <title><%= title %></title>
      <script src="/javascripts/jquery.min.js"></script>
      <%- include('../../components/common/index') %>
      <script>
  
      // Initiate Global User Settings
  
      const userFactory = (() => {
  
          function UserFactory(){
  
              let loggedInUser = null;
              let watchedUser = null;
              let currentUser = '';
              let currentContext = '';
              let viewType = 'internal';
              let selfPosted = null;
              let forwardTo = 'https://www.google.com/search?q=';
              let hostSite = '';
              let addContext = '';
              let jsonPath = '';
              let maxNodes = '';
              let most_influential = 'bc';
              let graphPalette = '';
              let walkthroughtype = '';
              let inlanguage = 'auto';
              let in_label_threshold = 8;
              let midi = null;
              let background = null;
              let interpret = null;
  
              let viewOptions = {};
              let graphOptions = { 
                  minnodesize: 5,
                  maxnodesize: 16,
                  deselected_nodes_color: '#ddd',
                  color_context: '#666',
                  default_label_color: '#000000',
                  color_addcontext: '#666666',
                  highlight_addcontext: '#0089e0',
                  context_nodes_color: '#4a5e9e', // #6689d0
                  forceatlas_options: {worker: false, startingIterations: 100, scalingRatio: 0.1, slowDown: 100, strongGravityMode: true},
  
              }
  
              let contextPublic = false;
  
              let sigma_dragged = '0';
  
  
              this.getLoggedInUser = function() {
                  return loggedInUser;
              }    
              this.setLoggedInUser = function(name) {
                  loggedInUser = name;
              }
              this.isLoggedIn = function() {
                  if (loggedInUser && loggedInUser != '') {
                      return true;
                  }
                  else {
                      return false;
                  }
              }
  
              this.getCurrentUser = function() {
                  return currentUser;
              }
              this.setCurrentUser = function(name) {
                  currentUser = name;
              }
  
              this.getCurrentContext = function() {
                  return currentContext;
              }
              this.setCurrentContext = function(name) {
                  currentContext = name;
              }
              this.isInContext = function() {
                  if (currentContext && currentContext != '') {
                      return true;
                  }
                  else {
                      return false;
                  }
              }
  
              this.getWatchedUser = function() {
                  return watchedUser;
              }  
              this.setWatchedUser = function(name) {
                  watchedUser = name;
              }
  
              this.setViewType = function(type) {
                  viewType = type;
                  return true;
              }
              this.getViewType = function() {
                  return viewType;
              }
  
              this.getSelfPosted = function() {
                  return selfPosted;
              }
              this.updateSelfPosted = function(value) {
                  selfPosted = value;
                  return true;
              }
  
              this.setForwardTo = function(url) {
                  forwardTo = url;
              }          
              this.getForwardTo = function() {
                  return forwardTo;
              }  
  
              this.setHostSite = function(url) {
                  hostSite = url;
              }          
              this.getHostSite = function() {
                  return hostSite;
              }  
  
              this.setAddContext = function(name) {
                  addContext = name;
              }          
              this.getAddContext = function() {
                  return addContext;
              }  
  
              this.setJsonPath = function(url) {
                  jsonPath = url;
              }          
              this.getJsonPath = function() {
                  return jsonPath;
              }  
  
              this.setMaxNodes = function(nodes) {
                  maxNodes = nodes;
              }          
              this.getMaxNodes = function() {
                  return maxNodes;
              }  
  
              this.setMostInfluential = function(flag) {
                  most_influential = flag;
              }
              this.getMostInfluential = function() {
                  return most_influential;
              }
  
              this.setGraphPalette = function(flag) {
                  graphPalette = flag;
              }
              this.getGraphPalette = function() {
                  return graphPalette;
              }
  
              this.setWalkthrough = function(flag) {
                  walkthroughtype = flag;
              }
              this.getWalkthrough = function() {
                  return walkthroughtype;
              }
  
              this.setInLanguage = function(lang) {
                  inlanguage = lang;
              }
              this.getInLanguage = function() {
                  return inlanguage;
              }
  
              this.setMidi = function(flag) {
                  midi = flag;
              }
              this.getMidi = function() {
                  return midi;
              }
  
              this.setBackground = function(type) {
                  background = type;
              }
              this.getBackground = function() {
                  return background;
              }
  
  
              this.setViewOption = function(option, value) {
                  viewOptions[option] = value;
              }
              this.getViewOption = function(option) {
                  return viewOptions[option];
              }
  
              this.setInterpret = function(value) {
                  if (value && value.length > 0) {
                      interpret = value;
                  }
              }
              this.isInterpretOn = function() {
                  if (interpret) {
                      return true;
                  }
                  else {
                      return false;
                  }
              }
  
              this.setGraphOption = function(option,value) {
                  if (option == 'abstract' && value != 'no') {
                      graphOptions['abstract'] = 'true';
                      graphOptions['minnodesize'] = 1;
                      graphOptions['maxnodesize'] = 1;
                      graphOptions['in_label_threshold'] = 20;
                  }
                  else {
                      graphOptions[option] = value;
                  }
              }
              this.getGraphOption = function(option) {
                  return graphOptions[option];
              }
  
              this.setContextPublic = function(mode) {
                  contextPublic = mode;
              }
              this.isContextPublic = function() {
                  return contextPublic;
              }
  
              this.setSigmaDragged = function(fact) {
                  sigma_dragged = fact;
              }
              this.isSigmaDragged = function() {
                  if (sigma_dragged && sigma_dragged == '1') {
                      return true;
                  }
                  else {
                      return false;
                  }
              }
              
  
          }
  
          return new UserFactory();
  
      })();
  
  
      // Are we logged in?
      <% if (receivername) { %>
      userFactory.setLoggedInUser('<%= receivername %>');
      <% } %> 
  
      // Set the current user
      userFactory.setCurrentUser(window.location.pathname.replace(/^\/([^\/]*).*$/, '$1'));
      
      // Set the current context
      userFactory.setCurrentContext('<%= context %>');
      
      // Set the current hostsite
      userFactory.setHostSite(window.location.host);
  
      // default most influential nodes are displayed according to Betwenness Centrality (bc) or Degree (degree)
      userFactory.setMostInfluential('bc');
  
      // Is the user going to look at somebody else's graph?
      <% if (perceivername) { %>
          // Are we watching somebody else's graph?
          userFactory.setViewType('external');
          userFactory.setWatchedUser('<%= perceivername %>');
          userFactory.setWalkthrough('external');
  
          <% if (showcontexts && maxnodes) { %>
          userFactory.setJsonPath('/api/public/nodes/<%= perceivername %>/<%= context %>?showcontexts=<%= showcontexts %>&maxnodes=<%= maxnodes %>');
          userFactory.setViewOption('showcontexts', true);
          <% } else if (showcontexts) { %>
          userFactory.setJsonPath('/api/public/nodes/<%= perceivername %>/<%= context %>?showcontexts=<%= showcontexts %>');
          userFactory.setViewOption('showcontexts', true);
          <% } else if (maxnodes) { %>
          userFactory.setJsonPath('/api/public/nodes/<%= perceivername %>/<%= context %>?maxnodes=<%= maxnodes %>');
          <% } else  { %>
          <% if (locals.vieweduser && vieweduser.maxnodes) { %>
          userFactory.setMaxNodes('<%= vieweduser.maxnodes %>');
          <% if (context) { %>
              userFactory.setJsonPath('/api/public/nodes/<%= perceivername %>/<%= context %>?maxnodes=<%= vieweduser.maxnodes %>');
          <% } else { %>
              userFactory.setJsonPath('/api/public/nodes/<%= perceivername %>/?showcontexts=1&maxnodes=<%= vieweduser.maxnodes %>');
              userFactory.setViewOption('showcontexts', true);
          <% } %>
          <% } else { %>
          <% if (context) { %>    
          userFactory.setJsonPath('/api/public/nodes/<%= perceivername %>/<%= context %>');
          <% } else { %>
          userFactory.setJsonPath('/api/public/nodes/<%= perceivername %>/?showcontexts=1');
          userFactory.setViewOption('showcontexts', true);
          <% } %>   
          <% } %>
          <% if (addcontext) { %>   
          userFactory.setJsonPath('/api/public/nodes/<%= perceivername %>/<%= context %>?addcontext=<%= addcontext %>');
          userFactory.setAddContext('<%= addcontext %>');
          <% } %>
      <% } %>
      <% } else { %>
          // Get the setting from user DB how many max nodes we show
          <% if (maxnodes) { %>
          userFactory.setMaxNodes('<%= maxnodes %>');
          <% } %>
          // Path to the JSON graph file (specific context or a general one)
          <% if (addcontext) { %>
          userFactory.setJsonPath('/api/user/nodes/<%= context %>?addcontext=<%= addcontext %>');
          userFactory.setAddContext('<%= addcontext %>');
          <% } else if (showcontexts) { %>
          userFactory.setJsonPath('/api/user/nodes/<%= context %>?showcontexts=<%= showcontexts %>');
          userFactory.setViewOption('showcontexts', true);
          <% } else if (maxnodes) { %>
          userFactory.setJsonPath('/api/user/nodes/<%= context %>?maxnodes=<%= maxnodes %>');
          userFactory.setMaxNodes('<%= maxnodes %>');
          <% } else { %>
          userFactory.setJsonPath('/api/user/nodes/<%= context %>');
          <% }  %>
      <% } %>
  
      // Define the settings of the logged in user / not logged in user 
      <% if (locals.user && !locals.vieweduser) { %>
      userFactory.setInLanguage('<%= user.inlanguage %>');
          <% if (locals.user.abstract != undefined) { %>
          userFactory.setGraphOption('abstract','<%=locals.user.abstract%>');
          <% } %>
          <% if (locals.user.label_threshold) { %>
          userFactory.setGraphOption('in_label_threshold','<%= user.label_threshold %>');
          <% } %>
          <% if (locals.user.midi) { %>
          userFactory.setMidi('<%= user.midi %>');
          <% } %>
          userFactory.setGraphPalette('<%= user.palette %>');
          <% if (locals.user.maxnodes) { %>
          userFactory.setMaxNodes('<%= user.maxnodes %>');
          <% } %>        
          userFactory.setBackground('<%= user.background %>');
          <% if (locals.user.topnodes) { %>
          userFactory.setMostInfluential('<%= user.topnodes %>');
          <% } %>
      <% } else { %>
          <% if (locals.vieweduser) { %>
              <% if (vieweduser.abstract != undefined) { %>
              userFactory.setGraphOption('abstract','<%=vieweduser.abstract%>');
              <% } %>    
              userFactory.setMostInfluential('<%= vieweduser.topnodes %>');
              userFactory.setGraphOption('in_label_threshold','<%= vieweduser.label_threshold %>');
              userFactory.setGraphPalette('<%= vieweduser.palette %>');
              userFactory.setBackground('<%= vieweduser.background %>');
          <% } %>
      <% } %>   
  
      <% if (onlygraph == '1' || onlygraph == 'graph') { %>
              userFactory.setViewOption('graphOnly', true);
      <% } %>
  
      <% if (contextpublic && context) { %>
              userFactory.setContextPublic(true);
      <% } %>    
          
      
      
      // Settings for the general interface view (used for display/embed)
      userFactory.setViewOption('hide_always', getUrlVars()["hide_always"]);
      userFactory.setViewOption('hide_edit', getUrlVars()["hide_edit"]);
      userFactory.setViewOption('hide_max', getUrlVars()["hide_max"]);
      userFactory.setViewOption('show_text', getUrlVars()["show_text"]);
      userFactory.setViewOption('show_analytics', getUrlVars()["analytics"]);
      userFactory.setViewOption('hide_when_small', getUrlVars()["hide_when_small"]);
      userFactory.setViewOption('urlPath', location.pathname);
      userFactory.setViewOption('mute', getUrlVars()["mute"]);
  
      if (getUrlVars()["link_hashtags"]) userFactory.setViewOption('link_hashtags', getUrlVars()["link_hashtags"]);
  
      // Important settings for the graph view (used in rendering)
      if (getUrlVars()["language"]) userFactory.setInLanguage(getUrlVars()["language"]);
      if (getUrlVars()["palette"]) userFactory.setGraphPalette(getUrlVars()["palette"]);
      if (getUrlVars()["background"]) {
          userFactory.setBackground(getUrlVars()["background"]);
          // Legacy:
          if (getUrlVars()["background"] == 'graph' || getUrlVars()["background"] == '1') {
              userFactory.setViewOption('graphOnly', true);
          }
      }
      if (getUrlVars()["walkthrough"]) userFactory.setWalkthrough(getUrlVars()["walkthrough"]);
      if (getUrlVars()["forced_walkthrough"] == '1') userFactory.setViewOption('forced_walkthrough', '1');
      if (getUrlVars()["most_influential"] == 'bc' || getUrlVars()["most_influential"] == 'bc2' || getUrlVars()["most_influential"] == 'degree') {
          userFactory.setMostInfluential(getUrlVars()["most_influential"]);
      }
  
      // Important switch that shows whether we're in the "interpretation" mode where we build one graph on top of another
      if (getUrlVars()["interpret"]) userFactory.setInterpret(getUrlVars()["interpret"]);
      if (getUrlVars()["abstract"]) userFactory.setGraphOption('abstract',getUrlVars()["abstract"]);
      
      // How do we treat highlights on the intersecting graphs?
      if (getUrlVars()["highlight"]) userFactory.setGraphOption('highlight_intersections',getUrlVars()["highlight"]);
      if (getUrlVars()["missing"]) userFactory.setGraphOption('highlight_missing',getUrlVars()["missing"]);
  
      // Change the theme
  
      function toggleTheme(e) {
          let was_black = false;
          if(document.documentElement.hasAttribute('theme')){
              was_black = true;
              document.documentElement.removeAttribute('theme');
              userFactory.setGraphOption('default_label_color','#000');    
              localStorage.setItem('background', ''); 
          }
          else {
              document.documentElement.setAttribute('theme', 'dark');
              if (userFactory.getGraphPalette() == 'contrast') {
                  userFactory.setGraphOption('deselected_nodes_color','#555');
              }
              else {
                  userFactory.setGraphOption('deselected_nodes_color','#444');
              }
              userFactory.setGraphOption('default_label_color','#ffffff');
              localStorage.setItem('background', 'dark');
              
          }
          if (e) {
              if (was_black == true) {
                  sigma.instances(0).settings({defaultLabelColor: '#000'});
              }
              else {
                  sigma.instances(0).settings({defaultLabelColor: '#fff'});
              }
              sigma.instances(0).refresh();
          }
          
      }
  
      if (userFactory.getBackground() == 'dark' || (localStorage.getItem('background') && localStorage.getItem('background') != userFactory.getBackground())) {
          toggleTheme();
      }
  
  
  
      </script>
      <link rel='stylesheet' href='/stylesheets/jquery.textcomplete.css' />
      <link rel="stylesheet" href="/stylesheets/jquery-ui.min.css">
      <link rel='stylesheet' href='/stylesheets/style.css' />
      <link rel="stylesheet" href="/stylesheets/side-menu.css">
      <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">
      <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png">
      <link rel='stylesheet' href='/stylesheets/jquery.taghandler.css' />
      <link rel="stylesheet" type="text/css" href="/stylesheets/tooltipster.css" />
      <link rel="stylesheet" type="text/css" href="/stylesheets/tooltipster-noir.css" />
      <% if (speech) { %>
      <script src="/javascripts/talkify.min.js"></script>
      <%  } %>
      <% if (locals.user) { %>
          <% if (locals.user.midi != undefined && locals.user.midi != 'off') { %>
      <script src="/javascripts/webmidi.min.js"></script>
            <%  } %>
      <%  } %>
      <link rel="stylesheet" href="/stylesheets/bootstrap-tour-standalone.min.css" />
      <script src="/javascripts/bootstrap-tour-standalone.min.js"></script>
      
     
  </head>