<commit_before>{% extends "views/components/widgets/base.htm" %} {% load i18n %} {% block form %}
<div class="row widget-wrapper">
    <div class="form-group">
        <label class="control-label widget-input-label" for="" data-bind="text:label"></label>

        <div class="col-xs-12">

            <div class="csv-chart-menubar">
                <ul class="list-inline">
                    <li class="csv-chart-menubar-item active"><a href="#file-upload" data-toggle="tab">{% trans "Upload Files" %}</a></li>
                    <li class="csv-chart-menubar-item" data-bind="click: function(){resize()}"><a href="#visualize-data" data-toggle="tab" data-bind="css:{'disabled-link': uploadedFiles().length === 0}">{% trans "Visualize Data" %}</a></li>
                </ul>
            </div>
            <div>
                <!--CONTENT CONTAINER-->
                <div class="tab-content csv-chart-panel" style="margin-bottom: 20px;">

                        <!-- Upload Dataset -->
                        <div id="file-upload" class="dropzone tab-pane csv-chart-panel active" data-bind="dropzone: dropzoneOptions">
                            <div class="panel">
                                <div>
                                    <div class="pad-ver csv-chart-panel">
                                        <span class="btn btn-success fileinput-button dz-clickable" data-bind="css: uniqueidClass">
                                    <i class="fa fa-plus"></i>
                                    <span>{% trans "Add files" %}...</span>
                                        </span>

                                        <div class="btn-group pull-right">
                                            <button id="dz-remove-btn" class="btn btn-danger cancel" type="reset" data-bind="click: reset">
                                        <i class="ion ion-close"></i>
                                    </button>
                                        </div>
                                    </div>

                                    <div class="dz-previews" data-bind="css: uniqueidClass">
                                        <!-- ko foreach: filesJSON -->
                                        <div class="media pad-top bord-top">
                                            <div class="media-body">
                                                <div class="media-block">
                                                    <div class="media-left">
                                                        <!-- ko if: ko.unwrap(type).indexOf('image') >= 0 -->
                                                        <img class="dz-img" width="50" height="50" data-bind="attr: {src: ko.unwrap(url) ? url : content }">
                                                        <!-- /ko -->
                                                    </div>
                                                    <div class="media-body">
                                                        <p class="text-main text-bold mar-no text-overflow" data-bind="text: name"></p>
                                                        <!-- ko if: $data.error -->
                                                        <span class="dz-error text-danger text-sm" data-bind="text: error"></span>
                                                        <!-- /ko -->
                                                        <p class="text-sm" data-bind="html: $parent.formatSize($data)"></p>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="media-right" data-bind="click: $parent.removeFile">
                                                <button class="btn btn-xs btn-danger dz-cancel"><i class="ion ion-close"></i></button>
                                            </div>
                                        </div>
                                        <!-- /ko -->
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Visualize Dataset -->
                        <div id="visualize-data" class="tab-pane csv-chart-panel">
                            <div id="card-container" class="csv-chart-container">
                                <div class="panel-heading">
                                    <div class="" style="">
                                        <h3 id="cc-title" class="panel-title csv-chart-title">File Name Here for char title</h3>
                                    </div>
                                </div>

                                <!-- Data Entry -->
                                <div id="add-basemap-wizard" class="panel-body card-body fade in" style="padding-top: 0px;">
                                    <div id="cards" class="tab-base card-content-container outline" style="margin-bottom: 10px; margin-top: -2px;">

                                        <div id="db-arches-app-alert" class="panel data-card-alert" style=""></div>

                                                <div class="panel-body card-panel-body" style="">
                                                    <div id="" class="card-content" style="padding-top: 0px; margin-bottom: 0px; padding-bottom: 0px;">

                                                        <!-- Card Level Alert -->
                                                        <div id="summary-card-alert" class="panel install-card-alert" style="margin-bottom: 0px;"></div>

                                                        <!-- File Chart -->
                                                        <div style="">
                                                            <div class="csv-chart" data-bind="nvd3Line: {data: chartData}"></div>
                                                            
                                                            <!--Chart information-->
                                                            <div class="panel-body">
                                                                <div class="row">
                                                                    
                                                                    <!-- Upload Date -->
                                                                    <div class="hidden-xs col-sm-6 col-lg-3">
                                                                        <!-- Upload stat -->
                                                                        <div class="pad-ver media">
                                                                            <div class="media-left">
                                                                                <span class="icon-wrap icon-wrap-xs">
                                                                                    <i class="fa fa-cloud-upload fa-2x"></i>
                                                                                </span>
                                                                            </div>

                                                                            <div class="media-body">
                                                                                <p class="h3 text-thin media-heading" data-bind="text: selection().upload_time"></p>
                                                                                <small class="text-uppercase">{% trans "Upload date" %}</small>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    
                                                                    <!-- Sample ID -->
                                                                    <div class="hidden-xs col-sm-6 col-lg-3">

                                                                        <!-- Label -->
                                                                        <div class="pad-ver media">
                                                                            <div class="media-right">
                                                                                <span class="icon-wrap icon-wrap-xs">
                                                                                    <i class="fa fa-file-code-o fa-2x"></i>
                                                                                </span>
                                                                            </div>

                                                                            <div class="media-body">
                                                                                <p class="h3 text-thin media-heading">33.25 kB</p>
                                                                                <small class="text-uppercase">File Size</small>
                                                                            </div>
                                                                        </div>
                                                                    </div>

                                                                    <!-- File Selector -->
                                                                    <div class="col-lg-6">
                                                                        <div class="csv-chart-file-selector">
                                                                            <select data-bind="options: uploadedFiles, optionsText:'name', optionsValue:'url', value: selectedUrl, chosen: {width: '100%'}"></select>
                                                                        </div>
                                                                    </div>
                                                                    
                                                                </div>
                                                            </div>
                                                        </div><commit_msg>Added unique id attributes to for each upload and visualize tab so that the chart renders in the propert dataset when in a n-n cardinality, re #1738<commit_after>{% extends "views/components/widgets/base.htm" %} {% load i18n %} {% block form %}
