06_GUI.ipynb

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# all_flag"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<!-- Global site tag (gtag.js) - Google Analytics -->\n",
       "<script async src=\"https://www.googletagmanager.com/gtag/js?id=UA-168073501-1\"></script>\n",
       "<script>\n",
       "  window.dataLayer = window.dataLayer || [];\n",
       "  function gtag(){dataLayer.push(arguments);}\n",
       "  gtag('js', new Date());\n",
       "\n",
       "  gtag('config', 'UA-168073501-1');\n",
       "</script>\n",
       "\n",
       "<link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.css\" />\n",
       "<script src=\"https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.js\" data-cfasync=\"false\"></script>\n",
       "<script>\n",
       "window.cookieconsent.initialise({\n",
       "  \"palette\": {\n",
       "    \"popup\": {\n",
       "      \"background\": \"#000\"\n",
       "    },\n",
       "    \"button\": {\n",
       "      \"background\": \"#f1d600\"\n",
       "    }\n",
       "  },\n",
       "  \"content\": {\n",
       "    \"href\": \"https://github.com/Inria-Chile/risotto/blob/master/COOKIES.md\"\n",
       "  }\n",
       "});\n",
       "</script>\n",
       "\n",
       "<style>\n",
       "    @font-face {\n",
       "      font-family: \"InriaSans\";\n",
       "      src: url(\"assets/InriaSans-Regular.ttf\") format(\"truetype\");\n",
       "    }\n",
       "    body {\n",
       "      font-family: 'InriaSans';\n",
       "    }\n",
       "    .jp-Notebook-cell {\n",
       "        padding: 0 !important;\n",
       "    }\n",
       "    .jp-Cell-outputWrapper {\n",
       "        margin: 0 !important;\n",
       "    }\n",
       "    .jp-Notebook {\n",
       "        width: 100% !important;\n",
       "        padding: 0 !important;\n",
       "    }\n",
       "    .jp-RenderedHTMLCommon {\n",
       "        font-family: 'InriaSans';\n",
       "        width: 100% !important;\n",
       "        padding: 0 !important;\n",
       "        margin: 0 !important;\n",
       "    }\n",
       "    .jp-RenderedHTMLCommon p {\n",
       "        margin: 0;\n",
       "    }\n",
       "</style>\n",
       "<div align='left' style=\"margin:0;padding:2em;background:#e53411;display:flex;flex-flow:row;align-items:center\">\n",
       "    <a href='http://inria.fr'>\n",
       "        <img style=\"height:50px !important;padding-right:20px;position:relative;border-right:1px solid white;\"  src='https://github.com/Inria-Chile/risotto/raw/master/assets/inria-white.png' alt='Inria logo' title='Inria logo'/>\n",
       "    </a>\n",
       "    <a href='https://github.com/Inria-Chile/risotto' style=\"font-size:2em;color:white;padding-left:20px;text-decoration: none;\">\n",
       "        RISOTTO\n",
       "    </a>\n",
       "</div>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%html\n",
    "<!-- Global site tag (gtag.js) - Google Analytics -->\n",
    "<script async src=\"https://www.googletagmanager.com/gtag/js?id=UA-168073501-1\"></script>\n",
    "<script>\n",
    "  window.dataLayer = window.dataLayer || [];\n",
    "  function gtag(){dataLayer.push(arguments);}\n",
    "  gtag('js', new Date());\n",
    "\n",
    "  gtag('config', 'UA-168073501-1');\n",
    "</script>\n",
    "\n",
    "<link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.css\" />\n",
    "<script src=\"https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.js\" data-cfasync=\"false\"></script>\n",
    "<script>\n",
    "window.cookieconsent.initialise({\n",
    "  \"palette\": {\n",
    "    \"popup\": {\n",
    "      \"background\": \"#000\"\n",
    "    },\n",
    "    \"button\": {\n",
    "      \"background\": \"#f1d600\"\n",
    "    }\n",
    "  },\n",
    "  \"type\": \"opt-out\",\n",
    "  \"content\": {\n",
    "    \"href\": \"https://github.com/Inria-Chile/risotto/blob/master/COOKIES.md\"\n",
    "  }\n",
    "});\n",
    "</script>\n",
    "\n",
    "<style>\n",
    "    @font-face {\n",
    "      font-family: \"InriaSans\";\n",
    "      src: url(\"assets/InriaSans-Regular.ttf\") format(\"truetype\");\n",
    "    }\n",
    "    body {\n",
    "      font-family: 'InriaSans';\n",
    "    }\n",
    "    .jp-Notebook-cell {\n",
    "        padding: 0 !important;\n",
    "    }\n",
    "    .jp-Cell-outputWrapper {\n",
    "        margin: 0 !important;\n",
    "    }\n",
    "    .jp-Notebook {\n",
    "        width: 100% !important;\n",
    "        padding: 0 !important;\n",
    "    }\n",
    "    .jp-RenderedHTMLCommon {\n",
    "        font-family: 'InriaSans';\n",
    "        width: 100% !important;\n",
    "        padding: 0 !important;\n",
    "        margin: 0 !important;\n",
    "    }\n",
    "    .jp-RenderedHTMLCommon p {\n",
    "        margin: 0;\n",
    "    }\n",
    "</style>\n",
    "<div align='left' style=\"margin:0;padding:2em;background:#e53411;display:flex;flex-flow:row;align-items:center\">\n",
    "    <a href='http://inria.fr'>\n",
    "        <img style=\"height:50px !important;padding-right:20px;position:relative;border-right:1px solid white;\"  src='https://github.com/Inria-Chile/risotto/raw/master/assets/inria-white.png' alt='Inria logo' title='Inria logo'/>\n",
    "    </a>\n",
    "    <a href='https://github.com/Inria-Chile/risotto' style=\"font-size:2em;color:white;padding-left:20px;text-decoration: none;\">\n",
    "        RISOTTO\n",
    "    </a>\n",
    "</div>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# This notebook is not intended to be used as a notebook, but reather as a GUI with Voila\n",
    "from collections import defaultdict\n",
    "\n",
    "from ipywidgets import GridspecLayout, Layout, Label, Box, HBox, VBox, HTML, widgets, Button, Style, Text\n",
    "from IPython.display import display\n",
    "import itertools\n",
    "\n",
    "from risotto.artifacts import load_papers_artifact, load_papers_topics_artifacts, load_topics_artifacts"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "df5fd79eb806461fb130c9048ee403a3",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "VBox(children=(Box(children=(HTML(value='\\n    <h1>Risotto in a few words...</h1>\\n\\n    <p>\\n        RISOTTO …"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "\"\"\"\n",
    "This notebook implements RISOTTO's GUI.\n",
    "The GUI is structured as the following tree:\n",
    "\n",
    "> VBox\n",
    "    > FilterAndSearchView\n",
    "    > Box\n",
    "        > PaperSetView\n",
    "            > VBox\n",
    "                > PaperView_1\n",
    "                > PaperView_2\n",
    "                > ...\n",
    "                > PaperView_n\n",
    "                > PaperSetView.nav_widgets\n",
    "\"\"\"\n",
    "\n",
    "\n",
    "# The artifacts built in the cooking stage are loaded\n",
    "papers_artifact = load_papers_artifact().fillna(\"N/A\")\n",
    "papers_topics_artifact = load_papers_topics_artifacts()\n",
    "topics_artifact = load_topics_artifacts()\n",
    "\n",
    "\n",
    "class FilterAndSearchView:\n",
    "    \"\"\"\n",
    "    This view is responsible for rendering the filter and search widgets.\n",
    "    \"\"\"\n",
    "    \n",
    "    # Constant defining how many relevant tokens are displayed in the options\n",
    "    TOKENS_PER_TOPIC = 5\n",
    "    \n",
    "    def __init__(self, topics_artifact, on_filter_handler):\n",
    "        \"\"\"\n",
    "        Args:\n",
    "            - topics_artifact: a Pandas DataFrame with the tokens pesudocounts\n",
    "                of the each topic and subtopic.\n",
    "            - on_filter_handler: a function that's called when the 'Filter'\n",
    "                button is pressed. It receives as parameters the selected\n",
    "                topic and subtopic identifier, and the search text field value.\n",
    "        \"\"\"\n",
    "        self._topics_artifact = topics_artifact\n",
    "        self._on_filter_handler = on_filter_handler\n",
    "        self._topics, self._subtopics = self._get_topics(topics_artifact)\n",
    "    \n",
    "    @classmethod\n",
    "    def _get_topics(cls, topics_artifact):\n",
    "        \"\"\"\n",
    "        Args:\n",
    "            - topics_artifact: a Pandas DataFrame with the tokens pesudocounts\n",
    "                of the each topic and subtopic.\n",
    "        Returns:\n",
    "            - topics: list of tuples. Each tuple's first and second elements are\n",
    "                the topic's readable name and identifier, respectively.\n",
    "            - subtopics: dictionary with topic ids as key and list of tuples as\n",
    "                values. Each tuple's first and second elements are\n",
    "                the subtopic's readable name and identifier, respectively.\n",
    "        \"\"\"\n",
    "        topics = []\n",
    "        subtopics = defaultdict(list)\n",
    "        for col_name in topics_artifact.columns:\n",
    "            if \"-\" not in col_name:\n",
    "                topics.append((cls._get_dropdown_name(topics_artifact[col_name]), col_name))\n",
    "            else:\n",
    "                topic_id = col_name.split(\"-\")[0]\n",
    "                subtopics[topic_id].append((cls._get_dropdown_name(topics_artifact[col_name]), col_name))\n",
    "        return topics, subtopics\n",
    "    \n",
    "    @classmethod\n",
    "    def _get_dropdown_name(cls, series):\n",
    "        \"\"\"\n",
    "        Args:\n",
    "            - series: a Pandas Series with the tokens pseudocounts of a topic\n",
    "                or subtopic\n",
    "        Returns:\n",
    "            - str: a readable name of the topic or subtopic\n",
    "        \"\"\"\n",
    "        prefix = f\"#{series.name}\"\n",
    "        most_relevant = \", \".join(map(str, series.sort_values(ascending=False).index[:cls.TOKENS_PER_TOPIC]))\n",
    "        return f\"{prefix} ({most_relevant})\"\n",
    "        \n",
    "    def to_widget(self):\n",
    "        text_line = HTML(\"\"\"\n",
    "            <style type=\"text/css\">\n",
    "                #filter-text {\n",
    "                    position: relative;\n",
    "                }\n",
    "\n",
    "                #filter-text span {\n",
    "                    background-color: white;\n",
    "                    padding-right: 10px;\n",
    "                    color: #7d8390;\n",
    "                }\n",
    "\n",
    "                #filter-text::after {\n",
    "                    content: \"\";\n",
    "                    position: absolute;\n",
    "                    bottom: 0;\n",
    "                    left: 0;\n",
    "                    right: 0;\n",
    "                    top: 1em;\n",
    "                    border-top: 1px solid #dce0e3;\n",
    "                    z-index: -1;\n",
    "                }\n",
    "                \n",
    "                .filter-label {\n",
    "                    font-weight: bold;\n",
    "                    color: #384257;\n",
    "                    margin-bottom: 0;\n",
    "                }\n",
    "                \n",
    "                .filter-button {\n",
    "                    background-color: #384257;\n",
    "                    color: white;\n",
    "                    font-weight: bold;\n",
    "                }\n",
    "                \n",
    "                .border-top {\n",
    "                    border-top: 1px solid #dce0e3;\n",
    "                    padding-top: 1em;\n",
    "                    margin-top: 1em;\n",
    "                }\n",
    "                \n",
    "            </style>\n",
    "            <div>\n",
    "                <p id=\"filter-text\">\n",
    "                    <span>See relevant papers</span>\n",
    "                </p>\n",
    "            </div>\n",
    "        \"\"\")\n",
    "        topics_dropdown_input = widgets.Dropdown(\n",
    "            options=[(\"All\", None)] + self._topics,\n",
    "        )\n",
    "        topics_dropdown = VBox([\n",
    "            HTML(\"<p class='filter-label'>Topic</p>\"),\n",
    "            topics_dropdown_input,\n",
    "        ])\n",
    "        subtopics_dropdown_input = widgets.Dropdown(\n",
    "            options=[(\"All\", None)] + self._subtopics[topics_dropdown_input.value],\n",
    "        )\n",
    "        subtopics_dropdown = VBox([\n",
    "            HTML(\"<p class='filter-label'>Subtopic</p>\"),\n",
    "            subtopics_dropdown_input,\n",
    "        ])\n",
    "        search_textbox_input = widgets.Text()\n",
    "        search_textbox = VBox([\n",
    "            HTML(\"<p class='filter-label'>Search</p>\"),\n",
    "            search_textbox_input,\n",
    "        ])\n",
    "        search_button_input = widgets.Button(\n",
    "            description=\"Filter\",\n",
    "        )\n",
    "        search_button_input.add_class(\"filter-button\")\n",
    "        search_button = Box([\n",
    "            search_button_input\n",
    "        ],\n",
    "        layout=Layout(\n",
    "            display=\"flex\",\n",
    "            justify_content=\"center\",\n",
    "            margin=\"15px 0 0 0\"\n",
    "        ))\n",
    "        first_row = HBox([\n",
    "            topics_dropdown,\n",
    "            subtopics_dropdown,\n",
    "            search_textbox,\n",
    "            ],\n",
    "            layout=Layout(\n",
    "                display=\"flex\",\n",
    "                justify_content=\"space-between\"\n",
    "            )\n",
    "        )\n",
    "        filter_and_search_box = VBox([\n",
    "            text_line,\n",
    "            first_row,\n",
    "            search_button,\n",
    "        ])\n",
    "\n",
    "        # Event handlers\n",
    "        def handle_topic_change(event):\n",
    "            if event[\"type\"] == \"change\" and event[\"name\"] == \"value\":\n",
    "                subtopics_dropdown_input.options = [(\"All\", None)] + self._subtopics[event[\"new\"]]\n",
    "\n",
    "        def handle_subtopic_change(event):\n",
    "            if event[\"type\"] == \"change\" and event[\"name\"] == \"value\":\n",
    "                pass\n",
    "        \n",
    "        def handle_search_button_click(_):\n",
    "            self._on_filter_handler(\n",
    "                topic_id=topics_dropdown_input.value,\n",
    "                subtopic_id=subtopics_dropdown_input.value,\n",
    "                text=search_textbox_input.value\n",
    "            )\n",
    "            \n",
    "        topics_dropdown_input.observe(handle_topic_change)\n",
    "        subtopics_dropdown_input.observe(handle_subtopic_change)\n",
    "        search_button_input.on_click(handle_search_button_click)\n",
    "        \n",
    "        return filter_and_search_box\n",
    "    \n",
    "    \n",
    "class HTMLPaperView:\n",
    "    \"\"\"\n",
    "    This view is responsible for rendering a paper information.\n",
    "    \"\"\"\n",
    "    \n",
    "    def __init__(self, row, index):\n",
    "        \"\"\"\n",
    "        Args:\n",
    "            - row: a Pandas Series with the paper's data.\n",
    "        \"\"\"\n",
    "        self._row = row\n",
    "        self._index = index\n",
    "    \n",
    "    def render_open_box(self, row):\n",
    "        return \"\"\n",
    "        if True:\n",
    "            return f\"\"\"\n",
    "                <span class=\"open\"> OPEN </span>\n",
    "            \"\"\"\n",
    "        else:\n",
    "            return f\"\"\"\n",
    "                <span class=\"closed\"> CLOSED </span>\n",
    "            \"\"\"\n",
    "        \n",
    "    def to_widget(self):\n",
    "        html = HTML(\n",
    "            f\"\"\"\n",
    "            <style type=\"text/css\">\n",
    "              .paperContainer {{\n",
    "                background: #f5f5f5;\n",
    "                padding-top: 1em;\n",
    "                padding-bottom: 1em;\n",
    "                display: grid;\n",
    "                grid-template-columns: min-content auto min-content;\n",
    "                border-radius: 7px;\n",
    "                line-height: 1.5em;\n",
    "              }}\n",
    "              .paperContainer .index {{\n",
    "                padding-left: 1em;\n",
    "                font-weight: bold;\n",
    "                font-size: 1.2em;\n",
    "              }}\n",
    "              .paperContainer .left {{\n",
    "                padding-left: 1em;\n",
    "                padding-right: 1em;\n",
    "              }}\n",
    "              .paperContainer .title {{\n",
    "                font-weight: bold;\n",
    "                font-size: 1.2em;\n",
    "              }}\n",
    "              .paperContainer p {{\n",
    "                margin: 0;\n",
    "                margin-bottom: 0.5em;\n",
    "              }}\n",
    "              .paperContainer .bottomRow {{\n",
    "                display: flex;\n",
    "                flex-flow: row wrap;\n",
    "                margin-top: 0.5em;\n",
    "              }}\n",
    "              .paperContainer .bottomPair {{\n",
    "                margin-right: 20px;\n",
    "              }}\n",
    "              .paperContainer .labl {{\n",
    "                color: #acb0bb;\n",
    "              }}\n",
    "              .paperContainer .right {{\n",
    "                padding-left: 1em;\n",
    "                padding-right: 1em;\n",
    "                min-width: 8em;\n",
    "                white-space: nowrap;\n",
    "                text-align: center;\n",
    "                border-left: 1px solid #acb0bb;\n",
    "              }}\n",
    "              .paperContainer .open {{\n",
    "                padding: 0.5em;\n",
    "                font-weight: bold;\n",
    "                color: white;\n",
    "                background: #8ee27c;\n",
    "              }}\n",
    "              .paperContainer .closed {{\n",
    "                padding: 0.5em;\n",
    "                font-weight: bold;\n",
    "                color: white;\n",
    "                background: #f76370;\n",
    "              }}\n",
    "            </style>\n",
    "            <div class=\"paperContainer\">\n",
    "              <span class=\"index\">\n",
    "                {self._index}\n",
    "              </span>\n",
    "              <div class=\"left\">\n",
    "                <p class=\"title\">\n",
    "                  {self._row.title}\n",
    "                </p>\n",
    "                <p>\n",
    "                  {self._row.authors}\n",
    "                </p>\n",
    "                <p>\n",
    "                  <a href=\"http://doi.org/{self._row.doi}\">\n",
    "                    {f\"doi.org/{self._row.doi}\"}\n",
    "                  </a>\n",
    "                </p>\n",
    "                <div class=\"bottomRow\">\n",
    "                  <span class=\"bottomPair\">\n",
    "                    <span class=\"labl\"> Country: </span>\n",
    "                    <span class=\"value\">\n",
    "                      {self._row.country or \"N/A\"}\n",
    "                    </span>\n",
    "                  </span>\n",
    "                  <span class=\"bottomPair\">\n",
    "                    <span class=\"labl\"> Affiliation: </span>\n",
    "                    <span class=\"value\">\n",
    "                      {self._row.affiliation or \"N/A\"}\n",
    "                    </span>\n",
    "                  </span>\n",
    "                  <span class=\"bottomPair\">\n",
    "                    <span class=\"labl\"> DOI: </span>\n",
    "                    <span class=\"value\">\n",
    "                      {self._row.doi}\n",
    "                    </span>\n",
    "                  </span>\n",
    "                </div>\n",
    "              </div>\n",
    "              <div class=\"right\">\n",
    "                <p class=\"labl\"> Date </p>\n",
    "                <p> {self._row.publish_time} </p>\n",
    "                {self.render_open_box(self._row)}\n",
    "              </div>\n",
    "            </div>\n",
    "            \"\"\"\n",
    "        )\n",
    "        return html\n",
    "\n",
    "    \n",
    "class PaperSetView:\n",
    "    \"\"\"\n",
    "    This view is responsible for rendering a set of papers.\n",
    "    Also, the view implements pagination features.\n",
    "    \"\"\"\n",
    "    \n",
    "    def __init__(self, papers, papers_topics, page, items_per_page, parent):\n",
    "        \"\"\"\n",
    "        Args:\n",
    "            - papers: a Pandas DataFrame with the data of the papers,\n",
    "                including the `cord_uid` identifier and the PageRank scores.\n",
    "            - papers_topics: a Pandas DataFrame with the association between\n",
    "                papers, topics, and subtopics\n",
    "            - topics_artifact: a Pandas DataFrame with the tokens pesudocounts\n",
    "                of the each topic and subtopic.\n",
    "            - page: first page to render.\n",
    "            - items_per_page: how many items to render in each page.\n",
    "            - parent: the parent widget. It's required for rerendering the\n",
    "                component on updates.\n",
    "        \"\"\"\n",
    "        self._papers = papers.join(papers_topics).sort_values(by=\"pagerank\", ascending=False)\n",
    "        self._page = page\n",
    "        self._items_per_page = items_per_page\n",
    "        self._parent = parent\n",
    "        \n",
    "        self._topic_id = None\n",
    "        self._subtopic_id = None\n",
    "        self._query_text = \"\"\n",
    "        \n",
    "        self._render()\n",
    "    \n",
    "    def _decrement_page(self, _):\n",
    "        self._page += -1\n",
    "        self._render()\n",
    "    \n",
    "    def _increment_page(self, _):\n",
    "        self._page += 1\n",
    "        self._render()\n",
    "    \n",
    "    def _goto_page(self, page):\n",
    "        self._page = page\n",
    "        self._render()\n",
    "    \n",
    "    def _render(self):\n",
    "        \"\"\"\n",
    "        This method performs the view rendering, filtering the papers\n",
    "        by the selected topic and subtopic, and then by the text query.\n",
    "        It's able to rerender the component on updates modifying the\n",
    "        parent's children attribute.\n",
    "        \"\"\"\n",
    "        papers = self._papers\n",
    "        # Topic filtering\n",
    "        if self._topic_id is not None:\n",
    "            mask = papers[\"topic\"] == self._topic_id\n",
    "            if self._subtopic_id is not None:\n",
    "                mask = mask & (papers[\"subtopic\"] == self._subtopic_id)\n",
    "            papers = papers[mask]\n",
    "        # Query filtering\n",
    "        query_text = self._query_text\n",
    "        if query_text is not None and len(query_text) > 0:\n",
    "            mask = (papers[\"title\"] + papers[\"abstract\"]).str.lower().str.contains(query_text)\n",
    "            papers = papers[mask]\n",
    "        self._papers_views = self.build_papers_views(papers, self._page, self._items_per_page)\n",
    "        self._parent.children = [self.to_widget(papers)]\n",
    "        \n",
    "    @staticmethod\n",
    "    def build_papers_views(papers, page, items_per_page):\n",
    "        \"\"\"\n",
    "        Args:\n",
    "            - papers: the filtered Pandas DataFrame with the papers information.\n",
    "            - page: the page to render.\n",
    "            - items_per_page: how many items to render in each page.\n",
    "        Returns:\n",
    "            - list with the current page PaperViews.\n",
    "        \"\"\"\n",
    "        start_idx, end_idx = page * items_per_page, (page + 1) * items_per_page\n",
    "        page_subset = papers.iloc[start_idx:end_idx]\n",
    "        counter = itertools.count(start_idx + 1)\n",
    "        return [HTMLPaperView(row, next(counter)) for _index, row in page_subset.iterrows()]\n",
    "    \n",
    "    @staticmethod\n",
    "    def get_nav_widgets(page, items_per_page, num_items, decrement_handler, increment_handler, goto_handler):\n",
    "        \"\"\"\n",
    "        Args:\n",
    "            - page: current page\n",
    "            - items_per_page: how many items to display each page\n",
    "            - num_items: total number of items\n",
    "            - decrement_handler: function that it's called when the previous page\n",
    "                button is clicked\n",
    "            - increment_handler: function that it's called when the nextpage\n",
    "                button is clicked\n",
    "            - increment_handler: function that it's called to go to a specific page\n",
    "        Returns:\n",
    "            - HBox with the navigation widgets\n",
    "        \"\"\"\n",
    "        styles = HTML(\"\"\"\n",
    "            <style type=\"text/css\">\n",
    "                .nav-button {\n",
    "                    background-color: #384257;\n",
    "                    color: white;\n",
    "                    font-weight: bold;\n",
    "                    width: 3em;\n",
    "                }\n",
    "                .nav-input {\n",
    "                    width: 5em;\n",
    "                }\n",
    "            </style>\n",
    "        \"\"\")\n",
    "        last_page = num_items // items_per_page\n",
    "        nav = [styles]\n",
    "\n",
    "        prev_button_input = widgets.Button(\n",
    "            decription=\"\",\n",
    "            icon='angle-left',\n",
    "            tooltip=\"Previous page\"\n",
    "        )\n",
    "        prev_button_input.add_class(\"nav-button\")\n",
    "        prev_button_input.on_click(decrement_handler)\n",
    "        next_button_input = widgets.Button(\n",
    "            decription=\"\",\n",
    "            icon='angle-right',\n",
    "            tooltip=\"Next page\"\n",
    "        )\n",
    "        next_button_input.add_class(\"nav-button\")\n",
    "        next_button_input.on_click(increment_handler)\n",
    "        \n",
    "        first_button_input = widgets.Button(\n",
    "            decription=\"\",\n",
    "            icon='angle-double-left',\n",
    "            tooltip=\"First page\"\n",
    "        )\n",
    "        first_button_input.add_class(\"nav-button\")\n",
    "        first_button_input.on_click(lambda x: goto_handler(0))\n",
    "        last_button_input = widgets.Button(\n",
    "            decription=\"\",\n",
    "            icon='angle-double-right',\n",
    "            tooltip=\"Last page\"\n",
    "        )\n",
    "        last_button_input.add_class(\"nav-button\")\n",
    "        last_button_input.on_click(lambda x: goto_handler(last_page))\n",
    "             \n",
    "        page_dropdown_input = widgets.Dropdown(\n",
    "            value=page + 1,\n",
    "            options=[x for x in range(1, last_page + 2)],\n",
    "        )\n",
    "        page_dropdown_input.add_class(\"nav-input\")\n",
    "\n",
    "        def handle_page_change(event):\n",
    "            if event[\"type\"] == \"change\" and event[\"name\"] == \"value\":\n",
    "                goto_handler(event[\"new\"] - 1)\n",
    "\n",
    "        page_dropdown_input.observe(handle_page_change)\n",
    "\n",
    "        if page > 0:\n",
    "            nav.append(first_button_input)\n",
    "            nav.append(prev_button_input)\n",
    "\n",
    "        nav.append(HTML(f\"Page \"))\n",
    "        nav.append(page_dropdown_input)\n",
    "        nav.append(HTML(f\" of {last_page + 1}\"))\n",
    "\n",
    "        if page < last_page:\n",
    "            nav.append(next_button_input)\n",
    "            nav.append(last_button_input)\n",
    "        return HBox(nav, layout=Layout(margin='15px auto 0 auto'))\n",
    "    \n",
    "    def on_filter_handler(self, topic_id, subtopic_id, text):\n",
    "        \"\"\"\n",
    "        This metthod is invoked when the 'Filter' button is clicked.\n",
    "        Args:\n",
    "            - topic_id: new topic identifier\n",
    "            - subtopic_id: new subtopic identifier\n",
    "            - text: the search text field value\n",
    "        \"\"\"\n",
    "        self._topic_id = int(topic_id) if topic_id is not None else None\n",
    "        self._subtopic_id = int(subtopic_id.split(\"-\")[1]) if subtopic_id is not None else None\n",
    "        self._query_text = text\n",
    "        self._render()\n",
    "        \n",
    "    def to_widget(self, papers):\n",
    "        \"\"\"\n",
    "        Args:\n",
    "            - papers: the filtered Pandas DataFrame with the papers information\n",
    "        Returns:\n",
    "            - VBox with the view widgets\n",
    "        \"\"\"\n",
    "        num_results = Box([\n",
    "            HTML(f\"<p class='filter-label'>{ '{:,}'.format(len(papers)).replace(',','.') } results</p>\")\n",
    "        ])\n",
    "        num_results.add_class(\"border-top\")\n",
    "        papers_widgets = [view.to_widget() for view in self._papers_views]\n",
    "        nav_widgets = self.get_nav_widgets(\n",
    "            page=self._page,\n",
    "            items_per_page=self._items_per_page,\n",
    "            num_items=len(papers),\n",
    "            decrement_handler=self._decrement_page,\n",
    "            increment_handler=self._increment_page,\n",
    "            goto_handler=self._goto_page\n",
    "        )\n",
    "        box = VBox([num_results] + papers_widgets + [nav_widgets])\n",
    "        return box\n",
    "\n",
    "words_box = Box([HTML(\"\"\"\n",
    "    <h1>Risotto in a few words...</h1>\n",
    "\n",
    "    <p>\n",
    "        RISOTTO is a research support tool that applies state of the art unsupervised NLP and ML methods to analyze research papers freely available online.\n",
    "    </p>\n",
    "    \n",
    "    \n",
    "    <p>\n",
    "        Risotto sorts the papers by relevance. For more information see our <a href=\"/\">technical report</a>.\n",
    "    </p>\n",
    "\n",
    "    <h2> Hierarchical topic modeling </h2>\n",
    "\n",
    "    <p>\n",
    "    RISOTTO automatically models the latent topics in the COVID-19 Open Research Dataset published by Allen AI.\n",
    "    We use a two-step hierarchic topic modeling algorithm in order to build topics and subtopics for each topic.\n",
    "    Each topic and subtopic is represented with an identifier and its top-5 most relevant tokens.\n",
    "    </p>\n",
    "    <p>\n",
    "    We hope that these topics and subtopics help biomedical researchers to efficiently explore the most recent research advances regarding COVID-19.\n",
    "    </p>\n",
    "\"\"\")])\n",
    "paper_set_box = Box()\n",
    "paper_set_view = PaperSetView(\n",
    "    papers=papers_artifact,\n",
    "    papers_topics=papers_topics_artifact,\n",
    "    page=0,\n",
    "    items_per_page=10,\n",
    "    parent=paper_set_box\n",
    ")\n",
    "filter_and_search_view = FilterAndSearchView(\n",
    "    topics_artifact=topics_artifact,\n",
    "    on_filter_handler=paper_set_view.on_filter_handler,\n",
    ")\n",
    "box = VBox([\n",
    "    words_box,\n",
    "    filter_and_search_view.to_widget(),\n",
    "    paper_set_box,\n",
    "], layout=Layout(margin='auto', padding='15px', max_width='1170px', min_height='calc(100vh - 218px)'))\n",
    "box"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div align='left' style=\"width:100%;margin:0;padding:2em;overflow:hidden;background-color:#384257;display:flex;flex-flow:row;align-items:center\">\n",
       "    <a href='http://inria.fr'>\n",
       "        <img style=\"height:40px !important;padding-right:20px;position:relative;border-right:1px solid white;\"  src='https://github.com/Inria-Chile/risotto/raw/master/assets/inria-white.png' alt='Inria logo' title='Inria logo'/>\n",
       "    </a>\n",
       "    <a href='https://github.com/Inria-Chile/risotto' style=\"font-size:2em;color:white;padding-left:20px;text-decoration: none;\">\n",
       "        RISOTTO\n",
       "    </a>\n",
       "</div>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%html\n",
    "<div align='left' style=\"margin:0;padding:2em;background-color:#384257;display:flex;flex-flow:row;align-items:center\">\n",
    "    <a href='http://inria.fr'>\n",
    "        <img style=\"height:40px !important;padding-right:20px;position:relative;border-right:1px solid white;\"  src='https://github.com/Inria-Chile/risotto/raw/master/assets/inria-white.png' alt='Inria logo' title='Inria logo'/>\n",
    "    </a>\n",
    "    <a href='https://github.com/Inria-Chile/risotto' style=\"font-size:2em;color:white;padding-left:20px;text-decoration: none;\">\n",
    "        RISOTTO\n",
    "    </a>\n",
    "</div>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}