{% extends base %}
{% block title %}pidge web ui{% endblock %}
{% block preamble %}
<meta name="viewport" content="width=device-width, initial-scale=1" />
{% endblock %}
{% block postamble %}
<link rel="stylesheet" href="/css/webui.css">
<link rel="icon" type="image/png" sizes="16x16"  href="/assets/favicon-16x16.png">
{% endblock %}
<!-- goes in body -->
{% block contents %}
<header>
  <nav>
    <ul>
      <li>
        <a href="https://github.com/KonradUdoHannes/pidge" target="_blank">pidge on Github</a>
      </li>
      <li><a href="https://pypi.org/project/pidge/" target="_blank">pidge on PyPI</a></li>
    </ul>
  </nav>
</header>
<main class="row">
  <aside id="leftmenu" class="column leftmenu large-1-2 no-scroll">
    <nav>
      <ul>
        <li><a href="#pidge-ui">pidge UI</a></li>
        <li><a href="#ui-summary">UI summary</a></li>
        <li><a href="#what-is-pidge">What is pidge?</a></li>
        <li><a href="#project-status">Help with the MVP</a></li>
        <li><a href="#example-data">Example Data</a></li>
        <li><a href="#ui-usage">UI Usage</a></li>
      </ul>
    </nav>
  </aside>
  <div id="main" class="column limited small-12 large-2-12">
    <div id="ui">
      <h2 id="pidge-ui">pidge UI</h2>
      <div>
        {{ embed(roots.DASHBOARD) }}
      </div>
    </div>
    <article>
      <h2 id="ui-summary">What does the UI show?</h2>
      <p>
        This is the pidge UI with example data that takes the table found under
        <strong> Input Data </strong> and maps it to the table found under
        <strong> Mapped Data </strong>. In this example the column <strong> recipient</strong> is
        mapped to the column <strong> expense_category </strong>. A few mappings are already part of the example
        data and new mappings can be added via the UI. For details regrding the mapping logic see
        <a href="https://github.com/KonradUdoHannes/pidge#mapping-logic" target="_blank"> here </a>.
      </p>
      <h2 id="what-is-pidge">What is pidge?</h2>
      <div>
        <p>
          pidge is an open-source python package that helps with the creation of mappings for
          tabular string data. The main goal is to leverage a UI to make make it easy to create
          mappings, evaluate how much data is already mapped. This should speed up workflows that
          otherwise involve, updating a mapping, re-applying the updated mapping and re-evaluating
          the result.
        </p>
        <p>
          Use cases for pidge are primarily data cleaning and categorization. It consists out of the
          following two parts.
        </p>
        <ol>
          <li>
            An interactive UI to help with the creation of mappings and assessing their completeness
          </li>
          <li>
            Library functionality to apply mappings inside of data pipelines, after they have been
            exported from the UI
          </li>
        </ol>
        <p>
          This website embeds the UI component of pidge together with information about the project.
          The UI can of course also be run locally when using the project, but the hope is that this
          website illustrates pidge well enough to reach users for which it might be potentially
          useful. Typical usage would involve running the UI inside a jupyter notebook, while
          performing EDA, data cleaning or labelling.
        </p>
        <h3 id="project-status">Help with the MVP</h3>
        <p>
          The project itself is still very young and this is considered an MVP phase. In particular
          this means that any feedback by potentially interested users is very much appreciated. The
          goal is to create a too that is simple, yet useful to data scientists, data analysts and
          similar professions. If you have any feedback, please leave an
          <a href="https://github.com/KonradUdoHannes/pidge/issues" target="_blank">
            issue on github
          </a>.
          Feedback on the following aspects will be particularly helpfull:
          <ul>
            <li>Bugs</li>
            <li>Feature requests</li>
            <li>Feedback on the UI</li>
            <li>Information about similar projects</li>
            <li>Feedback on documentation</li>
          </ul>
        </p>
      </div>
      <h2 id="example-data">Example Data</h2>
      <p>
        When the UI is used locally it does not start up with any data. To give interested persons a
        quicker feeling for what the tool is capable of, this hosted version already loads with test
        data and a few test rules. The data is fictitious, but inspired expenses that I had to clean
        as a real task. There are manly two types of recipients. Shops and fast food chains. Mapping
        goals could be to label all the fast food, or to label all the supermarkets. It might also be a
        possible goal to distinguish between the supermarkets from a particular chain, that doe have
        different recipient fields depending on the branch.
      </p>
      <h2 id="ui-usage">UI Usage</h2>
      <p>The UI can be used as follows:</p>
      <ul>
        <li>
          Add a category and a pattern into the input field and click on <em>insert rule</em> to add
          the rule
        </li>
        <li>
          If the category already exists the pattern is appended, i.e. it is used in addition to the
          already existing patterns.
        </li>
        <li>In the config tab the source and target column can be adjusted</li>
        <li>
          In the config tab other data can be loaded in the form of a csv that as long as it can be
          parsed with standard pandas.read_csv settings
        </li>
        <li><em>Reset rules</em> deletes all currently stored rules</li>
        <li>
          The download button can be used to download the mapping json file for all the rules that
          where already added.
        </li>
      </ul>
    </article>
  </div>
</main>
{% endblock %}