<div class="row widget-wrapper">
    <div class="form-group">
        <label class="control-label widget-input-label" for="" data-bind="text:label"></label>

        <div class="col-xs-12">

            <div class="bord-top pad-ver">
                <ul class="list-inline">
                    <!-- <li class="active"><a href="#file-upload" data-toggle="tab">{% trans "Upload Files" %}</a></li> -->
                    <li class="active"><a data-toggle="tab" data-bind="attr: {'href': '#file-upload-' + uniqueidClass()}">{% trans "Upload Files" %}</a></li>
                    <!-- <li data-bind="click: function(){resize()}"><a href="#visualize-data" data-toggle="tab" data-bind="css:{'disabled-link': uploadedFiles().length === 0}">{% trans "Visualize Data" %}</a></li> -->
                    <li data-bind="click: function(){resize()}"><a data-toggle="tab" data-bind="attr: {'href': '#visualize-data-' + uniqueidClass()}, css:{'disabled-link': uploadedFiles().length === 0}">{% trans "Visualize Data" %}</a></li>

                </ul>
            </div>
            <div>
                <!--CONTENT CONTAINER-->
                <div class="tab-content csv-chart-panel" style="margin-bottom: 20px;">

                        <!-- Upload Dataset -->
                        <div class="dropzone tab-pane csv-chart-panel active" data-bind="dropzone: dropzoneOptions, attr: {'id': 'file-upload-' + uniqueidClass()}">
                            <div class="panel">
                                <div>
                                    <div class="pad-ver csv-chart-panel">
                                        <span class="btn btn-success fileinput-button dz-clickable" data-bind="css: uniqueidClass">
                                    <i class="fa fa-plus"></i>
                                    <span>{% trans "Add files" %}...</span>
                                        </span>

                                        <div class="btn-group pull-right">
                                            <button id="dz-remove-btn" class="btn btn-danger cancel" type="reset" data-bind="click: reset">
                                        <i class="ion ion-close"></i>
                                    </button>
                                        </div>
                                    </div>

                                    <div class="dz-previews" data-bind="css: uniqueidClass">
                                        <!-- ko foreach: filesJSON -->
                                        <div class="media pad-top bord-top">
                                            <div class="media-body">
                                                <div class="media-block">
                                                    <div class="media-left">
                                                        <!-- ko if: ko.unwrap(type).indexOf('image') >= 0 -->
                                                        <img class="dz-img" width="50" height="50" data-bind="attr: {src: ko.unwrap(url) ? url : content }">
                                                        <!-- /ko -->
                                                    </div>
                                                    <div class="media-body">
                                                        <p class="text-main text-bold mar-no text-overflow" data-bind="text: name"></p>
                                                        <!-- ko if: $data.error -->
                                                        <span class="dz-error text-danger text-sm" data-bind="text: error"></span>
                                                        <!-- /ko -->
                                                        <p class="text-sm" data-bind="html: $parent.formatSize($data)"></p>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="media-right" data-bind="click: $parent.removeFile">
                                                <button class="btn btn-xs btn-danger dz-cancel"><i class="ion ion-close"></i></button>
                                            </div>
                                        </div>
                                        <!-- /ko -->
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Visualize Dataset -->
                        <div class="tab-pane csv-chart-panel" data-bind="attr: {'id': 'visualize-data-' + uniqueidClass()}" style="border: 1px solid #ddd; border-bottom-width: 0px; margin-top: 0px;">
                            <div id="card-container" class="panel card-panel">
                                <div class="panel-heading">
                                    <div class="" style="">
                                        <h3 id="cc-title" class="panel-title card-main-title">Chart title</h3>
                                    </div>
                                </div>

                                <!-- Alert Panel -->
                                <div id="basemap-delete-alert" class="panel wizard-data-card-alert" style=""></div>

                                <!-- Data Entry -->
                                <div id="add-basemap-wizard" class="panel-body card-body fade in" style="padding-top: 0px;">
                                    <div id="cards" class="tab-base card-content-container outline" style="margin-bottom: 10px; margin-top: -2px;">

                                        <div id="db-arches-app-alert" class="panel data-card-alert" style=""></div>

                                                <div class="panel-body card-panel-body" style="">
                                                    <div id="" class="card-content" style="padding-top: 0px; margin-bottom: 0px; padding-bottom: 0px;">

                                                        <!-- Card Level Alert -->
                                                        <div id="summary-card-alert" class="panel install-card-alert" style="margin-bottom: 0px;"></div>

                                                        <!-- File Chart -->
                                                        <div style="">
                                                            <div class="csv-chart" data-bind="nvd3Line: {data: chartData}, css: uniqueidClass"></div>
                                                            <!--Chart information-->
                                                            <div class="panel-body">
                                                                <div class="row">
                                                                    <div class="col-lg-6">
                                                                        <div class="row">
                                                                            <div class="col-xs-3">

                                                                                <!-- Upload stat -->
                                                                                <div class="pad-ver media">
                                                                                    <div class="media-left">
                                                                                        <span class="icon-wrap icon-wrap-xs">
                                                                                            <i class="fa fa-cloud-upload fa-2x"></i>
                                                                                        </span>
                                                                                    </div>

                                                                                    <div class="media-body">
                                                                                        <p class="h3 text-thin media-heading" data-bind="text: selection().upload_time"></p>
                                                                                        <small class="text-uppercase">{% trans "Upload date" %}</small>
                                                                                    </div>
                                                                                </div>

                                                                                <!--Progress bar-->
                                                                                <div class="progress progress-xs progress-dark-base mar-no">
                                                                                    <div class="progress-bar progress-bar-light" style="width: 30%"></div>
                                                                                </div>

                                                                            </div>
                                                                            <div class="col-xs-3">

                                                                                <!-- Label -->
                                                                                <div class="pad-ver media">
                                                                                    <div class="media-right">
                                                                                        <span class="icon-wrap icon-wrap-xs">
                                                                                            <i class="fa fa-tag fa-2x"></i>
                                                                                        </span>
                                                                                    </div>

                                                                                    <div class="media-body">
                                                                                        <p class="h3 text-thin media-heading">Area 06</p>
                                                                                        <small class="text-uppercase">Sample Id</small>
                                                                                    </div>
                                                                                </div>

                                                                            </div>
                                                                            <div class="col-xs-6">
                                                                                <div>
                                                                                    <select data-bind="options: uploadedFiles, optionsText:'name', optionsValue:'url', value: selectedUrl, chosen: {width: '100%'}"></select>
                                                                                </div>
                                                                                <!-- Label -->

                                                                            </div>
                                                                        </div>
                                                                    </div>

                                                                </div>
                                                            </div>
                                                        </div>
{'fraction_non_alphanumeric': 0.10469671725131716, 'fraction_numerical': 0.0038276219210158957, 'mean_word_length': 0.5533328670350424, 'pattern_counts': {'":': 0, '<': 311, '<?xml version=': 0, '>': 313, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 446, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5561177', 'n_tokens_mistral': 3652, 'n_tokens_neox': 3433, 'n_words': 799}