How can I add a tab next to "Files" "Running" "Clusters" in the jupyter notebook dashboard?

Question

I would like to add a new tab next to the existing tabs in jupyter notebook. I did a lot of research and I always come back to nbextensions. However, those extensions provide changes within a notebook. I wrote code (in PyCharm) that does some computations with given files. I want to implement the same code within the jupyter notebook environment by adding a tab to the menu (see image) and when the user clicks on the tab there will be an interface with more options and functions. Can someone help me with this?

desired new tab location

Something like the nbgrader extension is also good. When clicking on the tab a new window appears.

nbgrader extension

when clicking on the tab

Answer 1

I wrote this using jquery, rather than pure javascript....

define([
    'base/js/namespace',
    'jquery',
    'base/js/utils',
    './my_new_extension_code'
], function(Jupyter, $, utils, MyMainObjectList) {
    "use strict";

    var ajax = utils.ajax || $.ajax;
    // Notebook v4.3.1 enabled xsrf so use "notebooks ajax call" that includes the
    // xsrf token in the header data

    // This is the basic html framework the tab will switch to, when clicked
    // Think of it as a Template
    var myApp_html = $([
        '<div id="myApp" class="tab-pane">',
        '  <div id="myApp_toolbar" class="row list_toolbar">',
        '    <div class="col-sm-8 no-padding">',
        '      <h2 id="myApp_info" class="toolbar_info">My App Title</h2>',
        '    </div>',
        '    <div class="col-sm-4 no-padding tree-buttons">',
        '      <span id="myApp_buttons" class="pull-right toolbar_buttons">',
        '      <button id="refresh_myApp_list" title="Refresh myApp list"',
        '              class="btn btn-default btn-xs"><i',
        '                         class="fa fa-refresh"></i></button>',
        '      </span>',
        '    </div>',
        '  </div>',
        '  <div id="myApp_box_placeholder" class="row list_placeholder"',
        '            style="display: none;">',
        '    <div> Nothing to see here. </div>',
        '  </div>',
        '  <div id="myApp_box_error" class="row list_error" style="display: none;">',
        '    <div></div>',
        '  </div>',
        '  <div class="alert alert-danger version_error">',
        '  </div>',
        '  <div class="alert info">',
        '       Some info text, maybe.',
        '  </div>',
        '  <div id="myApp_box_loading" class="row list_loading" >',
        '    <div> Please wait, this may take several minutes... </div>',
        '    <div class="lds-dual-ring"></div>', 
        '  </div>',
        '  <div id="myApp_list" class="panel-group">',
        '  </div>',
        '</div>'
    ].join('\n'));

    // This is the method that load this extension
    // 'MyMainObjectList' will be defined in the file 'my_new_extension_code'
    // 'base_url' is whatever you need to call to get data to fill the template with
    function load() {
        var myApp_list = new MyMainObjectList(
            '#myApp_list',
            '#refresh_myApp_list',
            {
                base_url: /* whatever */,
            }
        );

        var base_url = /* whatever */;

        // If you have an external stylesheet, you need to add it to the head
        //     section of the page.
        $('head').append(
            $('<link>')
            .attr('rel', 'stylesheet')
            .attr('type', 'text/css')
            .attr('href', base_url + 'nbextensions/my_app/my_app.css')
        );

        // Add the template to the page (note, it will start hidden)
        $(".tab-content").append(myApp_html);

        // Add the tab that switches to your template.
        $("#tabs").append(
            $('<li>')
            .append(
                $('<a>')
                .attr('href', '#myApp')
                .attr('data-toggle', 'tab')
                .text('My New Tab')
                .click(function (e) {
                    window.history.pushState(null, null, '#myApp');
                    myApp_list.load_list();
                    console.log("My App Ran")
                })
            )
        );
    }

    // The return is to load this extension
    return {
        load_ipython_extension: load
    };
});