End-to-end Dashboard Multiple Apps With Doughnut Chart.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "e15f2a29",
   "metadata": {},
   "source": [
    "# End to End Example of Using the `aisquared` Python SDK to Create a Dashboard Integration Using a `ReverseMLWorkflow`\n",
    "\n",
    "In this tutorial, we will go over the creation of a `.air` file that uses a `ReverseMLWorkflow` to pull data from an Amazon S3 bucket and populate a dashboard into multiple end user applications.\n",
    "\n",
    "This notebook differs only slightly from the `End-to-end Dashboard.ipynb` example also in this repository.  The main difference between the two notebooks is the `query_selector` parameter in the rendering steps.  The other notebook only has the first selector published, meaning it only looks for the \"general\" tab in Dynamics 365. This notebook expands which selection and injection criteria are expected, allowing the resulting `.air` file to inject on multiple pages."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "eb7ae5b2",
   "metadata": {},
   "source": [
    "# Importing Packages\n",
    "\n",
    "Because the data to be used for the Reverse ML Workflow is already stored in S3, we only need to import the `config` subpackage from the `aisquared` package to complete this tutorial."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "id": "15c74583",
   "metadata": {},
   "outputs": [],
   "source": [
    "# import the aisquared package\n",
    "!pip install aisquared==0.3.6.dev0\n",
    "from aisquared import config"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "3c533ac4",
   "metadata": {},
   "source": [
    "# Defining the Workflow\n",
    "\n",
    "Now that we have imported the required package, let's dive head first into completing this workflow.  We are going to need to perform the following steps:\n",
    "\n",
    "- Create a harvester which looks for customer names in the webpage\n",
    "- Connect the webpage and the text we have harvested to the S3 bucket for query using the `ReverseMLWorkflow`\n",
    "- Render results in a set of steps to create the dashboard using the data related to the customer"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "id": "c387bebe",
   "metadata": {},
   "outputs": [],
   "source": [
    "# Create the harvester\n",
    "harvester = config.harvesting.TextHarvester(\n",
    "    how = 'regex',\n",
    "    regex = 'Alice Alison|Bob Bobson|Charles Charleston|David Davidson|Eric Ercison|Frederick Frederickson|Georg Georges|Hilda Henrick|Igor Igloo|John Johnson',\n",
    "    limit = 1\n",
    ")\n",
    "\n",
    "# No preprocesser is required for this dashboard\n",
    "preprocesser = None\n",
    "\n",
    "# The analytic in this workflow is a ReverseMLWorkflow\n",
    "analytic = config.analytic.ReverseMLWorkflow(\n",
    "    column = 'Lead_Name',\n",
    "    period = 1,\n",
    "    filenames = ['SOS_Sample_for_Dashboard_edit9.csv'],\n",
    "    input_type = 'text',\n",
    "    bucket = 'ai2-demo-bucket'\n",
    ")\n",
    "\n",
    "# No postprocesser is required for this dashboard\n",
    "postprocesser = None\n",
    "\n",
    "# Rendering steps for the dashboard\n",
    "rendering_steps = [\n",
    "\n",
    "    # Create the global container that will encompass the entire dashboard\n",
    "    config.rendering.ContainerRendering(\n",
    "        label = 'Dashboard Container',\n",
    "        id = 'ai2-sos-dashboard',\n",
    "        query_selector = \"[data-id='tabpanel-general'], [data-id='tabpanel-SUMMARY_TAB'], [class='record-page-decorator'], [data-test='fullscreen-layout']\",\n",
    "        height = '75',\n",
    "        position = 'static',\n",
    "        static_position = 'prepend'\n",
    "    ),\n",
    "    \n",
    "    # Create the top container that will be embedded in the global container\n",
    "    config.rendering.ContainerRendering(\n",
    "        label = 'Top Half',\n",
    "        id = 'ai2-sos-dashboard-top',\n",
    "        query_selector = '#ai2-sos-dashboard',\n",
    "        width = '100',\n",
    "        position = 'static',\n",
    "        static_position = 'append'\n",
    "    ),\n",
    "    \n",
    "    # Create the top left container embedded in the top container\n",
    "    config.rendering.ContainerRendering(\n",
    "        label = 'Top Left Data Container',\n",
    "        id = 'ai2-sos-dashboard-firm-score',\n",
    "        query_selector = '#ai2-sos-dashboard-top',\n",
    "        position = 'static',\n",
    "        static_position = 'append'\n",
    "    ),\n",
    "    \n",
    "    # Create an HTML heading in the top container\n",
    "    config.rendering.HTMLTagRendering(\n",
    "        label = 'Lead Name Label',\n",
    "        id = 'sos-contact-name-label',\n",
    "        container_id = 'ai2-sos-dashboard-firm-score',\n",
    "        html_content = '<h1 id=\"sos-contact-name-label\"></h1>',\n",
    "        extra_content_tag = 'strong',\n",
    "        injection_action = 'prepend',\n",
    "        prediction_name_key = 'name',\n",
    "        prediction_value_key = 'value',\n",
    "        prediction_name_value = 'Lead_Name'\n",
    "    ),\n",
    "    \n",
    "    # Render a table of pertinent information retrieved from the ReverseML Workflow\n",
    "    config.rendering.TableRendering(\n",
    "        label = 'Firm Market Table',\n",
    "        id = 'lead-firm-data-table',\n",
    "        table_name = '',\n",
    "        container_id = 'ai2-sos-dashboard-firm-score',\n",
    "        prediction_name_key = 'name',\n",
    "        prediction_value_key = 'value',\n",
    "        prediction_name_values = ['FirmName', 'AUM', 'NCF', 'Marketshare']\n",
    "    ),\n",
    "    \n",
    "    # Render another table\n",
    "    config.rendering.TableRendering(\n",
    "        label = 'Engagement Trends Table',\n",
    "        id = 'ai2-sos-engagment-table',\n",
    "        table_name = 'Engagement Trends YTD',\n",
    "        container_id = 'ai2-sos-dashboard-firm-score',\n",
    "        prediction_name_key = 'name',\n",
    "        prediction_value_key = 'value',\n",
    "        prediction_name_values = ['Web Visits', 'Marketing Emails', 'Outbound Calls', 'Inbound Calls']\n",
    "    ),\n",
    "    \n",
    "    # Create another heading\n",
    "    config.rendering.HTMLTagRendering(\n",
    "        label = 'Top 3 Core Label',\n",
    "        id = 'top-3-core-product-label',\n",
    "        content = 'Top 3 Core Product Rx',\n",
    "        container_id = 'ai2-sos-dashboard-firm-score',\n",
    "        html_content = '<h1 id=\"top-3-core-product-label\">Top 3 Core Product Rx</h1>',\n",
    "        extra_content_tag = 'strong',\n",
    "        injection_action = 'prepend',\n",
    "        prediction_name_key = '',\n",
    "        prediction_value_key = '',\n",
    "        prediction_name_value = ''\n",
    "    ),\n",
    "    \n",
    "    # Create an HTML tag for core recommendations\n",
    "    config.rendering.HTMLTagRendering(\n",
    "        label = 'Top Core Values',\n",
    "        id = 'top-3-core-values',\n",
    "        content = '',\n",
    "        container_id = 'ai2-sos-dashboard-firm-score',\n",
    "        html_content = '<p id=\"top-3-core-values\"></p>',\n",
    "        extra_content_tag = 'strong',\n",
    "        injection_action = 'prepend',\n",
    "        prediction_name_key = 'name',\n",
    "        prediction_value_key = 'value',\n",
    "        prediction_name_value = 'Core Recommendations'\n",
    "    ),\n",
    "    \n",
    "    # Create an HTML tag for top 3 non-core product recommendations\n",
    "    config.rendering.HTMLTagRendering(\n",
    "        label = 'Top 3 Non-core Label',\n",
    "        id = 'top-3-non-core-product',\n",
    "        content = 'Top 3 non-core Product Rx',\n",
    "        container_id = 'ai2-sos-dashboard-firm-score',\n",
    "        html_content = '<h1 id=\"top-3-non-core-product\">Top 3 Non-core Product Rx</h1>',\n",
    "        extra_content_tag = 'h1',\n",
    "        injection_action = 'prepend',\n",
    "        prediction_name_key = '',\n",
    "        prediction_value_key = '',\n",
    "        prediction_name_value = ''\n",
    "    ),\n",
    "    \n",
    "    # Create and HTML tag for top 3 non-core values\n",
    "    config.rendering.HTMLTagRendering(\n",
    "        label = 'Top Non-Core Values',\n",
    "        id = 'top-3-non-core-values',\n",
    "        content = '',\n",
    "        container_id = 'ai2-sos-dashboard-firm-score',\n",
    "        html_content = '<p id=\"top-3-non-core-values\"></p>',\n",
    "        extra_content_tag = 'strong',\n",
    "        injection_action = 'prepend',\n",
    "        prediction_name_key = 'name',\n",
    "        prediction_value_key = 'value',\n",
    "        prediction_name_value = 'Non-Core Recommendations'\n",
    "    ),\n",
    "    \n",
    "    config.rendering.DoughnutChartRendering(\n",
    "        label = 'Sales Opp Chart',\n",
    "        id = 'ai2-sos-score-chart',\n",
    "        chart_name = 'Sales Opp Score',\n",
    "        legend_icon = 'circle',\n",
    "        container_id = 'ai2-sos-dashboard-top',\n",
    "        labels = None,\n",
    "        labels_key = 'Lead_Name',\n",
    "        consolidate_rows = True,\n",
    "        prediction_name_key = 'name',\n",
    "        prediction_value_key = 'value',\n",
    "        prediction_name_value = 'Score',\n",
    "        display_legend = True\n",
    "    )\n",
    "]"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "ffced82a",
   "metadata": {},
   "source": [
    "# Compile Into a `.air` File\n",
    "\n",
    "Now that we have all of the steps, all we have to do is put them together and compile them into a `.air` file to be uploaded into the platform!"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "id": "c5926d7a",
   "metadata": {},
   "outputs": [],
   "source": [
    "# Compile all of the configuration information into a ModelConfiguration class, to\n",
    "# be compiled into a .air file\n",
    "model_config = config.ModelConfiguration(\n",
    "    'Python SDK SOS Dashboard Multiple Applications With Doughnut Chart',\n",
    "    harvesting_steps=harvester,\n",
    "    preprocessing_steps=preprocesser,\n",
    "    analytic=analytic,\n",
    "    postprocessing_steps=postprocesser,\n",
    "    rendering_steps=rendering_steps,\n",
    "    description='Version of the SOS Dashboard .air file created using the Python SDK'\n",
    ")\n",
    "\n",
    "# Compile the model\n",
    "model_config.compile()\n"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "9727a32b",
   "metadata": {},
   "source": [
    "# Upload the file to the platform\n",
    "\n",
    "We are done!  Now, you should have a file called `Python SDK SOS Dashboard Multiple Applications` in this directory.  Go ahead and upload the file to the platform to start seeing results!"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3 (ipykernel)",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.10.9"
  },
  "vscode": {
   "interpreter": {
    "hash": "0671325c08d22fc44ce2e58aedbf8efae69ce5eb9c1911bbe321ecb24080d883"
   }
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}