Token list first implementation+ query builder fix

app/static/js/CorpusAnalysis/CorpusAnalysisApp.js

@@ -34,11 +34,6 @@ class CorpusAnalysisApp {
       .then((cqiCorpora) => {
           this.data.corpus = {o: cqiCorpora[0]};
           console.log(this.data.corpus.o.staticData);
-          // this.renderGeneralCorpusInfo();
-          // this.renderTextInfoList();
-          // this.renderTextProportionsGraphic()
-          // this.renderFrequenciesGraphic();
-          // this.renderBoundsGraphic();
           
           // TODO: Don't do this hgere
           this.data.corpus.o.updateDb();

app/static/js/CorpusAnalysis/CorpusAnalysisStaticVisualization.js

@@ -18,9 +18,10 @@ class CorpusAnalysisStaticVisualization {
     this.data.corpus = this.app.data.corpus;
     this.renderGeneralCorpusInfo();
     this.renderTextInfoList();
-    this.renderTextProportionsGraphic()
+    this.renderTextProportionsGraphic();
+    this.renderTokenList();
     this.renderFrequenciesGraphic();
-    this.renderBoundsGraphic();
+
     // Add event listeners
     let frequenciesStopwordSettingModal = document.querySelector('#frequencies-stopwords-setting-modal');
     let frequenciesStopwordSettingModalButton = document.querySelector('#frequencies-stopwords-setting-modal-button');
@@ -30,6 +31,35 @@ class CorpusAnalysisStaticVisualization {
       M.Modal.init(frequenciesStopwordSettingModal, {dismissible: false});
     });
 
+    let textProportionsGraphModeButtons = document.querySelectorAll('.text-proportions-graph-mode-button');
+    textProportionsGraphModeButtons.forEach(graphModeButton => {
+      graphModeButton.addEventListener('click', (event) => {
+        textProportionsGraphModeButtons.forEach(btn => {
+          btn.classList.remove('disabled');
+        });
+        event.target.closest('.text-proportions-graph-mode-button').classList.add('disabled');
+        this.renderTextProportionsGraphic();
+      });
+    });
+
+    let frequenciesTokenCategoryDropdownElement = document.querySelector('[data-target="frequencies-token-category-dropdown"]');
+    let frequenciesTokenCategoryDropdownListElement = document.querySelector("#frequencies-token-category-dropdown");
+    frequenciesTokenCategoryDropdownListElement.addEventListener('click', (event) => {
+      frequenciesTokenCategoryDropdownElement.firstChild.textContent = event.target.innerHTML;
+      this.renderFrequenciesGraphic();
+    });
+
+    let frequenciesGraphModeButtons = document.querySelectorAll('.frequencies-graph-mode-button');
+    frequenciesGraphModeButtons.forEach(graphModeButton => {
+      graphModeButton.addEventListener('click', (event) => {
+        frequenciesGraphModeButtons.forEach(btn => {
+          btn.classList.remove('disabled');
+        });
+        event.target.closest('.frequencies-graph-mode-button').classList.add('disabled');
+        this.renderFrequenciesGraphic();
+      });
+    });
+
     for (let actionButton of document.querySelectorAll('.frequencies-stopword-setting-modal-action-buttons')) {
       actionButton.addEventListener('click', (event) => {
         let action = event.target.closest('.frequencies-stopword-setting-modal-action-buttons').dataset.action;
@@ -101,70 +131,121 @@ class CorpusAnalysisStaticVisualization {
     let corpusData = this.data.corpus.o.staticData;
     let textProportionsGraphicElement = document.querySelector('#text-proportions-graphic');
     let texts = Object.entries(corpusData.s_attrs.text.lexicon);
-    let graphData = [
-      {
-        values: texts.map(text => text[1].counts.token),
-        labels: texts.map(text => `${corpusData.values.s_attrs.text[text[0]].title} (${corpusData.values.s_attrs.text[text[0]].publishing_year})`),
-        type: 'pie'
-      }
-    ];
+    let graphtype = document.querySelector('.text-proportions-graph-mode-button.disabled').dataset.graphType;
+    let textProportionsTitleElement = document.querySelector('#text-proportions-title-element');
+
+    if (graphtype === 'bar') {
+      textProportionsTitleElement.innerHTML = 'Bounds';
+    } else if (graphtype === 'pie') {
+      textProportionsTitleElement.innerHTML = 'Proportions';
+    }
+
+    let graphData = this.createTextProportionsGraphData(texts, graphtype);
     let graphLayout = {
-      showlegend: true,
-      height: 486,
+      barmode: graphtype === 'bar' ? 'relative' : '',
+      type: graphtype,
+      showgrid: false,
+      height: 447,
       margin: {
         l: 10,
         r: 10,
-        b: 10,
-        t: 10
+        b: graphtype === 'bar' ? 80 : 10,
+        t: graphtype === 'bar' ? 80 : 10,
       },
       legend: {
         "orientation": "h",
         font: {
           size: 10
         }
+      },
+      xaxis: {
+        rangemode: 'nonnegative',
+        autorange: true
+      },
+      yaxis: {
+        autorange: true,
+        showticklabels: false
       }
     };
     let config = {
       responsive: true,
+      modeBarButtonsToRemove: ['zoom2d', 'select2d', 'lasso2d', 'zoomIn2d', 'zoomOut2d', 'autoScale2d', 'resetScale2d'],
       displaylogo: false
     };
 
     Plotly.newPlot(textProportionsGraphicElement, graphData, graphLayout, config);
   }
 
+  createTextProportionsGraphData(texts, graphtype) {
+    let corpusData = this.data.corpus.o.staticData;
+    let graphData = [];
+    switch (graphtype) {
+      case 'bar':
+        for (let text of texts) {
+          let textData = {
+            type: 'bar',
+            orientation: 'h',
+            x: [text[1].bounds[1] - text[1].bounds[0]],
+            y: [0.5],
+            text: [`${text[1].bounds[0]} - ${text[1].bounds[1]}`],
+            name: `${corpusData.values.s_attrs.text[text[0]].title} (${corpusData.values.s_attrs.text[text[0]].publishing_year})`,
+            hovertemplate: `${text[1].bounds[0]} - ${text[1].bounds[1]}`,
+          };
+          graphData.push(textData);
+        }
+        break;
+      default:
+        graphData = [
+          {
+            values: texts.map(text => text[1].counts.token),
+            labels: texts.map(text => `${corpusData.values.s_attrs.text[text[0]].title} (${corpusData.values.s_attrs.text[text[0]].publishing_year})`),
+            type: graphtype
+          }
+        ];
+        break;
+    }
+    return graphData;
+  }
+
+  async renderTokenList() {
+    let corpusData = this.data.corpus.o.staticData;
+    let corpusTokenListElement = document.querySelector('.corpus-token-list');
+    let corpusTokenList = new CorpusTokenList(corpusTokenListElement);
+    let stopwords = this.data.stopwords;
+    if (this.data.stopwords === undefined) {
+      stopwords = await this.getStopwords();
+    }
+    stopwords = Object.values(stopwords).flat();
+    let mostFrequent = Object.entries(corpusData.corpus.freqs.word)
+      .sort((a, b) => b[1] - a[1])
+      .filter(item => !stopwords.includes(corpusData.values.p_attrs.word[item[0]].toLowerCase()))
+      .slice(0, 4)
+      .map(item => parseInt(item[0]));
+    let tokenData = [];
+    for (let i = 0; i < Object.values(corpusData.corpus.freqs.word).length; i++) {
+      let resource = {
+        term: corpusData.values.p_attrs.word[i].toLowerCase(),
+        count: corpusData.corpus.freqs.word[i],
+        mostFrequent: mostFrequent.includes(i)
+      };
+      if (!Object.values(stopwords).includes(resource.term)) {
+        tokenData.push(resource);
+      }
+    }
+    corpusTokenList.add(tokenData);
+  }
+
   async renderFrequenciesGraphic() {
     let corpusData = this.data.corpus.o.staticData;
     let frequenciesTokenCategoryDropdownElement = document.querySelector('[data-target="frequencies-token-category-dropdown"]');
-    let frequenciesTokenCategoryDropdownListElement = document.querySelector("#frequencies-token-category-dropdown");
     let frequenciesGraphicElement = document.querySelector('#frequencies-graphic');
     let texts = Object.entries(corpusData.s_attrs.text.lexicon);
     let graphtype = document.querySelector('.frequencies-graph-mode-button.disabled').dataset.graphType;
-    let graphModeButtons = document.querySelectorAll('.frequencies-graph-mode-button');
-
-    frequenciesTokenCategoryDropdownListElement.addEventListener('click', (event) => {
-      frequenciesTokenCategoryDropdownElement.firstChild.textContent = event.target.innerHTML;
-      this.renderFrequenciesGraphic(corpusData);
-    });
-
-    graphModeButtons.forEach(graphModeButton => {
-      graphModeButton.addEventListener('click', (event) => {
-        graphModeButtons.forEach(btn => {
-          btn.classList.remove('disabled');
-        });
-        event.target.closest('.frequencies-graph-mode-button').classList.add('disabled');
-        this.renderFrequenciesGraphic(corpusData);
-      });
-    });
-    
     let tokenCategory = frequenciesTokenCategoryDropdownElement.firstChild.textContent.toLowerCase();
     
-    let graphData = await this.createFrequenciesGraphData(tokenCategory, texts, corpusData, graphtype);
+    let graphData = await this.createFrequenciesGraphData(tokenCategory, texts, graphtype);
     let graphLayout = {
       barmode: graphtype === 'bar' ? 'stack' : '',
-      margin: {
-        t: 20,
-        l: 50
-      },
       yaxis: {
         showticklabels: graphtype === 'markers' ? false : true
       },
@@ -177,44 +258,48 @@ class CorpusAnalysisStaticVisualization {
     Plotly.newPlot(frequenciesGraphicElement, graphData, graphLayout, config);
   }
 
-  async createFrequenciesGraphData(category, texts, corpusData, graphtype) {
+  async createFrequenciesGraphData(tokenCategory, texts, graphtype) {
+    let corpusData = this.data.corpus.o.staticData;
     let stopwords = this.data.stopwords;
     if (this.data.stopwords === undefined) {
       stopwords = await this.getStopwords();
     }
     let stopwordList = Object.values(stopwords).flat();
     let graphData = [];
-    let filteredData = Object.entries(corpusData.corpus.freqs[category])
+    let filteredData = Object.entries(corpusData.corpus.freqs[tokenCategory])
       .sort((a, b) => b[1] - a[1])
-      .filter(item => !stopwordList.includes(corpusData.values.p_attrs[category][item[0]].toLowerCase()))
+      .filter(item => !stopwordList.includes(corpusData.values.p_attrs[tokenCategory][item[0]].toLowerCase()))
       .slice(0, 5);
 
-    if (graphtype !== 'markers') {
-      for (let item of filteredData) {
-        let data = {
-          x: texts.map(text => `${corpusData.values.s_attrs.text[text[0]].title} (${corpusData.values.s_attrs.text[text[0]].publishing_year})`),
-          y: texts.map(text => text[1].freqs[category][item[0]] || 0),
-          name: corpusData.values.p_attrs[category][item[0]],
-          type: graphtype
-        };
-        graphData.push(data);
-      }
-    } else {
-      for (let item of filteredData) {
-        let size = texts.map(text => text[1].freqs[category][item[0]] || 0);
-        let data = {
-          x: texts.map(text => `${corpusData.values.s_attrs.text[text[0]].title} (${corpusData.values.s_attrs.text[text[0]].publishing_year})`),
-          y: texts.map(text => corpusData.values.p_attrs[category][item[0]]),
-          name: corpusData.values.p_attrs[category][item[0]],
-          text: texts.map(text => `${corpusData.values.p_attrs[category][item[0]]}<br>${text[1].freqs[category][item[0]] || 0}`),
-          mode: 'markers',
-          marker: {
-            size: size,
-            sizeref: 0.4
-          }
-        };
-        graphData.push(data);
-      }
+    switch (graphtype) {
+      case 'markers':
+        for (let item of filteredData) {
+          let size = texts.map(text => text[1].freqs[tokenCategory][item[0]] || 0);
+          let data = {
+            x: texts.map(text => `${corpusData.values.s_attrs.text[text[0]].title} (${corpusData.values.s_attrs.text[text[0]].publishing_year})`),
+            y: texts.map(text => corpusData.values.p_attrs[tokenCategory][item[0]]),
+            name: corpusData.values.p_attrs[tokenCategory][item[0]],
+            text: texts.map(text => `${corpusData.values.p_attrs[tokenCategory][item[0]]}<br>${text[1].freqs[tokenCategory][item[0]] || 0}`),
+            mode: 'markers',
+            marker: {
+              size: size,
+              sizeref: 0.4
+            }
+          };
+          graphData.push(data);
+        }
+        break;
+      default:
+        for (let item of filteredData) {
+          let data = {
+            x: texts.map(text => `${corpusData.values.s_attrs.text[text[0]].title} (${corpusData.values.s_attrs.text[text[0]].publishing_year})`),
+            y: texts.map(text => text[1].freqs[tokenCategory][item[0]] || 0),
+            name: corpusData.values.p_attrs[tokenCategory][item[0]],
+            type: graphtype
+          };
+          graphData.push(data);
+        }
+        break;
     }
     return graphData;
   }
@@ -320,45 +405,4 @@ class CorpusAnalysisStaticVisualization {
     }
     this.buttonRendering();
   }
-  
-  renderBoundsGraphic() {
-    let corpusData = this.data.corpus.o.staticData;
-    let boundsGraphicElement = document.querySelector('#bounds-graphic');
-
-    let graphData = [];
-    let texts = Object.entries(corpusData.s_attrs.text.lexicon);
-
-    graphData = [{
-      type: 'bar',
-      x: texts.map(text => text[1].bounds[1] - text[1].bounds[0]),
-      y: texts.map(text => corpusData.values.s_attrs.text[text[0]].title),
-      base: texts.map(text => text[1].bounds[0]),
-      text: texts.map(text => `${corpusData.values.s_attrs.text[text[0]].title} (${corpusData.values.s_attrs.text[text[0]].publishing_year})`),
-      orientation: 'h',
-      hovertemplate: '%{base} - %{x} <br>%{y}',
-      showlegend: false
-    }];
-
-    let graphLayout = {
-      barmode: 'stack',
-      type: 'bar',
-      showgrid: false,
-      xaxis: {
-        rangemode: 'nonnegative',
-        autorange: true
-      },
-      yaxis: {
-        autorange: true,
-        showticklabels: false
-      }
-    };
-
-    let config = {
-      responsive: true,
-      modeBarButtonsToRemove: ['zoom2d', 'select2d', 'lasso2d', 'zoomIn2d', 'zoomOut2d', 'autoScale2d', 'resetScale2d'],
-      displaylogo: false
-    };
-  
-    Plotly.newPlot(boundsGraphicElement, graphData, graphLayout, config);
-  }
 }

app/static/js/ResourceLists/CorpusTextInfoList.js

@@ -7,7 +7,7 @@ class CorpusTextInfoList extends ResourceList {
   }
 
   static defaultOptions = {
-    page: 4
+    page: 5
   };
 
   constructor(listContainerElement, options = {}) {
@@ -67,12 +67,12 @@ class CorpusTextInfoList extends ResourceList {
         <thead>
           <tr>
             <th>Text<span class="sort right material-icons" data-sort="title" style="cursor:pointer; color:#aa9cc9">arrow_drop_down</span></th>
-            <th>Number of tokens<span class="sort right material-icons" data-sort="num_tokens" style="cursor:pointer">arrow_drop_down</span></th>
-            <th>Number of sentences<span class="sort right material-icons" data-sort="num_sentences" style="cursor:pointer">arrow_drop_down</span></th>
-            <th>Number of unique words<span class="sort right material-icons" data-sort="num_unique_words" style="cursor:pointer">arrow_drop_down</span></th>
-            <th>Number of unique lemmas<span class="sort right material-icons" data-sort="num_unique_lemmas" style="cursor:pointer">arrow_drop_down</span></th>
-            <th>Number of unique pos<span class="sort right material-icons" data-sort="num_unique_pos" style="cursor:pointer">arrow_drop_down</span></th>
-            <th>Number of unique simple pos<span class="sort right material-icons" data-sort="num_unique_simple_pos" style="cursor:pointer">arrow_drop_down</span></th>
+            <th>Tokens<span class="sort right material-icons" data-sort="num_tokens" style="cursor:pointer">arrow_drop_down</span></th>
+            <th>Sentences<span class="sort right material-icons" data-sort="num_sentences" style="cursor:pointer">arrow_drop_down</span></th>
+            <th>Unique words<span class="sort right material-icons" data-sort="num_unique_words" style="cursor:pointer">arrow_drop_down</span></th>
+            <th>Unique lemmas<span class="sort right material-icons" data-sort="num_unique_lemmas" style="cursor:pointer">arrow_drop_down</span></th>
+            <th>Unique pos<span class="sort right material-icons" data-sort="num_unique_pos" style="cursor:pointer">arrow_drop_down</span></th>
+            <th>Unique simple pos<span class="sort right material-icons" data-sort="num_unique_simple_pos" style="cursor:pointer">arrow_drop_down</span></th>
           </tr>
         </thead>
         <tbody class="list"></tbody>

app/static/js/ResourceLists/CorpusTokenList.js

@@ -0,0 +1,121 @@
+class CorpusTokenList extends ResourceList {
+  static autoInit() {
+    for (let corpusTokenListElement of document.querySelectorAll('.corpus-token-list:not(.no-autoinit)')) {
+      new CorpusTokenList(corpusTokenListElement);
+    }
+  }
+
+  static defaultOptions = {
+    page: 100
+  };
+
+  constructor(listContainerElement, options = {}) {
+    let _options = Utils.mergeObjectsDeep(
+      CorpusTokenList.defaultOptions,
+      options
+    );
+    super(listContainerElement, _options);
+    this.listjs.list.addEventListener('click', (event) => {this.onClick(event)});
+    this.selectedItemIds = new Set();
+
+  }
+
+  get item() {
+    return (values) => {
+      return `
+        <tr class="list-item clickable hoverable">
+          <td>
+            <label class="list-action-trigger" data-list-action="select">
+              <input class="select-checkbox" type="checkbox" ${values.mostFrequent ? 'checked="checked"' : ''}>
+              <span class="disable-on-click"></span>
+            </label>
+          </td>
+          <td><span class="term"></span></td>
+          <td><span class="count"></span></td>
+          <td><span class="frequency"></span></td>
+        </tr>
+      `.trim();
+    }
+  }
+
+  get valueNames() {
+    return [
+      'term',
+      'count',
+      'mostFrequent',
+      'frequency'
+    ];
+  }
+
+  initListContainerElement() {
+    if (!this.listContainerElement.hasAttribute('id')) {
+      this.listContainerElement.id = Utils.generateElementId('corpus-token-list-');
+    }
+    let listSearchElementId = Utils.generateElementId(`${this.listContainerElement.id}-search-`);
+    this.listContainerElement.innerHTML = `
+      <div class="input-field">
+        <i class="material-icons prefix">search</i>
+        <input id="${listSearchElementId}" class="search" type="text"></input>
+        <label for="${listSearchElementId}">Search token</label>
+      </div>
+      <div class="scrollable-list-container-wrapper" style="height:276px; overflow:scroll;">
+        <div class="scrollable-list-container">
+          <table>
+            <thead>
+              <tr>
+                <th></th>
+                <th>Term</th>
+                <th>Count</th>
+                <th>Frequency</th>
+              </tr>
+            </thead>
+            <tbody class="list"></tbody>
+          </table>
+        </div>
+      </div>
+      <ul class="pagination"></ul>
+    `.trim();
+    this.listContainerElement.style.padding = '30px';
+  }
+
+  mapResourceToValue(corpusTokenData) {
+    return {
+      term: corpusTokenData.term,
+      count: corpusTokenData.count,
+      mostFrequent: corpusTokenData.mostFrequent,
+      frequency: '-'
+    };
+  }
+
+  sort() {
+    this.listjs.sort('count', {order: 'desc'});
+  }
+
+  onClick(event) {
+    let listItemElement = event.target.closest('.list-item[data-id]');
+    if (listItemElement === null) {return;}
+    let itemId = listItemElement.dataset.id;
+    let listActionElement = event.target.closest('.list-action-trigger[data-list-action]');
+    let listAction = listActionElement === null ? '' : listActionElement.dataset.listAction;
+    switch (listAction) {
+      case 'select': {
+        if (event.target.checked) {
+          this.selectedItemIds.add(itemId);
+        } else {
+          this.selectedItemIds.delete(itemId);
+        }
+        this.renderingItemSelection();
+        break;
+      }
+      default: {
+        break;
+      }
+    }
+  }
+
+  renderingItemSelection() {
+
+
+  }
+
+}

app/static/js/ResourceLists/ResourceList.js

@@ -16,6 +16,7 @@ class ResourceList {
     AdminUserList.autoInit();
     CorpusFollowerList.autoInit();
     CorpusTextInfoList.autoInit();
+    CorpusTokenList.autoInit();
   }
 
   static defaultOptions = {

app/templates/_scripts.html.j2

@@ -70,7 +70,8 @@
   'js/ResourceLists/AdminUserList.js',
   'js/ResourceLists/CorpusFollowerList.js',
   'js/ResourceLists/CorpusTextInfoList.js',
-  'js/ResourceLists/DetailledPublicCorpusList.js'
+  'js/ResourceLists/DetailledPublicCorpusList.js',
+  'js/ResourceLists/CorpusTokenList.js'
 %}
 <script src="{{ ASSET_URL }}"></script>
 {%- endassets %}

app/templates/corpora/_analysis/static_visualization.html.j2

@@ -63,7 +63,18 @@
   </div>
 </div>
 <div class="row">
-  <div class="col s12">
+  <div class="col s4">
+    <div class="card hoverable">
+      <div class="card-content">
+        <span class="card-title" id="text-proportions-title-element">Proportions</span>
+        <p>of texts within the corpus</p>
+        <div id="text-proportions-graphic"></div>
+        <a class="btn disabled text-proportions-graph-mode-button" data-graph-type="pie"><i class="material-icons">incomplete_circle</i></a>
+        <a class="btn text-proportions-graph-mode-button" data-graph-type="bar"><i class="material-icons">sort</i></a>
+      </div>
+    </div>
+  </div>
+  <div class="col s8">
     <div class="card hoverable">
       <div class="card-content">
         <span class="card-title">Text Information Overview</span>
@@ -74,46 +85,39 @@
   </div>
 </div>
 <div class="row">
-  <div class="col s4">
-    <div class="card hoverable">
-      <div class="card-content">
-        <span class="card-title">Proportions</span>
-        <p>of texts within the corpus</p>
-        <div id="text-proportions-graphic" style="width:100"></div>
-      </div>
-    </div>
-  </div>
-  <div class="col s8">
+  <div class="col s12">
     <div class="card hoverable">
       <div class="card-content">
         <span class="card-title">Frequencies</span>
-        <ul id="frequencies-token-category-dropdown" class="dropdown-content">
-          <li><a data-token-category="word">Word</a></li>
-          <li><a data-token-category="lemma">Lemma</a></li>
-          <li><a data-token-category="pos">Pos</a></li>
-          <li><a data-token-category="simple_pos">Simple_pos</a></li>
-        </ul>
-        <p>within the texts of the 5 most frequent words in the corpus</p>
-        <div id="frequencies-graphic"></div>
-        <a class="dropdown-trigger btn" data-target="frequencies-token-category-dropdown">Word<i class="material-icons right">arrow_drop_down</i></a> 
-        <a class="btn disabled frequencies-graph-mode-button" data-graph-type="bar"><i class="material-icons">equalizer</i></a>
-        <a class="btn frequencies-graph-mode-button" data-graph-type="scatter"><i class="material-icons">show_chart</i></a>
-        <a class="btn frequencies-graph-mode-button" data-graph-type="markers"><i class="material-icons">bubble_chart</i></a>
-        <a class="btn-flat modal-trigger no-autoinit" id="frequencies-stopwords-setting-modal-button" href="#frequencies-stopwords-setting-modal"><i class="material-icons grey-text text-darken-2">settings</i></a>
+        <div class="row">
+          {# <div class="col s1"></div> #}
+          <div class="col s5">
+            <div class="corpus-token-list no-autoinit"></div>
+            <a class="dropdown-trigger btn" data-target="frequencies-token-category-dropdown">Word<i class="material-icons right">arrow_drop_down</i></a>
+            <a class="btn-flat modal-trigger no-autoinit" id="frequencies-stopwords-setting-modal-button" href="#frequencies-stopwords-setting-modal">
+              <i class="material-icons grey-text text-darken-2">settings</i>
+            </a>
+            <ul id="frequencies-token-category-dropdown" class="dropdown-content">
+              <li><a data-token-category="word">Word</a></li>
+              <li><a data-token-category="lemma">Lemma</a></li>
+              <li><a data-token-category="pos">Pos</a></li>
+              <li><a data-token-category="simple_pos">Simple_pos</a></li>
+            </ul>
+          </div>
+          {# <div class="col s1"></div> #}
+          <div class="col s7">
+          <div id="frequencies-graphic"></div>
+            <a class="btn disabled frequencies-graph-mode-button" data-graph-type="bar"><i class="material-icons">stacked_bar_chart</i></a>
+            <a class="btn frequencies-graph-mode-button" data-graph-type="scatter"><i class="material-icons">show_chart</i></a>
+            <a class="btn frequencies-graph-mode-button" data-graph-type="markers"><i class="material-icons">bubble_chart</i></a>
+          </div>
+        </div>
       </div>
     </div>
   </div>
 </div>
-
 <div class="row">
-  <div class="col s12">
-    <div class="card hoverable">
-      <div class="card-content">
-        <span class="card-title">Text Bounds</span>
-        <div id="bounds-graphic"></div>
-      </div>
-    </div>
-  </div>
+
 </div>
 {% endset %}
 

app/templates/corpora/analysis.html.j2

@@ -36,14 +36,18 @@
     {% endif %}
     {% endfor %}
 
+    {{ static_visualization_extension.container_content }}
+
   </div>
 </div>
 
 
 {% for extension in extensions %}
+{% if extension.name != 'Static Visualization'%}
 <div id="{{ extension.id_prefix }}-container">
   {{ extension.container_content }}
 </div>
+{% endif %}
 {% endfor %}
 {% endblock page_content %}
 
@@ -66,328 +70,6 @@
 {{ extension.modals }}
 {% endfor %}
 
-<div class="modal" id="concordance-query-builder">
-  <div class="modal-content">
-    <div>
-      <nav>
-        <div class="nav-wrapper" id="query-builder-nav">
-          <a href="#!" class="brand-logo"><i class="material-icons">build</i>Query Builder (beta)</a>
-          <i class="material-icons close right" id="close-query-builder">close</i>
-          <a class="modal-trigger" data-manual-modal-chapter="manual-modal-query-builder" href="#manual-modal">
-            <i class="material-icons right tooltipped" id="query-builder-tutorial-info-icon" data-position="bottom" data-tooltip="Click here if you are unsure how to use the Query Builder <br>and want to find out what other options it offers.">help</i>
-          </a>
-        </div>
-      </nav>
-    </div>
-    
-    <p></p>
-    
-    <div id="query-container" class="hide">
-      
-      <div class="row">
-        <h6 class="col s2">Your Query:
-          <a class="modal-trigger" data-manual-modal-chapter="manual-modal-query-builder" href="#manual-modal">
-          <i class="material-icons left" id="general-options-query-builder-tutorial-info-icon">help_outline</i></a>
-        </h6>
-      </div>
-      <div class="row">
-        <div class="col s10" id="your-query"></div>
-        <a class="btn-small waves-effect waves-teal col s1" id="insert-query-button">
-          <i class="material-icons">send</i>
-        </a>
-      </div>
-      <p><i> Preview:</i></p>
-      <p id="query-preview"></p>
-      <br>
-    </div>
-    
-    
-    <h6>Use the following options to build your query. If you need help, click on the question mark in the upper right corner!</h6>
-    <p></p>
-    <a class="btn-large waves-effect waves-light tooltipped" id="positional-attr-button" data-position="bottom" data-tooltip="Search for any token, for example a word, a lemma or a part-of-speech tag">Add new token to your query</a>
-    <a class="btn-large waves-effect waves-light tooltipped" id="structural-attr-button" data-position="bottom" data-tooltip="Structure your query with structural attributes, for example sentences, entities or annotate the text">Add structural attributes to your query</a>
-    
-    <div id="structural-attr" class="hide">
-      <p></p>
-      <h6>Which structural attribute do you want to add to your query?<a class="modal-trigger" data-manual-modal-chapter="manual-modal-query-builder" href="#manual-modal"><i class="material-icons left" id="add-structural-attribute-tutorial-info-icon">help_outline</i></a></h6>
-      <p></p>
-      <div class="row">
-        <div class="col s12">
-          <a class="btn-small waves-effect waves-light" id="sentence">sentence</a>
-          <a class="btn-small waves-effect waves-light" id="entity">entity</a>
-          <a class="btn-small waves-effect waves-light" id="text-annotation">Meta Data</a>
-        </div>
-      </div>
-      
-
-      <div id="entity-builder" class="hide">
-        <p></p>
-        <br>
-        <div class="row">
-          <a class="btn waves-effect waves-light col s4" id="empty-entity">Add Entity of any type</a>
-          <p class="col s1 l1"></p>
-          <div class= "input-field col s3">
-              <select name="englishenttype" id="english-ent-type">
-                <option value="" disabled selected>English ent_type</option>
-                <option value="CARDINAL">CARDINAL</option>
-                <option value="DATE">DATE</option>
-                <option value="EVENT">EVENT</option>
-                <option value="FAC">FAC</option>
-                <option value="GPE">GPE</option>
-                <option value="LANGUAGE">LANGUAGE</option>
-                <option value="LAW">LAW</option>
-                <option value="LOC">LOC</option>
-                <option value="MONEY">MONEY</option>
-                <option value="NORP">NORP</option>
-                <option value="ORDINAL">ORDINAL</option>
-                <option value="ORG">ORG</option>
-                <option value="PERCENT">PERCENT</option>
-                <option value="PERSON">PERSON</option>
-                <option value="PRODUCT">PRODUCT</option>
-                <option value="QUANTITY">QUANTITY</option>
-                <option value="TIME">TIME</option>
-                <option value="WORK_OF_ART">WORK_OF_ART</option>
-              </select>
-              <label>Entity Type</label>
-          </div>
-          <div class= "input-field col s3">
-              <select name="germanenttype" id="german-ent-type">
-                <option value="" disabled selected>German ent_type</option>
-                <option value="LOC">LOC</option>
-                <option value="MISC">MISC</option>
-                <option value="ORG">ORG</option>
-                <option value="PER">PER</option>
-              </select>
-          </div>
-        </div>
-      </div>
-    
-
-      <div id="text-annotation-builder" class="hide">
-        <p></p>
-        <br>
-        <div class="row">
-          <div class= "input-field col s4 l3">
-            <select name="text-annotation-options" id="text-annotation-options">
-              <option class="btn-small waves-effect waves-light" value="address">address</option>
-              <option class="btn-small waves-effect waves-light" value="author">author</option>
-              <option class="btn-small waves-effect waves-light" value="booktitle">booktitle</option>
-              <option class="btn-small waves-effect waves-light" value="chapter">chapter</option>
-              <option class="btn-small waves-effect waves-light" value="editor">editor</option>
-              <option class="btn-small waves-effect waves-light" value="institution">institution</option>
-              <option class="btn-small waves-effect waves-light" value="journal">journal</option>
-              <option class="btn-small waves-effect waves-light" value="pages">pages</option>
-              <option class="btn-small waves-effect waves-light" value="publisher">publisher</option>
-              <option class="btn-small waves-effect waves-light" value="publishing_year">publishing year</option>
-              <option class="btn-small waves-effect waves-light" value="school">school</option>
-              <option class="btn-small waves-effect waves-light" value="title">title</option>
-            </select>
-            <label>Meta data</label>
-          </div>
-          <div class= "input-field col s7 l5">
-            <i class="material-icons prefix">mode_edit</i>
-            <input placeholder="Type in your text annotation" type="text" id="text-annotation-input">
-          </div>
-          <div class="col s1 l1 center-align">
-            <p class="btn-floating waves-effect waves-light" id="text-annotation-submit">
-              <i class="material-icons right">send</i>
-            </p>
-          </div>
-          <div class="hide" id="no-value-metadata-message"><i>No value entered!</i></div>
-        </div>
-      </div>
-    </div>
-
-    <div id="positional-attr" class="hide">
-      <p></p>
-      <div class="row" id="token-kind-selector">
-        <div class="col s5">
-          <h6>Which kind of token are you looking for? <a class="modal-trigger" data-manual-modal-chapter="manual-modal-query-builder" href="#manual-modal"><i class="material-icons left" id="token-tutorial-info-icon">help_outline</i></a></h6>
-        </div>
-        <div class="input-field col s3">
-          <select id="token-attr">
-            <option value="word" selected>word</option>
-            <option value="lemma">lemma</option>
-            <option value="english-pos">english pos</option>
-            <option value="german-pos">german pos</option>
-            <option value="simple-pos-button">simple_pos</option>
-            <option value="empty-token">empty token</option>
-          </select>
-        </div>
-      </div>
-      <p></p>
-      <div id="token-builder-content">
-        <div class="row" >
-          <div id="token-query"></div>
-          
-          <div id="word-builder">
-              <div class= "input-field col s3 l4">
-                <i class="material-icons prefix">mode_edit</i>
-                <input placeholder="Type in your word" type="text" id="word-input">
-              </div>
-          </div>
-
-          <div id="lemma-builder" class="hide" >
-              <div class= "input-field col s3 l4">
-                <i class="material-icons prefix">mode_edit</i>
-                <input placeholder="Type in your lemma" type="text" id="lemma-input">
-              </div>
-          </div>
-
-          <div id="english-pos-builder" class="hide">
-            <div class="col s6 m4 l4">
-              <div class="row">
-                <div class= "input-field col s12">
-                  <select name="englishpos" id="english-pos">
-                    <option value="default" disabled selected>English pos tagset</option>
-                    <option value="ADD">email</option>
-                    <option value="AFX">affix</option>
-                    <option value="CC">conjunction, coordinating</option>
-                    <option value="CD">cardinal number</option>
-                    <option value="DT">determiner</option>
-                    <option value="EX">existential there</option>
-                    <option value="FW">foreign word</option>
-                    <option value="HYPH">punctuation mark, hyphen</option>
-                    <option value="IN">conjunction, subordinating or preposition</option>
-                    <option value="JJ">adjective</option>
-                    <option value="JJR">adjective, comparative</option>
-                    <option value="JJS">adjective, superlative</option>
-                  </select>
-                  <label>Part-of-speech tags</label>
-                </div>
-              </div>
-            </div>
-          </div>
-          
-          <div id="german-pos-builder" class="hide">
-            <div class="col s6 m4 l4">
-              <div class="row">
-                <div class= "input-field col s12">
-                  <select name="germanpos" id="german-pos">
-                    <option value="default" disabled selected>German pos tagset</option>
-                    <option value="ADJA">adjective, attributive</option>
-                    <option value="ADJD">adjective, adverbial or predicative</option>
-                    <option value="ADV">adverb</option>
-                    <option value="APPO">postposition</option>
-                    <option value="APPR">preposition; circumposition left</option>
-                    <option value="APPRART">preposition with article</option>
-                    <option value="APZR">circumposition right</option>
-                    <option value="ART">definite or indefinite article</option>
-                  </select>
-                  <label>Part-of-speech tags</label>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <div id="simplepos-builder" class="hide">
-            <div class="col s6 m4 l4">
-              <div class="row">
-                <div class= "input-field col s12">
-                  <select name="simplepos" id="simple-pos">
-                    <option value="default" disabled selected>simple_pos tagset</option>
-                    <option value="ADJ">adjective</option>
-                    <option value="ADP">adposition</option>
-                    <option value="ADV">adverb</option>
-                    <option value="AUX">auxiliary verb</option>
-                    <option value="CONJ">coordinating conjunction</option>
-                    <option value="DET">determiner</option>
-                    <option value="INTJ">interjection</option>
-                    <option value="NOUN">noun</option>
-                    <option value="NUM">numeral</option>
-                    <option value="PART">particle</option>
-                    <option value="PRON">pronoun</option>
-                    <option value="PROPN">proper noun</option>
-                    <option value="PUNCT">punctuation</option>
-                    <option value="SCONJ">subordinating conjunction</option>
-                    <option value="SYM">symbol</option>
-                    <option value="VERB">verb</option>
-                    <option value="X">other</option>
-                  </select>
-                  <label>Simple part-of-speech tags</label>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="col s1 l1 center-align">
-              <p class="btn-floating waves-effect waves-light" id="token-submit">
-                <i class="material-icons right">send</i>
-              </p>
-          </div>
-          <div class="hide" id="no-value-message"><i>No value entered!</i></div>
-        </div>
-        <div id="token-edit-options">
-          <div class="row">
-            <h6>Options to edit your token: <a class="modal-trigger" data-manual-modal-chapter="manual-modal-query-builder" href="#manual-modal"><i class="material-icons left" id="edit-options-tutorial-info-icon">help_outline</i></a></h6>
-          </div>
-          <p></p>
-          <div class="row">
-            <div id="input-options" class="col s5 m5 l5 xl4">
-                <a id="wildcard-char" class="btn-small waves-effect waves-light tooltipped" data-position="top" data-tooltip="Look for a variable character (also called wildcard character)">Wildcard character</a>
-                <a id="option-group" class="btn-small waves-effect waves-light tooltipped" data-position="top" data-tooltip="Find character sequences from a list of options">Option Group</a>
-            </div>
-            <div class="col s3 m3 l3 xl3" id="incidence-modifiers-button">
-              <a class="dropdown-trigger btn-small  waves-effect waves-light" href="#" data-target="incidence-modifiers" data-position="top" data-tooltip="Incidence Modifiers are special characters or patterns, <br>which determine how often a character represented previously should occur.">incidence modifiers</a>
-            </div>
-            
-            <ul id="incidence-modifiers" class="dropdown-content">
-              <li><a id="one-or-more" data-token="+" class="tooltipped" data-position ="top" data-tooltip="...occurrences of the character/token before">one or more (+)</a></li>
-              <li><a id="zero-or-more" data-token="*" class="tooltipped" data-position ="top" data-tooltip="...occurrences of the character/token before">zero or more (*)</a></li>
-              <li><a id="zero-or-one" data-token="?" class="tooltipped" data-position ="top" data-tooltip="...occurrences of the character/token before">zero or one (?)</a></li>
-              <li><a id="exactly-n" class="modal-trigger tooltipped" href="#exactlyN" data-token="{n}" class="" data-position ="top" data-tooltip="...occurrences of the character/token before">exactly n ({n})</a></li>
-              <li><a id="between-n-m" class="modal-trigger tooltipped" href="#betweenNM" data-token="{n,m}" class="" data-position ="top" data-tooltip="...occurrences of the character/token before">between n and m ({n,m})</a></li>
-            </ul>
-
-            <div id="ignore-case-checkbox" class="col s2 m2 l2 xl2">
-              <p id="ignore-case">
-                  <label>
-                    <input type="checkbox" class="filled-in" />
-                    <span>Ignore Case</span>
-                  </label>
-              </p>
-            </div>
-            <div class="col s2 m2 l2 xl2" id="condition-container">
-              <a class="btn-small tooltipped waves-effect waves-light" id="or" data-position="bottom" data-tooltip="You can add another condition to your token. <br>At least one must be fulfilled">or</a>
-              <a class="btn-small tooltipped waves-effect waves-light" id="and" data-position="bottom" data-tooltip="You can add another condition to your token. <br>Both must be fulfilled">and</a>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div id="exactlyN" class="modal">
-          <div class="row modal-content">
-            <div class="input-field col s10">
-                <i class="material-icons prefix">mode_edit</i>
-                <input placeholder="type in a number for 'n'" type="text" id="n-input">
-            </div>
-            <div class="col s2">
-              <p class="btn-floating waves-effect waves-light" id="n-submit">
-                <i class="material-icons right">send</i>
-              </p>
-            </div>
-          </div>
-      </div>
-
-      <div id="betweenNM" class="modal">
-          <div class="row modal-content">
-            <div class= "input-field col s5">
-                <i class="material-icons prefix">mode_edit</i>
-                <input placeholder="number for 'n'" type="text" id="n-m-input">
-            </div>
-            <div class= "input-field col s5">
-                <i class="material-icons prefix">mode_edit</i>
-                <input placeholder="number for 'm'" type="text" id="m-input">
-            </div>
-            <div class="col s2">
-              <p class="btn-floating waves-effect waves-light" id="n-m-submit">
-                <i class="material-icons right">send</i>
-              </p>
-            </div>
-          </div>
-      </div>
-    </div>
-   
-  </div>
-</div>
 {% endblock modals %}
 
 {% block scripts %}