From 24a661f98eec896058a96c6f6799897096ab1f7d Mon Sep 17 00:00:00 2001 From: apdn7 <106378158+apdn7@users.noreply.github.com> Date: Wed, 18 Sep 2024 18:02:14 +0900 Subject: [PATCH 1/3] 473 base files --- AnalysisPlatform.bat | 1214 +-- VERSION | 6 +- _original_path_list.log | 31 +- ap/__init__.py | 14 +- ap/api/aggregate_plot/controllers.py | 3 + ap/api/aggregate_plot/services.py | 9 +- ap/api/analyze/services/pca.py | 2 + ap/api/calendar_heatmap/services.py | 3 + ap/api/categorical_plot/services.py | 3 +- ap/api/common/services/show_graph_database.py | 37 +- ap/api/common/services/show_graph_services.py | 248 +- ap/api/common/services/sql_generator.py | 411 +- ap/api/common/services/utils.py | 200 +- ap/api/external_api/controllers.py | 89 +- ap/api/external_api/services.py | 41 +- ap/api/graphical_lasso/services.py | 4 + ap/api/heatmap/services.py | 12 +- ap/api/parallel_plot/controllers.py | 86 +- ap/api/parallel_plot/services.py | 82 +- ap/api/ridgeline_plot/services.py | 6 + ap/api/sankey_plot/sankey_glasso/grplasso.py | 4 + .../sankey_glasso/sankey_services.py | 11 +- ap/api/scatter_plot/services.py | 114 +- ap/api/setting_module/controllers.py | 247 +- ap/api/setting_module/services/autolink.py | 44 +- ap/api/setting_module/services/csv_import.py | 246 +- ap/api/setting_module/services/data_import.py | 219 +- ap/api/setting_module/services/equations.py | 18 +- .../setting_module/services/factory_import.py | 89 +- .../services/master_data_transform_pattern.py | 104 + .../services/polling_frequency.py | 9 +- .../setting_module/services/process_delete.py | 4 +- .../services/show_latest_record.py | 260 +- .../software_workshop_etl_services.py | 332 + .../services/v2_etl_services.py | 37 +- ap/api/table_viewer/controllers.py | 13 +- ap/api/trace_data/controllers.py | 9 +- ap/api/trace_data/services/csv_export.py | 50 +- ap/api/trace_data/services/data_count.py | 4 +- ap/common/assets/assets.json | 477 +- ap/common/common_utils.py | 246 +- ap/common/constants.py | 113 +- ap/common/datetime_format_utils.py | 71 + ap/common/memoize.py | 12 +- ap/common/pydn/dblib/db_common.py | 1 + ap/common/pydn/dblib/db_proxy.py | 28 +- ap/common/pydn/dblib/mssqlserver.py | 34 +- ap/common/pydn/dblib/mysql.py | 4 +- ap/common/pydn/dblib/oracle.py | 5 +- ap/common/pydn/dblib/postgresql.py | 17 +- ap/common/pydn/dblib/sqlite.py | 18 + ap/common/scheduler.py | 30 +- ap/common/services/csv_content.py | 31 +- ap/common/services/csv_header_wrapr.py | 4 +- ap/common/services/data_type.py | 9 +- ap/common/services/error_message_handler.py | 32 +- ap/common/services/form_env.py | 8 + ap/common/services/jp_to_romaji_utils.py | 41 + ap/common/services/sse.py | 16 +- ap/config/basic_config.yml | 18 +- ap/equations/core.py | 120 +- ap/equations/error.py | 7 + ap/script/migrate_cfg_data_source_csv.py | 33 +- ap/script/migrate_cfg_process.py | 19 +- ap/script/migrate_cfg_process_column.py | 29 + ap/script/migrate_delta_time.py | 41 + ap/script/migrate_m_function.py | 23 +- ap/script/migrate_process_file_name_column.py | 9 + ap/script/setup_for_e2e.py | 93 + ap/setting_module/controllers.py | 4 +- ap/setting_module/models.py | 184 +- ap/setting_module/schemas.py | 5 + .../services/background_process.py | 2 +- .../services/backup_and_restore/__init__.py | 0 .../services/backup_and_restore/backup.py | 86 + .../backup_and_restore/backup_file_manager.py | 101 + .../backup_and_restore/duplicated_check.py | 58 + .../services/backup_and_restore/jobs.py | 80 + .../services/backup_and_restore/restore.py | 100 + ap/setting_module/services/process_config.py | 197 +- .../services/register_from_file.py | 637 +- ap/setting_module/services/trace_config.py | 8 +- .../aggregate_plot/css/aggregate_plot.css | 3 +- ap/static/aggregate_plot/js/aggregate_plot.js | 418 +- .../aggregate_plot/js/aggregation_chart.js | 201 +- ap/static/analyze/css/anomaly_detection.css | 15 +- ap/static/analyze/css/graphical_lasso.css | 14 +- ap/static/analyze/css/toastr.css | 248 +- ap/static/analyze/js/generateJson.js | 1270 +-- ap/static/analyze/js/graphical_lasso.js | 108 +- ap/static/analyze/js/graphical_lasso_sigma.js | 10 +- ap/static/analyze/js/hotelling_biplot.js | 7 +- ap/static/analyze/js/hotelling_common.js | 152 +- .../analyze/js/hotelling_q_contribution.js | 25 +- ap/static/analyze/js/hotelling_scatters.js | 77 +- .../analyze/js/hotelling_t2_contribution.js | 31 +- ap/static/analyze/js/hotelling_timeseries.js | 210 +- ap/static/analyze/js/pca.js | 355 +- ap/static/analyze/js/pca_toastr.js | 23 +- .../calendar_heatmap/css/calendar_heatmap.css | 9 +- .../calendar_heatmap/js/calendar_heatmap.js | 190 +- .../js/calendar_heatmap_plotly.js | 52 +- .../categorical_plot/css/categorical_plot.css | 50 +- ap/static/categorical_plot/css/toastr.css | 248 +- ...ategorical_histogram_with_density_curve.js | 55 +- .../categorical_plot/js/categorical_plot.js | 411 +- .../js/categorical_plot_utils.js | 94 +- ap/static/co_occurrence/css/co_occurrence.css | 8 +- .../co_occurrence/css/co_occurrence_csv.css | 20 +- .../co_occurrence/js/co_occurrence_csv.js | 73 +- ap/static/co_occurrence/js/pareto_plot.js | 12 +- ap/static/common/css/components.css | 40 +- ap/static/common/css/data-finder.css | 42 +- ap/static/common/css/dragndrop.css | 23 +- ap/static/common/css/fSelect.css | 4 +- ap/static/common/css/graph_nav.css | 26 +- ap/static/common/css/jsuites.css | 1380 +-- ap/static/common/css/jump_function.css | 12 +- ap/static/common/css/main.css | 266 +- ap/static/common/css/multi_level_dropdown.css | 63 + ap/static/common/css/pagination.css | 240 +- ap/static/common/css/shepherd.css | 93 +- ap/static/common/css/toastr.css | 248 +- ap/static/common/css/user-setting-table.css | 60 +- ap/static/common/js/ap_tour.js | 212 +- ap/static/common/js/auto-update-common.js | 5 +- ap/static/common/js/base.js | 1302 ++- .../common/js/cat_facet_label_filter_modal.js | 246 +- ap/static/common/js/clipboard_utils.js | 153 +- ap/static/common/js/column_ordering.js | 238 +- ap/static/common/js/components.js | 1108 +- ap/static/common/js/config_data_interface.js | 197 +- ap/static/common/js/data-finder.js | 665 +- ap/static/common/js/data_point_info_table.js | 173 +- ap/static/common/js/database-config.js | 48 +- ap/static/common/js/datetime_label_format.js | 5 +- ap/static/common/js/divide_by_calendar.js | 352 +- ap/static/common/js/dn-custom-select.js | 85 +- ap/static/common/js/graph_nav.js | 49 +- ap/static/common/js/jump_function.js | 633 +- ap/static/common/js/save_load_user_input.js | 878 +- ap/static/common/js/summary_table.js | 64 +- ap/static/common/js/take_screenshot.js | 39 +- ap/static/common/js/terms_of_use.js | 33 +- ap/static/common/js/utils.js | 1980 ++-- ap/static/common/js/validation.js | 104 +- ap/static/heatmap/css/heatmap.css | 10 +- ap/static/heatmap/js/heatmap_main.js | 846 +- ap/static/heatmap/js/heatmap_plot.js | 237 +- .../daterangepicker-utils.js | 12 +- .../css/multiple_scatter_plot.css | 9 +- .../multiple_scatter_plot/js/heatmap_plot.js | 74 +- .../js/multiple_scatter_contour.js | 114 +- .../js/multiple_scatter_histogram.js | 39 +- .../js/multiple_scatter_plot.js | 317 +- ap/static/parallel_plot/css/parallel_plot.css | 27 +- ap/static/parallel_plot/js/parallel_plot.js | 834 +- .../parallel_plot/js/parallel_properties.js | 37 +- ap/static/parallel_plot/js/parallel_utils.js | 549 +- ap/static/plot_view/css/plot_view.css | 11 +- ap/static/plot_view/js/plot_view.js | 1 - ap/static/ridgeline_plot/css/ridgeline.css | 15 +- ap/static/ridgeline_plot/js/ridgeline_plot.js | 662 +- .../ridgeline_plot/js/ridgeline_plot_utils.js | 30 +- ap/static/ridgeline_plot/js/rlp_template.js | 506 +- ap/static/sankey_plot/css/sankey_plot.css | 8 +- ap/static/sankey_plot/js/sankey_plot.js | 318 +- ap/static/sankey_plot/js/sankey_scp.js | 114 +- ap/static/scatter_plot/css/scatter_plot.css | 10 +- ap/static/scatter_plot/js/scatter_chart.js | 127 +- ap/static/scatter_plot/js/scatter_plot.js | 1242 ++- ap/static/scatter_plot/js/scp_heatmap_plot.js | 90 +- ap/static/scatter_plot/js/scp_violin_plot.js | 115 +- .../setting_module/css/background_process.css | 20 +- .../css/backup_restore_modal.css | 95 + ap/static/setting_module/css/config_view.css | 60 +- .../setting_module/css/data_type_dropdown.css | 76 + .../css/filter_visualization.css | 32 +- ap/static/setting_module/css/index.css | 4 +- ap/static/setting_module/css/master_cfg.css | 57 +- .../setting_module/css/master_config.css | 39 +- .../setting_module/css/proc_config_modal.css | 348 +- .../setting_module/css/register_from_file.css | 16 +- ap/static/setting_module/css/setting_view.css | 2 +- ap/static/setting_module/css/top_view.css | 16 +- ap/static/setting_module/css/trace_config.css | 31 +- ap/static/setting_module/js/auto_link.js | 177 +- .../setting_module/js/background_process.js | 121 +- .../setting_module/js/cfg_filter_funcs.js | 797 +- .../setting_module/js/cfg_filter_main.js | 75 +- ap/static/setting_module/js/config_view.js | 117 +- .../js/data_type_dropdown/constant.js | 155 + .../js/data_type_dropdown/controller.js | 29 + .../js/data_type_dropdown/core.js | 267 + .../js/data_type_dropdown/event.js | 196 + .../js/data_type_dropdown/helper.js | 763 ++ .../js/data_type_dropdown/type_definition.js | 65 + ap/static/setting_module/js/db_config.js | 1573 +-- .../js/failed_cast_data_modal.js | 42 +- .../js/function_config_modals.js | 2665 +++-- .../js/function_data_type_dropdown.js | 97 +- .../setting_module/js/graph_visualization.js | 726 +- ap/static/setting_module/js/master_config.js | 21 +- ap/static/setting_module/js/npm.js | 24 +- .../setting_module/js/parse_data_utils.js | 353 + .../setting_module/js/predict_data_type.js | 11 +- ap/static/setting_module/js/proc_config.js | 378 +- .../js/proc_config_date_time_format.js | 437 + .../setting_module/js/proc_config_modals.js | 3312 +++--- .../js/process_config_section.js | 1475 +++ .../setting_module/js/register_from_file.js | 1492 ++- ap/static/setting_module/js/system.js | 188 + ap/static/setting_module/js/trace_config.js | 819 +- ap/static/table_viewer/css/table_viewer.css | 66 +- ap/static/table_viewer/js/table_viewer.js | 73 +- ap/static/table_viewer/lang/English.json | 46 +- ap/static/table_viewer/lang/Japanese.json | 46 +- .../tile_interface/css/tile_interface.css | 24 +- ap/static/tile_interface/js/tile_interface.js | 7 +- ap/static/trace_data/css/trace_data.css | 63 +- ap/static/trace_data/js/trace_data.js | 646 +- .../js/trace_data_categorical_table.js | 521 +- .../trace_data/js/trace_data_cross_hair.js | 286 +- .../trace_data/js/trace_data_histogram.js | 43 +- .../js/trace_data_histogram_with_kde.js | 34 +- .../trace_data/js/trace_data_scatter_plot.js | 276 +- .../js/trace_data_step_bar_chart.js | 48 +- .../trace_data/js/trace_data_summary_table.js | 36 +- .../trace_data/js/trace_data_time_series.js | 1112 +- .../trace_data/js/trace_data_whisker_plot.js | 61 +- ap/table_viewer/controllers.py | 2 +- ap/templates/500.html | 21 +- .../aggregate_plot/aggregate_plot.html | 84 +- ap/templates/analyze/graphical_lasso.html | 212 +- ap/templates/analyze/hotelling_tsquare.html | 400 +- ap/templates/base.html | 432 +- .../calendar_heatmap/calendar_heatmap.html | 111 +- .../categorical_plot/categorical_plot.html | 184 +- .../co_occurrence/co_occurrence_csv.html | 275 +- ap/templates/footer.html | 4 +- ap/templates/graph_nav.html | 97 +- ap/templates/header.html | 386 +- ap/templates/heatmap/heatmap.html | 348 +- ap/templates/i18n.html | 610 +- ap/templates/jump.html | 252 +- ap/templates/macros.html | 3470 ++++-- ap/templates/messages.html | 26 +- ap/templates/modal.html | 1215 ++- .../multiple_scatter_plot.html | 92 +- ap/templates/none.html | 35 +- ap/templates/parallel_plot/parallel_plot.html | 192 +- ap/templates/plot_view/plot_view.html | 133 +- .../ridgeline_plot/ridgeline_plot.html | 104 +- ap/templates/sankey_plot/sankey_plot.html | 305 +- ap/templates/scatter_plot/scatter_plot.html | 376 +- ap/templates/setting_module/_filter_line.html | 216 +- .../setting_module/_filter_machine.html | 229 +- .../setting_module/_filter_others.html | 255 +- .../setting_module/_filter_partno.html | 217 +- ap/templates/setting_module/about.html | 20 +- .../setting_module/background_job.html | 373 +- ap/templates/setting_module/config.html | 161 +- ap/templates/setting_module/db_config.html | 332 +- .../setting_module/db_config_modals.html | 958 +- ap/templates/setting_module/failed_jobs.html | 303 +- .../setting_module/filter_config.html | 97 +- .../setting_module/filter_config_modals.html | 66 +- ap/templates/setting_module/master_cfg.html | 822 +- ap/templates/setting_module/proc_config.html | 249 +- .../setting_module/proc_config_modals.html | 1857 +++- .../setting_module/register_by_file.html | 472 +- ap/templates/setting_module/system.html | 170 + ap/templates/setting_module/terms_of_use.html | 17 +- ap/templates/setting_module/trace_config.html | 422 +- ap/templates/sidebar.html | 436 +- ap/templates/table_viewer/index.html | 211 +- .../tile_interface/tile_dashboard.html | 42 +- .../tile_interface/tile_search_by_use.html | 85 +- ap/templates/trace_data/trace_data.html | 214 +- ap/trace_data/schemas.py | 47 + ap/trace_data/transaction_model.py | 49 +- ap/translations/ar/LC_MESSAGES/messages.mo | Bin 107760 -> 113526 bytes ap/translations/ar/LC_MESSAGES/messages.po | 258 +- ap/translations/bg/LC_MESSAGES/messages.mo | Bin 119482 -> 125292 bytes ap/translations/bg/LC_MESSAGES/messages.po | 258 +- ap/translations/ca/LC_MESSAGES/messages.mo | Bin 98291 -> 104043 bytes ap/translations/ca/LC_MESSAGES/messages.po | 258 +- ap/translations/cs/LC_MESSAGES/messages.mo | Bin 95842 -> 101584 bytes ap/translations/cs/LC_MESSAGES/messages.po | 258 +- ap/translations/cy/LC_MESSAGES/messages.mo | Bin 94508 -> 100247 bytes ap/translations/cy/LC_MESSAGES/messages.po | 258 +- ap/translations/da/LC_MESSAGES/messages.mo | Bin 94233 -> 99966 bytes ap/translations/da/LC_MESSAGES/messages.po | 258 +- ap/translations/de/LC_MESSAGES/messages.mo | Bin 98666 -> 104401 bytes ap/translations/de/LC_MESSAGES/messages.po | 258 +- ap/translations/el/LC_MESSAGES/messages.mo | Bin 123604 -> 129400 bytes ap/translations/el/LC_MESSAGES/messages.po | 259 +- ap/translations/en/LC_MESSAGES/messages.mo | Bin 97072 -> 102853 bytes ap/translations/en/LC_MESSAGES/messages.po | 273 +- ap/translations/es/LC_MESSAGES/messages.mo | Bin 98591 -> 104347 bytes ap/translations/es/LC_MESSAGES/messages.po | 259 +- ap/translations/fa/LC_MESSAGES/messages.mo | Bin 110251 -> 116005 bytes ap/translations/fa/LC_MESSAGES/messages.po | 259 +- ap/translations/fi/LC_MESSAGES/messages.mo | Bin 94873 -> 100607 bytes ap/translations/fi/LC_MESSAGES/messages.po | 259 +- ap/translations/fr/LC_MESSAGES/messages.mo | Bin 100375 -> 106134 bytes ap/translations/fr/LC_MESSAGES/messages.po | 261 +- ap/translations/gd/LC_MESSAGES/messages.mo | Bin 101160 -> 106907 bytes ap/translations/gd/LC_MESSAGES/messages.po | 258 +- ap/translations/he/LC_MESSAGES/messages.mo | Bin 104063 -> 109823 bytes ap/translations/he/LC_MESSAGES/messages.po | 259 +- ap/translations/hi/LC_MESSAGES/messages.mo | Bin 132890 -> 138706 bytes ap/translations/hi/LC_MESSAGES/messages.po | 258 +- ap/translations/hr/LC_MESSAGES/messages.mo | Bin 94802 -> 100551 bytes ap/translations/hr/LC_MESSAGES/messages.po | 258 +- ap/translations/hu/LC_MESSAGES/messages.mo | Bin 98534 -> 104274 bytes ap/translations/hu/LC_MESSAGES/messages.po | 259 +- ap/translations/id/LC_MESSAGES/messages.mo | Bin 94438 -> 100173 bytes ap/translations/id/LC_MESSAGES/messages.po | 259 +- ap/translations/is/LC_MESSAGES/messages.mo | Bin 95119 -> 100844 bytes ap/translations/is/LC_MESSAGES/messages.po | 259 +- ap/translations/it/LC_MESSAGES/messages.mo | Bin 97961 -> 103713 bytes ap/translations/it/LC_MESSAGES/messages.po | 259 +- ap/translations/ja/LC_MESSAGES/messages.mo | Bin 108009 -> 114546 bytes ap/translations/ja/LC_MESSAGES/messages.po | 225 +- ap/translations/jv/LC_MESSAGES/messages.mo | Bin 93515 -> 99254 bytes ap/translations/jv/LC_MESSAGES/messages.po | 259 +- ap/translations/km/LC_MESSAGES/messages.mo | Bin 136588 -> 142408 bytes ap/translations/km/LC_MESSAGES/messages.po | 259 +- ap/translations/ko/LC_MESSAGES/messages.mo | Bin 97980 -> 103732 bytes ap/translations/ko/LC_MESSAGES/messages.po | 259 +- ap/translations/lb/LC_MESSAGES/messages.mo | Bin 96649 -> 102379 bytes ap/translations/lb/LC_MESSAGES/messages.po | 258 +- ap/translations/mi/LC_MESSAGES/messages.mo | Bin 96888 -> 102632 bytes ap/translations/mi/LC_MESSAGES/messages.po | 259 +- ap/translations/mk/LC_MESSAGES/messages.mo | Bin 121248 -> 127056 bytes ap/translations/mk/LC_MESSAGES/messages.po | 259 +- ap/translations/mn/LC_MESSAGES/messages.mo | Bin 116148 -> 121936 bytes ap/translations/mn/LC_MESSAGES/messages.po | 259 +- ap/translations/ms/LC_MESSAGES/messages.mo | Bin 94894 -> 100629 bytes ap/translations/ms/LC_MESSAGES/messages.po | 259 +- ap/translations/my/LC_MESSAGES/messages.mo | Bin 141433 -> 147244 bytes ap/translations/my/LC_MESSAGES/messages.po | 259 +- ap/translations/ne/LC_MESSAGES/messages.mo | Bin 133961 -> 139751 bytes ap/translations/ne/LC_MESSAGES/messages.po | 259 +- ap/translations/nl/LC_MESSAGES/messages.mo | Bin 96744 -> 102480 bytes ap/translations/nl/LC_MESSAGES/messages.po | 259 +- ap/translations/no/LC_MESSAGES/messages.mo | Bin 93834 -> 99565 bytes ap/translations/no/LC_MESSAGES/messages.po | 259 +- ap/translations/pa/LC_MESSAGES/messages.mo | Bin 129494 -> 135305 bytes ap/translations/pa/LC_MESSAGES/messages.po | 259 +- ap/translations/pl/LC_MESSAGES/messages.mo | Bin 96849 -> 102597 bytes ap/translations/pl/LC_MESSAGES/messages.po | 259 +- ap/translations/pt/LC_MESSAGES/messages.mo | Bin 97979 -> 103729 bytes ap/translations/pt/LC_MESSAGES/messages.po | 259 +- ap/translations/ro/LC_MESSAGES/messages.mo | Bin 98077 -> 103828 bytes ap/translations/ro/LC_MESSAGES/messages.po | 259 +- ap/translations/ru/LC_MESSAGES/messages.mo | Bin 119416 -> 125206 bytes ap/translations/ru/LC_MESSAGES/messages.po | 259 +- ap/translations/sd/LC_MESSAGES/messages.mo | Bin 107517 -> 113286 bytes ap/translations/sd/LC_MESSAGES/messages.po | 257 +- ap/translations/si/LC_MESSAGES/messages.mo | Bin 131644 -> 137465 bytes ap/translations/si/LC_MESSAGES/messages.po | 259 +- ap/translations/sk/LC_MESSAGES/messages.mo | Bin 96293 -> 102040 bytes ap/translations/sk/LC_MESSAGES/messages.po | 259 +- ap/translations/sq/LC_MESSAGES/messages.mo | Bin 99577 -> 105338 bytes ap/translations/sq/LC_MESSAGES/messages.po | 259 +- ap/translations/sv/LC_MESSAGES/messages.mo | Bin 94595 -> 100328 bytes ap/translations/sv/LC_MESSAGES/messages.po | 259 +- ap/translations/te/LC_MESSAGES/messages.mo | Bin 138004 -> 143810 bytes ap/translations/te/LC_MESSAGES/messages.po | 259 +- ap/translations/th/LC_MESSAGES/messages.mo | Bin 130877 -> 136685 bytes ap/translations/th/LC_MESSAGES/messages.po | 259 +- ap/translations/tl/LC_MESSAGES/messages.mo | Bin 99246 -> 105010 bytes ap/translations/tl/LC_MESSAGES/messages.po | 259 +- ap/translations/tr/LC_MESSAGES/messages.mo | Bin 95923 -> 101664 bytes ap/translations/tr/LC_MESSAGES/messages.po | 259 +- ap/translations/vi/LC_MESSAGES/messages.mo | Bin 104955 -> 110751 bytes ap/translations/vi/LC_MESSAGES/messages.po | 266 +- .../zh_Hans_CN/LC_MESSAGES/messages.mo | Bin 89958 -> 95691 bytes .../zh_Hans_CN/LC_MESSAGES/messages.po | 259 +- .../zh_Hant_TW/LC_MESSAGES/messages.mo | Bin 89940 -> 95673 bytes .../zh_Hant_TW/LC_MESSAGES/messages.po | 259 +- .../services/sql/transaction_query_builder.py | 0 config.py | 15 - data_files/19.m_function.tsv | 98 +- error.html | 167 +- format.bat | 12 +- init/app.sqlite3 | Bin 471040 -> 471040 bytes lang/message.pot | 9439 +++++++++-------- main.py | 2 + ...a6_add_datetime_format_column_into_cfg_.py | 27 + ..._add_is_file_path_column_into_cfg_data_.py | 27 + package-lock.json | 3133 ++++++ package.json | 39 + pyproject.toml | 242 +- requirements/common.txt | 99 +- requirements/dev.txt | 13 + requirements/oss_dev.txt | 28 +- requirements/oss_prod.txt | 2 +- start/templates/error.html | 265 +- start/templates/start.html | 154 +- start_ap.bat | 366 +- startup.ini | 180 +- 404 files changed, 68519 insertions(+), 26394 deletions(-) create mode 100644 ap/api/setting_module/services/master_data_transform_pattern.py create mode 100644 ap/api/setting_module/services/software_workshop_etl_services.py create mode 100644 ap/common/datetime_format_utils.py create mode 100644 ap/script/migrate_cfg_process_column.py create mode 100644 ap/script/setup_for_e2e.py rename bridge/services/sql/sql_generator.py => ap/setting_module/services/backup_and_restore/__init__.py (100%) create mode 100644 ap/setting_module/services/backup_and_restore/backup.py create mode 100644 ap/setting_module/services/backup_and_restore/backup_file_manager.py create mode 100644 ap/setting_module/services/backup_and_restore/duplicated_check.py create mode 100644 ap/setting_module/services/backup_and_restore/jobs.py create mode 100644 ap/setting_module/services/backup_and_restore/restore.py create mode 100644 ap/static/common/css/multi_level_dropdown.css create mode 100644 ap/static/setting_module/css/backup_restore_modal.css create mode 100644 ap/static/setting_module/css/data_type_dropdown.css create mode 100644 ap/static/setting_module/js/data_type_dropdown/constant.js create mode 100644 ap/static/setting_module/js/data_type_dropdown/controller.js create mode 100644 ap/static/setting_module/js/data_type_dropdown/core.js create mode 100644 ap/static/setting_module/js/data_type_dropdown/event.js create mode 100644 ap/static/setting_module/js/data_type_dropdown/helper.js create mode 100644 ap/static/setting_module/js/data_type_dropdown/type_definition.js create mode 100644 ap/static/setting_module/js/parse_data_utils.js create mode 100644 ap/static/setting_module/js/proc_config_date_time_format.js create mode 100644 ap/static/setting_module/js/process_config_section.js create mode 100644 ap/static/setting_module/js/system.js create mode 100644 ap/templates/setting_module/system.html delete mode 100644 bridge/services/sql/transaction_query_builder.py create mode 100644 migrations/versions/8600fce518a6_add_datetime_format_column_into_cfg_.py create mode 100644 migrations/versions/fd863d0b8735_add_is_file_path_column_into_cfg_data_.py create mode 100644 package-lock.json create mode 100644 requirements/dev.txt diff --git a/AnalysisPlatform.bat b/AnalysisPlatform.bat index 44d2cc1..e57ee9b 100644 --- a/AnalysisPlatform.bat +++ b/AnalysisPlatform.bat @@ -1,607 +1,607 @@ -@echo off -: _____________________________________________________________________________ -: -: Analysis Platform StartUp -: _____________________________________________________________________________ -: Important notice: -: Running the batch file is regarded as you agreed to the Terms of Use. -: Terms of Use: -: https://github.com/apdn7/AnalysisPlatform/about/terms_of_use_en.md -: _____________________________________________________________________________ - -echo Start Main AP Sequence... -echo: - -: Wait Setting for Network Check in [sec] -set wait_netcheck_inst=10 -set wait_netcheck_appl=1 -set wait_netcheck=%wait_netcheck_appl% - -call :defSetting -set app_title=Analysis Platform Port: %port% Lang: %lang% %subtitle% Path: %CD% -title %app_title% -rem prompt AP:%port%$g - - -: Check Product Type -if exist %file_prod% ( - set prod=%product_dn% - echo Detected Product Type: dn7 -) else ( - set prod=%product_oss% - echo Detected Product Type: oss -) -echo: - -: Run start program -: Close old start.exe before run -call :stopLoadingApp -start "" start.exe %port% -echo. -echo.> %stage_status% - -: Direct Startup Mode -if %startup_mode% == 8 ( - echo Direct Startup Mode === Force to bypass Installation === - call :saveStartUpSetting - goto START_APP -) else ( - echo Normal Startup Mode === Check Network and Proxy === -) - -: _____________________________________________________________________________ -: Check Network & Proxy -call :checkPort %port% -if %valid_port% == 0 ( - echo 101> %stage_status% - exit /b -) - -call :getDefaultProxy - -call :checkProxy %prxy% http -if %valid_proxy% == 0 ( - echo 102> %stage_status% - exit /b -) else if %valid_proxy% == 2 ( - echo HTTP_PROXY : %HTTP_PROXY% -) -set /a proxy=%valid_proxy% - -call :checkProxy %prxs% https -if %valid_proxy% == 0 ( - echo 102> %stage_status% - exit /b -) else if %valid_proxy% == 2 ( - echo HTTPS_PROXY : %HTTPS_PROXY% -) -echo: - -:: Check Status by bit-OR of http | https -set /a "proxy = %proxy% | %valid_proxy%" -if %valid_proxy% == 1 ( - set proxy=No Proxy -) else if %valid_proxy% == 2 ( - set proxy=Use Proxy -) else ( - set proxy=Not Active -) -echo Proxy: %proxy% -echo: - -: Check Network Connection at No Proxy -rem if %valid_proxy% == 1 Ping www.python.org -n 1 -w 1000 > nul -powershell -ExecutionPolicy Bypass -Command ^ - try { ^ - $response = Invoke-WebRequest -Uri https://bootstrap.pypa.io/get-pip.py -Method Head; ^ - Write-Host 'Network is available.'; ^ - Write-Host 'StatusCode:' $response.StatusCode ^ - } catch { exit 1 }" -if errorlevel 1 ( - set network_nck=True - set /a error=%error%+%ErrorLevel% - echo %esc%[41m Warning: Check Network Connection %esc%[0m - timeout %wait_netcheck% -) else ( - set network_nck=False -) - -: _____________________________________________________________________________ -: Check changed (folder + version updated) -:CHECK_STATUS -if not exist %file_status% echo: > %file_status% -call :getAppStatus %file_temp% -fc %file_temp% %file_status% > nul -if errorlevel 1 ( - set status=%status_install% - set wait_netcheck=%wait_netcheck_inst% - if %network_nck% == False ( - del %path_getpip% - ) - mode con: cols=120 lines=60 - powershell -ExecutionPolicy Bypass -Command "&{$h=Get-Host;$w=$h.UI.RawUI;$s=$w.BufferSize;$s.height=5000;$w.BufferSize=$s;}" - echo Start Installation [Need Network or Proxy Connection] -) else ( - set status=%status_run_app% - set wait_netcheck=%wait_netcheck_appl% - echo Start Analysis Platform -) -echo: - -call :saveStartUpSetting -title %app_title% - -: _____________________________________________________________________________ -: Check Installation Status -rem for Debug -:exit /b -:set error=0 -:goto FINISH -if %status% == %status_run_app% ^ -if exist %path_python% if exist %path_getpip% if exist %path_oracle% ( - echo Installation seems to be completed. - echo If you have some trouble launching AP, delete auto downloaded folders and try again. - echo: - goto REMOVE_ZIPPED_FILES - echo: - goto START_APP -) - -: _____________________________________________________________________________ -: Download Components & Libraries -echo Download Components... -echo %esc%[44m First boot may take 5-30 minutes depending on network ^& CPU speed. %esc%[0m -timeout 5 -echo: -:CHECK_EXIST -if not exist %path_R% if %prod% == %product_dn% ( - echo %esc%[41m Make sure you have R-Portable folder before running this application. %esc%[0m - echo Or prepare R-Portable folder and reboot AP before using R function - echo 999> %stage_status% - timeout 10 - exit /b -) - -if exist %path_python% (echo Detect python) else goto :PYTHON_EMBEDDED -if exist %path_getpip% (echo Detect getpip) else goto :PIP_DOWNLOAD -if exist %path_oracle% (echo Detect oracle) else goto :ORACLE_INSTANCE - -: install packages -:: Get pip -%path_python%\python.exe %path_getpip% --no-cache-dir --no-warn-script-location "pip < 22.3" - -: ----------------------------------------------------------------------------- -:ACTIVE_PYTHON_ENVIRONMENT -:: Active virtual environment -IF NOT EXIST %env_path% ( - ECHO Installing Virtualenv - %path_python%\python -m pip install --no-cache-dir --no-warn-script-location virtualenv -) -ECHO Initializing Virtual Environment -%path_python%\python -m virtualenv %env_path% -ECHO Activate virtual environment - -:: copy complied sqlite3.dll to env Scripts folder -powershell if (Test-Path -Path $env:sqlite_dll) { Copy-Item $env:sqlite_dll -Destination $env:env_path\Scripts } - -:: copy complied sqlite3.dll to python embedded Scripts folder -powershell if (Test-Path -Path $env:sqlite_dll) { Copy-Item $env:sqlite_dll -Destination $env:path_python } - -CALL %env_path%\Scripts\activate & GOTO INSTALL_PYTHON_AND_R_PACKAGES -: ----------------------------------------------------------------------------- - -:INSTALL_PYTHON_AND_R_PACKAGES -:: Set default python & components path to PATH environment -set is_venv_activated=1 -set PATH=%lib_path% -echo PATH=%PATH% -echo: -echo: - -:: Upgrade pip -: %path_python%\python.exe -m pip install --upgrade pip -if %prod% == %product_dn% ( - pip install --no-cache-dir --no-warn-script-location -r %file_prod% -) else ( - pip install --no-cache-dir --no-warn-script-location -r %file_oss_prod% -) -IF exist %path_R% ( - %path_R%\bin\R CMD BATCH "r_install_packages.r" -) - -if exist %ca_cert% call :REMOVE_CA_CERT - -echo: -echo Download components, libraries and installation is completed. -echo: - -: ----------------------------------------------------------------------------- -: Remove Oracle and python_embedded after install application -:REMOVE_ZIPPED_FILES -IF exist %path_oracle_zip% del %path_oracle_zip% -IF exist %path_python_zip% del %path_python_zip% -echo: -echo Removed Oracle and Python embedded zipped files. -echo: - -: _____________________________________________________________________________ -: Run App: Analysis Platform -:START_APP -: log application status : Installation Completed -IF exist %file_temp% del %file_temp% -call :getAppStatus %file_status% - -if %only_install% == 1 ( - echo Skip AP startup and end sequences. "only_install" option is enabled. - :: Keep CMD stay when install check (control by %error%) - set /a error=%error%+1 - GOTO FINISH -) -if [%1]==[SKIP_RUN_MAIN] GOTO FINISH - -IF %is_venv_activated% == 0 ( - GOTO ACTIVE_PYTHON_ENVIRONMENT - ECHO Activate virtual environment - CALL %env_path%\Scripts\activate & GOTO SET_PATH -) -: ----------------------------------------------------------------------------- -:SET_PATH -:: Set default python & components path to PATH environment -set is_venv_activated=1 -set PATH=%lib_path% -echo PATH=%PATH% -echo: -echo: - -:: stop start.exe before run APDN7 -if errorlevel 0 ( - : Close start.exe if there is no error - call :stopLoadingApp -) else ( - : stop program if error - exit /b -) - -REM run application -ECHO Starting Up Analysis Platform ... -python.exe main.py -set /a error=%error%+%ErrorLevel% -echo: -echo: - -rem start -: Close CMD.exe if no error -@REM if %error% neq 0 ( -@REM echo Some Error Detected %error% -@REM echo Auto restart -@REM GOTO START_APP -@REM ) -@REM :FINISH -rem echo %error% -if %error% equ 0 if not %only_install% == 1 ( - timeout 5 - :: find current running cmd and stop it through title - for /f "usebackq tokens=2" %%a in (`tasklist /FO list /FI "WINDOWTITLE eq %app_title%*" ^| find /i "PID:"`) do ( - taskkill /pid %%a - ) -) -exit /b 0 -:goto FINISH - - - -: _____________________________________________________________________________ -: Sub Program -: _____________________________________________________________________________ - -:CA_CERT -powershell -ExecutionPolicy Bypass -Command wget %ca_cert_url% -O %ca_cert% -echo %ca_cert% file is downloaded. -exit /b -:end - -:REMOVE_CA_CERT -del %ca_cert% -echo %ca_cert% file is removed. -exit /b -:end - -:PYTHON_EMBEDDED -echo Download python -powershell -ExecutionPolicy Bypass -Command wget %python39_url% -O %path_python_zip% -if %errorlevel% == 35 ( - REM In case CA cert in local machine is expired or disabled --- download CA cert to authenticate - if exist %ca_cert% (echo Detect ca_cert) else call :CA_CERT - powershell -ExecutionPolicy Bypass -Command wget -Certificate %ca_cert% -Uri %python39_url% -O %path_python_zip% -) -if errorlevel 1 ( - echo %esc%[41m Error on Wget Check network connection or use latest Win10 ^>1803 %esc%[0m - echo 200 > %stage_status% - exit /b -) - -echo Unzip python_embedded -powershell -ExecutionPolicy Bypass -Command "Expand-Archive -Path %path_python_zip% -DestinationPath %path_python%" -rename %path_python%\python39._pth python39._pth.renamed -echo: -GOTO CHECK_EXIST - -:PIP_DOWNLOAD -echo Download pip -powershell -ExecutionPolicy Bypass -Command wget %get_pip_url% -O %path_getpip% -if %errorlevel% == 35 ( - REM In case CA cert in local machine is expired or disabled --- download CA cert to authenticate - if exist %ca_cert% (echo Detect ca_cert) else call :CA_CERT - powershell -ExecutionPolicy Bypass -Command wget -Certificate %ca_cert% -Uri %get_pip_url% -O %path_getpip% -) -if errorlevel 1 ( - echo %esc%[41m Error on Curl Check network connection or use latest Win10 ^>1803 %esc%[0m - echo 201 > %stage_status% - exit /b -) - -echo: > %file_status% -echo: -GOTO CHECK_EXIST - -:ORACLE_INSTANCE -echo Download oracle instance -powershell -ExecutionPolicy Bypass -Command wget %oracle_instance_url% -O %path_oracle_zip% -if %errorlevel% == 35 ( - REM In case CA cert in local machine is expired or disabled --- download CA cert to authenticate - if exist %ca_cert% (echo Detect ca_cert) else call :CA_CERT - powershell -ExecutionPolicy Bypass -Command wget -Certificate %ca_cert% -Uri %oracle_instance_url% -O %path_oracle_zip% -) -if errorlevel 1 ( - echo %esc%[41m Error on Wget Check network connection or use latest Win10 ^>1803 %esc%[0m - echo 210 > %stage_status% - exit /b -) - -echo unzip oracle instance -powershell -ExecutionPolicy Bypass -Command "Expand-Archive -Path %path_oracle_zip% -DestinationPath %path_oracle%" -echo: -GOTO CHECK_EXIST - - -: _____________________________________________________________________________ -: Subroutine: function removeChar -: In/Out var|In %*: Array of Replacement Char -:removeChar - for %%i in (%*) do call set var=%%var:%%i=%% - exit /b -:end - -: _____________________________________________________________________________ -: Subroutine: function convertCaseLower -: In/Out var -:convertCaseLower - for %%i in (%chr_alphab%) do call set var=%%var:%%i=%%i%% - exit /b -:end - -: _____________________________________________________________________________ -: Subroutine: function getAppStatus -: In/Out - |In %1: Target File -:getAppStatus - set filename=%1 - : Path Info - cd> %filename% - : AP Version Info (Version File Timestamp) - for %%a in (%file_ver%) do echo %%~ta>> %filename% - exit /b -:end -: _____________________________________________________________________________ -: Subroutine: Definition, Setting and Cleaning -: In/Out - |In - -:defSetting - : Setting - set file_status=__STATUS__ - set file_temp=__TEMP__ - set file_ver=VERSION - :: Product Judge File dn or oss - set file_prod=requirements\prod.txt - set file_oss_prod=requirements\oss_prod.txt - set path_R=%cd%\..\R-Portable - set ca_cert=%cd%\..\cacert.pem - set path_python=%cd%\..\python_embedded_39 - set env_path=%cd%\..\env - set sqlite_dll=%cd%\init\sqlite3.dll - set path_getpip=%cd%\..\get-pip.py - set path_oracle=%cd%\..\Oracle-Portable - set path_python_zip=%cd%\..\python_embedded_39.zip - set path_oracle_zip=%cd%\..\Oracle-Portable.zip - set lib_path=%path_oracle%\instantclient_21_3;%env_path%\Scripts;%env_path%\Lib;%SystemRoot%\System32; - :: Startup Error log file - set stage_status=stage_status.log - set is_venv_activated=0 - - : links - set ca_cert_url="https://curl.se/ca/cacert-2023-08-22.pem" - set python39_url="https://www.python.org/ftp/python/3.9.0/python-3.9.0-embed-amd64.zip" - set get_pip_url="https://bootstrap.pypa.io/get-pip.py" - set oracle_instance_url="https://download.oracle.com/otn_software/nt/instantclient/213000/instantclient-basic-windows.x64-21.3.0.0.0.zip" - - : Definition - set error=0 - set status_install=0 - set status_run_app=1 - set product_dn=prod - set product_oss=oss - set chr_number=0 1 2 3 4 5 6 7 8 9 - set chr_alphab=a b c d e f g h i j k l m n o p q r s t u v w x y z - :: Get Escape $e 0x1b 27 - for /f %%i in ('cmd /k prompt $e^ %stage_status% - exit /b - ) else ( - set valid_port = 1 - ) - - : check Range - if %var% geq 6000 if %var% lss 8000 if %var% neq 7070 set valid_port=2 - if %valid_port% neq 2 ( - echo %esc%[41m Warning Bad Port Number %esc%[0m - echo Change Port Number from 6000 to 7999 - echo Current Value: %1 - echo 101 > %stage_status% - exit /b - ) -exit /b -:end - -: _____________________________________________________________________________ -: Subroutine: get Default Proxy Setting -: In/Out - |In - -:getDefaultProxy - : get Default Proxy Setting - set basic_ver=null - set basic_port=null - set basic_proxy=null - set basic_config=ap\config\basic_config.yml - if not exist %basic_config% set basic_config=ap\config\basic_config.yml - for /F "tokens=2,3,4 delims=: " %%i in (%basic_config%) do ( - if %%i==version set basic_ver=%%j - if %%i==port-no set basic_port=%%j - if %%i==proxy set basic_proxy=%%j:%%k - :: It gets more complicated dealing with nesting arrays, so leave the for loop at the next level or after reading the variable. - if %%i==proxy goto :break_for_ini - ) - :break_for_ini - - echo Basic Config - echo Ver : %basic_ver% - echo Port : %basic_port% - echo Proxy: %basic_proxy% - - if not %basic_proxy%==null if not %basic_proxy%==: if %prxy%==null ( - echo Use Default Proxy of %basic_proxy% - set prxy=%basic_proxy% - set prxs=%basic_proxy% - ) - - echo Target Proxy - echo Proxy http : %prxy% - echo Proxy https: %prxs% - echo: -exit /b -:end -: _____________________________________________________________________________ -: Subroutine: Check Proxy Setting -: In/Out valid_proxy|In %1: Proxy Info %2: Type http(s) -:checkProxy - set var=%1 - set valid_proxy=0 - if %2 == http ( - set target_type=http - set target_proxy=HTTP_PROXY - ) else ( - set target_type=https - set target_proxy=HTTPS_PROXY - ) - rem echo var - : Check Format - :: no or null: Do nothing - if %var% == no set /a valid_proxy=0x01 - if %var% == null set /a valid_proxy=0x01 - if %valid_proxy% == 1 exit /b - :: check format ip - call :removeChar %chr_number% - if %var% == ...: set /a valid_proxy=0x04 - :: check format domain name - call :convertCaseLower - call :removeChar %chr_alphab% - call :removeChar . - - if %var% == : set /a valid_proxy=0x08 - :: judge - if %valid_proxy% == 0 ( - echo %esc%[41m Warning Proxy Address/Domain Name %esc%[0m - echo Modify %target_type% Proxy Address/Domain Name - echo Current Value: %1 valid_proxy=%valid_proxy% - echo 102 > %stage_status% - exit /b - ) - - : Check Proxy Existence - for /f "tokens=1 delims=:" %%a in ("%1") do set ip=%%a - Ping %ip% -n 1 -w 1000 > nul - if errorlevel 1 ( - echo %esc%[41m Warning: %target_proxy% is not active %esc%[0m - echo Current Value: %1 valid_proxy=%valid_proxy% - timeout %wait_netcheck% - ) else ( - rem Proxy Passed - set %target_proxy%=%1 - set /a valid_proxy=0x02 - ) -exit /b -:end - - -: _____________________________________________________________________________ -: Subroutine: Save Settings -: In/Out - |In - -:saveStartUpSetting -setlocal - set var=%network_nck% - call :convertCaseLower - - : Make yaml file - set filename=startup.yaml - echo !!omap> %filename% - echo # Analysis Platform StartUp Batch File Setting>> %filename% - echo - version_yaml: 1.0 >> %filename% - echo - setting_startup: !!omap>> %filename% - echo - port: %port% >> %filename% - echo - language: %lang% >> %filename% - echo - subtitle: %subt% >> %filename% - echo - proxy_http: %prxy% >> %filename% - echo - proxy_https: %prxs% >> %filename% - echo - network_nck: %var% >> %filename% - echo - setting_app: !!omap>> %filename% - echo - env_ap: %prod%>> %filename% - echo - flask_debug: %flask_debug% >> %filename% - echo - update_R: %update_R% >> %filename% - -endlocal -exit /b -:end - -:stopLoadingApp -for /f "usebackq tokens=2" %%a in (`tasklist /FO list /FI "imagename eq start.exe" ^| find /i "PID:"`) do ( - taskkill /F /pid %%a >nul 2>&1 -) -exit /b -:end +@echo off +: _____________________________________________________________________________ +: +: Analysis Platform StartUp +: _____________________________________________________________________________ +: Important notice: +: Running the batch file is regarded as you agreed to the Terms of Use. +: Terms of Use: +: https://github.com/apdn7/AnalysisPlatform/about/terms_of_use_en.md +: _____________________________________________________________________________ + +echo Start Main AP Sequence... +echo: + +: Wait Setting for Network Check in [sec] +set wait_netcheck_inst=10 +set wait_netcheck_appl=1 +set wait_netcheck=%wait_netcheck_appl% + +call :defSetting +set app_title=Analysis Platform Port: %port% Lang: %lang% %subtitle% Path: %CD% +title %app_title% +rem prompt AP:%port%$g + + +: Check Product Type +if exist %file_prod% ( + set prod=%product_dn% + echo Detected Product Type: dn7 +) else ( + set prod=%product_oss% + echo Detected Product Type: oss +) +echo: + +: Run start program +: Close old start.exe before run +call :stopLoadingApp +start "" start.exe %port% +echo. +echo.> %stage_status% + +: Direct Startup Mode +if %startup_mode% == 8 ( + echo Direct Startup Mode === Force to bypass Installation === + call :saveStartUpSetting + goto START_APP +) else ( + echo Normal Startup Mode === Check Network and Proxy === +) + +: _____________________________________________________________________________ +: Check Network & Proxy +call :checkPort %port% +if %valid_port% == 0 ( + echo 101> %stage_status% + exit /b +) + +call :getDefaultProxy + +call :checkProxy %prxy% http +if %valid_proxy% == 0 ( + echo 102> %stage_status% + exit /b +) else if %valid_proxy% == 2 ( + echo HTTP_PROXY : %HTTP_PROXY% +) +set /a proxy=%valid_proxy% + +call :checkProxy %prxs% https +if %valid_proxy% == 0 ( + echo 102> %stage_status% + exit /b +) else if %valid_proxy% == 2 ( + echo HTTPS_PROXY : %HTTPS_PROXY% +) +echo: + +:: Check Status by bit-OR of http | https +set /a "proxy = %proxy% | %valid_proxy%" +if %valid_proxy% == 1 ( + set proxy=No Proxy +) else if %valid_proxy% == 2 ( + set proxy=Use Proxy +) else ( + set proxy=Not Active +) +echo Proxy: %proxy% +echo: + +: Check Network Connection at No Proxy +rem if %valid_proxy% == 1 Ping www.python.org -n 1 -w 1000 > nul +powershell -ExecutionPolicy Bypass -Command ^ + try { ^ + $response = Invoke-WebRequest -Uri https://bootstrap.pypa.io/get-pip.py -Method Head; ^ + Write-Host 'Network is available.'; ^ + Write-Host 'StatusCode:' $response.StatusCode ^ + } catch { exit 1 }" +if errorlevel 1 ( + set network_nck=True + set /a error=%error%+%ErrorLevel% + echo %esc%[41m Warning: Check Network Connection %esc%[0m + timeout %wait_netcheck% +) else ( + set network_nck=False +) + +: _____________________________________________________________________________ +: Check changed (folder + version updated) +:CHECK_STATUS +if not exist %file_status% echo: > %file_status% +call :getAppStatus %file_temp% +fc %file_temp% %file_status% > nul +if errorlevel 1 ( + set status=%status_install% + set wait_netcheck=%wait_netcheck_inst% + if %network_nck% == False ( + del %path_getpip% + ) + mode con: cols=120 lines=60 + powershell -ExecutionPolicy Bypass -Command "&{$h=Get-Host;$w=$h.UI.RawUI;$s=$w.BufferSize;$s.height=5000;$w.BufferSize=$s;}" + echo Start Installation [Need Network or Proxy Connection] +) else ( + set status=%status_run_app% + set wait_netcheck=%wait_netcheck_appl% + echo Start Analysis Platform +) +echo: + +call :saveStartUpSetting +title %app_title% + +: _____________________________________________________________________________ +: Check Installation Status +rem for Debug +:exit /b +:set error=0 +:goto FINISH +if %status% == %status_run_app% ^ +if exist %path_python% if exist %path_getpip% if exist %path_oracle% ( + echo Installation seems to be completed. + echo If you have some trouble launching AP, delete auto downloaded folders and try again. + echo: + goto REMOVE_ZIPPED_FILES + echo: + goto START_APP +) + +: _____________________________________________________________________________ +: Download Components & Libraries +echo Download Components... +echo %esc%[44m First boot may take 5-30 minutes depending on network ^& CPU speed. %esc%[0m +timeout 5 +echo: +:CHECK_EXIST +if not exist %path_R% if %prod% == %product_dn% ( + echo %esc%[41m Make sure you have R-Portable folder before running this application. %esc%[0m + echo Or prepare R-Portable folder and reboot AP before using R function + echo 999> %stage_status% + timeout 10 + exit /b +) + +if exist %path_python% (echo Detect python) else goto :PYTHON_EMBEDDED +if exist %path_getpip% (echo Detect getpip) else goto :PIP_DOWNLOAD +if exist %path_oracle% (echo Detect oracle) else goto :ORACLE_INSTANCE + +: install packages +:: Get pip +%path_python%\python.exe %path_getpip% --no-cache-dir --no-warn-script-location "pip < 22.3" + +: ----------------------------------------------------------------------------- +:ACTIVE_PYTHON_ENVIRONMENT +:: Active virtual environment +IF NOT EXIST %env_path% ( + ECHO Installing Virtualenv + %path_python%\python -m pip install --no-cache-dir --no-warn-script-location virtualenv +) +ECHO Initializing Virtual Environment +%path_python%\python -m virtualenv %env_path% +ECHO Activate virtual environment + +:: copy complied sqlite3.dll to env Scripts folder +powershell if (Test-Path -Path $env:sqlite_dll) { Copy-Item $env:sqlite_dll -Destination $env:env_path\Scripts } + +:: copy complied sqlite3.dll to python embedded Scripts folder +powershell if (Test-Path -Path $env:sqlite_dll) { Copy-Item $env:sqlite_dll -Destination $env:path_python } + +CALL %env_path%\Scripts\activate & GOTO INSTALL_PYTHON_AND_R_PACKAGES +: ----------------------------------------------------------------------------- + +:INSTALL_PYTHON_AND_R_PACKAGES +:: Set default python & components path to PATH environment +set is_venv_activated=1 +set PATH=%lib_path% +echo PATH=%PATH% +echo: +echo: + +:: Upgrade pip +: %path_python%\python.exe -m pip install --upgrade pip +if %prod% == %product_dn% ( + pip install --no-cache-dir --no-warn-script-location -r %file_prod% +) else ( + pip install --no-cache-dir --no-warn-script-location -r %file_oss_prod% +) +IF exist %path_R% ( + %path_R%\bin\R CMD BATCH "r_install_packages.r" +) + +if exist %ca_cert% call :REMOVE_CA_CERT + +echo: +echo Download components, libraries and installation is completed. +echo: + +: ----------------------------------------------------------------------------- +: Remove Oracle and python_embedded after install application +:REMOVE_ZIPPED_FILES +IF exist %path_oracle_zip% del %path_oracle_zip% +IF exist %path_python_zip% del %path_python_zip% +echo: +echo Removed Oracle and Python embedded zipped files. +echo: + +: _____________________________________________________________________________ +: Run App: Analysis Platform +:START_APP +: log application status : Installation Completed +IF exist %file_temp% del %file_temp% +call :getAppStatus %file_status% + +if %only_install% == 1 ( + echo Skip AP startup and end sequences. "only_install" option is enabled. + :: Keep CMD stay when install check (control by %error%) + set /a error=%error%+1 + GOTO FINISH +) +if [%1]==[SKIP_RUN_MAIN] GOTO FINISH + +IF %is_venv_activated% == 0 ( + GOTO ACTIVE_PYTHON_ENVIRONMENT + ECHO Activate virtual environment + CALL %env_path%\Scripts\activate & GOTO SET_PATH +) +: ----------------------------------------------------------------------------- +:SET_PATH +:: Set default python & components path to PATH environment +set is_venv_activated=1 +set PATH=%lib_path% +echo PATH=%PATH% +echo: +echo: + +:: stop start.exe before run APDN7 +if errorlevel 0 ( + : Close start.exe if there is no error + call :stopLoadingApp +) else ( + : stop program if error + exit /b +) + +REM run application +ECHO Starting Up Analysis Platform ... +python.exe main.py +set /a error=%error%+%ErrorLevel% +echo: +echo: + +rem start +: Close CMD.exe if no error +@REM if %error% neq 0 ( +@REM echo Some Error Detected %error% +@REM echo Auto restart +@REM GOTO START_APP +@REM ) +@REM :FINISH +rem echo %error% +if %error% equ 0 if not %only_install% == 1 ( + timeout 5 + :: find current running cmd and stop it through title + for /f "usebackq tokens=2" %%a in (`tasklist /FO list /FI "WINDOWTITLE eq %app_title%*" ^| find /i "PID:"`) do ( + taskkill /pid %%a + ) +) +exit /b 0 +:goto FINISH + + + +: _____________________________________________________________________________ +: Sub Program +: _____________________________________________________________________________ + +:CA_CERT +powershell -ExecutionPolicy Bypass -Command wget %ca_cert_url% -O %ca_cert% +echo %ca_cert% file is downloaded. +exit /b +:end + +:REMOVE_CA_CERT +del %ca_cert% +echo %ca_cert% file is removed. +exit /b +:end + +:PYTHON_EMBEDDED +echo Download python +powershell -ExecutionPolicy Bypass -Command wget %python39_url% -O %path_python_zip% +if %errorlevel% == 35 ( + REM In case CA cert in local machine is expired or disabled --- download CA cert to authenticate + if exist %ca_cert% (echo Detect ca_cert) else call :CA_CERT + powershell -ExecutionPolicy Bypass -Command wget -Certificate %ca_cert% -Uri %python39_url% -O %path_python_zip% +) +if errorlevel 1 ( + echo %esc%[41m Error on Wget Check network connection or use latest Win10 ^>1803 %esc%[0m + echo 200 > %stage_status% + exit /b +) + +echo Unzip python_embedded +powershell -ExecutionPolicy Bypass -Command "Expand-Archive -Path %path_python_zip% -DestinationPath %path_python%" +rename %path_python%\python39._pth python39._pth.renamed +echo: +GOTO CHECK_EXIST + +:PIP_DOWNLOAD +echo Download pip +powershell -ExecutionPolicy Bypass -Command wget %get_pip_url% -O %path_getpip% +if %errorlevel% == 35 ( + REM In case CA cert in local machine is expired or disabled --- download CA cert to authenticate + if exist %ca_cert% (echo Detect ca_cert) else call :CA_CERT + powershell -ExecutionPolicy Bypass -Command wget -Certificate %ca_cert% -Uri %get_pip_url% -O %path_getpip% +) +if errorlevel 1 ( + echo %esc%[41m Error on Curl Check network connection or use latest Win10 ^>1803 %esc%[0m + echo 201 > %stage_status% + exit /b +) + +echo: > %file_status% +echo: +GOTO CHECK_EXIST + +:ORACLE_INSTANCE +echo Download oracle instance +powershell -ExecutionPolicy Bypass -Command wget %oracle_instance_url% -O %path_oracle_zip% +if %errorlevel% == 35 ( + REM In case CA cert in local machine is expired or disabled --- download CA cert to authenticate + if exist %ca_cert% (echo Detect ca_cert) else call :CA_CERT + powershell -ExecutionPolicy Bypass -Command wget -Certificate %ca_cert% -Uri %oracle_instance_url% -O %path_oracle_zip% +) +if errorlevel 1 ( + echo %esc%[41m Error on Wget Check network connection or use latest Win10 ^>1803 %esc%[0m + echo 210 > %stage_status% + exit /b +) + +echo unzip oracle instance +powershell -ExecutionPolicy Bypass -Command "Expand-Archive -Path %path_oracle_zip% -DestinationPath %path_oracle%" +echo: +GOTO CHECK_EXIST + + +: _____________________________________________________________________________ +: Subroutine: function removeChar +: In/Out var|In %*: Array of Replacement Char +:removeChar + for %%i in (%*) do call set var=%%var:%%i=%% + exit /b +:end + +: _____________________________________________________________________________ +: Subroutine: function convertCaseLower +: In/Out var +:convertCaseLower + for %%i in (%chr_alphab%) do call set var=%%var:%%i=%%i%% + exit /b +:end + +: _____________________________________________________________________________ +: Subroutine: function getAppStatus +: In/Out - |In %1: Target File +:getAppStatus + set filename=%1 + : Path Info + cd> %filename% + : AP Version Info (Version File Timestamp) + for %%a in (%file_ver%) do echo %%~ta>> %filename% + exit /b +:end +: _____________________________________________________________________________ +: Subroutine: Definition, Setting and Cleaning +: In/Out - |In - +:defSetting + : Setting + set file_status=__STATUS__ + set file_temp=__TEMP__ + set file_ver=VERSION + :: Product Judge File dn or oss + set file_prod=requirements\prod.txt + set file_oss_prod=requirements\oss_prod.txt + set path_R=%cd%\..\R-Portable + set ca_cert=%cd%\..\cacert.pem + set path_python=%cd%\..\python_embedded_39 + set env_path=%cd%\..\env + set sqlite_dll=%cd%\init\sqlite3.dll + set path_getpip=%cd%\..\get-pip.py + set path_oracle=%cd%\..\Oracle-Portable + set path_python_zip=%cd%\..\python_embedded_39.zip + set path_oracle_zip=%cd%\..\Oracle-Portable.zip + set lib_path=%path_oracle%\instantclient_21_3;%env_path%\Scripts;%env_path%\Lib;%SystemRoot%\System32; + :: Startup Error log file + set stage_status=stage_status.log + set is_venv_activated=0 + + : links + set ca_cert_url="https://curl.se/ca/cacert-2023-08-22.pem" + set python39_url="https://www.python.org/ftp/python/3.9.0/python-3.9.0-embed-amd64.zip" + set get_pip_url="https://bootstrap.pypa.io/get-pip.py" + set oracle_instance_url="https://download.oracle.com/otn_software/nt/instantclient/213000/instantclient-basic-windows.x64-21.3.0.0.0.zip" + + : Definition + set error=0 + set status_install=0 + set status_run_app=1 + set product_dn=prod + set product_oss=oss + set chr_number=0 1 2 3 4 5 6 7 8 9 + set chr_alphab=a b c d e f g h i j k l m n o p q r s t u v w x y z + :: Get Escape $e 0x1b 27 + for /f %%i in ('cmd /k prompt $e^ %stage_status% + exit /b + ) else ( + set valid_port = 1 + ) + + : check Range + if %var% geq 6000 if %var% lss 8000 if %var% neq 7070 set valid_port=2 + if %valid_port% neq 2 ( + echo %esc%[41m Warning Bad Port Number %esc%[0m + echo Change Port Number from 6000 to 7999 + echo Current Value: %1 + echo 101 > %stage_status% + exit /b + ) +exit /b +:end + +: _____________________________________________________________________________ +: Subroutine: get Default Proxy Setting +: In/Out - |In - +:getDefaultProxy + : get Default Proxy Setting + set basic_ver=null + set basic_port=null + set basic_proxy=null + set basic_config=ap\config\basic_config.yml + if not exist %basic_config% set basic_config=ap\config\basic_config.yml + for /F "tokens=2,3,4 delims=: " %%i in (%basic_config%) do ( + if %%i==version set basic_ver=%%j + if %%i==port-no set basic_port=%%j + if %%i==proxy set basic_proxy=%%j:%%k + :: It gets more complicated dealing with nesting arrays, so leave the for loop at the next level or after reading the variable. + if %%i==proxy goto :break_for_ini + ) + :break_for_ini + + echo Basic Config + echo Ver : %basic_ver% + echo Port : %basic_port% + echo Proxy: %basic_proxy% + + if not %basic_proxy%==null if not %basic_proxy%==: if %prxy%==null ( + echo Use Default Proxy of %basic_proxy% + set prxy=%basic_proxy% + set prxs=%basic_proxy% + ) + + echo Target Proxy + echo Proxy http : %prxy% + echo Proxy https: %prxs% + echo: +exit /b +:end +: _____________________________________________________________________________ +: Subroutine: Check Proxy Setting +: In/Out valid_proxy|In %1: Proxy Info %2: Type http(s) +:checkProxy + set var=%1 + set valid_proxy=0 + if %2 == http ( + set target_type=http + set target_proxy=HTTP_PROXY + ) else ( + set target_type=https + set target_proxy=HTTPS_PROXY + ) + rem echo var + : Check Format + :: no or null: Do nothing + if %var% == no set /a valid_proxy=0x01 + if %var% == null set /a valid_proxy=0x01 + if %valid_proxy% == 1 exit /b + :: check format ip + call :removeChar %chr_number% + if %var% == ...: set /a valid_proxy=0x04 + :: check format domain name + call :convertCaseLower + call :removeChar %chr_alphab% + call :removeChar . - + if %var% == : set /a valid_proxy=0x08 + :: judge + if %valid_proxy% == 0 ( + echo %esc%[41m Warning Proxy Address/Domain Name %esc%[0m + echo Modify %target_type% Proxy Address/Domain Name + echo Current Value: %1 valid_proxy=%valid_proxy% + echo 102 > %stage_status% + exit /b + ) + + : Check Proxy Existence + for /f "tokens=1 delims=:" %%a in ("%1") do set ip=%%a + Ping %ip% -n 1 -w 1000 > nul + if errorlevel 1 ( + echo %esc%[41m Warning: %target_proxy% is not active %esc%[0m + echo Current Value: %1 valid_proxy=%valid_proxy% + timeout %wait_netcheck% + ) else ( + rem Proxy Passed + set %target_proxy%=%1 + set /a valid_proxy=0x02 + ) +exit /b +:end + + +: _____________________________________________________________________________ +: Subroutine: Save Settings +: In/Out - |In - +:saveStartUpSetting +setlocal + set var=%network_nck% + call :convertCaseLower + + : Make yaml file + set filename=startup.yaml + echo !!omap> %filename% + echo # Analysis Platform StartUp Batch File Setting>> %filename% + echo - version_yaml: 1.0 >> %filename% + echo - setting_startup: !!omap>> %filename% + echo - port: %port% >> %filename% + echo - language: %lang% >> %filename% + echo - subtitle: %subt% >> %filename% + echo - proxy_http: %prxy% >> %filename% + echo - proxy_https: %prxs% >> %filename% + echo - network_nck: %var% >> %filename% + echo - setting_app: !!omap>> %filename% + echo - env_ap: %prod%>> %filename% + echo - flask_debug: %flask_debug% >> %filename% + echo - update_R: %update_R% >> %filename% + +endlocal +exit /b +:end + +:stopLoadingApp +for /f "usebackq tokens=2" %%a in (`tasklist /FO list /FI "imagename eq start.exe" ^| find /i "PID:"`) do ( + taskkill /F /pid %%a >nul 2>&1 +) +exit /b +:end diff --git a/VERSION b/VERSION index d4e6d22..3b2545e 100644 --- a/VERSION +++ b/VERSION @@ -1,5 +1,5 @@ -v4.7.1.234.801d8447 -1 -OSS +v4.7.3.239.3fb04467 +1 +OSS diff --git a/_original_path_list.log b/_original_path_list.log index d6a24ef..3aa0848 100644 --- a/_original_path_list.log +++ b/_original_path_list.log @@ -6,6 +6,7 @@ .\format.bat .\LICENSE.md .\main.py +.\package-lock.json .\package.json .\pyper.py .\pyproject.toml @@ -82,11 +83,13 @@ .\ap\api\setting_module\services\equations.py .\ap\api\setting_module\services\factory_import.py .\ap\api\setting_module\services\filter_settings.py +.\ap\api\setting_module\services\master_data_transform_pattern.py .\ap\api\setting_module\services\polling_frequency.py .\ap\api\setting_module\services\process_delete.py .\ap\api\setting_module\services\save_load_user_setting.py .\ap\api\setting_module\services\show_latest_record.py .\ap\api\setting_module\services\shutdown_app.py +.\ap\api\setting_module\services\software_workshop_etl_services.py .\ap\api\setting_module\services\v2_etl_services.py .\ap\api\setting_module\services\__init__.py .\ap\api\table_viewer\controllers.py @@ -113,6 +116,7 @@ .\ap\common\common_utils.py .\ap\common\constants.py .\ap\common\cryptography_utils.py +.\ap\common\datetime_format_utils.py .\ap\common\disk_usage.py .\ap\common\logger.py .\ap\common\memoize.py @@ -211,12 +215,14 @@ .\ap\script\hide_exe_root_folder.py .\ap\script\migrate_cfg_data_source_csv.py .\ap\script\migrate_cfg_process.py +.\ap\script\migrate_cfg_process_column.py .\ap\script\migrate_csv_datatype.py .\ap\script\migrate_csv_dummy_datetime.py .\ap\script\migrate_csv_save_graph_settings.py .\ap\script\migrate_delta_time.py .\ap\script\migrate_m_function.py .\ap\script\migrate_process_file_name_column.py +.\ap\script\setup_for_e2e.py .\ap\script\dummy_data\dummy_sql.py .\ap\script\hot_fix\fix_db_issues.py .\ap\script\r_scripts\analytics.r @@ -237,6 +243,12 @@ .\ap\setting_module\services\process_config.py .\ap\setting_module\services\register_from_file.py .\ap\setting_module\services\trace_config.py +.\ap\setting_module\services\backup_and_restore\backup.py +.\ap\setting_module\services\backup_and_restore\backup_file_manager.py +.\ap\setting_module\services\backup_and_restore\duplicated_check.py +.\ap\setting_module\services\backup_and_restore\jobs.py +.\ap\setting_module\services\backup_and_restore\restore.py +.\ap\setting_module\services\backup_and_restore\__init__.py .\ap\static\aggregate_plot\css\aggregate_plot.css .\ap\static\aggregate_plot\js\aggregate_plot.js .\ap\static\aggregate_plot\js\aggregation_chart.js @@ -286,6 +298,7 @@ .\ap\static\common\css\jsuites.css .\ap\static\common\css\jump_function.css .\ap\static\common\css\main.css +.\ap\static\common\css\multi_level_dropdown.css .\ap\static\common\css\pagination.css .\ap\static\common\css\select2.min.css .\ap\static\common\css\shepherd.css @@ -560,7 +573,9 @@ .\ap\static\scatter_plot\js\scp_heatmap_plot.js .\ap\static\scatter_plot\js\scp_violin_plot.js .\ap\static\setting_module\css\background_process.css +.\ap\static\setting_module\css\backup_restore_modal.css .\ap\static\setting_module\css\config_view.css +.\ap\static\setting_module\css\data_type_dropdown.css .\ap\static\setting_module\css\filter_visualization.css .\ap\static\setting_module\css\index.css .\ap\static\setting_module\css\master_cfg.css @@ -597,11 +612,21 @@ .\ap\static\setting_module\js\graph_visualization.js .\ap\static\setting_module\js\master_config.js .\ap\static\setting_module\js\npm.js +.\ap\static\setting_module\js\parse_data_utils.js .\ap\static\setting_module\js\predict_data_type.js +.\ap\static\setting_module\js\process_config_section.js .\ap\static\setting_module\js\proc_config.js +.\ap\static\setting_module\js\proc_config_date_time_format.js .\ap\static\setting_module\js\proc_config_modals.js .\ap\static\setting_module\js\register_from_file.js +.\ap\static\setting_module\js\system.js .\ap\static\setting_module\js\trace_config.js +.\ap\static\setting_module\js\data_type_dropdown\constant.js +.\ap\static\setting_module\js\data_type_dropdown\controller.js +.\ap\static\setting_module\js\data_type_dropdown\core.js +.\ap\static\setting_module\js\data_type_dropdown\event.js +.\ap\static\setting_module\js\data_type_dropdown\helper.js +.\ap\static\setting_module\js\data_type_dropdown\type_definition.js .\ap\static\table_viewer\css\table_viewer.css .\ap\static\table_viewer\js\table_viewer.js .\ap\static\table_viewer\lang\English.json @@ -660,6 +685,7 @@ .\ap\templates\setting_module\proc_config.html .\ap\templates\setting_module\proc_config_modals.html .\ap\templates\setting_module\register_by_file.html +.\ap\templates\setting_module\system.html .\ap\templates\setting_module\terms_of_use.html .\ap\templates\setting_module\trace_config.html .\ap\templates\setting_module\_filter_line.html @@ -782,13 +808,14 @@ .\ap\translations\zh_Hans_CN\LC_MESSAGES\messages.po .\ap\translations\zh_Hant_TW\LC_MESSAGES\messages.mo .\ap\translations\zh_Hant_TW\LC_MESSAGES\messages.po -.\bridge\services\sql\sql_generator.py -.\bridge\services\sql\transaction_query_builder.py .\data_files\19.m_function.tsv .\init\app.sqlite3 .\init\sqlite3.dll .\lang\message.pot +.\migrations\versions\8600fce518a6_add_datetime_format_column_into_cfg_.py +.\migrations\versions\fd863d0b8735_add_is_file_path_column_into_cfg_data_.py .\requirements\common.txt +.\requirements\dev.txt .\requirements\oss_dev.txt .\requirements\oss_prod.txt .\sample_data\AgP_sample_data\AgP_sample.tsv diff --git a/ap/__init__.py b/ap/__init__.py index f27e819..859d70d 100644 --- a/ap/__init__.py +++ b/ap/__init__.py @@ -188,6 +188,14 @@ def init_engine(app, uri, **kwargs): def do_begin(dbapi_conn): dbapi_conn.execute('BEGIN IMMEDIATE') + @event.listens_for(db_engine, 'commit') + def do_expire(dbapi_conn): + """ + Expire all objects in `db.session` everytime meta session perform a commit. + This makes `db.session` removes all cached and queries to database again to get the newest objects + """ + db.session.expire_all() + return db_engine @@ -239,7 +247,8 @@ def create_app(object_name=None, is_main=False): from .sankey_plot import create_module as sankey_create_module from .scatter_plot import create_module as scatter_plot_create_module from .script.migrate_cfg_data_source_csv import migrate_cfg_data_source_csv - from .script.migrate_cfg_process import migrate_cfg_process_add_is_show_file_name + from .script.migrate_cfg_process import migrate_cfg_process + from .script.migrate_cfg_process_column import migrate_cfg_process_column from .script.migrate_csv_datatype import migrate_csv_datatype from .script.migrate_csv_dummy_datetime import migrate_csv_dummy_datetime from .script.migrate_csv_save_graph_settings import migrate_csv_save_graph_settings @@ -386,7 +395,8 @@ def get_locale(): migrate_cfg_process_column_add_column_raw_name(app.config[APP_DB_FILE]) migrate_cfg_process_column_add_column_type(app.config[APP_DB_FILE]) migrate_cfg_process_column_add_parent_id(app.config[APP_DB_FILE]) - migrate_cfg_process_add_is_show_file_name(app.config[APP_DB_FILE]) + migrate_cfg_process_column(app.config[APP_DB_FILE]) + migrate_cfg_process(app.config[APP_DB_FILE]) # migrate function data migrate_m_function_data(app.config[APP_DB_FILE]) diff --git a/ap/api/aggregate_plot/controllers.py b/ap/api/aggregate_plot/controllers.py index db2f0ad..158cad5 100644 --- a/ap/api/aggregate_plot/controllers.py +++ b/ap/api/aggregate_plot/controllers.py @@ -10,6 +10,7 @@ from ap.api.categorical_plot.services import customize_dict_param from ap.api.common.services.show_graph_database import get_config_data from ap.api.common.services.show_graph_jump_function import get_jump_emd_data +from ap.api.common.services.show_graph_services import judge_data_conversion from ap.api.trace_data.services.csv_export import to_csv from ap.common.constants import ( ARRAY_FORMVAL, @@ -122,6 +123,8 @@ def data_export(export_type): None, max_graph_config[MaxGraphNumber.AGP_MAX_GRAPH.name], ) + # export original value of judge variable + agp_df = judge_data_conversion(agp_df, graph_param, revert=True) end_proc_id = int(agp_dat[ARRAY_FORMVAL][0][END_PROC]) proc_name = graph_param.dic_proc_cfgs[end_proc_id].shown_name csv_list_name.append('{}.{}'.format(proc_name, export_type)) diff --git a/ap/api/aggregate_plot/services.py b/ap/api/aggregate_plot/services.py index ad73e76..67428ab 100644 --- a/ap/api/aggregate_plot/services.py +++ b/ap/api/aggregate_plot/services.py @@ -21,6 +21,7 @@ filter_cat_dict_common, get_data_from_db, get_filter_on_demand_data, + judge_data_conversion, ) from ap.api.scatter_plot.services import gen_df from ap.common.constants import ( @@ -149,7 +150,11 @@ def gen_agp_data(root_graph_param: DicParam, dic_param, df=None, max_graph=None) dic_param[ARRAY_PLOTDATA] = dic_data dic_param[IS_GRAPH_LIMITED] = is_graph_limited # calc y scale - min_max_list, all_graph_min, all_graph_max = calc_raw_common_scale_y(dic_param[ARRAY_PLOTDATA], str_cols) + min_max_list, all_graph_min, all_graph_max, max_common_y_scale_count = calc_raw_common_scale_y( + dic_param[ARRAY_PLOTDATA], + str_cols, + is_get_common_y_scale_count=True, + ) calc_scale_info( graph_param.dic_proc_cfgs, dic_param[ARRAY_PLOTDATA], @@ -157,6 +162,7 @@ def gen_agp_data(root_graph_param: DicParam, dic_param, df=None, max_graph=None) all_graph_min, all_graph_max, str_cols, + max_common_y_scale_count=max_common_y_scale_count, ) dic_param = get_filter_on_demand_data(dic_param) @@ -199,6 +205,7 @@ def gen_df_direct_term(root_graph_param, dic_param, dic_cat_filters, use_expired dic_cat_filters, _use_expired_cache=use_expired_cache, ) + df_term = judge_data_conversion(df_term, root_graph_param) df_term[DIVIDE_FMT_COL] = f'{term[START_DT]} | {term[END_DT]}' diff --git a/ap/api/analyze/services/pca.py b/ap/api/analyze/services/pca.py index f9decc0..eed363a 100644 --- a/ap/api/analyze/services/pca.py +++ b/ap/api/analyze/services/pca.py @@ -4,6 +4,7 @@ from sklearn.preprocessing import StandardScaler from ap.api.common.services.show_graph_services import ( + convert_datetime_to_ct, customize_dic_param_for_reuse_cache, filter_cat_dict_common, get_data_from_db, @@ -218,6 +219,7 @@ def gen_trace_data(graph_param, orig_graph_param, dic_cat_filters, use_expired_c # get data from database df, actual_record_number, unique_serial = get_trace_data(graph_param, dic_cat_filters, use_expired_cache) + convert_datetime_to_ct(df, graph_param) dic_var_name = {} for col_alias, id in ids.items(): diff --git a/ap/api/calendar_heatmap/services.py b/ap/api/calendar_heatmap/services.py index 687a9ae..0bdf514 100644 --- a/ap/api/calendar_heatmap/services.py +++ b/ap/api/calendar_heatmap/services.py @@ -43,6 +43,7 @@ END_PROC_NAME, HM_WEEK_MODE, HM_WEEK_MODE_DAYS, + IS_SERIAL_NO, MATCHED_FILTER_IDS, MAX_TICKS, NA_STR, @@ -350,6 +351,7 @@ def gen_plotly_data(graph_param, dic_param, dic_df_proc, hm_mode, hm_step, dic_c X_TICKVAL: x_tickvals, Y_TICKTEXT: y_ticktext, Y_TICKVAL: y_tickvals, + IS_SERIAL_NO: col_cfg.is_serial_no, }, ) dic_param[ARRAY_PLOTDATA][proc_id].append(plotdata) @@ -368,6 +370,7 @@ def gen_plotly_data(graph_param, dic_param, dic_df_proc, hm_mode, hm_step, dic_c X_TICKVAL: x_tickvals, Y_TICKTEXT: y_ticktext, Y_TICKVAL: y_tickvals, + IS_SERIAL_NO: col_cfg.is_serial_no, }, ) dic_param[ARRAY_PLOTDATA][proc_id].append(plotdata) diff --git a/ap/api/categorical_plot/services.py b/ap/api/categorical_plot/services.py index 7d6ef53..683b15e 100644 --- a/ap/api/categorical_plot/services.py +++ b/ap/api/categorical_plot/services.py @@ -883,7 +883,8 @@ def gen_graph_cyclic(graph_param, dic_param, terms, max_graph=None, df=None): plot['term_id'] = term_id set_chart_infos_to_plotdata(plot[END_COL], chart_infos, original_graph_configs, plot) - all_plots += plots + # all_plots += plots + all_plots.extend(plots) dic_param[ARRAY_PLOTDATA], dic_param[IS_GRAPH_LIMITED] = limit_graph_per_tab(all_plots, max_graph) diff --git a/ap/api/common/services/show_graph_database.py b/ap/api/common/services/show_graph_database.py index 83da771..d3e163f 100644 --- a/ap/api/common/services/show_graph_database.py +++ b/ap/api/common/services/show_graph_database.py @@ -13,7 +13,7 @@ ) from ap.common.logger import log_execution_time from ap.common.memoize import memoize -from ap.setting_module.models import CfgConstant, CfgProcess, CfgProcessColumn, CfgTrace +from ap.setting_module.models import CfgConstant, CfgProcess, CfgProcessColumn, CfgTrace, make_session from ap.setting_module.schemas import ShowGraphSchema, TraceSchema if TYPE_CHECKING: @@ -220,14 +220,16 @@ def preprocess_column(column: CfgProcessColumn) -> CfgProcessColumn: # column.data_type = DataType.TEXT.value # else: # column.format = EMPTY_STRING + if column.data_type == DataType.BOOLEAN.name and column.column_type != DataColumnType.JUDGE.value: + column.column_type = DataColumnType.BOOLEAN.value # need to change again, make sure date, time, boolean be converted to text - if column.data_type in [DataType.DATE.name, DataType.TIME.name]: + if column.data_type in [DataType.DATE.name, DataType.TIME.name, DataType.BOOLEAN.name]: column.data_type = DataType.TEXT.name # column.format = EMPTY_STRING # change data type column from `boolean` or `category` to Int(Cat) (PO requirements) - if column.data_type in [DataType.BOOLEAN.name, RawDataTypeDB.CATEGORY.name]: + if column.data_type == RawDataTypeDB.CATEGORY.name: column.data_type = DataType.INTEGER.name column.column_type = DataColumnType.INT_CATE.value @@ -253,18 +255,21 @@ def get_config_data(): show_graph_schema = ShowGraphSchema() trace_schema = TraceSchema() - # if dic_param: - # proc_ids = get_proc_ids_in_dic_param(dic_param) - # processes = CfgProcess.get_procs(proc_ids) - # else: - # processes = CfgProcess.get_all() - - processes = CfgProcess.get_all() - for process in processes: - preprocess_process(process) - - # modify processes data for showing graph - procs = show_graph_schema.dump(processes, many=True) + + # create new session to query from database, because we change data in `process_process` + # we don't want those changes to be commited to database + with make_session() as meta_session: + processes = meta_session.query(CfgProcess).all() + for process in processes: + preprocess_process(process) + cfg_traces = meta_session.query(CfgTrace).all() + + procs = show_graph_schema.dump(processes, many=True) + traces = trace_schema.dump(cfg_traces, many=True) + + # rollback to avoid changes data to be commited to database + meta_session.rollback() + dic_procs = {} proc_ids = [] for dic_proc in procs: @@ -273,8 +278,6 @@ def get_config_data(): show_graph_proc_data: CfgProcess = ShowGraphConfigData(**dic_proc) dic_procs[proc_id] = show_graph_proc_data - cfg_traces = CfgTrace.get_all() - traces = trace_schema.dump(cfg_traces, many=True) traces = [DictToClass(**trace) for trace in traces] trace_graph = TraceGraph(traces) dic_card_orders = {} diff --git a/ap/api/common/services/show_graph_services.py b/ap/api/common/services/show_graph_services.py index f7301ed..42f24d0 100644 --- a/ap/api/common/services/show_graph_services.py +++ b/ap/api/common/services/show_graph_services.py @@ -19,9 +19,10 @@ SqlProcLinkKey, gen_show_stmt, gen_tracing_cte, + gen_tracing_cte_with_delta_time_cut_off, ) from ap.api.common.services.utils import TraceGraph, gen_proc_time_label, gen_sql_and_params -from ap.api.external_api.services import save_odf_data_of_request +from ap.api.external_api.services import save_params_and_odf_data_of_request from ap.api.trace_data.services.regex_infinity import ( check_validate_target_column, get_changed_value_after_validate, @@ -65,6 +66,7 @@ CHART_INFOS, CHART_INFOS_ORG, COL_DATA_TYPE, + COL_ID, COLOR_ORDER, COMMON, COMMON_INFO, @@ -112,6 +114,7 @@ ORG_NONE_IDXS, PRC_MAX, PRC_MIN, + PROC_NAME, RANK_COL, RL_HIST_COUNTS, RL_HIST_LABELS, @@ -148,6 +151,7 @@ UNIQUE_COLOR, UNIQUE_DIV, UNIQUE_SERIAL, + UNIT, UNLINKED_IDXS, UNMATCHED_FILTER_IDS, UPPER_OUTLIER_IDXS, @@ -161,8 +165,8 @@ DuplicateSerialCount, DuplicateSerialShow, FilterFunc, + JudgeDefinition, N, - Operator, RemoveOutlierType, YType, ) @@ -421,16 +425,31 @@ def gen_group_filter_list(df, graph_param, dic_param, others=[]): sorted_filter_cols = [col.id for col in filter_sensors if col.id in actual_filter_cols] + # if group_list has nan, an int64 column will be converted to float64, 1 -> 1.0 + # should be keep original value of these columns, with convert nan to pd.NA first group_df = pd.DataFrame(columns=sorted_filter_cols, data=group_list) + for col in group_df: + group_df[col] = group_df[col].astype('Int64', errors='ignore') + # convert np.nan to NA_STR for filter + group_df.replace({np.nan: NA_STR}, inplace=True) + group_df = group_df.astype(str) dic_filter = {} for col in sorted_filter_cols: other_cols = list(sorted_filter_cols) other_cols.remove(col) - dic_filter[col] = { - vals[0]: dict(zip(other_cols, vals[1:])) for vals in group_df.groupby(col).agg(set).to_records().tolist() - } + dic_filter[col] = {} + unique_vals = group_df[col].unique() + + for val in unique_vals: + is_na = pd.isna(val) or val == NA_STR + filtered_df = ( + group_df[(group_df[col].isna()) | (group_df[col] == NA_STR)] + if is_na + else group_df[group_df[col] == val] + ) + dic_filter[col][val] = {other_col: filtered_df[other_col].unique().tolist() for other_col in other_cols} dic_param['dic_filter'] = dic_filter @@ -1820,6 +1839,7 @@ def gen_plotdata( END_COL_ID: col_id, END_COL_NAME: col_name, END_COL_SHOW_NAME: col_show_name, + UNIT: col_cfg.unit, CAT_EXP_BOX_NAME: cat_exp_box_proc_name, COL_DATA_TYPE: col_cfg.data_type, END_PROC_NAME: proc_cfg.shown_name, @@ -1884,6 +1904,7 @@ def gen_plotdata_fpp( END_PROC_NAME: dic_proc_name[proc_id].shown_name, END_COL_ID: col_id, END_COL_NAME: col_name, + UNIT: col_cfg.unit, END_COL_SHOW_NAME: col_show_name, CAT_EXP_BOX_NAME: cat_exp_box_proc_name, COL_DATA_TYPE: col_cfg.data_type, @@ -1913,7 +1934,12 @@ def gen_plotdata_fpp( return array_formval, plotdatas -def set_chart_infos_to_plotdata(col_id, chart_infos, original_graph_configs, plotdata): +def set_chart_infos_to_plotdata( + col_id, + chart_infos, + original_graph_configs, + plotdata, +): """ set chart config :param col_id: @@ -2081,37 +2107,6 @@ def calc_upper_lower_range(array_y: Series): return float(lower_range), float(upper_range) -@log_execution_time() -def apply_coef(df: DataFrame, graph_param: DicParam): - dic_proc_cfgs = graph_param.dic_proc_cfgs - for end_proc_info in graph_param.array_formval: - proc_cfg = dic_proc_cfgs.get(end_proc_info.proc_id) - if proc_cfg is None: - continue - - end_cols = proc_cfg.get_cols(end_proc_info.col_ids) or [] - for end_col in end_cols: - if not end_col.coef or not end_col.operator: - continue - - label = gen_sql_label(end_col.id, end_col.column_name) - if label not in df.columns: - continue - - if end_col.operator == Operator.REGEX.value: - df[label] = np.where(df[label].str.contains(end_col.coef), df[label], pd.NA) - elif end_col.operator == Operator.PLUS.value: - df[label] = df[label] + float(end_col.coef) - elif end_col.operator == Operator.MINUS.value: - df[label] = df[label] - float(end_col.coef) - elif end_col.operator == Operator.PRODUCT.value: - df[label] = df[label] * float(end_col.coef) - elif end_col.operator == Operator.DEVIDE.value: - df[label] = df[label] / float(end_col.coef) - - return df - - def get_filter_detail_ids(dic_proc_cfgs: Dict[int, CfgProcess], proc_ids, column_ids): """ get filter detail ids to check if this filter matching dataset of graph @@ -2350,7 +2345,7 @@ def calc_data_per_group(min_val, max_val, box=THIN_DATA_CHUNK): @log_execution_time() -def calc_raw_common_scale_y(plots, string_col_ids=None, y_col=ARRAY_Y): +def calc_raw_common_scale_y(plots, string_col_ids=None, y_col=ARRAY_Y, is_get_common_y_scale_count=False): """ calculate y min max in common scale :param plots: @@ -2359,20 +2354,40 @@ def calc_raw_common_scale_y(plots, string_col_ids=None, y_col=ARRAY_Y): """ y_commons = [] min_max_list = [] + # common_y_scale_count using for the chart that the calculated function is count + max_common_y_scale_count = 0 for plot in plots: s = pd.Series(plot[y_col]) - s = s[s.notnull()] + if not len(s): min_max_list.append((None, None)) + if is_get_common_y_scale_count: + # calculate and find min_max for none type number - start + plot_data = plot['data'] + df_list = [] + + # append data to df + for entry in plot_data: + df = pd.DataFrame(entry) + df_list.append(df) + + # merge df + non_empty_dfs = [df for df in df_list if not df.empty] + if non_empty_dfs: + combined_df = pd.concat(df_list) + # sum y by pair value + sum_y = combined_df.groupby('x')['y'].sum() + max_value = sum_y.max() + if max_value > max_common_y_scale_count: + max_common_y_scale_count = max_value + # calculate and find min_max for none type number - end continue - s = convert_series_to_number(s) # if s.dtypes == 'string': # min_max_list.append((None, None)) # continue s_without_inf = s[np.isfinite(s)] - min_val = s_without_inf.min() max_val = s_without_inf.max() if pd.isna(min_val): @@ -2397,7 +2412,10 @@ def calc_raw_common_scale_y(plots, string_col_ids=None, y_col=ARRAY_Y): all_graph_min = min(y_commons) all_graph_max = max(y_commons) - return min_max_list, all_graph_min, all_graph_max + if is_get_common_y_scale_count: + return min_max_list, all_graph_min, all_graph_max, max_common_y_scale_count + else: + return min_max_list, all_graph_min, all_graph_max def detect_abnormal_data(series_x, series_y, none_idxs=None): @@ -2549,6 +2567,7 @@ def calc_scale_info( end_col_id=END_COL_ID, y_col=ARRAY_Y, force_outlier=False, + max_common_y_scale_count=None, ): dic_datetime_cols = {} for idx, plotdata in enumerate(array_plotdata): @@ -2573,19 +2592,6 @@ def calc_scale_info( array_y = plotdata.get(ARRAY_Y) array_x = plotdata.get(ARRAY_X) - if (not len(array_y)) or (not len(array_x)) or (string_col_ids and plotdata[END_COL_ID] in string_col_ids): - dic_base_scale = { - Y_MIN: y_min, - Y_MAX: y_max, - LOWER_OUTLIER_IDXS: [], - UPPER_OUTLIER_IDXS: [], - } - plotdata[SCALE_AUTO] = dic_base_scale - plotdata[SCALE_SETTING] = dic_base_scale - plotdata[SCALE_THRESHOLD] = dic_base_scale - plotdata[SCALE_COMMON] = dic_base_scale - plotdata[SCALE_FULL] = dic_base_scale - continue series_x = pd.Series(array_x) series_y = pd.Series(array_y) @@ -2598,6 +2604,25 @@ def calc_scale_info( none_idxs = plotdata.get(NONE_IDXS) dic_abnormal_data = detect_abnormal_data(series_x, series_y, none_idxs) plotdata.update(dic_abnormal_data) + if ( + (not len(array_y)) + or (array_x is not None and not len(array_x)) + or (string_col_ids and plotdata[END_COL_ID] in string_col_ids) + ): + dic_base_scale = { + Y_MIN: y_min, + Y_MAX: y_max, + LOWER_OUTLIER_IDXS: [], + UPPER_OUTLIER_IDXS: [], + } + + plotdata[SCALE_AUTO] = dic_base_scale + plotdata[SCALE_SETTING] = dic_base_scale + plotdata[SCALE_THRESHOLD] = dic_base_scale + plotdata[SCALE_COMMON] = {**dic_base_scale, Y_MIN: 0, Y_MAX: max_common_y_scale_count} + plotdata[SCALE_FULL] = dic_base_scale + continue + for _idxs in dic_abnormal_data.values(): if _idxs: # array_y[_idxs] = None @@ -2609,24 +2634,38 @@ def calc_scale_info( series_y = series_y.loc[has_val_idxs] series_y = convert_series_to_number(series_y) - plotdata[SCALE_AUTO] = calc_auto_scale_y(plotdata, series_y, force_outlier=force_outlier) + plotdata[SCALE_FULL] = { + Y_MIN: y_min, + Y_MAX: y_max, + LOWER_OUTLIER_IDXS: [], + UPPER_OUTLIER_IDXS: [], + } + plotdata[SCALE_AUTO] = calc_auto_scale_y( + plotdata, + series_y, + force_outlier=force_outlier, + ) + if is_datetime_col: plotdata[SCALE_AUTO][Y_MIN] = y_min - plotdata[SCALE_SETTING] = calc_setting_scale_y(plotdata, series_y) - plotdata[SCALE_THRESHOLD] = calc_threshold_scale_y(plotdata, series_y) + plotdata[SCALE_SETTING] = calc_setting_scale_y( + plotdata, + series_y, + ) + + plotdata[SCALE_THRESHOLD] = calc_threshold_scale_y( + plotdata, + series_y, + ) + plotdata[SCALE_COMMON] = { Y_MIN: all_graph_min, Y_MAX: all_graph_max, LOWER_OUTLIER_IDXS: [], UPPER_OUTLIER_IDXS: [], } - plotdata[SCALE_FULL] = { - Y_MIN: y_min, - Y_MAX: y_max, - LOWER_OUTLIER_IDXS: [], - UPPER_OUTLIER_IDXS: [], - } + if is_datetime_col: plotdata[SCALE_FULL][Y_MIN] = 0 @@ -3084,7 +3123,7 @@ def get_selected_cate_column_ids(dic_param: dict): cate_column_ids = [] for cate_proc in dic_param[COMMON][CATE_PROCS]: for column_ids in [cate_proc[GET02_CATE_SELECT]]: - cate_column_ids.extend(column_ids) + cate_column_ids.extend(column_ids if isinstance(column_ids, list) else [column_ids]) return [int(column_id) for column_id in set(cate_column_ids)] @@ -3100,7 +3139,23 @@ def retrieve_order_setting(dic_proc_cfgs: Dict[int, CfgProcess], dic_param): for order_id in order_cols if order_id in dic_param[COMMON][DF_ALL_COLUMNS] or order_id in selected_cate_column_ids ] + # if having a facet but column is not selected, add it to dic_orders_column + cat_ex_boxes = dic_param[CAT_EXP_BOX] + if len(cat_ex_boxes) > 0: + for cat_ex_box in cat_ex_boxes: + proc_name = cat_ex_box[PROC_NAME] + column_id = cat_ex_box[COL_ID] + + # add column_id of cat_exp_box to dict_orders_column + if proc_name in dic_orders_columns: + if column_id not in dic_orders_columns[proc_name]: + dic_orders_columns[proc_name].append(column_id) + else: + # add new proc_name (in case that no column is selected) + dic_orders_columns[proc_name] = [column_id] + dic_param[COMMON][AVAILABLE_ORDERS] = dic_orders_columns + return dic_param @@ -3333,7 +3388,7 @@ def get_filter_on_demand_data(dic_param, remove_filter_data=False): if key in dic_param: dic_param.pop(key) - save_odf_data_of_request(dic_param) + save_params_and_odf_data_of_request(dic_param) return dic_param @@ -3402,6 +3457,9 @@ def get_data_from_db( df[col_name] = calc_cycle_time_of_list(df[col_name]) df[categorized_col_name] = df[col_name].astype(float) + df = judge_data_conversion(df, graph_param) + df = boolean_data_conversion(df, graph_param) + # on-demand filter if dic_filter: df = filter_df(graph_param.dic_proc_cfgs, df, dic_filter) @@ -3423,8 +3481,6 @@ def get_data_from_db( df = remove_outlier(df, sensor_labels, graph_param) df = cast_df_number(df, graph_param) - # apply coef for text - df = apply_coef(df, graph_param) return df, actual_total_record, unique_serial_number @@ -3766,6 +3822,8 @@ def gen_sql_proc_link_key_from_trace_keys(edge: CfgTrace) -> Tuple[List[SqlProcL self_sensor_keys: List[SqlProcLinkKey] = [] target_sensor_keys: List[SqlProcLinkKey] = [] for key in edge.trace_keys: + is_delta_time_cut_off_linked = key.delta_time is not None + self_key = SqlProcLinkKey( id=key.self_column.id, name=gen_bridge_column_name(key.self_column.id, key.self_column.column_name), @@ -3773,6 +3831,7 @@ def gen_sql_proc_link_key_from_trace_keys(edge: CfgTrace) -> Tuple[List[SqlProcL substr_to=key.self_column_substr_to, delta_time=key.delta_time, cut_off=key.cut_off, + is_delta_time_cut_off_linked=is_delta_time_cut_off_linked, ) self_sensor_keys.append(self_key) @@ -3784,6 +3843,7 @@ def gen_sql_proc_link_key_from_trace_keys(edge: CfgTrace) -> Tuple[List[SqlProcL # delta time and cut_off apply only self process link key, self_link_key + delta_time = target_link_key delta_time=None, cut_off=None, + is_delta_time_cut_off_linked=is_delta_time_cut_off_linked, ) target_sensor_keys.append(target_key) @@ -3831,15 +3891,9 @@ def gen_proc_link_from_sql( dict_cond_procs=dict_cond_procs, ) - stmt = gen_show_stmt(cte_tracing=cte_tracing, sql_objs=sql_objs) - # if for_count: - # stmt = gen_id_stmt(cte_tracing=cte_tracing) - # else: - # stmt = gen_show_stmt( - # cte_tracing=cte_tracing, - # sql_objs=sql_objs, - # # types_should_be_casted=[RawDataTypeDB.BOOLEAN], - # ) + cte_tracing_delta_time_cut_off = gen_tracing_cte_with_delta_time_cut_off(cte_tracing=cte_tracing, sql_objs=sql_objs) + + stmt = gen_show_stmt(cte_tracing=cte_tracing_delta_time_cut_off, sql_objs=sql_objs) sql, params = gen_sql_and_params(stmt) return sql, params @@ -3917,7 +3971,10 @@ def add_equation_column_to_df(df, function_detail, graph_config_data: ShowGraphC x_dtype = cfg_col_x.predict_type if cfg_col_x else None y_dtype = cfg_col_y.predict_type if cfg_col_y else None - return equation.evaluate(df, out_col=column_out, x_col=column_x, y_col=column_y, x_dtype=x_dtype, y_dtype=y_dtype) + df = equation.evaluate(df, out_col=column_out, x_col=column_x, y_col=column_y, x_dtype=x_dtype, y_dtype=y_dtype) + # update data type + cfg_col.predict_type = function_detail.return_type + return df def sorted_function_details(cfg_process_columns: list[CfgProcessColumn]) -> list[CfgProcessFunctionColumn]: @@ -3948,3 +4005,38 @@ def get_equation_data(df, end_proc: EndProc): df[label] = df[label].str.lower() return df + + +@log_execution_time() +def judge_data_conversion(df, graph_param, revert=False) -> DataFrame: + """ + All data-type can be set as judge column + But, only 1|0 will be converted into OK|NG, anything else will be converted into null (pd.NA) + eg: input[1,0,NG,A,None,2] -> output[OK,NG,NA,NA,NA,NA] + """ + judge_columns = graph_param.get_judge_variables() + if judge_columns: + if revert: + df[judge_columns] = df[judge_columns].replace( + {JudgeDefinition.OK.name: JudgeDefinition.OK.value, JudgeDefinition.NG.name: JudgeDefinition.NG.value}, + ) + else: + df[judge_columns] = ( + df[judge_columns] + .astype(pd.BooleanDtype()) + .replace({True: JudgeDefinition.OK.name, False: JudgeDefinition.NG.name}) + ) + return df + + +@log_execution_time() +def boolean_data_conversion(df, graph_param) -> DataFrame: + """ + All data-type can be set as judge column + But, only 1|0 will be converted into OK|NG, anything else will be converted into null (pd.NA) + eg: input[1,0,NG,A,None,2] -> output[true,false,NA,NA,NA,NA] + """ + boolean_columns = graph_param.get_boolean_variables() + for col in boolean_columns: + df[col] = df[col].astype(pd.BooleanDtype()).astype(pd.StringDtype()).str.lower() + return df diff --git a/ap/api/common/services/sql_generator.py b/ap/api/common/services/sql_generator.py index 360240b..9ff0a27 100644 --- a/ap/api/common/services/sql_generator.py +++ b/ap/api/common/services/sql_generator.py @@ -18,6 +18,7 @@ from ap.common.constants import ( SQL_REGEXP_FUNC, TIME_COL, + UNIXEPOCH, DuplicateSerialShow, FilterFunc, RawDataTypeDB, @@ -50,6 +51,12 @@ FILTER_PREFIX = 'filtered' +TIMEDIFF_PREFIX = 'timediff' +RANK_BY_TIMEDIFF = 'rank_by_timediff' +CTE_TRACING_TIMEDIFF = 'cte_tracing_timediff' +CTE_TRACING_RANK_BY_TIMEDIFF = 'cte_tracing_rank_by_timediff' +CTE_TRACING_MIN_TIMEDIFF = 'cte_tracing_min_timediff' + def gen_alias_col_name(trans_data: TransactionData, column_name: str) -> Optional[str]: cfg_column = trans_data.get_cfg_column_by_name(column_name) @@ -82,21 +89,29 @@ class SqlProcLinkKey: name: str substr_from: Optional[int] substr_to: Optional[int] - delta_time: Optional[int] - cut_off: Optional[int] + delta_time: Optional[float] + cut_off: Optional[float] + is_delta_time_cut_off_linked: bool @property def good(self) -> bool: - return (self.substr_from and self.substr_to) or bool(self.delta_time) + return (self.substr_from and self.substr_to) or self.is_delta_time_cut_off_linked @property def bad(self) -> bool: return not self.good + @cached_property + def cfg_col(self) -> CfgProcessColumn | None: + return CfgProcessColumn.get_by_id(self.id) + @property def sql_label(self) -> str: - cfg_cols = CfgProcessColumn.get_by_ids([self.id])[0] - return cfg_cols.gen_sql_label() + return self.cfg_col.gen_sql_label() + + @property + def unixepoch_sql_label(self) -> str: + return f'{self.sql_label}_{UNIXEPOCH}' class SqlProcLink: @@ -200,9 +215,6 @@ def gen_cte( is_start_proc: bool = False, for_count: bool = False, ): - if self.is_delta_time_using: - return self.gen_cte_by_delta_time(idx, duplicated_serial_show, is_start_proc, for_count) - query_builder = TransactionDataQueryBuilder(self.trans_data) if is_start_proc: query_builder.add_column(column=self.trans_data.id_col_name) @@ -230,50 +242,33 @@ def gen_cte( cte = query_builder.build().cte(f'{CTE_PROCESS_PREFIX}{idx}') cte: CTE = self.apply_filter(cte) + cte = self.gen_cached_unixepoch_cte(cte) return cte - @log_execution_time(SQL_GENERATOR_PREFIX) - def gen_cte_by_delta_time( - self, - idx: int, - duplicated_serial_show: DuplicateSerialShow, - is_start_proc: bool = False, - for_count: bool = False, - ): - query_builder = TransactionDataQueryBuilder(self.trans_data) - if is_start_proc: - query_builder.add_column(column=self.trans_data.id_col_name) - - time_col = self.trans_data.getdate_column - query_builder.add_column(column=time_col.bridge_column_name, label=self.gen_proc_time_label(is_start_proc)) - query_builder.between(start_tm=self.start_tm, end_tm=self.end_tm) - query_builder_time_col = query_builder.column(self.gen_proc_time_label(is_start_proc)) - - for cfg_col in self.all_cfg_columns: - query_builder.add_column(column=cfg_col.bridge_column_name, label=cfg_col.gen_sql_label()) - - link_cols = [] - for col_label in self.all_link_keys_labels: - link_cols.append(query_builder.column(col_label)) - - if not for_count and duplicated_serial_show != DuplicateSerialShow.SHOW_BOTH: - distinct_cols = [col for col in link_cols if col.name != self.time_col] - if distinct_cols: - query_builder.distinct(columns=distinct_cols) - if duplicated_serial_show == DuplicateSerialShow.SHOW_FIRST: - query_builder.having(columns=[func.min(query_builder_time_col)]) - else: - query_builder.having(columns=[func.max(query_builder_time_col)]) - - cte = query_builder.build().cte(f'{CTE_PROCESS_PREFIX}{idx}') - cte: CTE = self.apply_filter(cte) - - return cte + def gen_cached_unixepoch_cte(self, cte: CTE) -> CTE: + unixepoch_cols = [] + for key in self.link_keys: + if key.is_delta_time_cut_off_linked: + column = cte.c.get(key.sql_label) + if column is None: + raise ValueError(f'{key.name} must existed in CTE') + unixepoch_col = convert_to_unixepoch(column) + unixepoch_cols.append(unixepoch_col.label(key.unixepoch_sql_label)) + + if not unixepoch_cols: + return cte - @property - def is_delta_time_using(self): - return all(link_key.delta_time for link_key in self.link_keys) + return ( + sa.select( + [ + *unixepoch_cols, + *cte.c, + ], + ) + .cte(f'{cte.description}_{UNIXEPOCH}') + .prefix_with('MATERIALIZED') + ) def cast_col_to_text(col: ColumnClause, raw_data_type: str) -> Union[ColumnClause, ColumnOperators]: @@ -321,36 +316,75 @@ def make_comparison_column_with_cast_and_substr( return modified_col1 == modified_col2 -def unixepoch_delta_time_col(col, delta_time=0, cut_off=0): - if delta_time: - seconds = delta_time + cut_off / 1000 - return func.unixepoch(col, 'subsec') + seconds +def convert_to_unixepoch(col: ColumnClause) -> ColumnClause: + return func.unixepoch(col) + + +def make_comparisons_column_delta_time_and_cut_off( + from_col: ColumnClause, + from_key: SqlProcLinkKey, + to_col: ColumnClause, + to_key: SqlProcLinkKey, +): + def _make_comparison(col: ColumnClause, key: SqlProcLinkKey, other_col: ColumnClause): + cut_off = abs(key.cut_off if key.cut_off is not None else 0) + return [ + other_col > col, + other_col < col + key.delta_time * 60 + cut_off * 60, + other_col > col + key.delta_time * 60 - cut_off * 60, + ] + + if from_key.delta_time is not None: + return _make_comparison(from_col, from_key, to_col) + + if to_key.delta_time is not None: + return _make_comparison(to_col, to_key, from_col) + + return [] + + +def make_comparisons_column( + from_col: ColumnClause, + from_key: SqlProcLinkKey, + from_data_type: str, + to_col: ColumnClause, + to_key: SqlProcLinkKey, + to_data_type: str, +): + if from_key.is_delta_time_cut_off_linked or to_key.is_delta_time_cut_off_linked: + # TODO: check data type + comparisons = make_comparisons_column_delta_time_and_cut_off( + from_col, + from_key, + to_col, + to_key, + ) + return comparisons else: - return func.unixepoch(col, 'subsec') + comparison = make_comparison_column_with_cast_and_substr( + from_col, + from_key, + from_data_type, + to_col, + to_key, + to_data_type, + ) + return [comparison] -def make_comparison_column_delta_time_and_cut_off(comparisons, from_col, from_key, to_col, to_key): - if from_key.delta_time: - to_col_val = unixepoch_delta_time_col(to_col) - if from_key.cut_off: - min_cfg_col = unixepoch_delta_time_col(from_col, from_key.delta_time) - max_cfg_col = unixepoch_delta_time_col(from_col, from_key.delta_time, from_key.cut_off) - comparisons.append(min_cfg_col <= to_col_val) - comparisons.append(max_cfg_col >= to_col_val) - else: - from_col_val = unixepoch_delta_time_col(from_col, from_key.delta_time) - comparisons.append(from_col_val == to_col_val) - - elif to_key.delta_time: - from_col_val = unixepoch_delta_time_col(from_col) - if to_key.cut_off: - min_other_col = unixepoch_delta_time_col(to_col, to_key.delta_time) - max_other_col = unixepoch_delta_time_col(to_col, to_key.delta_time, to_key.cut_off) - comparisons.append(min_other_col <= from_col_val) - comparisons.append(max_other_col >= from_col_val) - else: - to_col_val = unixepoch_delta_time_col(to_col, to_key.delta_time) - comparisons.append(from_col_val == to_col_val) +def make_delta_time_diff( + from_col: ColumnClause, + from_key: SqlProcLinkKey, + to_col: ColumnClause, + to_key: SqlProcLinkKey, +): + if from_key.delta_time is not None: + return func.abs(to_col - (from_col + from_key.delta_time * 60)) + + if to_key.delta_time is not None: + return func.abs(from_col - (to_col + to_key.delta_time * 60)) + + return None @log_execution_time(SQL_GENERATOR_PREFIX) @@ -378,29 +412,23 @@ def gen_tracing_cte( comparisons = [] for from_key, to_key in zip(link_keys, prev_link_keys): - from_cfg_col = sql_obj.trans_data.get_cfg_column_by_name(from_key.name) - to_cfg_col = prev_sql_obj.trans_data.get_cfg_column_by_name(to_key.name) - from_col = cte_proc.c.get(from_cfg_col.gen_sql_label()) - to_col = prev_cte_proc.c.get(to_cfg_col.gen_sql_label()) - if from_key.delta_time or to_key.delta_time: - # in case of data link by delta_time, use datetime function - if from_key.delta_time: - to_col_val = func.datetime(to_col) - from_col_val = func.datetime(from_col, f'+{int(from_key.delta_time)} seconds') - else: - to_col_val = func.datetime(to_col, f'+{int(to_key.delta_time)} seconds') - from_col_val = func.datetime(from_col) - comparisons.append(to_col_val == from_col_val) + if from_key.is_delta_time_cut_off_linked: + from_col = cte_proc.c.get(from_key.unixepoch_sql_label) + to_col = prev_cte_proc.c.get(to_key.unixepoch_sql_label) else: - comp = make_comparison_column_with_cast_and_substr( + from_col = cte_proc.c.get(from_key.sql_label) + to_col = prev_cte_proc.c.get(to_key.sql_label) + + comparisons.extend( + make_comparisons_column( from_col, from_key, - from_cfg_col.data_type, + from_key.cfg_col.raw_data_type, to_col, to_key, - to_cfg_col.data_type, - ) - comparisons.append(comp) + to_key.cfg_col.raw_data_type, + ), + ) if duplicated_serial_show == duplicated_serial_show.SHOW_BOTH: from_col = cte_proc.c.get(gen_row_number_col_name(sql_obj.process_id)) @@ -424,73 +452,6 @@ def gen_tracing_cte( return stmt.cte(tracing_table_alias) -def gen_trace_by_delta_time_query( - sql_objs: list[SqlProcLink], -): - _ctes = [] - _target_selected = [] - _markers = [] - _tables = [] - _condition = [] - for idx, sql_obj in enumerate(sql_objs): - _cte = f'''cte_marker_{idx} AS (SELECT ''' - # add target columns - _select = [f'{selected_cols}' for selected_cols in sql_obj.select_col_names] - for column in sql_obj.all_cfg_columns: - if column.id in sql_obj.select_col_ids: - _target_selected.append(f'{column.bridge_column_name} AS "{column.gen_sql_label()}"') - - # add link keys - for linked_key in sql_obj.link_cfg_columns: - if linked_key.bridge_column_name not in sql_obj.select_col_names: - _select.append(linked_key.bridge_column_name) - - _cte += ', '.join(_select) - link_col = sql_obj.link_cfg_columns[0].bridge_column_name - # add marker - _cte += f''', CASE - WHEN strftime('%s', {link_col}) - - strftime('%s', LAG({link_col}, 1) OVER ( - ORDER BY {link_col})) = {sql_obj.link_keys[0].delta_time} THEN 1 - ELSE 0 - END AS marker_{idx} - FROM {sql_obj.trans_data.table_name} - WHERE {sql_obj.time_col} BETWEEN '{sql_obj.start_tm}' AND '{sql_obj.end_tm}'), - cte_delta_t_{idx} AS (SELECT ''' - _cte += ', '.join(_select) - _cte += f''', CASE - WHEN marker_{idx} > 0 THEN - SUM(marker_{idx}) - OVER (ORDER BY {link_col} ROWS BETWEEN UNBOUNDED PRECEDING AND CURRENT ROW) - END AS marker_{idx} - FROM cte_marker_{idx})''' - _markers.append(f't{idx}.marker_{idx}') - _tables.append(f'cte_delta_t_{idx} t{idx}') - _condition.append(f't{idx}.{sql_obj.time_col}') - _ctes.append(_cte) - - _cte_trace = 'SELECT ' - _cte_trace += ', '.join(_target_selected) + ', ' - _cte_trace += ', '.join(_markers) + ', ' - _cte_trace += ', '.join(_condition) + ', ' - - for idx, time in enumerate(_condition): - if not idx: - _cte_trace += time + ' AS time' - _cte_trace += ', ' + time + f' AS time_{sql_objs[idx].process_id}' - _cte_trace += f''' FROM {_tables[0]}''' - for idx, _cte_table in enumerate(_tables): - if not idx: - continue - _cte_trace += f''' LEFT OUTER JOIN {_cte_table} - ON {_markers[idx - 1]} = {_markers[idx]}''' - # WHERE {_condition[idx - 1]} BETWEEN '{sql_objs[0].start_tm}' AND '{sql_objs[0].end_tm}' - query = ', '.join(_ctes) - query = f'WITH {query}' - query += _cte_trace - return query, None - - def gen_conditions_per_column(filters): ands = [] for cfg_filter in filters: @@ -540,6 +501,44 @@ def gen_sql_condition_per_col( return and_(*ands) +def gen_tracing_cte_with_delta_time_cut_off(cte_tracing: CTE, sql_objs: list[SqlProcLink]) -> CTE: + timediff_cols = [] + for sql_obj, prev_sql_obj in zip(sql_objs[1:], sql_objs): + link_keys = sql_obj.link_keys + prev_link_keys = prev_sql_obj.next_link_keys or prev_sql_obj.link_keys + for from_key, to_key in zip(link_keys, prev_link_keys): + if from_key.is_delta_time_cut_off_linked or to_key.is_delta_time_cut_off_linked: + from_col = cte_tracing.c.get(from_key.unixepoch_sql_label) + to_col = cte_tracing.c.get(to_key.unixepoch_sql_label) + timediff_cols.append(make_delta_time_diff(from_col, from_key, to_col, to_key)) + + if not timediff_cols: + return cte_tracing + + timediff_labels = [f'{TIMEDIFF_PREFIX}_{i}' for i in range(len(timediff_cols))] + timediff_cols = [col.label(label) for col, label in zip(timediff_cols, timediff_labels)] + + cte_tracing_timediff = select([*cte_tracing.columns, *timediff_cols]).cte(CTE_TRACING_TIMEDIFF) + + rank_by_timediff = ( + sa.func.rank() + .over( + partition_by=cte_tracing_timediff.c.get(TransactionData.id_col_name), + order_by=[cte_tracing_timediff.c.get(col) for col in timediff_labels], + ) + .label(RANK_BY_TIMEDIFF) + ) + cte_tracing_rank = select([*cte_tracing_timediff.columns, rank_by_timediff]).cte(CTE_TRACING_RANK_BY_TIMEDIFF) + + cte_tracing_filtered_rank = ( + select([*cte_tracing_rank.columns]) + .where(cte_tracing_rank.c.get(RANK_BY_TIMEDIFF) == 1) + .cte(CTE_TRACING_MIN_TIMEDIFF) + ) + + return cte_tracing_filtered_rank + + @log_execution_time(SQL_GENERATOR_PREFIX) def gen_show_stmt( cte_tracing: CTE, @@ -597,6 +596,8 @@ def gen_sql_proc_link_count(trace: CfgTrace, limit: Optional[int] = None) -> Sel target_trans_data = TransactionData(trace.target_process_id) for trace_key in trace.trace_keys: + is_delta_time_cut_off_linked = trace_key.delta_time is not None + self_proc_link_keys.append( SqlProcLinkKey( id=trace_key.self_column_id, @@ -605,6 +606,7 @@ def gen_sql_proc_link_count(trace: CfgTrace, limit: Optional[int] = None) -> Sel substr_to=trace_key.self_column_substr_to, delta_time=trace_key.delta_time, cut_off=trace_key.cut_off, + is_delta_time_cut_off_linked=is_delta_time_cut_off_linked, ), ) target_proc_link_keys.append( @@ -616,6 +618,7 @@ def gen_sql_proc_link_count(trace: CfgTrace, limit: Optional[int] = None) -> Sel # delta time and cut_off apply only self process link key, self_link_key + delta_time = target_link_key delta_time=None, cut_off=None, + is_delta_time_cut_off_linked=is_delta_time_cut_off_linked, ), ) self_query_builder = TransactionDataProcLinkQueryBuilder( @@ -680,25 +683,6 @@ def add_column( column = column.label(label) self.selected_columns.append(column) - def add_column_by_case(self, datetime_column, delta_time=None, label: Optional[str] = None): - # func.lag does not work - link_columns = self.table_column(datetime_column) - filter_column = sa.case( - ( - ( - func.strftime('%s', link_columns) - - func.strftime('%s', func.lag(link_columns, 1).over(order_by=link_columns)) - ) - == delta_time, - 1, - ), - else_=0, - ).label(label) - self.selected_columns.extend(filter_column) - - def add_columns(self, columns: list[Label]) -> None: - self.selected_columns.extend(columns) - def distinct(self, *, columns: list[sa.Column | Label]) -> None: self.distinct_columns = columns @@ -760,52 +744,59 @@ def __init__( def build_proc_link_cte(self) -> Self: query_builder = TransactionDataQueryBuilder(self.trans_model) for key in self.proc_link_keys: - cfg_col = self.trans_model.get_cfg_column_by_id(int(key.id)) - query_builder.add_column(column=cfg_col.bridge_column_name, label=cfg_col.gen_sql_label()) + query_builder.add_column(column=key.cfg_col.bridge_column_name, label=key.sql_label) stmt = query_builder.build(self.limit) self.cte = stmt.cte(self.table_alias) + self.cte = self.gen_cached_unixepoch_cte() return self + def gen_cached_unixepoch_cte(self) -> CTE: + unixepoch_cols = [] + for key in self.proc_link_keys: + if key.is_delta_time_cut_off_linked: + column = self.cte.c.get(key.sql_label) + if column is None: + raise ValueError(f'{key.name} must existed in CTE') + unixepoch_col = convert_to_unixepoch(column) + unixepoch_cols.append(unixepoch_col.label(key.unixepoch_sql_label)) + + if not unixepoch_cols: + return self.cte + + return ( + sa.select( + [ + *unixepoch_cols, + *self.cte.c, + ], + ) + .cte(f'{self.table_alias}_{UNIXEPOCH}') + .prefix_with('MATERIALIZED') + ) + def get_column_by_label(self, label: str) -> Optional[ColumnClause]: return self.cte.c.get(label) - def get_column_by_cfg_column(self, cfg_column: CfgProcessColumn) -> ColumnClause: - column = self.get_column_by_label(cfg_column.gen_sql_label()) - - if column is None: - raise AssertionError(f"column : {cfg_column.column_name} doesn't exist") - - return column - def make_link_comparison(self, other: Self) -> list[ColumnOperators]: comparisons = [] for key, other_key in zip(self.proc_link_keys, other.proc_link_keys): - cfg_column: CfgProcessColumn = self.trans_model.get_cfg_column_by_id(int(key.id)) - other_cfg_column: CfgProcessColumn = other.trans_model.get_cfg_column_by_id(int(other_key.id)) - - column = self.get_column_by_cfg_column(cfg_column) - other_column = other.get_column_by_cfg_column(other_cfg_column) - - if key.delta_time or other_key.delta_time: - # in case of data link by delta_time, use datetime function - if key.delta_time: - from_col_val = func.datetime(column, f'+{int(key.delta_time)} seconds') - to_col_val = func.datetime(other_column) - else: - from_col_val = func.datetime(column) - to_col_val = func.datetime(other_column, f'+{int(other_key.delta_time)} seconds') - comparisons.append(from_col_val == to_col_val) + if key.is_delta_time_cut_off_linked: + column = self.get_column_by_label(key.unixepoch_sql_label) + other_column = other.get_column_by_label(other_key.unixepoch_sql_label) else: - # non-master column must be cast before linking - comparison = make_comparison_column_with_cast_and_substr( + column = self.get_column_by_label(key.sql_label) + other_column = other.get_column_by_label(other_key.sql_label) + + comparisons.extend( + make_comparisons_column( column, key, - cfg_column.data_type, + key.cfg_col.raw_data_type, other_column, other_key, - other_cfg_column.data_type, - ) - comparisons.append(comparison) + other_key.cfg_col.raw_data_type, + ), + ) return comparisons diff --git a/ap/api/common/services/utils.py b/ap/api/common/services/utils.py index d2e4d63..cf8979c 100644 --- a/ap/api/common/services/utils.py +++ b/ap/api/common/services/utils.py @@ -1,12 +1,17 @@ from __future__ import annotations +import copy +import re +import uuid from collections import Counter, defaultdict from typing import TYPE_CHECKING, Dict, Iterator, TypeVar from flask_sqlalchemy import BaseQuery from sqlalchemy.dialects import sqlite -from ap.common.constants import TIME_COL +from ap.common.constants import TIME_COL, WELL_KNOWN_COLUMNS, DataGroupType, MasterDBType +from ap.common.logger import log_execution_time +from ap.common.memoize import memoize from ap.common.pydn.dblib.sqlite import SQLite3 from ap.setting_module.models import CfgProcess @@ -15,11 +20,30 @@ T = TypeVar('T') +MUST_EXISTED_COLUMNS_FOR_MASTER_TYPE = { + MasterDBType.V2.name: [ + {'計測日時', '計測項目名', '計測値'}, + ], + MasterDBType.V2_MULTI.name: [ + {'加工日時', '測定項目名', '測定値'}, + {'processed_date_time', 'measurement_item_name', 'measured_value'}, + ], + MasterDBType.V2_HISTORY.name: [ + {'計測日時', '子部品シリアルNo'}, + ], + MasterDBType.V2_MULTI_HISTORY.name: [ + {'加工日時', '子部品シリアルNo'}, + ], +} + def gen_sql_and_params(stmt: Select) -> tuple[str, dict[str, str]]: compiled_stmt = stmt.compile(dialect=sqlite.dialect()) # return compiled_stmt.string, compiled_stmt.params - return compiled_stmt.string, list(compiled_stmt.params.values()) + position_params = compiled_stmt.positiontup + dict_params = compiled_stmt.params + params = [dict_params[pos] for pos in position_params] # sort params based position + return compiled_stmt.string, params def run_sql_from_query_with_casted(*, query: BaseQuery, db_instance: SQLite3, cls: type[T]) -> Iterator[T]: @@ -111,52 +135,60 @@ def get_all_paths_in_graph(self): return paths + def _unique_key_between_edges(self, left_proc, right_proc): + """Generate key to match between trace processes. + If we have delta_time, cut_off linked between those processes, we should always make sure they are unique, + and are not be removed. Since delta_time and cut_off linked are asymmetric + :param left_proc: + :param right_proc: + :return: + """ + + def _delta_time_key(trace_key): + if trace_key.delta_time is not None: + return uuid.uuid4().hex + return None + + edge = self.dic_edges.get((left_proc, right_proc)) + if not edge: + edge = self.dic_edges.get((right_proc, left_proc)) + key = tuple( + ( + key.self_column_id, + key.self_column_substr_from, + key.self_column_substr_to, + _delta_time_key(key), + ) + for key in edge.trace_keys + ) + else: + key = tuple( + ( + key.target_column_id, + key.target_column_substr_from, + key.target_column_substr_to, + _delta_time_key(key), + ) + for key in edge.trace_keys + ) + + return key + def remove_middle_nodes(self, path): min_nodes_count = 2 if len(path) <= min_nodes_count: return path reduced_path = [path[0]] + for idx in range(len(path))[1:-1]: start_proc = path[idx - 1] middle_proc = path[idx] end_proc = path[idx + 1] - first_edge = self.dic_edges.get((start_proc, middle_proc)) - if not first_edge: - first_edge = self.dic_edges.get((middle_proc, start_proc)) - left_cols = tuple( - (key.self_column_id, key.self_column_substr_from, key.self_column_substr_to) - for key in first_edge.trace_keys - ) - else: - left_cols = tuple( - ( - key.target_column_id, - key.target_column_substr_from, - key.target_column_substr_to, - ) - for key in first_edge.trace_keys - ) - - next_edge = self.dic_edges.get((middle_proc, end_proc)) - if not next_edge: - next_edge = self.dic_edges.get((end_proc, middle_proc)) - right_cols = tuple( - ( - key.target_column_id, - key.target_column_substr_from, - key.target_column_substr_to, - ) - for key in next_edge.trace_keys - ) - else: - right_cols = tuple( - (key.self_column_id, key.self_column_substr_from, key.self_column_substr_to) - for key in next_edge.trace_keys - ) - - if left_cols != right_cols: + left_key = self._unique_key_between_edges(start_proc, middle_proc) + right_key = self._unique_key_between_edges(middle_proc, end_proc) + if left_key != right_key: reduced_path.append(middle_proc) reduced_path.append(path[-1]) @@ -203,3 +235,97 @@ def get_distinct_trace_columns(self): trace_cols.add((end_proc_id, end_cols)) return trace_cols + + +@log_execution_time() +def get_well_known_columns_for_others_type( + well_known_columns: dict[str, str], + cols: list[str] | set[str], +) -> dict[str, int]: + results = {} + master_date_group_types = [] + for col in cols: + for data_group_type, pattern_regex in well_known_columns.items(): + if pattern_regex and re.search(pattern_regex, col, re.IGNORECASE): + if data_group_type not in master_date_group_types: + results[col] = data_group_type + master_date_group_types.append(data_group_type) + else: + results[col] = DataGroupType.HORIZONTAL_DATA.value + + break + + results[col] = DataGroupType.HORIZONTAL_DATA.value + + return results + + +@log_execution_time() +def get_well_known_columns_for_v2_type( + well_known_columns: dict[str, str], + cols: list[str] | set[str], +) -> dict[str, int]: + from ap.api.setting_module.services.v2_etl_services import normalize_column_name + + normalized_cols = normalize_column_name(cols) + + def get_group_type(col: str, normalized_col: str) -> str | None: + return well_known_columns.get(col, None) or well_known_columns.get(normalized_col, None) + + group_types = map(get_group_type, cols, normalized_cols) + return {col: group_type for col, group_type in zip(cols, group_types) if group_type is not None} + + +@memoize() +def get_well_known_columns(master_type: str, cols: list[str] | set[str] | None = None) -> dict[str, int]: + old_well_known_columns = WELL_KNOWN_COLUMNS.get(master_type, {}) + if not cols: + return copy.deepcopy(old_well_known_columns) + + if master_type == MasterDBType.OTHERS.name: + well_known_columns = get_well_known_columns_for_others_type(old_well_known_columns, cols) + elif MasterDBType.is_v2_group(master_type): + well_known_columns = get_well_known_columns_for_v2_type(old_well_known_columns, cols) + else: + well_known_columns = copy.deepcopy(old_well_known_columns) + return well_known_columns + + +def check_missing_column_by_data_group_type(master_type: str, file_columns: list[str]) -> bool: + existed_group_types = set(get_well_known_columns(master_type, file_columns).values()) + required_group_types = set(get_well_known_columns(master_type, cols=None).values()) + contains_all_required_group_types = required_group_types <= existed_group_types + has_missing = not contains_all_required_group_types + return has_missing + + +def get_specific_v2_type_based_on_column_names( + column_names: list[str] | set[str] | None = None, +) -> str | None: + """Currently only works for V2 master data + Checking if column names is referring to V2, V2 multi, V2 history or V2 multi history + Currently, we use hardcoded values through `MUST_EXISTED_COLUMNS_FOR_MASTER_TYPE` + Consider refactor this later + """ + from ap.api.setting_module.services.v2_etl_services import normalize_column_name + + normalized_columns = set(normalize_column_name(column_names)) + + for m_type in [ + MasterDBType.V2.name, + MasterDBType.V2_MULTI.name, + MasterDBType.V2_HISTORY.name, + MasterDBType.V2_MULTI_HISTORY.name, + ]: + if DataGroupType.FileName.name in column_names: + column_names = list(set(column_names) - set(DataGroupType.FileName.name)) + + has_missing_columns = check_missing_column_by_data_group_type(m_type, column_names) + if has_missing_columns: + continue + + for must_existed_columns in MUST_EXISTED_COLUMNS_FOR_MASTER_TYPE.get(m_type): + if normalized_columns >= set(normalize_column_name(must_existed_columns)): + return m_type + + return None diff --git a/ap/api/external_api/controllers.py b/ap/api/external_api/controllers.py index 999d665..f74317f 100644 --- a/ap/api/external_api/controllers.py +++ b/ap/api/external_api/controllers.py @@ -8,6 +8,8 @@ Validation, cast_datetime_from_query_string, get_from_request_data_with_id, + get_selected_columns_from_trace_data_form, + get_values_by_parameter_name, save_request_option, ) from ap.api.setting_module.services.common import save_user_settings @@ -17,17 +19,25 @@ BOOKMARK_ID, BOOKMARK_TITLE, BOOKMARKS, + CAT_EXP_BOX, + CATE_PROCS, CHECKED, COLUMNS, CREATED_BY, DIC_CAT_FILTERS, DIV, + END_DATE, END_DATE_ID, + END_DATETIME, END_TIME_ID, + END_TM, FACET, FILTER, FIRST_END_PROC, FUNCTION, + GET02_CATE_SELECT, + LATEST, + OBJECTIVE, OD_FILTER, OPTION_ID, PRIORITY, @@ -35,11 +45,16 @@ PROCESSES, RADIO_DEFAULT_INTERVAL, RADIO_RECENT_INTERVAL, + RECENT_TIME_INTERVAL, REQ_ID, + REQUEST_PARAMS, SAVE_DATETIME, SAVE_GRAPH_SETTINGS, + START_DATE, START_DATE_ID, + START_DATETIME, START_TIME_ID, + START_TM, TRACE_DATA_FORM, VALUE, PagePath, @@ -139,7 +154,7 @@ def save_bookmark(): data = json.loads(request.data) user_request = CfgRequest.get_by_req_id(data.get('req_id')) - request_params = json.loads(user_request.params) + request_params = json.loads(json.loads(user_request.params).get(REQUEST_PARAMS)) settings = request_params.get('settings') setting_list = settings.get(TRACE_DATA_FORM) function = request_params.get(FUNCTION).upper() @@ -162,17 +177,17 @@ def save_bookmark(): bookmark_title = data.get(BOOKMARK_TITLE) if not bookmark_title: try: - endProcId = settings[TRACE_DATA_FORM][get_from_request_data_with_id(setting_list, FIRST_END_PROC)][VALUE] - endProcName = CfgProcess.get_proc_by_id(endProcId).name - startDate = settings[TRACE_DATA_FORM][get_from_request_data_with_id(setting_list, START_DATE_ID)][VALUE] - startTime = ''.join( + end_proc_id = settings[TRACE_DATA_FORM][get_from_request_data_with_id(setting_list, FIRST_END_PROC)][VALUE] + end_proc_name = CfgProcess.get_proc_by_id(end_proc_id).name + start_date = settings[TRACE_DATA_FORM][get_from_request_data_with_id(setting_list, START_DATE_ID)][VALUE] + start_time = ''.join( settings[TRACE_DATA_FORM][get_from_request_data_with_id(setting_list, START_TIME_ID)][VALUE].split(':'), ) - endDate = settings[TRACE_DATA_FORM][get_from_request_data_with_id(setting_list, END_DATE_ID)][VALUE] - endTime = ''.join( + end_date = settings[TRACE_DATA_FORM][get_from_request_data_with_id(setting_list, END_DATE_ID)][VALUE] + end_time = ''.join( settings[TRACE_DATA_FORM][get_from_request_data_with_id(setting_list, END_TIME_ID)][VALUE].split(':'), ) - bookmark_title = f'{function}_{endProcName}_{startDate}-{startTime}_{endDate}-{endTime}' + bookmark_title = f'{function}_{end_proc_name}_{start_date}-{start_time}_{end_date}-{end_time}' except Exception: bookmark_title = f'{function}_{datetime.now().strftime(API_DATETIME_FORMAT)}' @@ -326,3 +341,61 @@ def register_datafile(): request_string = request.query_string.decode('utf-8') target_url = f'{host_url}{page}?{request_string}&load_gui_from_url=1' return redirect(target_url) + + +@external_api_v1_blueprint.route('/params', methods=['GET']) +def get_param_by_req_id(): + Validation(request).get_params().validate() + req_params = request.args + + req_id = req_params.get(REQ_ID, None) + + cfg_request = CfgRequest.get_by_req_id(req_id) + option_ids = CfgOption.get_option_ids(req_id) + cfg_request_params = json.loads(cfg_request.params) + + bookmark_id = cfg_request_params.get('bookmark_id', None) + start_datetime = '' + end_datetime = '' + if cfg_request_params.get(START_DATE) and cfg_request_params.get(START_TM): + start_datetime = f'{cfg_request_params.get(START_DATE)}T{cfg_request_params.get(START_TM)}' + if cfg_request_params.get(END_DATE) and cfg_request_params.get(END_TM): + end_datetime = f'{cfg_request_params.get(END_DATE)}T{cfg_request_params.get(END_TM)}' + # no bookmark id found in params, that means the request was sent to /dn7 + # TODO: May want to change the way form data is sent from frontend so we don't need to parse into integer + if not bookmark_id: + setting_params = json.loads(cfg_request_params.get(REQUEST_PARAMS)) + trace_data_form = setting_params['settings'].get(TRACE_DATA_FORM) + filters = [] + if cfg_request_params.get(CATE_PROCS): + for proc in cfg_request_params[CATE_PROCS]: + if proc.get(GET02_CATE_SELECT) and isinstance(proc.get(GET02_CATE_SELECT), list): + for col in proc.get(GET02_CATE_SELECT): + filters.append(int(col)) + elif proc.get(GET02_CATE_SELECT) and not isinstance(proc.get(GET02_CATE_SELECT), list): + filters.append(int(proc.get(GET02_CATE_SELECT))) + res = { + REQ_ID: req_id, + FUNCTION: setting_params.get(FUNCTION), + # Different graphs return different keys for columns selected, get columns from UI checkboxes for now + COLUMNS: get_selected_columns_from_trace_data_form(trace_data_form), + FACET: get_values_by_parameter_name(cfg_request_params, CAT_EXP_BOX, convert_to_int=True), + FILTER: filters, + DIV: int(cfg_request_params.get(DIV)) if cfg_request_params.get(DIV) else None, + START_DATETIME: start_datetime, + END_DATETIME: end_datetime, + LATEST: cfg_request_params.get(RECENT_TIME_INTERVAL), + OBJECTIVE: cfg_request_params.get(OBJECTIVE), + OPTION_ID: option_ids, + } + else: + res = { + REQ_ID: req_id, + BOOKMARK_ID: bookmark_id, + OPTION_ID: option_ids, + START_DATETIME: start_datetime, + END_DATETIME: end_datetime, + LATEST: cfg_request_params.get(RECENT_TIME_INTERVAL), + } + res = {k: v for k, v in res.items() if v} + return res diff --git a/ap/api/external_api/services.py b/ap/api/external_api/services.py index 9bd795e..ef51883 100644 --- a/ap/api/external_api/services.py +++ b/ap/api/external_api/services.py @@ -24,6 +24,7 @@ FILTER, FILTER_ON_DEMAND, FUNCTION, + GET02_VALS_SELECT, LATEST, OBJECTIVE, OD_FILTER, @@ -31,7 +32,6 @@ PRIORITY, PROCESS_ID, REQ_ID, - REQUEST_PARAMS, SAVE_DATETIME, SAVE_GRAPH_SETTINGS, SAVE_LATEST, @@ -46,7 +46,7 @@ @log_execution_time() -def save_odf_data_of_request(dic_param): +def save_params_and_odf_data_of_request(dic_param): req_id = dic_param[COMMON].get(REQ_ID, '') od_filters = [] col_ids = [] @@ -64,8 +64,8 @@ def save_odf_data_of_request(dic_param): 'values': od_filter[UNIQUE_CATEGORIES], } od_filters.append(filter_obj) - if REQUEST_PARAMS in dic_param[COMMON]: - params = dic_param[COMMON][REQUEST_PARAMS] + + params = json_dumps(dic_param[COMMON]) with make_session() as meta_session: CfgRequest.save_odf_and_params_by_req_id(meta_session, req_id, json_dumps(od_filters), params) @@ -110,6 +110,21 @@ def get_from_request_data_with_id(req_data, ele_id): return req_data.index(next(x for x in req_data if x.get('id') == ele_id)) +def get_values_by_parameter_name(form_data, param_name, convert_to_int=False): + if convert_to_int: + return [int(form_data[x]) for x in form_data if param_name in x] + return [form_data[x] for x in form_data if param_name in x] + + +# TODO: Remove this function when columns are no longer sent in different keys +def get_selected_columns_from_trace_data_form(req_data, target_component_name=GET02_VALS_SELECT): + return [ + int(component.get('value')) + for component in req_data + if target_component_name in component.get('name', '') and component.get('checked') + ] + + @dataclasses.dataclass class ErrorTypeDetail: reason: str @@ -856,6 +871,24 @@ def save_bookmark(self): return self + def get_params(self): + req_id_rules = ValidationRules( + { + self._REQUIRED: True, + }, + ) + + self.params = { + REQ_ID: req_id_rules, + } + + self.validate_func = [ + self.validate_required(), + self.validate_req_id_not_found(), + ] + + return self + def _add_api_error(self, status, error_msg: ErrorMessage): if not self.api_error: self.api_error = APIError(status_code=status) diff --git a/ap/api/graphical_lasso/services.py b/ap/api/graphical_lasso/services.py index 5b320f0..02bb032 100644 --- a/ap/api/graphical_lasso/services.py +++ b/ap/api/graphical_lasso/services.py @@ -6,6 +6,7 @@ from sklearn.preprocessing import StandardScaler from ap.api.common.services.show_graph_services import ( + convert_datetime_to_ct, customize_dic_param_for_reuse_cache, filter_cat_dict_common, get_data_from_db, @@ -26,6 +27,7 @@ END_PROC_NAME, IS_CATEGORY, IS_INT_CATEGORY, + IS_JUDGE, IS_SERIAL_NO, MATCHED_FILTER_IDS, NOT_EXACT_MATCH_FILTER_IDS, @@ -73,6 +75,7 @@ def gen_graphical_lasso(graph_param, dic_param, df=None): dic_param[ACTUAL_RECORD_NUMBER] = actual_record_number dic_param = filter_cat_dict_common(df, dic_param, cat_exp, cat_procs, graph_param) + convert_datetime_to_ct(df, graph_param) # get category sensors from df cat_sensors = [] @@ -107,6 +110,7 @@ def gen_graphical_lasso(graph_param, dic_param, df=None): 'is_checked': is_nominal_check(col_id, graph_param), 'is_serial_no': general_col_info[IS_SERIAL_NO], 'is_int_category': general_col_info[IS_INT_CATEGORY], + 'is_judge': general_col_info[IS_JUDGE], } cat_col_details.append(col_detail) cat_ids[col_id] = label diff --git a/ap/api/heatmap/services.py b/ap/api/heatmap/services.py index 03c16c2..aea28b1 100644 --- a/ap/api/heatmap/services.py +++ b/ap/api/heatmap/services.py @@ -29,7 +29,7 @@ is_categorical_col, main_check_filter_detail_match_graph_data, ) -from ap.common.common_utils import gen_sql_label +from ap.common.common_utils import gen_sql_label, get_x_y_info from ap.common.constants import ( ACTUAL_RECORD_NUMBER, ARRAY_PLOTDATA, @@ -165,13 +165,9 @@ def gen_heatmap_data(root_graph_param: DicParam, dic_param, df=None): root_graph_param.dic_card_orders, dic_param, ) - scatter_xy_ids = [] - scatter_xy_names = [] - scatter_proc_ids = [] - for proc in orig_graph_param.array_formval: - scatter_proc_ids.append(proc.proc_id) - scatter_xy_ids = scatter_xy_ids + proc.col_ids - scatter_xy_names = scatter_xy_names + proc.col_names + + # get xy info + scatter_xy_ids, scatter_xy_names, scatter_proc_ids = get_x_y_info(orig_graph_param.array_formval, dic_param[COMMON]) x_proc_id = scatter_proc_ids[0] y_proc_id = scatter_proc_ids[-1] diff --git a/ap/api/parallel_plot/controllers.py b/ap/api/parallel_plot/controllers.py index 6c22270..b81e59f 100644 --- a/ap/api/parallel_plot/controllers.py +++ b/ap/api/parallel_plot/controllers.py @@ -7,13 +7,22 @@ from ap.api.common.services.show_graph_database import get_config_data from ap.api.common.services.show_graph_jump_function import get_jump_emd_data from ap.api.multi_scatter_plot.services import calc_partial_corr -from ap.api.parallel_plot.services import gen_graph_paracords -from ap.api.trace_data.services.csv_export import gen_df_export, make_graph_param, to_csv -from ap.common.common_utils import gen_sql_label -from ap.common.constants import COMMON, CONSTRAINT_RANGE, EXPORT_FROM, SELECTED, CSVExtTypes, DataType +from ap.api.parallel_plot.services import gen_graph_paracords, generate_mask_from_constraint +from ap.api.trace_data.services.csv_export import export_preprocessing, gen_df_export, make_graph_param, to_csv +from ap.common.constants import ( + COMMON, + CONSTRAINT_RANGE, + EMPTY_STRING, + EXPORT_FROM, + ONLY_EXPORT_DATA_SELECTED, + SELECTED, + TIME_COL, + TRUE_MATCH, + CSVExtTypes, +) from ap.common.services.csv_content import zip_file_to_response from ap.common.services.form_env import bind_dic_param_to_class, parse_multi_filter_into_one, parse_request_params -from ap.common.services.http_content import orjson_dumps +from ap.common.services.http_content import json_dumps, orjson_dumps from ap.common.services.import_export_config_n_data import ( get_dic_form_from_debug_info, set_export_dataset_id_to_dic_param, @@ -76,42 +85,20 @@ def data_export(export_type): graph_param = bind_dic_param_to_class(dic_proc_cfgs, trace_graph, dic_card_orders, dic_param) graph_param, client_timezone = make_graph_param(graph_param, dic_param) delimiter = ',' if export_type == CSVExtTypes.CSV.value else '\t' + exportOnlySelected = dic_form.get(ONLY_EXPORT_DATA_SELECTED, 'false') == TRUE_MATCH df = gen_df_export(graph_param, dic_param) if dic_param[COMMON][EXPORT_FROM] == 'plot': - # add selected column 0 -> gray, 1 -> color of user selected value in plot PCP - constraint_range = json.loads(dic_form[CONSTRAINT_RANGE]) - df_condition = pd.DataFrame() - sql_labels = [] - mask = [True] * len(df) - for col_id, range_value in constraint_range.items(): - # get df label - # filter by range_value - col_cfg = graph_param.get_col_cfg(int(col_id)) - sql_label = gen_sql_label(col_cfg.id, col_cfg.column_name) - sql_labels.append(sql_label) - for range_v in range_value: - if sql_label not in df_condition: - df_condition[sql_label] = [False] * len(df) - if col_cfg.is_category: - dtype_name = col_cfg.data_type - if dtype_name == DataType.INTEGER.name: - vals = [int(val) for val in range_v] - else: - vals = [str(val) for val in range_v] - df[sql_label] = df[sql_label].astype(str) - df_condition[sql_label] = df_condition[sql_label] | (df[sql_label].isin(vals)) - else: - df_condition[sql_label] = df_condition[sql_label] | (df[sql_label] >= range_v[0]) & ( - df[sql_label] <= range_v[1] - ) - - mask = mask & df_condition[sql_label] + mask = generate_mask_from_constraint(json.loads(dic_form[CONSTRAINT_RANGE]), graph_param, df) selected_index = list(df[mask].index) + # add selected column 0 -> gray, 1 -> color of user selected value in plot PCP df[SELECTED] = 0 df.loc[selected_index, SELECTED] = 1 + if exportOnlySelected: + df = df[df[SELECTED] == 1] + del df[SELECTED] if delimiter: csv_data = to_csv( @@ -126,3 +113,36 @@ def data_export(export_type): response = zip_file_to_response([csv_data], None, export_type=export_type) return response + + +@api_paracords_blueprint.route('/select_data', methods=['GET']) +def select_data(): + dic_form = parse_request_params(request) + dic_param = parse_multi_filter_into_one(dic_form) + dic_proc_cfgs, trace_graph, dic_card_orders = get_config_data() + graph_param = bind_dic_param_to_class(dic_proc_cfgs, trace_graph, dic_card_orders, dic_param) + graph_param, client_timezone = make_graph_param(graph_param, dic_param) + + df = gen_df_export(graph_param, dic_param) + + if dic_param[COMMON][EXPORT_FROM] == 'plot': + mask = generate_mask_from_constraint(json.loads(dic_form[CONSTRAINT_RANGE]), graph_param, df) + + selected_index = list(df[mask].index) + df = df.loc[selected_index] + # return top 20 values of df, sorted by time descending + df.sort_values(by=TIME_COL, ascending=False, inplace=True) + # fill values for displaying on frontend + df = df.astype(pd.StringDtype()) + df.fillna(EMPTY_STRING, inplace=True) + df = df.head(20) + + processed_df = export_preprocessing( + df, + graph_param, + client_timezone=client_timezone, + terms=None, + ) + result = processed_df.to_dict(orient='records') + response = {'cols': processed_df.columns.values, 'rows': result, 'cols_name': list(processed_df.columns.values)} + return json_dumps(response), 200 diff --git a/ap/api/parallel_plot/services.py b/ap/api/parallel_plot/services.py index 3e2190b..695bdfb 100644 --- a/ap/api/parallel_plot/services.py +++ b/ap/api/parallel_plot/services.py @@ -6,9 +6,12 @@ from pandas import DataFrame from ap.api.common.services.show_graph_services import ( + calc_raw_common_scale_y, + calc_scale_info, customize_dic_param_for_reuse_cache, filter_cat_dict_common, gen_unique_data, + get_chart_infos, get_data_from_db, get_filter_on_demand_data, get_fmt_str_from_dic_data, @@ -16,6 +19,7 @@ get_trace_configs, is_nominal_check, main_check_filter_detail_match_graph_data, + set_chart_infos_to_plotdata, ) from ap.common.common_utils import gen_sql_label from ap.common.constants import ( @@ -44,6 +48,7 @@ UNIQUE_SERIAL, UNMATCHED_FILTER_IDS, CacheType, + DataType, ) from ap.common.logger import log_execution_time from ap.common.memoize import memoize @@ -129,13 +134,34 @@ def gen_graph_paracords(graph_param, dic_param, df=None): fmt_dic = get_fmt_str_from_dic_data(dic_data) gen_dic_serial_data_from_df(df, dic_proc_cfgs, dic_param) + times = df[TIME_COL].tolist() or [] + + # get chart infos (to calculate the threshold) + chart_infos, chart_infos_org = get_chart_infos(graph_param, dic_data, times) ( dic_param[ARRAY_FORMVAL], dic_param[ARRAY_PLOTDATA], category_cols, category_cols_details, cast_inf_vals, - ) = gen_plotdata(graph_param, dic_data, dic_proc_cfgs, df=df) + ) = gen_plotdata( + graph_param, + dic_data, + dic_proc_cfgs, + df=df, + chart_infos=chart_infos, + chart_infos_org=chart_infos_org, + ) + + # calc common scale y min max for plots_data for PCP + min_max_list, all_graph_min, all_graph_max = calc_raw_common_scale_y(dic_param[ARRAY_PLOTDATA]) + calc_scale_info( + graph_param.dic_proc_cfgs, + dic_param[ARRAY_PLOTDATA], + min_max_list, + all_graph_min, + all_graph_max, + ) dic_unique_cate = gen_unique_data(df, dic_proc_cfgs, category_cols, True) @@ -304,7 +330,14 @@ def order_end_proc_sensor(orig_graph_param: DicParam): @log_execution_time() @MessageAnnouncer.notify_progress(50) -def gen_plotdata(orig_graph_param: DicParam, dic_data, dic_proc_cfg, df=None): +def gen_plotdata( + orig_graph_param: DicParam, + dic_data, + dic_proc_cfg, + df=None, + chart_infos=None, + chart_infos_org=None, +): # re-order proc-sensors to show to UI lst_proc_end_col = order_end_proc_sensor(orig_graph_param) @@ -358,6 +391,7 @@ def gen_plotdata(orig_graph_param: DicParam, dic_data, dic_proc_cfg, df=None): 'is_checked': is_nominal_check(col_id, orig_graph_param), 'data_group_type': col_cfg.column_type, 'is_int_category': col_cfg.is_int_category, + 'is_judge': col_cfg.is_judge, } if is_categorical_sensor: @@ -377,8 +411,52 @@ def gen_plotdata(orig_graph_param: DicParam, dic_data, dic_proc_cfg, df=None): 'm_inf_idx': m_inf_idx, 'categorized_data': categorized_data, } + + # add chart info to plot data + if chart_infos: + set_chart_infos_to_plotdata( + col_id, + chart_infos, + original_graph_configs=chart_infos_org, + plotdata=plotdata, + ) + plotdatas.append(plotdata) array_formval.append({END_PROC: proc_id, GET02_VALS_SELECT: col_id}) return array_formval, plotdatas, category_cols, category_cols_details, cast_inf_vals + + +def generate_mask_from_constraint( + constraint_range, + graph_param, + df, +): + df_condition = pd.DataFrame() + sql_labels = [] + mask = [True] * len(df) + for col_id, range_value in constraint_range.items(): + # get df label + # filter by range_value + col_cfg = graph_param.get_col_cfg(int(col_id)) + sql_label = gen_sql_label(col_cfg.id, col_cfg.column_name) + sql_labels.append(sql_label) + for range_v in range_value: + if sql_label not in df_condition: + df_condition[sql_label] = [False] * len(df) + if col_cfg.is_category: + dtype_name = col_cfg.data_type + if dtype_name == DataType.INTEGER.name: + vals = [int(val) for val in range_v] + else: + vals = [str(val) for val in range_v] + df[sql_label] = df[sql_label].astype(str) + df_condition[sql_label] = df_condition[sql_label] | (df[sql_label].isin(vals)) + else: + df_condition[sql_label] = df_condition[sql_label] | (df[sql_label] >= range_v[0]) & ( + df[sql_label] <= range_v[1] + ) + + mask = mask & df_condition[sql_label] + return mask diff --git a/ap/api/ridgeline_plot/services.py b/ap/api/ridgeline_plot/services.py index fdf8c65..3de3815 100644 --- a/ap/api/ridgeline_plot/services.py +++ b/ap/api/ridgeline_plot/services.py @@ -150,6 +150,9 @@ def gen_trace_data_by_cyclic(graph_param, dic_param, max_graph=None): max_graph, ) + # get visualization setting + add_threshold_configs(dic_param, graph_param) + # calc common scale y min max min_max_list, all_graph_min, all_graph_max = calc_raw_common_scale_y(dic_param[ARRAY_PLOTDATA], y_col='data') calc_rlp_scale_info( @@ -350,6 +353,9 @@ def gen_rlp_data_by_term(graph_param, dic_param, max_graph=None): term_groups = [gen_term_groups(term) for term in terms] + # get visualization setting + add_threshold_configs(dic_param, graph_param) + # calc common scale y min max min_max_list, all_graph_min, all_graph_max = calc_raw_common_scale_y(dic_param[ARRAY_PLOTDATA], y_col='data') calc_rlp_scale_info( diff --git a/ap/api/sankey_plot/sankey_glasso/grplasso.py b/ap/api/sankey_plot/sankey_glasso/grplasso.py index 1b9212f..650ebb6 100644 --- a/ap/api/sankey_plot/sankey_glasso/grplasso.py +++ b/ap/api/sankey_plot/sankey_glasso/grplasso.py @@ -528,6 +528,7 @@ def _gen_sankey_data(self): 'node_color': [], 'edge_value': [], 'edge_color': [], + 'relationship': [], } self._add_node_colors() @@ -573,11 +574,13 @@ def _get_n_hex_col(self, N=5): def _add_links_from_x_to_group(self): # Add links: x -> groups edge_colors = [self.color_link_positive if x > 0 else self.color_link_negative for x in self.coef_remained] + relationship = ['positive' if x > 0 else 'negative' for x in self.coef_remained] for i in range(self.num_col_remained): self.dic_skd['source'].append(i) self.dic_skd['target'].append(self._sensor_node_id_to_group_node_id(i)) self.dic_skd['edge_value'].append(np.abs(self.coef_remained[i])) self.dic_skd['edge_color'].append(edge_colors[i]) + self.dic_skd['relationship'].append(relationship[i]) def _add_links_from_group_to_y(self): # Add links: groups -> y @@ -586,6 +589,7 @@ def _add_links_from_group_to_y(self): self.dic_skd['target'].append(self.num_col_remained + self.num_grp_remained) self.dic_skd['edge_value'].append(self.coef_grps[self.idx_grp_remained[i]]) self.dic_skd['edge_color'].append('#696969') + self.dic_skd['relationship'].append('') def _sensor_id_to_group_id(self, sensor_id): group_id = self.dic_groups['idx_grps'][sensor_id] diff --git a/ap/api/sankey_plot/sankey_glasso/sankey_services.py b/ap/api/sankey_plot/sankey_glasso/sankey_services.py index 7bae4ab..547cacd 100644 --- a/ap/api/sankey_plot/sankey_glasso/sankey_services.py +++ b/ap/api/sankey_plot/sankey_glasso/sankey_services.py @@ -8,6 +8,7 @@ from sklearn.metrics import confusion_matrix from ap.api.common.services.show_graph_services import ( + convert_datetime_to_ct, customize_dic_param_for_reuse_cache, filter_cat_dict_common, get_data_from_db, @@ -119,6 +120,8 @@ def gen_graph_sankey_group_lasso(graph_param, dic_param, df=None): dic_param[UNIQUE_SERIAL] = unique_serial dic_param[ACTUAL_RECORD_NUMBER] = actual_record_number + convert_datetime_to_ct(df, graph_param) + dic_param = filter_cat_dict_common( df, dic_param, @@ -158,7 +161,6 @@ def gen_graph_sankey_group_lasso(graph_param, dic_param, df=None): df_sensors: pd.DataFrame = df[dic_label_id] df_sensors = df_sensors.rename(columns=dic_label_id) df_sensors, data_clean, errors, err_cols, dic_null_percent, dic_var = clean_input_data(df_sensors) - if data_clean and not errors: # prepare column names and process names y_id = graph_param.common.objective_var @@ -313,8 +315,14 @@ def clean_input_data(df: pd.DataFrame): # drop > 50% NA column before drop NA to calculate variance df_drop = df.drop(remove_cols, axis=1) + original_dtypes = df_drop.dtypes df_drop = df_drop.replace(dict.fromkeys([np.inf, -np.inf, np.nan], np.nan)).dropna(how='any') + # After dropping NA, int columns will be converted to float + # convert int columns back to their original datatypes of the dataframe + for column in df_drop.columns: + if original_dtypes.get(column).name == pd.Int64Dtype().name: + df_drop[column] = df_drop[column].astype(original_dtypes.get(column)) is_zero_var, err_cols = zero_variance(df_drop) if is_zero_var: @@ -383,6 +391,7 @@ def plot_sankey_grplasso(dic_skd: defaultdict): 'target': dic_skd['target'], 'value': dic_skd['edge_value'], 'color': dic_skd['edge_color'], + 'relationship': dic_skd['relationship'], }, } return sankey_trace diff --git a/ap/api/scatter_plot/services.py b/ap/api/scatter_plot/services.py index dcd7be0..58d8966 100644 --- a/ap/api/scatter_plot/services.py +++ b/ap/api/scatter_plot/services.py @@ -29,13 +29,12 @@ is_categorical_col, main_check_filter_detail_match_graph_data, ) -from ap.common.common_utils import gen_sql_label +from ap.common.common_utils import gen_sql_label, get_x_y_info from ap.common.constants import ( ACTUAL_RECORD_NUMBER, ARRAY_PLOTDATA, ARRAY_X, ARRAY_Y, - ARRAY_Z, CHART_INFOS, CHART_TYPE, COLORS, @@ -55,7 +54,6 @@ MATCHED_FILTER_IDS, N_TOTAL, NOT_EXACT_MATCH_FILTER_IDS, - ORIG_ARRAY_Z, ROWID, SCALE_AUTO, SCALE_COLOR, @@ -166,13 +164,9 @@ def gen_scatter_plot(root_graph_param: DicParam, dic_param, df=None): dic_param, ) threshold_filter_detail_ids = orig_graph_param.common.threshold_boxes - scatter_xy_ids = [] - scatter_xy_names = [] - scatter_proc_ids = [] - for proc in orig_graph_param.array_formval: - scatter_proc_ids.append(proc.proc_id) - scatter_xy_ids = scatter_xy_ids + proc.col_ids - scatter_xy_names = scatter_xy_names + proc.col_names + + # get xy info + scatter_xy_ids, scatter_xy_names, scatter_proc_ids = get_x_y_info(orig_graph_param.array_formval, dic_param[COMMON]) x_proc_id = scatter_proc_ids[0] y_proc_id = scatter_proc_ids[-1] @@ -228,6 +222,10 @@ def gen_scatter_plot(root_graph_param: DicParam, dic_param, df=None): df = df_term.copy() if df is None else pd.concat([df, df_term]) chart_type, x_category, y_category = get_chart_type(df, x_id, y_id, dic_cols) + # in SCP, accept int/int as scater instead of heatmap + # todo: refactoring chart type + if chart_type == ChartType.HEATMAP_BY_INT.value: + chart_type = ChartType.SCATTER.value if _is_res_limited is None: unique_serial = None @@ -285,6 +283,9 @@ def gen_scatter_plot(root_graph_param: DicParam, dic_param, df=None): convert_datetime_to_ct(df, graph_param) chart_type, x_category, y_category = get_chart_type(df, x_id, y_id, dic_cols) + # in SCP, accept int/int as scater instead of heatmap + if chart_type == ChartType.HEATMAP_BY_INT.value: + chart_type = ChartType.SCATTER.value dic_param = filter_cat_dict_common(df, dic_param, cat_exp, [], graph_param) @@ -350,99 +351,8 @@ def gen_scatter_plot(root_graph_param: DicParam, dic_param, df=None): # chart type series_keys = [ARRAY_X, ARRAY_Y, COLORS, TIMES] dic_param[CHART_TYPE] = chart_type - if chart_type == ChartType.HEATMAP.value: - other_cols = [int(col) for col in [x_id, y_id, cat_div_id] if col] - - dic_param = gen_group_filter_list(df, graph_param, dic_param, other_cols) - # gen matrix - all_x, all_y = get_heatmap_distinct(output_graphs) - # all_x_with_step, all_y_with_step = get_heatmap_range_with_steps(output_graphs) - for graph in output_graphs: - # gen_map_xy_heatmap_matrix(x_name, y_name, all_x_with_step, all_y_with_step, graph) - # handle x, y, z data - array_x = graph[ARRAY_X] - array_y = graph[ARRAY_Y] - unique_x = set(array_x.drop_duplicates().tolist()) - unique_y = set(array_y.drop_duplicates().tolist()) - - missing_x = all_x - unique_x - missing_y = all_y - unique_y - array_z = pd.crosstab(array_y, array_x) - # map_xy_array_z = pd.crosstab(array_y, array_x, values=graph[COLORS], aggfunc='first') - for key in missing_x: - array_z[key] = None - # map_xy_array_z[key] = None - - sorted_cols = sorted(array_z.columns) - - array_z = array_z[sorted_cols] - - missing_data = [None] * len(missing_y) - df_missing = pd.DataFrame({col: missing_data for col in array_z.columns}, index=missing_y) - array_z = pd.concat([array_z, df_missing]) - array_z.sort_index(inplace=True) - - # limit 10K cells - if array_z.size > HEATMAP_COL_ROW * HEATMAP_COL_ROW: - array_z = array_z[:HEATMAP_COL_ROW][array_z.columns[:HEATMAP_COL_ROW]] - - graph[ARRAY_X] = array_z.columns - graph[ARRAY_Y] = array_z.index - graph[ORIG_ARRAY_Z] = matrix(array_z) - - # ratio - z_count = len(array_x) - array_z = array_z * 100 // z_count - graph[ARRAY_Z] = matrix(array_z) - - # reduce sending data to browser - graph[COLORS] = [] - graph[X_SERIAL] = [] - graph[Y_SERIAL] = [] - graph[TIMES] = [] - graph[ELAPSED_TIME] = [] - elif chart_type == ChartType.HEATMAP_BY_INT.value: - # todo - # draw heatmap for int columns - # gen matrix - all_x, all_y = get_heatmap_range_with_steps(output_graphs) - for graph in output_graphs: - # handle x, y, z data - array_x = graph[ARRAY_X] - array_y = graph[ARRAY_Y] - unique_x = set(array_x.drop_duplicates().tolist()) - unique_y = set(array_y.drop_duplicates().tolist()) - - missing_x = all_x - unique_x - missing_y = all_y - unique_y - map_xy_array_z = pd.crosstab(array_y, array_x, values=graph[COLORS], aggfunc='first') - for key in missing_x: - map_xy_array_z[key] = None - - sorted_cols = sorted(map_xy_array_z.columns) - map_xy_array_z = map_xy_array_z[sorted_cols] - - missing_data = [None] * len(missing_y) - df_missing = pd.DataFrame({col: missing_data for col in map_xy_array_z.columns}, index=missing_y) - map_xy_array_z = pd.concat([map_xy_array_z, df_missing]) - map_xy_array_z.sort_index(inplace=True) - - # limit 10K cells - if map_xy_array_z.size > HEATMAP_COL_ROW * HEATMAP_COL_ROW: - map_xy_array_z = map_xy_array_z[:HEATMAP_COL_ROW][map_xy_array_z.columns[:HEATMAP_COL_ROW]] - - # graph[ARRAY_Z] = matrix(map_xy_array_z).tolist() - # graph[ORIG_ARRAY_Z] = graph[ARRAY_Z] - graph[X_NAME] = x_name - graph[Y_NAME] = y_name - graph[HEATMAP_MATRIX] = { - 'z': matrix(map_xy_array_z).tolist(), - 'x': all_x, - 'y': all_y, - } - - elif chart_type == ChartType.SCATTER.value: + if chart_type == ChartType.SCATTER.value: other_cols = [int(col) for col in [color_id, cat_div_id] if col] dic_param = gen_group_filter_list(df, graph_param, dic_param, other_cols) diff --git a/ap/api/setting_module/controllers.py b/ap/api/setting_module/controllers.py index dce730f..f686bfd 100644 --- a/ap/api/setting_module/controllers.py +++ b/ap/api/setting_module/controllers.py @@ -46,9 +46,11 @@ gen_v2_columns_with_types, get_last_distinct_sensor_values, get_latest_records, + get_preview_data_files, preview_csv_data, preview_v2_data, save_master_vis_config, + save_preview_data_file, ) from ap.api.setting_module.services.shutdown_app import shut_down_app from ap.api.trace_data.services.proc_link import add_gen_proc_link_job, add_restructure_indexes_job, show_proc_link_info @@ -64,6 +66,7 @@ ) from ap.common.constants import ( ANALYSIS_INTERFACE_ENV, + FILE_NAME, FISCAL_YEAR_START_MONTH, OSERR, SHUTDOWN, @@ -107,6 +110,7 @@ ProcessSchema, ) from ap.setting_module.services.background_process import get_background_jobs_service, get_job_detail_service +from ap.setting_module.services.backup_and_restore.jobs import add_backup_data_job, add_restore_data_job from ap.setting_module.services.process_config import ( create_or_update_process_cfg, gen_function_column, @@ -117,7 +121,11 @@ get_process_visualizations, query_database_tables, ) -from ap.setting_module.services.register_from_file import get_chm_url_to_redirect +from ap.setting_module.services.register_from_file import ( + get_latest_records_for_register_by_file, + get_url_to_redirect, + handle_importing_by_one_click, +) from ap.setting_module.services.trace_config import ( gen_cfg_trace, get_all_processes_traces_info, @@ -308,7 +316,10 @@ def get_database_table(db_id): tables = query_database_tables(db_id) if tables is None: - return jsonify({'tables': [], 'msg': 'Invalid data source id'}), 400 + return ( + jsonify({'tables': [], 'process_factnames': [], 'process_factids': [], 'msg': 'Invalid data source id'}), + 400, + ) else: return jsonify(tables), 200 @@ -342,6 +353,21 @@ def check_db_connection(): return jsonify(flask_message=message), 200 +@api_setting_module_blueprint.route('/show_latest_records_for_register_by_file', methods=['POST']) +def show_latest_records_for_register_by_file(): + """[summary] + Show 5 latest records + Returns: + [type] -- [description] + """ + dic_form = request.form.to_dict() + file_name = dic_form.get('fileName') or None + limit = parse_int_value(dic_form.get('limit')) or 10 + folder = dic_form.get('folder') or None + latest_rec = get_latest_records_for_register_by_file(file_name, folder, limit) + return json_dumps(latest_rec) + + @api_setting_module_blueprint.route('/show_latest_records', methods=['POST']) def show_latest_records(): """[summary] @@ -357,6 +383,15 @@ def show_latest_records(): limit = parse_int_value(dic_form.get('limit')) or 10 folder = dic_form.get('folder') or None current_process_id = dic_form.get('currentProcessId', None) + process_factid = dic_form.get('processFactId', None) + if current_process_id and current_process_id != 'null' and not file_name: + # get data from db or csv + file_name = get_preview_data_files(data_source_id, table_name, process_factid) + if file_name: + with open(file_name, 'r') as file: + data = json.load(file) + return data + latest_rec = get_latest_records( data_source_id, table_name, @@ -364,6 +399,8 @@ def show_latest_records(): folder, limit, current_process_id, + process_factid=process_factid, + is_convert_datetime=False, ) result = { @@ -397,8 +434,9 @@ def show_latest_records(): 'data_group_type': data_group_type, 'is_rdb': is_rdb, } - - return json_dumps(result) + result = json_dumps(result) + save_preview_data_file(int(data_source_id), result, table_name=table_name, process_factid=process_factid) + return result @api_setting_module_blueprint.route('/get_csv_resources', methods=['POST']) @@ -407,22 +445,25 @@ def get_csv_resources(): etl_func = request.json.get('etl_func') csv_delimiter = request.json.get('delimiter') is_v2 = request.json.get('isV2') - line_skip = request.json.get('line_skip') or '' + skip_head = request.json.get('skip_head') + skip_head = None if skip_head is None else int(skip_head) n_rows = request.json.get('n_rows') n_rows = None if n_rows is None else int(n_rows) is_transpose = request.json.get('is_transpose') + is_file = request.json.get('is_file') if is_v2: - dic_output = preview_v2_data(folder_url, csv_delimiter, 5) + dic_output = preview_v2_data(folder_url, csv_delimiter, 5, file_name=folder_url if is_file else None) else: dic_output = preview_csv_data( folder_url, etl_func, csv_delimiter, - line_skip=line_skip, + skip_head=skip_head, n_rows=n_rows, is_transpose=is_transpose, limit=5, + file_name=folder_url if is_file else None, ) rows = dic_output['content'] previewed_files = dic_output['previewed_files'] @@ -484,7 +525,7 @@ def check_folder(): break else: is_valid_file = any(data.lower().endswith(ext) for ext in extension) - is_not_empty = True + is_not_empty = os.path.isfile(data) is_valid = is_existing and is_not_empty err_msg = _('File not found') # empty folder @@ -506,6 +547,29 @@ def check_folder(): return jsonify({'status': 500, 'err_msg': _(OSERR[e.errno]), 'is_valid': False}) +@api_setting_module_blueprint.route('/check_folder_or_file', methods=['POST']) +def check_folder_or_file(): + try: + data = request.json.get('path') + return jsonify( + { + 'status': 200, + 'isFile': os.path.isfile(data), + 'isFolder': os.path.isdir(data), + }, + ) + except OSError as e: + # raise + return jsonify( + { + 'status': 500, + 'err_msg': _(OSERR[e.errno]), + 'isFile': False, + 'isFolder': False, + }, + ) + + @api_setting_module_blueprint.route('/job_detail/', methods=['GET']) def get_job_detail(job_id): """[Summary] Get get job details @@ -839,7 +903,7 @@ def get_proc_config(proc_id): parent_and_child_processes = CfgProcess.get_all_parents_and_children_processes(proc_id) col_id_in_funcs = CfgProcessFunctionColumn.get_all_cfg_col_ids() if process: - tables = query_database_tables(process['data_source_id']) + tables = query_database_tables(process['data_source_id'], process=process) return ( jsonify( { @@ -889,6 +953,49 @@ def get_proc_config_filter_data(proc_id): ) +@api_setting_module_blueprint.route('/proc_table_viewer_columns/', methods=['GET']) +def get_table_viewer_columns(proc_id): + process = get_process_cfg(proc_id) + columns = [] + for column in process.get('columns'): + if len(column.get(CfgProcessColumn.function_details.key)) > 0: + continue + + if column.get(CfgProcessColumn.column_raw_name.name) == FILE_NAME: + continue + + if column.get(CfgProcessColumn.is_dummy_datetime.name): + continue + + columns.append(column) + + process['columns'] = columns + if process: + if not process['name_en']: + process['name_en'] = to_romaji(process['name']) + return ( + json_dumps( + { + 'status': 200, + 'data': process, + 'filter_col_data': {}, + }, + ), + 200, + ) + else: + return ( + json_dumps( + { + 'status': 404, + 'data': {}, + 'filter_col_data': {}, + }, + ), + 200, + ) + + @api_setting_module_blueprint.route('/proc_config//columns', methods=['GET']) def get_proc_column_config(proc_id): columns = get_process_columns(proc_id) @@ -1306,81 +1413,29 @@ def check_duplicated_process_name(): @api_setting_module_blueprint.route('/register_source_and_proc', methods=['POST']) def register_source_and_proc(): - input_json = request.json - with make_session() as meta_session: - try: - data_src: CfgDataSource = DataSourceSchema().load(input_json.get('csv_info')) - - # data source - data_src_rec = insert_or_update_config(meta_session, data_src, exclude_columns=[CfgDataSource.order.key]) - - # csv detail - csv_detail = data_src.csv_detail - if csv_detail: - # csv_detail.dummy_header = csv_detail.dummy_header == 'true' if csv_detail.dummy_header else None - csv_columns = data_src.csv_detail.csv_columns - csv_columns = [col for col in csv_columns if not is_empty(col.column_name)] - data_src.csv_detail.csv_columns = csv_columns - csv_detail_rec = insert_or_update_config( - meta_session, - csv_detail, - parent_obj=data_src_rec, - parent_relation_key=CfgDataSource.csv_detail.key, - parent_relation_type=RelationShip.ONE, - ) - - # CRUD - csv_columns = csv_detail.csv_columns - crud_config( - meta_session, - csv_columns, - CfgCsvColumn.data_source_id.key, - CfgCsvColumn.column_name.key, - parent_obj=csv_detail_rec, - parent_relation_key=CfgDataSourceCSV.csv_columns.key, - parent_relation_type=RelationShip.MANY, - ) - process_schema = ProcessSchema() - proc_config = request.json.get('proc_config') - proc_config['data_source_id'] = data_src_rec.id - proc_data = process_schema.load(proc_config) - unused_columns = request.json.get('unused_columns', []) - should_import_data = request.json.get('import_data') - - process = create_or_update_process_cfg(proc_data, unused_columns) - - # create process json - process_schema = ProcessSchema() - process_json = process_schema.dump(process) or {} - - # import data - if should_import_data: - add_import_job(process, run_now=True, is_user_request=True) - except Exception as e: - logger.exception(e) - meta_session.rollback() - message = {'message': _('Database Setting failed to save'), 'is_error': True} - return jsonify(flask_message=message), 500 - - message = {'message': _('Database Setting saved.'), 'is_error': False} - ds = None - if data_src_rec and data_src_rec.id and process: - ds_schema = DataSourceSchema() - ds = CfgDataSource.get_ds(data_src_rec.id) - ds = ds_schema.dumps(ds) + try: + new_process_ids = handle_importing_by_one_click(request.json) data_register_data = { + 'RegisterByFileRequestID': request.json.get('RegisterByFileRequestID'), 'status': JobStatus.PROCESSING.name, - 'process_id': process.id, 'is_first_imported': False, } background_announcer.announce(data_register_data, AnnounceEvent.DATA_REGISTER.name) - return jsonify(id=data_src_rec.id, data_source=ds, process_info=process_json, flask_message=message), 200 + except Exception as e: + logger.exception(e) + data = {'message': _('Database Setting failed to save'), 'is_error': True, 'detail': str(e)} + return jsonify(data), 500 + + data = {'message': _('Database Setting saved.'), 'is_error': False, 'processIds': new_process_ids} + return jsonify(data), 200 -@api_setting_module_blueprint.route('/redirect_to_chm_page/', methods=['GET']) -def redirect_to_chm_page(proc_id): - target_url = get_chm_url_to_redirect(request, proc_id) +@api_setting_module_blueprint.route('/redirect_to_page', methods=['POST']) +def redirect_to_page(): + page = request.json.get('page') + proc_ids = request.json.get('processIds') + target_url = get_url_to_redirect(request, proc_ids, page) return jsonify(url=target_url), 200 @@ -1398,7 +1453,7 @@ def get_function_infos(): dict_cfg_process_column = {cfg_process_column.id: cfg_process_column for cfg_process_column in cfg_process_columns} result = [] for function_detail in sorted_function_details(cfg_process_columns): - process_col = dict_cfg_process_column[function_detail.process_column_id] + process_col: CfgProcessColumn = dict_cfg_process_column[function_detail.process_column_id] function_id = function_detail.function_id m_function: MFunction = MFunction.get_by_id(function_id) var_x = function_detail.var_x @@ -1430,7 +1485,11 @@ def get_function_infos(): y_data_type=y_data_type, **function_detail.as_dict(), ) - sample_datas = equation_sample_data.sample_data().sample_data + sample_data = equation_sample_data.sample_data() + sample_datas = sample_data.sample_data + output_type = sample_data.output_type + # update data type + process_col.data_type = output_type dict_sample_data[str(process_col.id)] = sample_datas function_info = { 'functionName': m_function.function_type, @@ -1489,3 +1548,35 @@ def delete_function_column_config(): return json_dumps({}), 500 return json_dumps({}), 200 + + +@api_setting_module_blueprint.route('/backup_data', methods=['POST']) +def backup_data(): + """[Summary] backup data from DB + Returns: 200/500 + """ + data = json.loads(request.data) + process_id = data.get('process_id') + start_time = data.get('start_time') + end_time = data.get('end_time') + if process_id: + target_jobs = [JobType.CSV_IMPORT, JobType.FACTORY_IMPORT, JobType.FACTORY_PAST_IMPORT] + remove_jobs(target_jobs, proc_id=process_id) + add_backup_data_job(process_id, start_time, end_time) + return json_dumps({}), 200 + + +@api_setting_module_blueprint.route('/restore_data', methods=['POST']) +def restore_data(): + """[Summary] restore data from file + Returns: 200/500 + """ + data = json.loads(request.data) + process_id = data.get('process_id') + start_time = data.get('start_time') + end_time = data.get('end_time') + if process_id: + target_jobs = [JobType.CSV_IMPORT, JobType.FACTORY_IMPORT, JobType.FACTORY_PAST_IMPORT] + remove_jobs(target_jobs, proc_id=process_id) + add_restore_data_job(process_id, start_time, end_time) + return json_dumps({}), 200 diff --git a/ap/api/setting_module/services/autolink.py b/ap/api/setting_module/services/autolink.py index 28c83e6..aa70eae 100644 --- a/ap/api/setting_module/services/autolink.py +++ b/ap/api/setting_module/services/autolink.py @@ -16,7 +16,7 @@ get_reversed_column_value_from_v2, get_v2_datasource_type_from_file, ) -from ap.common.common_utils import detect_encoding, get_csv_delimiter, get_latest_files +from ap.common.common_utils import DATE_FORMAT_SIMPLE, detect_encoding, get_csv_delimiter, get_latest_files from ap.common.constants import ( DF_CHUNK_SIZE, DUMMY_V2_PROCESS_NAME, @@ -25,7 +25,7 @@ DBType, ) from ap.common.logger import log_execution_time -from ap.setting_module.models import CfgDataSource +from ap.setting_module.models import CfgDataSource, CfgProcess AUTO_LINK_ID = 'id' PROCESS = 'process' @@ -138,6 +138,10 @@ def __init__( def cfg_data_source(self) -> CfgDataSource: return CfgDataSource.query.get(self.data_source_id) + @property + def cfg_process(self) -> CfgProcess: + return CfgProcess.query.get(self.process_id) + def get_processes_df(self, reader: 'AutoLinkReader') -> None: reader.read_db(self) @@ -146,6 +150,29 @@ class AutoLinkReader: def __init__(self): self.df = pd.DataFrame(columns=[AUTO_LINK_ID, DATE, SERIAL]) + @staticmethod + def convert_datetime(df: DataFrame) -> DataFrame: + """ + Convert datetime column to format `%Y-%m-%d %H:%M:%S` + Args: + df: [DataFrame] - a dataframe containing datetime column + + Returns: [DataFrame] - a dataframe containing converted datetime column + """ + from ap.api.setting_module.services.csv_import import datetime_transform + + converted_df = df.copy() + + datetime_series: Series = converted_df[DATE] + converted_datetime_series: Series = pd.to_datetime(datetime_series, errors='coerce').dt.strftime( + DATE_FORMAT_SIMPLE, + ) + non_datetime_series: Series = datetime_series[converted_datetime_series.isna()] + converted_datetime_series.update(datetime_transform(non_datetime_series.astype(str))) + + converted_df[DATE] = converted_datetime_series + return converted_df + @staticmethod def drop_duplicates(df: DataFrame) -> DataFrame: """ @@ -225,7 +252,7 @@ def __read_v2(self, file: Union[Path, str], processes: List[str], ids: List[int] replaced_id_df = self.drop_duplicates(replaced_id_df) replaced_df = pd.concat([replaced_df, replaced_id_df]) - self.df = pd.concat([self.df, replaced_df]) + self.df = pd.concat([self.df, self.convert_datetime(replaced_df)]) self.df = self.drop_duplicates(self.df) except ParserError: with pd.read_csv( @@ -251,7 +278,7 @@ def __read_v2(self, file: Union[Path, str], processes: List[str], ids: List[int] replaced_id_df = self.drop_duplicates(replaced_id_df) replaced_df = pd.concat([replaced_df, replaced_id_df]) - self.df = pd.concat([self.df, replaced_df]) + self.df = pd.concat([self.df, self.convert_datetime(replaced_df)]) self.df = self.drop_duplicates(self.df) @log_execution_time(LOG_PREFIX) @@ -296,7 +323,7 @@ def __read_normal_file( df_chunk = _df_chunk.rename(columns=rename_params).dropna() df = pd.concat([df, df_chunk]) df = self.drop_duplicates(df) - return df + return self.convert_datetime(df) def read_path(self, source: AutoLinkSourcePath) -> None: for file in source.files: @@ -317,14 +344,15 @@ def read_path(self, source: AutoLinkSourcePath) -> None: delimiter=source.get_delimiter(file), ) df[AUTO_LINK_ID] = source.process_id - self.df = pd.concat([self.df, df]) + self.df = pd.concat([self.df, self.convert_datetime(df)]) self.df = self.drop_duplicates(self.df) def read_db(self, source: AutoLinkSourceDB) -> None: - cols, df = get_info_from_db( + cols, df, _ = get_info_from_db( source.cfg_data_source, source.table_name, sql_limit=AUTOLINK_TOTAL_RECORDS_PER_SOURCE, + process_factid=source.cfg_process.process_factid, ) assert source.date_col in cols assert source.serial_col in cols @@ -334,7 +362,7 @@ def read_db(self, source: AutoLinkSourceDB) -> None: } df = df[[source.date_col, source.serial_col]].rename(columns=rename_params) df[AUTO_LINK_ID] = source.process_id - self.df = pd.concat([self.df, df]) + self.df = pd.concat([self.df, self.convert_datetime(df)]) self.df = self.drop_duplicates(self.df) diff --git a/ap/api/setting_module/services/csv_import.py b/ap/api/setting_module/services/csv_import.py index 9975dea..66bbabf 100644 --- a/ap/api/setting_module/services/csv_import.py +++ b/ap/api/setting_module/services/csv_import.py @@ -5,7 +5,7 @@ import re from datetime import datetime from io import BytesIO -from typing import List +from typing import List, Optional import numpy as np import pandas as pd @@ -47,6 +47,7 @@ DATE_FORMAT, DATE_FORMAT_STR_ONLY_DIGIT, TIME_FORMAT_WITH_SEC, + SQLiteFormatStrings, convert_time, detect_encoding, detect_file_encoding, @@ -62,22 +63,26 @@ DATA_TYPE_DUPLICATE_MSG, DATA_TYPE_ERROR_EMPTY_DATA, DATA_TYPE_ERROR_MSG, + DATE_TYPE_REGEX, DATETIME_DUMMY, + DEFAULT_NONE_VALUE, EMPTY_STRING, FILE_NAME, NUM_CHARS_THRESHOLD, + TIME_TYPE_REGEX, CSVExtTypes, DataType, DBType, JobStatus, JobType, ) +from ap.common.datetime_format_utils import DateTimeFormatUtils from ap.common.disk_usage import get_ip_address from ap.common.logger import log_execution_time, logger from ap.common.pydn.dblib.db_proxy import DbProxy, gen_data_source_of_universal_db from ap.common.scheduler import scheduler_app_context from ap.common.services.csv_content import ( - get_number_of_reading_lines, + get_limit_records, is_normal_csv, read_csv_with_transpose, read_data, @@ -116,6 +121,7 @@ def import_csv_job( _proc_name, proc_id, is_user_request: bool = False, + register_by_file_request_id: str = None, **kwargs, ): """scheduler job import csv @@ -128,7 +134,7 @@ def import_csv_job( def _add_gen_proc_link_job(*_args, **_kwargs): add_gen_proc_link_job(process_id=proc_id, is_user_request=is_user_request, *_args, **_kwargs) - gen = import_csv(proc_id) + gen = import_csv(proc_id, register_by_file_request_id=register_by_file_request_id) send_processing_info( gen, JobType.CSV_IMPORT, @@ -148,12 +154,13 @@ def get_config_sensor(proc_id): @log_execution_time() -def import_csv(proc_id, record_per_commit=RECORD_PER_COMMIT): +def import_csv(proc_id, record_per_commit=RECORD_PER_COMMIT, register_by_file_request_id: str = None): """csv files import Keyword Arguments: proc_id {[type]} -- [description] (default: {None}) db_id {[type]} -- [description] (default: {None}) + register_by_file_request_id {[type]} -- [description] (default: {None}) Raises: e: [description] @@ -223,16 +230,13 @@ def import_csv(proc_id, record_per_commit=RECORD_PER_COMMIT): use_col_names = headers if use_dummy_datetime and DATETIME_DUMMY in use_col_names: use_col_names.remove(DATETIME_DUMMY) - data_first_row = (data_src.skip_head if data_src.skip_head is not None else 0) + 1 + # check for skip_head = None to prevent TypeError when adding 1 + data_first_row = (skip_head if skip_head is not None else 0) + 1 head_skips = list(range(data_first_row)) else: is_abnormal = False - data_first_row = (data_src.skip_head if data_src.skip_head is not None else 0) + 1 - head_skips = list( - range( - data_src.skip_head if data_src.skip_head is not None else 0, - ), - ) + data_first_row = (skip_head if skip_head is not None else 0) + 1 + head_skips = list(range(skip_head if skip_head is not None else 0)) total_percent = 0 percent_per_file = 100 / len(import_targets) @@ -299,7 +303,7 @@ def import_csv(proc_id, record_per_commit=RECORD_PER_COMMIT): if data_src.dummy_header: # generate column name if there is not header in file - org_csv_cols, csv_cols, _, _, _ = gen_dummy_header(org_csv_cols, line_skip=data_src.skip_head) + org_csv_cols, csv_cols, _, _, _ = gen_dummy_header(org_csv_cols, skip_head=data_src.skip_head) csv_cols, _ = gen_colsname_for_duplicated(csv_cols) else: # need to convert header in case of transposed @@ -384,7 +388,14 @@ def import_csv(proc_id, record_per_commit=RECORD_PER_COMMIT): default_csv_param['dtype'] = { col: 'string' for col, col_cfg in dic_use_cols.items() - if col in use_col_names and col_cfg.data_type == DataType.TEXT.name + if col in use_col_names + and col_cfg.data_type + in [ + DataType.TEXT.name, + DataType.DATETIME.name, + DataType.DATE.name, + DataType.TIME.name, + ] } # add more dtype columns in usecols @@ -486,12 +497,19 @@ def import_csv(proc_id, record_per_commit=RECORD_PER_COMMIT): # do import save_res, df_error, df_duplicate = import_df(proc_id, df, dic_use_cols, get_date_col, job_info, trans_data) if is_first_chunk: - data_register_data = { - 'status': JobStatus.PROCESSING.name, - 'process_id': proc_id, - 'is_first_imported': True, - } - background_announcer.announce(data_register_data, AnnounceEvent.DATA_REGISTER.name) + if register_by_file_request_id: + data_register_data = { + 'RegisterByFileRequestID': register_by_file_request_id, + 'status': JobStatus.PROCESSING.name, + 'process_id': proc_id, + 'is_first_imported': True, + 'use_dummy_datetime': use_dummy_datetime, + } + background_announcer.announce( + data_register_data, + AnnounceEvent.DATA_REGISTER.name, + f'{AnnounceEvent.DATA_REGISTER.name}_{proc_id}', + ) is_first_chunk = False df_error_cnt = len(df_error) @@ -531,13 +549,19 @@ def import_csv(proc_id, record_per_commit=RECORD_PER_COMMIT): job_info.import_type = JobType.CSV_IMPORT.name save_res, df_error, df_duplicate = import_df(proc_id, df, dic_use_cols, get_date_col, job_info, trans_data) - if is_first_chunk: + if is_first_chunk and register_by_file_request_id: data_register_data = { + 'RegisterByFileRequestID': register_by_file_request_id, 'status': JobStatus.PROCESSING.name, 'process_id': proc_id, 'is_first_imported': True, + 'use_dummy_datetime': use_dummy_datetime, } - background_announcer.announce(data_register_data, AnnounceEvent.DATA_REGISTER.name) + background_announcer.announce( + data_register_data, + AnnounceEvent.DATA_REGISTER.name, + f'{AnnounceEvent.DATA_REGISTER.name}_{proc_id}', + ) df_error_cnt = len(df_error) if df_error_cnt: @@ -677,9 +701,9 @@ def csv_to_df( }, ) - # assign n_rows - nrows = get_number_of_reading_lines(n_rows=data_src.n_rows) - read_csv_param.update({'nrows': nrows}) + # assign n_rows with is_transpose + n_rows = get_limit_records(is_transpose=data_src.is_transpose, n_rows=data_src.n_rows) + read_csv_param.update({'nrows': n_rows}) # get encoding if not encoding: @@ -692,7 +716,6 @@ def csv_to_df( read_csv_param.update( { 'sep': csv_delimiter, - 'skipinitialspace': True, 'na_values': NA_VALUES, 'error_bad_lines': False, 'encoding': encoding, @@ -712,18 +735,6 @@ def csv_to_df( if col_names: df.columns = col_names - # convert data type - if dic_use_cols: - for col, cfg_col in dic_use_cols.items(): - d_type = cfg_col.predict_type - if d_type and DataType[d_type] in [ - DataType.REAL_SEP, - DataType.INTEGER_SEP, - DataType.EU_REAL_SEP, - DataType.EU_INTEGER_SEP, - ]: - convert_eu_decimal(df, col, d_type) - col_names = {col: normalize_str(col) for col in df.columns} df = df.rename(columns=col_names) @@ -743,7 +754,7 @@ def get_import_target_files(proc_id, data_src, trans_data, db_instance): dic_success_file, dic_error_file = get_last_csv_import_info(trans_data, db_instance) valid_extensions = [CSVExtTypes.CSV.value, CSVExtTypes.TSV.value, CSVExtTypes.SSV.value, CSVExtTypes.ZIP.value] csv_files = [] - if os.path.isfile(data_src.directory): + if data_src.is_file_path: if any(data_src.directory.lower().endswith(ext) for ext in valid_extensions): csv_files.append(data_src.directory) else: @@ -817,7 +828,8 @@ def remove_duplicates( # remove error index in df_origin df_origin_check = df_origin[~df_origin.index.isin(df_error.index)] # remove duplicate in csv files - df.drop_duplicates(subset=df_columns, keep='last', inplace=True) + if len(df_columns): + df.drop_duplicates(subset=df_columns, keep='last', inplace=True) # get data from database with DbProxy(gen_data_source_of_universal_db(proc_id), True) as db_instance: @@ -943,11 +955,90 @@ def actual_datetime(m: re.match) -> str: @log_execution_time() -def convert_datetime_format(df, dic_use_cols): +def date_transform(date_series): + """ + Convert date series to standard date format + + Support input formats: + + - YYYY/MM/DD + - YYYY-MM-DD + - YYYY年MM月DD日 + + Args: + date_series (Series): a series of time + + Returns: + A series of date with standard format YYYY-MM-DD + """ + separate_char = '-' + begin_part_of_year = datetime.now().year.__str__()[:2] + return date_series.str.replace( + DATE_TYPE_REGEX, + lambda m: ( + f'{m.group("year") if len(m.group("year")) == 4 else begin_part_of_year + m.group("year")}' + f'{separate_char}' + f'{m.group("month").rjust(2, "0")}' + f'{separate_char}' + f'{m.group("day").rjust(2, "0")}' + ), + regex=True, + ) + + +@log_execution_time() +def time_transform(time_series): + """ + Convert time series to standard time format + + Support input formats: + + - HH:mm:ss + - HH-mm-ss + - HH.mm.ss + - HH mm ss + - HH時mm分ss秒 + + Args: + time_series (Series): a series of time + + Returns: + A series of time with standard format HH:MM:SS + """ + separate_char = ':' + return time_series.str.replace( + TIME_TYPE_REGEX, + lambda m: ( + f'{m.group("hour").rjust(2, "0")}' + f'{separate_char}' + f'{m.group("minute").rjust(2, "0")}' + f'{separate_char}' + f'{m.group("second").rjust(2, "0")}' + ), + regex=True, + ) + + +@log_execution_time() +def convert_datetime_format(df, dic_use_cols, datetime_format: Optional[str] = None): + datetime_format_obj = DateTimeFormatUtils.get_datetime_format(datetime_format) for col, cfg_col in dic_use_cols.items(): if col not in df.columns: continue - if cfg_col.data_type in [DataType.DATETIME.name, DataType.DATE.name]: + if cfg_col.data_type == DataType.DATETIME.name: + # Convert datetime base on datetime format + if datetime_format_obj.datetime_format: + datetime_series = pd.to_datetime( + df[col], + errors='coerce', + format=datetime_format_obj.datetime_format, + ) + non_na_datetime_series = datetime_series[datetime_series.notnull()] + df[col] = non_na_datetime_series.dt.strftime(SQLiteFormatStrings.DATETIME.value).astype( + pd.StringDtype(), + ) + continue + dtype_name = df[col].dtype.name if dtype_name == 'object': df[col] = df[col].astype(str) @@ -956,6 +1047,52 @@ def convert_datetime_format(df, dic_use_cols): date_only = cfg_col.data_type == DataType.DATE.name df[col] = datetime_transform(df[col], date_only=date_only) + elif cfg_col.data_type == DataType.DATE.name: + # Convert date base on date format + if datetime_format_obj.date_format: + date_series = pd.to_datetime( + df[col], + errors='coerce', + format=datetime_format_obj.date_format, + ) + non_na_date_series = date_series[date_series.notnull()] + df[col] = non_na_date_series.dt.strftime(SQLiteFormatStrings.DATE.value).astype(pd.StringDtype()) + continue + + if pd.api.types.is_datetime64_dtype(df[col]): + df[col] = df[col].dt.strftime(SQLiteFormatStrings.DATE.value).astype(pd.StringDtype()) + continue + + date_series = pd.to_datetime(df[col], errors='coerce') + date_series.update(date_series[date_series.notnull()].dt.strftime(SQLiteFormatStrings.DATE.value)) + unknown_series = df[date_series.isnull()][col].astype('string') + date_series.update(unknown_series) + date_series = date_series.astype('string') + df[col] = date_transform(date_series).replace({pd.NaT: DEFAULT_NONE_VALUE}) + + elif cfg_col.data_type == DataType.TIME.name: + # Convert time base on time format + if datetime_format_obj.time_format: + time_series = pd.to_datetime( + df[col], + errors='coerce', + format=datetime_format_obj.time_format, + ) + non_na_time_series = time_series[time_series.notnull()] + df[col] = non_na_time_series.dt.strftime(SQLiteFormatStrings.TIME.value).astype(pd.StringDtype()) + continue + + if pd.api.types.is_datetime64_dtype(df[col]): + df[col] = df[col].dt.strftime(SQLiteFormatStrings.TIME.value).astype(pd.StringDtype()) + continue + + time_series = pd.to_datetime(df[col], errors='coerce') + time_series.update(time_series[time_series.notnull()].dt.strftime(SQLiteFormatStrings.TIME.value)) + unknown_series = df[time_series.isnull()][col].astype('string') + time_series.update(unknown_series) + time_series = time_transform(time_series).replace({pd.NaT: DEFAULT_NONE_VALUE}) + df[col] = time_series + return df @@ -990,7 +1127,8 @@ def import_df(proc_id, df, dic_use_cols, get_date_col, job_info=None, trans_data df = df.convert_dtypes() # convert datatime type 2023年01月02日 -> 2023-01-02 00:00:00 - df = convert_datetime_format(df, dic_use_cols) + cfg_process = CfgProcess.get_proc_by_id(proc_id) + df = convert_datetime_format(df, dic_use_cols, datetime_format=cfg_process.datetime_format) # make datetime main from date:main and time:main if trans_data and trans_data.main_date_column and trans_data.main_time_column: @@ -1098,18 +1236,16 @@ def convert_csv_timezone(df, get_date_col): @log_execution_time() def convert_eu_decimal(df: DataFrame, df_col, data_type): if data_type == DataType.REAL_SEP.name: - df[df_col] = df[df_col].astype(str).str.replace(r'\,+', '', regex=True).astype('float64') + df[df_col] = df[df_col].astype(str).str.replace(r'\,+', '', regex=True) if data_type == DataType.INTEGER_SEP.name: - df[df_col] = df[df_col].astype(str).str.replace(r'\,+', '', regex=True).astype('int32') + df[df_col] = df[df_col].astype(str).str.replace(r'\,+', '', regex=True) if data_type == DataType.EU_REAL_SEP.name: - df[df_col] = df[df_col].astype(str).str.replace(r'\.+', '', regex=True) - df[df_col] = df[df_col].astype(str).str.replace(r'\,+', '.', regex=True).astype('float64') + df[df_col] = df[df_col].astype(str).str.replace(r'\.+', '', regex=True).str.replace(r'\,+', '.', regex=True) if data_type == DataType.EU_INTEGER_SEP.name: - df[df_col] = df[df_col].astype(str).str.replace(r'\.+', '', regex=True) - df[df_col] = df[df_col].astype(str).str.replace(r'\,+', '.', regex=True).astype('int32') + df[df_col] = df[df_col].astype(str).str.replace(r'\.+', '', regex=True).str.replace(r'\,+', '.', regex=True) def write_invalid_records_to_file( @@ -1183,28 +1319,28 @@ def is_header_contains_invalid_chars(header_names: list[str]) -> bool: return nchars > NUM_CHARS_THRESHOLD -def gen_dummy_header(header_names, data_details=None, line_skip=''): +def gen_dummy_header(header_names, data_details=None, skip_head=None): """Generate dummy header for current data source - - if line_skip is not provided (None or '') or line_skip > 0: + - if skip_head is not provided (None) or skip_head > 0: generate dummy header if and only if number of invalid chars > 90% - - if line_skip = 0: + - if skip_head = 0: always generate dummy header @param header_names: @param data_details: - @param line_skip: + @param skip_head: @return: """ dummy_header = False partial_dummy_header = False org_header = header_names.copy() - is_blank = line_skip is None or line_skip == EMPTY_STRING + is_blank = skip_head is None is_auto_generate_dummy_header = is_header_contains_invalid_chars(header_names) # auto generate dummy header rules is_gen_from_blank_skip = is_blank and is_auto_generate_dummy_header - is_gen_from_zero_skip = not is_blank and int(line_skip) == 0 - is_gen_from_number_skip = not is_blank and int(line_skip) > 0 and is_auto_generate_dummy_header + is_gen_from_zero_skip = not is_blank and skip_head == 0 + is_gen_from_number_skip = not is_blank and skip_head > 0 and is_auto_generate_dummy_header if is_gen_from_blank_skip or is_gen_from_zero_skip or is_gen_from_number_skip: if data_details: data_details = [header_names] + data_details diff --git a/ap/api/setting_module/services/data_import.py b/ap/api/setting_module/services/data_import.py index 6cd8a41..bf3cb1b 100644 --- a/ap/api/setting_module/services/data_import.py +++ b/ap/api/setting_module/services/data_import.py @@ -1,7 +1,10 @@ +from __future__ import annotations + +import functools import os.path import traceback from datetime import datetime -from typing import List +from typing import List, Literal import numpy as np import pandas as pd @@ -13,6 +16,7 @@ DATE_FORMAT_STR, DATE_FORMAT_STR_ONLY_DIGIT, TXT_FILE_TYPE, + convert_numeric_by_type, convert_time, gen_transaction_table_name, get_basename, @@ -97,6 +101,7 @@ 'n/a', 'nan', 'null', + 'na', } NA_VALUES = {'na', '-', '--', '---', '#NULL!', '#REF!', '#VALUE!', '#NUM!', '#NAME?', '0/0'} PREVIEW_ALLOWED_EXCEPTIONS = {'-', '--', '---'} @@ -105,8 +110,8 @@ ALL_SYMBOLS = set(PANDAS_DEFAULT_NA | NA_VALUES | INF_VALUES | INF_NEG_VALUES) # let app can show preview and import all na column, as string -NORMAL_NULL_VALUES = {'NA', 'na', 'null'} -SPECIAL_SYMBOLS = ALL_SYMBOLS - NORMAL_NULL_VALUES - PREVIEW_ALLOWED_EXCEPTIONS +NORMAL_NULL_VALUES = {'NA', 'na', 'n/a', 'N/A', '', 'null', 'NULL', 'nan'} +# SPECIAL_SYMBOLS = ALL_SYMBOLS - NORMAL_NULL_VALUES - PREVIEW_ALLOWED_EXCEPTIONS IS_ERROR_COL = '___ERR0R___' ERR_COLS_NAME = '___ERR0R_C0LS___' @@ -189,15 +194,11 @@ def check_db_con(db_type, host, port, dbname, schema, username, password): db_source.db_detail = db_source_detail db_source.type = db_type - # 戻り値の初期化 - result = False - + # if we cannot connect, this will raise Exception # コネクションをチェックする - with DbProxy(db_source, force_connect=True) as db_instance: - if db_instance.is_connected: - result = True + DbProxy.check_db_connection(db_source, force=True) - return result + return True @log_execution_time() @@ -579,6 +580,12 @@ def strip_special_symbol(data, is_dict=False): # TODO: convert to dataframe than filter is faster , but care about generation purpose , # we just need to read some rows + def clean_value(val): + str_val = str(val) + if str_val in ALL_SYMBOLS or str_val.lower() in ALL_SYMBOLS: + return '' + return val + if is_dict: def iter_func(x): @@ -590,16 +597,10 @@ def iter_func(x): return x for row in data: - is_ng = False if not row: continue - for val in iter_func(row): - if str(val).lower() in SPECIAL_SYMBOLS: - is_ng = True - break - - if not is_ng: - yield row + new_row = {k: clean_value(v) for k, v in row.items()} if is_dict else [clean_value(v) for v in row] + yield new_row @log_execution_time() @@ -694,6 +695,7 @@ def validate_data(df: DataFrame, dic_use_cols, na_vals, exclude_cols=None): :param exclude_cols: :return: """ + from ap.api.setting_module.services.csv_import import convert_eu_decimal init_is_error_col(df) @@ -719,6 +721,7 @@ def validate_data(df: DataFrame, dic_use_cols, na_vals, exclude_cols=None): # data type that user chose user_data_type = dic_use_cols[col_name].data_type + d_type = dic_use_cols[col_name].predict_type # do nothing with float column if col_name in float_cols and user_data_type != DataType.INTEGER.name: @@ -736,13 +739,25 @@ def validate_data(df: DataFrame, dic_use_cols, na_vals, exclude_cols=None): # strip quotes and spaces dtype_name = df[col_name].dtype.name - if user_data_type in [DataType.INTEGER.name, DataType.REAL.name]: + if dtype_name == 'boolean': + df[col_name] = df[col_name].astype(pd.StringDtype()).str.lower() + + # convert K sep Int|Real data type + if dic_use_cols[col_name].predict_type and DataType[d_type] in [ + DataType.REAL_SEP, + DataType.INTEGER_SEP, + DataType.EU_REAL_SEP, + DataType.EU_INTEGER_SEP, + ]: + convert_eu_decimal(df, col_name, d_type) + + if user_data_type in [DataType.INTEGER.name, DataType.REAL.name, DataType.BOOLEAN.name]: vals = df[col_name].copy() # convert numeric values numerics = pd.to_numeric(vals, errors='coerce') + numerics = convert_numeric_by_type(numerics, user_data_type) df[col_name] = numerics - # strip quote space then convert non numeric values non_num_idxs = numerics.isna() non_numerics = vals.loc[non_num_idxs].dropna() @@ -752,6 +767,7 @@ def validate_data(df: DataFrame, dic_use_cols, na_vals, exclude_cols=None): # convert non numeric again numerics = pd.to_numeric(non_numerics, errors='coerce') + numerics = convert_numeric_by_type(numerics, user_data_type) df.loc[non_num_idxs, col_name] = numerics # set error for non numeric values @@ -781,28 +797,25 @@ def validate_data(df: DataFrame, dic_use_cols, na_vals, exclude_cols=None): df.loc[df[col_name].isin([float('inf'), float('-inf')]), col_name] = nan elif user_data_type == DataType.TEXT.name: - if dtype_name == 'boolean': - df[col_name] = df[col_name].replace({True: 'True', False: 'False'}) + idxs = df[col_name].dropna().index + if dtype_name == 'object': + df.loc[idxs, col_name] = df.loc[idxs, col_name].astype(str).str.strip("'").str.strip() + elif dtype_name == 'string': + df.loc[idxs, col_name] = df.loc[idxs, col_name].str.strip("'").str.strip() else: - idxs = df[col_name].dropna().index - if dtype_name == 'object': - df.loc[idxs, col_name] = df.loc[idxs, col_name].astype(str).str.strip("'").str.strip() - elif dtype_name == 'string': - df.loc[idxs, col_name] = df.loc[idxs, col_name].str.strip("'").str.strip() - else: - # convert to string before insert to database - df.loc[idxs, col_name] = df.loc[idxs, col_name].astype(str) - continue - - if len(idxs): - conditions = [ - df[col_name].isin(na_vals), - df[col_name].isin(INF_VALUES), - df[col_name].isin(INF_NEG_VALUES), - ] - return_vals = [nan, inf_val, inf_neg_val] - - df[col_name] = np.select(conditions, return_vals, df[col_name]) + # convert to string before insert to database + df.loc[idxs, col_name] = df.loc[idxs, col_name].astype(str) + continue + + if len(idxs): + conditions = [ + df[col_name].isin(na_vals), + df[col_name].isin(INF_VALUES), + df[col_name].isin(INF_NEG_VALUES), + ] + return_vals = [nan, inf_val, inf_neg_val] + + df[col_name] = np.select(conditions, return_vals, df[col_name]) df.head() @@ -965,14 +978,14 @@ def convert_df_col_to_utc(df, get_date_col, is_timezone_inside, db_time_zone, ut @log_execution_time() def convert_df_datetime_to_str(df: DataFrame, get_date_col): - return df[df[get_date_col].notnull()][get_date_col].dt.strftime(DATE_FORMAT_STR) + return df[df[get_date_col].notnull()][get_date_col].dt.strftime(DATE_FORMAT_STR).astype(pd.StringDtype()) @log_execution_time() def validate_datetime(df: DataFrame, date_col, is_strip=True, add_is_error_col=True, null_is_error=True): dtype_name = df[date_col].dtype.name if dtype_name == 'object': - df[date_col] = df[date_col].astype(str) + df[date_col] = df[date_col].astype(pd.StringDtype()) elif dtype_name != 'string': return @@ -1199,34 +1212,84 @@ def get_df_first_n_last(df: DataFrame, first_count=10, last_count=10): @log_execution_time() -def save_proc_data_count(db_instance, df: DataFrame, proc_id, get_date_col): - if not df.size or not get_date_col: - return None +def save_proc_data_count(db_instance, df, proc_id, get_date_col): + save_proc_data_count_multiple_dfs( + db_instance, + proc_id=proc_id, + get_date_col=get_date_col, + dfs_push_to_db=df, + ) - s = pd.to_datetime(df[get_date_col], errors='coerce') - s: Series = (s.dt.year * 1_00_00_00 + s.dt.month * 1_00_00 + s.dt.day * 1_00 + s.dt.hour).value_counts() - s.rename(DataCountTable.count.name, inplace=True) - count_df = s.reset_index(name=DataCountTable.count.name) - count_df.rename(columns={'index': DataCountTable.datetime.name}, inplace=True) - count_df[DataCountTable.datetime.name] = pd.to_datetime( - count_df[DataCountTable.datetime.name], - format='%Y%m%d%H', - ).dt.strftime(DATE_FORMAT_FOR_ONE_HOUR) - # # rename - # df = df.rename(columns={get_date_col: DataCountTable.get_date_col()}) - # - # # group data by datetime time - # df[get_date_col] = df[get_date_col].apply( - # lambda x: '{}'.format(datetime.strptime(x, DATE_FORMAT_STR).strftime(DATE_FORMAT_FOR_ONE_HOUR)), - # ) - # count_df = df.groupby([get_date_col]).value_counts() - # count_df = count_df.to_frame(name=DataCountTable.count.name).reset_index() +def save_proc_data_count_multiple_dfs( + db_instance, + *, + proc_id, + get_date_col, + dfs_push_to_db: list[pd.DataFrame] | pd.DataFrame = None, + dfs_pop_from_db: list[pd.DataFrame] | pd.DataFrame = None, + dfs_push_to_file: list[pd.DataFrame] | pd.DataFrame = None, + dfs_pop_from_file: list[pd.DataFrame] | pd.DataFrame = None, +): + def check_args(dfs): + if dfs is None: + return [] + if not isinstance(dfs, list): + return [dfs] + return dfs + + dfs_push_to_db = check_args(dfs_push_to_db) + dfs_pop_from_db = check_args(dfs_pop_from_db) + dfs_push_to_file = check_args(dfs_push_to_file) + dfs_pop_from_file = check_args(dfs_pop_from_file) + + get_proc_data_count_df_func = functools.partial( + get_proc_data_count_df, + get_date_col=get_date_col, + ) + # TODO: aggregate to one df instead of run 4 times + aggregated_df = pd.DataFrame() + + for df in dfs_push_to_db: + count_df = get_proc_data_count_df_func(df, is_db=True, decrease=False) + aggregated_df = pd.concat([aggregated_df, count_df]) + + for df in dfs_pop_from_db: + count_df = get_proc_data_count_df_func(df, is_db=True, decrease=True) + aggregated_df = pd.concat([aggregated_df, count_df]) + + for df in dfs_push_to_file: + count_df = get_proc_data_count_df_func(df, is_db=False, decrease=False) + aggregated_df = pd.concat([aggregated_df, count_df]) + + for df in dfs_pop_from_file: + count_df = get_proc_data_count_df_func(df, is_db=False, decrease=True) + aggregated_df = pd.concat([aggregated_df, count_df]) + + if aggregated_df.empty: + return + + agg_keys = {DataCountTable.count.name: 'sum', DataCountTable.count_file.name: 'sum'} + aggregated_df = aggregated_df.groupby(DataCountTable.datetime.name).agg(agg_keys).reset_index() + sql_vals = aggregated_df.to_records(index=False).tolist() sql_params = get_insert_params(DataCountTable.get_keys()) sql_insert = gen_bulk_insert_sql(DataCountTable.get_table_name(proc_id), *sql_params) - sql_vals = count_df.to_records(index=False).tolist() + insert_data(db_instance, sql_insert, sql_vals) + set_all_cache_expired(CacheType.TRANSACTION_DATA) + + +def get_proc_data_count_df(df, *, get_date_col, decrease: bool, is_db: bool): + if df.empty: + return pd.DataFrame() + + count_column = DataCountTable.count.name if is_db else DataCountTable.count_file.name + count_df = calculate_value_counts_per_hours(df, get_date_col, count_column=count_column) + if decrease: + count_df[count_column] = -count_df[count_column] + + return count_df @log_execution_time() @@ -1280,3 +1343,29 @@ def save_failed_import_history(proc_id, job_info, error_type): # save import history before return # insert import history save_import_history(proc_id, job_info) + + +@log_execution_time() +def calculate_value_counts_per_hours( + df: DataFrame, + get_date_col, + count_column: Literal['count', 'count_file'] = DataCountTable.count.name, +): + if not df.size or not get_date_col: + return None + + s = pd.to_datetime(df[get_date_col], errors='coerce') + s: Series = (s.dt.year * 1_00_00_00 + s.dt.month * 1_00_00 + s.dt.day * 1_00 + s.dt.hour).value_counts() + count_df = s.rename(count_column).reset_index(name=count_column) + count_df.rename(columns={'index': DataCountTable.datetime.name}, inplace=True) + count_df[DataCountTable.datetime.name] = pd.to_datetime( + count_df[DataCountTable.datetime.name], + format='%Y%m%d%H', + ).dt.strftime(DATE_FORMAT_FOR_ONE_HOUR) + + if count_column == DataCountTable.count.name: + count_df[DataCountTable.count_file.name] = 0 + else: + count_df[DataCountTable.count.name] = 0 + + return count_df diff --git a/ap/api/setting_module/services/equations.py b/ap/api/setting_module/services/equations.py index 1bebea3..5d631c9 100644 --- a/ap/api/setting_module/services/equations.py +++ b/ap/api/setting_module/services/equations.py @@ -44,21 +44,28 @@ def sample_data(self) -> EquationSampleDataResponse: equation = get_function_class_by_id(equation_id=self.equation_id).from_kwargs( **self.model_dump(), ) - sample_data = equation.evaluate( + + evaluate = equation.evaluate( df, out_col=SAMPLE_DATA, x_col=ARRAY_X, y_col=ARRAY_Y, x_dtype=self.x_data_type, y_dtype=self.y_data_type, - )[SAMPLE_DATA] + ) + sample_data = evaluate[SAMPLE_DATA] output_type = equation.get_output_type(x_data_type=self.x_data_type, y_data_type=self.y_data_type) # orjson can't parse infinity # https://github.com/ijl/orjson?tab=readme-ov-file#float sample_data = sample_data.replace({np.inf: 'inf', -np.inf: '-inf'}) + if pd.api.types.is_bool_dtype(sample_data): + sample_data = sample_data.astype(pd.StringDtype()).str.lower() - return EquationSampleDataResponse(sample_data=sample_data.tolist(), output_type=output_type.value) + return EquationSampleDataResponse( + sample_data=sample_data.tolist(), + output_type=output_type.value, + ) def get_all_normal_columns_for_functions( @@ -131,6 +138,7 @@ def validate_functions_calculation(process_id: int, validation_errors: FunctionE for function in functions: function_id = function.get(CfgProcessFunctionColumn.function_id.key) + process_column_id = function.get(CfgProcessFunctionColumn.process_column_id.key) var_x = function.get(CfgProcessFunctionColumn.var_x.key) var_y = function.get(CfgProcessFunctionColumn.var_y.key) @@ -147,7 +155,9 @@ def validate_functions_calculation(process_id: int, validation_errors: FunctionE **function, ) try: - equation_sample_data.sample_data() + sample_data = equation_sample_data.sample_data() + # update data type + raw_data_types[process_column_id] = sample_data.output_type except FunctionFieldError as err: validation_errors.add_function_error(err.with_id(function_column_id)) diff --git a/ap/api/setting_module/services/factory_import.py b/ap/api/setting_module/services/factory_import.py index 390a868..f87e1cf 100644 --- a/ap/api/setting_module/services/factory_import.py +++ b/ap/api/setting_module/services/factory_import.py @@ -22,6 +22,10 @@ write_error_import, write_error_trace, ) +from ap.api.setting_module.services.software_workshop_etl_services import ( + get_transaction_data_stmt, + transform_df_for_software_workshop, +) from ap.api.trace_data.services.proc_link import add_gen_proc_link_job from ap.common.common_utils import ( DATE_FORMAT_STR_FACTORY_DB, @@ -36,9 +40,9 @@ DATA_TYPE_ERROR_EMPTY_DATA, DATA_TYPE_ERROR_MSG, DATETIME_DUMMY, - MSG_DB_CON_FAILED, PAST_IMPORT_LIMIT_DATA_COUNT, DataType, + DBType, JobStatus, JobType, ) @@ -118,7 +122,7 @@ def import_factory(proc_id): data_src: CfgDataSourceDB = CfgDataSourceDB.query.get(proc_cfg.data_source_id) # check db connection - check_db_connection(data_src) + DbProxy.check_db_connection(data_src) trans_data = TransactionData(proc_cfg.id) with DbProxy(gen_data_source_of_universal_db(proc_id), True, immediate_isolation_level=True) as db_instance: @@ -195,7 +199,6 @@ def import_factory(proc_id): # validate import date range if end_time >= fac_max_date: - end_time = fac_max_date is_import = False # get data from factory @@ -208,12 +211,22 @@ def import_factory(proc_id): remain_rows = () error_type = None for _rows in data: + # Reassign attribute + get_date_col = proc_cfg.get_date_col() + proc_id = proc_cfg.id + cfg_columns = proc_cfg.columns + is_import, rows, remain_rows = gen_import_data(_rows, remain_rows, auto_increment_idx) if not is_import: continue # dataframe df = pd.DataFrame(rows, columns=cols) + # to save into import history + imported_end_time = str(df[auto_increment_col].max()) + # pivot if this is vertical data + if proc_cfg.data_source.type == DBType.SOFTWARE_WORKSHOP.name: + df = transform_df_for_software_workshop(df, proc_cfg.data_source_id, proc_cfg.process_factid) # no records if not len(df): @@ -275,7 +288,10 @@ def import_factory(proc_id): cfg_parent_proc: CfgProcess = CfgProcess.get_proc_by_id(parent_id) dic_parent_cfg_cols = {cfg_col.id: cfg_col for cfg_col in cfg_parent_proc.columns} dic_cols = {cfg_col.column_name: cfg_col.parent_id for cfg_col in cfg_columns} - dic_rename = {col: dic_parent_cfg_cols[dic_cols[col]].column_name for col in df.columns} + dic_rename = {} + for col in df.columns: + if dic_cols.get(col): + dic_rename[col] = dic_parent_cfg_cols[dic_cols[col]].column_name df = df.rename(columns=dic_rename) orig_df = orig_df.rename(columns=dic_rename) df_error = df_error.rename(columns=dic_rename) @@ -300,9 +316,6 @@ def import_factory(proc_id): # import data job_info.import_type = JobType.FACTORY_IMPORT.name - # to save into import history - imported_end_time = rows[-1][auto_increment_idx] - # to save into job_info.import_from = start_time job_info.import_to = imported_end_time @@ -311,6 +324,8 @@ def import_factory(proc_id): if error_type: job_info.status = JobStatus.FAILED.name job_info.err_msg = error_type + + df = remove_non_exist_columns_in_df(df, [col.column_name for col in cfg_columns]) save_res = import_data(df, proc_id, get_date_col, cfg_columns, job_info) gen_import_job_info(job_info, save_res, start_time, imported_end_time, err_cnt=df_error_cnt) @@ -445,8 +460,7 @@ def get_sql_range_time( return start_time, end_time, filter_time -@log_execution_time('[FACTORY DATA IMPORT SELECT SQL]') -def get_data_by_range_time(db_instance, get_date_col, column_names, table_name, start_time, end_time, sql_limit): +def get_data_by_range_time_sql(db_instance, get_date_col, column_names, table_name, start_time, end_time, sql_limit): if isinstance(db_instance, mysql.MySQL): sel_cols = ','.join(column_names) else: @@ -477,8 +491,36 @@ def get_data_by_range_time(db_instance, get_date_col, column_names, table_name, else: sql = f'SELECT {sql} LIMIT {sql_limit}' + return sql, None + + +@log_execution_time('[FACTORY DATA IMPORT SELECT SQL]') +def get_data_by_range_time( + db_instance, + proc_cfg, + get_date_col, + column_names, + table_name, + start_time, + end_time, + sql_limit, +): + if proc_cfg.data_source.type == DBType.SOFTWARE_WORKSHOP.name: + stmt = get_transaction_data_stmt(proc_cfg.process_factid, start_time, end_time, limit=sql_limit) + sql, params = db_instance.gen_sql_and_params(stmt) + else: + sql, params = get_data_by_range_time_sql( + db_instance, + get_date_col, + column_names, + table_name, + start_time, + end_time, + sql_limit, + ) + logger.info(f'sql: {sql}') - data = db_instance.fetch_many(sql, FETCH_MANY_SIZE) + data = db_instance.fetch_many(sql, FETCH_MANY_SIZE, params=params) if not data: return None @@ -498,6 +540,7 @@ def get_factory_data(proc_cfg, column_names, auto_increment_col, start_time, end with DbProxy(proc_cfg.data_source) as db_instance: data = get_data_by_range_time( db_instance, + proc_cfg, auto_increment_col, column_names, proc_cfg.table_name, @@ -523,12 +566,13 @@ def get_factory_min_max_date(proc_cfg): # gen sql agg_results = [] get_date_col = add_double_quotes(proc_cfg.get_auto_increment_col_else_get_date()) - orig_tblname = proc_cfg.table_name.strip('"') + orig_tblname = proc_cfg.table_name_for_query_datetime().strip('"') table_name = add_double_quotes(orig_tblname) if not isinstance(db_instance, mysql.MySQL) else orig_tblname for agg_func in ['MIN', 'MAX']: sql = f'select {agg_func}({get_date_col}) from {table_name}' if isinstance(db_instance, mssqlserver.MSSQLServer): sql = f'select convert(varchar(30), {agg_func}({get_date_col}), 127) from {table_name}' + sql = proc_cfg.filter_for_query_datetime(sql) _, rows = db_instance.run_sql(sql, row_is_dict=False) if not rows: @@ -614,7 +658,7 @@ def factory_past_data_transform(proc_id): data_src: CfgDataSourceDB = CfgDataSourceDB.query.get(proc_cfg.data_source_id) # check db connection - check_db_connection(data_src) + DbProxy.check_db_connection(data_src) # columns info proc_name = proc_cfg.name @@ -629,6 +673,7 @@ def factory_past_data_transform(proc_id): trans_data = TransactionData(proc_id) with DbProxy(gen_data_source_of_universal_db(proc_id), True, immediate_isolation_level=True) as db_instance: + trans_data.create_table(db_instance) # last import date last_import = trans_data.get_import_history_last_import(db_instance, JobType.FACTORY_PAST_IMPORT.name) @@ -714,6 +759,9 @@ def factory_past_data_transform(proc_id): # dataframe df = pd.DataFrame(rows, columns=cols) + # pivot if this is vertical data + if proc_cfg.data_source.type == DBType.SOFTWARE_WORKSHOP.name: + df = transform_df_for_software_workshop(df, proc_cfg.data_source_id, proc_cfg.process_factid) # no records if not len(df): @@ -789,6 +837,8 @@ def factory_past_data_transform(proc_id): # save import history job_info.status = JobStatus.FAILED.name job_info.err_msg = error_type + + df = remove_non_exist_columns_in_df(df, [col.column_name for col in cfg_columns]) save_res = import_data(df, proc_id, get_date_col, cfg_columns, job_info) # update job info @@ -820,12 +870,17 @@ def factory_past_data_transform(proc_id): yield job_info +def remove_non_exist_columns_in_df(df, required_columns: list[str]) -> pd.DataFrame: + good_columns = [col for col in df.columns if col in required_columns] + return df[good_columns] + + @log_execution_time() def handle_time_zone(proc_cfg, get_date_col): # convert utc time func get_date, tzoffset_str, db_timezone = get_tzoffset_of_random_record( proc_cfg.data_source, - proc_cfg.table_name, + proc_cfg.table_name_for_query_datetime(), get_date_col, ) @@ -849,14 +904,6 @@ def handle_time_zone(proc_cfg, get_date_col): return is_timezone_inside, db_time_zone, utc_offset -@log_execution_time() -def check_db_connection(data_src): - # check db connection - with DbProxy(data_src) as db_instance: - if not db_instance.is_connected: - raise Exception(MSG_DB_CON_FAILED) - - @log_execution_time() def gen_import_data(rows, remain_rows, auto_increment_idx): is_allow_import = True diff --git a/ap/api/setting_module/services/master_data_transform_pattern.py b/ap/api/setting_module/services/master_data_transform_pattern.py new file mode 100644 index 0000000..cbc056b --- /dev/null +++ b/ap/api/setting_module/services/master_data_transform_pattern.py @@ -0,0 +1,104 @@ +import re +from typing import Union + +import pandas as pd +from pandas._libs.missing import NAType + +from ap.common.constants import EMPTY_STRING, HALF_WIDTH_SPACE + +REMOVE_CHARACTERS_PATTERN = r'\\+[nrt]' + + +class RegexRule: + regex_dict = None + + @classmethod + def extract_data(cls, *args, **kwargs) -> Union[tuple, str, None, NAType]: + raise NotImplementedError('Method not implemented!') + + # @classmethod + # def pattern_regexes(cls, data: str, **extend_args) -> Union[tuple, str, None, NAType]: + # for pattern_no, regex in cls.regex_dict.items(): + # result = cls.extract_data(data, regex, pattern_no, **extend_args) + # if result is None: + # continue + # return result + # return None + + @classmethod + def is_not_data(cls, data: str) -> bool: + return pd.isnull(data) or data is None + + +class ColumnRawNameRule(RegexRule): + # V2 eFA + # 計測項目ID 計測項目名 DATA_ID DATA_NAME + # LNSCXX4302_M00022 △q/△SP荷重 [mm3/str/N] DIC14028 7孔Z軸補正量指令値 + # LNSCXX4302_M00042 △q/△SP荷重 [mm3/str/N] DIC14128 7孔Z軸補正量指令値 + + # In abnormal case + # No 計測項目名 data name unit + # ① AJP圧入荷重[N](最終荷重) -> AJP圧入荷重 最終荷重 N + # ② SPバネ定数[N]] -> SPバネ定数 N + # 切込み終了時荷重（ﾛｰﾗ①実測）[N -> 切込み終了時荷重（ﾛｰﾗ①実測） N + # ③ ﾀｰﾐﾅﾙ位置寸法 Ｌ側 [m m ] -> ﾀｰﾐﾅﾙ位置寸法 Ｌ側 m m + # ④ 調整荷重（調整終了点）（ﾛｰﾗ②実測）[N] -> 調整荷重（調整終了点）（ﾛｰﾗ②実測） N + # ④ AJP圧入荷重[N][mm](最終荷重) -> AJP圧入荷重 最終荷重 N + + regex_dict = { + 'pattern_1': r'^([^\[\]]*)[\[\s]*([^\[\]]*)[\]\s]*([^\[\]]*)$', + 'pattern_2': r'^([^\[\]]+)[\[\s]*([^\[\]]*)[\]\s]*[\[\s]*([^\[\]]*)[\]\s]*([^\[\]]*)$', + } + + @classmethod + def extract_data(cls, data: str): + column_name = data + unit = EMPTY_STRING + suffix_data_name = EMPTY_STRING + if cls.is_not_data(data): + return data, unit + + data = re.sub(r'\\+[nrt]|\(?±\)?', EMPTY_STRING, data) + is_match = False + for pattern_no, regex in cls.regex_dict.items(): + match = re.search(regex, data) + if not match or is_match: + continue + is_match = True + if pattern_no == 'pattern_1': + column_name, unit, suffix_data_name = match.groups() + else: + column_name, unit, _, suffix_data_name = match.groups() + + if not is_match: + return data, unit + + column_name = column_name.strip() + if len(suffix_data_name) != 0: + column_name += f'{HALF_WIDTH_SPACE}{suffix_data_name}' + + # 4. Replace any bracket. + # 4-1. Replace "\s?[(\[]\s?" to "(" + column_name = re.sub(r'\s?[(\[【「『〖〚〘｟〔]\s?', '(', column_name) + # 4-2. Replace "\s?[)\]" to ")" + column_name = re.sub(r'\s?[)\]】」』〗〛〙｠〕]\s?', ')', column_name) + + # handle case 'μm' and 'µm' + unit = unit.replace('μ', 'µ').replace('KPa', 'kPa').replace('cm^3/min', 'cm3/min').strip() + + # 4-3. Remove "()" + column_name = re.sub(r'[()]', HALF_WIDTH_SPACE, column_name) + column_name = re.sub(r'\s+', HALF_WIDTH_SPACE, column_name) + + # 5. Replace `No.`=> `No` by removing `.` + column_name = column_name.replace('No.', 'No') + column_name = column_name.replace(';', ':') # Cover case 管理マスタ値1;指示値 & 管理マスタ値1:指示値 + + # Remove 計測値:|measurement. + measurement_removes = ['計測値:', '加工値:', '加工条件:', '加工条件値:', 'その他:', 'measurement.'] + column_name = re.sub('|'.join(map(re.escape, measurement_removes)), EMPTY_STRING, column_name) + + # 6. Strip + column_name = column_name.strip() + + return column_name, unit diff --git a/ap/api/setting_module/services/polling_frequency.py b/ap/api/setting_module/services/polling_frequency.py index 8ac024c..5b136c7 100644 --- a/ap/api/setting_module/services/polling_frequency.py +++ b/ap/api/setting_module/services/polling_frequency.py @@ -45,7 +45,13 @@ def change_polling_all_interval_jobs(interval_sec=None, run_now=False, is_user_r add_import_job(proc_cfg, interval_sec=interval_sec, run_now=run_now, is_user_request=is_user_request) -def add_import_job(proc_cfg: CfgProcess, interval_sec=None, run_now=None, is_user_request: bool = False): +def add_import_job( + proc_cfg: CfgProcess, + interval_sec=None, + run_now=None, + is_user_request: bool = False, + register_by_file_request_id: str = None, +): if interval_sec is None: interval_sec = CfgConstant.get_value_by_type_first(CfgConstantType.POLLING_FREQUENCY.name, int) @@ -70,6 +76,7 @@ def add_import_job(proc_cfg: CfgProcess, interval_sec=None, run_now=None, is_use '_proc_name': proc_cfg.name, 'proc_id': proc_cfg.id, 'is_user_request': is_user_request, + 'register_by_file_request_id': register_by_file_request_id, } add_job_to_scheduler(job_id, job_name, trigger, import_func, run_now, dic_import_param) diff --git a/ap/api/setting_module/services/process_delete.py b/ap/api/setting_module/services/process_delete.py index 87d000c..bee951d 100644 --- a/ap/api/setting_module/services/process_delete.py +++ b/ap/api/setting_module/services/process_delete.py @@ -69,9 +69,9 @@ def delete_proc_cfg_and_relate_jobs(proc_id): for proc_id in deleting_process_ids: remove_jobs(target_jobs, proc_id) - # TODO: batch delete + CfgProcess.batch_delete(deleting_process_ids) + for proc_id in deleting_process_ids: - CfgProcess.delete(proc_id=proc_id) delete_transaction_db_file(proc_id) return deleting_process_ids diff --git a/ap/api/setting_module/services/show_latest_record.py b/ap/api/setting_module/services/show_latest_record.py index 7566733..45b1dfb 100644 --- a/ap/api/setting_module/services/show_latest_record.py +++ b/ap/api/setting_module/services/show_latest_record.py @@ -1,5 +1,6 @@ from __future__ import annotations +import json import os import re import time @@ -11,6 +12,7 @@ import pandas as pd from flask_babel import get_locale +from ap import check_exist from ap.api.efa.services.etl import detect_file_path_delimiter, preview_data from ap.api.setting_module.services.csv_import import add_column_file_name, convert_csv_timezone, gen_dummy_header from ap.api.setting_module.services.data_import import ( @@ -18,6 +20,14 @@ strip_special_symbol, validate_datetime, ) +from ap.api.setting_module.services.master_data_transform_pattern import ColumnRawNameRule +from ap.api.setting_module.services.software_workshop_etl_services import ( + get_code_name_mapping, + get_transaction_data_stmt, + measurements_table, + quality_measurements_table, + transform_df_for_software_workshop, +) from ap.api.setting_module.services.v2_etl_services import ( get_df_v2_process_single_file, get_preview_processes_v2, @@ -28,10 +38,14 @@ rename_sub_part_no, ) from ap.common.common_utils import ( + add_suffix_for_same_column_name, get_csv_delimiter, + get_files, + get_preview_data_file_folder, get_sorted_files, get_sorted_files_by_size, get_sorted_files_by_size_and_time, + make_dir_from_file_path, remove_non_ascii_chars, ) from ap.common.constants import ( @@ -92,30 +106,34 @@ def get_latest_records( directory=None, limit=5, current_process_id: int | None = None, + is_v2_datasource=False, + filtered_process_name=None, + process_factid=None, + is_convert_datetime=True, ): - is_v2_datasource = False previewed_files = None cols_with_types = [] - filtered_process_name = False delimiter = 'Auto' - skip_head = '' + skip_head = None etl_func = '' n_rows = None is_transpose = None if data_source_id: - data_source = CfgDataSource.query.get(data_source_id) + data_source: CfgDataSource = CfgDataSource.query.get(data_source_id) if not data_source: return None is_v2_datasource = is_v2_data_source(ds_type=data_source.type) is_csv_or_v2 = data_source.type.lower() in [DBType.CSV.name.lower(), DBType.V2.name.lower()] if is_csv_or_v2: csv_detail = data_source.csv_detail - filtered_process_name = csv_detail.process_name or False + if not filtered_process_name: + filtered_process_name = csv_detail.process_name or False directory = csv_detail.directory + file_name = csv_detail.directory if csv_detail.is_file_path else None delimiter = csv_detail.delimiter etl_func = csv_detail.etl_func - skip_head = '' if (csv_detail.skip_head == 0 and not csv_detail.dummy_header) else csv_detail.skip_head + skip_head = csv_detail.skip_head n_rows = csv_detail.n_rows is_transpose = csv_detail.is_transpose else: @@ -141,20 +159,27 @@ def get_latest_records( return_df=True, max_records=1000, file_name=file_name, - line_skip=skip_head, + skip_head=skip_head, n_rows=n_rows, is_transpose=is_transpose, show_file_name_column=True, current_process_id=current_process_id, + is_convert_datetime=is_convert_datetime, ) - column_raw_name = dic_preview.get('org_headers') + column_raw_names = dic_preview.get('org_headers') headers = normalize_list(dic_preview.get('header')) headers = [normalize_str(col) for col in headers] data_types = dic_preview.get('dataType') same_values = dic_preview.get('same_values') is_v2_history = dic_preview.get('v2_type') == DBType.V2_HISTORY if headers and data_types: - cols_with_types = gen_cols_with_types(headers, data_types, same_values, is_v2_history, column_raw_name) + cols_with_types = gen_cols_with_types( + headers, + data_types, + same_values, + is_v2_history, + column_raw_names, + ) # sort columns # sorted(csv_detail.csv_columns, key=lambda c: c.order or c.id) @@ -165,11 +190,21 @@ def get_latest_records( df_rows = dic_preview.get('content', None) previewed_files = dic_preview.get('previewed_files') else: - cols, df_rows = get_info_from_db(data_source, table_name) + cols, df_rows, dict_column_name_and_unit = get_info_from_db( + data_source, + table_name, + process_factid=process_factid, + ) data_types = [gen_data_types(df_rows[col]) for col in cols] same_values = check_same_values_in_df(df_rows, cols) if cols and data_types: - cols_with_types = gen_cols_with_types(cols, data_types, same_values) + cols_with_types = gen_cols_with_types( + normalize_list(cols), + data_types, + same_values, + column_raw_name=cols, + dict_column_name_and_unit=dict_column_name_and_unit, + ) # format data df_rows = convert_utc_df(df_rows, cols, data_types, data_source, table_name) @@ -187,6 +222,8 @@ def get_latest_records( 'romaji': DATETIME_DUMMY, 'is_date': True, 'check_same_value': {'is_null': False, 'is_same': False}, + 'is_checked': True, + 'is_show': True, }, ) cols.insert(dummy_datetime_idx, DATETIME_DUMMY) @@ -237,8 +274,19 @@ def get_latest_records( # return [dic_col_type.get(col) for col in cols] +def get_info_from_db(data_source, table_name, process_factid: str | None = None, sql_limit: int = 2000): + if data_source.type == DBType.SOFTWARE_WORKSHOP.name: + return get_info_from_db_software_workshop( + data_source.id, + quality_measurements_table.name, + process_factid, + ) + return get_info_from_db_normal(data_source.id, table_name, sql_limit) + + @lru_cache(maxsize=20) -def get_info_from_db(data_source, table_name, sql_limit: int = 2000): +def get_info_from_db_normal(data_source_id, table_name, sql_limit: int = 2000): + data_source = CfgDataSource.query.get(data_source_id) with DbProxy(data_source) as db_instance: if not db_instance or not table_name: return [], [] @@ -255,7 +303,45 @@ def get_info_from_db(data_source, table_name, sql_limit: int = 2000): cols = normalize_list(cols) df_rows = normalize_big_rows(rows, cols, strip_quote=False) - return cols, df_rows + return cols, df_rows, {} + + +@log_execution_time() +@memoize(duration=300) +def get_info_from_db_software_workshop(data_source_id, table_name, child_equip_id, sql_limit: int = 2000): + data_source = CfgDataSource.query.get(data_source_id) + with DbProxy(data_source) as db_instance: + if not db_instance or not table_name or not child_equip_id: + return [], [] + stmt = get_transaction_data_stmt(child_equip_id, limit=sql_limit, sort_by_time=False) + sql, params = db_instance.gen_sql_and_params(stmt) + cols, rows = db_instance.run_sql(sql, row_is_dict=False, params=params) + + df = pd.DataFrame(rows, columns=cols) + df = df.sort_values(by=quality_measurements_table.c.event_time.name) + + code_col = measurements_table.c.code.name + unit_col = measurements_table.c.unit.name + + df[unit_col] = df[unit_col].str.strip() # Remove space characters in unit value + + dict_code_with_unit = ( + df.dropna(subset=[unit_col]) # do not get unit column with NA + .drop_duplicates(subset=[code_col])[[code_col, unit_col]] # only get unique code column + .set_index(code_col)[unit_col] # convert to dictionary + .to_dict() + ) + dict_code_with_name = get_code_name_mapping(data_source.id, child_equip_id) + dict_code_with_name = add_suffix_for_same_column_name(dict_code_with_name) + dict_column_name_with_unit = {dict_code_with_name[code]: unit for code, unit in dict_code_with_unit.items()} + + df = transform_df_for_software_workshop(df, data_source.id, child_equip_id) + transform_cols = df.columns.to_list() + transform_rows = df.values.tolist() + + df_rows = normalize_big_rows(transform_rows, transform_cols, strip_quote=False) + + return transform_cols, df_rows, dict_column_name_with_unit @log_execution_time() @@ -293,14 +379,13 @@ def save_master_vis_config(proc_id, cfg_jsons): @log_execution_time() def get_csv_data_from_files( sorted_files, - line_skip: int | None, - n_rows: int, + skip_head: int | None, + n_rows: int | None, is_transpose: bool, etl_func, csv_delimiter, max_records=5, ): - skip_head = 0 if not line_skip else int(line_skip) csv_file = sorted_files[0] skip_tail = 0 encoding = None @@ -324,7 +409,7 @@ def get_csv_data_from_files( try: data = read_data( csv_file, - skip_head=line_skip, + skip_head=skip_head, n_rows=n_rows, is_transpose=is_transpose, delimiter=csv_delimiter, @@ -401,14 +486,15 @@ def get_csv_data_from_files( else: raise ValueError('Cannot get headers_name and data_details') - # generate column name if there is not header in file + # check for header and generate column name + # TODO: We should make use of dummy_header variable of data_src if data_src already exists and not check again org_header, header_names, dummy_header, partial_dummy_header, data_details = gen_dummy_header( header_names, data_details, - line_skip, + skip_head, ) - skip_head = skip_head_detected if skip_head_detected else line_skip + skip_head = skip_head_detected if skip_head_detected else skip_head return org_header, header_names, dummy_header, partial_dummy_header, data_details, encoding, skip_tail, skip_head @@ -421,11 +507,12 @@ def preview_csv_data( return_df=False, max_records=5, file_name=None, - line_skip=None, + skip_head=None, n_rows: int | None = None, is_transpose: bool = False, show_file_name_column=False, current_process_id=None, + is_convert_datetime=True, ): csv_delimiter = get_csv_delimiter(csv_delimiter) @@ -442,11 +529,12 @@ def preview_csv_data( same_values = [] if not sorted_files: return { + 'directory': folder_url, 'file_name': csv_file, 'header': header_names, 'content': [] if return_df else data_details, 'dataType': data_types, - 'skip_head': line_skip, + 'skip_head': skip_head, 'n_rows': n_rows, 'is_transpose': is_transpose, 'skip_tail': 0, @@ -467,7 +555,7 @@ def preview_csv_data( skip_head_detected, ) = get_csv_data_from_files( sorted_files, - line_skip=line_skip, + skip_head=skip_head, n_rows=n_rows, is_transpose=is_transpose, etl_func=etl_func, @@ -488,11 +576,18 @@ def preview_csv_data( first_datetime_col_idx = None # convert utc for col, dtype in zip(header_names, data_types): + if DataType(dtype) in [DataType.DATETIME, DataType.DATE, DataType.TIME]: + df_data_details[col] = df_data_details[col].astype(pd.StringDtype()) + if DataType(dtype) is not DataType.DATETIME: continue # Convert UTC time validate_datetime(df_data_details, col, False, False) - convert_csv_timezone(df_data_details, col) + # When show sample data on Process Config, it will show raw data of datetime value. + if is_convert_datetime: + convert_csv_timezone(df_data_details, col) + else: + df_data_details[col] = df_data_details[col].astype(pd.StringDtype()) df_data_details.dropna(subset=[col], inplace=True) # if not first_datetime_col_idx: @@ -514,18 +609,6 @@ def preview_csv_data( data_types, ) - # check to add generated datetime column - if current_process_id is not None: - # we check datetime column and add this datetime column into details - df_data_details, org_headers, header_names, dupl_cols, data_types = add_generated_datetime_column( - current_process_id, - df_data_details, - org_headers, - header_names, - dupl_cols, - data_types, - ) - if DataType.DATETIME.value not in data_types and DATETIME_DUMMY not in df_data_details.columns: dummy_datetime_idx = 0 df_data_details = gen_dummy_datetime(df_data_details) @@ -539,6 +622,18 @@ def preview_csv_data( org_headers = re_order_items_by_datetime_idx(first_datetime_col_idx, org_headers) df_data_details = df_data_details[header_names] + # check to add generated datetime column + if current_process_id is not None: + # we check datetime column and add this datetime column into details + df_data_details, org_headers, header_names, dupl_cols, data_types = add_generated_datetime_column( + current_process_id, + df_data_details, + org_headers, + header_names, + dupl_cols, + data_types, + ) + same_values = check_same_values_in_df(df_data_details, header_names) if not return_df: @@ -561,6 +656,7 @@ def preview_csv_data( has_dupl_cols = True return { + 'directory': folder_url, 'file_name': csv_file, 'header': header_names, 'content': df_data_details, @@ -595,7 +691,7 @@ def preview_v2_data( sorted_files = get_sorted_files_by_size(folder_url) if not file_name else [file_name] encoding = None csv_file = '' - skip_head = 0 + skip_head = None skip_tail = 0 header_names = [] data_types = [] @@ -831,7 +927,14 @@ def gen_v2_history_sub_part_no_column(column_name): @log_execution_time() @memoize(is_save_file=False) -def gen_cols_with_types(cols, data_types, same_values, is_v2_history=False, column_raw_name=[]): +def gen_cols_with_types( + cols, + data_types, + same_values, + is_v2_history=False, + column_raw_name=[], + dict_column_name_and_unit={}, +): ja_locale = False cols_with_types = [] with suppress(Exception): @@ -839,7 +942,14 @@ def gen_cols_with_types(cols, data_types, same_values, is_v2_history=False, colu has_is_get_date_col = False if not column_raw_name: column_raw_name = cols - for col_name, col_raw_name, data_type, same_value in zip(cols, column_raw_name, data_types, same_values): + cols_raw_name_added_suffix, _ = gen_colsname_for_duplicated(column_raw_name.copy()) + for ( + col_name, + col_raw_name, + col_raw_name_added_suffix, + data_type, + same_value, + ) in zip(cols, column_raw_name, cols_raw_name_added_suffix, data_types, same_values): is_date = False if has_is_get_date_col else DataType(data_type) is DataType.DATETIME if is_date: has_is_get_date_col = True @@ -847,26 +957,36 @@ def gen_cols_with_types(cols, data_types, same_values, is_v2_history=False, colu is_big_int = DataType(data_type) is DataType.BIG_INT # add to output if col_name: + mapped_col_name = normalize_str(col_raw_name_added_suffix) + column_name_extracted, unit = ColumnRawNameRule.extract_data(mapped_col_name) if ja_locale: - system_name = to_romaji(col_name) if not is_v2_history else gen_v2_history_sub_part_no_column(col_name) + system_name = ( + to_romaji(column_name_extracted) + if not is_v2_history + else gen_v2_history_sub_part_no_column(column_name_extracted) + ) else: system_name = ( - remove_non_ascii_chars(col_name) + remove_non_ascii_chars(column_name_extracted) if not is_v2_history - else gen_v2_history_sub_part_no_column(col_name) + else gen_v2_history_sub_part_no_column(column_name_extracted) ) + unit = dict_column_name_and_unit.get(col_raw_name, unit) cols_with_types.append( { 'column_name': col_name, 'data_type': DataType(data_type).name if not is_big_int else DataType.TEXT.name, 'name_en': system_name, # this is system_name - 'romaji': to_romaji(col_name), + 'romaji': to_romaji(column_name_extracted), 'is_get_date': is_date, 'check_same_value': same_value, 'is_big_int': is_big_int, - 'name_jp': col_name if ja_locale else '', - 'name_local': col_name if not ja_locale else '', + 'name_jp': column_name_extracted if ja_locale else '', + 'name_local': column_name_extracted if not ja_locale else '', 'column_raw_name': col_raw_name, + 'unit': unit, + 'is_checked': not same_value.get('is_null'), + 'is_show': True, }, ) @@ -900,7 +1020,10 @@ def convert_utc_df(df_rows, cols, data_types, data_source, table_name): @log_execution_time() def transform_df_to_rows(cols, df_rows, limit): df_rows.columns = normalize_list(df_rows.columns) - return [dict(zip(cols, vals)) for vals in df_rows[0:limit][cols].to_records(index=False).tolist()] + normalized_cols = normalize_list(cols) + return [ + dict(zip(normalized_cols, vals)) for vals in df_rows[0:limit][normalized_cols].to_records(index=False).tolist() + ] @log_execution_time() @@ -934,6 +1057,7 @@ def gen_v2_columns_with_types(v2_datasrc): limit=5, return_df=True, process_name=v2_csv_detail.get('process_name'), + file_name=v2_csv_detail.get('directory') if v2_csv_detail.get('is_file_path') else None, ) for i, column in enumerate(v2_data_preview.get('header')): data_type = int(v2_data_preview.get('dataType')[i]) @@ -1044,3 +1168,47 @@ def add_generated_datetime_column( # TODO: add sample data for datetime column df_data_details[column_name] = None return df_data_details, org_headers, header_names, dupl_cols, data_types + + +@log_execution_time() +def save_preview_data_file( + data_source_id: int, + data: dict, + table_name=None, + process_factid=None, +): + sample_data_file = gen_latest_record_result_file_path( + data_source_id, + table_name=table_name, + process_factid=process_factid, + ) + make_dir_from_file_path(sample_data_file) + with open(sample_data_file, 'w') as outfile: + json.dump(data, outfile) + + +def get_preview_data_files(data_source_id, table_name=None, process_factid=None): + folder_path = get_preview_data_file_folder(data_source_id) + if check_exist(folder_path): + _files = get_files(folder_path, extension=['csv', 'tsv', 'json']) + file_name = gen_latest_record_result_file_path( + data_source_id, + table_name=table_name, + process_factid=process_factid, + ) + if file_name in _files: + return file_name + + return None + + +def gen_latest_record_result_file_path(data_source_id, table_name=None, process_factid=None): + sample_data_path = get_preview_data_file_folder(data_source_id) + if table_name: + file_name = f'{data_source_id}_{table_name}.json' + elif process_factid: + file_name = f'{data_source_id}_{process_factid}.json' + else: + file_name = f'{data_source_id}.json' + sample_data_file = os.path.join(sample_data_path, file_name) + return sample_data_file diff --git a/ap/api/setting_module/services/software_workshop_etl_services.py b/ap/api/setting_module/services/software_workshop_etl_services.py new file mode 100644 index 0000000..452a951 --- /dev/null +++ b/ap/api/setting_module/services/software_workshop_etl_services.py @@ -0,0 +1,332 @@ +from __future__ import annotations + +import pandas as pd +import sqlalchemy as sa + +from ap.common.common_utils import add_suffix_for_same_column_name +from ap.common.constants import UNDER_SCORE +from ap.common.logger import log_execution_time +from ap.common.memoize import memoize +from ap.common.pydn.dblib.db_proxy import DbProxy +from ap.setting_module.models import CfgDataSource, CfgProcess + +factory_table = sa.Table( + 'fctries', + sa.MetaData(), + sa.Column('fctry_id', sa.TEXT), + sa.Column('fctry_name', sa.TEXT), +) + +line_groups_table = sa.Table( + 'line_grps', + sa.MetaData(), + sa.Column('fctry_id', sa.TEXT), + sa.Column('line_grp_id', sa.TEXT), +) + +lines_table = sa.Table( + 'lines', + sa.MetaData(), + sa.Column('line_id', sa.TEXT), + sa.Column('line_name', sa.TEXT), + sa.Column('line_grp_id', sa.TEXT), +) + +equips_table = sa.Table( + 'equips', + sa.MetaData(), + sa.Column('equip_id', sa.TEXT), + sa.Column('line_id', sa.TEXT), +) + +child_equips_table = sa.Table( + 'child_equips', + sa.MetaData(), + sa.Column('child_equip_id', sa.TEXT), + sa.Column('child_equip_name', sa.TEXT), + sa.Column('equip_id', sa.TEXT), +) + +child_equip_meas_items_table = sa.Table( + 'child_equip_meas_items', + sa.MetaData(), + sa.Column('child_equip_id', sa.TEXT), + sa.Column('meas_item_code', sa.TEXT), + sa.Column('meas_item_name', sa.TEXT), +) + +quality_measurements_table = sa.Table( + 'quality_measurements', + sa.MetaData(), + sa.Column('quality_measurement_id', sa.BIGINT), + sa.Column('child_equip_id', sa.TEXT), + sa.Column('event_time', sa.TIMESTAMP), + sa.Column('part_no', sa.TEXT), + sa.Column('lot_no', sa.TEXT), + sa.Column('tray_no', sa.TEXT), + sa.Column('serial_no', sa.TEXT), +) + +measurements_table = sa.Table( + 'measurements', + sa.MetaData(), + sa.Column('quality_measurement_id', sa.BIGINT), + sa.Column('code', sa.TEXT), + sa.Column('unit', sa.TEXT), + sa.Column('value', sa.REAL), +) + +string_measurements_table = sa.Table( + 'string_measurements', + sa.MetaData(), + sa.Column('quality_measurement_id', sa.BIGINT), + sa.Column('code', sa.TEXT), + sa.Column('unit', sa.TEXT), + sa.Column('value', sa.TEXT), +) + + +def get_processes_stmt(limit: int | None = None): + join_master = ( + sa.join( + left=child_equips_table, + right=equips_table, + onclause=equips_table.c.equip_id == child_equips_table.c.equip_id, + ) + .join( + right=lines_table, + onclause=lines_table.c.line_id == equips_table.c.line_id, + ) + .join( + right=line_groups_table, + onclause=line_groups_table.c.line_grp_id == lines_table.c.line_grp_id, + ) + .join( + right=factory_table, + onclause=factory_table.c.fctry_id == line_groups_table.c.fctry_id, + ) + ) + + stmt = ( + sa.select( + [ + sa.func.concat( + factory_table.c.fctry_name, + UNDER_SCORE, + lines_table.c.line_name, + UNDER_SCORE, + child_equips_table.c.child_equip_name, + ).label(CfgProcess.process_factname.name), + child_equips_table.c.child_equip_id, + ], + ) + .select_from(join_master) + .order_by(child_equips_table.c.child_equip_id) + .distinct(child_equips_table.c.child_equip_id) + ) + + if limit is not None: + stmt = stmt.limit(limit) + + return stmt + + +def get_code_name_mapping_stmt(process_factid: str): + stmt = ( + sa.select( + [ + child_equip_meas_items_table.c.meas_item_code, + child_equip_meas_items_table.c.meas_item_name, + ], + ) + .where(child_equip_meas_items_table.c.child_equip_id == process_factid) + .order_by(child_equip_meas_items_table.c.meas_item_code) + ) + + return stmt + + +def get_master_data_stmt( + process_factid: str | None = None, + start_date: str | None = None, + end_date: str | None = None, + limit: int | None = 2000, +): + join_master = ( + sa.join( + left=quality_measurements_table, + right=child_equips_table, + onclause=child_equips_table.c.child_equip_id == quality_measurements_table.c.child_equip_id, + ) + .join( + right=equips_table, + onclause=equips_table.c.equip_id == child_equips_table.c.equip_id, + ) + .join( + right=lines_table, + onclause=lines_table.c.line_id == equips_table.c.line_id, + ) + .join( + right=line_groups_table, + onclause=line_groups_table.c.line_grp_id == lines_table.c.line_grp_id, + ) + .join( + right=factory_table, + onclause=factory_table.c.fctry_id == line_groups_table.c.fctry_id, + ) + ) + + conditions = [] + if process_factid is not None: + conditions.append(quality_measurements_table.c.child_equip_id == process_factid) + if start_date is not None: + conditions.append(quality_measurements_table.c.event_time >= start_date) + if end_date is not None: + conditions.append(quality_measurements_table.c.event_time < end_date) + + stmt = sa.select( + [ + quality_measurements_table.c.quality_measurement_id, + quality_measurements_table.c.event_time, + quality_measurements_table.c.part_no, + quality_measurements_table.c.lot_no, + quality_measurements_table.c.tray_no, + quality_measurements_table.c.serial_no, + factory_table.c.fctry_id, + factory_table.c.fctry_name, + lines_table.c.line_id, + lines_table.c.line_name, + child_equips_table.c.child_equip_id, + child_equips_table.c.child_equip_name, + ], + ).select_from(join_master) + + if conditions: + stmt = stmt.where(sa.and_(*conditions)) + + if limit is not None: + stmt = stmt.limit(limit) + + return stmt + + +def get_transaction_data_stmt( + process_factid: str | None = None, + start_date: str | None = None, + end_date: str | None = None, + limit: int | None = None, + sort_by_time: bool = True, +): + cte = get_master_data_stmt(process_factid, start_date, end_date, limit).cte('master_data') + + measurements_stmt = sa.select( + [ + cte, + measurements_table.c.code, + measurements_table.c.unit, + # need to cast data to text in order to union + sa.cast(measurements_table.c.value, sa.sql.sqltypes.TEXT).label(measurements_table.c.value.name), + ], + ).select_from( + sa.join( + left=cte, + right=measurements_table, + onclause=cte.c.quality_measurement_id == measurements_table.c.quality_measurement_id, + ), + ) + + string_measurements_stmt = sa.select( + [ + cte, + string_measurements_table.c.code, + string_measurements_table.c.unit, + string_measurements_table.c.value, + ], + ).select_from( + sa.join( + left=cte, + right=string_measurements_table, + onclause=cte.c.quality_measurement_id == string_measurements_table.c.quality_measurement_id, + ), + ) + + stmt = measurements_stmt.union_all(string_measurements_stmt) + if sort_by_time: + stmt = stmt.order_by(stmt.c.event_time) + + return stmt + + +@memoize(is_save_file=True) +def get_code_name_mapping(data_source_id: int, process_factid: str) -> dict[str, str]: + data_source = CfgDataSource.query.get(data_source_id) + with DbProxy(data_source) as db_instance: + stmt = get_code_name_mapping_stmt(process_factid) + sql, params = db_instance.gen_sql_and_params(stmt) + cols, rows = db_instance.run_sql(sql, row_is_dict=False, params=params) + return dict(rows) + + +def transform_transaction_data_to_horizontal(software_workshop_vertical_df: pd.DataFrame) -> pd.DataFrame: + # all master columns in dataframe + master_columns = [ + factory_table.c.fctry_id.name, + factory_table.c.fctry_name.name, + lines_table.c.line_id.name, + lines_table.c.line_name.name, + child_equips_table.c.child_equip_id.name, + child_equips_table.c.child_equip_name.name, + ] + + # columns for getting unique records + index_columns = [ + child_equips_table.c.child_equip_id.name, + quality_measurements_table.c.event_time.name, + quality_measurements_table.c.serial_no.name, + quality_measurements_table.c.part_no.name, + ] + + # horizontal columns in vertical dataframe + horizontal_columns = [ + quality_measurements_table.c.lot_no.name, + quality_measurements_table.c.tray_no.name, + ] + + # all required columns from those columns above. We use this hack to preserve order + required_columns = list(dict.fromkeys([*master_columns, *index_columns, *horizontal_columns])) + + # columns used for pivoting + pivot_column = measurements_table.c.code.name + pivot_value = measurements_table.c.value.name + + df_pivot = ( + # only select required columns, ignore unneeded ones + software_workshop_vertical_df[[*index_columns, pivot_column, pivot_value]] + # drop duplicated columns, to make sure pivot can work properly + .drop_duplicates(subset=[*index_columns, pivot_column], keep='last') + .pivot(index=index_columns, columns=pivot_column, values=pivot_value) + .reset_index() + ) + + # merge to get master data + df_with_master = software_workshop_vertical_df[required_columns].drop_duplicates(subset=index_columns, keep='last') + df_horizontal = df_pivot.merge(right=df_with_master, on=index_columns) + + # sort vertical columns for better output, we don't want our data being shown as col_03 col_01 col_02 + sorted_vertical_columns = sorted(c for c in df_horizontal.columns if c not in required_columns) + df_horizontal = df_horizontal[[*required_columns, *sorted_vertical_columns]] + + return df_horizontal + + +@log_execution_time() +def transform_df_for_software_workshop(df: pd.DataFrame, data_source_id: int, process_factid: str) -> pd.DataFrame: + df = transform_transaction_data_to_horizontal(df) + code_name_mapping = get_code_name_mapping(data_source_id, process_factid) + code_name_mapping = add_suffix_for_same_column_name(code_name_mapping) + for code in code_name_mapping: + if code not in df: + df[code] = None + + df = df.rename(columns=code_name_mapping) + return df diff --git a/ap/api/setting_module/services/v2_etl_services.py b/ap/api/setting_module/services/v2_etl_services.py index 22005b2..cea2cf0 100644 --- a/ap/api/setting_module/services/v2_etl_services.py +++ b/ap/api/setting_module/services/v2_etl_services.py @@ -8,6 +8,7 @@ import pandas as pd from pandas import DataFrame, Series from pandas.errors import ParserError +from sqlalchemy.orm import scoped_session from ap.common.common_utils import open_with_zip from ap.common.constants import ( @@ -43,6 +44,7 @@ CfgProcessUnusedColumn, crud_config, make_session, + use_meta_session, ) from ap.setting_module.schemas import ProcessColumnSchema @@ -102,17 +104,19 @@ def add_remaining_v2_columns(df, process_id): @log_execution_time() -def get_datasource_type(process_id): - proc_cfg: CfgProcess = CfgProcess.query.get(process_id) - data_src: CfgDataSourceCSV = CfgDataSourceCSV.query.get(proc_cfg.data_source_id) +def get_datasource_type(process_id, meta_session: scoped_session = None): + proc_cfg: CfgProcess = (meta_session.query(CfgProcess) if meta_session else CfgProcess.query).get(process_id) + data_src: CfgDataSourceCSV = (meta_session.query(CfgDataSourceCSV) if meta_session else CfgDataSourceCSV.query).get( + proc_cfg.data_source_id, + ) if data_src: return data_src.cfg_data_source.type return None @log_execution_time() -def is_v2_data_source(ds_type=None, process_id=None): - ds_type = ds_type or get_datasource_type(process_id) +def is_v2_data_source(ds_type=None, process_id=None, meta_session: scoped_session = None): + ds_type = ds_type or get_datasource_type(process_id, meta_session=meta_session) if ds_type: return ds_type.lower() == DBType.V2.name.lower() return False @@ -369,23 +373,24 @@ def usecols_with_normalization(x): @log_execution_time() -def save_unused_columns(process_id, unused_columns): - is_v2 = is_v2_data_source(process_id=process_id) +@use_meta_session() +def save_unused_columns(process_id, unused_columns, meta_session: scoped_session = None): + is_v2 = is_v2_data_source(process_id=process_id, meta_session=meta_session) if not is_v2: return if unused_columns: unused_columns = [CfgProcessUnusedColumn(process_id=process_id, column_name=name) for name in unused_columns] - with make_session() as meta_session: - crud_config( - meta_session=meta_session, - data=unused_columns, - parent_key_names=CfgProcessUnusedColumn.process_id.key, - key_names=CfgProcessUnusedColumn.column_name.key, - model=CfgProcessUnusedColumn, - ) + crud_config( + meta_session=meta_session, + data=unused_columns, + parent_key_names=CfgProcessUnusedColumn.process_id.key, + key_names=CfgProcessUnusedColumn.column_name.key, + model=CfgProcessUnusedColumn, + autocommit=False, + ) else: - CfgProcessUnusedColumn.delete_all_columns_by_proc_id(process_id) + CfgProcessUnusedColumn.delete_all_columns_by_proc_id(process_id, meta_session=meta_session) @log_execution_time() diff --git a/ap/api/table_viewer/controllers.py b/ap/api/table_viewer/controllers.py index 29403c8..e45a351 100644 --- a/ap/api/table_viewer/controllers.py +++ b/ap/api/table_viewer/controllers.py @@ -9,6 +9,7 @@ from ap.common.constants import DBType from ap.common.pydn.dblib import mssqlserver, oracle from ap.common.pydn.dblib.db_proxy import DbProxy +from ap.common.services.csv_header_wrapr import add_suffix_if_duplicated from ap.common.services.http_content import json_dumps from ap.common.services.jp_to_romaji_utils import to_romaji from ap.common.services.sse import MessageAnnouncer @@ -110,20 +111,20 @@ def query_data(db_instance, table_name, sort_column, sort_order, limit): @MessageAnnouncer.notify_progress(50) def get_csv_data(csv_detail, sort_colum, sort_order, limit): - latest_file = get_latest_files(csv_detail.directory) + latest_file = [csv_detail.directory] if csv_detail.is_file_path else get_latest_files(csv_detail.directory) latest_file = latest_file[0:1][0] csv_delimiter = get_csv_delimiter(csv_detail.delimiter) - line_skip = '' if (csv_detail.skip_head == 0 and not csv_detail.dummy_header) else csv_detail.skip_head - + skip_head = csv_detail.skip_head # delimiter check _, encoding = detect_file_path_delimiter( latest_file, csv_delimiter, with_encoding=True, ) + # TODO: Should we use preview_csv_data for this instead? org_header, header_names, _, _, data_details, encoding, skip_tail, _ = get_csv_data_from_files( [latest_file], - line_skip=line_skip, + skip_head=skip_head, n_rows=csv_detail.n_rows, is_transpose=csv_detail.is_transpose, etl_func=csv_detail.etl_func, @@ -131,7 +132,9 @@ def get_csv_data(csv_detail, sort_colum, sort_order, limit): max_records=None, ) - df_data = pd.DataFrame(columns=org_header, data=data_details) + # display header names, add suffixes to duplicate header names (including dummy header case) + header_names, _ = add_suffix_if_duplicated(header_names) + df_data = pd.DataFrame(columns=header_names, data=data_details) if sort_colum: dict_column_name = dict(zip(org_header, header_names)) diff --git a/ap/api/trace_data/controllers.py b/ap/api/trace_data/controllers.py index 9bb9386..2669397 100644 --- a/ap/api/trace_data/controllers.py +++ b/ap/api/trace_data/controllers.py @@ -7,7 +7,9 @@ from ap.api.common.services.show_graph_database import get_config_data from ap.api.common.services.show_graph_jump_function import get_jump_emd_data from ap.api.trace_data.services.data_count import get_data_count_by_time_range -from ap.api.trace_data.services.time_series_chart import gen_graph_fpp +from ap.api.trace_data.services.time_series_chart import ( + gen_graph_fpp, +) from ap.common.constants import CfgConstantType, DataCountType, MaxGraphNumber from ap.common.logger import log_execution_time from ap.common.services.form_env import ( @@ -148,10 +150,14 @@ def get_data_count(): from_date = request_data.get('from') or None to_date = request_data.get('to') or None local_tz = request_data.get('timezone') or None + count_in_file = request_data.get('count_in_file', False) + data_count = {} min_val = 0 max_val = 0 if process_id: + start_date, end_date = None, None + if from_date and to_date: start_date = get_date_from_type(from_date, query_type, local_tz) end_date = get_date_from_type(to_date, query_type, local_tz, True) @@ -162,6 +168,7 @@ def get_data_count(): end_date, query_type, local_tz, + count_in_file=count_in_file, ) out_dict = { 'from': from_date, diff --git a/ap/api/trace_data/services/csv_export.py b/ap/api/trace_data/services/csv_export.py index 50e4f45..2e0f839 100644 --- a/ap/api/trace_data/services/csv_export.py +++ b/ap/api/trace_data/services/csv_export.py @@ -14,7 +14,7 @@ gen_graph_param, produce_cyclic_terms, ) -from ap.api.common.services.show_graph_services import get_data_from_db +from ap.api.common.services.show_graph_services import get_data_from_db, judge_data_conversion from ap.common.common_utils import DATE_FORMAT_STR, DATE_FORMAT_STR_CSV, gen_sql_label from ap.common.constants import ( CLIENT_TIMEZONE, @@ -137,6 +137,8 @@ def gen_df_export(graph_param, dic_param): # get data from database df, *_ = get_data_from_db(graph_param, dic_cat_filters) + # export original value of judge variable + df = judge_data_conversion(df, graph_param, revert=True) return df @@ -191,6 +193,31 @@ def to_csv( terms=None, emd_type=None, div_col=None, +): + df_csv = export_preprocessing( + df, + graph_param, + client_timezone=client_timezone, + output_col_ids=output_col_ids, + len_of_col_name=len_of_col_name, + terms=terms, + emd_type=emd_type, + div_col=div_col, + ) + + delimiter = delimiter or ',' + return df_csv.to_csv(output_path, sep=delimiter, index=False) + + +def export_preprocessing( + df: DataFrame, + graph_param: DicParam, + client_timezone=None, + output_col_ids=None, + len_of_col_name=None, + terms=None, + emd_type=None, + div_col=None, ): # rename new_headers = [] @@ -230,11 +257,11 @@ def to_csv( output_cols = df.columns.to_list() if div_col: output_cols = [div_col] + df.columns.to_list() - df_csv = df[output_cols] + df_output = df[output_cols] else: - df_csv = df[dic_rename] - df_csv.rename(columns=dic_rename, inplace=True) - df_csv.replace({np.nan: None}, inplace=True) + df_output = df[dic_rename] + df_output.rename(columns=dic_rename, inplace=True) + df_output.replace({np.nan: None}, inplace=True) # timezone if client_timezone: @@ -255,22 +282,19 @@ def to_csv( if start_proc_term_from: # add term datetime to df - gen_term_cols(df_csv, start_ct_col, start_proc_term_from, start_proc_term_to, terms) + gen_term_cols(df_output, start_ct_col, start_proc_term_from, start_proc_term_to, terms) # extend datetime columns get_dates.extend([start_proc_term_from, start_proc_term_to]) - for col in df_csv.columns: + for col in df_output.columns: if col not in get_dates: continue - # df_csv[col] = df_csv[col].apply(lambda v: convert_dt_str_to_timezone(client_timezone, v)) - df_csv[col] = ( - pd.to_datetime(df_csv[col], format=DATE_FORMAT_STR, utc=True) + df_output[col] = ( + pd.to_datetime(df_output[col], format=DATE_FORMAT_STR, utc=True) .dt.tz_convert(client_timezone) .dt.strftime(DATE_FORMAT_STR_CSV) ) - - delimiter = delimiter or ',' - return df_csv.to_csv(output_path, sep=delimiter, index=False) + return df_output def find_term(value, terms, is_from): diff --git a/ap/api/trace_data/services/data_count.py b/ap/api/trace_data/services/data_count.py index 20099ad..1c995d6 100644 --- a/ap/api/trace_data/services/data_count.py +++ b/ap/api/trace_data/services/data_count.py @@ -66,14 +66,14 @@ def gen_full_data_by_time(df, start_date, end_date, query_type): @log_execution_time() @memoize(cache_type=CacheType.TRANSACTION_DATA) -def get_data_count_by_time_range(proc_id, start_date, end_date, query_type, local_tz): +def get_data_count_by_time_range(proc_id, start_date, end_date, query_type, local_tz, count_in_file: bool): data = None min_val = None max_val = None with DbProxy(gen_data_source_of_universal_db(proc_id), True) as db_instance: trans_data = TransactionData(proc_id) - _, data_count = trans_data.select_data_count(db_instance, start_date, end_date) + _, data_count = trans_data.select_data_count(db_instance, start_date, end_date, count_in_file) # data_count = ProcDataCount.get_by_proc_id(proc_id, start_date, end_date) # data_count = [[r.datetime, r.count] for r in data_count] diff --git a/ap/common/assets/assets.json b/ap/common/assets/assets.json index 751d622..599c209 100644 --- a/ap/common/assets/assets.json +++ b/ap/common/assets/assets.json @@ -1,251 +1,226 @@ -{ - "all": { - "js": [ - "common/js/libs/jquery.js", - "common/js/libs/jquery-ui.min.js", - "common/js/libs/datepicker.js", - "modules/popper/umd/popper.min.js", - "common/js/libs/bootstrap.min.js", - "common/js/libs/all.min.js", - "common/js/libs/jquery.ui.datepicker-ja.min.js", - "common/js/libs/moment-with-locales.js", - "common/js/libs/loadingoverlay.min.js", - "common/js/libs/lodash.min.js", - "common/js/libs/clipboard.min.js", - "common/js/config_data_interface.js", - "common/js/libs/bootstrap-table.min.js", - "common/js/libs/bootstrap-table-filter-control.min.js", - "common/js/libs/bootstrap-table-locale-all.min.js", - "common/js/libs/html2canvas.min.js", - "common/js/modern_screenshot.js", - "common/js/take_screenshot.js", - "common/js/libs/plotly.min.js", - "common/js/libs/toastr.min.js", - "modules/js-datatables/lib/jquery.dataTables.min.js", - "common/js/libs/dataTables.fixedHeader.min.js", - "common/js/libs/select2.min.js", - "common/js/terms_of_use.js", - "common/js/divide_by_calendar.js", - "common/js/jump_function.js", - "common/js/base.js", - "common/js/utils.js", - "common/js/app_version_handler.js", - "common/js/summary_table.js", - "common/js/auto-update-common.js", - "common/js/data-finder.js", - "common/js/column_ordering.js", - "common/js/components.js", - "common/js/data_point_info_table.js", - "common/js/save_load_user_input.js", - "common/js/validation.js", - "common/js/clipboard_utils.js", - "common/js/libs/dragndrop.js", - "common/js/libs/d3-format.js", - "common/js/dn-custom-select.js", - "common/js/libs/popper.min.js", - "common/js/libs/shepherd.min.js", - "common/js/ap_tour.js", - "common/js/graph_nav.js", - "modules/jquery-ui-timepicker-addon/jquery-ui-timepicker-addon.min.js", - "modules/jquery-ui-timepicker-addon/i18n/jquery-ui-timepicker-ja.js", - "modules/date-range-picker/daterangepicker.js", - "modules/date-range-picker/daterangepicker-utils.js", - "common/js/libs/js.cookie.min.js", - "common/js/libs/pagination.min.js", - "common/js/datetime_label_format.js" - ], - "css": [ - "common/custom-jquery/jquery-ui.css", - "common/css/select2.min.css", - "common/css/bootstrap.min.css", - "common/css/all.min.css", - "common/css/main.css", - "common/css/components.css", - "common/css/dragndrop.css", - "common/css/bootstrap-table.min.css", - "common/css/toastr.css", - "common/css/data-finder.css", - "modules/js-datatables/lib/jquery.dataTables.min.css", - "common/css/user-setting-table.css", - "common/css/shepherd.css", - "modules/jquery-ui-timepicker-addon/jquery-ui-timepicker-addon.css", - "modules/date-range-picker/daterangepicker.css", - "common/css/pagination.css", - "common/css/graph_nav.css", - "common/css/jump_function.css", - "tile_interface/css/tile_interface.css" - ] - }, - "fpp": { - "js": [ - "common/js/libs/Chart.min.js", - "common/js/libs/chartjs-adapter-moment.min.js", - "common/js/libs/chartjs-plugin-annotation-latest.min.js", - "trace_data/js/trace_data_time_series.js", - "trace_data/js/trace_data_histogram.js", - "trace_data/js/trace_data_step_bar_chart.js", - "trace_data/js/trace_data_summary_table.js", - "trace_data/js/trace_data_cross_hair.js", - "trace_data/js/trace_data_categorical_table.js", - "trace_data/js/trace_data_scatter_plot.js", - "trace_data/js/trace_data_whisker_plot.js", - "common/js/cat_facet_label_filter_modal.js", - "trace_data/js/trace_data.js", - "trace_data/js/trace_data_histogram_with_kde.js" - ], - "css": [ - "trace_data/css/trace_data.css" - ] - }, - "stp": { - "js": [ - "categorical_plot/js/categorical_histogram_with_density_curve.js", - "categorical_plot/js/categorical_plot_utils.js", - "categorical_plot/js/categorical_plot.js", - "common/js/cat_facet_label_filter_modal.js" - ], - "css": [ - "categorical_plot/css/categorical_plot.css" - ] - }, - "rlp": { - "js": [ - "ridgeline_plot/js/rlp_template.js", - "ridgeline_plot/js/ridgeline_plot_utils.js", - "ridgeline_plot/js/ridgeline_plot.js", - "common/js/cat_facet_label_filter_modal.js" - ], - "css": [ - "ridgeline_plot/css/ridgeline.css" - ] - }, - "chm": { - "js": [ - "calendar_heatmap/js/calendar_heatmap.js", - "calendar_heatmap/js/calendar_heatmap_plotly.js", - "common/js/cat_facet_label_filter_modal.js" - ], - "css": [ - "calendar_heatmap/css/calendar_heatmap.css" - ] - }, - "msp": { - "js": [ - "multiple_scatter_plot/js/multiple_scatter_histogram.js", - "multiple_scatter_plot/js/multiple_scatter_contour.js", - "multiple_scatter_plot/js/multiple_scatter_plot.js", - "multiple_scatter_plot/js/heatmap_plot.js", - "common/js/cat_facet_label_filter_modal.js" - ], - "css": [ - "multiple_scatter_plot/css/multiple_scatter_plot.css" - ] - }, - "scp": { - "js": [ - "common/js/libs/Chart.bundle.min.js", - "scatter_plot/js/scatter_chart.js", - "scatter_plot/js/scatter_plot.js", - "scatter_plot/js/scp_heatmap_plot.js", - "scatter_plot/js/scp_violin_plot.js", - "common/js/cat_facet_label_filter_modal.js" - ], - "css": [ - "scatter_plot/css/scatter_plot.css" - ] - }, - "hmp": { - "js": [ - "common/js/libs/Chart.bundle.min.js", - "heatmap/js/heatmap_main.js", - "heatmap/js/heatmap_plot.js", - "common/js/cat_facet_label_filter_modal.js" - ], - "css": [ - "heatmap/css/heatmap.css" - ] - }, - "pcp": { - "js": [ - "common/js/libs/Chart.bundle.min.js", - "common/js/libs/fSelect.js", - "parallel_plot/js/parallel_properties.js", - "parallel_plot/js/parallel_utils.js", - "parallel_plot/js/parallel_plot.js", - "common/js/cat_facet_label_filter_modal.js" - ], - "css": [ - "common/css/fSelect.css", - "parallel_plot/css/parallel_plot.css" - ] - }, - "skd": { - "js": [ - "sankey_plot/js/sankey_plot.js", - "sankey_plot/js/sankey_scp.js", - "common/js/cat_facet_label_filter_modal.js" - ], - "css": [ - "sankey_plot/css/sankey_plot.css" - ] - }, - "cog": { - "js": [ - "modules/sigmajs/build/sigma.min.js", - "modules/sigmajs/build/plugins/sigma.renderers.edgeLabels.min.js", - "modules/sigmajs/build/plugins/sigma.plugins.dragNodes.min.js", - "modules/sigmajs/build/plugins/sigma.layout.forceAtlas2.min.js", - "modules/sigmajs/build/plugins/sigma.plugins.animate.min.js", - "modules/sigmajs/build/plugins/sigma.layout.noverlap.min.js", - "co_occurrence/js/pareto_plot.js", - "co_occurrence/js/co_occurrence_csv.js" - ], - "css": [ - "co_occurrence/css/co_occurrence_csv.css" - ] - }, - "pca": { - "js": [ - "common/js/libs/jquery.dataTables.min.js", - "common/js/libs/dataTables.bootstrap4.min.js", - "common/js/libs/dom-text.js", - "analyze/js/pca_toastr.js", - "analyze/js/generateJson.js", - "analyze/js/hotelling_common.js", - "analyze/js/hotelling_timeseries.js", - "analyze/js/hotelling_scatters.js", - "analyze/js/hotelling_biplot.js", - "analyze/js/hotelling_q_contribution.js", - "analyze/js/hotelling_t2_contribution.js", - "analyze/js/pca.js", - "common/js/cat_facet_label_filter_modal.js" - ], - "css": [ - "modules/js-datatables/lib/jquery.dataTables.min.css", - "analyze/css/anomaly_detection.css" - ] - }, - "agp": { - "js": [ - "aggregate_plot/js/aggregation_chart.js", - "aggregate_plot/js/aggregate_plot.js", - "common/js/cat_facet_label_filter_modal.js" - ], - "css": [ - "aggregate_plot/css/aggregate_plot.css" - ] - }, - "gl": { - "js": [ - "analyze/js/graphical_lasso.js", - "common/js/libs/sigma.min.js", - "common/js/libs/sigma.plugins.dragNodes.min.js", - "common/js/libs/sigma.renderers.edgeLabels.min.js", - "analyze/js/graphical_lasso_sigma.js", - "common/js/cat_facet_label_filter_modal.js" - ], - "css": [ - "analyze/css/graphical_lasso.css" - ] - } -} +{ + "all": { + "js": [ + "common/js/libs/jquery.js", + "common/js/libs/jquery-ui.min.js", + "common/js/libs/datepicker.js", + "modules/popper/umd/popper.min.js", + "common/js/libs/bootstrap.min.js", + "common/js/libs/all.min.js", + "common/js/libs/jquery.ui.datepicker-ja.min.js", + "common/js/libs/moment-with-locales.js", + "common/js/libs/loadingoverlay.min.js", + "common/js/libs/lodash.min.js", + "common/js/libs/clipboard.min.js", + "common/js/config_data_interface.js", + "common/js/libs/bootstrap-table.min.js", + "common/js/libs/bootstrap-table-filter-control.min.js", + "common/js/libs/bootstrap-table-locale-all.min.js", + "common/js/libs/html2canvas.min.js", + "common/js/modern_screenshot.js", + "common/js/take_screenshot.js", + "common/js/libs/plotly.min.js", + "common/js/libs/toastr.min.js", + "modules/js-datatables/lib/jquery.dataTables.min.js", + "common/js/libs/dataTables.fixedHeader.min.js", + "common/js/libs/select2.min.js", + "common/js/terms_of_use.js", + "common/js/divide_by_calendar.js", + "common/js/jump_function.js", + "common/js/base.js", + "common/js/utils.js", + "common/js/app_version_handler.js", + "common/js/summary_table.js", + "common/js/auto-update-common.js", + "common/js/data-finder.js", + "common/js/column_ordering.js", + "common/js/components.js", + "common/js/data_point_info_table.js", + "common/js/save_load_user_input.js", + "common/js/validation.js", + "common/js/clipboard_utils.js", + "common/js/libs/dragndrop.js", + "common/js/libs/d3-format.js", + "common/js/dn-custom-select.js", + "common/js/libs/popper.min.js", + "common/js/libs/shepherd.min.js", + "common/js/ap_tour.js", + "common/js/graph_nav.js", + "modules/jquery-ui-timepicker-addon/jquery-ui-timepicker-addon.min.js", + "modules/jquery-ui-timepicker-addon/i18n/jquery-ui-timepicker-ja.js", + "modules/date-range-picker/daterangepicker.js", + "modules/date-range-picker/daterangepicker-utils.js", + "common/js/libs/js.cookie.min.js", + "common/js/libs/pagination.min.js", + "common/js/datetime_label_format.js" + ], + "css": [ + "common/custom-jquery/jquery-ui.css", + "common/css/select2.min.css", + "common/css/bootstrap.min.css", + "common/css/all.min.css", + "common/css/main.css", + "common/css/components.css", + "common/css/dragndrop.css", + "common/css/bootstrap-table.min.css", + "common/css/toastr.css", + "common/css/data-finder.css", + "modules/js-datatables/lib/jquery.dataTables.min.css", + "common/css/user-setting-table.css", + "common/css/shepherd.css", + "modules/jquery-ui-timepicker-addon/jquery-ui-timepicker-addon.css", + "modules/date-range-picker/daterangepicker.css", + "common/css/pagination.css", + "common/css/graph_nav.css", + "common/css/jump_function.css", + "tile_interface/css/tile_interface.css" + ] + }, + "fpp": { + "js": [ + "common/js/libs/Chart.min.js", + "common/js/libs/chartjs-adapter-moment.min.js", + "common/js/libs/chartjs-plugin-annotation-latest.min.js", + "trace_data/js/trace_data_time_series.js", + "trace_data/js/trace_data_histogram.js", + "trace_data/js/trace_data_step_bar_chart.js", + "trace_data/js/trace_data_summary_table.js", + "trace_data/js/trace_data_cross_hair.js", + "trace_data/js/trace_data_categorical_table.js", + "trace_data/js/trace_data_scatter_plot.js", + "trace_data/js/trace_data_whisker_plot.js", + "common/js/cat_facet_label_filter_modal.js", + "trace_data/js/trace_data.js", + "trace_data/js/trace_data_histogram_with_kde.js" + ], + "css": ["trace_data/css/trace_data.css"] + }, + "stp": { + "js": [ + "categorical_plot/js/categorical_histogram_with_density_curve.js", + "categorical_plot/js/categorical_plot_utils.js", + "categorical_plot/js/categorical_plot.js", + "common/js/cat_facet_label_filter_modal.js" + ], + "css": ["categorical_plot/css/categorical_plot.css"] + }, + "rlp": { + "js": [ + "ridgeline_plot/js/rlp_template.js", + "ridgeline_plot/js/ridgeline_plot_utils.js", + "ridgeline_plot/js/ridgeline_plot.js", + "common/js/cat_facet_label_filter_modal.js" + ], + "css": ["ridgeline_plot/css/ridgeline.css"] + }, + "chm": { + "js": [ + "calendar_heatmap/js/calendar_heatmap.js", + "calendar_heatmap/js/calendar_heatmap_plotly.js", + "common/js/cat_facet_label_filter_modal.js" + ], + "css": ["calendar_heatmap/css/calendar_heatmap.css"] + }, + "msp": { + "js": [ + "multiple_scatter_plot/js/multiple_scatter_histogram.js", + "multiple_scatter_plot/js/multiple_scatter_contour.js", + "multiple_scatter_plot/js/multiple_scatter_plot.js", + "multiple_scatter_plot/js/heatmap_plot.js", + "common/js/cat_facet_label_filter_modal.js" + ], + "css": ["multiple_scatter_plot/css/multiple_scatter_plot.css"] + }, + "scp": { + "js": [ + "common/js/libs/Chart.bundle.min.js", + "scatter_plot/js/scatter_chart.js", + "scatter_plot/js/scatter_plot.js", + "scatter_plot/js/scp_heatmap_plot.js", + "scatter_plot/js/scp_violin_plot.js", + "common/js/cat_facet_label_filter_modal.js" + ], + "css": ["scatter_plot/css/scatter_plot.css"] + }, + "hmp": { + "js": [ + "common/js/libs/Chart.bundle.min.js", + "heatmap/js/heatmap_main.js", + "heatmap/js/heatmap_plot.js", + "common/js/cat_facet_label_filter_modal.js" + ], + "css": ["heatmap/css/heatmap.css"] + }, + "pcp": { + "js": [ + "common/js/libs/Chart.bundle.min.js", + "common/js/libs/fSelect.js", + "parallel_plot/js/parallel_properties.js", + "parallel_plot/js/parallel_utils.js", + "parallel_plot/js/parallel_plot.js", + "common/js/cat_facet_label_filter_modal.js" + ], + "css": ["common/css/fSelect.css", "parallel_plot/css/parallel_plot.css"] + }, + "skd": { + "js": [ + "sankey_plot/js/sankey_plot.js", + "sankey_plot/js/sankey_scp.js", + "common/js/cat_facet_label_filter_modal.js" + ], + "css": ["sankey_plot/css/sankey_plot.css"] + }, + "cog": { + "js": [ + "modules/sigmajs/build/sigma.min.js", + "modules/sigmajs/build/plugins/sigma.renderers.edgeLabels.min.js", + "modules/sigmajs/build/plugins/sigma.plugins.dragNodes.min.js", + "modules/sigmajs/build/plugins/sigma.layout.forceAtlas2.min.js", + "modules/sigmajs/build/plugins/sigma.plugins.animate.min.js", + "modules/sigmajs/build/plugins/sigma.layout.noverlap.min.js", + "co_occurrence/js/pareto_plot.js", + "co_occurrence/js/co_occurrence_csv.js" + ], + "css": ["co_occurrence/css/co_occurrence_csv.css"] + }, + "pca": { + "js": [ + "common/js/libs/jquery.dataTables.min.js", + "common/js/libs/dataTables.bootstrap4.min.js", + "common/js/libs/dom-text.js", + "analyze/js/pca_toastr.js", + "analyze/js/generateJson.js", + "analyze/js/hotelling_common.js", + "analyze/js/hotelling_timeseries.js", + "analyze/js/hotelling_scatters.js", + "analyze/js/hotelling_biplot.js", + "analyze/js/hotelling_q_contribution.js", + "analyze/js/hotelling_t2_contribution.js", + "analyze/js/pca.js", + "common/js/cat_facet_label_filter_modal.js" + ], + "css": [ + "modules/js-datatables/lib/jquery.dataTables.min.css", + "analyze/css/anomaly_detection.css" + ] + }, + "agp": { + "js": [ + "aggregate_plot/js/aggregation_chart.js", + "aggregate_plot/js/aggregate_plot.js", + "common/js/cat_facet_label_filter_modal.js" + ], + "css": ["aggregate_plot/css/aggregate_plot.css"] + }, + "gl": { + "js": [ + "analyze/js/graphical_lasso.js", + "common/js/libs/sigma.min.js", + "common/js/libs/sigma.plugins.dragNodes.min.js", + "common/js/libs/sigma.renderers.edgeLabels.min.js", + "analyze/js/graphical_lasso_sigma.js", + "common/js/cat_facet_label_filter_modal.js" + ], + "css": ["analyze/css/graphical_lasso.css"] + } +} diff --git a/ap/common/common_utils.py b/ap/common/common_utils.py index 71e86f0..e9210f4 100644 --- a/ap/common/common_utils.py +++ b/ap/common/common_utils.py @@ -11,11 +11,12 @@ import zipfile from collections import OrderedDict from datetime import datetime, timedelta +from enum import Enum from io import IOBase from itertools import permutations from multiprocessing import Manager from pathlib import Path -from typing import IO, List, TextIO, Union +from typing import IO, Any, List, TextIO, Union import chardet import numpy as np @@ -26,7 +27,9 @@ from dateutil.relativedelta import relativedelta from flask import g from flask_assets import Bundle, Environment -from pandas import DataFrame +from pandas import DataFrame, Series +from pandas.io import parquet +from pyarrow import feather from ap.common.constants import ( ANALYSIS_INTERFACE_ENV, @@ -34,9 +37,13 @@ ENCODING_SHIFT_JIS, ENCODING_UTF_8, ENCODING_UTF_8_BOM, + INT64_MAX, + INT64_MIN, LANGUAGES, PROCESS_QUEUE, SAFARI_SUPPORT_VER, + SCP_HMP_X_AXIS, + SCP_HMP_Y_AXIS, SQL_COL_PREFIX, UNIVERSAL_DB_FILE, ZERO_FILL_PATTERN, @@ -45,6 +52,8 @@ AppEnv, CsvDelimiter, CSVExtTypes, + DataType, + FileExtension, FilterFunc, FlaskGKey, ListenNotifyType, @@ -76,6 +85,18 @@ def get_current_timestamp(format_str=DATE_FORMAT_STR): return datetime.utcnow().strftime(format_str) +class PostgresFormatStrings(Enum): + DATE = '%Y-%m-%d' + TIME = '%H:%M:%S' + DATETIME = '%Y-%m-%d %H:%M:%S.%f' + + +class SQLiteFormatStrings(Enum): + DATE = '%Y-%m-%d' + TIME = '%H:%M:%S' + DATETIME = '%Y-%m-%d %H:%M:%S' + + def parse_int_value(value): """ Parse integral value from text or numeric data @@ -341,6 +362,21 @@ def add_years(time=datetime.utcnow(), years=0): return time + relativedelta(years=years) +def add_months(time=datetime.utcnow(), months=0): + """add months + + Keyword Arguments: + time {[type]} -- [description] (default: {datetime.now()}) + months {int} -- [description] (default: {0}) + + Returns: + [type] -- [description] + """ + if isinstance(time, str): + time = parser.parse(time) + return time + relativedelta(months=months) + + @log_execution_time() def get_files(directory, depth_from=1, depth_to=2, extension=[''], file_name_only=False): """get files in folder @@ -560,6 +596,16 @@ def get_data_path(abs=True, is_log=False): return resource_path(folder_name, level=AbsPath.SHOW) if abs else folder_name +def get_instance_path(abs=True): + """get data folder path + + Returns: + [type] -- [description] + """ + folder_name = 'instance' + return resource_path(folder_name, level=AbsPath.SHOW) if abs else folder_name + + def get_error_trace_path(abs=True): """get import folder path @@ -684,6 +730,19 @@ def get_etl_path(*sub_paths): return resource_path(data_folder, folder_name, *sub_paths, level=AbsPath.SHOW) +def get_backup_data_path(): + folder_name = 'backup_data' + data_folder = get_data_path() + return resource_path(data_folder, folder_name, level=AbsPath.SHOW) + + +def get_backup_data_folder(process_id): + folder = get_backup_data_path() + if not check_exist(folder): + os.makedirs(folder) + return os.path.join(folder, str(process_id)) + + # def df_chunks(df, size): # """Yield n-sized chunks from dataframe.""" # if df.columns.size == 0: @@ -717,9 +776,7 @@ def get_base_dir(path, is_file=True): def make_dir(dir_path): - if not os.path.exists(dir_path): - os.makedirs(dir_path) - + os.makedirs(dir_path, exist_ok=True) return True @@ -761,6 +818,43 @@ def set_sqlite_params(conn): cursor.close() +# get x_y info for scp and heatmap page +def get_x_y_info(array_formval, dic_param_common): + scatter_xy_ids = [] + scatter_proc_ids = [] + scatter_xy_names = [] + + x_axis = dic_param_common.get(SCP_HMP_X_AXIS) + y_axis = dic_param_common.get(SCP_HMP_Y_AXIS) + + # if no x_axis or y_axis in payload, no switch XY (may not have this case) + if not x_axis or not y_axis: + for proc in array_formval: + scatter_proc_ids.append(proc.proc_id) + scatter_xy_ids = scatter_xy_ids + proc.col_ids + scatter_xy_names = scatter_xy_names + proc.col_names + else: + x_proc, x_column_id = map(int, x_axis.split('-')) + y_proc, y_column_id = map(int, y_axis.split('-')) + + scatter_proc_ids += [x_proc, y_proc] + scatter_xy_ids += [x_column_id, y_column_id] + + # get x_y name based on proc_id and column_id in dict_array + def get_name(dict_array, find_proc_id, find_column_id): + for proc in dict_array: + if proc.proc_id == find_proc_id: + index = proc.col_ids.index(find_column_id) + return proc.col_names[index] + + x_name = get_name(array_formval, x_proc, x_column_id) + y_name = get_name(array_formval, y_proc, y_column_id) + + scatter_xy_names += [x_name, y_name] + + return scatter_xy_ids, scatter_xy_names, scatter_proc_ids + + def gen_sql_label(*args): return SQL_COL_PREFIX + SQL_COL_PREFIX.join([str(name).strip(SQL_COL_PREFIX) for name in args if name is not None]) @@ -981,6 +1075,56 @@ def write_to_pickle(data, file): return file +def read_feather_file(file): + # df = pd.read_feather(file) + df = feather.read_feather(file) + return df + + +def read_parquet_file(file): + df = parquet.read_parquet(file) + return df + + +def write_feather_file(df: DataFrame, file): + make_dir_from_file_path(file) + # df.reset_index(drop=True, inplace=True) + # df.to_feather(file, compression='lz4') + # Use LZ4 explicitly + if len(file) > 255: + file = f'{file[:250]}.{FileExtension.Feather.value}' + + try: + feather.write_feather(df.reset_index(drop=True), file, compression='lz4') + except Exception as e: + print(str(e)) + for col in df.columns: + if df[col].dtype.name in ('object', 'category'): + df[col] = np.where(pd.isnull(df[col]), None, df[col].astype(str)) + # df[col] = df[col].astype('category') # error in some cases + feather.write_feather(df.reset_index(drop=True), file, compression='lz4') + + return file + + +def write_parquet_file(df: DataFrame, file): + make_dir_from_file_path(file) + if len(file) > 255: + file = f'{file[:250]}.{FileExtension.Feather.value}' + + try: + parquet.to_parquet(df.reset_index(drop=True), file, compression='gzip') + except Exception as e: + print(str(e)) + for col in df.columns: + if df[col].dtype.name in ('object', 'category'): + df[col] = np.where(pd.isnull(df[col]), None, df[col].astype(str)) + # df[col] = df[col].astype('category') # error in some cases + parquet.to_parquet(df.reset_index(drop=True), file, compression='gzip') + + return file + + def get_debug_g_dict(): return g.setdefault(FlaskGKey.DEBUG_SHOW_GRAPH, {}) @@ -1323,3 +1467,95 @@ def get_type_all_columns(db_instance, table_name: str): types = df['type'].tolist() dict_name_type = dict(zip(names, types)) return dict_name_type + + +def get_month_diff(str_min_datetime, str_max_datetime): + min_datetime = parser.parse(str_min_datetime) + max_datetime = parser.parse(str_max_datetime) + diff = relativedelta(max_datetime, min_datetime) + return diff.years * 12 + diff.months + + +def is_boolean(data: Series): + return (data >= 0) & (data <= 1) + + +def is_int_64(data: Series): + return (data >= INT64_MIN) & (data <= INT64_MAX) + + +def convert_numeric_by_type(data: Series, provided_data_type): + s = data[data.notnull()] + if provided_data_type == DataType.BOOLEAN.name: + s = s[((np.mod(s, 1) == 0) & is_boolean(s))] + data = data.where(data.isin(s), np.nan) + elif provided_data_type in DataType.INTEGER.name: + s = s[((np.mod(s, 1) == 0) & is_int_64(s))] + data = data.where(data.isin(s), np.nan) + return data + + +def find_duplicate_values(key_value_dict: dict[Any, str]) -> dict[str, Any]: + """Find duplicate values in dictionary + + Args: + key_value_dict: dictionary with duplicate values + + Returns: + a dictionary with + + - key: duplicate value of input dictionary + + - value: list of keys that contain duplicate values + """ + + # find duplicate values + values = list(key_value_dict.values()) + duplicate_values = [value for value in values if values.count(value) > 1] + + # find keys belongs to duplicate values + duplicate_value_item = {} + for key, value in key_value_dict.items(): + if value in duplicate_values: + duplicate_value_item[value] = (duplicate_value_item.get(value) or []) + [key] + + # sort keys by alphabet + for key in duplicate_value_item.keys(): + duplicate_value_item[key].sort() + + return duplicate_value_item + + +def add_suffix_for_same_column_name(key_value_dict: dict[Any, str]): + """Add suffix for duplicate names in dictionary + + Args: + key_value_dict: dictionary with duplicate names + + Returns: + dictionary with unique names (added suffix for duplicate names) + """ + + output = copy.deepcopy(key_value_dict) + duplicate_value_item = find_duplicate_values(key_value_dict) + for duplicate_value, keys in duplicate_value_item.items(): + suffix_index = 1 + for key in keys[1:]: # skip first element in list + output[key] = f'{output[key]}_{suffix_index:02}' + suffix_index += 1 + + return output + + +def get_preview_data_file_folder(data_source_id): + folder = get_preview_data_path() + if not check_exist(folder): + os.makedirs(folder) + + return os.path.join(folder, str(data_source_id)) + + +def get_preview_data_path(): + folder_name = 'preview_data' + data_folder = get_instance_path() + return resource_path(data_folder, folder_name, level=AbsPath.SHOW) diff --git a/ap/common/constants.py b/ap/common/constants.py index a155641..129591f 100644 --- a/ap/common/constants.py +++ b/ap/common/constants.py @@ -17,10 +17,13 @@ VAR_Y = 'Y' MULTIPLE_VALUES_CONNECTOR = '|' DEFAULT_NONE_VALUE = pd.NA +HALF_WIDTH_SPACE = ' ' +UNIXEPOCH = 'unixepoch' SQL_COL_PREFIX = '__' SQL_IN_MAX = 900 SQL_LIMIT = 5_000_000 +DATABASE_LOGIN_TIMEOUT = 3 ACTUAL_RECORD_NUMBER = 'actual_record_number' ACTUAL_RECORD_NUMBER_TRAIN = 'actual_record_number_train' ACTUAL_RECORD_NUMBER_TEST = 'actual_record_number_test' @@ -78,6 +81,7 @@ DATA_NAME_V2_SUFFIX = '01' CONSTRAINT_RANGE = 'constraint_range' SELECTED = 'selected' +ONLY_EXPORT_DATA_SELECTED = 'only_export_data_selected' class ApLogLevel(Enum): @@ -114,6 +118,7 @@ class DBType(Enum): V2 = 'v2' V2_MULTI = 'v2_multi' V2_HISTORY = 'v2_history' + SOFTWARE_WORKSHOP = 'software_workshop' @classmethod def from_str(cls, s: str) -> Optional['DBType']: @@ -128,6 +133,7 @@ def is_db(self): DBType.SQLITE, DBType.ORACLE, DBType.MYSQL, + DBType.SOFTWARE_WORKSHOP, ] @@ -218,6 +224,10 @@ class ErrorMsg(Enum): EMD_TYPE = 'emdType' DUPLICATE_SERIAL_SHOW = 'duplicated_serial' DUPLICATED_SERIALS_COUNT = 'dup_check' +RECENT_TIME_INTERVAL = 'recentTimeInterval' +DIC_SCP = 'dic_scp' +IS_CLASSIF = 'is_classif' +ACTUAL = 'actual' UNLINKED_IDXS = 'unlinked_idxs' NONE_IDXS = 'none_idxs' @@ -371,6 +381,7 @@ class ErrorMsg(Enum): COL_TYPE = 'type' ORG_ARRAY_Y = 'org_array_y' CAT_ON_DEMAND = 'cat_on_demand' +UNIT = 'unit' # Cat Expansion CAT_EXP_BOX = 'catExpBox' @@ -420,6 +431,11 @@ class ErrorMsg(Enum): DATA_GROUP_TYPE = 'data_group_type' IS_SERIAL_NO = 'is_serial_no' IS_INT_CATEGORY = 'is_int_category' +IS_JUDGE = 'is_judge' + +# X-Y Axis for SCP and HMp +SCP_HMP_X_AXIS = 'SCP_HMP_X_AXIS' +SCP_HMP_Y_AXIS = 'SCP_HMP_Y_AXIS' class HMFunction(Enum): @@ -619,7 +635,7 @@ def __str__(self): UN_AVAILABLE = 'unavailable' ALL_TILES = 'all' TILES = 'tiles' -# UNDER_SCORE = '_' +UNDER_SCORE = '_' TITLE = 'title' HOVER = 'hover' DESCRIPTION = 'description' @@ -704,6 +720,7 @@ class DataImportErrorTypes(Enum): TABLE_NOT_FOUND = 2 EMPTY_DATA_FILE = 3 DB_LOCKED = 4 + DB_CONNECTION_FAILED = 5 UNKNOWN = 100 @@ -715,6 +732,7 @@ class DataImportErrorTypes(Enum): DataImportErrorTypes.TABLE_NOT_FOUND: 'The table could not be found.', DataImportErrorTypes.EMPTY_DATA_FILE: 'The data file is empty.', DataImportErrorTypes.DB_LOCKED: 'The database is locked and data cannot be written.', + DataImportErrorTypes.DB_CONNECTION_FAILED: 'Connection to database failed.', } ErrorMsgFromDB = { @@ -907,6 +925,14 @@ class EMDType(Enum): both = [False, True] +class FileExtension(Enum): + Feather = 'ftr' + Parquet = 'parquet' + Pickle = 'pkl' + Csv = 'csv' + Tsv = 'tsv' + + USE_CONTOUR = 'use_contour' USE_HEATMAP = 'use_heatmap' COL_ID = 'column_id' @@ -1065,7 +1091,6 @@ class DataGroupType(BaseEnum): # LINE_GROUP_NAME = 31 # PART_FULL = 32 # EQUIP_ID = 33 - # HORIZONTAL_DATA = 34 # Type for horizontal columns that are sensor columns # PART_LOG # FORGING_DATE = 35 @@ -1073,6 +1098,9 @@ class DataGroupType(BaseEnum): # PRODUCT_ID = 35 + HORIZONTAL_DATA = 67 + FileName = 97 + @classmethod def v2_pivottable_group(cls) -> list['DataGroupType']: return [ @@ -1402,6 +1430,25 @@ def v2_horizontal_group(cls) -> list['DataGroupType']: ZERO_FILL_PATTERN = r'^{\:(0)([<>]?)([1-9]\d*)d?\}$' # {:010}, {:010d} ZERO_FILL_PATTERN_2 = r'^{\:([1-9])([<>])(\d+)d?\}$' # {:1>10}, {:1>10}, {:1<10d} + +class MasterDBType(BaseEnum): + EFA = auto() + EFA_HISTORY = auto() + V2 = auto() + V2_MULTI = auto() + V2_HISTORY = auto() + OTHERS = auto() + V2_MULTI_HISTORY = auto() + + @classmethod + def is_v2_group(cls, master_type: str): + return master_type in [cls.V2.name, cls.V2_MULTI.name, cls.V2_HISTORY.name, cls.V2_MULTI_HISTORY.name] + + @classmethod + def is_efa_group(cls, master_type: str): + return master_type in [cls.EFA.name, cls.EFA_HISTORY.name] + + OSERR = {22: 'Access denied', 2: 'Folder not found', 20: 'Not a folder'} # Browser support @@ -1476,6 +1523,12 @@ class RawDataTypeDB(BaseEnum): # data type user select # CATEGORY_TEXT = 'T' CATEGORY = 'CATEGORY' # Rainbow treat category as integer + def __repr__(self) -> str: + return self.value + + def __str__(self): + return self.value + @staticmethod def is_integer_data_type(data_type_db_value: str): return data_type_db_value in ( @@ -1669,6 +1722,7 @@ class FunctionCastDataType(BaseEnum): END_DATE_ID = 'endDate' END_TIME_ID = 'endTime' + EXAMPLE_VALUE = 3 @@ -1716,20 +1770,22 @@ def __str__(self): # 1,2 is priority DEL_PROCESS = 1 - CSV_IMPORT = 2 - FACTORY_IMPORT = 3 - GEN_GLOBAL = 4 - # CLEAN_DATA = 5 - FACTORY_PAST_IMPORT = 6 - IDLE_MORNITORING = 7 - SHUTDOWN_APP = 8 - BACKUP_DATABASE = 9 - PROC_LINK_COUNT = 10 - ZIP_LOG = 11 - CLEAN_ZIP = 12 - RESTRUCTURE_INDEXES = 13 - CLEAN_EXPIRED_REQUEST = 14 - PROCESS_COMMUNICATE = 15 + USER_BACKUP_DATABASE = 2 + USER_RESTORE_DATABASE = 3 + CSV_IMPORT = 4 + FACTORY_IMPORT = 5 + GEN_GLOBAL = 6 + # CLEAN_DATA = 7 + FACTORY_PAST_IMPORT = 8 + IDLE_MORNITORING = 9 + SHUTDOWN_APP = 10 + BACKUP_DATABASE = 11 + PROC_LINK_COUNT = 12 + ZIP_LOG = 13 + CLEAN_ZIP = 14 + RESTRUCTURE_INDEXES = 15 + CLEAN_EXPIRED_REQUEST = 16 + PROCESS_COMMUNICATE = 17 SEQUENCE_CACHE = 1000 @@ -1767,7 +1823,8 @@ class DataColumnType(BaseEnum): PART_NAME = 24 PART_NO = 25 ST_NO = 26 - + JUDGE = 76 + BOOLEAN = 77 GENERATED = 99 GENERATED_EQUATION = 100 @@ -1801,6 +1858,7 @@ class ColumnDTypeToSQLiteDType(BaseEnum): EU_INTEGER_SEP = 'integer' K_SEP_NULL = 'null' BIG_INT = 'string' + BOOLEAN = 'boolean' # if nchar(header) > 90%: generate column name @@ -1831,3 +1889,24 @@ class DataRegisterStage(BaseEnum): # Limit range time to check new version LIMIT_CHECKING_NEWER_VERSION_TIME: int = 60 # unit: seconds + +DATE_TYPE_REGEX = ( + '^' + r'(?P\d{2}|\d{4})' + r'(?:[\-\.\s\/\\年]?(?P\d|0\d|1[0-2])[月]?)' + r'(?:[\-\.\s\/\\]?(?P\d|[0-2]\d|3[0-1])[日]?)?' + '$' +) +TIME_TYPE_REGEX = ( + '^' + r'(?P\d|[01]\d|2[0-3])' + r'(?:[:\-\.\s時]?(?P\d|[0-5]\d)[分]?)' + r'(?:[:\-\.\s]?(?P\d|[0-5]\d)[秒]?)?' + '$' +) + + +# Judge definition, show OK/NG in UI instead of raw value +class JudgeDefinition(BaseEnum): + OK = 1 + NG = 0 diff --git a/ap/common/datetime_format_utils.py b/ap/common/datetime_format_utils.py new file mode 100644 index 0000000..2d608bf --- /dev/null +++ b/ap/common/datetime_format_utils.py @@ -0,0 +1,71 @@ +class DateTimeFormatUtils(object): + datetime_format: str + date_format: str + time_format: str + + def __init__(self, dic: dict): + self.datetime_format = dic['datetime'] + self.date_format = dic['date'] + self.time_format = dic['time'] + + HOUR_FORMAT_CODES = ['%H', '%I'] + DATE_FORMAT_CODES = [ + '%a', + '%A', + '%w', + '%d', + '%b', + '%B', + '%m', + '%y', + '%Y', + '%z', + '%Z', + '%j', + '%U', + '%W', + '%c', + '%x', + '%G', + '%u', + '%V', + ] + + @staticmethod + def get_datetime_format(datetime_format_str: str): + format_dict = { + 'datetime': datetime_format_str if datetime_format_str is not None and datetime_format_str != '' else None, + 'date': None, + 'time': None, + } + + if format_dict['datetime'] is None: + return DateTimeFormatUtils(format_dict) + + def get_start_index_by_codes(format_codes): + indexes = [datetime_format_str.index(code) for code in format_codes if code in datetime_format_str] + return min(indexes) if indexes else None + + time_start_index = get_start_index_by_codes(DateTimeFormatUtils.HOUR_FORMAT_CODES) + date_start_index = get_start_index_by_codes(DateTimeFormatUtils.DATE_FORMAT_CODES) + + if time_start_index is not None and date_start_index is not None: + # These are valid indexes if and only if one of them is zero + if time_start_index == 0: + format_dict['time'] = datetime_format_str[:date_start_index].strip() + format_dict['date'] = datetime_format_str[date_start_index:].strip() + elif date_start_index == 0: + format_dict['time'] = datetime_format_str[time_start_index:].strip() + format_dict['date'] = datetime_format_str[:time_start_index].strip() + elif time_start_index is not None and date_start_index is None: + format_dict['time'] = datetime_format_str[time_start_index:] + elif time_start_index is None and date_start_index is not None: + format_dict['date'] = datetime_format_str[date_start_index:] + else: + DateTimeFormatUtils.notify_invalid_format() + + return DateTimeFormatUtils(format_dict) + + @staticmethod + def notify_invalid_format(): + raise Exception('Invalid datetime format!!!') diff --git a/ap/common/memoize.py b/ap/common/memoize.py index 11ed16c..4621cb8 100644 --- a/ap/common/memoize.py +++ b/ap/common/memoize.py @@ -135,7 +135,8 @@ def memoize2(*args, **kwargs): if check_exist(file_name): return read_pickle_file(file_name) else: - return cache[key]['value'] + # Must use deepcopy to avoid reference value will be overwritten later + return deepcopy(cache[key]['value']) result = fn(*args, **kwargs) @@ -149,10 +150,11 @@ def memoize2(*args, **kwargs): cache[key] = {'value': deepcopy(result), 'time': time.time()} # resize - while len(cache) > cache_max_size: - key, dic_val = cache.popitem(last=False) - if dic_val.get('file'): - delete_cache_file(key) + with lock: + while len(cache) > cache_max_size: + key, dic_val = cache.popitem(last=False) + if dic_val.get('file'): + delete_cache_file(key) return result diff --git a/ap/common/pydn/dblib/db_common.py b/ap/common/pydn/dblib/db_common.py index a6c334c..5e7c13c 100644 --- a/ap/common/pydn/dblib/db_common.py +++ b/ap/common/pydn/dblib/db_common.py @@ -17,6 +17,7 @@ class SqlComparisonOperator(Enum): LIKE = 'LIKE' BETWEEN = 'BETWEEN' IN = 'IN' # Ex: cls.Columns.status.name: [(SqlComparisonOperator.IN, tuple(job_statuses))] + NOT_IN = 'NOT IN' # Ex: cls.Columns.status.name: [(SqlComparisonOperator.NOT_IN, tuple(job_statuses))] # class AggregateFunction(Enum): diff --git a/ap/common/pydn/dblib/db_proxy.py b/ap/common/pydn/dblib/db_proxy.py index ee43eea..efc347a 100644 --- a/ap/common/pydn/dblib/db_proxy.py +++ b/ap/common/pydn/dblib/db_proxy.py @@ -48,19 +48,31 @@ def __init__( self.db_basic = CfgDataSource.query.get(data_src) self.db_detail = self.db_basic.db_detail + def check_latest_failed_connection(self): + last_failed_time = DbProxy.dic_last_connect_failed_time.get(self.db_basic.id) + if last_failed_time is not None and last_failed_time > add_seconds(seconds=-180): + raise Exception(MSG_DB_CON_FAILED) + + def add_latest_failed_connection(self): + DbProxy.dic_last_connect_failed_time[self.db_basic.id] = datetime.utcnow() + + def remove_latest_failed_connection(self): + DbProxy.dic_last_connect_failed_time.pop(self.db_basic.id, None) + def __enter__(self): if not self.force_connect: - last_failed_time = DbProxy.dic_last_connect_failed_time.get(self.db_basic.id) - if last_failed_time and last_failed_time > add_seconds(seconds=-180): - raise Exception(MSG_DB_CON_FAILED) + self.check_latest_failed_connection() self.db_instance = self._get_db_instance() conn = self.db_instance.connect() if conn in (None, False): - DbProxy.dic_last_connect_failed_time[self.db_basic.id] = datetime.utcnow() + self.add_latest_failed_connection() raise Exception(MSG_DB_CON_FAILED) + # connect successfully, we need reset failed connection + self.remove_latest_failed_connection() + if self.is_universal_db and self.isolation_level: set_sqlite_params(conn) @@ -102,6 +114,8 @@ def _get_db_instance(self): target_db_class = MySQL elif db_type == DBType.MSSQLSERVER.value.lower(): target_db_class = MSSQLServer + elif db_type == DBType.SOFTWARE_WORKSHOP.value.lower(): + target_db_class = PostgreSQL else: raise Exception(MSG_NOT_SUPPORT_DB) @@ -120,6 +134,12 @@ def _get_db_instance(self): return db_instance + @classmethod + def check_db_connection(cls, data_src, force: bool = False): + with cls(data_src, force_connect=force) as db_instance: + if not db_instance.is_connected: + raise Exception(MSG_DB_CON_FAILED) + def gen_data_source_of_universal_db(proc_id=None): """ diff --git a/ap/common/pydn/dblib/mssqlserver.py b/ap/common/pydn/dblib/mssqlserver.py index c72c217..3a01ab4 100644 --- a/ap/common/pydn/dblib/mssqlserver.py +++ b/ap/common/pydn/dblib/mssqlserver.py @@ -2,20 +2,22 @@ # -*- coding: utf-8 -*- # Author: Masato Yasuda (2018/01/04) +import threading import traceback from dateutil import parser from pymssql import connect as mssqlconnect from ap.common.common_utils import strip_all_quote +from ap.common.constants import DATABASE_LOGIN_TIMEOUT # import pyodbc class MSSQLServer: - def __init__(self, host, dbname, username, password): + def __init__(self, host, dbname, username, password, port=1433): self.host = host - self.port = 1433 + self.port = port self.dbname = dbname self.username = username self.password = password @@ -49,6 +51,25 @@ def dump(self): print('self.is_connected: ', self.is_connected) print('=======================') + def try_connect(self): + def try_connect_inner(): + self.connection = None + self.connection = mssqlconnect( + self.host, + self.username, + self.password, + self.dbname, + port=self.port, + login_timeout=DATABASE_LOGIN_TIMEOUT, + ) + + connection_thread = threading.Thread(target=try_connect_inner) + connection_thread.start() + connection_thread.join(DATABASE_LOGIN_TIMEOUT + 1) + + if self.connection is None: + raise TimeoutError('Could not connect to sql server') + def connect(self): # dsn = "Driver={{ODBC Driver 17 for SQL Server}};Server={0:s};".format(self.host) # dsn += "Database={0:s};".format(self.dbname) @@ -59,14 +80,7 @@ def connect(self): # dsn += ';Trusted_Connection=No;' try: # self.connection = pyodbc.connect(dsn) - self.connection = mssqlconnect( - self.host, - self.username, - self.password, - self.dbname, - port=self.port, - login_timeout=3, - ) + self.try_connect() # if alredy use default schema , set to None to avoid replace schema self.is_connected = True diff --git a/ap/common/pydn/dblib/mysql.py b/ap/common/pydn/dblib/mysql.py index 01e948d..7f39caf 100644 --- a/ap/common/pydn/dblib/mysql.py +++ b/ap/common/pydn/dblib/mysql.py @@ -214,13 +214,13 @@ def run_sql(self, sql, row_is_dict=True): cur.close() return cols, rows - def fetch_many(self, sql, size=10_000): + def fetch_many(self, sql, size=10_000, params=None): if not self._check_connection(): return False cur = self.connection.cursor() sql = sql.replace('"', '`') - cur.execute(sql) + cur.execute(sql, params) cols = [column[0] for column in cur.description] yield cols while True: diff --git a/ap/common/pydn/dblib/oracle.py b/ap/common/pydn/dblib/oracle.py index 6131c52..7c260c4 100644 --- a/ap/common/pydn/dblib/oracle.py +++ b/ap/common/pydn/dblib/oracle.py @@ -233,14 +233,15 @@ def run_sql(self, sql, row_is_dict=True): cursor.close() return cols, rows - def fetch_many(self, sql, size=10_000): + def fetch_many(self, sql, size=10_000, params=None): if not self._check_connection(): return False cur = self._create_cursor_with_date_time_format() sql = Oracle.convert_sql(sql) - cursor = cur.execute(sql) + cursor = cur.execute(sql, **params) if params is not None else cur.execute(sql) + cols = [column[0] for column in cursor.description] yield cols while True: diff --git a/ap/common/pydn/dblib/postgresql.py b/ap/common/pydn/dblib/postgresql.py index 858c700..d0e4b46 100644 --- a/ap/common/pydn/dblib/postgresql.py +++ b/ap/common/pydn/dblib/postgresql.py @@ -7,8 +7,11 @@ import psycopg2 import psycopg2.extras +from sqlalchemy.dialects import postgresql +from sqlalchemy.sql import Select from ap.common.common_utils import strip_all_quote +from ap.common.logger import log_execution_time logger = logging.getLogger(__name__) @@ -238,7 +241,8 @@ def insert_table_records(self, tblname, names, values, add_comma_to_value=True): # colsとdict形式のrowsを返す # cols, rows = db1.run_sql("select * from tbl01") # という形で呼び出す - def run_sql(self, sql, row_is_dict=True): + @log_execution_time('POSTGRES') + def run_sql(self, sql, row_is_dict=True, params=None): if not self._check_connection(): return False cur = self.connection.cursor() @@ -246,7 +250,7 @@ def run_sql(self, sql, row_is_dict=True): # how-do-i-get-a-list-of-column-names-from-a-psycopg2-cursor # カラム名がRenameされた場合も対応出来る形に処理を変更 print(sql) - cur.execute(sql) + cur.execute(sql, params) # cursor.descriptionはcolumnの配列 # そこから配列名(column[0])を取り出して配列columnsに代入 cols = [column[0] for column in cur.description] @@ -258,12 +262,12 @@ def run_sql(self, sql, row_is_dict=True): cur.close() return cols, rows - def fetch_many(self, sql, size=10_000): + def fetch_many(self, sql, size=10_000, params=None): if not self._check_connection(): return False cur = self.connection.cursor() - cur.execute(sql) + cur.execute(sql, params) cols = [column[0] for column in cur.description] yield cols while True: @@ -317,3 +321,8 @@ def is_timezone_hold_column(self, tbl, col): return True return False + + @staticmethod + def gen_sql_and_params(stmt: Select) -> tuple[str, dict[str, str]]: + compiled_stmt = stmt.compile(dialect=postgresql.dialect()) + return compiled_stmt.string, compiled_stmt.params diff --git a/ap/common/pydn/dblib/sqlite.py b/ap/common/pydn/dblib/sqlite.py index 827cd48..2f86080 100644 --- a/ap/common/pydn/dblib/sqlite.py +++ b/ap/common/pydn/dblib/sqlite.py @@ -1,6 +1,7 @@ #!/usr/bin/python3 # -*- coding: utf-8 -*- # Author: Masato Yasuda (2019/04/10) +from __future__ import annotations import logging import sqlite3 @@ -200,6 +201,23 @@ def insert_table_records(self, tblname, names, values): self.connection.commit() print('Dummy data was inserted to {}!'.format(tblname)) + def get_column_type(self, tblname, colname) -> str | None: + sql = f'PRAGMA TABLE_INFO({tblname})' + cur = self.connection.cursor() + cur.execute(sql) + rows = cur.fetchall() + cur.close() + + def is_good_column(row): + # cid, name, type, notnull, dflt_value, pk + _, name, *_ = row + return name == colname + + good_rows = filter(is_good_column, rows) + column_types = (x[2] for x in good_rows) + column_type = next(column_types, None) + return column_type + # SQLをそのまま実行。 # cols, rows = db1.run_sql("select * from tbl01") # という形で呼び出す diff --git a/ap/common/scheduler.py b/ap/common/scheduler.py index baac99e..1a98399 100644 --- a/ap/common/scheduler.py +++ b/ap/common/scheduler.py @@ -1,7 +1,11 @@ +from __future__ import annotations + +import contextlib from datetime import datetime from functools import wraps from threading import Lock +from apscheduler.jobstores.base import JobLookupError from pytz import utc from ap import ListenNotifyType, close_sessions, scheduler @@ -46,6 +50,12 @@ # (JobType.RESTRUCTURE_INDEXES.name, JobType.FACTORY_PAST_IMPORT.name), } +# jobs with `_id` suffixes +EXCLUSIVE_JOBS_WITH_IDS = { + JobType.USER_BACKUP_DATABASE.name, + JobType.USER_RESTORE_DATABASE.name, +} + @log_execution_time(logging_exception=True) def scheduler_app_context(fn): @@ -106,6 +116,20 @@ def inner(*args, **kwargs): # return False +def is_job_existed_in_exclusive_jobs_with_ids(job: str, running_job_name: str): + def extract_id_from_job(job_name: str) -> int | None: + for exclusive_job_with_id in EXCLUSIVE_JOBS_WITH_IDS: + if job_name.startswith(exclusive_job_with_id): + id_from_job = job_name[len(exclusive_job_with_id) + 1 :] + with contextlib.suppress(ValueError): + return int(id_from_job) + return None + + job_id = extract_id_from_job(job) + running_job_id = extract_id_from_job(running_job_name) + return job_id is not None and running_job_id is not None and job_id == running_job_id + + def scheduler_check_before_run(job_id, job_name, proc_id, dic_running_job_param): """check if job can run parallel with other jobs""" @@ -118,6 +142,9 @@ def scheduler_check_before_run(job_id, job_name, proc_id, dic_running_job_param) return False for running_job_name, running_proc_id, *_ in dic_running_job_param.values(): + if is_job_existed_in_exclusive_jobs_with_ids(job_name, running_job_name): + return False + if (job_name, running_job_name) in CONFLICT_PAIR or (running_job_name, job_name) in CONFLICT_PAIR: print(f'{job_name} job can not run parallel with {running_job_name}') return False @@ -188,7 +215,8 @@ def remove_jobs(target_job_names, proc_id=None): job.remove() else: job.remove() - + except JobLookupError: + pass finally: scheduler.resume() diff --git a/ap/common/services/csv_content.py b/ap/common/services/csv_content.py index fc984a3..845becc 100644 --- a/ap/common/services/csv_content.py +++ b/ap/common/services/csv_content.py @@ -54,10 +54,10 @@ def get_encoding_name(encoding): return encoding -def get_delimiter_encoding(f_name, preview=False, skip_line: int | None = None): +def get_delimiter_encoding(f_name, preview=False, skip_head: int | None = None): with open_with_zip(f_name, 'rb') as f: - if skip_line is not None and skip_line != 0: - f.readlines(skip_line) + if skip_head is not None and skip_head != 0: + f.readlines(skip_head) metadata = get_metadata(f, is_full_scan_metadata=True, default_csv_delimiter=',') delimiter = metadata.get(DELIMITER_KW) encoding = metadata.get(ENCODING_KW) @@ -67,6 +67,29 @@ def get_delimiter_encoding(f_name, preview=False, skip_line: int | None = None): return delimiter, encoding +def get_limit_records( + is_transpose: bool = False, + n_rows: int | None = None, + user_limit: int | None = None, +) -> int | None: + nrows = get_number_of_reading_lines(n_rows, user_limit) + + # do not use user provided limit if we need to transpose + if is_transpose: + return nrows + + if nrows is None: + return user_limit + + # need to escape 1 records because of the header + nrows = nrows - 1 + + if user_limit is None: + return nrows + + return min(nrows, user_limit) + + def get_number_of_reading_lines(n_rows: int | None = None, limit: int | None = None) -> int | None: """ @param n_rows: @@ -102,7 +125,7 @@ def read_data( normalize_func = normalize_list if do_normalize else lambda x: x - delimiter, encoding = get_delimiter_encoding(f_name, skip_line=skip_head) + delimiter, encoding = get_delimiter_encoding(f_name, skip_head=skip_head) with open_with_zip(f_name, 'r', encoding=encoding) as f: _f = f diff --git a/ap/common/services/csv_header_wrapr.py b/ap/common/services/csv_header_wrapr.py index 5dad020..1a83eb4 100644 --- a/ap/common/services/csv_header_wrapr.py +++ b/ap/common/services/csv_header_wrapr.py @@ -619,10 +619,12 @@ def transform_duplicated_col_suffix_to_pandas_col(dic_valid_csv_cols, dic_origin if len(matched) > 1 and matched[-1].isdigit(): digit = int(matched[-1]) if (digit - 1) > 0: + # the rest of the column name except for the suffix s = '_'.join(matched[0:-1]) col_names.append(f'{s}.{digit-1}') else: - col_names.append(matched[0]) + # case a_01 -> a + col_names.append('_'.join(matched[0:-1])) else: col_names.append(org_col_name) else: diff --git a/ap/common/services/data_type.py b/ap/common/services/data_type.py index 276f66f..eb15255 100644 --- a/ap/common/services/data_type.py +++ b/ap/common/services/data_type.py @@ -24,7 +24,9 @@ def gen_data_types(series: Series, is_v2=False): """ series = series.drop_duplicates().dropna() # drop 'NA' in series if series is ('1.1', 'NA') - series = series.replace(na_values, pd.NA).dropna() + # BUG: BooleanArray raising on comparison to string: https://github.com/pandas-dev/pandas/pull/44533 + if series.dtypes.name != 'boolean': + series = series.replace(na_values, pd.NA).dropna() # try to convert dtypes from float to int # if data=[1.0, 2.0] (to avoid wrong data-type prediction) @@ -200,6 +202,8 @@ def check_large_int_type(val): def check_data_type_series(orig_series: Series): + from ap.common.common_utils import is_boolean + series: Series = convert_df_str_to_others(orig_series) # all items in series are NA @@ -217,6 +221,9 @@ def check_data_type_series(orig_series: Series): return check_float_type(orig_series, series) if 'int' in series_type: + if sum(is_boolean(series)) == len(series): + return DataType.BOOLEAN.value + # BIG INT if series.max() > MAX_SAFE_INTEGER: return DataType.BIG_INT.value diff --git a/ap/common/services/error_message_handler.py b/ap/common/services/error_message_handler.py index 59639fe..4f09be7 100644 --- a/ap/common/services/error_message_handler.py +++ b/ap/common/services/error_message_handler.py @@ -2,7 +2,13 @@ import pandas as pd -from ap.common.constants import UNKNOWN_ERROR_TEXT, DataImportErrorTypes, ErrorMsgFromDB, ErrorMsgText +from ap.common.constants import ( + MSG_DB_CON_FAILED, + UNKNOWN_ERROR_TEXT, + DataImportErrorTypes, + ErrorMsgFromDB, + ErrorMsgText, +) class ErrorMessageHandler: @@ -10,13 +16,21 @@ def __init__(self): self.msg = UNKNOWN_ERROR_TEXT def msg_from_exception(self, exception: Exception): + exception_message = str(exception) + # default case + self.msg = f'{UNKNOWN_ERROR_TEXT} Detail: {exception_message}' + # known exception types if isinstance(exception, KeyError): - self.msg = f'{ErrorMsgText[DataImportErrorTypes.COL_NOT_FOUND]} Detail:{str(exception)}' - if isinstance(exception, pd.errors.EmptyDataError): - self.msg = f'{ErrorMsgText[DataImportErrorTypes.EMPTY_DATA_FILE]} Detail:{str(exception)}' - if isinstance(exception, sqlite3.OperationalError): - if ErrorMsgFromDB[DataImportErrorTypes.DB_LOCKED] in str(exception): - self.msg = f'{ErrorMsgText[DataImportErrorTypes.DB_LOCKED]} Detail:{str(exception)}' - elif ErrorMsgFromDB[DataImportErrorTypes.TABLE_NOT_FOUND] in str(exception): - self.msg = f'{ErrorMsgText[DataImportErrorTypes.TABLE_NOT_FOUND]} Detail:{str(exception)}' + self.msg = f'{ErrorMsgText[DataImportErrorTypes.COL_NOT_FOUND]} Detail: {exception_message}' + elif isinstance(exception, pd.errors.EmptyDataError): + self.msg = f'{ErrorMsgText[DataImportErrorTypes.EMPTY_DATA_FILE]} Detail: {exception_message}' + elif isinstance(exception, sqlite3.OperationalError): + if ErrorMsgFromDB[DataImportErrorTypes.DB_LOCKED] in exception_message: + self.msg = f'{ErrorMsgText[DataImportErrorTypes.DB_LOCKED]} Detail: {exception_message}' + elif ErrorMsgFromDB[DataImportErrorTypes.TABLE_NOT_FOUND] in exception_message: + self.msg = f'{ErrorMsgText[DataImportErrorTypes.TABLE_NOT_FOUND]} Detail: {exception_message}' + # custom exceptions + elif exception_message == MSG_DB_CON_FAILED: + self.msg = f'{ErrorMsgText[DataImportErrorTypes.DB_CONNECTION_FAILED]} Detail: {exception_message}' + return self.msg diff --git a/ap/common/services/form_env.py b/ap/common/services/form_env.py index cdb3bf9..6f7124f 100644 --- a/ap/common/services/form_env.py +++ b/ap/common/services/form_env.py @@ -14,6 +14,7 @@ AGP_COLOR_VARS, ARRAY_FORMVAL, ARRAY_PLOTDATA, + BOOKMARK_ID, CAT_EXP_BOX, CAT_ON_DEMAND, CATE_PROC, @@ -84,6 +85,7 @@ NOT_EXACT_MATCH_FILTER_IDS, OBJ_VAR, PROCS, + RECENT_TIME_INTERVAL, REMOVE_OUTLIER_EXPLANATORY_VAR, REMOVE_OUTLIER_OBJECTIVE_VAR, REMOVE_OUTLIER_REAL_ONLY, @@ -93,6 +95,8 @@ RL_CATES, RL_EMD, RL_XAXIS, + SCP_HMP_X_AXIS, + SCP_HMP_Y_AXIS, SELECT_ALL, SERIAL_COLUMN, SERIAL_ORDER, @@ -207,8 +211,12 @@ IS_NOMINAL_SCALE, NOMINAL_VARS, REQ_ID, + BOOKMARK_ID, + RECENT_TIME_INTERVAL, FINE_SELECT, REQUEST_PARAMS, + SCP_HMP_X_AXIS, + SCP_HMP_Y_AXIS, ) conds_startwith_keys = ('filter-', 'cond_', 'machine_id_multi') diff --git a/ap/common/services/jp_to_romaji_utils.py b/ap/common/services/jp_to_romaji_utils.py index c2c557c..2087b94 100644 --- a/ap/common/services/jp_to_romaji_utils.py +++ b/ap/common/services/jp_to_romaji_utils.py @@ -73,6 +73,47 @@ def replace_special_symbols(input_str): return normalized_input +def replace_special_symbols_old(input_str): + normalized_input = input_str + # remove space and tab + normalized_input = re.sub(r"[\s\t\+\*…・:;!\?\$\&\"\'\`\=\@\#\\\/。、\.,~\|]", '', normalized_input) + + # `[\(\)\[\]<>\{\}【】]` in string in `English Name` should be replaced into `_`. + normalized_input = re.sub(r'[\(\)\[\]<>\{\}【】]', '_', normalized_input) + + # hyphen: remove last, multi + normalized_input = re.sub(r'-+', '-', normalized_input) + normalized_input = re.sub(r'_+', '_', normalized_input) + + # under score: remove first , last, multi + normalized_input = re.sub(r'^[_-]', '', normalized_input) + normalized_input = re.sub(r'[_-]$', '', normalized_input) + + # `[℃°]` in `English Name` should be replaced in to `deg`. + normalized_input = re.sub(r'[℃°]', 'deg', normalized_input) + + # `℉` in `English Name` should be replaced in to `degF`. + normalized_input = re.sub(r'℉', 'degF', normalized_input) + normalized_input = re.sub(r'%', 'pct', normalized_input) + + # `[Δ, △]` in English Name should be replaced into `d`. + normalized_input = re.sub(r'[Δ△]', 'd', normalized_input) + + # `Ω` in English Name should be replaced into `ohm`. + normalized_input = re.sub(r'Ω', 'ohm', normalized_input) + + # convert postal mark in string to `_` + normalized_input = re.sub(r'[\u3012\u3020\u3036]', 'post', normalized_input) + + # # replace for μµ + normalized_input = re.sub(r'Uu|uu', 'u', normalized_input) + + # `Mm` in English Name should be replaced into `mm`. + normalized_input = re.sub(r'Mm', 'mm', normalized_input) + + return normalized_input + + # def remove_irregular(input_str): # """ # Use this function to remove irregular string diff --git a/ap/common/services/sse.py b/ap/common/services/sse.py index 2f72386..5f48ad0 100644 --- a/ap/common/services/sse.py +++ b/ap/common/services/sse.py @@ -1,3 +1,5 @@ +from __future__ import annotations + import queue from datetime import datetime from enum import Enum, auto @@ -18,6 +20,8 @@ class AnnounceEvent(Enum): SHOW_GRAPH = auto() DISK_USAGE = auto() DATA_REGISTER = auto() + BACKUP_DATA_FINISHED = auto() + RESTORE_DATA_FINISHED = auto() class MessageAnnouncer: @@ -92,13 +96,21 @@ def format_sse(data, event=None) -> str: msg = f'event: {event}\n{msg}' return msg - def announce(self, data, event): + def announce(self, data, event, job_id: str | int = None): + """ + Send message data to front-end by EVENT name + + :param data: data want to send + :param event: event name + :param job_id: a job id to identity EVENT each other + """ if not dic_config[MAIN_THREAD]: if self.dic_progress is None: process_queue = read_pickle_file(get_multiprocess_queue_file()) self.dic_progress = process_queue[ListenNotifyType.JOB_PROGRESS.name] - self.dic_progress[event] = (data, event) + event_job_id = job_id if job_id else event + self.dic_progress[event_job_id] = (data, event) return # We go in reverse order because we might have to delete an element, which will shift the diff --git a/ap/config/basic_config.yml b/ap/config/basic_config.yml index 91646fb..1ad46e9 100644 --- a/ap/config/basic_config.yml +++ b/ap/config/basic_config.yml @@ -1,11 +1,11 @@ -!!omap -- info: !!omap - - version: '1' - - port-no: 7770 - - hide-setting-page: false - - r-path: - - auto-backup-universal: false - - language: en - - proxy: +!!omap +- info: !!omap + - version: '1' + - port-no: 7770 + - hide-setting-page: false + - r-path: + - auto-backup-universal: false + - language: en + - proxy: - log_level: INFO diff --git a/ap/equations/core.py b/ap/equations/core.py index 28d53b7..e38b161 100644 --- a/ap/equations/core.py +++ b/ap/equations/core.py @@ -1,7 +1,6 @@ from __future__ import annotations import contextlib -import locale import re from abc import abstractmethod from typing import Any, ClassVar, Optional @@ -15,7 +14,7 @@ from ap.common.constants import EMPTY_STRING, MULTIPLE_VALUES_CONNECTOR, DataTypeEncode, RawDataTypeDB from ap.common.memoize import memoize -from ap.equations.error import INVALID_VALUE_MSG, ErrorField, FunctionFieldError +from ap.equations.error import INVALID_VALUE_MSG, MUST_HAVE_THE_SAME_TYPE_MSG, ErrorField, FunctionFieldError from ap.setting_module.models import MFunction BOOLEAN_DICT_VALUES = { @@ -63,6 +62,9 @@ def cast_value_based_on_series(series: pd.Series, value: Any) -> tuple[Any, bool @param value: @return: cast value (if possible) and boolean result indicated that it is cast to series or not """ + if pd.api.types.is_bool_dtype(series) and value in BOOLEAN_DICT_VALUES: + return BOOLEAN_DICT_VALUES[value], True + if pd.api.types.is_float_dtype(series): with contextlib.suppress(ValueError): return float(value), True @@ -86,7 +88,13 @@ def cast_value_based_on_series(series: pd.Series, value: Any) -> tuple[Any, bool def try_cast_series_pd_types(series: pd.Series, pd_types: list[pd.ExtensionType]) -> pd.Series | None: for dtype in pd_types: - result_series = series.replace(BOOLEAN_DICT_VALUES) if pd.api.types.is_bool_dtype(dtype) else series + result_series = series + + current_type_is_not_boolean = not pd.api.types.is_bool_dtype(result_series) + type_should_be_boolean = pd.api.types.is_bool_dtype(dtype) + if current_type_is_not_boolean and type_should_be_boolean: + result_series = result_series.replace(BOOLEAN_DICT_VALUES) + with contextlib.suppress(TypeError, ValueError, OverflowError): return result_series.astype(dtype) with contextlib.suppress(TypeError, ValueError, OverflowError): @@ -123,10 +131,10 @@ def try_cast_series(series: pd.Series, raw_data_types: list[RawDataTypeDB | None def get_data_encoding_type_from_series(series: pd.Series) -> DataTypeEncode: - if pd.api.types.is_int64_dtype(series): - return DataTypeEncode.BIG_INT if pd.api.types.is_integer_dtype(series): return DataTypeEncode.INTEGER + # if pd.api.types.is_int64_dtype(series): # ES not use BIG_INT + # return DataTypeEncode.BIG_INT if pd.api.types.is_float_dtype(series): return DataTypeEncode.REAL if pd.api.types.is_string_dtype(series): @@ -212,9 +220,9 @@ def get_output_type_cast(self) -> str | None: if output_type_cast == DataTypeEncode.REAL.value: return RawDataTypeDB.REAL.value - # TODO: check if return bigint or smallint - if output_type_cast == DataTypeEncode.BIG_INT.value: - return RawDataTypeDB.BIG_INT.value + # TODO: ES not use BIG_INT + # if output_type_cast == DataTypeEncode.BIG_INT.value: + # return RawDataTypeDB.BIG_INT.value if output_type_cast == DataTypeEncode.INTEGER.value: return RawDataTypeDB.INTEGER.value @@ -242,12 +250,6 @@ def get_output_type(self, x_data_type: str | None = None, y_data_type: str | Non ) return output_data_type - @staticmethod - def force_convert_boolean_to_integer(series: pd.Series, raw_data_type: RawDataTypeDB): - if raw_data_type == RawDataTypeDB.BOOLEAN: - return series.astype(pd.Int16Dtype()) - return series - def evaluate( self, df: pd.DataFrame, @@ -300,7 +302,7 @@ def evaluate( if raw_output_type == RawDataTypeDB.TEXT: result_series = result_series.replace(to_replace=EMPTY_STRING, value=pd.NA) - df[out_col] = self.force_convert_boolean_to_integer(result_series, raw_output_type) + df[out_col] = result_series return df @@ -342,7 +344,7 @@ def eval_to_series( series_x: pd.Series | None = None, series_y: pd.Series | None = None, ) -> pd.Series | np.NDArray: - return self.a * series_x * series_y + self.c + return self.a * (series_x * series_y) + self.c class Ratio(BaseFunction): @@ -356,7 +358,20 @@ def eval_to_series( series_x: pd.Series | None = None, series_y: pd.Series | None = None, ) -> pd.Series | np.NDArray: - return self.a * series_x / (self.b * series_y) + self.c + """ + https://github.com/pandas-dev/pandas/issues/30188 + Calling numpy calculation in Float64 dataframe, can result in np.nan exist in Float64, + those can cause incorrect behavior, therefore, we need to handle these cases separately + """ + a_mul = self.a * series_x + b_mul = self.b * series_y + result = a_mul / b_mul + self.c + + # explicitly set zeros indexes NA + both_zeroes = (a_mul == 0) & (b_mul == 0) + result[both_zeroes] = pd.NA + + return result class ExpTransform(BaseFunction): @@ -398,7 +413,20 @@ def eval_to_series( series_x: pd.Series | None = None, series_y: pd.Series | None = None, ) -> pd.Series | np.NDArray: - return self.a * np.log10(series_x - self.b) + self.c + """ + https://github.com/pandas-dev/pandas/issues/30188 + Calling numpy calculation in Float64 dataframe, can result in np.nan exist in Float64, + those can cause incorrect behavior, therefore, we need to handle these cases separately + """ + + minus_b = series_x - self.b + result = self.a * np.log10(minus_b) + self.c + + # log10(x) if x < 0 is NaN + is_negative = minus_b < 0 + result[is_negative] = pd.NA + + return result class HexToDec(BaseFunction): @@ -478,7 +506,9 @@ def eval_to_series( series_x: pd.Series | None = None, series_y: pd.Series | None = None, ) -> pd.Series | np.NDArray: - return np.arctan2(series_y - self.b, series_x - self.a) * 180 / np.pi - self.c + result = np.arctan2(series_y - self.b, series_x - self.a) + result = np.rad2deg(result) - self.c + return result class StringExtraction(BaseFunction): @@ -738,18 +768,14 @@ def eval_to_series( ) -> pd.Series | np.NDArray: self.custom_validate() - use_japanese_locale = self.n >= 2 + locale_translator = { + 0: {0: 'Mon', 1: 'Tue', 2: 'Wed', 3: 'Thu', 4: 'Fri', 5: 'Sat', 6: 'Sun'}, + 1: {0: 'Monday', 1: 'Tuesday', 2: 'Wednesday', 3: 'Thursday', 4: 'Friday', 5: 'Saturday', 6: 'Sunday'}, + 2: {0: '月', 1: '火', 2: '水', 3: '木', 4: '金', 5: '土', 6: '日'}, + 3: {0: '月曜日', 1: '火曜日', 2: '水曜日', 3: '木曜日', 4: '金曜日', 5: '土曜日', 6: '日曜日'}, + } - current_locale = locale.getlocale(locale.LC_TIME) - - if use_japanese_locale: - locale.setlocale(locale.LC_TIME, 'ja_JP') - - result = series_x.dt.strftime('%a') if self.n % 2 == 0 else series_x.dt.strftime('%A') - - # set back current locale - if use_japanese_locale: - locale.setlocale(locale.LC_TIME, current_locale) + result = series_x.dt.weekday.replace(locale_translator[self.n]) return result @@ -907,11 +933,10 @@ def custom_validate(self): ErrorField(function_type=self.function_type(), field='s', msg='Invalid regex'), ) from exc - # extracting groups must be present + # if no group is present, we assign this as a new group + # because pandas.str.extract requires pattern should have groups if regex.groups == 0: - raise FunctionFieldError(INVALID_VALUE_MSG).add_error( - ErrorField(function_type=self.function_type(), field='s', msg='Regex must provide capture groups'), - ) + self.s = f'({self.s})' def eval_to_series( self, @@ -983,11 +1008,18 @@ def eval_to_series( series_x: pd.Series | None = None, series_y: pd.Series | None = None, ) -> pd.Series | np.NDArray: - result = series_x.combine_first(series_y) + if series_x.dtype != series_y.dtype: + raise FunctionFieldError(MUST_HAVE_THE_SAME_TYPE_MSG).add_error( + ErrorField(function_type=self.function_type(), field='X', msg=MUST_HAVE_THE_SAME_TYPE_MSG), + ErrorField(function_type=self.function_type(), field='Y', msg=MUST_HAVE_THE_SAME_TYPE_MSG), + ) - # keep original type if `self.t` is not defined - self.set_type_cast(self.t if self.t else get_data_encoding_type_from_series(series_x).value) + if pd.api.types.is_string_dtype(series_x): + series_x = series_x.replace({EMPTY_STRING: pd.NA}) + series_y = series_y.replace({EMPTY_STRING: pd.NA}) + result = series_x.combine_first(series_y) + self.set_type_cast(self.t) type_converter = TypeConvert.from_kwargs(t=self.type_cast) return type_converter.eval_to_series(series_x=result) @@ -1071,6 +1103,16 @@ def eval_to_series( type_cast = self.get_output_type_cast() pd_type = RawDataTypeDB.get_pandas_dtype(type_cast) + if pd.api.types.is_bool_dtype(series_x): + if pd.api.types.is_float_dtype(pd_type): + series_x = series_x.astype('float64') # Float64 can not astype pd.Series(True, pd.NA, False) + elif pd_type == pd.StringDtype(): + series_x = series_x.astype(pd_type).str.lower() + else: + series_x = series_x.astype(pd_type) + + return series_x + if pd.api.types.is_numeric_dtype(pd_type): casted_x = pd.to_numeric(series_x, errors='coerce') @@ -1119,7 +1161,9 @@ def eval_to_series( if convertible: result = series_x.shift(t, fill_value=s) else: - if isinstance(s, float): + if isinstance(s, int): + casted_series = series_x.astype(pd.Int64Dtype()) + elif isinstance(s, float): casted_series = series_x.astype(pd.Float64Dtype()) elif isinstance(s, str): casted_series = series_x.astype(pd.StringDtype()) diff --git a/ap/equations/error.py b/ap/equations/error.py index 5734a5f..ad2b25a 100644 --- a/ap/equations/error.py +++ b/ap/equations/error.py @@ -6,6 +6,7 @@ from pydantic import BaseModel INVALID_VALUE_MSG = 'Invalid value' +MUST_HAVE_THE_SAME_TYPE_MSG = 'X and Y must have the same type' class ErrorField(BaseModel): @@ -34,6 +35,12 @@ def add_error(self, *errors: ErrorField) -> FunctionFieldError: def parse(self) -> dict[str, Any]: return {'id': self.id, 'errors': self.errors} + def __repr__(self) -> str: + return '\n'.join(err.msg for err in self.errors) + + def __str__(self) -> str: + return self.__repr__() + @classmethod def from_pydantic_validation_error( cls, diff --git a/ap/script/migrate_cfg_data_source_csv.py b/ap/script/migrate_cfg_data_source_csv.py index d346168..ab2cfec 100644 --- a/ap/script/migrate_cfg_data_source_csv.py +++ b/ap/script/migrate_cfg_data_source_csv.py @@ -1,10 +1,19 @@ +from ap.common.constants import DBType, RelationShip from ap.common.pydn.dblib import sqlite -from ap.setting_module.models import CfgDataSourceCSV, CfgProcessColumn, CfgProcess +from ap.setting_module.models import ( + CfgDataSourceCSV, + CfgProcessColumn, + CfgProcess, + make_session, + insert_or_update_config, + CfgDataSource, +) process_name_column = """alter table cfg_data_source_csv add process_name text;""" dummy_header_column = """alter table cfg_data_source_csv add dummy_header boolean;""" n_rows_column = """alter table cfg_data_source_csv add column n_rows integer;""" is_transpose_column = """alter table cfg_data_source_csv add column is_transpose boolean;""" +is_file_path_column = """alter table cfg_data_source_csv add column is_file_path boolean;""" def migrate_cfg_data_source_csv(app_db_src): @@ -20,6 +29,9 @@ def migrate_cfg_data_source_csv(app_db_src): is_is_transpose_column_existing = app_db.is_column_existing( CfgDataSourceCSV.__table__.name, CfgDataSourceCSV.is_transpose.name ) + is_file_path_column_existing = app_db.is_column_existing( + CfgDataSourceCSV.__table__.name, CfgDataSourceCSV.is_file_path.name + ) if not is_process_name_existing: app_db.execute_sql(process_name_column) if not is_dummy_header_existing: @@ -28,6 +40,8 @@ def migrate_cfg_data_source_csv(app_db_src): app_db.execute_sql(n_rows_column) if not is_is_transpose_column_existing: app_db.execute_sql(is_transpose_column) + if not is_file_path_column_existing: + app_db.execute_sql(is_file_path_column) migrate_cfg_process_column(app_db) app_db.disconnect() @@ -70,3 +84,20 @@ def migrate_cfg_process_column(app_db): # insert to_romaji value if not is_process_name_local_existing: app_db.execute_sql("""ALTER TABLE cfg_process ADD name_local text;""") + + +def migrate_skip_head_value(): + with make_session() as meta_session: + data_sources = meta_session.query(CfgDataSource).filter(CfgDataSource.type == DBType.CSV.value.upper()).all() + for data_source in data_sources: + csv_detail = data_source.csv_detail + # for existing csv data sources, convert skip_head from 0 to None if there is no dummy header generated + if not csv_detail.dummy_header and csv_detail.skip_head == 0: + csv_detail.skip_head = None + insert_or_update_config( + meta_session, + csv_detail, + parent_obj=data_source, + parent_relation_key=CfgDataSource.csv_detail.key, + parent_relation_type=RelationShip.ONE, + ) diff --git a/ap/script/migrate_cfg_process.py b/ap/script/migrate_cfg_process.py index fb03926..db51659 100644 --- a/ap/script/migrate_cfg_process.py +++ b/ap/script/migrate_cfg_process.py @@ -3,13 +3,28 @@ create_is_show_file_name = """ALTER TABLE cfg_process ADD COLUMN is_show_file_name BOOLEAN;""" update_is_show_file_name = """UPDATE cfg_process SET is_show_file_name = 0;""" +create_process_factid = """ALTER TABLE cfg_process ADD COLUMN process_factid TEXT;""" +create_process_factname = """ALTER TABLE cfg_process ADD COLUMN process_factname TEXT;""" -def migrate_cfg_process_add_is_show_file_name(app_db_src): +def migrate_cfg_process(app_db_src): app_db = sqlite.SQLite3(app_db_src) app_db.connect() + migrate_cfg_process_add_is_show_file_name(app_db) + migrate_cfg_process_add_process_factid_and_process_factname(app_db) + app_db.disconnect() + + +def migrate_cfg_process_add_is_show_file_name(app_db): is_col_existing = app_db.is_column_existing(CfgProcess.__table__.name, CfgProcess.is_show_file_name.name) if not is_col_existing: app_db.execute_sql(create_is_show_file_name) app_db.execute_sql(update_is_show_file_name) - app_db.disconnect() + + +def migrate_cfg_process_add_process_factid_and_process_factname(app_db): + is_col_process_factid = app_db.is_column_existing(CfgProcess.__table__.name, CfgProcess.process_factid.name) + is_col_process_factname = app_db.is_column_existing(CfgProcess.__table__.name, CfgProcess.process_factname.name) + if not is_col_process_factid and not is_col_process_factname: + app_db.execute_sql(create_process_factid) + app_db.execute_sql(create_process_factname) diff --git a/ap/script/migrate_cfg_process_column.py b/ap/script/migrate_cfg_process_column.py new file mode 100644 index 0000000..ed5def3 --- /dev/null +++ b/ap/script/migrate_cfg_process_column.py @@ -0,0 +1,29 @@ +from ap.common.pydn.dblib import sqlite +from ap.setting_module.models import CfgProcessColumn + +delete_operator_column = """ALTER TABLE cfg_process_column DROP COLUMN operator""" +delete_coef_column = """ALTER TABLE cfg_process_column DROP COLUMN coef""" +add_unit_column = """ALTER TABLE cfg_process_column ADD COLUMN unit TEXT;""" + + +def migrate_cfg_process_column(app_db_src): + app_db = sqlite.SQLite3(app_db_src) + app_db.connect() + del_operator_and_coef(app_db) + add_column_unit(app_db) + app_db.disconnect() + + +def del_operator_and_coef(app_db): + is_col_operator_existing = app_db.is_column_existing(CfgProcessColumn.__table__.name, 'operator') + is_col_coef_existing = app_db.is_column_existing(CfgProcessColumn.__table__.name, 'coef') + if is_col_operator_existing: + app_db.execute_sql(delete_operator_column) + if is_col_coef_existing: + app_db.execute_sql(delete_coef_column) + + +def add_column_unit(app_db): + is_col_unit_existing = app_db.is_column_existing(CfgProcessColumn.__table__.name, CfgProcessColumn.unit.name) + if not is_col_unit_existing: + app_db.execute_sql(add_unit_column) diff --git a/ap/script/migrate_delta_time.py b/ap/script/migrate_delta_time.py index 10acc35..d6d9489 100644 --- a/ap/script/migrate_delta_time.py +++ b/ap/script/migrate_delta_time.py @@ -2,6 +2,11 @@ def migrate_delta_time_in_cfg_trace_key(app_db_src): + create_delta_time_and_cutoff(app_db_src) + change_delta_time_and_cut_off_data_type(app_db_src) + + +def create_delta_time_and_cutoff(app_db_src): from ap.setting_module.models import CfgTraceKey app_db = sqlite.SQLite3(app_db_src) @@ -17,3 +22,39 @@ def migrate_delta_time_in_cfg_trace_key(app_db_src): if not is_cutoff_col_existing: app_db.execute_sql(create_cutoff_column) app_db.disconnect() + + +def change_delta_time_and_cut_off_data_type(app_db_src): + from ap.setting_module.models import CfgTraceKey + + app_db = sqlite.SQLite3(app_db_src) + app_db.connect() + + delta_time_column_type = app_db.get_column_type(CfgTraceKey.__tablename__, CfgTraceKey.delta_time.name) + cut_off_column_type = app_db.get_column_type(CfgTraceKey.__tablename__, CfgTraceKey.cut_off.name) + + def change_column_to_real_sql(table, old_column, new_column): + return [ + f'ALTER TABLE {table} ADD COLUMN {new_column} REAL;', + f'UPDATE {table} SET {new_column} = CAST({old_column} AS REAL);', + f'ALTER TABLE {table} DROP COLUMN {old_column};', + f'ALTER TABLE {table} RENAME COLUMN {new_column} TO {old_column};', + ] + + if delta_time_column_type != 'REAL': + for sql in change_column_to_real_sql( + CfgTraceKey.__tablename__, + CfgTraceKey.delta_time.name, + 'delta_time_20240711', + ): + app_db.execute_sql(sql) + + if cut_off_column_type != 'REAL': + for sql in change_column_to_real_sql( + CfgTraceKey.__tablename__, + CfgTraceKey.cut_off.name, + 'cut_off_20240711', + ): + app_db.execute_sql(sql) + + app_db.disconnect() diff --git a/ap/script/migrate_m_function.py b/ap/script/migrate_m_function.py index ed0ac6e..c78bc1e 100644 --- a/ap/script/migrate_m_function.py +++ b/ap/script/migrate_m_function.py @@ -2,11 +2,10 @@ import numpy as np import pandas as pd - -from ap.common.common_utils import get_dummy_data_path from sqlalchemy import create_engine from sqlalchemy.orm import Session +from ap.common.common_utils import get_dummy_data_path from ap.common.pydn.dblib import sqlite @@ -49,6 +48,24 @@ def migrate_existing_m_funcions(app_db_src): app_db.disconnect() +def update_data_type_for_function_column_and_remove_unused_column(app_db_src): + from ap.setting_module.models import CfgProcessFunctionColumn + + app_db = sqlite.SQLite3(app_db_src) + app_db.connect() + # remove unused column + for col in ['coe_a_n_s', 'coe_b_k_t', 'coe_c']: + table = CfgProcessFunctionColumn.__tablename__ + is_col_existing = app_db.is_column_existing(table, col) + if is_col_existing: + app_db.execute_sql( + f''' + ALTER TABLE {table} DROP COLUMN {col}; + ''', + ) + app_db.disconnect() + + def migrate_m_function_data(app_db_src): from ap.setting_module.models import MFunction @@ -88,3 +105,5 @@ def migrate_m_function_data(app_db_src): session.add_all([MFunction(**r) for r in records]) session.commit() session.close() + + update_data_type_for_function_column_and_remove_unused_column(app_db_src) diff --git a/ap/script/migrate_process_file_name_column.py b/ap/script/migrate_process_file_name_column.py index c4b4e51..bee4b9a 100644 --- a/ap/script/migrate_process_file_name_column.py +++ b/ap/script/migrate_process_file_name_column.py @@ -5,6 +5,7 @@ create_column_raw_name = """ALTER TABLE cfg_process_column ADD COLUMN column_raw_name TEXT;""" update_column_raw_name = """UPDATE cfg_process_column SET column_raw_name = column_name;""" create_column_type = """ALTER TABLE cfg_process ADD COLUMN column_type INTEGER;""" +create_datetime_column = """ALTER TABLE cfg_process ADD COLUMN datetime_format TEXT;""" def migrate_cfg_process_add_file_name(app_db_src): @@ -14,9 +15,17 @@ def migrate_cfg_process_add_file_name(app_db_src): if not is_col_existing: app_db.execute_sql(create_file_name) + + migrate_cfg_process_add_datetime_format(app_db) app_db.disconnect() +def migrate_cfg_process_add_datetime_format(app_db): + is_col_existing = app_db.is_column_existing(CfgProcess.__table__.name, CfgProcess.datetime_format.name) + if not is_col_existing: + app_db.execute_sql(create_datetime_column) + + def migrate_cfg_process_column_add_column_raw_name(app_db_src): app_db = sqlite.SQLite3(app_db_src) app_db.connect() diff --git a/ap/script/setup_for_e2e.py b/ap/script/setup_for_e2e.py new file mode 100644 index 0000000..85059ff --- /dev/null +++ b/ap/script/setup_for_e2e.py @@ -0,0 +1,93 @@ +import re +import os +import shutil +import socket +import sys +import time +from pathlib import Path +import unicodedata + +SCREEN_SHOT_FOLDER = Path('C:/') / 'workspace' / 'CICD' / 'frontend' / 'screenshot' +ROOT_PATH = Path(__file__).parent.parent.parent +INIT_BASIC_CONFIG_FILE = ROOT_PATH / 'init' / 'basic_config.yml' +BASIC_CONFIG_FILE = ROOT_PATH / 'ap' / 'config' / 'basic_config.yml' +E2E_CONFIG_FILE = ROOT_PATH / 'tests' / 'e2e' / 'cypress.config.js' +E2E_INSTANCE_FOLDER = ROOT_PATH / 'tests' / 'e2e' / 'instance' +INSTANCE_FOLDER = ROOT_PATH / 'instance' + + +def clear_old_screenshot_folders(): + for folder in SCREEN_SHOT_FOLDER.glob('*'): + if not folder.is_dir(): + continue + access_time = folder.stat().st_atime + current_time = time.time() + one_day = 24 * 60 * 60 # seconds + if current_time - access_time > one_day: + shutil.rmtree(folder) + + +def create_screenshot_folder(branch_name: str): + # https://github.com/django/django/blob/cdcd604ef8f650533eff6bd63a517ebb4ffddf96/django/utils/text.py#L452C1-L469C53 + sanitized_name = str(branch_name) + sanitized_name = unicodedata.normalize("NFKC", sanitized_name) + sanitized_name = re.sub(r"[^\w\s-]", "", sanitized_name.lower()) + sanitized_name = re.sub(r"[-\s]+", "-", sanitized_name).strip("-_") + + screenshot_folder = SCREEN_SHOT_FOLDER / sanitized_name + screenshot_folder.mkdir(parents=True, exist_ok=True) + print(f"Screenshot folder is: {screenshot_folder}") + + # change this to cypress config + with E2E_CONFIG_FILE.open('r+') as f: + text = f.read() + text = re.sub( + r"screenshotsFolder: .*,", re.escape(f"screenshotsFolder:'{screenshot_folder.as_posix()}',"), text + ) + f.seek(0) + f.write(text) + + +def find_unused_port() -> int: + sock = socket.socket() + sock.bind(('', 0)) + return sock.getsockname()[1] + + +def change_port_for_web() -> None: + unused_port = find_unused_port() + with INIT_BASIC_CONFIG_FILE.open('r+') as f: + text = f.read() + text = re.sub(r'- port-no: \d+', f'- port-no: {unused_port}', text) + f.seek(0) + f.write(text) + + with E2E_CONFIG_FILE.open('r+') as f: + text = f.read() + text = re.sub(r"baseUrl: 'http://localhost:\d+'", f"baseUrl: 'http://localhost:{unused_port}'", text) + f.seek(0) + f.write(text) + + +def replace_basic_config_file() -> None: + shutil.copy(INIT_BASIC_CONFIG_FILE, BASIC_CONFIG_FILE) + + +def copy_tests_instance_to_instance_folder() -> None: + if os.path.isdir(INSTANCE_FOLDER): + shutil.rmtree(INSTANCE_FOLDER) + + shutil.copytree(E2E_INSTANCE_FOLDER, INSTANCE_FOLDER) + + +def setup(branch_name: str) -> None: + clear_old_screenshot_folders() + create_screenshot_folder(branch_name) + change_port_for_web() + replace_basic_config_file() + copy_tests_instance_to_instance_folder() + + +if __name__ == '__main__': + branch_name = sys.argv[1] + setup(branch_name) diff --git a/ap/setting_module/controllers.py b/ap/setting_module/controllers.py index 6ef6326..ba4eff0 100644 --- a/ap/setting_module/controllers.py +++ b/ap/setting_module/controllers.py @@ -90,7 +90,7 @@ def config_screen(): @setting_module_blueprint.route('/config/filter') def filter_config(): - processes = get_all_process_no_nested() + processes = get_all_process_no_nested(with_parent=False) # generate english name for process for proc_data in processes: if not proc_data['name_en']: @@ -138,7 +138,7 @@ def term_of_use(): @setting_module_blueprint.route('/config/master') def master_config(): - processes = get_all_process_no_nested() + processes = get_all_process_no_nested(with_parent=False) # generate english name for process for proc_data in processes: if not proc_data['name_en']: diff --git a/ap/setting_module/models.py b/ap/setting_module/models.py index 4e445b4..107050d 100644 --- a/ap/setting_module/models.py +++ b/ap/setting_module/models.py @@ -2,6 +2,7 @@ import json from contextlib import contextmanager +from functools import wraps from typing import Any, Dict, List, Optional, Union import pandas as pd @@ -11,7 +12,7 @@ from sqlalchemy import asc, desc, event, func, null, or_ from sqlalchemy.ext.hybrid import hybrid_property from sqlalchemy.inspection import inspect -from sqlalchemy.orm import RelationshipProperty, load_only +from sqlalchemy.orm import RelationshipProperty, load_only, scoped_session from typing_extensions import Self from ap import Session, db @@ -47,10 +48,10 @@ MaxGraphNumber, RawDataTypeDB, RelationShip, - dict_dtype, max_graph_number, ) from ap.common.cryptography_utils import decrypt_pwd +from ap.common.datetime_format_utils import DateTimeFormatUtils from ap.common.memoize import set_all_cache_expired from ap.common.services.http_content import json_dumps from ap.common.services.jp_to_romaji_utils import to_romaji @@ -76,6 +77,44 @@ def make_session(): raise e +def use_meta_session(meta_session_argument_name: str = 'meta_session'): + """Decorator to auto create db instance when no pass it in argument""" + + def decorator(fn): + @wraps(fn) + def inner(*args, **kwargs): + meta_session: scoped_session = kwargs.get(meta_session_argument_name) + if meta_session is None: + with make_session() as new_meta_session: + kwargs[meta_session_argument_name] = new_meta_session + return fn(*args, **kwargs) + else: + return fn(*args, **kwargs) + + return inner + + return decorator + + +def use_meta_session_generator(meta_session_argument_name: str = 'db_instance'): + """Decorator to auto create db instance when no pass it in argument""" + + def decorator(fn): + @wraps(fn) + def inner(*args, **kwargs): + meta_session: scoped_session = kwargs.get(meta_session_argument_name) + if meta_session is None: + with make_session() as new_meta_session: + kwargs[meta_session_argument_name] = new_meta_session + return (yield from fn(*args, **kwargs)) + else: + return (yield from fn(*args, **kwargs)) + + return inner + + return decorator + + class CommonModel(db.Model): __abstract__ = True @@ -501,10 +540,12 @@ def get_all_unused_columns_by_process_id(cls, process_id): return [col.column_name for col in cls.query.filter(cls.process_id == process_id).all()] @classmethod - def delete_all_columns_by_proc_id(cls, proc_id): - with make_session() as meta_session: - meta_session.query(cls).filter(cls.process_id == proc_id).delete() - meta_session.commit() + def delete_all_columns_by_proc_id(cls, proc_id, meta_session: scoped_session = None): + (meta_session.query(cls) if meta_session else CfgProcessUnusedColumn.query).filter( + cls.process_id == proc_id, + ).delete() + if meta_session: + meta_session.flush() class CfgProcessColumn(db.Model): @@ -523,8 +564,8 @@ class CfgProcessColumn(db.Model): raw_data_type = db.Column(db.Text()) column_type = db.Column(db.Integer()) predict_type = db.Column(db.Text()) - operator = db.Column(db.Text()) - coef = db.Column(db.Text()) + # operator = db.Column(db.Text()) + # coef = db.Column(db.Text()) is_serial_no = db.Column(db.Boolean(), default=False) is_get_date = db.Column(db.Boolean(), default=False) is_dummy_datetime = db.Column(db.Boolean(), default=False) @@ -532,6 +573,7 @@ class CfgProcessColumn(db.Model): parent_id = db.Column(db.Integer(), db.ForeignKey(id, ondelete='CASCADE'), nullable=True) # parent_column_id = db.Column(db.Integer()) order = db.Column(db.Integer()) + unit = db.Column(db.Text()) function_details: list['CfgProcessFunctionColumn'] = db.relationship( 'CfgProcessFunctionColumn', lazy='joined', @@ -605,6 +647,10 @@ def is_int_category(self): self.column_type in DataColumnType.category_int_types() or self.is_serial_no ) + @hybrid_property + def is_judge(self): + return self.column_type == DataColumnType.JUDGE.value + @classmethod def get_function_col_ids(cls, process_id): recs = ( @@ -767,9 +813,12 @@ class CfgProcess(db.Model): comment = db.Column(db.Text()) is_show_file_name = db.Column(db.Boolean(), default=None) file_name = db.Column(db.Text()) + process_factid = db.Column(db.Text()) + process_factname = db.Column(db.Text()) parent_id = db.Column(db.Integer(), db.ForeignKey(id, ondelete='CASCADE'), nullable=True) # parent_process_id = db.Column(db.Integer()) + datetime_format = db.Column(db.Text(), default=None) order = db.Column(db.Integer()) created_at = db.Column(db.Text(), default=get_current_timestamp) updated_at = db.Column(db.Text(), default=get_current_timestamp, onupdate=get_current_timestamp) @@ -920,6 +969,22 @@ def get_cols_by_data_type(self, data_type: DataType, column_name_only=True): return cols + def get_time_format(self) -> Optional[str]: + """ + Extract time format from datetime_format value + :return: time format + """ + datetime_format = DateTimeFormatUtils.get_datetime_format(self.datetime_format) + return datetime_format.time_format + + def get_date_format(self) -> Optional[str]: + """ + Extract date format from datetime_format value + :return: date format + """ + datetime_format = DateTimeFormatUtils.get_datetime_format(self.datetime_format) + return datetime_format.date_format + @classmethod def get_all(cls, with_parent=False): query = cls.query @@ -962,9 +1027,9 @@ def get_all_parents_and_children_processes(cls, proc_id: int) -> list[CfgProcess proc = cls.query.get(proc_id) parent = cls.get_parent(proc_id) children = cls.get_children(proc_id) - children_of_parent = cls.get_children(parent.id) if parent is not None else [] + siblings = cls.get_children(parent.id) if parent is not None else [] - processes = [proc] + [parent] + children + children_of_parent + processes = [proc] + [parent] + children + siblings return list({process.id: process for process in processes if process is not None}.values()) @classmethod @@ -989,6 +1054,23 @@ def delete(cls, proc_id): return True + @classmethod + def batch_delete(cls, proc_ids): + with make_session() as meta_session: + meta_session.query(cls).filter(cls.id.in_(proc_ids)).delete(synchronize_session=False) + # delete traces manually + meta_session.query(CfgTrace).filter( + or_(CfgTrace.self_process_id.in_(proc_ids), CfgTrace.target_process_id.in_(proc_ids)), + ).delete( + synchronize_session=False, + ) + # delete linking prediction manually + meta_session.query(ProcLinkCount).filter( + or_(ProcLinkCount.process_id.in_(proc_ids), ProcLinkCount.target_process_id.in_(proc_ids)), + ).delete( + synchronize_session=False, + ) + @classmethod def update_order(cls, meta_session, process_id, order): meta_session.query(cls).filter(cls.id == process_id).update({cls.order: order}) @@ -1000,11 +1082,27 @@ def get_list_of_process(cls): @classmethod def check_duplicated_name(cls, name_en, name_jp, name_local): - check_name_en = len(cls.query.filter(cls.name_en == name_en).all()) != 0 - check_name_jp = len(cls.query.filter(cls.name_jp == name_jp).all()) != 0 - check_name_local = len(cls.query.filter(cls.name_local == name_local).all()) != 0 + check_name_en = len(cls.query.filter(cls.name_en == name_en).all()) != 0 if name_en else False + check_name_jp = len(cls.query.filter(cls.name_jp == name_jp).all()) != 0 if name_jp else False + check_name_local = len(cls.query.filter(cls.name_local == name_local).all()) != 0 if name_local else False return check_name_en, check_name_jp, check_name_local + def table_name_for_query_datetime(self): + from ap.api.setting_module.services.software_workshop_etl_services import quality_measurements_table + + if self.data_source.type == DBType.SOFTWARE_WORKSHOP.name: + return quality_measurements_table.name + return self.table_name + + def filter_for_query_datetime(self, sql: str) -> str: + if self.data_source.type == DBType.SOFTWARE_WORKSHOP.name: + from ap.api.setting_module.services.software_workshop_etl_services import quality_measurements_table + + # software workshop import by process must filter by process name here + # because this is vertical database + return f"{sql} WHERE {quality_measurements_table.c.child_equip_id.name} = '{self.process_factid}'" + return sql + class CfgProcessFunctionColumn(db.Model): __tablename__ = 'cfg_process_function_column' @@ -1197,8 +1295,8 @@ class CfgTraceKey(db.Model): target_column_substr_from = db.Column(db.Integer()) target_column_substr_to = db.Column(db.Integer()) - delta_time = db.Column(db.Integer()) - cut_off = db.Column(db.Integer()) + delta_time = db.Column(db.Float()) + cut_off = db.Column(db.Float()) order = db.Column(db.Integer()) @@ -1548,6 +1646,7 @@ def insert_or_update_config( parent_relation_key=None, parent_relation_type=None, exclude_columns=None, + autocommit=True, ): """ @@ -1559,6 +1658,7 @@ def insert_or_update_config( :param parent_obj: :param parent_relation_key: :param parent_relation_type: + :param autocommit: :return: """ excludes = ['created_at', 'updated_at'] @@ -1597,6 +1697,7 @@ def insert_or_update_config( rec = model() if not parent_obj: meta_session.add(rec) + meta_session.flush() elif parent_relation_type is RelationShip.MANY: objs = getattr(parent_obj, parent_relation_key) if objs is None: @@ -1629,7 +1730,9 @@ def insert_or_update_config( setattr(rec, key, val) - meta_session.commit() + meta_session.flush() + if autocommit: + meta_session.commit() return rec @@ -1671,6 +1774,7 @@ def crud_config( parent_obj: db.Model = None, parent_relation_key=None, parent_relation_type=RelationShip.MANY, + autocommit=True, ): """ @@ -1682,6 +1786,7 @@ def crud_config( :param parent_obj: :param parent_relation_key: :param parent_relation_type: + :param autocommit: :return: """ # get model @@ -1736,9 +1841,10 @@ def crud_config( parent_obj=parent_obj, parent_relation_key=parent_relation_key, parent_relation_type=parent_relation_type, + autocommit=autocommit, ) else: - rec = insert_or_update_config(meta_session, row, key_names, model=model) + rec = insert_or_update_config(meta_session, row, key_names, model=model, autocommit=autocommit) key = tuple(getattr(rec, key) for key in key_names) set_active_keys.add(key) @@ -1750,8 +1856,11 @@ def crud_config( continue meta_session.delete(current_rec) + meta_session.flush() - meta_session.commit() + meta_session.flush() + if autocommit: + meta_session.commit() return True @@ -1762,7 +1871,7 @@ class CfgDataSourceCSV(db.Model): __table_args__ = {'sqlite_autoincrement': True} id = db.Column(db.Integer(), db.ForeignKey('cfg_data_source.id', ondelete='CASCADE'), primary_key=True) directory = db.Column(db.Text()) - skip_head = db.Column(db.Integer(), default=0) + skip_head = db.Column(db.Integer(), default=None) skip_tail = db.Column(db.Integer(), default=0) n_rows = db.Column(db.Integer(), nullable=True) is_transpose = db.Column(db.Boolean(), nullable=True) @@ -1770,6 +1879,7 @@ class CfgDataSourceCSV(db.Model): etl_func = db.Column(db.Text()) process_name = db.Column(db.Text()) dummy_header = db.Column(db.Boolean(), default=False) + is_file_path = db.Column(db.Boolean(), nullable=True, default=False) created_at = db.Column(db.Text(), default=get_current_timestamp) updated_at = db.Column(db.Text(), default=get_current_timestamp, onupdate=get_current_timestamp) # TODO check fetch all @@ -1926,6 +2036,12 @@ def get_option(cls, option_id): def get_options(cls, req_id): return cls.query.filter(cls.req_id == req_id).all() + @classmethod + def get_option_ids(cls, req_id): + records = cls.query.options(load_only(cls.id)).filter(cls.req_id == req_id).all() + ids = [rec.id for rec in records] + return ids + # class ProcDataCount(db.Model): # __tablename__ = 't_proc_data_count' @@ -2009,16 +2125,13 @@ def get_variables(self) -> list[str]: return variables def get_string_x_types(self) -> list[str]: - dtypes = self.x_type.split(',') if self.has_x() else [] - return self.convert_data_type(dtypes) + return self.x_type.split(',') if self.has_x() else [] def get_string_y_types(self) -> list[str]: - dtypes = self.y_type.split(',') if self.has_y() else [] - return self.convert_data_type(dtypes) + return self.y_type.split(',') if self.has_y() else [] def get_string_return_types(self): - dtypes = self.return_type.split(',') if self.return_type else [] - return self.convert_data_type(dtypes) + return self.return_type.split(',') if self.return_type else [] def get_possible_x_types(self) -> list[RawDataTypeDB]: if not self.has_x(): @@ -2084,27 +2197,6 @@ def get_output_data_type( return None - def convert_data_type(self, data_types: List): - # dict_dtype = { - # '': DataType.NULL.name, - # 'r': DataType.REAL.name, - # 'i': DataType.INTEGER.name, - # 't': DataType.TEXT.name, - # 'd': DataType.DATETIME.name, - # 'b': DataType.BOOLEAN.name, - # 'rs': DataType.REAL_SEP.name, - # 'is': DataType.INTEGER_SEP.name, - # 'ers': DataType.EU_REAL_SEP.name, - # 'eis': DataType.EU_INTEGER_SEP.name, - # 'ksn': DataType.K_SEP_NULL.name, - # 'date': DataType.DATE.name, - # 'time': DataType.TIME.name, - # 'cast': FunctionCastDataType.CAST.value, - # 'x': FunctionCastDataType.SAME_AS_X.value, - # 'b_i': DataType.BIG_INT.name, - # } - return [dict_dtype.get(data_type) for data_type in data_types] - def get_models(): all_sub_classes = db.Model.__subclasses__() diff --git a/ap/setting_module/schemas.py b/ap/setting_module/schemas.py index cd4a503..83f5e3e 100644 --- a/ap/setting_module/schemas.py +++ b/ap/setting_module/schemas.py @@ -138,7 +138,9 @@ class Meta: name = fields.String(required=False, allow_none=True) is_category = fields.Boolean(required=False, allow_none=True) is_int_category = fields.Boolean(required=False, allow_none=True) + is_judge = fields.Boolean(required=False, allow_none=True) is_linking_column = fields.Boolean(required=False, allow_none=True) + unit = fields.String(required=False, allow_none=True) parent_column = Nested('ProcessColumnSchema', many=False, required=False) # This field to sever store function config of this column @@ -215,6 +217,9 @@ class Meta: name_local = fields.String(required=False, allow_none=True) shown_name = fields.String(required=False, allow_none=True) is_show_file_name = fields.Boolean(required=False, allow_none=True) + process_factid = fields.String(required=False, allow_none=True) + process_factname = fields.String(required=False, allow_none=True) + datetime_format = fields.String(required=False, allow_none=True) class ProcessFullSchema(ma.SQLAlchemyAutoSchema): diff --git a/ap/setting_module/services/background_process.py b/ap/setting_module/services/background_process.py index 0dfeb3f..5aff30c 100644 --- a/ap/setting_module/services/background_process.py +++ b/ap/setting_module/services/background_process.py @@ -288,7 +288,7 @@ def send_processing_info( 'process_id': job.process_id, 'is_first_imported': False, } - dic_progress[job.id] = (dic_register_progress, AnnounceEvent.DATA_REGISTER.name) + dic_progress[f'{job.id}_register_by_file'] = (dic_register_progress, AnnounceEvent.DATA_REGISTER.name) def update_job_management(job, err=None): diff --git a/bridge/services/sql/sql_generator.py b/ap/setting_module/services/backup_and_restore/__init__.py similarity index 100% rename from bridge/services/sql/sql_generator.py rename to ap/setting_module/services/backup_and_restore/__init__.py diff --git a/ap/setting_module/services/backup_and_restore/backup.py b/ap/setting_module/services/backup_and_restore/backup.py new file mode 100644 index 0000000..8d507f0 --- /dev/null +++ b/ap/setting_module/services/backup_and_restore/backup.py @@ -0,0 +1,86 @@ +import pandas as pd + +from ap.api.setting_module.services.data_import import save_proc_data_count_multiple_dfs +from ap.common.pydn.dblib.db_proxy import DbProxy, gen_data_source_of_universal_db +from ap.common.services.sse import AnnounceEvent, background_announcer +from ap.setting_module.services.backup_and_restore.backup_file_manager import BackupKey, BackupKeysManager +from ap.setting_module.services.backup_and_restore.duplicated_check import ( + get_df_insert_and_duplicated_ids, + remove_unused_columns_and_add_missing_columns, +) +from ap.trace_data.transaction_model import TransactionData + + +def backup_db_data(process_id: int, start_time: str, end_time: str): + backup_keys_manager = BackupKeysManager(process_id=process_id, start_time=start_time, end_time=end_time) + + # TODO: get min max date in database before running this + backup_keys = backup_keys_manager.get_backup_keys_by_day() + total_backup_keys = len(backup_keys) + + if total_backup_keys == 0: + # nothing to do + yield 100 + + # create transaction outside to avoid looping, we only modify `t_table` so this is fine + transaction_data = TransactionData(process_id) + for i, backup_key in enumerate(backup_keys): + backup_db_data_from_key(transaction_data, backup_keys_manager, backup_key) + yield (i + 1) * 100 / total_backup_keys + + background_announcer.announce(True, AnnounceEvent.BACKUP_DATA_FINISHED.name) + + +def backup_db_data_from_key( + transaction_data: TransactionData, + backup_keys_manager: BackupKeysManager, + backup_key: BackupKey, +): + with DbProxy( + gen_data_source_of_universal_db(proc_id=transaction_data.process_id), + True, + immediate_isolation_level=True, + ) as db_instance: + get_date_col = transaction_data.getdate_column.bridge_column_name + df_from_db: pd.DataFrame = transaction_data.get_transaction_by_time_range( + db_instance, + backup_keys_manager.get_start_time(backup_key), + backup_keys_manager.get_end_time(backup_key), + ) + if df_from_db.empty: + return + + # remove data in transaction table + transaction_data.remove_transaction_by_time_range( + db_instance, + backup_keys_manager.get_start_time(backup_key), + backup_keys_manager.get_end_time(backup_key), + ) + + df_file = backup_key.read_file() + # overwrite columns from database to file + df_file = remove_unused_columns_and_add_missing_columns(df_file, df_from_db.columns) + + df_insert = get_df_insert_and_duplicated_ids( + transaction_data, + df_insert=df_from_db, + df_old=df_file, + ) + + df_file_overwrite = pd.concat( + [ + # remove duplicated ids in `df_file` + df_file, + df_insert, + ], + ) + + save_proc_data_count_multiple_dfs( + db_instance, + proc_id=backup_key.process_id, + get_date_col=get_date_col, + dfs_pop_from_db=df_from_db, + dfs_push_to_file=df_insert, + ) + + backup_key.write_file(df_file_overwrite) diff --git a/ap/setting_module/services/backup_and_restore/backup_file_manager.py b/ap/setting_module/services/backup_and_restore/backup_file_manager.py new file mode 100644 index 0000000..c9bb2eb --- /dev/null +++ b/ap/setting_module/services/backup_and_restore/backup_file_manager.py @@ -0,0 +1,101 @@ +from __future__ import annotations + +import contextlib +from datetime import datetime, timedelta +from pathlib import Path +from typing import Any, ClassVar + +import pandas as pd +from pydantic import BaseModel + +from ap.common.common_utils import ( + get_backup_data_folder, + read_parquet_file, + write_parquet_file, +) +from ap.common.constants import UNDER_SCORE, CsvDelimiter, FileExtension + + +class BackupKey(BaseModel): + FIlE_EXTENSION: ClassVar[str] = FileExtension.Parquet.value + FILE_SEP: ClassVar[str] = CsvDelimiter.TSV.value + FILE_FORMAT: ClassVar[str] = '%Y%m%d' + + process_id: int + start_time: datetime + end_time: datetime + + @classmethod + def from_file_name(cls, process_id: int, file_name: str) -> 'BackupKey' | None: + star_time, end_time, *_ = file_name.split(UNDER_SCORE) + with contextlib.suppress(ValueError): + start_time = datetime.strptime(star_time, cls.FILE_FORMAT) + end_time = datetime.strptime(end_time, cls.FILE_FORMAT) + return BackupKey(process_id=process_id, start_time=start_time, end_time=end_time) + return None + + @property + def backup_folder(self): + return Path(get_backup_data_folder(self.process_id)) + + @property + def filename(self) -> Path: + min_time = self.start_time.strftime(self.FILE_FORMAT) + max_time = self.end_time.strftime(self.FILE_FORMAT) + file_name = f'{min_time}{UNDER_SCORE}{max_time}.{self.FIlE_EXTENSION}' + return self.backup_folder / file_name + + def make_backup_dir(self): + self.backup_folder.mkdir(exist_ok=True) + + def delete_file(self): + self.filename.unlink(missing_ok=True) + + def read_file(self) -> pd.DataFrame: + if not self.filename.exists(): + return pd.DataFrame() + return read_parquet_file(str(self.filename)) + + def write_file(self, dataframe: pd.DataFrame) -> None: + if dataframe.empty: + self.delete_file() + else: + self.make_backup_dir() + write_parquet_file(dataframe, str(self.filename)) + + +class BackupKeysManager(BaseModel): + """Handle multiple backup keys, each key must not overlap""" + + process_id: int + start_time: datetime + end_time: datetime + + def model_post_init(self, __context: Any) -> None: + # need to add 1 second to end_time + self.end_time = self.end_time + timedelta(seconds=1) + + def get_start_time(self, backup_key: BackupKey) -> datetime: + return pd.to_datetime(max(self.start_time, backup_key.start_time), utc=True) + + def get_end_time(self, backup_key: BackupKey) -> datetime: + return pd.to_datetime(min(self.end_time, backup_key.end_time), utc=True) + + def get_backup_keys_by_day(self) -> list[BackupKey]: + """Get all non-overlap separated by day backup keys""" + backup_keys = [] + + current_date = self.start_time.date() + end_date = self.end_time.date() + while current_date <= end_date: + next_date = current_date + timedelta(days=1) + backup_keys.append( + BackupKey( + process_id=self.process_id, + start_time=current_date, + end_time=next_date, + ), + ) + current_date = next_date + + return backup_keys diff --git a/ap/setting_module/services/backup_and_restore/duplicated_check.py b/ap/setting_module/services/backup_and_restore/duplicated_check.py new file mode 100644 index 0000000..ff50d58 --- /dev/null +++ b/ap/setting_module/services/backup_and_restore/duplicated_check.py @@ -0,0 +1,58 @@ +from __future__ import annotations + +import pandas as pd + +from ap.setting_module.models import CfgProcessColumn +from ap.trace_data.transaction_model import TransactionData + + +def get_df_insert_and_duplicated_ids( + transaction_data: TransactionData, + *, + df_insert: pd.DataFrame, + df_old: pd.DataFrame, +) -> pd.DataFrame: + """Should return inserting dataframe""" + if df_old.empty or df_insert.empty: + return df_insert + + # convert datetime columns (because edge server handle datetime column as string) + get_date_col = transaction_data.getdate_column.bridge_column_name + df_insert[get_date_col] = pd.to_datetime(df_insert[get_date_col]) + df_old[get_date_col] = pd.to_datetime(df_old[get_date_col]) + + drop_duplicated_columns = get_drop_duplicated_columns(transaction_data) + df_insert_indexes = df_insert.set_index(drop_duplicated_columns).index + df_old_indexes = df_old.set_index(drop_duplicated_columns).index + + df_insert = df_insert[~df_insert_indexes.isin(df_old_indexes)] + return df_insert + + +def remove_unused_columns_and_add_missing_columns( + df: pd.DataFrame, + required_columns: list[str] | pd.Index, +) -> pd.DataFrame: + columns = set(required_columns) + + # remove redundant + intersected_columns = columns.intersection(df.columns) + df = df[intersected_columns] + + # add missing + missing_columns = columns.difference(df.columns) + df.loc[:, missing_columns] = None + + return df + + +def get_drop_duplicated_columns(transaction_data: TransactionData) -> list[str]: + def is_good_column(column: CfgProcessColumn) -> bool: + # do not include function column + if column.function_details: + return False + return True + + good_columns = [col.bridge_column_name for col in filter(is_good_column, transaction_data.cfg_process_columns)] + + return good_columns diff --git a/ap/setting_module/services/backup_and_restore/jobs.py b/ap/setting_module/services/backup_and_restore/jobs.py new file mode 100644 index 0000000..971d396 --- /dev/null +++ b/ap/setting_module/services/backup_and_restore/jobs.py @@ -0,0 +1,80 @@ +from __future__ import annotations + +from datetime import datetime + +from apscheduler.triggers.date import DateTrigger +from pytz import utc + +from ap import scheduler +from ap.api.trace_data.services.proc_link import add_gen_proc_link_job +from ap.common.constants import JobType +from ap.common.scheduler import scheduler_app_context +from ap.setting_module.services.background_process import send_processing_info +from ap.setting_module.services.backup_and_restore.backup import backup_db_data +from ap.setting_module.services.backup_and_restore.restore import restore_db_data + + +def add_backup_data_job(process_id, start_time, end_time): + job_name = job_id = f'{JobType.USER_BACKUP_DATABASE.name}_{process_id}' + dic_params = { + '_job_id': job_id, + '_job_name': job_name, + 'process_id': process_id, + 'start_time': start_time, + 'end_time': end_time, + } + scheduler.add_job( + job_id, + backup_data_job, + trigger=DateTrigger(run_date=datetime.now().astimezone(utc), timezone=utc), + replace_existing=True, + kwargs=dic_params, + ) + + +@scheduler_app_context +def backup_data_job(_job_id, _job_name, *args, **kwargs): + """ + :param _job_id: + :param _job_name: + :param args: + :param kwargs: + :return: + """ + process_id = kwargs.get('process_id') + gen = backup_db_data(*args, **kwargs) + send_processing_info(gen, JobType.USER_BACKUP_DATABASE, process_id=process_id) + add_gen_proc_link_job(process_id=process_id, is_user_request=True) + + +def add_restore_data_job(process_id, start_time, end_time): + job_name = job_id = f'{JobType.USER_RESTORE_DATABASE.name}_{process_id}' + dic_params = { + '_job_id': job_id, + '_job_name': job_name, + 'process_id': process_id, + 'start_time': start_time, + 'end_time': end_time, + } + scheduler.add_job( + job_id, + restore_data_job, + trigger=DateTrigger(run_date=datetime.now().astimezone(utc), timezone=utc), + replace_existing=True, + kwargs=dic_params, + ) + + +@scheduler_app_context +def restore_data_job(_job_id, _job_name, *args, **kwargs): + """ + :param _job_id: + :param _job_name: + :param args: + :param kwargs: + :return: + """ + process_id = kwargs.get('process_id') + gen = restore_db_data(*args, **kwargs) + send_processing_info(gen, JobType.USER_RESTORE_DATABASE, process_id=process_id) + add_gen_proc_link_job(process_id=process_id, is_user_request=True) diff --git a/ap/setting_module/services/backup_and_restore/restore.py b/ap/setting_module/services/backup_and_restore/restore.py new file mode 100644 index 0000000..2064d24 --- /dev/null +++ b/ap/setting_module/services/backup_and_restore/restore.py @@ -0,0 +1,100 @@ +import pandas as pd + +from ap import DATE_FORMAT_STR +from ap.api.setting_module.services.data_import import ( + gen_bulk_insert_sql, + get_insert_params, + insert_data, + save_proc_data_count_multiple_dfs, +) +from ap.common.pydn.dblib.db_proxy import DbProxy, gen_data_source_of_universal_db +from ap.common.services.sse import AnnounceEvent, background_announcer +from ap.setting_module.services.backup_and_restore.backup_file_manager import BackupKey, BackupKeysManager +from ap.setting_module.services.backup_and_restore.duplicated_check import ( + get_df_insert_and_duplicated_ids, + remove_unused_columns_and_add_missing_columns, +) +from ap.trace_data.transaction_model import TransactionData + + +def restore_db_data(process_id, start_time, end_time): + backup_keys_manager = BackupKeysManager(process_id=process_id, start_time=start_time, end_time=end_time) + + # TODO: get min max date in database before running this + backup_keys = backup_keys_manager.get_backup_keys_by_day() + total_backup_keys = len(backup_keys) + + if total_backup_keys == 0: + # nothing to do + yield 100 + + # create transaction outside to avoid looping, we only modify `t_table` so this is fine + transaction_data = TransactionData(process_id) + for i, backup_key in enumerate(backup_keys): + restore_db_data_from_file(transaction_data, backup_keys_manager, backup_key) + yield (i + 1) * 100 / total_backup_keys + + background_announcer.announce(True, AnnounceEvent.RESTORE_DATA_FINISHED.name) + + +def restore_db_data_from_file( + transaction_data: TransactionData, + backup_keys_manager: BackupKeysManager, + backup_key: BackupKey, +): + df_file = backup_key.read_file() + + if df_file.empty: + backup_key.delete_file() + return + + with DbProxy( + gen_data_source_of_universal_db(proc_id=transaction_data.process_id), + True, + immediate_isolation_level=True, + ) as db_instance: + get_date_col = transaction_data.getdate_column.bridge_column_name + df_file[get_date_col] = pd.to_datetime(df_file[get_date_col]) + + is_between = (df_file[get_date_col] >= backup_keys_manager.get_start_time(backup_key)) & ( + df_file[get_date_col] < backup_keys_manager.get_end_time(backup_key) + ) + + df_insert = df_file[is_between] + if df_insert.empty: + # nothing to insert + return + + # get data from db to drop duplicates + df_from_db: pd.DataFrame = transaction_data.get_transaction_by_time_range( + db_instance, + backup_keys_manager.get_start_time(backup_key), + backup_keys_manager.get_end_time(backup_key), + ) + + # overwrite columns from database to file + df_insert = remove_unused_columns_and_add_missing_columns(df_insert, df_from_db.columns) + + df_insert = get_df_insert_and_duplicated_ids( + transaction_data, + df_insert=df_insert, + df_old=df_from_db, + ) + + if not df_insert.empty: + sql_params = get_insert_params(df_insert.columns) + sql_insert = gen_bulk_insert_sql(transaction_data.table_name, *sql_params) + # need to convert to correct datetime format before inserting to database + df_insert[get_date_col] = df_insert[get_date_col].dt.strftime(DATE_FORMAT_STR) + insert_data(db_instance, sql_insert, df_insert.values.tolist()) + + save_proc_data_count_multiple_dfs( + db_instance, + proc_id=backup_key.process_id, + get_date_col=get_date_col, + dfs_push_to_db=df_insert, + dfs_pop_from_file=df_file[is_between], + ) + + df_file_remaining = df_file[~is_between] + backup_key.write_file(df_file_remaining) diff --git a/ap/setting_module/services/process_config.py b/ap/setting_module/services/process_config.py index 6205d1b..9555e02 100644 --- a/ap/setting_module/services/process_config.py +++ b/ap/setting_module/services/process_config.py @@ -1,20 +1,28 @@ +from __future__ import annotations + from functools import lru_cache -from typing import Union +import pandas as pd from sqlalchemy.orm import scoped_session from ap.api.common.services.show_graph_database import preprocess_column +from ap.api.setting_module.services.software_workshop_etl_services import ( + child_equips_table, + get_processes_stmt, +) from ap.api.setting_module.services.v2_etl_services import is_v2_data_source, save_unused_columns from ap.common.constants import ( ID, DataColumnType, DataType, DBType, + MasterDBType, ProcessCfgConst, ) from ap.common.pydn.dblib.db_proxy import DbProxy, gen_data_source_of_universal_db from ap.common.pydn.dblib.postgresql import PostgreSQL from ap.common.services.jp_to_romaji_utils import to_romaji +from ap.common.services.normalization import normalize_list from ap.equations.utils import get_all_functions_info from ap.setting_module.models import ( CfgDataSource, @@ -26,6 +34,7 @@ crud_config, insert_or_update_config, make_session, + use_meta_session, ) from ap.setting_module.schemas import ( FilterSchema, @@ -91,99 +100,139 @@ def get_all_visualizations(): # return process_schema.dump(processes, many=True) -def create_or_update_process_cfg(proc_data, unused_columns): +@use_meta_session() +def create_or_update_process_cfg(proc_data, unused_columns, meta_session: scoped_session = None): need_to_deleted_cols = [] transaction_ds = gen_data_source_of_universal_db(proc_data[ID]) # get existing columns from transaction table if proc_data[ID] and len(unused_columns) and is_v2_data_source(process_id=proc_data[ID]): with DbProxy(transaction_ds, True, immediate_isolation_level=False): - origin_proc_data = TransactionData(proc_data[ID]) + origin_proc_data = TransactionData(proc_data[ID], meta_session=meta_session) for col in unused_columns: col_dat = origin_proc_data.get_cfg_column_by_name(col, is_compare_bridge_column_name=False) if col_dat: need_to_deleted_cols.append(col_dat.bridge_column_name) - with make_session() as meta_session: - # save process config - process: CfgProcess = insert_or_update_config( - meta_session=meta_session, - data=proc_data, - key_names=CfgProcess.id.key, - model=CfgProcess, - ) - meta_session.commit() - - # create column alchemy object + assign process id - columns = proc_data[ProcessCfgConst.PROC_COLUMNS.value] - for proc_column in columns: - # transform data type - proc_column.predict_type = proc_column.data_type - if proc_column.data_type in (DataType.EU_REAL_SEP.name, DataType.REAL_SEP.name): - proc_column.data_type = DataType.REAL.name - if proc_column.data_type in (DataType.EU_INTEGER_SEP.name, DataType.INTEGER_SEP.name): - proc_column.data_type = DataType.INTEGER.name - - proc_column.process_id = process.id - # transform english name - if not proc_column.name_en: - proc_column.name_en = to_romaji(proc_column.column_name) - - # modify column_type (DataColumnType) for main::date and main::time - # if proc_column.data_type in DataColumnType.get_keys(): - # proc_column.column_type = DataColumnType[proc_column.data_type].value - - # re-fill function columns to avoid deleting it - function_columns = CfgProcessColumn.get_by_column_types( - [DataColumnType.GENERATED_EQUATION.value], - proc_ids=[process.id], - session=meta_session, - ) - columns.extend(function_columns) - - # save columns - crud_config( - meta_session=meta_session, - data=columns, - parent_key_names=CfgProcessColumn.process_id.key, - key_names=CfgProcessColumn.column_name.key, - model=CfgProcessColumn, - ) + + # save process config + process: CfgProcess = insert_or_update_config( + meta_session=meta_session, + data=proc_data, + key_names=CfgProcess.id.key, + model=CfgProcess, + autocommit=False, + ) + + # create column alchemy object + assign process id + columns = proc_data[ProcessCfgConst.PROC_COLUMNS.value] + for proc_column in columns: + # transform data type + proc_column.predict_type = proc_column.data_type + if proc_column.data_type in (DataType.EU_REAL_SEP.name, DataType.REAL_SEP.name): + proc_column.data_type = DataType.REAL.name + if proc_column.data_type in (DataType.EU_INTEGER_SEP.name, DataType.INTEGER_SEP.name): + proc_column.data_type = DataType.INTEGER.name + + proc_column.process_id = process.id + # transform english name + if not proc_column.name_en: + proc_column.name_en = to_romaji(proc_column.column_name) + + # re-fill function columns to avoid deleting it + function_columns = CfgProcessColumn.get_by_column_types( + [DataColumnType.GENERATED_EQUATION.value], + proc_ids=[process.id], + session=meta_session, + ) + columns.extend(function_columns) + + # save columns + crud_config( + meta_session=meta_session, + data=columns, + parent_key_names=CfgProcessColumn.process_id.key, + key_names=CfgProcessColumn.column_name.key, + model=CfgProcessColumn, + autocommit=False, + ) # save uncheck cols of v2 only - save_unused_columns(process.id, unused_columns) + save_unused_columns(process.id, unused_columns, meta_session=meta_session) # create table transaction_process with DbProxy(transaction_ds, True, immediate_isolation_level=True) as db_instance: - trans_data = TransactionData(process.id) + trans_data = TransactionData(process.id, meta_session=meta_session) trans_data.create_table(db_instance) # delete unused columns if len(need_to_deleted_cols): # todo: upgrade sqlite3 into 3.40 to delete column trans_data.delete_columns(db_instance, need_to_deleted_cols) - # cols = [{'name': col.bridge_column_name, 'type': col.data_type} for col in columns] - # with DbProxy(gen_data_source_of_universal_db(proc_id), True, immediate_isolation_level=True) as db_instance: - # # create table for transaction data - # db_instance.create_table(gen_transaction_table_name(process.id), cols) return process -def query_database_tables(db_id): +def query_database_tables(db_id, process=None): with make_session() as mss: data_source = mss.query(CfgDataSource).get(db_id) - if not data_source: - return None - - output = {'ds_type': data_source.type, 'tables': []} - # return None if CSV - if data_source.type.lower() in [DBType.CSV.name.lower(), DBType.V2.name.lower()]: - return output - updated_at = data_source.db_detail.updated_at + if not data_source: + return None + + output = {'ds_type': data_source.type, 'tables': [], 'process_factids': [], 'process_factnames': []} + if process: + # if process register tables = selected table + output['tables'] = [process.get('table_name', '')] + output['process_factids'] = [process.get('process_factid', '')] + output['process_factnames'] = [process.get('process_factname', '')] + return output + # return None if CSV + if data_source.type.lower() in [DBType.CSV.name.lower(), DBType.V2.name.lower()]: + return output + + updated_at = data_source.db_detail.updated_at + if data_source.type == DBType.SOFTWARE_WORKSHOP.name: + tables, process_fact_ids, process_fact_names = get_list_process_software_workshop(data_source.id) + output['tables'] = tables + output['process_factids'] = process_fact_ids + output['process_factnames'] = process_fact_names + else: output['tables'] = get_list_tables_and_views(data_source.id, updated_at) return output +def query_database_tables_core(data_source: CfgDataSource, table_prefix): + if not data_source: + return None + + detail_master_types = [] + output = {'ds_type': data_source.type, 'master_type': data_source.master_type, 'tables': []} + # return None if CSV + if data_source.type.lower() in [DBType.CSV.name.lower(), DBType.V2.name.lower()]: + if data_source.csv_detail.directory: + detail_master_types.append(MasterDBType.V2.name) + if data_source.csv_detail.second_directory: + detail_master_types.append(MasterDBType.V2_HISTORY.name) + output['detail_master_types'] = detail_master_types + return output + + updated_at = data_source.db_detail.updated_at + tables = get_list_tables_and_views(data_source, updated_at) + partitions = None + # Edge server does not have logic of EFA + # if data_source.master_type == MasterDBType.EFA.name: + # if table_prefix or data_source.is_direct_import: + # table_name, partitions, _ = get_efa_partitions(tables, table_prefix) + # tables = [table_name] + # else: + # partitions = [] + # tables = EFA_TABLES + + output['tables'] = tables + output['partitions'] = partitions + + return output + + @lru_cache(maxsize=20) def get_list_tables_and_views(data_source_id, updated_at=None): # updated_at only for cache @@ -195,12 +244,20 @@ def get_list_tables_and_views(data_source_id, updated_at=None): return tables -# def get_ds_tables(ds_id): -# try: -# tables = query_database_tables(ds_id) -# return tables['tables'] or [] -# except Exception: -# return [] +@lru_cache(maxsize=20) +def get_list_process_software_workshop(data_source_id, updated_at=None): + # updated_at only for cache + print('database config updated_at:', updated_at, ', so cache can not be used') + with DbProxy(data_source_id) as db_instance: + stmt = get_processes_stmt(limit=None) + sql, params = db_instance.gen_sql_and_params(stmt) + cols, rows = db_instance.run_sql(sql, params=params) + + df = pd.DataFrame(rows) + process_fact_ids = df[child_equips_table.c.child_equip_id.name].to_list() + process_fact_names = df[CfgProcess.process_factname.name].to_list() + process_fact_names = normalize_list(process_fact_names) + return process_fact_names, process_fact_ids, process_fact_names def convert2serialize(obj): @@ -241,7 +298,7 @@ def get_ct_range(proc_id, columns): return [] -def gen_function_column(process_columns, session: Union[scoped_session, PostgreSQL]): +def gen_function_column(process_columns, session: scoped_session | PostgreSQL): for process_column in process_columns: if process_column.function_config is None: continue diff --git a/ap/setting_module/services/register_from_file.py b/ap/setting_module/services/register_from_file.py index e747c75..2914156 100644 --- a/ap/setting_module/services/register_from_file.py +++ b/ap/setting_module/services/register_from_file.py @@ -1,10 +1,52 @@ # import tkinter as tk # from tkinter import filedialog +# import datetime +import datetime -from ap.common.common_utils import API_DATETIME_FORMAT, convert_time -from ap.common.constants import PagePath +from sqlalchemy.orm import scoped_session + +from ap.api.common.services.utils import get_specific_v2_type_based_on_column_names +from ap.api.setting_module.services.polling_frequency import add_import_job +from ap.api.setting_module.services.show_latest_record import ( + gen_preview_data_check_dict, + get_latest_records, + preview_csv_data, +) +from ap.api.setting_module.services.v2_etl_services import get_preview_processes_v2 +from ap.common.common_utils import ( + API_DATETIME_FORMAT, + add_months, + convert_time, + get_month_diff, + get_sorted_files, + is_empty, +) +from ap.common.constants import ( + FILE_NAME, + MAXIMUM_V2_PREVIEW_ZIP_FILES, + CacheType, + DataColumnType, + DBType, + MasterDBType, + PagePath, + RelationShip, +) +from ap.common.memoize import set_all_cache_expired from ap.common.pydn.dblib.db_proxy import DbProxy, gen_data_source_of_universal_db -from ap.setting_module.models import CfgProcess +from ap.common.services.jp_to_romaji_utils import to_romaji + +# from ap.common.pydn.dblib.postgresql import PostgreSQL +from ap.setting_module.models import ( + CfgCsvColumn, + CfgDataSource, + CfgDataSourceCSV, + CfgProcess, + crud_config, + insert_or_update_config, + make_session, +) +from ap.setting_module.schemas import DataSourceSchema, ProcessSchema +from ap.setting_module.services.process_config import create_or_update_process_cfg from ap.trace_data.transaction_model import TransactionData # def browse(resource_type): @@ -19,23 +61,594 @@ # return f_path, resource_type -def get_chm_url_to_redirect(request, proc_id): - proc_cfg = CfgProcess.get_proc_by_id(proc_id) - - target_col_ids = [str(col.id) for col in proc_cfg.columns if col.is_serial_no or col.is_get_date] - target_col_ids = ','.join(target_col_ids) +def get_url_to_redirect(request, proc_ids, page): + col_ids = [] + for proc_id in proc_ids: + proc_cfg = CfgProcess.get_proc_by_id(proc_id) + col_ids.extend([str(col.id) for col in proc_cfg.columns if col.is_serial_no or col.is_get_date]) + target_col_ids = ','.join(col_ids) # get start_datetime and end_datetime - trans_data = TransactionData(proc_cfg.id) - with DbProxy(gen_data_source_of_universal_db(proc_id), True, immediate_isolation_level=True) as db_instance: + trans_data = TransactionData(proc_ids[0]) + with DbProxy(gen_data_source_of_universal_db(proc_ids[0]), True, immediate_isolation_level=True) as db_instance: max_datetime = trans_data.get_max_date_time_by_process_id(db_instance) min_datetime = trans_data.get_min_date_time_by_process_id(db_instance) host_url = request.host_url - page = PagePath.CHM.value + month_diff = get_month_diff(min_datetime, max_datetime) + if page in PagePath.FPP.value and month_diff > 1: + min_datetime = add_months(max_datetime, -1) min_datetime = convert_time(min_datetime, format_str=API_DATETIME_FORMAT) max_datetime = convert_time(max_datetime, format_str=API_DATETIME_FORMAT) + end_procs = ','.join([str(_id) for _id in proc_ids]) + # get target page from bookmark - target_url = f'{host_url}{page}?columns={target_col_ids}&start_datetime={min_datetime}&end_datetime={max_datetime}&end_procs=[{proc_id}]&load_gui_from_url=1&page=chm' # noqa + target_url = f'{host_url}{page}?columns={target_col_ids}&start_datetime={min_datetime}&end_datetime={max_datetime}&end_procs=[{end_procs}]&load_gui_from_url=1&page={page.split("/")[1]}' # noqa return target_url + + +# def get_latest_records_core(dic_preview: dict, limit: int = 5): +# cols_with_types = [] +# headers = normalize_list(dic_preview.get('header')) +# headers = [normalize_str(col) for col in headers] +# data_types = dic_preview.get('dataType') +# same_values = dic_preview.get('same_values') +# is_v2_history = dic_preview.get('v2_type') == DBType.V2_HISTORY +# if headers and data_types: +# column_raw_name = dic_preview.get('org_headers') +# cols_with_types = gen_cols_with_types(headers, data_types, same_values, is_v2_history, column_raw_name) +# cols = headers +# +# # get rows +# df_rows = dic_preview.get('content', None) +# previewed_files = dic_preview.get('previewed_files') +# +# # change name if romaji cols is duplicated +# cols_with_types, cols_duplicated = change_duplicated_columns(cols_with_types) +# has_ct_col = True +# dummy_datetime_idx = None +# if DataType.DATETIME.value not in data_types: +# dummy_datetime_idx = 0 +# cols_with_types.insert( +# dummy_datetime_idx, +# { +# 'column_name': DATETIME_DUMMY, +# 'data_type': DataType.DATETIME.name, +# 'romaji': DATETIME_DUMMY, +# 'is_date': True, +# 'check_same_value': {'is_null': False, 'is_same': False}, +# }, +# ) +# cols.insert(dummy_datetime_idx, DATETIME_DUMMY) +# if is_valid_list(df_rows): +# df_rows = gen_dummy_datetime(df_rows) +# +# if DATETIME_DUMMY in cols or DataType.DATETIME.value not in data_types: +# dummy_datetime_idx = 0 +# has_ct_col = False +# +# rows = [] +# if is_valid_list(df_rows): +# data_type_by_cols = {} +# for col_data in cols_with_types: +# data_type_by_cols[col_data['column_name']] = col_data['data_type'] +# # convert to correct dtypes +# for col in df_rows.columns: +# try: +# if data_type_by_cols[col] == DataType.INTEGER.name: +# df_rows[col] = df_rows[col].astype('float64').astype('Int64') +# +# if data_type_by_cols[col] == DataType.TEXT.name: +# # fill na to '' for string column +# df_rows[col] = df_rows[col].astype('string').fillna('') +# except Exception: +# continue +# rows = transform_df_to_rows(cols, df_rows, limit) +# +# # Set raw data type base on data_type +# for col_data in cols_with_types: +# if col_data['data_type'] == DataType.DATETIME.name: +# col_data['raw_data_type'] = RawDataTypeDB.DATETIME.value +# if col_data['data_type'] == DataType.DATE.name: +# col_data['raw_data_type'] = RawDataTypeDB.DATE.value +# if col_data['data_type'] == DataType.TIME.name: +# col_data['raw_data_type'] = RawDataTypeDB.TIME.value +# if col_data['data_type'] == DataType.BIG_INT.name: +# col_data['raw_data_type'] = RawDataTypeDB.BIG_INT.value +# elif col_data['data_type'] == DataType.INTEGER.name: +# if col_data['is_big_int']: +# col_data['raw_data_type'] = RawDataTypeDB.BIG_INT.value +# else: +# col_data['raw_data_type'] = RawDataTypeDB.INTEGER.value +# elif col_data['data_type'] == DataType.REAL.name: +# col_data['raw_data_type'] = RawDataTypeDB.REAL.value +# elif col_data['data_type'] == DataType.BOOLEAN.name: +# col_data['raw_data_type'] = RawDataTypeDB.BOOLEAN.value +# elif col_data['data_type'] == DataType.TEXT.name: +# col_data['raw_data_type'] = RawDataTypeDB.TEXT.value +# +# is_rdb = False +# return cols_with_types, rows, cols_duplicated, previewed_files, has_ct_col, dummy_datetime_idx, is_rdb + + +def get_proc_config_infos(dic_preview: dict, limit: int = 5, is_v2=False, process_names=[]) -> dict: + process_configs = [] + if not is_v2: + process_names = [None] + + is_file_path = dic_preview['is_file_path'] + datasource_config = { + 'name': datetime.datetime.utcnow().timestamp().__str__(), + 'type': DBType.V2.name if is_v2 else DBType.CSV.name, + 'master_type': DBType.V2.name if is_v2 else DBType.CSV.name, + 'csv_detail': { + 'directory': dic_preview.get('file_name') if is_file_path else dic_preview.get('directory'), + 'delimiter': 'Auto', + 'csv_columns': None, + 'is_file_path': is_file_path, + }, + } + + for process_name in process_names: + latest_rec = get_latest_records( + None, + None, + file_name=dic_preview.get('file_name'), + directory=dic_preview.get('directory'), + limit=limit, + is_v2_datasource=is_v2, + filtered_process_name=process_name, + ) + if not latest_rec: + return { + 'cols': [], + 'rows': [], + 'cols_duplicated': [], + 'fail_limit': None, + 'has_ct_col': None, + 'dummy_datetime_idx': None, + 'is_rdb': False, + } + + ( + cols_with_types, + rows, + cols_duplicated, + previewed_files, + has_ct_col, + dummy_datetime_idx, + is_rdb, + ) = latest_rec + dic_preview_limit = gen_preview_data_check_dict(rows, previewed_files) + data_group_type = {key: DataColumnType[key].value for key in DataColumnType.get_keys()} + process_config = { + 'origin_name': process_name, + 'name_jp': process_name, + 'name_en': to_romaji(process_name) if process_name else process_name, + 'name_local': '', + 'cols': cols_with_types, + 'rows': rows, + 'cols_duplicated': cols_duplicated, + 'fail_limit': dic_preview_limit, + 'has_ct_col': has_ct_col, + 'dummy_datetime_idx': None if is_rdb else dummy_datetime_idx, + 'data_group_type': data_group_type, + 'is_rdb': is_rdb, + } + process_configs.append(process_config) + + datasource_config['csv_detail']['csv_columns'] = cols_with_types + + return { + 'processConfigs': process_configs, + 'datasourceConfig': datasource_config, + } + + +def proc_config_infos_for_v2(dic_preview: dict) -> dict: + [cols_with_types, _, _, _, _, _, _] = get_latest_records(None, 0) + is_file_path = dic_preview['is_file_path'] + data_src_dict = { + 'name': datetime.datetime.utcnow().timestamp().__str__(), + 'type': DBType.CSV.name, + 'master_type': MasterDBType.V2.name, + 'csv_detail': { + 'directory': dic_preview['file_name'] if is_file_path else dic_preview.get('directory'), + 'delimiter': 'Auto', + 'csv_columns': cols_with_types, + 'is_file_path': is_file_path, + }, + } + proc_config_infos = [] + + # with BridgeStationModel.get_db_proxy() as db_instance: # type: PostgreSQL + # # Generate data source + # data_src: CfgDataSource = DataSourceSchema().load(data_src_dict) + # data_source_id = generate_data_source(db_instance, data_src) + # generate_data_source_csv(db_instance, data_source_id, data_src) + # generate_csv_columns(db_instance, data_source_id, data_src) + # + # # Generate data table + # dict_tables = query_database_tables_db_instance(data_source_id, db_instance=db_instance) + # detail_master_types = dict_tables.get('detail_master_types') + # cfg_data_source, cfg_data_tables = generate_data_table( + # db_instance, + # data_source_id, + # detail_master_types=detail_master_types, + # ) + # + # temp_process_ids = [] + # for cfg_data_table in cfg_data_tables: + # # Do scan file + # generate_csv_management(db_instance, cfg_data_table.id) + # + # # Do scan master + # generate_master_data(db_instance, cfg_data_table.id) + # + # # Do scan data type and gen process config + # generate_data_type(db_instance, cfg_data_table.id) + # + # # Do get process config info and data sample + # process_id_with_data_table_ids = MappingFactoryMachine.get_process_id_with_data_table_id( + # db_instance, + # [cfg_data_table.id], + # ) + # process_ids = {x.get('process_id') for x in process_id_with_data_table_ids} + # temp_process_ids.extend(process_ids) + # for process_id in process_ids: + # proc_info_dict = get_process_config_info(process_id, db_instance=db_instance) + # proc_config_infos.append(proc_info_dict) + # + # # Do remove pickle sample file + # for process_id in temp_process_ids: + # delete_preview_data_file_folder(process_id) + # + # db_instance.connection.rollback() + + return { + 'processConfigs': proc_config_infos, + 'datasourceConfig': data_src_dict, + } + + +def get_latest_records_for_register_by_file(file_name: str = None, directory: str = None, limit: int = 5): + delimiter = 'Auto' + skip_head = None + etl_func = '' + + dic_preview = preview_csv_data( + directory, + etl_func, + delimiter, + limit, + return_df=True, + max_records=1000, + file_name=file_name, + skip_head=skip_head, + ) + + dic_preview['is_file_path'] = file_name is not None + column_raw_name = dic_preview.get('org_headers') + master_type = get_specific_v2_type_based_on_column_names(column_raw_name) + if master_type is not None: + # In case of V2 + sorted_files = [file_name] if file_name else get_sorted_files(directory) + v2_process_names = get_preview_processes_v2( + sorted_files, + maximum_files=MAXIMUM_V2_PREVIEW_ZIP_FILES, + ) + data_src_dict = get_proc_config_infos(dic_preview, limit=limit, is_v2=True, process_names=v2_process_names) + data_src_dict['datasourceConfig']['detail_master_type'] = master_type + return data_src_dict + + # In case of OTHER + return get_proc_config_infos(dic_preview, limit=limit) + + +def generate_data_source( + meta_session: scoped_session, + request_data_source: CfgDataSource, +) -> CfgDataSource: + return insert_or_update_config( + meta_session, + request_data_source, + exclude_columns=[CfgDataSource.order.key], + autocommit=False, + ) + + +def generate_data_source_csv( + meta_session: scoped_session, + request_data_source: CfgDataSource, + cfg_data_source: CfgDataSource, +) -> CfgDataSourceCSV: + csv_columns = request_data_source.csv_detail.csv_columns + csv_columns = [col for col in csv_columns if not is_empty(col.column_name)] + request_data_source.csv_detail.csv_columns = csv_columns + return insert_or_update_config( + meta_session, + request_data_source.csv_detail, + parent_obj=cfg_data_source, + parent_relation_key=CfgDataSource.csv_detail.key, + parent_relation_type=RelationShip.ONE, + autocommit=False, + ) + + +def generate_csv_columns( + meta_session: scoped_session, + request_data_source: CfgDataSource, + cfg_data_source_csv: CfgDataSourceCSV, +): + crud_config( + meta_session, + request_data_source.csv_detail.csv_columns, + CfgCsvColumn.data_source_id.key, + CfgCsvColumn.column_name.key, + parent_obj=cfg_data_source_csv, + parent_relation_key=CfgDataSourceCSV.csv_columns.key, + parent_relation_type=RelationShip.MANY, + autocommit=False, + ) + + +# def generate_data_table( +# db_instance: PostgreSQL, +# data_source_id: int, +# proc_data: ProcessSchema = None, +# detail_master_types=None, +# ) -> tuple[BSCfgDataSource, list[BSCfgDataTable]]: +# # insert cfg process & cfg process column +# serial_col = None +# datetime_col = None +# for col in (proc_data or {'columns': []}).get('columns'): +# if col.is_get_date: +# datetime_col = col.column_raw_name +# elif col.is_serial_no: +# serial_col = col.column_raw_name +# +# # Gen data table +# cfg_data_source = BSCfgDataSource( +# BSCfgDataSource.get_by_id(db_instance, data_source_id), +# db_instance=db_instance, +# is_cascade=True, +# ) +# cfg_data_source, cfg_data_tables = gen_config_data_db_instance( +# cfg_data_source, +# serial_col, +# datetime_col, +# None, +# None, +# None, +# detail_master_types, +# db_instance=db_instance, +# ) # type: BSCfgDataSource, list[BSCfgDataTable] +# +# for cfg_data_table in cfg_data_tables: +# get_n_save_partition_range_time_from_factory_db_db_instance( +# cfg_data_table, +# is_scan=True, +# db_instance=db_instance, +# ) +# +# return cfg_data_source, cfg_data_tables +# +# +# def generate_csv_management(db_instance: PostgreSQL, data_table_id: int): +# split_cols = BSCfgDataTableColumn.get_split_columns(db_instance, data_table_id) +# columns = BSCfgDataTableColumn.get_column_names_by_data_group_types(db_instance, data_table_id, split_cols) +# +# # Do scan file +# scan_files_generator = scan_files(data_table_id, columns, db_instance=db_instance) +# list(scan_files_generator) +# +# +# def generate_master_data(db_instance: PostgreSQL, data_table_id: int): +# save_scan_master_target_files(db_instance, data_table_id) +# scan_master_generator = scan_master(data_table_id, db_instance=db_instance) +# list(scan_master_generator) +# +# +# def generate_data_type(db_instance: PostgreSQL, data_table_id: int): +# scan_data_type_generator = scan_data_type(data_table_id, db_instance=db_instance) +# list(scan_data_type_generator) +# +# +# def get_all_process_ids(db_instance: PostgreSQL, data_table_id: int) -> set[int]: +# process_id_rows = MappingFactoryMachine.get_process_id_with_data_table_id(db_instance, [data_table_id]) +# return {row.get(MData.Columns.process_id.name) for row in process_id_rows} +# +# +# def update_process_infos(db_instance: PostgreSQL, process_ids: set[int], proc_configs: list[dict]): +# for process_id in process_ids: +# proc = BSCfgProcess.get_by_process_id(db_instance, process_id, is_cascade_column=True) +# for request_proc_config in proc_configs: +# proc_config = request_proc_config['proc_config'] +# if proc_config.get('origin_name_en', '') == proc.name_en or proc_config.get('name', '') == proc.name: +# del proc_config['origin_name_en'] +# proc_config = ProcessSchema().load(proc_config) +# unused_columns = (request_proc_config.get('unused_columns') or {}).get('columns', []) +# unused_column_raw_names = [unused_column.get('column_raw_name') for unused_column in unused_columns] +# update_process_info( +# db_instance, +# process_id, +# proc, +# proc_config, +# unused_columns=unused_column_raw_names, +# ) +# break +# +# +# def update_process_info( +# db_instance: PostgreSQL, +# process_id: int, +# existing_process, +# request_process, +# unused_columns: list[str] = None, +# ): +# transaction_data_obj = TransactionData(process_id, db_instance=db_instance) +# transaction_data_obj.cast_data_type_for_columns(db_instance, existing_process, request_process) +# existing_process_columns = existing_process.columns +# +# # Update process names & flag is_show_file_name +# BSCfgProcess.update_by_conditions( +# db_instance, +# { +# BSCfgProcess.Columns.name.name: request_process.get('name'), +# BSCfgProcess.Columns.name_jp.name: request_process.get('name_jp'), +# BSCfgProcess.Columns.name_local.name: request_process.get('name_local'), +# BSCfgProcess.Columns.name_en.name: request_process.get('name_en'), +# BSCfgProcess.Columns.is_show_file_name.name: False, +# }, +# dic_conditions={BSCfgProcess.Columns.id.name: process_id}, +# ) +# +# # Delete column if it was uncheck +# for delete_column_name in {DataGroupType.FileName.name, *unused_columns}: +# target_column = next( +# filter( +# lambda column: column.column_raw_name == delete_column_name, +# existing_process_columns, +# ), +# None, +# ) +# +# dic_conditions = {BSCfgProcessColumn.Columns.id.name: target_column.id} +# BSCfgProcessColumn.delete_by_condition(db_instance, dic_conditions, mode=0) +# MData.update_by_conditions(db_instance, {MData.Columns.is_hide.name: True}, dic_conditions=dic_conditions) +# +# # Update process columns +# for request_process_column in request_process['columns']: +# existing_process_column = next( +# filter( +# lambda column: column.column_raw_name == request_process_column.column_raw_name, +# existing_process_columns, +# ), +# None, +# ) +# +# if existing_process_column is None: +# raise Exception('Missing column -> It maybe be bug relate to database session!') +# +# dic_update_values = {} +# # Update name english +# if existing_process_column.name_en != request_process_column.name_en: +# dic_update_values[BSCfgProcessColumn.Columns.name_en.name] = ( +# request_process_column.name_en if not is_empty(request_process_column.name_en) else EMPTY_STRING +# ) +# +# # Update name japanese +# if existing_process_column.name_jp != request_process_column.name_jp: +# dic_update_values[BSCfgProcessColumn.Columns.name_jp.name] = ( +# request_process_column.name_jp if not is_empty(request_process_column.name_jp) else EMPTY_STRING +# ) +# +# # Update name local +# if existing_process_column.name_local != request_process_column.name_local: +# dic_update_values[BSCfgProcessColumn.Columns.name_local.name] = ( +# request_process_column.name_local if not is_empty(request_process_column.name_local) else EMPTY_STRING +# ) +# +# # Update format +# if existing_process_column.format != request_process_column.format: +# dic_update_values[BSCfgProcessColumn.Columns.format.name] = ( +# request_process_column.format if not is_empty(request_process_column.format) else None +# ) +# +# # Update raw data type and data type +# if existing_process_column.raw_data_type != request_process_column.raw_data_type: +# dic_update_values[BSCfgProcessColumn.Columns.raw_data_type.name] = request_process_column.raw_data_type +# dic_update_values[ +# BSCfgProcessColumn.Columns.data_type.name +# ] = RawDataTypeDB.convert_raw_data_type_to_data_type(request_process_column.raw_data_type) +# +# if dic_update_values: +# BSCfgProcessColumn.update_by_conditions( +# db_instance, +# dic_update_values, +# dic_conditions={BSCfgProcessColumn.Columns.id.name: existing_process_column.id}, +# ) +# +# +# def pull_csv_data(db_instance, cfg_data_table): +# job_info = JobInfo() +# job_type = JobType.PULL_CSV_DATA +# job_info.job_type = job_type +# etl_service = ETLController.get_etl_service(cfg_data_table, db_instance=db_instance) +# pull_csv_generator = pull_csv( +# JobType.PULL_CSV_DATA, +# etl_service, +# job_info, +# ignore_add_job=True, +# db_instance=db_instance, +# ) +# list(pull_csv_generator) + + +def generate_process_config(meta_session: scoped_session, proc_config, data_source_id: int) -> CfgProcess: + process_schema = ProcessSchema() + request_process_config = proc_config.get('proc_config') + request_unused_columns = [] # process not register, do need remove unused column + request_process_config['data_source_id'] = data_source_id + del request_process_config['origin_name'] + # New process, set id = None + request_process_config['id'] = None + proc_data = process_schema.load(request_process_config) + for column in proc_data['columns']: + # check is show file name + if column.column_raw_name == FILE_NAME: + proc_data[CfgProcess.is_show_file_name.name] = True + break + + cfg_process = create_or_update_process_cfg(proc_data, request_unused_columns, meta_session=meta_session) + + return cfg_process + + +def handle_importing_by_one_click(request): + register_by_file_request_id = request.get('request_id') + csv_info = request.get('csv_info') + request_proc_configs = request.get('proc_configs') + + # Detect truly detail master type (There are only 2 types: V2 or V2_HISTORY) + detail_master_type = csv_info.get('detail_master_type', MasterDBType.OTHERS.name) + if 'detail_master_type' in csv_info: + if detail_master_type in [MasterDBType.V2_HISTORY.name, MasterDBType.V2_MULTI_HISTORY.name]: + csv_info['csv_detail']['second_directory'] = csv_info['csv_detail']['directory'] + csv_info['csv_detail']['directory'] = None + detail_master_type = MasterDBType.V2_HISTORY.name + elif detail_master_type in [MasterDBType.V2.name, MasterDBType.V2_MULTI.name]: + detail_master_type = MasterDBType.V2.name + del csv_info['detail_master_type'] + + processes = [] + with make_session() as meta_session: + for request_proc_config in request_proc_configs: + # Do generate data source + request_data_source: CfgDataSource = DataSourceSchema().load(csv_info) + if request_data_source.type == MasterDBType.V2.name: + process_name = request_proc_config.get('proc_config').get('origin_name') + request_data_source.name = f'{request_data_source.name}_{process_name}' + request_data_source.csv_detail.process_name = process_name + + cfg_data_source = generate_data_source(meta_session, request_data_source) + cfg_data_source_csv = generate_data_source_csv(meta_session, request_data_source, cfg_data_source) + generate_csv_columns(meta_session, request_data_source, cfg_data_source_csv) + + # Do gen process config + process = generate_process_config(meta_session, request_proc_config, cfg_data_source.id) + processes.append(process) + + set_all_cache_expired(CacheType.CONFIG_DATA) + + # Add import data job + for process in processes: # type: CfgProcess + add_import_job( + process, + run_now=True, + is_user_request=True, + register_by_file_request_id=register_by_file_request_id, + ) + + return [proc.id for proc in processes] diff --git a/ap/setting_module/services/trace_config.py b/ap/setting_module/services/trace_config.py index 85dbe4b..ab6a4c7 100644 --- a/ap/setting_module/services/trace_config.py +++ b/ap/setting_module/services/trace_config.py @@ -41,8 +41,8 @@ def gen_cfg_trace(trace): trace_keys = [] for idx, self_col_id in enumerate(self_col_ids): target_col_id = target_col_ids[idx] - delta_time = delta_times[idx] - cut_off = cut_offs[idx] + delta_time = delta_times[idx] if delta_times else None + cut_off = cut_offs[idx] if cut_offs else None self_sub_from, self_sub_to = (None, None) target_sub_from, target_sub_to = (None, None) if self_sub_strs: @@ -56,8 +56,8 @@ def gen_cfg_trace(trace): target_column_id=int(target_col_id), target_column_substr_from=int(target_sub_from) if target_sub_from else 0, target_column_substr_to=int(target_sub_to) if target_sub_to else 0, - delta_time=int(delta_time) if delta_time else None, - cut_off=int(cut_off) if cut_off else None, + delta_time=float(delta_time) if delta_time else None, + cut_off=float(cut_off) if cut_off else None, ) trace_keys.append(trace_key) self_process_id = trace.get('from') diff --git a/ap/static/aggregate_plot/css/aggregate_plot.css b/ap/static/aggregate_plot/css/aggregate_plot.css index 6c9008a..4bac7eb 100644 --- a/ap/static/aggregate_plot/css/aggregate_plot.css +++ b/ap/static/aggregate_plot/css/aggregate_plot.css @@ -13,7 +13,6 @@ width: calc(50% - 15px); text-align: right; padding-right: 2px; - } .cyclic-calender-option-list { @@ -77,4 +76,4 @@ flex: 1; height: 100%; width: 100%; -} \ No newline at end of file +} diff --git a/ap/static/aggregate_plot/js/aggregate_plot.js b/ap/static/aggregate_plot/js/aggregate_plot.js index 8646c95..bd916ac 100644 --- a/ap/static/aggregate_plot/js/aggregate_plot.js +++ b/ap/static/aggregate_plot/js/aggregate_plot.js @@ -1,8 +1,3 @@ -/* eslint-disable no-restricted-syntax,prefer-arrow-callback */ -/* eslint-disable guard-for-in */ -/* eslint-disable no-unused-vars */ -/* eslint-disable no-undef */ -/* eslint-disable no-use-before-define */ const REQUEST_TIMEOUT = setRequestTimeOut(); const MAX_NUMBER_OF_GRAPH = 18; const MAX_NUMBER_OF_SENSOR = 18; @@ -12,10 +7,10 @@ let currentData = null; const graphStore = new GraphStore(); let scaleOption = scaleOptionConst.AUTO; const AGP_YAXIS_DISPLAY_MODES = { - COUNT: "count", - Y_AXIS_TOTAL: "yAxisTotal", - Y_AXIS_FACET: "yAxisFacet", -} + COUNT: 'count', + Y_AXIS_TOTAL: 'yAxisTotal', + Y_AXIS_FACET: 'yAxisFacet', +}; let yAxisDisplayMode = AGP_YAXIS_DISPLAY_MODES.COUNT; let useDivsArray = []; let useDivFromTo = []; @@ -32,7 +27,6 @@ const i18n = { outlier: $('#i18nOutlierVal').text(), }; - const formElements = { formID: '#traceDataForm', btnAddCondProc: '#btn-add-cond-proc', @@ -62,18 +56,12 @@ const calenderFormat = { 'yyyymmdd', 'yymmdd', 'mmdd', - 'dd' + 'dd', ], - group2: [ - 'yyyymm', - 'yymm', - 'mm', - 'yyyy', - 'yy' - ] + group2: ['yyyymm', 'yymm', 'mm', 'yyyy', 'yy'], }, 2: { - group1: [ + group1: [ 'yyyy-mm-dd_HH', 'yy-mm-dd_HH', 'mm-dd_HH', @@ -89,50 +77,44 @@ const calenderFormat = { 'dd_Fri', 'Fri', ], - group2: [ - 'yyyymm', - 'yymm', - 'mm', - 'yyyy', - 'yy' - ] + group2: ['yyyymm', 'yymm', 'mm', 'yyyy', 'yy'], }, 3: { group1: [ - "ffffh", - "ffffq", - "ffh", - "ffq", - "ffff", - "ff", - "h", - "q", - "ffffmm", - "ffmm", - "ww" + 'ffffh', + 'ffffq', + 'ffh', + 'ffq', + 'ffff', + 'ff', + 'h', + 'q', + 'ffffmm', + 'ffmm', + 'ww', ], }, 4: { group1: [ - "FY2022H1", - "FY2022Q1", - "FY22H1", - "FY22Q1", - "FY2022", - "FY22", - "H1", - "Q1", - "FY2022-mm", - "FY22-mm", - "Www", - "Www_mm-dd", - "yyyy_Www", - "yyyy_Www_mm-dd", - "yy_Www", - "yy_Www_mm-dd" - ] - } -} + 'FY2022H1', + 'FY2022Q1', + 'FY22H1', + 'FY22Q1', + 'FY2022', + 'FY22', + 'H1', + 'Q1', + 'FY2022-mm', + 'FY22-mm', + 'Www', + 'Www_mm-dd', + 'yyyy_Www', + 'yyyy_Www_mm-dd', + 'yy_Www', + 'yy_Www_mm-dd', + ], + }, +}; const AGP_EXPORT_URL = { CSV: { @@ -172,9 +154,14 @@ $(() => { onChangeDivInFacet(); }); - // add first condition process - const condProcItem = addCondProc(endProcs.ids, endProcs.names, '', formElements.formID, 'btn-add-cond-proc'); + const condProcItem = addCondProc( + endProcs.ids, + endProcs.names, + '', + formElements.formID, + 'btn-add-cond-proc', + ); condProcItem(); // click even of condition proc add button @@ -194,7 +181,6 @@ $(() => { formElements.divideOption.trigger('change'); renderCyclicCalenderModal(); - // validation initValidation(formElements.formID); @@ -213,7 +199,11 @@ $(() => { }, 2000); // validate and change to default and max value cyclic term - validateInputByNameWithOnchange(CYCLIC_TERM.DIV_NUM, { MAX: 1000, MIN: 1, DEFAULT: 120 }); + validateInputByNameWithOnchange(CYCLIC_TERM.DIV_NUM, { + MAX: 1000, + MIN: 1, + DEFAULT: 120, + }); initializeDateTimeRangePicker(); initializeDateTimePicker(); @@ -222,9 +212,9 @@ $(() => { const setScaleOption = (scaleOption = scaleOptionConst.AUTO) => { formElements.scaleOption.val(scaleOption); - formElements.yAxisPercentOrCount.val(AGP_YAXIS_DISPLAY_MODES.COUNT) + formElements.yAxisPercentOrCount.val(AGP_YAXIS_DISPLAY_MODES.COUNT); yAxisDisplayMode = AGP_YAXIS_DISPLAY_MODES.COUNT; -} +}; const getScaleOption = () => { return formElements.scaleOption.val(); @@ -235,8 +225,8 @@ const onChangeScaleOption = () => { const scale = getScaleOption(); scaleOption = scale; drawAGP(currentData, scaleOption, yAxisDisplayMode); - }) -} + }); +}; const showAgP = (clearOnFlyFilter = true) => { requestStartedAt = performance.now(); @@ -285,15 +275,19 @@ const collectInputAsFormData = (clearOnFlyFilter, autoUpdate = false) => { const compareType = formData.get('compareType'); if (compareType === divideOptions.cyclicCalender) { if (!formData.get(CYCLIC_TERM.DIV_OFFSET)) { - const offsetH = Number(divOffset.split(':')[0]) + Number(divOffset.split(':')[1]) / 60; + const offsetH = + Number(divOffset.split(':')[0]) + + Number(divOffset.split(':')[1]) / 60; formData.set(CYCLIC_TERM.DIV_OFFSET, offsetH.toString()); } // convert divFromTo from local to UTC - const divDates = divFromTo.map(date => toUTCDateTime(date, null, true)); + const divDates = divFromTo.map((date) => + toUTCDateTime(date, null, true), + ); formData.set('divDates', JSON.stringify(divDates)); - formData.set('divFormats', JSON.stringify(divFormats)) + formData.set('divFormats', JSON.stringify(divFormats)); } if (compareType !== divideOptions.cyclicCalender) { @@ -317,14 +311,18 @@ const transformColorsParams = (formData) => { formData.delete('colorVar'); // get colorVar from active GUI const colorVars = {}; - $('select[name=colorVar]').get().forEach(ele => { - const targetID = $(ele).data('target-var-id'); - const colorVal = $(ele).val(); - const isObjectiveVar = $(`input[name^=GET02_VALS_SELECT][value=${targetID}]`).prop('checked'); - if (colorVal && colorVal !== '' && isObjectiveVar) { - colorVars[targetID] = colorVal; - } - }); + $('select[name=colorVar]') + .get() + .forEach((ele) => { + const targetID = $(ele).data('target-var-id'); + const colorVal = $(ele).val(); + const isObjectiveVar = $( + `input[name^=GET02_VALS_SELECT][value=${targetID}]`, + ).prop('checked'); + if (colorVal && colorVal !== '' && isObjectiveVar) { + colorVars[targetID] = colorVal; + } + }); formData.append('aggColorVar', JSON.stringify(colorVars)); return formData; @@ -332,8 +330,6 @@ const transformColorsParams = (formData) => { const queryDataAndShowAGP = (clearOnFlyFilter = false, autoUpdate = false) => { const formData = collectInputAsFormData(clearOnFlyFilter, autoUpdate); - - // validate form const hasDiv = !!formData.get('div'); const isDivideByCat = formData.get('compareType') === CONST.CATEGORY; @@ -344,52 +340,78 @@ const queryDataAndShowAGP = (clearOnFlyFilter = false, autoUpdate = false) => { return; } - showGraphCallApi('/ap/api/agp/plot', formData, REQUEST_TIMEOUT, async (res) => { - afterShowAGP(); - - // sort graphs - if (latestSortColIds && latestSortColIds.length) { - res.ARRAY_FORMVAL = sortGraphs(res.ARRAY_FORMVAL, 'GET02_VALS_SELECT', latestSortColIds); - res.array_plotdata = sortGraphs(res.array_plotdata, 'end_col_id', latestSortColIds); - } - - currentData = res; - graphStore.setTraceData(_.cloneDeep(res)); + showGraphCallApi( + '/ap/api/agp/plot', + formData, + REQUEST_TIMEOUT, + async (res) => { + afterShowAGP(); + + // sort graphs + if (latestSortColIds && latestSortColIds.length) { + res.ARRAY_FORMVAL = sortGraphs( + res.ARRAY_FORMVAL, + 'GET02_VALS_SELECT', + latestSortColIds, + ); + res.array_plotdata = sortGraphs( + res.array_plotdata, + 'end_col_id', + latestSortColIds, + ); + } - const scaleOption = getScaleOption(); + currentData = res; + graphStore.setTraceData(_.cloneDeep(res)); - useDivsArray = [...divArrays]; - useDivFromTo = [...divFromTo]; + const scaleOption = getScaleOption(); - drawAGP(res, scaleOption, yAxisDisplayMode, clearOnFlyFilter); + useDivsArray = [...divArrays]; + useDivFromTo = [...divFromTo]; - // show info table - showInfoTable(res); + drawAGP(res, scaleOption, yAxisDisplayMode, clearOnFlyFilter); - if (!autoUpdate) { - $('html, body').animate({ - scrollTop: $(formElements.agpCard).offset().top, - }, 500); - } + // show info table + showInfoTable(res); - setPollingData(formData, longPollingHandler, []); + if (!autoUpdate) { + $('html, body').animate( + { + scrollTop: getOffsetTopDisplayGraph('#scaleOption'), + }, + 500, + ); + } - }); + setPollingData(formData, longPollingHandler, []); + }, + ); }; const longPollingHandler = () => { $(`input[name=${CYCLIC_TERM.DIV_CALENDER}]:checked`).trigger('change'); queryDataAndShowAGP(false, true); -} +}; -const drawAGP = (orgData, scale = scaleOption, showPercent = yAxisDisplayMode, clearOnFlyFilter=false) => { +const drawAGP = ( + orgData, + scale = scaleOption, + showPercent = yAxisDisplayMode, + clearOnFlyFilter = false, +) => { const data = _.cloneDeep(orgData); // if slow, change if (!data) { return; } // orgData.array_plotdata = array_plotdata; - renderAgPAllChart(orgData.array_plotdata, orgData.COMMON.compareType, scale, showPercent, clearOnFlyFilter) + renderAgPAllChart( + orgData.array_plotdata, + orgData.COMMON.compareType, + scale, + showPercent, + clearOnFlyFilter, + ); // implement order $(formElements.agpCard).sortable({}); @@ -437,7 +459,7 @@ const renderCyclicCalenderModal = () => { 2022040112 `; - let calenderListHtml = '' + let calenderListHtml = ''; let index = 1; for (const key of Object.keys(calenderFormat)) { const groups = calenderFormat[key]; @@ -448,7 +470,7 @@ const renderCyclicCalenderModal = () => { for (const format of formatList) { const isCheck = index === 1; itemHtml += renderItem(key, format, isCheck); - index ++; + index++; } const html = ` @@ -465,7 +487,7 @@ const renderCyclicCalenderModal = () => { 2: 252, 3: 147, 4: 280, - } + }; calenderListHtml += `
@@ -479,18 +501,23 @@ const renderCyclicCalenderModal = () => { const selectContent = document.getElementById('cyclicCalender-content'); selectContent.addEventListener('open', (e) => { generateCalenderExample(); - }) + }); }; const onChangeDivideFormat = (e) => { - changeFormatAndExample(e) -} + changeFormatAndExample(e); +}; -const renderAgPChartLayout = (chartOption, chartHeight = '40vh', isCTCol = false) => { - const { processName, columnName, facetLevel1, facetLevel2, chartId } = chartOption; - let facet = [facetLevel1, facetLevel2].filter(f => checkTrue(f)); +const renderAgPChartLayout = ( + chartOption, + chartHeight = '40vh', + isCTCol = false, +) => { + const { processName, columnName, facetLevel1, facetLevel2, chartId } = + chartOption; + let facet = [facetLevel1, facetLevel2].filter((f) => checkTrue(f)); const levelTitle = facet.map((el, i) => `${el}`).join(' | '); - const CTLabel = isCTCol ? ` (${DataTypes.DATETIME.short}) [sec]` : '' + const CTLabel = isCTCol ? ` (${DataTypes.DATETIME.short}) [sec]` : ''; const chartLayout = `
@@ -515,7 +542,13 @@ const renderAgPChartLayout = (chartOption, chartHeight = '40vh', isCTCol = false return chartLayout; }; -const renderAgPAllChart = (plots, compareType = '', scaleOption, yAxisDisplayMode = AGP_YAXIS_DISPLAY_MODES.COUNT, clearOnFlyFilter=false) => { +const renderAgPAllChart = ( + plots, + compareType = '', + scaleOption, + yAxisDisplayMode = AGP_YAXIS_DISPLAY_MODES.COUNT, + clearOnFlyFilter = false, +) => { if (!plots) return; $(formElements.agpCard).empty(); let chartHeight = ''; @@ -545,10 +578,14 @@ const renderAgPAllChart = (plots, compareType = '', scaleOption, yAxisDisplayMod facetLevel1, facetLevel2, chartId: canvasId, - } + }; const isCTCol = isCycleTimeCol(end_proc_id, end_col_id); - const chartHtml = renderAgPChartLayout(chartOption, chartHeight, isCTCol); - const facetKey = `${facetLevel1 || ''}${facetLevel2 || ''}` + const chartHtml = renderAgPChartLayout( + chartOption, + chartHeight, + isCTCol, + ); + const facetKey = `${facetLevel1 || ''}${facetLevel2 || ''}`; $(formElements.agpCard).append(chartHtml); const sumCountByXAxis = (key, n, colId = null) => { @@ -568,9 +605,8 @@ const renderAgPAllChart = (plots, compareType = '', scaleOption, yAxisDisplayMod const count = n || 0; if (facetKey in countByFacet) { if (key in countByFacet[facetKey]) { - countByFacet[facetKey][key] += count - } - else { + countByFacet[facetKey][key] += count; + } else { countByFacet[facetKey][key] = count; } } else { @@ -583,17 +619,23 @@ const renderAgPAllChart = (plots, compareType = '', scaleOption, yAxisDisplayMod if (compareType === divideOptions.cyclicTerm) { div = currentData.COMMON.cyclic_terms; - div = div.map((term) => term.map(t => formatDateTime(t)).join(' -
')) + div = div.map((term) => + term.map((t) => formatDateTime(t)).join(' -
'), + ); } if (compareType === divideOptions.directTerm) { - div = currentData.time_conds.map(term => [term['start_dt'], term['end_dt']]); - div = div.map((term) => term.map(t => formatDateTime(t)).join(' -
')) + div = currentData.time_conds.map((term) => [ + term['start_dt'], + term['end_dt'], + ]); + div = div.map((term) => + term.map((t) => formatDateTime(t)).join(' -
'), + ); } - // reduce full div range - let data = plotData.data.map(data => { + let data = plotData.data.map((data) => { let trace = { ...data, hoverinfo: 'none', @@ -604,13 +646,22 @@ const renderAgPAllChart = (plots, compareType = '', scaleOption, yAxisDisplayMod size: 5, }, colId: end_col_id, - } + }; let { x, y } = trace; - if ([divideOptions.directTerm, divideOptions.cyclicTerm].includes(compareType)) { - x = x.map((term) => term.split(' | ').map(t => formatDateTime(t)).join(' -
')) + if ( + [divideOptions.directTerm, divideOptions.cyclicTerm].includes( + compareType, + ) + ) { + x = x.map((term) => + term + .split(' | ') + .map((t) => formatDateTime(t)) + .join(' -
'), + ); } - const newX = [] - const newY = [] + const newX = []; + const newY = []; for (let i = 0; i < div.length; i += 1) { const currDiv = div[i]; const indexOfCurrDiv = x.indexOf(currDiv); @@ -621,14 +672,18 @@ const renderAgPAllChart = (plots, compareType = '', scaleOption, yAxisDisplayMod newY.push(null); } } - trace.x = [...newX] - trace.y = [...newY] + trace.x = [...newX]; + trace.y = [...newY]; if (clearOnFlyFilter) { for (let i = 0; i < trace.x.length; i += 1) { const currDiv = trace.x[i]; const indexOfCurrDiv = trace.x.indexOf(currDiv); - sumCountByXAxis(currDiv, trace.y[indexOfCurrDiv], end_col_id); + sumCountByXAxis( + currDiv, + trace.y[indexOfCurrDiv], + end_col_id, + ); } for (let i = 0; i < trace.x.length; i += 1) { const currDiv = trace.x[i]; @@ -637,27 +692,63 @@ const renderAgPAllChart = (plots, compareType = '', scaleOption, yAxisDisplayMod } } - trace.x = trace.x.map(val => `t${val}`); + trace.x = trace.x.map((val) => `t${val}`); return trace; - }) + }); - if ([AGP_YAXIS_DISPLAY_MODES.Y_AXIS_TOTAL, AGP_YAXIS_DISPLAY_MODES.Y_AXIS_FACET].includes(yAxisDisplayMode)) { - data = data.map(trace => { - if (trace.type.toLowerCase() === 'bar' && yAxisDisplayMode === AGP_YAXIS_DISPLAY_MODES.Y_AXIS_TOTAL) { + if ( + [ + AGP_YAXIS_DISPLAY_MODES.Y_AXIS_TOTAL, + AGP_YAXIS_DISPLAY_MODES.Y_AXIS_FACET, + ].includes(yAxisDisplayMode) + ) { + data = data.map((trace) => { + if ( + trace.type.toLowerCase() === 'bar' && + yAxisDisplayMode === AGP_YAXIS_DISPLAY_MODES.Y_AXIS_TOTAL + ) { return toTotalYAxisPercent(countByXAxis, trace); - } - else if (trace.type.toLowerCase() === 'bar' && yAxisDisplayMode === AGP_YAXIS_DISPLAY_MODES.Y_AXIS_FACET){ + } else if ( + trace.type.toLowerCase() === 'bar' && + yAxisDisplayMode === AGP_YAXIS_DISPLAY_MODES.Y_AXIS_FACET + ) { return toFacetYAxisPercent(facetKey, countByFacet, trace); } return trace; - }) + }); } // linechart for real, datetime, int. bar chart for others including int(Cat) - const isNumeric = [DataTypes.REAL.name, DataTypes.DATETIME.name, DataTypes.INTEGER.name].includes(plotData.data_type) && !plotData.is_category; - const yScale = isNumeric ? getScaleInfo(plotData, scaleOption) : null; - drawAgPPlot(data, plotData, countByXAxis, div, isCyclicCalender, `${canvasId}`, yScale, yAxisDisplayMode, currentData.div_from_to); + const isNumeric = + [ + DataTypes.REAL.name, + DataTypes.DATETIME.name, + DataTypes.INTEGER.name, + ].includes(plotData.data_type) && !plotData.is_category; + + let barChartScale = null; + // get scale common for bar chart if scale is common + const isCommonScale = scaleOption === scaleOptionConst.COMMON; + if (!isNumeric && isCommonScale) { + barChartScale = getScaleInfo(plotData, scaleOption); + } + + const yScale = isNumeric + ? getScaleInfo(plotData, scaleOption) + : barChartScale; + drawAgPPlot( + data, + plotData, + countByXAxis, + div, + isCyclicCalender, + `${canvasId}`, + yScale, + yAxisDisplayMode, + currentData.div_from_to, + isCommonScale, + ); }); -} +}; const toTotalYAxisPercent = (countByXAxis, traceData) => { let { x, y } = traceData; @@ -667,13 +758,13 @@ const toTotalYAxisPercent = (countByXAxis, traceData) => { const total = countByXAxis[traceData.colId][xVal]; const percent = val / total; return percent; - }) + }); return { ...traceData, x, - y - } + y, + }; }; const toFacetYAxisPercent = (facetKey, countByFacet, traceData) => { @@ -683,40 +774,41 @@ const toFacetYAxisPercent = (facetKey, countByFacet, traceData) => { const xVal = x[i].slice(1); const total = countByFacet[facetKey][xVal]; return val / total; - }) + }); return { ...traceData, x, - y - } -} + y, + }; +}; const changeYAxisMode = (e) => { - yAxisDisplayMode = $(e).val(); - drawAGP(currentData, scaleOption, yAxisDisplayMode); + yAxisDisplayMode = $(e).val(); + drawAGP(currentData, scaleOption, yAxisDisplayMode); }; - const setYAxisOption = () => { const isFacet = isSetFacet(); if (isFacet) { - formElements.yAxisPercentOrCount.find("option[value=yAxisFacet]").show(); + formElements.yAxisPercentOrCount + .find('option[value=yAxisFacet]') + .show(); return; } - formElements.yAxisPercentOrCount.find("option[value=yAxisFacet]").hide(); -} + formElements.yAxisPercentOrCount.find('option[value=yAxisFacet]').hide(); +}; const isSetFacet = () => { const matches = []; $("[name='catExpBox']").map((i, el) => { - const valOption = $(el).find(":selected").val(); - if(valOption) { + const valOption = $(el).find(':selected').val(); + if (valOption) { matches.push(valOption); } - }) + }); return matches.length > 0; -} +}; diff --git a/ap/static/aggregate_plot/js/aggregation_chart.js b/ap/static/aggregate_plot/js/aggregation_chart.js index c49d40c..aa635c2 100644 --- a/ap/static/aggregate_plot/js/aggregation_chart.js +++ b/ap/static/aggregate_plot/js/aggregation_chart.js @@ -1,16 +1,40 @@ - -const COLOR_DEFAULT = ['#1f77b4', '#ff7f0e', '#2ca02c', '#d62728', '#9467bd', '#8c564b', '#e377c2', '#7f7f7f', '#bcbd22'] - -const drawAgPPlot = (data, plotData, countByXAxis, div, isCyclicCalender, canvasId, yScale, yAxisDisplayMode, divFromTo) => { - const { agg_function, color_name, unique_color, fmt, shown_name } = plotData; +const COLOR_DEFAULT = [ + '#1f77b4', + '#ff7f0e', + '#2ca02c', + '#d62728', + '#9467bd', + '#8c564b', + '#e377c2', + '#7f7f7f', + '#bcbd22', +]; + +const drawAgPPlot = ( + data, + plotData, + countByXAxis, + div, + isCyclicCalender, + canvasId, + yScale, + yAxisDisplayMode, + divFromTo, + isCommonScale = false, +) => { + const { agg_function, color_name, unique_color, fmt, shown_name } = + plotData; const isLineChart = agg_function && agg_function.toLowerCase() !== 'count'; - const showPercent = [AGP_YAXIS_DISPLAY_MODES.Y_AXIS_TOTAL, AGP_YAXIS_DISPLAY_MODES.Y_AXIS_FACET].includes(yAxisDisplayMode) - && !isLineChart; + const showPercent = + [ + AGP_YAXIS_DISPLAY_MODES.Y_AXIS_TOTAL, + AGP_YAXIS_DISPLAY_MODES.Y_AXIS_FACET, + ].includes(yAxisDisplayMode) && !isLineChart; + let xTitles = data[0] ? [...data[0].x] : []; const tickLen = xTitles.length ? xTitles[0].length : 0; - const tickSize = tickLen > 5 ? 10 : 12; - + const tickSize = tickLen > 5 ? 10 : 12; data = prepareColorForTrace(data, unique_color); if (isLineChart && yScale) { @@ -18,13 +42,12 @@ const drawAgPPlot = (data, plotData, countByXAxis, div, isCyclicCalender, canvas } let yMin, yMax; - if (isLineChart) { - const offset = (yScale['y-max'] - yScale['y-min']) * 0.018 - yMin = yScale['y-min'] - offset - yMax = yScale['y-max'] + offset + if (isLineChart || (yScale && isCommonScale)) { + const offset = (yScale['y-max'] - yScale['y-min']) * 0.018; + yMin = yScale['y-min'] - offset; + yMax = yScale['y-max'] + offset; } - const layout = { barmode: 'stack', plot_bgcolor: '#222222', @@ -32,7 +55,10 @@ const drawAgPPlot = (data, plotData, countByXAxis, div, isCyclicCalender, canvas autosize: true, xaxis: { tickmode: 'array', - ticktext: reduceTicksArray(xTitles.map(val => val.slice(1)), tickLen), + ticktext: reduceTicksArray( + xTitles.map((val) => val.slice(1)), + tickLen, + ), tickvals: reduceTicksArray(xTitles, tickLen), gridcolor: '#444444', tickfont: { @@ -59,7 +85,7 @@ const drawAgPPlot = (data, plotData, countByXAxis, div, isCyclicCalender, canvas spikecolor: 'rgb(255, 0, 0)', // tickformat: showPercent ? ',.0%' : fmt ? (fmt.includes('e') ? '.1e' : fmt) : '', tickformat: '', - range: showPercent ? [0, 1] : yScale ? [yMin, yMax] : null, + range: showPercent ? [0, 100] : yScale ? [yMin, yMax] : null, autorange: yScale ? false : true, }, showlegend: true, @@ -70,7 +96,7 @@ const drawAgPPlot = (data, plotData, countByXAxis, div, isCyclicCalender, canvas font: { family: 'sans-serif', size: 12, - color: '#ffffff' + color: '#ffffff', }, bgcolor: 'transparent', xanchor: 'right', @@ -82,19 +108,19 @@ const drawAgPPlot = (data, plotData, countByXAxis, div, isCyclicCalender, canvas b: 60, t: 20, r: 10, - } + }, }; if (showPercent) { - layout.yaxis.ticksuffix = '%' - data.forEach(item => { - item.y = item.y.map(i => i*100) - }) + layout.yaxis.ticksuffix = '%'; + data.forEach((item) => { + item.y = item.y.map((i) => i * 100); + }); } if (isLineChart) { layout.xaxis.range = [-0.5, div.length - 0.5]; - layout.legend.traceorder = "reversed"; + layout.legend.traceorder = 'reversed'; } const heatmapIconSettings = genPlotlyIconSettings(); @@ -110,7 +136,8 @@ const drawAgPPlot = (data, plotData, countByXAxis, div, isCyclicCalender, canvas agPPlot.on('plotly_hover', (data) => { const dpIndex = getDataPointIndex(data); - const { x, y, name, type, isOutlier, colorName, outlierVal, colId } = data.points[0].data; + const { x, y, name, type, isOutlier, colorName, outlierVal, colId } = + data.points[0].data; const xVal = x[dpIndex].slice(1); const color = colorName || name; const hasColor = !!color_name; @@ -128,43 +155,73 @@ const drawAgPPlot = (data, plotData, countByXAxis, div, isCyclicCalender, canvas } if (from && to) { - period.push(['Period', `${from}${DATETIME_PICKER_SEPARATOR}${to}`]) + period.push([ + 'Period', + `${from}${DATETIME_PICKER_SEPARATOR}${to}`, + ]); } } if (divFromTo) { // show from, to of Data number division const divIndex = div.indexOf(xVal); - if ( divIndex !== -1 ) { - const fromToOb = divFromTo[divIndex] - fromTo.push(['From', formatDateTime(fromToOb[0])], ['To', formatDateTime(fromToOb[1])]) + if (divIndex !== -1) { + const fromToOb = divFromTo[divIndex]; + fromTo.push( + ['From', formatDateTime(fromToOb[0])], + ['To', formatDateTime(fromToOb[1])], + ); } } if (type.includes('lines') || isOutlier) { - const showVal = [] + const showVal = []; if (isOutlier) { - showVal.push([i18n.outlier, applySignificantDigit(outlierVal[dpIndex])]) + showVal.push([ + i18n.outlier, + applySignificantDigit(outlierVal[dpIndex]), + ]); } else { - showVal.push([agg_function, applySignificantDigit(nByXAndColor)]) + showVal.push([ + agg_function, + applySignificantDigit(nByXAndColor), + ]); } - dataTable = genHoverDataTable([['x', xVal], ...period, ['Color', color], ...showVal, ...fromTo]); + dataTable = genHoverDataTable([ + ['x', xVal], + ...period, + ['Color', color], + ...showVal, + ...fromTo, + ]); } else { const nByX = showPercent ? '100%' : countByXAxis[colId][xVal]; - const NByColor = showPercent ? `${applySignificantDigit(nByXAndColor)}%` : applySignificantDigit(nByXAndColor); - - const NByColorHover = hasColor ? [['N by x and Color', NByColor]] : []; - - dataTable = genHoverDataTable([['x', xVal], ...period, ['Color', color], ...NByColorHover, ['N by x', applySignificantDigit(nByX)], ...fromTo]); + const NByColor = showPercent + ? `${applySignificantDigit(nByXAndColor)}%` + : applySignificantDigit(nByXAndColor); + + const NByColorHover = hasColor + ? [['N by x and Color', NByColor]] + : []; + + dataTable = genHoverDataTable([ + ['x', xVal], + ...period, + ['Color', color], + ...NByColorHover, + ['N by x', applySignificantDigit(nByX)], + ...fromTo, + ]); } genDataPointHoverTable( dataTable, { - x: data.event.pageX - 220, y: data.event.pageY, + x: data.event.pageX - 220, + y: data.event.pageY, }, 0, true, canvasId, - 1 + 1, ); }); unHoverHandler(agPPlot); @@ -175,9 +232,10 @@ const reduceTicksArray = (array, tickLen) => { const nTicks = MAX_TICKS; const isReduce = array.length > MAX_TICKS; if (!isReduce) return array; - let nextIndex = array.length / nTicks < 2 ? 2 : Math.round(array.length / nTicks); + let nextIndex = + array.length / nTicks < 2 ? 2 : Math.round(array.length / nTicks); if (nextIndex * nTicks > MAX_TICKS) { - nextIndex += 1 + nextIndex += 1; } const res = []; let i = 0; @@ -194,20 +252,21 @@ const prepareColorForTrace = (data, uniqueColor) => { if (uniqueColor.length > 0) { styles = uniqueColor.map((color, k) => ({ target: color, - color: COLOR_DEFAULT[k] - + color: COLOR_DEFAULT[k], })); } else { styles = data.map((data, k) => ({ target: data.name, - color: COLOR_DEFAULT[k] + color: COLOR_DEFAULT[k], })); } - - return data.map(da =>{ - const colors = styles.filter(st => st.target === da.name); - const color = colors.length > 0 ? styles.filter(st => st.target === da.name)[0].color : ''; + return data.map((da) => { + const colors = styles.filter((st) => st.target === da.name); + const color = + colors.length > 0 + ? styles.filter((st) => st.target === da.name)[0].color + : ''; return { ...da, marker: { @@ -216,51 +275,51 @@ const prepareColorForTrace = (data, uniqueColor) => { line: { ...da.line, color: color, - } - } - }) + }, + }; + }); }; const getOutlierTraceData = (datas, yScale, plotData) => { const { lower_outlier_idxs, upper_outlier_idxs } = yScale; const { array_y } = plotData; - const outlierTraceList = [] + const outlierTraceList = []; - datas = datas.map(data => { + datas = datas.map((data) => { let isHasOutlier = false; - const outlierTrace = { + const outlierTrace = { ...data, colorName: data.name, name: i18n.outlier, mode: 'markers', - marker: { + marker: { symbol: '4', - size: 8 - }, + size: 8, + }, isOutlier: true, showlegend: false, - } + }; let cloneY = Array.from(outlierTrace.y).fill(null); - let outlierVal = Array.from(outlierTrace.y).fill(null) + let outlierVal = Array.from(outlierTrace.y).fill(null); for (const i of lower_outlier_idxs) { const lowerOutlier = array_y[i]; const indexList = getAllIndexes(data.y, lowerOutlier); for (const index of indexList) { - isHasOutlier = true + isHasOutlier = true; cloneY[index] = yScale['y-min']; - outlierVal[index] = data.y[index] + outlierVal[index] = data.y[index]; data.y[index] = null; } } for (const i of upper_outlier_idxs) { const upperOutlier = array_y[i]; - const indexList = getAllIndexes(data.y, upperOutlier); + const indexList = getAllIndexes(data.y, upperOutlier); for (const index of indexList) { - isHasOutlier = true + isHasOutlier = true; cloneY[index] = yScale['y-max']; - outlierVal[index] = data.y[index] + outlierVal[index] = data.y[index]; data.y[index] = null; } } @@ -271,18 +330,18 @@ const getOutlierTraceData = (datas, yScale, plotData) => { } return data; - }) - + }); - datas = outlierTraceList.concat(datas) + datas = outlierTraceList.concat(datas); - return datas + return datas; }; function getAllIndexes(arr, val) { - let indexes = [], i = -1; - while ((i = arr.indexOf(val, i+1)) != -1){ + let indexes = [], + i = -1; + while ((i = arr.indexOf(val, i + 1)) != -1) { indexes.push(i); } return indexes; -} \ No newline at end of file +} diff --git a/ap/static/analyze/css/anomaly_detection.css b/ap/static/analyze/css/anomaly_detection.css index 18ecd80..0e447e4 100644 --- a/ap/static/analyze/css/anomaly_detection.css +++ b/ap/static/analyze/css/anomaly_detection.css @@ -21,7 +21,6 @@ border-radius: 4px; } - .plotbox-header h5 { line-height: 35px; margin: 0 0 0 5px; @@ -46,10 +45,11 @@ div#scatter-plot { .plot-tabs .nav-link { padding: 0.5rem 0.5rem !important; - height: 4.1vh; /* 0.1 to make borders ovelapped */ + height: 4.1vh; /* 0.1 to make borders ovelapped */ } -.table-dark th, .table-dark td { +.table-dark th, +.table-dark td { padding: 0.1rem 0.25rem !important; background-color: #222; border-top: none; @@ -67,7 +67,7 @@ div#scatter-plot { border: solid 0.5px #444; } -table.dataTable thead th{ +table.dataTable thead th { border: 0.5px solid #444 !important; } @@ -139,7 +139,7 @@ table.dataTable.cell-border tbody td { text-align: center !important; } -#pcaConditionTbl tr td:nth-child(5){ +#pcaConditionTbl tr td:nth-child(5) { text-align: left !important; font-family: 'Consolas', 'Courier New', 'Courier', 'Monaco', 'monospace'; } @@ -163,7 +163,7 @@ table.dataTable.cell-border tbody td { .tooltip-pca .tooltip-pca-text { visibility: hidden; width: 150px; - background-color: rgba(8, 8, 8, .8); + background-color: rgba(8, 8, 8, 0.8); color: #fff; text-align: left; border-radius: 6px; @@ -178,7 +178,6 @@ table.dataTable.cell-border tbody td { z-index: 9999; top: 10%; left: 82%; - } .tooltip-pca:hover .tooltip-pca-text { @@ -186,7 +185,7 @@ table.dataTable.cell-border tbody td { } /* hide search bar */ -.dataTables_filter{ +.dataTables_filter { display: none; } diff --git a/ap/static/analyze/css/graphical_lasso.css b/ap/static/analyze/css/graphical_lasso.css index 9722a22..bd782c0 100644 --- a/ap/static/analyze/css/graphical_lasso.css +++ b/ap/static/analyze/css/graphical_lasso.css @@ -24,12 +24,12 @@ margin-top: -11px; } .tick { - position: relative; - display: flex; - justify-content: center; - width: 1px; - background: white; - height: 5px; + position: relative; + display: flex; + justify-content: center; + width: 1px; + background: white; + height: 5px; } .cmt-2 { margin-top: 2px; @@ -43,4 +43,4 @@ .is-string-col label.custom-control-label.show-ele::after, .is-string-col input.show-label { visibility: visible; -} \ No newline at end of file +} diff --git a/ap/static/analyze/css/toastr.css b/ap/static/analyze/css/toastr.css index 0e33542..3baf06e 100644 --- a/ap/static/analyze/css/toastr.css +++ b/ap/static/analyze/css/toastr.css @@ -1,200 +1,200 @@ .toast-title { - font-weight: bold; + font-weight: bold; } .toast-message { - -ms-word-wrap: break-word; - word-wrap: break-word; + -ms-word-wrap: break-word; + word-wrap: break-word; } .toast-message a, .toast-message label { - color: #ffffff; + color: #ffffff; } .toast-message a:hover { - color: #cccccc; - text-decoration: none; + color: #cccccc; + text-decoration: none; } .toast-close-button { - position: relative; - right: -0.3em; - top: -0.3em; - float: right; - font-size: 20px; - font-weight: bold; - color: #ffffff; - -webkit-text-shadow: 0 1px 0 #ffffff; - text-shadow: 0 1px 0 #ffffff; - opacity: 0.8; - -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); - filter: alpha(opacity=80); + position: relative; + right: -0.3em; + top: -0.3em; + float: right; + font-size: 20px; + font-weight: bold; + color: #ffffff; + -webkit-text-shadow: 0 1px 0 #ffffff; + text-shadow: 0 1px 0 #ffffff; + opacity: 0.8; + -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); + filter: alpha(opacity=80); } .toast-close-button:hover, .toast-close-button:focus { - color: #000000; - text-decoration: none; - cursor: pointer; - opacity: 0.4; - -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40); - filter: alpha(opacity=40); + color: #000000; + text-decoration: none; + cursor: pointer; + opacity: 0.4; + -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40); + filter: alpha(opacity=40); } /*Additional properties for button version iOS requires the button element instead of an anchor tag. If you want the anchor version, it requires `href="#"`.*/ button.toast-close-button { - padding: 0; - cursor: pointer; - background: transparent; - border: 0; - -webkit-appearance: none; + padding: 0; + cursor: pointer; + background: transparent; + border: 0; + -webkit-appearance: none; } .toast-top-center { - top: 0; - right: 0; - width: 100%; + top: 0; + right: 0; + width: 100%; } .toast-bottom-center { - bottom: 0; - right: 0; - width: 100%; + bottom: 0; + right: 0; + width: 100%; } .toast-top-full-width { - top: 0; - right: 0; - width: 100%; + top: 0; + right: 0; + width: 100%; } .toast-bottom-full-width { - bottom: 0; - right: 0; - width: 100%; + bottom: 0; + right: 0; + width: 100%; } .toast-top-left { - top: 12px; - left: 12px; + top: 12px; + left: 12px; } .toast-top-right { - top: 12px; - right: 12px; + top: 12px; + right: 12px; } .toast-bottom-right { - right: 12px; - bottom: 12px; + right: 12px; + bottom: 12px; } .toast-bottom-left { - bottom: 12px; - left: 12px; + bottom: 12px; + left: 12px; } #toast-container { - position: fixed; - z-index: 999999; - pointer-events: none; - /*overrides*/ + position: fixed; + z-index: 999999; + pointer-events: none; + /*overrides*/ } #toast-container * { - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; } #toast-container > div { - position: relative; - pointer-events: auto; - overflow: hidden; - margin: 0 0 6px; - padding: 15px 15px 15px 50px; - width: 300px; - -moz-border-radius: 3px 3px 3px 3px; - -webkit-border-radius: 3px 3px 3px 3px; - border-radius: 3px 3px 3px 3px; - background-position: 15px center; - background-repeat: no-repeat; - -moz-box-shadow: 0 0 12px #999999; - -webkit-box-shadow: 0 0 12px #999999; - box-shadow: 0 0 12px #999999; - color: #ffffff; - opacity: 0.8; - -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); - filter: alpha(opacity=80); + position: relative; + pointer-events: auto; + overflow: hidden; + margin: 0 0 6px; + padding: 15px 15px 15px 50px; + width: 300px; + -moz-border-radius: 3px 3px 3px 3px; + -webkit-border-radius: 3px 3px 3px 3px; + border-radius: 3px 3px 3px 3px; + background-position: 15px center; + background-repeat: no-repeat; + -moz-box-shadow: 0 0 12px #999999; + -webkit-box-shadow: 0 0 12px #999999; + box-shadow: 0 0 12px #999999; + color: #ffffff; + opacity: 0.8; + -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); + filter: alpha(opacity=80); } #toast-container > :hover { - -moz-box-shadow: 0 0 12px #000000; - -webkit-box-shadow: 0 0 12px #000000; - box-shadow: 0 0 12px #000000; - opacity: 1; - -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); - filter: alpha(opacity=100); - cursor: pointer; + -moz-box-shadow: 0 0 12px #000000; + -webkit-box-shadow: 0 0 12px #000000; + box-shadow: 0 0 12px #000000; + opacity: 1; + -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); + filter: alpha(opacity=100); + cursor: pointer; } #toast-container > .toast-info { - background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=") !important; + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=') !important; } #toast-container > .toast-error { - background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=") !important; + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=') !important; } #toast-container > .toast-success { - background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==") !important; + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==') !important; } #toast-container > .toast-warning { - background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=") !important; + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=') !important; } #toast-container.toast-top-center > div, #toast-container.toast-bottom-center > div { - width: 300px; - margin-left: auto; - margin-right: auto; + width: 300px; + margin-left: auto; + margin-right: auto; } #toast-container.toast-top-full-width > div, #toast-container.toast-bottom-full-width > div { - width: 96%; - margin-left: auto; - margin-right: auto; + width: 96%; + margin-left: auto; + margin-right: auto; } .toast { - background-color: #030303; + background-color: #030303; } .toast-success { - background-color: #51a351; + background-color: #51a351; } .toast-error { - background-color: #bd362f; + background-color: #bd362f; } .toast-info { - background-color: #2f96b4; + background-color: #2f96b4; } .toast-warning { - background-color: #f89406; + background-color: #f89406; } .toast-progress { - position: absolute; - left: 0; - bottom: 0; - height: 4px; - background-color: #000000; - opacity: 0.4; - -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40); - filter: alpha(opacity=40); + position: absolute; + left: 0; + bottom: 0; + height: 4px; + background-color: #000000; + opacity: 0.4; + -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40); + filter: alpha(opacity=40); } /*Responsive Design*/ @media all and (max-width: 240px) { - #toast-container > div { - padding: 8px 8px 8px 50px; - width: 11em; - } - #toast-container .toast-close-button { - right: -0.2em; - top: -0.2em; - } + #toast-container > div { + padding: 8px 8px 8px 50px; + width: 11em; + } + #toast-container .toast-close-button { + right: -0.2em; + top: -0.2em; + } } @media all and (min-width: 241px) and (max-width: 480px) { - #toast-container > div { - padding: 8px 8px 8px 50px; - width: 18em; - } - #toast-container .toast-close-button { - right: -0.2em; - top: -0.2em; - } + #toast-container > div { + padding: 8px 8px 8px 50px; + width: 18em; + } + #toast-container .toast-close-button { + right: -0.2em; + top: -0.2em; + } } @media all and (min-width: 481px) and (max-width: 768px) { - #toast-container > div { - padding: 15px 15px 15px 50px; - width: 25em; - } + #toast-container > div { + padding: 15px 15px 15px 50px; + width: 25em; + } } diff --git a/ap/static/analyze/js/generateJson.js b/ap/static/analyze/js/generateJson.js index 14323c1..3e59677 100644 --- a/ap/static/analyze/js/generateJson.js +++ b/ap/static/analyze/js/generateJson.js @@ -4,37 +4,49 @@ const generateCircles = (json) => { // sigma const dataSigmaX = getNode(json, ['circles', 'Sigma', 'x']) || []; const dataSigmaY = getNode(json, ['circles', 'Sigma', 'y']) || []; - const dataSigmaText = dataSigmaX.map( - (ele, idx) => `border: Sigma
xvar: ${ele}
yvar: ${dataSigmaY[idx]}`, - ) || []; + const dataSigmaText = + dataSigmaX.map( + (ele, idx) => + `border: Sigma
xvar: ${ele}
yvar: ${dataSigmaY[idx]}`, + ) || []; // 2sigma const data2SigmaX = getNode(json, ['circles', '2Sigma', 'x']) || []; const data2SigmaY = getNode(json, ['circles', '2Sigma', 'y']) || []; - const data2SigmaText = data2SigmaX.map( - (ele, idx) => `border: 2Sigma
xvar: ${ele}
yvar: ${data2SigmaY[idx]}`, - ) || []; + const data2SigmaText = + data2SigmaX.map( + (ele, idx) => + `border: 2Sigma
xvar: ${ele}
yvar: ${data2SigmaY[idx]}`, + ) || []; // 3sigma const data3SigmaX = getNode(json, ['circles', '3Sigma', 'x']) || []; const data3SigmaY = getNode(json, ['circles', '3Sigma', 'y']) || []; - const data3SigmaText = data3SigmaX.map( - (ele, idx) => `border: 3Sigma
xvar: ${ele}
yvar: ${data3SigmaY[idx]}`, - ) || []; + const data3SigmaText = + data3SigmaX.map( + (ele, idx) => + `border: 3Sigma
xvar: ${ele}
yvar: ${data3SigmaY[idx]}`, + ) || []; // Range const dataRangeX = getNode(json, ['circles', 'Range', 'x']) || []; const dataRangeY = getNode(json, ['circles', 'Range', 'y']) || []; - const dataRangeText = dataRangeX.map( - (ele, idx) => `border: Range
xvar: ${ele}
yvar: ${dataRangeY[idx]}`, - ) || []; + const dataRangeText = + dataRangeX.map( + (ele, idx) => + `border: Range
xvar: ${ele}
yvar: ${dataRangeY[idx]}`, + ) || []; // Parcentile 0.85 - const dataParcentileX = getNode(json, ['circles', 'Percentile85', 'x']) || []; - const dataParcentileY = getNode(json, ['circles', 'Percentile85', 'y']) || []; - const dataParcentileText = dataParcentileX.map( - (ele, idx) => `border: Percentile 0.85
xvar: ${ele}
yvar: ${dataParcentileY[idx]}`, - ) || []; + const dataParcentileX = + getNode(json, ['circles', 'Percentile85', 'x']) || []; + const dataParcentileY = + getNode(json, ['circles', 'Percentile85', 'y']) || []; + const dataParcentileText = + dataParcentileX.map( + (ele, idx) => + `border: Percentile 0.85
xvar: ${ele}
yvar: ${dataParcentileY[idx]}`, + ) || []; // axis label const axislab = getNode(json, ['axislab']) || ['PC1', 'PC2']; @@ -59,14 +71,16 @@ const generateCircles = (json) => { }; }; - const generateXTrainScatter = (json) => { if (!json) return {}; // scatter const dataScatterX = getNode(json, ['scatter', 'x']) || []; const dataScatterY = getNode(json, ['scatter', 'y']) || []; - const dataScatterText = dataScatterX.map((ele, idx) => `'xvar: ${ele}
yvar: ${dataScatterY[idx]}'`) || []; + const dataScatterText = + dataScatterX.map( + (ele, idx) => `'xvar: ${ele}
yvar: ${dataScatterY[idx]}'`, + ) || []; const { dataSigmaX, @@ -88,159 +102,167 @@ const generateXTrainScatter = (json) => { } = generateCircles(json); return { - data: [{ - x: dataScatterX, - y: dataScatterY, - text: dataScatterText, - type: 'scatter', - mode: 'markers', - marker: { - autocolorscale: false, - color: 'white', - opacity: 0.5, - size: 3.02362204724409, - symbol: 'circle', + data: [ + { + x: dataScatterX, + y: dataScatterY, + text: dataScatterText, + type: 'scatter', + mode: 'markers', + marker: { + autocolorscale: false, + color: 'white', + opacity: 0.5, + size: 3.02362204724409, + symbol: 'circle', + line: { + width: 1.88976377952756, + color: 'rgba(255,255,255,1)', + }, + }, + hoveron: 'points', + showlegend: false, + xaxis: 'x', + yaxis: 'y', + hoverinfo: 'text', + frame: null, + }, + { + x: dataSigmaX, + y: dataSigmaY, + text: dataSigmaText, + type: 'scatter', + mode: 'lines', + line: { + width: 1.13385826771654, + color: 'rgba(204,229,255,1)', + dash: 'solid', + }, + hoveron: 'points', + name: 'Sigma', + legendgroup: 'Sigma', + showlegend: true, + xaxis: 'x', + yaxis: 'y', + hoverinfo: 'text', + frame: null, + }, + { + x: data2SigmaX, + y: data2SigmaY, + text: data2SigmaText, + type: 'scatter', + mode: 'lines', + line: { + width: 1.13385826771654, + color: 'rgba(153,204,255,1)', + dash: 'solid', + }, + hoveron: 'points', + name: '2Sigma', + legendgroup: '2Sigma', + showlegend: true, + xaxis: 'x', + yaxis: 'y', + hoverinfo: 'text', + frame: null, + }, + { + x: data3SigmaX, + y: data3SigmaY, + text: data3SigmaText, + type: 'scatter', + mode: 'lines', + line: { + width: 1.13385826771654, + color: 'rgba(102,178,255,1)', + dash: 'solid', + }, + hoveron: 'points', + name: '3Sigma', + legendgroup: '3Sigma', + showlegend: true, + xaxis: 'x', + yaxis: 'y', + hoverinfo: 'text', + frame: null, + }, + { + x: dataRangeX, + y: dataRangeY, + text: dataRangeText, + type: 'scatter', + mode: 'lines', + line: { + width: 1.13385826771654, + color: 'rgba(30,144,255,1)', + dash: 'solid', + }, + hoveron: 'points', + name: 'Range', + legendgroup: 'Range', + showlegend: true, + xaxis: 'x', + yaxis: 'y', + hoverinfo: 'text', + frame: null, + }, + { + x: dataParcentileX, + y: dataParcentileY, + text: dataParcentileText, + type: 'scatter', + mode: 'lines', + line: { + width: 1.13385826771654, + color: 'rgba(255,52,179,1)', + dash: 'solid', + }, + hoveron: 'points', + name: 'Parcentile 0.85', + legendgroup: 'Parcentile 0.85', + showlegend: true, + xaxis: 'x', + yaxis: 'y', + hoverinfo: 'text', + frame: null, + }, + { + x: [0, 0], + y: [-3.51416158802218, 3.51416158802218], + text: 'xintercept: 0', + type: 'scatter', + mode: 'lines', line: { width: 1.88976377952756, - color: 'rgba(255,255,255,1)', + color: 'rgba(64,64,64,1)', + dash: 'solid', }, + hoveron: 'points', + showlegend: false, + xaxis: 'x', + yaxis: 'y', + hoverinfo: 'text', + frame: null, + }, + { + x: [-3.5156396748279, 3.50907246263227], + y: [0, 0], + text: 'yintercept: 0', + type: 'scatter', + mode: 'lines', + line: { + width: 1.88976377952756, + color: 'rgba(64,64,64,1)', + dash: 'solid', + }, + hoveron: 'points', + showlegend: false, + xaxis: 'x', + yaxis: 'y', + hoverinfo: 'text', + frame: null, }, - hoveron: 'points', - showlegend: false, - xaxis: 'x', - yaxis: 'y', - hoverinfo: 'text', - frame: null, - }, { - x: dataSigmaX, - y: dataSigmaY, - text: dataSigmaText, - type: 'scatter', - mode: 'lines', - line: { - width: 1.13385826771654, - color: 'rgba(204,229,255,1)', - dash: 'solid', - }, - hoveron: 'points', - name: 'Sigma', - legendgroup: 'Sigma', - showlegend: true, - xaxis: 'x', - yaxis: 'y', - hoverinfo: 'text', - frame: null, - }, { - x: data2SigmaX, - y: data2SigmaY, - text: data2SigmaText, - type: 'scatter', - mode: 'lines', - line: { - width: 1.13385826771654, - color: 'rgba(153,204,255,1)', - dash: 'solid', - }, - hoveron: 'points', - name: '2Sigma', - legendgroup: '2Sigma', - showlegend: true, - xaxis: 'x', - yaxis: 'y', - hoverinfo: 'text', - frame: null, - }, { - x: data3SigmaX, - y: data3SigmaY, - text: data3SigmaText, - type: 'scatter', - mode: 'lines', - line: { - width: 1.13385826771654, - color: 'rgba(102,178,255,1)', - dash: 'solid', - }, - hoveron: 'points', - name: '3Sigma', - legendgroup: '3Sigma', - showlegend: true, - xaxis: 'x', - yaxis: 'y', - hoverinfo: 'text', - frame: null, - }, { - x: dataRangeX, - y: dataRangeY, - text: dataRangeText, - type: 'scatter', - mode: 'lines', - line: { - width: 1.13385826771654, - color: 'rgba(30,144,255,1)', - dash: 'solid', - }, - hoveron: 'points', - name: 'Range', - legendgroup: 'Range', - showlegend: true, - xaxis: 'x', - yaxis: 'y', - hoverinfo: 'text', - frame: null, - }, { - x: dataParcentileX, - y: dataParcentileY, - text: dataParcentileText, - type: 'scatter', - mode: 'lines', - line: { - width: 1.13385826771654, - color: 'rgba(255,52,179,1)', - dash: 'solid', - }, - hoveron: 'points', - name: 'Parcentile 0.85', - legendgroup: 'Parcentile 0.85', - showlegend: true, - xaxis: 'x', - yaxis: 'y', - hoverinfo: 'text', - frame: null, - }, { - x: [0, 0], - y: [-3.51416158802218, 3.51416158802218], - text: 'xintercept: 0', - type: 'scatter', - mode: 'lines', - line: { - width: 1.88976377952756, - color: 'rgba(64,64,64,1)', - dash: 'solid', - }, - hoveron: 'points', - showlegend: false, - xaxis: 'x', - yaxis: 'y', - hoverinfo: 'text', - frame: null, - }, { - x: [-3.5156396748279, 3.50907246263227], - y: [0, 0], - text: 'yintercept: 0', - type: 'scatter', - mode: 'lines', - line: { - width: 1.88976377952756, - color: 'rgba(64,64,64,1)', - dash: 'solid', - }, - hoveron: 'points', - showlegend: false, - xaxis: 'x', - yaxis: 'y', - hoverinfo: 'text', - frame: null, - }, ], layout: { margin: { @@ -341,21 +363,22 @@ const generateXTrainScatter = (json) => { scaleratio: 1, hoverformat: '.2f', }, - shapes: [{ - type: 'rect', - fillcolor: null, - line: { - color: null, - width: 0, - linetype: [], + shapes: [ + { + type: 'rect', + fillcolor: null, + line: { + color: null, + width: 0, + linetype: [], + }, + yref: 'paper', + xref: 'paper', + x0: 0, + x1: 1, + y0: 0, + y1: 1, }, - yref: 'paper', - xref: 'paper', - x0: 0, - x1: 1, - y0: 0, - y1: 1, - }, ], showlegend: true, legend: { @@ -369,25 +392,26 @@ const generateXTrainScatter = (json) => { xanchor: 'right', tracegroupgap: 3, }, - annotations: [{ - text: 'Guide', - x: 1.02, - y: 1, - showarrow: false, - ax: 0, - ay: 0, - font: { - color: 'rgba(255,255,255,1)', - family: '', - size: 13.2835201328352, + annotations: [ + { + text: 'Guide', + x: 1.02, + y: 1, + showarrow: false, + ax: 0, + ay: 0, + font: { + color: 'rgba(255,255,255,1)', + family: '', + size: 13.2835201328352, + }, + xref: 'paper', + yref: 'paper', + textangle: 0, + xanchor: 'left', + yanchor: 'bottom', + legendTitle: true, }, - xref: 'paper', - yref: 'paper', - textangle: 0, - xanchor: 'left', - yanchor: 'bottom', - legendTitle: true, - }, ], hovermode: 'closest', barmode: 'relative', @@ -436,7 +460,19 @@ const generateXTrainScatter = (json) => { }, debounce: 0, }, - shinyEvents: ['plotly_hover', 'plotly_click', 'plotly_selected', 'plotly_relayout', 'plotly_brushed', 'plotly_brushing', 'plotly_clickannotation', 'plotly_doubleclick', 'plotly_deselect', 'plotly_afterplot', 'plotly_sunburstclick'], + shinyEvents: [ + 'plotly_hover', + 'plotly_click', + 'plotly_selected', + 'plotly_relayout', + 'plotly_brushed', + 'plotly_brushing', + 'plotly_clickannotation', + 'plotly_doubleclick', + 'plotly_deselect', + 'plotly_afterplot', + 'plotly_sunburstclick', + ], base_url: 'https://plot.ly', }; }; @@ -447,7 +483,10 @@ const generateXTestScatter = (json, jsonTrain) => { // scatter const dataScatterX = getNode(json, ['scatter', 'x']) || []; const dataScatterY = getNode(json, ['scatter', 'y']) || []; - const dataScatterText = dataScatterX.map((ele, idx) => `'xvar: ${ele}
yvar: ${dataScatterY[idx]}'`) || []; + const dataScatterText = + dataScatterX.map( + (ele, idx) => `'xvar: ${ele}
yvar: ${dataScatterY[idx]}'`, + ) || []; const { dataSigmaX, @@ -468,161 +507,168 @@ const generateXTestScatter = (json, jsonTrain) => { axislab, } = generateCircles(jsonTrain); - return { - data: [{ - x: dataScatterX, - y: dataScatterY, - text: dataScatterText, - type: 'scatter', - mode: 'markers', - marker: { - autocolorscale: false, - color: 'rgba(255,165,0,1)', - opacity: 0.5, - size: 3.02362204724409, - symbol: 'square', + data: [ + { + x: dataScatterX, + y: dataScatterY, + text: dataScatterText, + type: 'scatter', + mode: 'markers', + marker: { + autocolorscale: false, + color: 'rgba(255,165,0,1)', + opacity: 0.5, + size: 3.02362204724409, + symbol: 'square', + line: { + width: 1.88976377952756, + color: 'rgba(255,165,0,1)', + }, + }, + hoveron: 'points', + showlegend: false, + xaxis: 'x', + yaxis: 'y', + hoverinfo: 'text', + frame: null, + }, + { + x: dataSigmaX, + y: dataSigmaY, + text: dataSigmaText, + type: 'scatter', + mode: 'lines', + line: { + width: 1.13385826771654, + color: 'rgba(204,229,255,1)', + dash: 'solid', + }, + hoveron: 'points', + name: 'Sigma', + legendgroup: 'Sigma', + showlegend: true, + xaxis: 'x', + yaxis: 'y', + hoverinfo: 'text', + frame: null, + }, + { + x: data2SigmaX, + y: data2SigmaY, + text: data2SigmaText, + type: 'scatter', + mode: 'lines', + line: { + width: 1.13385826771654, + color: 'rgba(153,204,255,1)', + dash: 'solid', + }, + hoveron: 'points', + name: '2Sigma', + legendgroup: '2Sigma', + showlegend: true, + xaxis: 'x', + yaxis: 'y', + hoverinfo: 'text', + frame: null, + }, + { + x: data3SigmaX, + y: data3SigmaY, + text: data3SigmaText, + type: 'scatter', + mode: 'lines', + line: { + width: 1.13385826771654, + color: 'rgba(102,178,255,1)', + dash: 'solid', + }, + hoveron: 'points', + name: '3Sigma', + legendgroup: '3Sigma', + showlegend: true, + xaxis: 'x', + yaxis: 'y', + hoverinfo: 'text', + frame: null, + }, + { + x: dataRangeX, + y: dataRangeY, + text: dataRangeText, + type: 'scatter', + mode: 'lines', + line: { + width: 1.13385826771654, + color: 'rgba(30,144,255,1)', + dash: 'solid', + }, + hoveron: 'points', + name: 'Range', + legendgroup: 'Range', + showlegend: true, + xaxis: 'x', + yaxis: 'y', + hoverinfo: 'text', + frame: null, + }, + { + x: dataParcentileX, + y: dataParcentileY, + text: dataParcentileText, + type: 'scatter', + mode: 'lines', + line: { + width: 1.13385826771654, + color: 'rgba(255,52,179,1)', + dash: 'solid', + }, + hoveron: 'points', + name: 'Parcentile 0.85', + legendgroup: 'Parcentile 0.85', + showlegend: true, + xaxis: 'x', + yaxis: 'y', + hoverinfo: 'text', + frame: null, + }, + { + x: [0, 0], + y: [-3.94029493306541, 3.94029493306541], + text: 'xintercept: 0', + type: 'scatter', + mode: 'lines', line: { width: 1.88976377952756, - color: 'rgba(255,165,0,1)', + color: 'rgba(64,64,64,1)', + dash: 'solid', }, + hoveron: 'points', + showlegend: false, + xaxis: 'x', + yaxis: 'y', + hoverinfo: 'text', + frame: null, + }, + { + x: [-3.94195225524749, 3.9345886914811], + y: [0, 0], + text: 'yintercept: 0', + type: 'scatter', + mode: 'lines', + line: { + width: 1.88976377952756, + color: 'rgba(64,64,64,1)', + dash: 'solid', + }, + hoveron: 'points', + showlegend: false, + xaxis: 'x', + yaxis: 'y', + hoverinfo: 'text', + frame: null, }, - hoveron: 'points', - showlegend: false, - xaxis: 'x', - yaxis: 'y', - hoverinfo: 'text', - frame: null, - }, { - x: dataSigmaX, - y: dataSigmaY, - text: dataSigmaText, - type: 'scatter', - mode: 'lines', - line: { - width: 1.13385826771654, - color: 'rgba(204,229,255,1)', - dash: 'solid', - }, - hoveron: 'points', - name: 'Sigma', - legendgroup: 'Sigma', - showlegend: true, - xaxis: 'x', - yaxis: 'y', - hoverinfo: 'text', - frame: null, - }, { - x: data2SigmaX, - y: data2SigmaY, - text: data2SigmaText, - type: 'scatter', - mode: 'lines', - line: { - width: 1.13385826771654, - color: 'rgba(153,204,255,1)', - dash: 'solid', - }, - hoveron: 'points', - name: '2Sigma', - legendgroup: '2Sigma', - showlegend: true, - xaxis: 'x', - yaxis: 'y', - hoverinfo: 'text', - frame: null, - }, { - x: data3SigmaX, - y: data3SigmaY, - text: data3SigmaText, - type: 'scatter', - mode: 'lines', - line: { - width: 1.13385826771654, - color: 'rgba(102,178,255,1)', - dash: 'solid', - }, - hoveron: 'points', - name: '3Sigma', - legendgroup: '3Sigma', - showlegend: true, - xaxis: 'x', - yaxis: 'y', - hoverinfo: 'text', - frame: null, - }, { - x: dataRangeX, - y: dataRangeY, - text: dataRangeText, - type: 'scatter', - mode: 'lines', - line: { - width: 1.13385826771654, - color: 'rgba(30,144,255,1)', - dash: 'solid', - }, - hoveron: 'points', - name: 'Range', - legendgroup: 'Range', - showlegend: true, - xaxis: 'x', - yaxis: 'y', - hoverinfo: 'text', - frame: null, - }, { - x: dataParcentileX, - y: dataParcentileY, - text: dataParcentileText, - type: 'scatter', - mode: 'lines', - line: { - width: 1.13385826771654, - color: 'rgba(255,52,179,1)', - dash: 'solid', - }, - hoveron: 'points', - name: 'Parcentile 0.85', - legendgroup: 'Parcentile 0.85', - showlegend: true, - xaxis: 'x', - yaxis: 'y', - hoverinfo: 'text', - frame: null, - }, { - x: [0, 0], - y: [-3.94029493306541, 3.94029493306541], - text: 'xintercept: 0', - type: 'scatter', - mode: 'lines', - line: { - width: 1.88976377952756, - color: 'rgba(64,64,64,1)', - dash: 'solid', - }, - hoveron: 'points', - showlegend: false, - xaxis: 'x', - yaxis: 'y', - hoverinfo: 'text', - frame: null, - }, { - x: [-3.94195225524749, 3.9345886914811], - y: [0, 0], - text: 'yintercept: 0', - type: 'scatter', - mode: 'lines', - line: { - width: 1.88976377952756, - color: 'rgba(64,64,64,1)', - dash: 'solid', - }, - hoveron: 'points', - showlegend: false, - xaxis: 'x', - yaxis: 'y', - hoverinfo: 'text', - frame: null, - }, ], layout: { margin: { @@ -722,21 +768,22 @@ const generateXTestScatter = (json, jsonTrain) => { scaleratio: 1, hoverformat: '.2f', }, - shapes: [{ - type: 'rect', - fillcolor: null, - line: { - color: null, - width: 0, - linetype: [], + shapes: [ + { + type: 'rect', + fillcolor: null, + line: { + color: null, + width: 0, + linetype: [], + }, + yref: 'paper', + xref: 'paper', + x0: 0, + x1: 1, + y0: 0, + y1: 1, }, - yref: 'paper', - xref: 'paper', - x0: 0, - x1: 1, - y0: 0, - y1: 1, - }, ], showlegend: false, legend: { @@ -795,9 +842,19 @@ const generateXTestScatter = (json, jsonTrain) => { }, debounce: 0, }, - shinyEvents: ['plotly_hover', 'plotly_click', 'plotly_selected', 'plotly_relayout', 'plotly_brushed', - 'plotly_brushing', 'plotly_clickannotation', 'plotly_doubleclick', 'plotly_deselect', - 'plotly_afterplot', 'plotly_sunburstclick'], + shinyEvents: [ + 'plotly_hover', + 'plotly_click', + 'plotly_selected', + 'plotly_relayout', + 'plotly_brushed', + 'plotly_brushing', + 'plotly_clickannotation', + 'plotly_doubleclick', + 'plotly_deselect', + 'plotly_afterplot', + 'plotly_sunburstclick', + ], base_url: 'https://plot.ly', }; }; @@ -813,9 +870,11 @@ const generateBiplot = (json, jsonTrain, sampleNo = null) => { const angle = getNode(json, ['angle']) || []; const hjust = getNode(json, ['hjust']) || []; const varname = getNode(json, ['varname']) || []; - const sensorHoverText = dataX.map( - (ele, i) => `xvar: ${ele}
yvar: ${dataY[i]}
varname: ${varname[i]}
angle: ${angle[i]}
hjust: ${hjust[i]}`, - ) || []; + const sensorHoverText = + dataX.map( + (ele, i) => + `xvar: ${ele}
yvar: ${dataY[i]}
varname: ${varname[i]}
angle: ${angle[i]}
hjust: ${hjust[i]}`, + ) || []; const vectorX = []; dataX.forEach((x, i) => { @@ -833,12 +892,19 @@ const generateBiplot = (json, jsonTrain, sampleNo = null) => { } vectorY.push(0); vectorY.push(x); - vectorText.push(`x: 0
y: 0
xvar: ${dataX[i]}
yvar: ${dataY[i]}`); - vectorText.push(`x: 0
y: 0
xvar: ${dataX[i]}
yvar: ${dataY[i]}`); + vectorText.push( + `x: 0
y: 0
xvar: ${dataX[i]}
yvar: ${dataY[i]}`, + ); + vectorText.push( + `x: 0
y: 0
xvar: ${dataX[i]}
yvar: ${dataY[i]}`, + ); }); // clickedPoint - const clickedPoint = getNode(json, ['clicked_point']) || { x: [null], y: [null] }; + const clickedPoint = getNode(json, ['clicked_point']) || { + x: [null], + y: [null], + }; const { dataSigmaX, @@ -860,193 +926,203 @@ const generateBiplot = (json, jsonTrain, sampleNo = null) => { } = generateCircles(jsonTrain); return { - data: [{ - x: dataSigmaX, - y: dataSigmaY, - text: dataSigmaText, - type: 'scatter', - mode: 'lines', - line: { - width: 1.13385826771654, - color: 'rgba(204,229,255,1)', - dash: 'solid', - }, - hoveron: 'points', - name: 'Sigma', - legendgroup: 'Sigma', - showlegend: true, - xaxis: 'x', - yaxis: 'y', - hoverinfo: 'text', - frame: null, - }, { - x: data2SigmaX, - y: data2SigmaY, - text: data2SigmaText, - type: 'scatter', - mode: 'lines', - line: { - width: 1.13385826771654, - color: 'rgba(153,204,255,1)', - dash: 'solid', - }, - hoveron: 'points', - name: '2Sigma', - legendgroup: '2Sigma', - showlegend: true, - xaxis: 'x', - yaxis: 'y', - hoverinfo: 'text', - frame: null, - }, { - x: data3SigmaX, - y: data3SigmaY, - text: data3SigmaText, - type: 'scatter', - mode: 'lines', - line: { - width: 1.13385826771654, - color: 'rgba(102,178,255,1)', - dash: 'solid', - }, - hoveron: 'points', - name: '3Sigma', - legendgroup: '3Sigma', - showlegend: true, - xaxis: 'x', - yaxis: 'y', - hoverinfo: 'text', - frame: null, - }, { - x: dataRangeX, - y: dataRangeY, - text: dataRangeText, - type: 'scatter', - mode: 'lines', - line: { - width: 1.13385826771654, - color: 'rgba(30,144,255,1)', - dash: 'solid', - }, - hoveron: 'points', - name: 'Range', - legendgroup: 'Range', - showlegend: true, - xaxis: 'x', - yaxis: 'y', - hoverinfo: 'text', - frame: null, - }, { - x: dataParcentileX, - y: dataParcentileY, - text: dataParcentileText, - type: 'scatter', - mode: 'lines', - line: { - width: 1.13385826771654, - color: 'rgba(255,52,179,1)', - dash: 'solid', - }, - hoveron: 'points', - name: 'Parcentile 0.85', - legendgroup: 'Parcentile 0.85', - showlegend: true, - xaxis: 'x', - yaxis: 'y', - hoverinfo: 'text', - frame: null, - }, { - x: vectorX, - y: vectorY, - text: vectorText, - type: 'scatter', - mode: 'lines', - line: { - width: 1.88976377952756, - color: 'rgba(255,192,203,1)', - dash: 'solid', - }, - hoveron: 'points', - showlegend: false, - xaxis: 'x', - yaxis: 'y', - hoverinfo: 'text', - frame: null, - }, { - x: dataX.map(x => x * 2), - y: dataY.map(y => y * 2), - text: varname, - hovertext: sensorHoverText, - textfont: { - size: 11.3385826771654, - color: 'rgba(255,255,255,1)', - }, - type: 'scatter', - mode: 'text', - hoveron: 'points', - showlegend: false, - xaxis: 'x', - yaxis: 'y', - hoverinfo: 'text', - frame: null, - }, { - x: clickedPoint.x, - y: clickedPoint.y, - text: `xvar: ${clickedPoint.x[0]}
yvar: ${clickedPoint.y[0]}`, - type: 'scatter', - mode: 'markers', - marker: { - autocolorscale: false, - color: 'rgba(255,165,0,1)', - opacity: 0.5, - size: 11.3385826771654, - symbol: 'square', + data: [ + { + x: dataSigmaX, + y: dataSigmaY, + text: dataSigmaText, + type: 'scatter', + mode: 'lines', + line: { + width: 1.13385826771654, + color: 'rgba(204,229,255,1)', + dash: 'solid', + }, + hoveron: 'points', + name: 'Sigma', + legendgroup: 'Sigma', + showlegend: true, + xaxis: 'x', + yaxis: 'y', + hoverinfo: 'text', + frame: null, + }, + { + x: data2SigmaX, + y: data2SigmaY, + text: data2SigmaText, + type: 'scatter', + mode: 'lines', + line: { + width: 1.13385826771654, + color: 'rgba(153,204,255,1)', + dash: 'solid', + }, + hoveron: 'points', + name: '2Sigma', + legendgroup: '2Sigma', + showlegend: true, + xaxis: 'x', + yaxis: 'y', + hoverinfo: 'text', + frame: null, + }, + { + x: data3SigmaX, + y: data3SigmaY, + text: data3SigmaText, + type: 'scatter', + mode: 'lines', + line: { + width: 1.13385826771654, + color: 'rgba(102,178,255,1)', + dash: 'solid', + }, + hoveron: 'points', + name: '3Sigma', + legendgroup: '3Sigma', + showlegend: true, + xaxis: 'x', + yaxis: 'y', + hoverinfo: 'text', + frame: null, + }, + { + x: dataRangeX, + y: dataRangeY, + text: dataRangeText, + type: 'scatter', + mode: 'lines', + line: { + width: 1.13385826771654, + color: 'rgba(30,144,255,1)', + dash: 'solid', + }, + hoveron: 'points', + name: 'Range', + legendgroup: 'Range', + showlegend: true, + xaxis: 'x', + yaxis: 'y', + hoverinfo: 'text', + frame: null, + }, + { + x: dataParcentileX, + y: dataParcentileY, + text: dataParcentileText, + type: 'scatter', + mode: 'lines', + line: { + width: 1.13385826771654, + color: 'rgba(255,52,179,1)', + dash: 'solid', + }, + hoveron: 'points', + name: 'Parcentile 0.85', + legendgroup: 'Parcentile 0.85', + showlegend: true, + xaxis: 'x', + yaxis: 'y', + hoverinfo: 'text', + frame: null, + }, + { + x: vectorX, + y: vectorY, + text: vectorText, + type: 'scatter', + mode: 'lines', line: { width: 1.88976377952756, + color: 'rgba(255,192,203,1)', + dash: 'solid', + }, + hoveron: 'points', + showlegend: false, + xaxis: 'x', + yaxis: 'y', + hoverinfo: 'text', + frame: null, + }, + { + x: dataX.map((x) => x * 2), + y: dataY.map((y) => y * 2), + text: varname, + hovertext: sensorHoverText, + textfont: { + size: 11.3385826771654, + color: 'rgba(255,255,255,1)', + }, + type: 'scatter', + mode: 'text', + hoveron: 'points', + showlegend: false, + xaxis: 'x', + yaxis: 'y', + hoverinfo: 'text', + frame: null, + }, + { + x: clickedPoint.x, + y: clickedPoint.y, + text: `xvar: ${clickedPoint.x[0]}
yvar: ${clickedPoint.y[0]}`, + type: 'scatter', + mode: 'markers', + marker: { + autocolorscale: false, color: 'rgba(255,165,0,1)', + opacity: 0.5, + size: 11.3385826771654, + symbol: 'square', + line: { + width: 1.88976377952756, + color: 'rgba(255,165,0,1)', + }, }, + hoveron: 'points', + showlegend: false, + xaxis: 'x', + yaxis: 'y', + hoverinfo: 'text', + frame: null, + }, + { + x: [0, 0], + y: [-4.07856844526106, 6.84403868917397], + text: 'xintercept: 0', + type: 'scatter', + mode: 'lines', + line: { + width: 1.88976377952756, + color: 'rgba(64,64,64,1)', + dash: 'solid', + }, + hoveron: 'points', + showlegend: false, + xaxis: 'x', + yaxis: 'y', + hoverinfo: 'text', + frame: null, + }, + { + x: [-5.82714314845274, 5.83842812409785], + y: [0, 0], + text: 'yintercept: 0', + type: 'scatter', + mode: 'lines', + line: { + width: 1.88976377952756, + color: 'rgba(64,64,64,1)', + dash: 'solid', + }, + hoveron: 'points', + showlegend: false, + xaxis: 'x', + yaxis: 'y', + hoverinfo: 'text', + frame: null, }, - hoveron: 'points', - showlegend: false, - xaxis: 'x', - yaxis: 'y', - hoverinfo: 'text', - frame: null, - }, { - x: [0, 0], - y: [-4.07856844526106, 6.84403868917397], - text: 'xintercept: 0', - type: 'scatter', - mode: 'lines', - line: { - width: 1.88976377952756, - color: 'rgba(64,64,64,1)', - dash: 'solid', - }, - hoveron: 'points', - showlegend: false, - xaxis: 'x', - yaxis: 'y', - hoverinfo: 'text', - frame: null, - }, { - x: [-5.82714314845274, 5.83842812409785], - y: [0, 0], - text: 'yintercept: 0', - type: 'scatter', - mode: 'lines', - line: { - width: 1.88976377952756, - color: 'rgba(64,64,64,1)', - dash: 'solid', - }, - hoveron: 'points', - showlegend: false, - xaxis: 'x', - yaxis: 'y', - hoverinfo: 'text', - frame: null, - }, ], layout: { margin: { @@ -1156,21 +1232,22 @@ const generateBiplot = (json, jsonTrain, sampleNo = null) => { scaleratio: 1, hoverformat: '.2f', }, - shapes: [{ - type: 'rect', - fillcolor: null, - line: { - color: null, - width: 0, - linetype: [], + shapes: [ + { + type: 'rect', + fillcolor: null, + line: { + color: null, + width: 0, + linetype: [], + }, + yref: 'paper', + xref: 'paper', + x0: 0, + x1: 1, + y0: 0, + y1: 1, }, - yref: 'paper', - xref: 'paper', - x0: 0, - x1: 1, - y0: 0, - y1: 1, - }, ], showlegend: true, legend: { @@ -1184,25 +1261,26 @@ const generateBiplot = (json, jsonTrain, sampleNo = null) => { }, y: 0.940944881889764, }, - annotations: [{ - text: 'Guide', - x: 1.02, - y: 1, - showarrow: false, - ax: 0, - ay: 0, - font: { - color: 'rgba(255,255,255,1)', - family: '', - size: 13.2835201328352, + annotations: [ + { + text: 'Guide', + x: 1.02, + y: 1, + showarrow: false, + ax: 0, + ay: 0, + font: { + color: 'rgba(255,255,255,1)', + family: '', + size: 13.2835201328352, + }, + xref: 'paper', + yref: 'paper', + textangle: -0, + xanchor: 'left', + yanchor: 'bottom', + legendTitle: true, }, - xref: 'paper', - yref: 'paper', - textangle: -0, - xanchor: 'left', - yanchor: 'bottom', - legendTitle: true, - }, ], hovermode: 'closest', barmode: 'relative', @@ -1264,7 +1342,19 @@ const generateBiplot = (json, jsonTrain, sampleNo = null) => { }, debounce: 0, }, - shinyEvents: ['plotly_hover', 'plotly_click', 'plotly_selected', 'plotly_relayout', 'plotly_brushed', 'plotly_brushing', 'plotly_clickannotation', 'plotly_doubleclick', 'plotly_deselect', 'plotly_afterplot', 'plotly_sunburstclick'], + shinyEvents: [ + 'plotly_hover', + 'plotly_click', + 'plotly_selected', + 'plotly_relayout', + 'plotly_brushed', + 'plotly_brushing', + 'plotly_clickannotation', + 'plotly_doubleclick', + 'plotly_deselect', + 'plotly_afterplot', + 'plotly_sunburstclick', + ], base_url: 'https://plot.ly', }; }; diff --git a/ap/static/analyze/js/graphical_lasso.js b/ap/static/analyze/js/graphical_lasso.js index 1e47661..1fca392 100644 --- a/ap/static/analyze/js/graphical_lasso.js +++ b/ap/static/analyze/js/graphical_lasso.js @@ -1,8 +1,3 @@ -/* eslint-disable no-restricted-syntax */ -/* eslint-disable guard-for-in */ -/* eslint-disable no-unused-vars */ -/* eslint-disable no-undef */ -/* eslint-disable no-use-before-define */ const REQUEST_TIMEOUT = setRequestTimeOut(); const MAX_NUMBER_OF_SENSOR = 60; const MIN_NUMBER_OF_SENSOR = 0; @@ -33,9 +28,9 @@ const formElements = { }; const i18n = { - traceResulLimited: $('#i18nTraceResultLimited').text() || '', - SQLLimit: $('#i18nSQLLimit').text(), - allSelection: $('#i18nAllSelection').text(), + traceResulLimited: $('#i18nTraceResultLimited').text() || '', + SQLLimit: $('#i18nSQLLimit').text(), + allSelection: $('#i18nAllSelection').text(), objectiveHoverMsg: $('#i18nGLObjectiveHoverMsg').text(), }; @@ -55,7 +50,6 @@ $(() => { objectiveHoverMsg: i18n.objectiveHoverMsg, showStrColumn: true, hideStrVariable: false, // select Str columns as target sensors - hideCTCol: true, showFilter: true, allowObjectiveForRealOnly: true, disableSerialAsObjective: true, @@ -63,7 +57,13 @@ $(() => { endProcItem(); // add first condition process - const condProcItem = addCondProc(endProcs.ids, endProcs.names, '', formElements.formID, 'btn-add-cond-proc'); + const condProcItem = addCondProc( + endProcs.ids, + endProcs.names, + '', + formElements.formID, + 'btn-add-cond-proc', + ); condProcItem(); // click even of condition proc add button @@ -100,7 +100,7 @@ const collectFromDataGL = (clearOnFlyFilter) => { if (clearOnFlyFilter) { formData = new FormData(traceForm[0]); formData = genDatetimeRange(formData); - lastUsedFormData = formData; + lastUsedFormData = formData; } else { formData = lastUsedFormData; formData = transformCatFilterParams(formData); @@ -109,35 +109,43 @@ const collectFromDataGL = (clearOnFlyFilter) => { return formData; }; - const callToBackEndAPI = (clearOnFlyFilter = true) => { const formData = collectFromDataGL(clearOnFlyFilter); - showGraphCallApi('/ap/api/gl/plot', formData, REQUEST_TIMEOUT, async (res) => { - resData = res; - graphStore.setTraceData(res) - showGraphicalLasso(res); - - $('html, body').animate({ - scrollTop: $(formElements.plotCardId).offset().top, - }, 500); - // show info table - showInfoTable(res); + showGraphCallApi( + '/ap/api/gl/plot', + formData, + REQUEST_TIMEOUT, + async (res) => { + resData = res; + graphStore.setTraceData(res); + showGraphicalLasso(res); - fillDataToFilterModal(res.filter_on_demand, () => { - callToBackEndAPI(false); - }); + $('html, body').animate( + { + scrollTop: getOffsetTopDisplayGraph( + formElements.plotCardId, + ), + }, + 500, + ); + // show info table + showInfoTable(res); - }); + fillDataToFilterModal(res.filter_on_demand, () => { + callToBackEndAPI(false); + }); + }, + ); }; -const setSparsityValue = (alphas, bestAlphas=0, threshold) => { +const setSparsityValue = (alphas, bestAlphas = 0, threshold) => { // set maximum value of ticks and input range $('#sparsity').attr('max', alphas.length - 1); $('.range-ticks').html(''); // gen dynamic ticks of input range - alphas.forEach(alpha => { - $('.range-ticks').append(''); + alphas.forEach((alpha) => { + $('.range-ticks').append(''); }); const markedValue = alphas.indexOf(Number(bestAlphas)); // set selected value for inputs (by dummy value) @@ -150,22 +158,22 @@ const setSparsityValue = (alphas, bestAlphas=0, threshold) => { $('#sparsityValue').text(selectedSparsity); $('#thresholdValue').text(threshold); }; -const showGraphicalLasso = (res, changedThreshold = null, alpha = null, inCurrentPosition=false) => { +const showGraphicalLasso = ( + res, + changedThreshold = null, + alpha = null, + inCurrentPosition = false, +) => { formElements.plotCard.show(); $(`#${formElements.graphicalLassoCanvasId}`).empty(); if (!res.array_plotdata) return; - const [ - alphas, - best_alpha, - threshold, - dic_nodes, - dic_edges, - processNames, - ] = res.array_plotdata; + const [alphas, best_alpha, threshold, dic_nodes, dic_edges, processNames] = + res.array_plotdata; if (!dic_nodes) return; - selectedThreshold = changedThreshold !== null ? changedThreshold : threshold; + selectedThreshold = + changedThreshold !== null ? changedThreshold : threshold; selectedSparsity = alpha !== null ? alpha : best_alpha; const availableThresholds = Object.keys(dic_nodes); setRangeValue(res, 'threshold', null, true); @@ -189,13 +197,16 @@ const showGraphicalLasso = (res, changedThreshold = null, alpha = null, inCurren // update node label node.label = label; // update node position - if (inCurrentPosition && Object.keys(nodePositionData).includes(node.id)) { + if ( + inCurrentPosition && + Object.keys(nodePositionData).includes(node.id) + ) { node.x = nodePositionData[node.id].x; node.y = nodePositionData[node.id].y; } }); // convert to json for sigma.js - const graph_data = {nodes: nodes, edges: edges}; + const graph_data = { nodes: nodes, edges: edges }; // set and show default value of sparsity and threshold // use best_alphas @@ -208,7 +219,7 @@ const dfToList = (df) => { const edges = df[keys[0]].map((value, i) => { const res = {}; for (const key of keys) { - res[key] = df[key][i] + res[key] = df[key][i]; } return res; }); @@ -222,7 +233,12 @@ const castToStr = (number) => { } return number; }; -const setRangeValue = (res, rangeId, availableValues = null, isThreshold = false) => { +const setRangeValue = ( + res, + rangeId, + availableValues = null, + isThreshold = false, +) => { const range = $(`#${rangeId}`); const valueEl = $(`#${rangeId}Value`); @@ -239,8 +255,8 @@ const setRangeValue = (res, rangeId, availableValues = null, isThreshold = false } valueEl.text(value); showGraphicalLasso(res, selectedThreshold, selectedSparsity); - }) -} + }); +}; const resetSettings = () => { // reset node position @@ -260,4 +276,4 @@ const dumpData = (type) => { }; const handleExportData = (type) => { showGraphAndDumpData(type, dumpData); -}; \ No newline at end of file +}; diff --git a/ap/static/analyze/js/graphical_lasso_sigma.js b/ap/static/analyze/js/graphical_lasso_sigma.js index 8032c46..a9eb3a0 100644 --- a/ap/static/analyze/js/graphical_lasso_sigma.js +++ b/ap/static/analyze/js/graphical_lasso_sigma.js @@ -22,17 +22,17 @@ const drawGraphicalLassoSigma = (canvasId, data) => { edgeHoverExtremities: true, edgeHoverHighlightNodes: 'circle', sideMargin: 1, - } - }; + }, + }; const s = new sigma(sigmaLayout); const dragListener = sigma.plugins.dragNodes(s, s.renderers[0]); - dragListener.bind('dragend', function(event) { + dragListener.bind('dragend', function (event) { if (nodePositionData) { nodePositionData[event.data.node.id] = { x: event.data.node.x, y: event.data.node.y, - } + }; } }); -} \ No newline at end of file +}; diff --git a/ap/static/analyze/js/hotelling_biplot.js b/ap/static/analyze/js/hotelling_biplot.js index 42b81cb..c943e18 100644 --- a/ap/static/analyze/js/hotelling_biplot.js +++ b/ap/static/analyze/js/hotelling_biplot.js @@ -1,16 +1,15 @@ -/* eslint-disable no-undef */ const drawPCABiplotChart = (json, chartConfig = {}, sizeOfData = null) => { if (!json) return; - + const startTime = performance.now(); - + const figure = json; figure.layout.autosize = true; figure.layout.plot_bgcolor = '#222222'; figure.layout.paper_bgcolor = '#222222'; figure.layout.xaxis.gridcolor = '#444444'; figure.layout.yaxis.gridcolor = '#444444'; - + figure.data.forEach((dat) => { if (dat.mode === 'markers') { dat.hoverinfo = 'none'; diff --git a/ap/static/analyze/js/hotelling_common.js b/ap/static/analyze/js/hotelling_common.js index a14a17d..723c4bf 100644 --- a/ap/static/analyze/js/hotelling_common.js +++ b/ap/static/analyze/js/hotelling_common.js @@ -1,6 +1,3 @@ -/* eslint-disable no-restricted-syntax */ -/* eslint-disable guard-for-in */ -/* eslint-disable no-unused-vars */ const graphStore = new GraphStore(); // dont rename. must use formElements because some common functions @@ -57,7 +54,6 @@ const hideLoading = (divElement = null) => { divElement.html(''); }; - // A template to visualize clicked data point const clickedPointTemplate = (xVal, yVal) => ({ x: [xVal], @@ -90,11 +86,14 @@ const addDataPointFromXY = (elementId, orginalDataLen, x, y) => { if (dataLength > orginalDataLen) { Plotly.deleteTraces(elementId, dataLength - 1); } - Plotly.addTraces(elementId, clickedPointTrace, chartElement.data.length); + Plotly.addTraces( + elementId, + clickedPointTrace, + chartElement.data.length, + ); } }; - /* This function is to update clicked data point to timeseries chart: Q & T2 Args: @@ -102,7 +101,11 @@ const addDataPointFromXY = (elementId, orginalDataLen, x, y) => { dataPoint: data of clicked point got from click event isStartingChart: to identify if chart in the elementId is origin of the click */ -const updateTimeSeries = (elementId = null, dataPoint = {}, isStartingChart = true) => { +const updateTimeSeries = ( + elementId = null, + dataPoint = {}, + isStartingChart = true, +) => { // update Chart const tsElement = document.getElementById(elementId); const tsOriginalDataLength = 2; @@ -117,10 +120,16 @@ const updateTimeSeries = (elementId = null, dataPoint = {}, isStartingChart = tr for (let idx = 0; idx < data.length; idx++) { const trace = data[idx]; - if ((trace.name === 'test')) { // clicked point is in test data + if (trace.name === 'test') { + // clicked point is in test data const dataX = trace.x[clickedDataIndex]; const dataY = trace.y[clickedDataIndex]; - addDataPointFromXY(elementId, tsOriginalDataLength, dataX, dataY); + addDataPointFromXY( + elementId, + tsOriginalDataLength, + dataX, + dataY, + ); break; } } @@ -134,7 +143,12 @@ const updateTimeSeries = (elementId = null, dataPoint = {}, isStartingChart = tr dataPoint: data of clicked point got from click event isStartingChart: to identify if chart in the elementId is origin of the click */ -const updateScatter = (elementId = null, dataPoint = {}, isStartingChart = true, jsonDtTest = {}) => { +const updateScatter = ( + elementId = null, + dataPoint = {}, + isStartingChart = true, + jsonDtTest = {}, +) => { // update Chart const scatterElement = document.getElementById(elementId); const scatterOrginalDataLength = 6; @@ -153,7 +167,12 @@ const updateScatter = (elementId = null, dataPoint = {}, isStartingChart = true, if (trace.name === 'clickedPoint') { const dataX = jsonDtTest.data[0].x[clickedDataIndex]; const dataY = jsonDtTest.data[0].y[clickedDataIndex]; - addDataPointFromXY(elementId, scatterOrginalDataLength, dataX, dataY); + addDataPointFromXY( + elementId, + scatterOrginalDataLength, + dataX, + dataY, + ); isReplaced = true; break; } @@ -161,7 +180,12 @@ const updateScatter = (elementId = null, dataPoint = {}, isStartingChart = true, if (!isReplaced) { const dataX = jsonDtTest.data[0].x[clickedDataIndex]; const dataY = jsonDtTest.data[0].y[clickedDataIndex]; - addDataPointFromXY(elementId, scatterOrginalDataLength, dataX, dataY); + addDataPointFromXY( + elementId, + scatterOrginalDataLength, + dataX, + dataY, + ); } } }; @@ -178,8 +202,8 @@ const updateRecordInfo = (dataInfos = {}, sampleNo = 0) => { ${i18n.value} `; - const re = /\d+\_[1,2]$/; - const reGetDate = /\d+\_[2]$/; + const re = /\d+_[1,2]$/; + const reGetDate = /\d+_[2]$/; for (const dataInfo of dataInfos) { let [proc, col_name, col_val, col_attr] = dataInfo; let bgColorStyle = ''; @@ -208,20 +232,37 @@ const updateRecordInfo = (dataInfos = {}, sampleNo = 0) => { dataPoint: data which is got from the click event startingChart: id of chart which originates the click event */ -const broadcastClickEvent = (dataPoint, startingChart, jsonPCAScoreTest = {}) => { +const broadcastClickEvent = ( + dataPoint, + startingChart, + jsonPCAScoreTest = {}, +) => { // Update time series - updateTimeSeries(elementId = 'timeSeriesT2', dataPoint, startingChart === 'timeSeriesT2'); - updateTimeSeries(elementId = 'timeSeriesQ', dataPoint, startingChart === 'timeSeriesQ'); + updateTimeSeries( + (elementId = 'timeSeriesT2'), + dataPoint, + startingChart === 'timeSeriesT2', + ); + updateTimeSeries( + (elementId = 'timeSeriesQ'), + dataPoint, + startingChart === 'timeSeriesQ', + ); // Update Xtest scatter - updateScatter(elementId = 'xTest', dataPoint, startingChart === 'xTest', jsonDtTest = jsonPCAScoreTest); + updateScatter( + (elementId = 'xTest'), + dataPoint, + startingChart === 'xTest', + (jsonDtTest = jsonPCAScoreTest), + ); // Call backend to get jsons for Qcont + T2cont + BiPlot + record info const formData = collectInputAsFormData(); const { sampleNo } = dataPoint.points[0]; formData.set('sampleNo', sampleNo); loadingShow(); - getPCAPlotsFromBackend(formData, clickOnChart = true, sampleNo); + getPCAPlotsFromBackend(formData, (clickOnChart = true), sampleNo); // switch to record table $('[href="#table-info"]').tab('show'); @@ -254,16 +295,13 @@ const contributionChartLayout = (objData, type = 't2', sampleNo = null) => { xref: 'paper', }, xaxis: { - domain: [ - 0, - 1, - ], + domain: [0, 1], automargin: true, type: 'linear', autorange: false, range: [ 0, - 1.05 * Math.max(...objData.Ratio.map(x => Math.abs(x))), + 1.05 * Math.max(...objData.Ratio.map((x) => Math.abs(x))), ], tickmode: 'array', categoryorder: 'array', @@ -298,10 +336,7 @@ const contributionChartLayout = (objData, type = 't2', sampleNo = null) => { hoverformat: '.2f', }, yaxis: { - domain: [ - 0, - 1, - ], + domain: [0, 1], automargin: true, type: 'linear', autorange: true, @@ -430,22 +465,24 @@ const genContributionChartData = (objData, type = 't2', dpInfo = null) => { const t = colorScale[type].length - 1; const binVolume = (x) => { if (type === 't2') { - return 2 * x / t; + return (2 * x) / t; } if (absX !== absM) { return (absX - absM) / t; } - return 2 * absX / t; - }; - return absM >= absX ? { - min: M, - max: -1 * M, - binVol: binVolume(absM), - } : { - min: type === 't2' ? -1 * X : absM, - max: type === 't2' ? X : absX, - binVol: binVolume(absX), + return (2 * absX) / t; }; + return absM >= absX + ? { + min: M, + max: -1 * M, + binVol: binVolume(absM), + } + : { + min: type === 't2' ? -1 * X : absM, + max: type === 't2' ? X : absX, + binVol: binVolume(absX), + }; }; const cr = convertRange(objData.Ratio); const markerColor = (i) => { @@ -456,17 +493,17 @@ const genContributionChartData = (objData, type = 't2', dpInfo = null) => { const rRanger = () => { const r = [cr.min, cr.max]; const s = (cr.max - cr.min) / 4; - let subRange = [...Array(3).keys()].map(x => cr.min + ((x + 1) * s)); + let subRange = [...Array(3).keys()].map((x) => cr.min + (x + 1) * s); subRange = subRange.concat(r); const tVals = Array.from(new Set(subRange.sort((a, b) => a - b))); const ratioConvertor = (ranger) => { const minR = Math.min(...ranger); const maxR = Math.max(...ranger); const sR = (maxR - minR) / 100; - return ranger.map(i => 0.01 * (i - minR) / sR); + return ranger.map((i) => (0.01 * (i - minR)) / sR); }; return { - ticktext: tVals.map(x => x.toFixed(1)), + ticktext: tVals.map((x) => x.toFixed(1)), tickvals: ratioConvertor(tVals), }; }; @@ -475,7 +512,9 @@ const genContributionChartData = (objData, type = 't2', dpInfo = null) => { let procName = ''; let colName = ''; if (dpInfo) { - const rowInfo = dpInfo.filter(row => varName.toLowerCase() === row[1]); + const rowInfo = dpInfo.filter( + (row) => varName.toLowerCase() === row[1], + ); if (rowInfo.length) { [[procName, colName]] = rowInfo; distributionName = `${procName}-${colName}
`; @@ -489,17 +528,11 @@ const genContributionChartData = (objData, type = 't2', dpInfo = null) => { orientation: 'h', width: 0.9, base: 0, - x: [ + x: [Math.abs(v)], + y: [objData.Ratio.length - k], + hovertext: `${objData.Var[k]}
abs(Ratio): ${applySignificantDigit( Math.abs(v), - ], - y: [ - objData.Ratio.length - k, - ], - hovertext: `${objData.Var[k]}
abs(Ratio): ${ - applySignificantDigit(Math.abs(v)) - }
Ratio: ${ - applySignificantDigit(v) - }`, + )}
Ratio: ${applySignificantDigit(v)}`, type: 'bar', marker: { autocolorscale: false, @@ -518,12 +551,8 @@ const genContributionChartData = (objData, type = 't2', dpInfo = null) => { }); const ratioChart = { - x: [ - 1, - ], - y: [ - 0, - ], + x: [1], + y: [0], name: '99_d31a3926dd854cda0f79a49b4456c467', type: 'scatter', mode: 'markers', @@ -531,10 +560,7 @@ const genContributionChartData = (objData, type = 't2', dpInfo = null) => { hoverinfo: 'skip', showlegend: false, marker: { - color: [ - 0, - 1, - ], + color: [0, 1], colorscale: colorScale[type], colorbar: { bgcolor: 'transparent', diff --git a/ap/static/analyze/js/hotelling_q_contribution.js b/ap/static/analyze/js/hotelling_q_contribution.js index 0e6cc69..7db89aa 100644 --- a/ap/static/analyze/js/hotelling_q_contribution.js +++ b/ap/static/analyze/js/hotelling_q_contribution.js @@ -1,4 +1,3 @@ -/* eslint-disable no-undef */ const drawQContributionChart = (json, chartConfig = {}, sizeOfData = null) => { if (!json) return; @@ -10,7 +9,7 @@ const drawQContributionChart = (json, chartConfig = {}, sizeOfData = null) => { figure.layout.paper_bgcolor = '#222222'; figure.layout.xaxis.gridcolor = '#444444'; figure.layout.yaxis.gridcolor = '#444444'; - figure.layout.xaxis.tickangle = COMMON_CONSTANT.TICKS_ANGLE; + figure.layout.xaxis.tickangle = COMMON_CONSTANT.TICKS_ANGLE; figure.layout.legend = { bgcolor: '#222222', }; @@ -31,7 +30,6 @@ const drawQContributionChart = (json, chartConfig = {}, sizeOfData = null) => { style: { width: '100%', height: '100%' }, // responsive histogram }); - // send plotting time event const endTime = performance.now(); gtag('event', 'PCA_et', { @@ -48,21 +46,28 @@ const drawQContributionChart = (json, chartConfig = {}, sizeOfData = null) => { }); }; -const drawQContributionChartFromObj = (objData, sampleNo = null, chartConfig = {}, - sizeOfData = null, dpInfo = null, - shortName = null) => { +const drawQContributionChartFromObj = ( + objData, + sampleNo = null, + chartConfig = {}, + sizeOfData = null, + dpInfo = null, + shortName = null, +) => { if (!objData) return; const startTime = performance.now(); - Plotly.newPlot('qContributionChart', + Plotly.newPlot( + 'qContributionChart', genContributionChartData(objData, 'q', dpInfo), - contributionChartLayout(objData, 'q', sampleNo), { + contributionChartLayout(objData, 'q', sampleNo), + { ...genPlotlyIconSettings(), responsive: true, // responsive histogram useResizeHandler: true, // responsive histogram style: { width: '100%', height: '100%' }, // responsive histogram - }); - + }, + ); // send plotting time event const endTime = performance.now(); diff --git a/ap/static/analyze/js/hotelling_scatters.js b/ap/static/analyze/js/hotelling_scatters.js index 9abac4c..9568bd8 100644 --- a/ap/static/analyze/js/hotelling_scatters.js +++ b/ap/static/analyze/js/hotelling_scatters.js @@ -1,6 +1,3 @@ -/* eslint-disable no-undef */ -/* eslint-disable no-unused-vars */ - const drawXTrainScatter = (json, chartConfig = {}, sizeOfData = null) => { if (!json) return; @@ -26,8 +23,16 @@ const drawXTrainScatter = (json, chartConfig = {}, sizeOfData = null) => { figure.layout.autosize = true; figure.layout.xaxis.gridcolor = '#444444'; figure.layout.yaxis.gridcolor = '#444444'; - figure.layout.xaxis.title.font = {color: 'rgba(255,255,255,1)', family: '', size: 14}; - figure.layout.yaxis.title.font = {color: 'rgba(255,255,255,1)', family: '', size: 14}; + figure.layout.xaxis.title.font = { + color: 'rgba(255,255,255,1)', + family: '', + size: 14, + }; + figure.layout.yaxis.title.font = { + color: 'rgba(255,255,255,1)', + family: '', + size: 14, + }; figure.layout.xaxis.tickfont.color = 'rgba(255,255,255,1)'; figure.layout.yaxis.tickfont.color = 'rgba(255,255,255,1)'; figure.layout.xaxis.autorange = true; @@ -49,7 +54,7 @@ const drawXTrainScatter = (json, chartConfig = {}, sizeOfData = null) => { ...genPlotlyIconSettings(), responsive: true, // responsive histogram useResizeHandler: true, // responsive histogram - style: {width: '100%', height: '100%'}, // responsive histogram + style: { width: '100%', height: '100%' }, // responsive histogram }; const pcaXTrainPlot = document.getElementById('xTrain'); @@ -64,7 +69,7 @@ const drawXTrainScatter = (json, chartConfig = {}, sizeOfData = null) => { } }); - unHoverHandler(pcaXTrainPlot) + unHoverHandler(pcaXTrainPlot); // send plotting time const endTime = performance.now(); @@ -82,13 +87,18 @@ const drawXTrainScatter = (json, chartConfig = {}, sizeOfData = null) => { }); }; -const drawXTestScatter = (json, chartConfig = {}, sizeOfData = null, arrayPlotdata = null) => { +const drawXTestScatter = ( + json, + chartConfig = {}, + sizeOfData = null, + arrayPlotdata = null, +) => { if (!json) return; - + const startTime = performance.now(); - + const figure = json; - + // customize jsonDtTest figure.layout.plot_bgcolor = '#222222'; figure.layout.paper_bgcolor = '#222222'; @@ -127,7 +137,7 @@ const drawXTestScatter = (json, chartConfig = {}, sizeOfData = null, arrayPlotda ...genPlotlyIconSettings(), responsive: true, // responsive histogram useResizeHandler: true, // responsive histogram - style: {width: '100%', height: '100%'}, // responsive histogram + style: { width: '100%', height: '100%' }, // responsive histogram }; // assign custome data to plot-view handling on data-point @@ -139,29 +149,35 @@ const drawXTestScatter = (json, chartConfig = {}, sizeOfData = null, arrayPlotda }; } figure.data[0].customdata = scpCustomData; - + // plot xtest data const xTestElement = document.getElementById('xTest'); Plotly.newPlot('xTest', figure.data, figure.layout, plotConfig); // xtest click event - xTestElement.on('plotly_click', (dataPoint) => { - // to spread sampleNo to other charts - const {pointIndex} = dataPoint.points[0]; - dataPoint.points[0].sampleNo = pointIndex + 1; - dataPoint.points[0].clickedDataIndex = pointIndex; - - // to broadcast click event to other charts - broadcastClickEvent(dataPoint, startingChart = 'xTest', jsonPCAScoreTest = json); - }).on('plotly_hover', (data) => { - const dataPoint = data.points[0]; - if (dataPoint.data.mode === 'markers') { - showDataTablePCA(data, 'scatter', 'xTest'); - } else { - $('#dp-info-content').hide(); - } - }); + xTestElement + .on('plotly_click', (dataPoint) => { + // to spread sampleNo to other charts + const { pointIndex } = dataPoint.points[0]; + dataPoint.points[0].sampleNo = pointIndex + 1; + dataPoint.points[0].clickedDataIndex = pointIndex; + + // to broadcast click event to other charts + broadcastClickEvent( + dataPoint, + (startingChart = 'xTest'), + (jsonPCAScoreTest = json), + ); + }) + .on('plotly_hover', (data) => { + const dataPoint = data.points[0]; + if (dataPoint.data.mode === 'markers') { + showDataTablePCA(data, 'scatter', 'xTest'); + } else { + $('#dp-info-content').hide(); + } + }); unHoverHandler(xTestElement); showCustomContextMenu(xTestElement); @@ -204,7 +220,8 @@ const showDataTablePCA = (data, type = 'bar', chartID) => { genDataPointHoverTable( dataTable, { - x: data.event.pageX - 120, y: data.event.pageY, + x: data.event.pageX - 120, + y: data.event.pageY, }, 130, true, diff --git a/ap/static/analyze/js/hotelling_t2_contribution.js b/ap/static/analyze/js/hotelling_t2_contribution.js index 76f4e80..38db462 100644 --- a/ap/static/analyze/js/hotelling_t2_contribution.js +++ b/ap/static/analyze/js/hotelling_t2_contribution.js @@ -1,4 +1,3 @@ -/* eslint-disable no-undef */ const drawT2ContributionChart = (json, chartConfig = {}, sizeOfData = null) => { if (!json) return; @@ -10,7 +9,7 @@ const drawT2ContributionChart = (json, chartConfig = {}, sizeOfData = null) => { figure.layout.paper_bgcolor = '#222222'; figure.layout.xaxis.gridcolor = '#444444'; figure.layout.yaxis.gridcolor = '#444444'; - figure.layout.xaxis.tickangle = COMMON_CONSTANT.TICKS_ANGLE; + figure.layout.xaxis.tickangle = COMMON_CONSTANT.TICKS_ANGLE; figure.layout.autosize = true; figure.layout.legend = { bgcolor: '#222222', @@ -30,7 +29,6 @@ const drawT2ContributionChart = (json, chartConfig = {}, sizeOfData = null) => { style: { width: '100%', height: '100%' }, // responsive histogram }); - // send plotting time event const endTime = performance.now(); gtag('event', 'PCA_et', { @@ -47,19 +45,32 @@ const drawT2ContributionChart = (json, chartConfig = {}, sizeOfData = null) => { }); }; -const drawT2ContributionChartFromObj = (objData, sampleNo = null, chartConfig = {}, - sizeOfData = null, dpInfo=null, - shortName = null) => { +const drawT2ContributionChartFromObj = ( + objData, + sampleNo = null, + chartConfig = {}, + sizeOfData = null, + dpInfo = null, + shortName = null, +) => { if (!objData) return; const startTime = performance.now(); - Plotly.newPlot('t2ContributionChart', + Plotly.newPlot( + 't2ContributionChart', genContributionChartData(objData, 't2', dpInfo), - contributionChartLayout(objData, 't2', sampleNo, chartConfig, shortName), { + contributionChartLayout( + objData, + 't2', + sampleNo, + chartConfig, + shortName, + ), + { responsive: true, ...genPlotlyIconSettings(), - }); - + }, + ); // send plotting time event const endTime = performance.now(); diff --git a/ap/static/analyze/js/hotelling_timeseries.js b/ap/static/analyze/js/hotelling_timeseries.js index 106692f..cffd713 100644 --- a/ap/static/analyze/js/hotelling_timeseries.js +++ b/ap/static/analyze/js/hotelling_timeseries.js @@ -1,6 +1,3 @@ -/* eslint-disable no-unused-vars */ -/* eslint-disable no-undef */ - const drawShapes = (x = null, display = true) => { const plots = document.querySelectorAll('#timeSeriesT2, #timeSeriesQ'); const layoutUpdates = {}; @@ -29,7 +26,13 @@ const drawShapes = (x = null, display = true) => { }); }; -const drawTimeSeriesT2Chart = (json, jsonDtTest = {}, chartConfig = {}, sizeOfData = null, arrayPlotdata=null) => { +const drawTimeSeriesT2Chart = ( + json, + jsonDtTest = {}, + chartConfig = {}, + sizeOfData = null, + arrayPlotdata = null, +) => { if (!json) return; const startTime = performance.now(); @@ -70,7 +73,7 @@ const drawTimeSeriesT2Chart = (json, jsonDtTest = {}, chartConfig = {}, sizeOfDa scpCustomData = { proc_id_x: arrayPlotdata[0].end_proc_id, sensor_id_x: arrayPlotdata[0].end_col_id, - } + }; } figure.data[0].customdata = scpCustomData; @@ -93,17 +96,23 @@ const drawTimeSeriesT2Chart = (json, jsonDtTest = {}, chartConfig = {}, sizeOfDa } // to broadcast click event to other charts - broadcastClickEvent(dataPoint, startingChart = 'timeSeriesT2', jsonPCAScoreTest = jsonDtTest); + broadcastClickEvent( + dataPoint, + (startingChart = 'timeSeriesT2'), + (jsonPCAScoreTest = jsonDtTest), + ); }); // Add hover event for t2 & q plots - timeSeriesT2Element.on('plotly_hover', (data) => { - drawShapes(data.points[0].x); - }).on('plotly_unhover', (data) => { - drawShapes(null, false); - clearHoverTimeOut(); - }); - + timeSeriesT2Element + .on('plotly_hover', (data) => { + drawShapes(data.points[0].x); + }) + .on('plotly_unhover', (data) => { + drawShapes(null, false); + clearHoverTimeOut(); + }); + showCustomContextMenu(timeSeriesT2Element, true); // send plotting time const endTime = performance.now(); @@ -121,7 +130,13 @@ const drawTimeSeriesT2Chart = (json, jsonDtTest = {}, chartConfig = {}, sizeOfDa }); }; -const drawTimeSeriesQChart = (json, jsonDtTest = {}, chartConfig = {}, sizeOfData = null, arrayPlotdata = null) => { +const drawTimeSeriesQChart = ( + json, + jsonDtTest = {}, + chartConfig = {}, + sizeOfData = null, + arrayPlotdata = null, +) => { if (!json) return; const startTime = performance.now(); @@ -163,10 +178,10 @@ const drawTimeSeriesQChart = (json, jsonDtTest = {}, chartConfig = {}, sizeOfDat scpCustomData = { proc_id_x: arrayPlotdata[0].end_proc_id, sensor_id_x: arrayPlotdata[0].end_col_id, - } + }; } figure.data[0].customdata = scpCustomData; - + const timeSeriesQElement = document.getElementById('timeSeriesQ'); Plotly.newPlot('timeSeriesQ', figure.data, figure.layout, plotConfig); @@ -186,16 +201,22 @@ const drawTimeSeriesQChart = (json, jsonDtTest = {}, chartConfig = {}, sizeOfDat } // to broadcast click event to other charts - broadcastClickEvent(dataPoint, startingChart = 'timeSeriesQ', jsonPCAScoreTest = jsonDtTest); + broadcastClickEvent( + dataPoint, + (startingChart = 'timeSeriesQ'), + (jsonPCAScoreTest = jsonDtTest), + ); }); // Add hover event for t2 & q plots - timeSeriesQElement.on('plotly_hover', (data) => { - drawShapes(data.points[0].x); - }).on('plotly_unhover', (data) => { - drawShapes(null, false); - clearHoverTimeOut(); - }); - + timeSeriesQElement + .on('plotly_hover', (data) => { + drawShapes(data.points[0].x); + }) + .on('plotly_unhover', (data) => { + drawShapes(null, false); + clearHoverTimeOut(); + }); + showCustomContextMenu(timeSeriesQElement, true); // send plotting time const endTime = performance.now(); @@ -235,8 +256,9 @@ const genTimeSeriesData = (data, type = 'test', label = 'T2_statics') => { frame: null, }; retData.text = data.map((v, k) => { - const n = (type === 'test') ? (k + 1) : (k + 1 - data.length); - retData.line.color = (type === 'test') ? 'rgba(255,165,0,1)' : 'rgba(255,255,255,1)'; + const n = type === 'test' ? k + 1 : k + 1 - data.length; + retData.line.color = + type === 'test' ? 'rgba(255,165,0,1)' : 'rgba(255,255,255,1)'; retData.x.push(n); retData.y.push(v); return `sample_no: ${n}
${label}: ${v}`; @@ -244,7 +266,13 @@ const genTimeSeriesData = (data, type = 'test', label = 'T2_statics') => { return retData; }; -const drawTimeSeriesT2ChartFromObj = (objData, jsonDtTest = {}, chartConfig = {}, sizeOfData = null, arrayPlotdata=null) => { +const drawTimeSeriesT2ChartFromObj = ( + objData, + jsonDtTest = {}, + chartConfig = {}, + sizeOfData = null, + arrayPlotdata = null, +) => { if (!objData) return; // const chartConfig.width = $('#xTest').width(); @@ -268,10 +296,7 @@ const drawTimeSeriesT2ChartFromObj = (objData, jsonDtTest = {}, chartConfig = {} size: 13.2835201328352, }, xaxis: { - domain: [ - 0, - 1, - ], + domain: [0, 1], automargin: true, type: 'linear', autorange: true, @@ -305,10 +330,7 @@ const drawTimeSeriesT2ChartFromObj = (objData, jsonDtTest = {}, chartConfig = {} hoverformat: '.2f', }, yaxis: { - domain: [ - 0, - 1, - ], + domain: [0, 1], automargin: true, type: 'linear', autorange: true, @@ -384,24 +406,29 @@ const drawTimeSeriesT2ChartFromObj = (objData, jsonDtTest = {}, chartConfig = {} useResizeHandler: true, // responsive histogram style: { width: '100%', height: '100%' }, // responsive histogram }; - + // assign custome data to plot-view handling on data-point // apply for first/ full data points only if (arrayPlotdata) { scpCustomData = { proc_id_x: arrayPlotdata[0].end_proc_id, sensor_id_x: arrayPlotdata[0].end_col_id, - } + }; } t2TimeSeriesData[1].customdata = scpCustomData; - t2TimeSeriesData.forEach(dat => { + t2TimeSeriesData.forEach((dat) => { dat.hoverinfo = 'none'; }); - + const timeSeriesT2Element = document.getElementById('timeSeriesT2'); - - Plotly.newPlot(timeSeriesT2Element, t2TimeSeriesData, t2TimeSeriesLayout, plotConfig); - + + Plotly.newPlot( + timeSeriesT2Element, + t2TimeSeriesData, + t2TimeSeriesLayout, + plotConfig, + ); + // xtest click event timeSeriesT2Element.on('plotly_click', (dataPoint) => { // to spread sampleNo and clickedDataIndexto other charts @@ -417,20 +444,26 @@ const drawTimeSeriesT2ChartFromObj = (objData, jsonDtTest = {}, chartConfig = {} } // to broadcast click event to other charts - broadcastClickEvent(dataPoint, startingChart = 'timeSeriesT2', jsonPCAScoreTest = jsonDtTest); + broadcastClickEvent( + dataPoint, + (startingChart = 'timeSeriesT2'), + (jsonPCAScoreTest = jsonDtTest), + ); }); // Add hover event for t2 & q plots - timeSeriesT2Element.on('plotly_hover', (data) => { - drawShapes(data.points[0].x); - showDataTablePCA(data, 'timeseries', 'timeSeriesT2'); - }).on('plotly_unhover', (data) => { - drawShapes(null, false); - clearHoverTimeOut(); - }); - + timeSeriesT2Element + .on('plotly_hover', (data) => { + drawShapes(data.points[0].x); + showDataTablePCA(data, 'timeseries', 'timeSeriesT2'); + }) + .on('plotly_unhover', (data) => { + drawShapes(null, false); + clearHoverTimeOut(); + }); + showCustomContextMenu(timeSeriesT2Element, true); - + // send plotting time const endTime = performance.now(); gtag('event', 'PCA_et', { @@ -447,13 +480,27 @@ const drawTimeSeriesT2ChartFromObj = (objData, jsonDtTest = {}, chartConfig = {} }); }; -const drawTimeSeriesQChartFromObj = (objData, jsonDtTest = {}, chartConfig = {}, sizeOfData = null, arrayPlotdata = null) => { +const drawTimeSeriesQChartFromObj = ( + objData, + jsonDtTest = {}, + chartConfig = {}, + sizeOfData = null, + arrayPlotdata = null, +) => { if (!objData) return; const startTime = performance.now(); - const qTrainTimeSeries = genTimeSeriesData(objData.SPE, 'train', 'Q_statics'); - const qTestTimeSeries = genTimeSeriesData(objData.test, 'test', 'Q_statics'); + const qTrainTimeSeries = genTimeSeriesData( + objData.SPE, + 'train', + 'Q_statics', + ); + const qTestTimeSeries = genTimeSeriesData( + objData.test, + 'test', + 'Q_statics', + ); const qTimeSeriesData = [qTrainTimeSeries, qTestTimeSeries]; const qTimeSeriesLayout = { margin: { @@ -470,10 +517,7 @@ const drawTimeSeriesQChartFromObj = (objData, jsonDtTest = {}, chartConfig = {}, size: 13.2835201328352, }, xaxis: { - domain: [ - 0, - 1, - ], + domain: [0, 1], automargin: true, type: 'linear', autorange: true, @@ -507,10 +551,7 @@ const drawTimeSeriesQChartFromObj = (objData, jsonDtTest = {}, chartConfig = {}, hoverformat: '.2f', }, yaxis: { - domain: [ - 0, - 1, - ], + domain: [0, 1], automargin: true, type: 'linear', autorange: true, @@ -586,24 +627,29 @@ const drawTimeSeriesQChartFromObj = (objData, jsonDtTest = {}, chartConfig = {}, useResizeHandler: true, // responsive histogram style: { width: '100%', height: '100%' }, // responsive histogram }; - + // assign custome data to plot-view handling on data-point // apply for first/ full data points only if (arrayPlotdata) { scpCustomData = { proc_id_x: arrayPlotdata[0].end_proc_id, sensor_id_x: arrayPlotdata[0].end_col_id, - } + }; } // 1 is for Target data qTimeSeriesData[1].customdata = scpCustomData; - qTimeSeriesData.forEach(dat => { + qTimeSeriesData.forEach((dat) => { dat.hoverinfo = 'none'; }); const timeSeriesQElement = document.getElementById('timeSeriesQ'); - - Plotly.newPlot(timeSeriesQElement, qTimeSeriesData, qTimeSeriesLayout, plotConfig); - + + Plotly.newPlot( + timeSeriesQElement, + qTimeSeriesData, + qTimeSeriesLayout, + plotConfig, + ); + // xtest click event timeSeriesQElement.on('plotly_click', (dataPoint) => { // to spread sampleNo and clickedDataIndexto other charts @@ -619,20 +665,26 @@ const drawTimeSeriesQChartFromObj = (objData, jsonDtTest = {}, chartConfig = {}, } // to broadcast click event to other charts - broadcastClickEvent(dataPoint, startingChart = 'timeSeriesQ', jsonPCAScoreTest = jsonDtTest); + broadcastClickEvent( + dataPoint, + (startingChart = 'timeSeriesQ'), + (jsonPCAScoreTest = jsonDtTest), + ); }); // Add hover event for t2 & q plots - timeSeriesQElement.on('plotly_hover', (data) => { - drawShapes(data.points[0].x); - showDataTablePCA(data, 'timeseries', 'timeSeriesQ'); - }).on('plotly_unhover', (data) => { - drawShapes(null, false); - clearHoverTimeOut(); - }); - + timeSeriesQElement + .on('plotly_hover', (data) => { + drawShapes(data.points[0].x); + showDataTablePCA(data, 'timeseries', 'timeSeriesQ'); + }) + .on('plotly_unhover', (data) => { + drawShapes(null, false); + clearHoverTimeOut(); + }); + showCustomContextMenu(timeSeriesQElement, true); - + // send plotting time const endTime = performance.now(); gtag('event', 'PCA_et', { diff --git a/ap/static/analyze/js/pca.js b/ap/static/analyze/js/pca.js index 88548ef..a702bce 100644 --- a/ap/static/analyze/js/pca.js +++ b/ap/static/analyze/js/pca.js @@ -1,8 +1,3 @@ -/* eslint-disable no-restricted-syntax */ -/* eslint-disable no-use-before-define */ -/* eslint-disable no-unused-vars */ -/* eslint-disable no-undef */ -/* eslint-disable no-param-reassign */ const REQUEST_TIMEOUT = setRequestTimeOut(); const i18n = { allSelection: $('#i18nAllSelection').text(), @@ -25,7 +20,7 @@ const i18n = { const MAX_NUMBER_OF_SENSOR = 60; const MIN_NUMBER_OF_SENSOR = 0; -const INDEX_AXIS_LABEL = "Index" +const INDEX_AXIS_LABEL = 'Index'; const MSG_MAPPING = { E_ALL_NA: $('#i18nE01AllNA').text(), @@ -50,30 +45,59 @@ const drawPCAPlotJSON = (res, clickOnChart) => { // draw graphs if (!clickOnChart) { if (jsonPCAScoreTrain) { - drawXTrainScatter(jsonPCAScoreTrain, chartConfig, sizeOfData = res.dtsize_pca_score_train); + drawXTrainScatter( + jsonPCAScoreTrain, + chartConfig, + (sizeOfData = res.dtsize_pca_score_train), + ); } if (jsonPCAScoreTest) { - drawXTestScatter(jsonPCAScoreTest, chartConfig, sizeOfData = res.dtsize_pca_score_test, res.array_plotdata); + drawXTestScatter( + jsonPCAScoreTest, + chartConfig, + (sizeOfData = res.dtsize_pca_score_test), + res.array_plotdata, + ); if (jsonT2TimeSeries) { - drawTimeSeriesT2Chart(jsonT2TimeSeries, jsonPCAScoreTest, chartConfig, - sizeOfData = res.dtsize_t2_time_series, res.array_plotdata); + drawTimeSeriesT2Chart( + jsonT2TimeSeries, + jsonPCAScoreTest, + chartConfig, + (sizeOfData = res.dtsize_t2_time_series), + res.array_plotdata, + ); } if (jsonQTimeSeries) { - drawTimeSeriesQChart(jsonQTimeSeries, jsonPCAScoreTest, chartConfig, - sizeOfData = res.dtsize_q_time_series, res.array_plotdata); + drawTimeSeriesQChart( + jsonQTimeSeries, + jsonPCAScoreTest, + chartConfig, + (sizeOfData = res.dtsize_q_time_series), + res.array_plotdata, + ); } } } if (jsonQContribution) { - drawQContributionChart(jsonQContribution, chartConfig, sizeOfData = res.dtsize_q_contribution); + drawQContributionChart( + jsonQContribution, + chartConfig, + (sizeOfData = res.dtsize_q_contribution), + ); } if (jsonT2Contribution) { - drawT2ContributionChart(jsonT2Contribution, chartConfig, - sizeOfData = res.dtsize_t2_contribution); + drawT2ContributionChart( + jsonT2Contribution, + chartConfig, + (sizeOfData = res.dtsize_t2_contribution), + ); } if (jsonPCABiplot) { - drawPCABiplotChart(jsonPCABiplot, chartConfig, - sizeOfData = res.dtsize_pca_biplot); + drawPCABiplotChart( + jsonPCABiplot, + chartConfig, + (sizeOfData = res.dtsize_pca_biplot), + ); } }; @@ -84,16 +108,38 @@ const drawPCAPlotList = (res, clickOnChart, sampleNo = null) => { const jsonPCAScoreTrain = generateXTrainScatter(res.json_pca_score_train); if (jsonPCAScoreTrain && !clickOnChart) { - drawXTrainScatter(jsonPCAScoreTrain, chartConfig, sizeOfData = res.dtsize_pca_score_train); + drawXTrainScatter( + jsonPCAScoreTrain, + chartConfig, + (sizeOfData = res.dtsize_pca_score_train), + ); } - const jsonPCAScoreTest = generateXTestScatter(res.json_pca_score_test, res.json_pca_score_train); + const jsonPCAScoreTest = generateXTestScatter( + res.json_pca_score_test, + res.json_pca_score_train, + ); if (jsonPCAScoreTest && !clickOnChart) { - drawXTestScatter(jsonPCAScoreTest, chartConfig, sizeOfData = res.dtsize_pca_score_test, res.array_plotdata); + drawXTestScatter( + jsonPCAScoreTest, + chartConfig, + (sizeOfData = res.dtsize_pca_score_test), + res.array_plotdata, + ); } - const jsonPCABiplot = generateBiplot(res.json_pca_biplot, res.json_pca_score_train, sampleNo); - if (jsonPCABiplot) { drawPCABiplotChart(jsonPCABiplot, chartConfig, sizeOfData = res.dtsize_pca_biplot); } + const jsonPCABiplot = generateBiplot( + res.json_pca_biplot, + res.json_pca_score_train, + sampleNo, + ); + if (jsonPCABiplot) { + drawPCABiplotChart( + jsonPCABiplot, + chartConfig, + (sizeOfData = res.dtsize_pca_biplot), + ); + } const jsonT2TimeSeries = res.json_t2_time_series; const jsonQTimeSeries = res.json_q_time_series; @@ -101,31 +147,53 @@ const drawPCAPlotList = (res, clickOnChart, sampleNo = null) => { const jsonT2Contribution = res.json_t2_contribution; if (jsonT2TimeSeries && !clickOnChart) { - drawTimeSeriesT2ChartFromObj(jsonT2TimeSeries, jsonPCAScoreTest, chartConfig, - sizeOfData = res.dtsize_t2_time_series, res.array_plotdata); + drawTimeSeriesT2ChartFromObj( + jsonT2TimeSeries, + jsonPCAScoreTest, + chartConfig, + (sizeOfData = res.dtsize_t2_time_series), + res.array_plotdata, + ); } if (jsonQTimeSeries && !clickOnChart) { - drawTimeSeriesQChartFromObj(jsonQTimeSeries, jsonPCAScoreTest, chartConfig, - sizeOfData = res.dtsize_q_time_series, res.array_plotdata); + drawTimeSeriesQChartFromObj( + jsonQTimeSeries, + jsonPCAScoreTest, + chartConfig, + (sizeOfData = res.dtsize_q_time_series), + res.array_plotdata, + ); } if (jsonQContribution) { - drawQContributionChartFromObj(jsonQContribution, sampleNo, chartConfig, - sizeOfData = res.dtsize_q_contribution, dpInfo = res.data_point_info, - shortName = res.short_names); + drawQContributionChartFromObj( + jsonQContribution, + sampleNo, + chartConfig, + (sizeOfData = res.dtsize_q_contribution), + (dpInfo = res.data_point_info), + (shortName = res.short_names), + ); } if (jsonT2Contribution) { - drawT2ContributionChartFromObj(jsonT2Contribution, sampleNo, chartConfig, - sizeOfData = res.dtsize_t2_contribution, dpInfo = res.data_point_info, - shortName = res.short_names); + drawT2ContributionChartFromObj( + jsonT2Contribution, + sampleNo, + chartConfig, + (sizeOfData = res.dtsize_t2_contribution), + (dpInfo = res.data_point_info), + (shortName = res.short_names), + ); } }; -const reselectPCAData = (fromShowGraphBtn=false, reselectBtn=true) => { +const reselectPCAData = (fromShowGraphBtn = false, reselectBtn = true) => { const formData = collectInputAsFormData(); // warning about integer column has_integer_col if (formData.get('has_integer_col') === 'true') { - $(eles.msgContent).text(`${MSG_MAPPING.W_PCA_INTEGER}\n${i18n.confirmQuestion}`); + $(eles.msgContent).text( + `${MSG_MAPPING.W_PCA_INTEGER}\n${i18n.confirmQuestion}`, + ); $(eles.msgModal).modal('show'); } else { beforeShowGraphCommon(); @@ -133,8 +201,13 @@ const reselectPCAData = (fromShowGraphBtn=false, reselectBtn=true) => { } }; -const getPCAPlotsFromBackend = (formData, clickOnChart = false, sampleNo = null, autoUpdate = false, reselect=false) => { - +const getPCAPlotsFromBackend = ( + formData, + clickOnChart = false, + sampleNo = null, + autoUpdate = false, + reselect = false, +) => { const eleQCont = $(eles.qContributionChart); const eleT2Cont = $(eles.t2ContributionChart); const eleBiplot = $(eles.pcaBiplotChart); @@ -153,83 +226,102 @@ const getPCAPlotsFromBackend = (formData, clickOnChart = false, sampleNo = null, lastUsedFormData = formData; - showGraphCallApi('/ap/api/analyze/pca', formData, REQUEST_TIMEOUT, async (res) => { - if (clickOnChart) { - hideLoading(eleQCont); - hideLoading(eleT2Cont); - hideLoading(eleBiplot); - hideLoading(eleRecordInfoTbl); - } else { - $('#plot-cards').show(); - } - // save global - graphStore.setTraceData(_.cloneDeep(res)); - // share global var to base.js - formDataQueried = lastUsedFormData; - const json = false; - if (json) { - drawPCAPlotJSON(res, clickOnChart); - } else { - drawPCAPlotList(res, clickOnChart, sampleNo); - } - - showInfoTable(res[CONST.COMMON]); - - fillDataToFilterModal(res.filter_on_demand, () => { - handleFilterOndemand(); - }); - - // show delete number of NAN records - // const numSensors = countSelectedSensors(formData) || 1; - // if (res.removed_outlier_nan_train) { - // showToastrDeleteNA( - // i18n.trainingData, - // numSensors * res.actual_record_number_train, - // res.removed_outlier_nan_train, - // ); - // } - // if (res.removed_outlier_nan_test) { - // showToastrDeleteNA(i18n.testingData, - // numSensors * res.actual_record_number_test, - // res.removed_outlier_nan_test); - // } - if (!sampleNo) { - showAllDeleteNAToastrMsgs(res, formData); - } + showGraphCallApi( + '/ap/api/analyze/pca', + formData, + REQUEST_TIMEOUT, + async (res) => { + if (clickOnChart) { + hideLoading(eleQCont); + hideLoading(eleT2Cont); + hideLoading(eleBiplot); + hideLoading(eleRecordInfoTbl); + } else { + $('#plot-card-container').show(); + } + // save global + graphStore.setTraceData(_.cloneDeep(res)); + // share global var to base.js + formDataQueried = lastUsedFormData; + const json = false; + if (json) { + drawPCAPlotJSON(res, clickOnChart); + } else { + drawPCAPlotList(res, clickOnChart, sampleNo); + } - if (res.is_send_ga_off) { - showGAToastr(true); - } + showInfoTable(res[CONST.COMMON]); + + fillDataToFilterModal(res.filter_on_demand, () => { + handleFilterOndemand(); + }); + + // show delete number of NAN records + // const numSensors = countSelectedSensors(formData) || 1; + // if (res.removed_outlier_nan_train) { + // showToastrDeleteNA( + // i18n.trainingData, + // numSensors * res.actual_record_number_train, + // res.removed_outlier_nan_train, + // ); + // } + // if (res.removed_outlier_nan_test) { + // showToastrDeleteNA(i18n.testingData, + // numSensors * res.actual_record_number_test, + // res.removed_outlier_nan_test); + // } + if (!sampleNo) { + showAllDeleteNAToastrMsgs(res, formData); + } - if (res.actual_record_number_train > SQL_LIMIT || res.actual_record_number_test > SQL_LIMIT) { - showToastrMsg(i18n.SQLLimit); - } + if (res.is_send_ga_off) { + showGAToastr(true); + } - // show toastr to inform result was truncated upto 5000 - if (res.is_res_limited_train || res.is_res_limited_test) { - showToastrMsg(i18n.traceResulLimited.split('BREAK_LINE').join('
')); - } + if ( + res.actual_record_number_train > SQL_LIMIT || + res.actual_record_number_test > SQL_LIMIT + ) { + showToastrMsg(i18n.SQLLimit); + } - // update record table info - const jsonDataPointInfo = res.data_point_info; - if (jsonDataPointInfo) { - updateRecordInfo(dataInfos = jsonDataPointInfo, sampleNo = formData.get('sample_no')); - } + // show toastr to inform result was truncated upto 5000 + if (res.is_res_limited_train || res.is_res_limited_test) { + showToastrMsg( + i18n.traceResulLimited.split('BREAK_LINE').join('
'), + ); + } - // if (checkResultExist(res)) { - // saveInvalidFilterCaller(true); - // } else { - // saveInvalidFilterCaller(); - // } + // update record table info + const jsonDataPointInfo = res.data_point_info; + if (jsonDataPointInfo) { + updateRecordInfo( + (dataInfos = jsonDataPointInfo), + (sampleNo = formData.get('sample_no')), + ); + } - if (!autoUpdate) { - $('html, body').animate({ - scrollTop: $('#plot-cards').offset().top, - }, 1000); - } + // if (checkResultExist(res)) { + // saveInvalidFilterCaller(true); + // } else { + // saveInvalidFilterCaller(); + // } + + if (!autoUpdate) { + $('html, body').animate( + { + scrollTop: getOffsetTopDisplayGraph( + '#plot-card-container', + ), + }, + 1000, + ); + } - setPollingData(formData, longPollingHandler, []); - }, { page: 'pca', clickOnChart, reselect }); + setPollingData(formData, longPollingHandler, []); + }, + { page: 'pca', clickOnChart, reselect }, + ); }; const longPollingHandler = () => { @@ -250,7 +342,9 @@ const isIntegerDatatype = (type) => { // convert to lower case before compare const lowerType = type.toLowerCase(); for (let i = 0; i < NUMERIC_TYPE.length; i++) { - if (lowerType.includes(NUMERIC_TYPE[i])) { return true; } + if (lowerType.includes(NUMERIC_TYPE[i])) { + return true; + } } return false; }; @@ -314,7 +408,7 @@ const collectInputAsFormData = () => { formData.set('has_integer_col', isIntegerColChecked); formData.set('checked_val_count', valCount); - + // delete empty conditional procs [...formData.keys()].forEach((key) => { if (key.startsWith('cond_proc') && isEmpty(formData.get(key))) { @@ -331,12 +425,13 @@ const getPCAPlots = () => { updateStyleOfInvalidElements(); if (isValid) { - const formData = collectInputAsFormData(); // warning about integer column has_integer_col if (formData.get('has_integer_col') === 'true') { - $(eles.msgContent).text(`${MSG_MAPPING.W_PCA_INTEGER}\n${i18n.confirmQuestion}`); + $(eles.msgContent).text( + `${MSG_MAPPING.W_PCA_INTEGER}\n${i18n.confirmQuestion}`, + ); $(eles.msgModal).modal('show'); } else { beforeShowGraphCommon(); @@ -353,7 +448,6 @@ const confirmWarningAndGetPCA = () => { getPCAPlotsFromBackend(formData); }; - const bindCheckEvents = () => { // check all event $(eles.selectAll).change(() => { @@ -401,7 +495,11 @@ const loadUserInputAgain = (parent) => { setTimeout(() => { inputForms.each((i, form) => { try { - const userInput = saveLoadUserInput(`#${form.id}`, window.location.pathname, parent); + const userInput = saveLoadUserInput( + `#${form.id}`, + window.location.pathname, + parent, + ); userInput(); } catch (e) { console.log(e); @@ -416,7 +514,9 @@ const addClickEventAllRows = () => { const that = $(element); that.click((e) => { const currentRow = $(e.currentTarget); - const currentCheckbox = $(currentRow.find('input[type="checkbox"]')); + const currentCheckbox = $( + currentRow.find('input[type="checkbox"]'), + ); currentCheckbox.prop('checked', !currentCheckbox.is(':checked')); }); }); @@ -452,8 +552,8 @@ const loadSensors = () => { headers: myHeaders, }; fetch('/ap/api/analyze/sensor', requestOptions) - .then(response => response.text()) - .catch(error => console.log('error', error)); + .then((response) => response.text()) + .catch((error) => console.log('error', error)); setTimeout(() => { $(eles.spinner).removeClass('spinner-grow'); }, 20000); @@ -471,7 +571,6 @@ $(() => { showFilter: true, showStrColumn: true, hideStrVariable: true, - hideCTCol: true, disableSerialAsObjective: true, }); endProcItem(); @@ -484,7 +583,13 @@ $(() => { // add first condition process const condProcs = genProcessDropdownData(procConfigs); - const condProcItem = addCondProc(condProcs.ids, condProcs.names, '', eles.formID, 'btn-add-cond-proc'); + const condProcItem = addCondProc( + condProcs.ids, + condProcs.names, + '', + eles.formID, + 'btn-add-cond-proc', + ); condProcItem(); // click even of condition proc add button @@ -510,18 +615,24 @@ $(() => { }); const extractAndConvertDT = (datetimeStr) => { - const splitDT = splitDateTimeRange(datetimeStr); + const splitDT = splitDateTimeRange(datetimeStr); // to uct const start = toUTCDateTime(splitDT.startDate, splitDT.startTime); const end = toUTCDateTime(splitDT.endDate, splitDT.endTime); - return { start, end } + return { start, end }; }; const dumpData = (type) => { const formData = collectInputAsFormData(); - [CONST.STARTDATE, CONST.STARTTIME, CONST.ENDDATE, CONST.ENDTIME].map(el => formData.delete(el)); - const trainDateTime = $('#for-default-train').find('[name=DATETIME_RANGE_PICKER]').val(); - const testDateTime = $('#for-default-test').find('[name=DATETIME_RANGE_PICKER]').val(); + [CONST.STARTDATE, CONST.STARTTIME, CONST.ENDDATE, CONST.ENDTIME].map((el) => + formData.delete(el), + ); + const trainDateTime = $('#for-default-train') + .find('[name=DATETIME_RANGE_PICKER]') + .val(); + const testDateTime = $('#for-default-test') + .find('[name=DATETIME_RANGE_PICKER]') + .val(); const trainDT = extractAndConvertDT(trainDateTime); const testDT = extractAndConvertDT(testDateTime); formData.set(CONST.STARTDATE, trainDT.start.date); diff --git a/ap/static/analyze/js/pca_toastr.js b/ap/static/analyze/js/pca_toastr.js index 3481e06..205e401 100644 --- a/ap/static/analyze/js/pca_toastr.js +++ b/ap/static/analyze/js/pca_toastr.js @@ -1,4 +1,3 @@ - const showToastr = (errors) => { if (!errors) { return; @@ -11,13 +10,21 @@ const showToastr = (errors) => { } else if (errors instanceof Object) { const trainDataErr = { is_err: errors.train_data.error, - is_all_na: errors.train_data.errors && errors.train_data.errors.includes('E_ALL_NA'), - is_zero_var: errors.train_data.errors && errors.train_data.errors.includes('E_ZERO_VARIANCE'), + is_all_na: + errors.train_data.errors && + errors.train_data.errors.includes('E_ALL_NA'), + is_zero_var: + errors.train_data.errors && + errors.train_data.errors.includes('E_ZERO_VARIANCE'), }; const targetDataErr = { is_err: errors.target_data.error, - is_all_na: errors.target_data.errors && errors.target_data.errors.includes('E_ALL_NA'), - is_zero_var: errors.target_data.errors && errors.target_data.errors.includes('E_ZERO_VARIANCE'), + is_all_na: + errors.target_data.errors && + errors.target_data.errors.includes('E_ALL_NA'), + is_zero_var: + errors.target_data.errors && + errors.target_data.errors.includes('E_ZERO_VARIANCE'), }; let msgContent = ''; if (trainDataErr.is_all_na || targetDataErr.is_all_na) { @@ -60,8 +67,10 @@ const showAllDeleteNAToastrMsgs = (res, formData) => { ); } if (res.removed_outlier_nan_test) { - showToastrDeleteNA(i18n.testingData, + showToastrDeleteNA( + i18n.testingData, numSensors * res.actual_record_number_test, - res.removed_outlier_nan_test); + res.removed_outlier_nan_test, + ); } }; diff --git a/ap/static/calendar_heatmap/css/calendar_heatmap.css b/ap/static/calendar_heatmap/css/calendar_heatmap.css index 2b70a99..74d6613 100644 --- a/ap/static/calendar_heatmap/css/calendar_heatmap.css +++ b/ap/static/calendar_heatmap/css/calendar_heatmap.css @@ -45,7 +45,7 @@ canvas { /* Clear floats after the columns */ .chart-row:after { - content: ""; + content: ''; display: table; clear: both; } @@ -95,7 +95,7 @@ canvas { .chm-col { height: 32vh; padding: 2px !important; - border-radius:3px; + border-radius: 3px; width: 100%; } @@ -109,7 +109,8 @@ canvas { border-radius: 3px; } -.chm-plot .plot-container.plotly, .chm-plot .plot-container.plotly .modebar-container { +.chm-plot .plot-container.plotly, +.chm-plot .plot-container.plotly .modebar-container { height: 100%; width: 100%; } @@ -159,4 +160,4 @@ canvas { .chm-card-title span { white-space: pre; line-height: 1; -} \ No newline at end of file +} diff --git a/ap/static/calendar_heatmap/js/calendar_heatmap.js b/ap/static/calendar_heatmap/js/calendar_heatmap.js index 88eef1f..b85c1ae 100644 --- a/ap/static/calendar_heatmap/js/calendar_heatmap.js +++ b/ap/static/calendar_heatmap/js/calendar_heatmap.js @@ -1,8 +1,3 @@ -/* eslint-disable no-restricted-syntax,prefer-arrow-callback */ -/* eslint-disable guard-for-in */ -/* eslint-disable no-unused-vars */ -/* eslint-disable no-undef */ -/* eslint-disable no-use-before-define */ const REQUEST_TIMEOUT = setRequestTimeOut(); const MAX_NUMBER_OF_GRAPH = 18; const MAX_NUMBER_OF_SENSOR = 18; @@ -71,7 +66,6 @@ const i18n = { canChangeScale: $('#i18nCanChangeScale').text(), }; - const formElements = { formID: '#traceDataForm', scatterBtn: '#showGraphBtn', @@ -103,9 +97,18 @@ const formElements = { }; // maximum number of processes is 10. -const procColorPalettes = ['#6495ab', '#9d9a53', '#ae6e54', '#603567', - '#00af91', '#d7cece', '#470f0f', '#0f1451', - '#a4b790', '#000000']; +const procColorPalettes = [ + '#6495ab', + '#9d9a53', + '#ae6e54', + '#603567', + '#00af91', + '#d7cece', + '#470f0f', + '#0f1451', + '#a4b790', + '#000000', +]; const showLimitResultToastr = () => { const msgContent = `

${i18n.limitedHeatMap.replace('BREAK_LINE', '
')}

`; @@ -149,9 +152,14 @@ $(() => { }); endProcItem(endProcOnChange, checkAndHideStratifiedVar); - // add first condition process - const condProcItem = addCondProc(endProcs.ids, endProcs.names, '', formElements.formID, 'btn-add-cond-proc'); + const condProcItem = addCondProc( + endProcs.ids, + endProcs.names, + '', + formElements.formID, + 'btn-add-cond-proc', + ); condProcItem(); // click even of condition proc add button @@ -168,16 +176,16 @@ $(() => { // set default states setDefaultHeatmapCycle(); - + // Load userBookmarkBar $('#userBookmarkBar').show(); - + // bind events for changing scales bindScaleEvent(); - + // validation initValidation(formElements.formID); - + initializeDateTimeRangePicker(); }); @@ -258,22 +266,28 @@ const updateSVBox = async () => { } const svOptionParentId = `${eles.condProcPartno}${idx}`; - if (svSelected !== '') { // TODO check + if (svSelected !== '') { + // TODO check addGroupListCheckboxWithSearch( parentID, svOptionParentId, '', - categoryValues, categoryNames, currentCheckedIds, - `${eles.categoryValueMulti}${idx}`, noFilter = true, + categoryValues, + categoryNames, + currentCheckedIds, + `${eles.categoryValueMulti}${idx}`, + (noFilter = true), ); } }; -const countNumSensorSelected = (id = eles.endProcRow) => $(`#${id}`).find('input[type="checkbox"][value!=All]:checked').length || 0; +const countNumSensorSelected = (id = eles.endProcRow) => + $(`#${id}`).find('input[type="checkbox"][value!=All]:checked').length || 0; const checkAndHideStratifiedVar = () => { const card = $('#end-proc-row'); - const moreThanOneProcSelected = card && card.parent().find('.card').length > 1; + const moreThanOneProcSelected = + card && card.parent().find('.card').length > 1; // const numCheckedSensors = countNumSensorSelected(); if (moreThanOneProcSelected) { formElements.stratifiedVar.css('display', 'none'); @@ -330,7 +344,6 @@ const afterShowCHM = (abnormal = false) => { loadingHide(); }; - const countNumberProc = (formData) => { let numProc = 0; for (const pair of formData.entries()) { @@ -371,29 +384,35 @@ const collectInputAsFormData = (clearOnFlyFilter, autoUpdate = false) => { return formData; }; -const queryDataAndShowHeatMap = (clearOnFlyFilter = true, autoUpdate = false) => { - +const queryDataAndShowHeatMap = ( + clearOnFlyFilter = true, + autoUpdate = false, +) => { let formData = collectInputAsFormData(clearOnFlyFilter, autoUpdate); - showGraphCallApi('/ap/api/chm/plot', formData, REQUEST_TIMEOUT, async (res) => { - afterShowCHM(); - + showGraphCallApi( + '/ap/api/chm/plot', + formData, + REQUEST_TIMEOUT, + async (res) => { + afterShowCHM(); - res = sortArrayFormVal(res); - currentData = res; - graphStore.setTraceData(_.cloneDeep(res)); + res = sortArrayFormVal(res); + currentData = res; + graphStore.setTraceData(_.cloneDeep(res)); - const scale = formElements.heatmapScale.val(); + const scale = formElements.heatmapScale.val(); - drawHeatMap(res, scale, autoUpdate); + drawHeatMap(res, scale, autoUpdate); - // show info table - showInfoTable(res); + // show info table + showInfoTable(res); - checkAndShowToastr(res, clearOnFlyFilter); + checkAndShowToastr(res, clearOnFlyFilter); - setPollingData(formData, queryDataAndShowHeatMap, [false, true]); - }); + setPollingData(formData, queryDataAndShowHeatMap, [false, true]); + }, + ); }; const sortArrayFormVal = (res) => { @@ -404,16 +423,24 @@ const sortArrayFormVal = (res) => { res.array_plotdata = []; res.procs = Object.keys(arrayPlotData); for (const procId of Object.keys(arrayPlotData)) { - const plotList = arrayPlotData[procId].map(plot => { + const plotList = arrayPlotData[procId].map((plot) => { plot.proc_id = procId; return plot; - }) + }); res.array_plotdata.push(...plotList); } // sort graphs if (latestSortColIds && latestSortColIds.length) { - res.ARRAY_FORMVAL = sortGraphs(res.ARRAY_FORMVAL, 'GET02_VALS_SELECT', latestSortColIds); - res.array_plotdata = sortGraphs(res.array_plotdata, 'end_col', latestSortColIds); + res.ARRAY_FORMVAL = sortGraphs( + res.ARRAY_FORMVAL, + 'GET02_VALS_SELECT', + latestSortColIds, + ); + res.array_plotdata = sortGraphs( + res.array_plotdata, + 'end_col', + latestSortColIds, + ); } // if has facet and facet > 1 and sensor > 1 break row @@ -421,10 +448,10 @@ const sortArrayFormVal = (res) => { let unitFacet = []; for (const plotdata of res.array_plotdata) { if (!sensors.includes(plotdata.end_col)) { - sensors.push(plotdata.end_col) + sensors.push(plotdata.end_col); } if (plotdata.cate_value && !unitFacet.includes(plotdata.cate_value)) { - unitFacet.push(plotdata.cate_value) + unitFacet.push(plotdata.cate_value); } } res.row = 1; // default 1 row @@ -434,8 +461,7 @@ const sortArrayFormVal = (res) => { } return res; -} - +}; const checkAndShowToastr = (data, clearOnFlyFilter) => { if (clearOnFlyFilter) { @@ -453,7 +479,6 @@ const checkAndShowToastr = (data, clearOnFlyFilter) => { return; } - for (const idx in arrayPlotData) { const plotData = arrayPlotData[idx]; const zMax = plotData.z_max; @@ -467,14 +492,25 @@ const checkAndShowToastr = (data, clearOnFlyFilter) => { // show limit graphs displayed message if (data.isGraphLimited) { - showToastrMsg(i18nCommon.limitDisplayedGraphs.replace('NUMBER', MAX_NUMBER_OF_GRAPH)); + showToastrMsg( + i18nCommon.limitDisplayedGraphs.replace( + 'NUMBER', + MAX_NUMBER_OF_GRAPH, + ), + ); } }; - const drawHeatMapFromPlotData = (canvasId, plotData) => { - const numericDataTypes = [DataTypes.REAL.name, DataTypes.INTEGER.name, DataTypes.DATETIME.name] - const colorSelectDOM = numericDataTypes.includes(plotData.data_type) ? eles.colorReal : eles.colorCat; + const numericDataTypes = [ + DataTypes.REAL.name, + DataTypes.INTEGER.name, + DataTypes.DATETIME.name, + ]; + const colorSelectDOM = + !plotData.is_serial_no && numericDataTypes.includes(plotData.data_type) + ? eles.colorReal + : eles.colorCat; const colorOption = colorSelectDOM.val(); const prop = { canvasId, @@ -495,7 +531,7 @@ const drawHeatMapFromPlotData = (canvasId, plotData) => { colorOption, dataType: plotData.data_type, zFmt: plotData.z_fmt || '', - colorScaleCommon: plotData.color_scale_common || false + colorScaleCommon: plotData.color_scale_common || false, }; createHeatMap(prop); @@ -514,7 +550,7 @@ const createRowHTML = (rowIdx, length) => { }; const createCardHTML = (rowCardId, graphId, title, facet, isCTCol) => { - const CTLabel = isCTCol ? ` (${DataTypes.DATETIME.short}) [sec]` : '' + const CTLabel = isCTCol ? ` (${DataTypes.DATETIME.short}) [sec]` : ''; $(`#${rowCardId}`).append(`
@@ -546,10 +582,10 @@ const getCommonScale = (data) => { for (const plotData of procPlotDatas) { const minZ = plotData.z_min; const maxZ = plotData.z_max; - if (isEmpty(minScale) || !isEmpty(minZ) && minZ < minScale) { + if (isEmpty(minScale) || (!isEmpty(minZ) && minZ < minScale)) { minScale = minZ; } - if (isEmpty(maxScale) || !isEmpty(maxZ) && maxScale < maxZ) { + if (isEmpty(maxScale) || (!isEmpty(maxZ) && maxScale < maxZ)) { maxScale = maxZ; } } @@ -599,7 +635,10 @@ const drawHeatMap = (orgData, scaleOption = 'auto', autoUpdate = false) => { if (!isEmpty(cateValue)) { facetTitle = cateValue; if (Array.isArray(cateValue)) { - facetTitle = cateValue.length > 1 ? `${cateValue[0]} | ${cateValue[1]}` : cateValue[0]; + facetTitle = + cateValue.length > 1 + ? `${cateValue[0]} | ${cateValue[1]}` + : cateValue[0]; } title = `${end_proc_name}-${sensorName}`; } @@ -614,18 +653,27 @@ const drawHeatMap = (orgData, scaleOption = 'auto', autoUpdate = false) => { for (let rowIdx = 0; rowIdx < orgData.row; rowIdx++) { const rowCardId = createRowHTML(rowIdx, arrayPlotData.length); for (const plotIdx in arrayPlotData) { - - const plotData = arrayPlotData[plotIdx] - if (orgData.row > 1 && orgData.sensors[rowIdx] !== plotData.end_col) { + const plotData = arrayPlotData[plotIdx]; + if ( + orgData.row > 1 && + orgData.sensors[rowIdx] !== plotData.end_col + ) { continue; } const procId = plotData.proc_id; - const [title, sensorName, cardValue, facet, isCTCol] = buildGraphTitle(plotData, procId); + const [title, sensorName, cardValue, facet, isCTCol] = + buildGraphTitle(plotData, procId); plotData.sensorName = sensorName; plotData.title = title; plotData.cardValue = cardValue; - createCardHTML(rowCardId, `${rowIdx}_${plotIdx}`, title, facet, isCTCol); + createCardHTML( + rowCardId, + `${rowIdx}_${plotIdx}`, + title, + facet, + isCTCol, + ); // draw heat map const plotContainerId = `chm_${rowIdx}_${plotIdx}`; @@ -637,9 +685,12 @@ const drawHeatMap = (orgData, scaleOption = 'auto', autoUpdate = false) => { } if (!autoUpdate) { - $('html, body').animate({ - scrollTop: formElements.plotCard.offset().top, - }, 500); + $('html, body').animate( + { + scrollTop: getOffsetTopDisplayGraph('#scaleOption'), + }, + 500, + ); } // init filter modal @@ -649,7 +700,6 @@ const drawHeatMap = (orgData, scaleOption = 'auto', autoUpdate = false) => { }); }; - const selectHeatmapMenu = (scaleOption) => { drawHeatMap(currentData, scaleOption); @@ -657,8 +707,7 @@ const selectHeatmapMenu = (scaleOption) => { hideContextMenu(); }; - -const endProcOnChange = (async (event) => { +const endProcOnChange = async (event) => { const curTarget = event.target; const idx = parseProcGUIIndex(curTarget.id); const selectedEndProc = curTarget.value; @@ -702,21 +751,24 @@ const endProcOnChange = (async (event) => { addGroupListCheckboxWithSearch( parentId, `${eles.endProcVal}${idx}`, - '', ids, vals, checkedIds, + '', + ids, + vals, + checkedIds, `GET02_VALS_SELECT${idx}`, false, names, ); } - + updateSelectedItems(false, $(formElements.endProcSelectedItem)); - + getStratifiedVars(selectedEndProc).then(() => { $(eles.sVColumns).unbind('change'); $(eles.sVColumns).on('change', updateSVBox); $(eles.sVColumns).trigger('change'); }); -}); +}; const dumpData = (exportType, dataSrc) => { const formData = lastUsedFormData || collectInputAsFormData(true); diff --git a/ap/static/calendar_heatmap/js/calendar_heatmap_plotly.js b/ap/static/calendar_heatmap/js/calendar_heatmap_plotly.js index 9d0cbd9..829eb93 100644 --- a/ap/static/calendar_heatmap/js/calendar_heatmap_plotly.js +++ b/ap/static/calendar_heatmap/js/calendar_heatmap_plotly.js @@ -1,4 +1,3 @@ -/* eslint-disable max-len */ const funcTitle = { 'Cycle Time [s]': 'CT [s]', 'Range (max-min)': 'Range
(max-min)', @@ -7,19 +6,26 @@ const funcTitle = { 'Count/Min': 'Count
(Min)', }; -const getHalfOfScale = (colorScale, firstHalf=false) => { +const getHalfOfScale = (colorScale, firstHalf = false) => { const centerIdx = colorScale.length / 2; - colorScale = colorScale.filter((color, idx) => firstHalf ? idx < centerIdx : idx >= centerIdx - 1); - return colorScale.map((color, idx) => [String(idx / (colorScale.length - 1)), color[1]]); + colorScale = colorScale.filter((color, idx) => + firstHalf ? idx < centerIdx : idx >= centerIdx - 1, + ); + return colorScale.map((color, idx) => [ + String(idx / (colorScale.length - 1)), + color[1], + ]); }; const genColorScale = (data, colorOption, commonRange = null) => { if (commonRange) { - data = [commonRange.zmin, commonRange.zmax] + data = [commonRange.zmin, commonRange.zmax]; } - const minVal = Math.min(...data.filter(i => i !== null)); - const maxVal = Math.max(...data.filter(i => i !== null)); - const maxAbsVal = Math.max(...data.filter(i => i !== null).map(i => Math.abs(i))); + const minVal = Math.min(...data.filter((i) => i !== null)); + const maxVal = Math.max(...data.filter((i) => i !== null)); + const maxAbsVal = Math.max( + ...data.filter((i) => i !== null).map((i) => Math.abs(i)), + ); let colorScale = colorPallets[colorOption].scale; // for blue and blue rev @@ -33,9 +39,9 @@ const genColorScale = (data, colorOption, commonRange = null) => { let zmin = -maxAbsVal; let zmax = maxAbsVal; - colorScale = colorPallets[colorOption].isRev ? - reverseScale(dnJETColorScale) : - dnJETColorScale; + colorScale = colorPallets[colorOption].isRev + ? reverseScale(dnJETColorScale) + : dnJETColorScale; if (minVal >= 0) { zmin = 0; zmax = maxAbsVal; @@ -53,7 +59,11 @@ const genColorScale = (data, colorOption, commonRange = null) => { }; }; const createHeatMap = (prop) => { - const colorScale = genColorScale(prop.z, prop.colorOption, prop.colorScaleCommon); + const colorScale = genColorScale( + prop.z, + prop.colorOption, + prop.colorScaleCommon, + ); const common = { family: 'Calibri Light', tickSize: 10, @@ -63,8 +73,11 @@ const createHeatMap = (prop) => { primaryColor: '#65c5f1', }; - const customFuncTitle = Object.keys(funcTitle).includes(prop.aggFunction) ? funcTitle[prop.aggFunction] : prop.aggFunction; - const isChangeSize = prop.zFmt.includes('e') || Math.round(prop.zmax) > 1000; + const customFuncTitle = Object.keys(funcTitle).includes(prop.aggFunction) + ? funcTitle[prop.aggFunction] + : prop.aggFunction; + const isChangeSize = + prop.zFmt.includes('e') || Math.round(prop.zmax) > 1000; const heatmapTrace = { // name: [], @@ -127,7 +140,7 @@ const createHeatMap = (prop) => { showline: true, tickmode: 'array', ticktext: prop.yTicktext, - tickvals: prop.yTickvals.map(y => y + 0.5), + tickvals: prop.yTickvals.map((y) => y + 0.5), tickfont: { size: common.tickSize + 1, family: common.family, @@ -165,9 +178,9 @@ const createHeatMap = (prop) => { ...heatmapIconSettings, responsive: true, // responsive histogram useResizeHandler: true, // responsive histogram - style: {width: '100%', height: '100%'}, // responsive histogram + style: { width: '100%', height: '100%' }, // responsive histogram }; - + Plotly.react(prop.canvasId, { data, layout, @@ -194,12 +207,13 @@ const createHeatMap = (prop) => { genDataPointHoverTable( dataTable, { - x: data.event.pageX - 120, y: data.event.pageY, + x: data.event.pageX - 120, + y: data.event.pageY, }, 0, true, prop.canvasId, - 1 + 1, ); } }); diff --git a/ap/static/categorical_plot/css/categorical_plot.css b/ap/static/categorical_plot/css/categorical_plot.css index e05137e..43ee731 100644 --- a/ap/static/categorical_plot/css/categorical_plot.css +++ b/ap/static/categorical_plot/css/categorical_plot.css @@ -19,14 +19,16 @@ canvas { min-width: 400px !important; } -@keyframes rotate{ - 0% {} +@keyframes rotate { + 0% { + } 100% { transform: rotate(-360deg); } } -@-webkit-keyframes rotate{ - 0% {} +@-webkit-keyframes rotate { + 0% { + } 100% { -webkit-transform: rotate(-360deg); } @@ -42,12 +44,12 @@ canvas { right: 0; bottom: 0; left: 0; - background: rgba(0, 0, 0, .5); + background: rgba(0, 0, 0, 0.5); z-index: 999; } .loading::before { - content: ""; + content: ''; display: block; position: fixed; left: 50%; @@ -61,7 +63,7 @@ canvas { } .loading::after { - content: ""; + content: ''; display: block; position: fixed; left: 50%; @@ -71,12 +73,11 @@ canvas { border-radius: 40px; margin-top: -10px; margin-left: -10px; - border: 4px solid #60ABB9; + border: 4px solid #60abb9; border-right: 4px solid white; animation: rotate 1s infinite linear; } - .cate-plot-cards { display: inline-block; width: 100%; @@ -85,7 +86,7 @@ canvas { .plotInfo { position: absolute; - background-color: rgba(27, 27, 27, .4); + background-color: rgba(27, 27, 27, 0.4); border: 1px solid #65c5f1; border-radius: 3px; display: none; @@ -171,22 +172,22 @@ canvas { } #compareType .nav-pills { - border-radius: 4px 4px 0 0 ; + border-radius: 4px 4px 0 0; } -#compareType .nav-item .active{ +#compareType .nav-item .active { background-color: #303030; } -#compareType{ +#compareType { border-bottom: 0px; } #compareType .nav-item { - border-top: .5px solid #444; - border-left: .5px solid #444; - border-right: .5px solid #444; - border-radius: 4px 4px 0 0 ; + border-top: 0.5px solid #444; + border-left: 0.5px solid #444; + border-right: 0.5px solid #444; + border-radius: 4px 4px 0 0; margin-left: 1px; width: 225px; text-align: center; @@ -202,11 +203,12 @@ canvas { border-top: 0px; } -.summary-col{ +.summary-col { display: none; } -.hist-summary, .hist-summary-detail { +.hist-summary, +.hist-summary-detail { font-size: 0.8vw; display: none; } @@ -239,7 +241,7 @@ canvas { position: absolute; } -.item-name{ +.item-name { color: #65c5f1; text-align: center; vertical-align: middle; @@ -278,8 +280,8 @@ canvas { position: relative; } -.histogram-tab-content.tab-content>.tab-pane { - display: block!important; +.histogram-tab-content.tab-content > .tab-pane { + display: block !important; width: 100%; height: 100%; visibility: hidden; @@ -287,7 +289,7 @@ canvas { z-index: -1; } -.histogram-tab-content.tab-content>.tab-pane:not(:first-child) { +.histogram-tab-content.tab-content > .tab-pane:not(:first-child) { position: absolute; top: -10px; left: 0; @@ -334,4 +336,4 @@ canvas { text-overflow: ellipsis; max-width: calc(100% / 8); } -} \ No newline at end of file +} diff --git a/ap/static/categorical_plot/css/toastr.css b/ap/static/categorical_plot/css/toastr.css index 0e33542..3baf06e 100644 --- a/ap/static/categorical_plot/css/toastr.css +++ b/ap/static/categorical_plot/css/toastr.css @@ -1,200 +1,200 @@ .toast-title { - font-weight: bold; + font-weight: bold; } .toast-message { - -ms-word-wrap: break-word; - word-wrap: break-word; + -ms-word-wrap: break-word; + word-wrap: break-word; } .toast-message a, .toast-message label { - color: #ffffff; + color: #ffffff; } .toast-message a:hover { - color: #cccccc; - text-decoration: none; + color: #cccccc; + text-decoration: none; } .toast-close-button { - position: relative; - right: -0.3em; - top: -0.3em; - float: right; - font-size: 20px; - font-weight: bold; - color: #ffffff; - -webkit-text-shadow: 0 1px 0 #ffffff; - text-shadow: 0 1px 0 #ffffff; - opacity: 0.8; - -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); - filter: alpha(opacity=80); + position: relative; + right: -0.3em; + top: -0.3em; + float: right; + font-size: 20px; + font-weight: bold; + color: #ffffff; + -webkit-text-shadow: 0 1px 0 #ffffff; + text-shadow: 0 1px 0 #ffffff; + opacity: 0.8; + -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); + filter: alpha(opacity=80); } .toast-close-button:hover, .toast-close-button:focus { - color: #000000; - text-decoration: none; - cursor: pointer; - opacity: 0.4; - -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40); - filter: alpha(opacity=40); + color: #000000; + text-decoration: none; + cursor: pointer; + opacity: 0.4; + -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40); + filter: alpha(opacity=40); } /*Additional properties for button version iOS requires the button element instead of an anchor tag. If you want the anchor version, it requires `href="#"`.*/ button.toast-close-button { - padding: 0; - cursor: pointer; - background: transparent; - border: 0; - -webkit-appearance: none; + padding: 0; + cursor: pointer; + background: transparent; + border: 0; + -webkit-appearance: none; } .toast-top-center { - top: 0; - right: 0; - width: 100%; + top: 0; + right: 0; + width: 100%; } .toast-bottom-center { - bottom: 0; - right: 0; - width: 100%; + bottom: 0; + right: 0; + width: 100%; } .toast-top-full-width { - top: 0; - right: 0; - width: 100%; + top: 0; + right: 0; + width: 100%; } .toast-bottom-full-width { - bottom: 0; - right: 0; - width: 100%; + bottom: 0; + right: 0; + width: 100%; } .toast-top-left { - top: 12px; - left: 12px; + top: 12px; + left: 12px; } .toast-top-right { - top: 12px; - right: 12px; + top: 12px; + right: 12px; } .toast-bottom-right { - right: 12px; - bottom: 12px; + right: 12px; + bottom: 12px; } .toast-bottom-left { - bottom: 12px; - left: 12px; + bottom: 12px; + left: 12px; } #toast-container { - position: fixed; - z-index: 999999; - pointer-events: none; - /*overrides*/ + position: fixed; + z-index: 999999; + pointer-events: none; + /*overrides*/ } #toast-container * { - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; } #toast-container > div { - position: relative; - pointer-events: auto; - overflow: hidden; - margin: 0 0 6px; - padding: 15px 15px 15px 50px; - width: 300px; - -moz-border-radius: 3px 3px 3px 3px; - -webkit-border-radius: 3px 3px 3px 3px; - border-radius: 3px 3px 3px 3px; - background-position: 15px center; - background-repeat: no-repeat; - -moz-box-shadow: 0 0 12px #999999; - -webkit-box-shadow: 0 0 12px #999999; - box-shadow: 0 0 12px #999999; - color: #ffffff; - opacity: 0.8; - -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); - filter: alpha(opacity=80); + position: relative; + pointer-events: auto; + overflow: hidden; + margin: 0 0 6px; + padding: 15px 15px 15px 50px; + width: 300px; + -moz-border-radius: 3px 3px 3px 3px; + -webkit-border-radius: 3px 3px 3px 3px; + border-radius: 3px 3px 3px 3px; + background-position: 15px center; + background-repeat: no-repeat; + -moz-box-shadow: 0 0 12px #999999; + -webkit-box-shadow: 0 0 12px #999999; + box-shadow: 0 0 12px #999999; + color: #ffffff; + opacity: 0.8; + -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); + filter: alpha(opacity=80); } #toast-container > :hover { - -moz-box-shadow: 0 0 12px #000000; - -webkit-box-shadow: 0 0 12px #000000; - box-shadow: 0 0 12px #000000; - opacity: 1; - -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); - filter: alpha(opacity=100); - cursor: pointer; + -moz-box-shadow: 0 0 12px #000000; + -webkit-box-shadow: 0 0 12px #000000; + box-shadow: 0 0 12px #000000; + opacity: 1; + -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); + filter: alpha(opacity=100); + cursor: pointer; } #toast-container > .toast-info { - background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=") !important; + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=') !important; } #toast-container > .toast-error { - background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=") !important; + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=') !important; } #toast-container > .toast-success { - background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==") !important; + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==') !important; } #toast-container > .toast-warning { - background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=") !important; + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=') !important; } #toast-container.toast-top-center > div, #toast-container.toast-bottom-center > div { - width: 300px; - margin-left: auto; - margin-right: auto; + width: 300px; + margin-left: auto; + margin-right: auto; } #toast-container.toast-top-full-width > div, #toast-container.toast-bottom-full-width > div { - width: 96%; - margin-left: auto; - margin-right: auto; + width: 96%; + margin-left: auto; + margin-right: auto; } .toast { - background-color: #030303; + background-color: #030303; } .toast-success { - background-color: #51a351; + background-color: #51a351; } .toast-error { - background-color: #bd362f; + background-color: #bd362f; } .toast-info { - background-color: #2f96b4; + background-color: #2f96b4; } .toast-warning { - background-color: #f89406; + background-color: #f89406; } .toast-progress { - position: absolute; - left: 0; - bottom: 0; - height: 4px; - background-color: #000000; - opacity: 0.4; - -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40); - filter: alpha(opacity=40); + position: absolute; + left: 0; + bottom: 0; + height: 4px; + background-color: #000000; + opacity: 0.4; + -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40); + filter: alpha(opacity=40); } /*Responsive Design*/ @media all and (max-width: 240px) { - #toast-container > div { - padding: 8px 8px 8px 50px; - width: 11em; - } - #toast-container .toast-close-button { - right: -0.2em; - top: -0.2em; - } + #toast-container > div { + padding: 8px 8px 8px 50px; + width: 11em; + } + #toast-container .toast-close-button { + right: -0.2em; + top: -0.2em; + } } @media all and (min-width: 241px) and (max-width: 480px) { - #toast-container > div { - padding: 8px 8px 8px 50px; - width: 18em; - } - #toast-container .toast-close-button { - right: -0.2em; - top: -0.2em; - } + #toast-container > div { + padding: 8px 8px 8px 50px; + width: 18em; + } + #toast-container .toast-close-button { + right: -0.2em; + top: -0.2em; + } } @media all and (min-width: 481px) and (max-width: 768px) { - #toast-container > div { - padding: 15px 15px 15px 50px; - width: 25em; - } + #toast-container > div { + padding: 15px 15px 15px 50px; + width: 25em; + } } diff --git a/ap/static/categorical_plot/js/categorical_histogram_with_density_curve.js b/ap/static/categorical_plot/js/categorical_histogram_with_density_curve.js index 0c1b020..32ef865 100644 --- a/ap/static/categorical_plot/js/categorical_histogram_with_density_curve.js +++ b/ap/static/categorical_plot/js/categorical_histogram_with_density_curve.js @@ -1,5 +1,3 @@ -/* eslint-disable no-restricted-syntax */ -// eslint-disable-next-line no-unused-vars const HistogramWithDensityCurve = ($, paramObj) => { // ////////////// プライベート関数の定義 //////////////////// const setParam = (key, defaultValue) => { @@ -9,7 +7,6 @@ const HistogramWithDensityCurve = ($, paramObj) => { return defaultValue; }; - const canvasId = setParam('canvasId', ''); const yLabelFreq = setParam('yLabelFreq', '度数(カウント)'); const yTitle = setParam('yTitle', ''); @@ -23,7 +20,7 @@ const HistogramWithDensityCurve = ($, paramObj) => { const plotData = setParam('plotData', []); const isCatLimited = setParam('isCatLimited', false); const allGroupNames = setParam('allGroupNames', []); - const labelFmt = setParam('labelFmt', ''); + const labelFmt = setParam('labelFmt', ''); let customBinSize = 1; if (kdeData && kdeData.hist_labels.length > 1) { @@ -31,7 +28,7 @@ const HistogramWithDensityCurve = ($, paramObj) => { } const maxKDE = Math.max(...kdeData.kde); const maxHist = Math.max(...kdeData.hist_counts); - const transKDE = kdeData.kde.map(i => maxHist * i / maxKDE); + const transKDE = kdeData.kde.map((i) => (maxHist * i) / maxKDE); const kdeDensity = { y: kdeData.hist_labels, x: transKDE, @@ -96,7 +93,8 @@ const HistogramWithDensityCurve = ($, paramObj) => { categoryLabels.reverse(); categoryIds.sort().reverse(); // 4321 categoryLabels.forEach((catName) => { - const categoryCount = plotData.category_distributed[catName].counts_org; + const categoryCount = + plotData.category_distributed[catName].counts_org; stepChartDat.push(categoryCount); }); } @@ -205,12 +203,12 @@ const HistogramWithDensityCurve = ($, paramObj) => { // layout.yaxis.tickangle = 45; // layout.yaxis.tickmode = 'array'; layout.yaxis.tickvals = allGroupNames.id; - layout.yaxis.ticktext = allGroupNames.id.map(cat => ''); + layout.yaxis.ticktext = allGroupNames.id.map((cat) => ''); const minYVal = Math.min(...allGroupNames.id); const maxYVal = Math.max(...allGroupNames.id); layout.yaxis.range = [minYVal - 1, maxYVal + 1]; layout.yaxis.autorange = false; - + // add label to barchart allGroupNames.id.forEach((catId, k) => { @@ -238,13 +236,12 @@ const HistogramWithDensityCurve = ($, paramObj) => { layout.xaxis.autorange = false; } - try { Plotly.newPlot(canvasId, data, layout, { displayModeBar: false, responsive: true, // responsive histogram useResizeHandler: true, // responsive histogram - style: {width: '100%', height: '100%'}, // responsive histogram + style: { width: '100%', height: '100%' }, // responsive histogram }); } catch (e) { console.log(canvasId, data, layout); @@ -286,12 +283,13 @@ const HistogramWithDensityCurve = ($, paramObj) => { }; const hdPlot = document.getElementById(canvasId); - hdPlot.on('plotly_hover', (data) => { - drawShapes(data.points[0].x, data.points[0].y); - if (data.points) { - showInforTbl(data, true, canvasId); - } - }) + hdPlot + .on('plotly_hover', (data) => { + drawShapes(data.points[0].x, data.points[0].y); + if (data.points) { + showInforTbl(data, true, canvasId); + } + }) .on('plotly_unhover', (data) => { drawShapes(null, null, false); }); @@ -315,7 +313,10 @@ const drawEmptyHistogram = ($, paramObj) => { orientation: 'h', }, ]; - const catLimitMsgs = $('#i18nCatLimitedMsg').text().split('BREAK_LINE').join('
'); + const catLimitMsgs = $('#i18nCatLimitedMsg') + .text() + .split('BREAK_LINE') + .join('
'); const layout = { showlegend: false, xaxis: { @@ -364,20 +365,22 @@ const drawEmptyHistogram = ($, paramObj) => { pad: 5, }, shapes: [], - annotations: [{ - xref: 'x', - yref: 'y', - text: catLimitMsgs, - showarrow: false, - font: { - color: '#65c5f1', + annotations: [ + { + xref: 'x', + yref: 'y', + text: catLimitMsgs, + showarrow: false, + font: { + color: '#65c5f1', + }, }, - }], + ], }; Plotly.newPlot(canvasId, data, layout, { displayModeBar: false, responsive: true, // responsive histogram useResizeHandler: true, // responsive histogram - style: {width: '100%', height: '100%'}, // responsive histogram + style: { width: '100%', height: '100%' }, // responsive histogram }); }; diff --git a/ap/static/categorical_plot/js/categorical_plot.js b/ap/static/categorical_plot/js/categorical_plot.js index 8bf32f2..b2ce729 100644 --- a/ap/static/categorical_plot/js/categorical_plot.js +++ b/ap/static/categorical_plot/js/categorical_plot.js @@ -1,13 +1,13 @@ -/* eslint-disable no-restricted-syntax */ -/* eslint-disable no-unused-vars */ -/* eslint-disable no-undef */ -/* eslint-disable no-use-before-define */ const REQUEST_TIMEOUT = setRequestTimeOut(); const MAX_NUMBER_OF_GRAPH = 32; const MAX_NUMBER_OF_SENSOR = 8; const MIN_NUMBER_OF_SENSOR = 0; -// eslint-disable-next-line prefer-const -const dicTabs = {'#byVarCompare': 'var', '#byTermCompare': 'term', '#byCyclicTerm': 'cyclicTerm'}; + +const dicTabs = { + '#byVarCompare': 'var', + '#byTermCompare': 'term', + '#byCyclicTerm': 'cyclicTerm', +}; let currentTraceDataVar; let currentTraceDataTerm; let currentTraceDataCyclicTerm; @@ -77,7 +77,6 @@ const eles = { stratifiedTabs: '.stratifiedTabs', }; - const formElements = { NO_FILTER: 'NO_FILTER', BY_VAR: 'var', @@ -88,7 +87,6 @@ const formElements = { condProcSelectedItem: '#varcond-proc-row select', }; - const i18n = { yLabelKDE: $('#i18nKDE').text(), yLabelFreq: $('#i18nFrequency').text(), @@ -152,7 +150,9 @@ $(() => { // add first condition process const varCondProcItem = addCondProc( - endProcs.ids, endProcs.names, eles.varTabPrefix, + endProcs.ids, + endProcs.names, + eles.varTabPrefix, eles.mainFormId.replace('#', ''), 'varbtn-add-cond-proc', ); @@ -200,64 +200,85 @@ const showScatterPlotImage = (fileNames) => { fileNames.forEach((e) => { imgs += ``; }); - scatterPlotCard.html(`
${imgs}
`); + scatterPlotCard.html( + `
${imgs}
`, + ); }; - const onChangeHistSummaryEventHandler = (eleIdPrefix = '') => { $(`input[name=${eleIdPrefix}${eles.summaryOption}]`).unbind('change'); - $(`input[name=${eleIdPrefix}${eles.summaryOption}]`).on('change', function f() { - let summaryHeight = null; - const summaryClass = $(this).val(); - const previousOption = $(`input[name=${eleIdPrefix}${eles.summaryOption}][data-checked=true]`); - if (summaryClass === 'none') { - $(`.${eleIdPrefix}.hist-summary`).each(function showHideSummary() { - $(this).css('display', 'none'); - }); - // if (previousOption.val() && previousOption.val() !== 'none') { - // // rescale histogram - // $(`.${eleIdPrefix}.his .hd-plot`).each(function reScaleHistogram() { - // const histogramId = $(this).attr('id'); - // $(`#${histogramId}`).css('height', GRAPH_CONST.histHeight); - // Plotly.relayout(histogramId, {}); - // }); - // } - $(`.${eleIdPrefix}.his .hd-plot`).each(function reScaleHistogram() { - const histogramId = $(this).attr('id'); - $(`#${histogramId}`).css('height', GRAPH_CONST.histHeight); - Plotly.relayout(histogramId, {}); - }); - - // mark this option as checked and remove others - $(this).attr('data-checked', 'true'); - $(`input[name=${eleIdPrefix}${eles.summaryOption}]:not(:checked)`).removeAttr('data-checked'); - } else { - $(`.${eleIdPrefix}.hist-summary`).each(function showHideSummary() { - $(this).css('display', 'flex'); - $(this).css('justify-content', 'center'); // to unify with FPP - }); - - $('.hist-summary-detail').each(function showUponOption() { - $(this).css('display', 'none'); - if ($(this).hasClass(summaryClass)) { - $(this).css('display', 'block'); - const h = $(this).height(); - summaryHeight = h < summaryHeight ? summaryHeight : h; - } - }); - - $(`.${eleIdPrefix}.his .hd-plot`).each(function reScaleHistogram() { - const histogramId = $(this).attr('id'); - const chartHeight = `calc(${GRAPH_CONST.histHeight} - ${summaryHeight + 6}px)`; - $(`#${histogramId}`).css('height', chartHeight); - Plotly.relayout(histogramId, {}); - }); - - // mark this option as checked and remove others - $(this).attr('data-checked', 'true'); - $(`input[name=${eleIdPrefix}${eles.summaryOption}]:not(:checked)`).removeAttr('data-checked'); - } - }); + $(`input[name=${eleIdPrefix}${eles.summaryOption}]`).on( + 'change', + function f() { + let summaryHeight = null; + const summaryClass = $(this).val(); + const previousOption = $( + `input[name=${eleIdPrefix}${eles.summaryOption}][data-checked=true]`, + ); + if (summaryClass === 'none') { + $(`.${eleIdPrefix}.hist-summary`).each( + function showHideSummary() { + $(this).css('display', 'none'); + }, + ); + // if (previousOption.val() && previousOption.val() !== 'none') { + // // rescale histogram + // $(`.${eleIdPrefix}.his .hd-plot`).each(function reScaleHistogram() { + // const histogramId = $(this).attr('id'); + // $(`#${histogramId}`).css('height', GRAPH_CONST.histHeight); + // Plotly.relayout(histogramId, {}); + // }); + // } + $(`.${eleIdPrefix}.his .hd-plot`).each( + function reScaleHistogram() { + const histogramId = $(this).attr('id'); + $(`#${histogramId}`).css( + 'height', + GRAPH_CONST.histHeight, + ); + Plotly.relayout(histogramId, {}); + }, + ); + + // mark this option as checked and remove others + $(this).attr('data-checked', 'true'); + $( + `input[name=${eleIdPrefix}${eles.summaryOption}]:not(:checked)`, + ).removeAttr('data-checked'); + } else { + $(`.${eleIdPrefix}.hist-summary`).each( + function showHideSummary() { + $(this).css('display', 'flex'); + $(this).css('justify-content', 'center'); // to unify with FPP + }, + ); + + $('.hist-summary-detail').each(function showUponOption() { + $(this).css('display', 'none'); + if ($(this).hasClass(summaryClass)) { + $(this).css('display', 'block'); + const h = $(this).height(); + summaryHeight = h < summaryHeight ? summaryHeight : h; + } + }); + + $(`.${eleIdPrefix}.his .hd-plot`).each( + function reScaleHistogram() { + const histogramId = $(this).attr('id'); + const chartHeight = `calc(${GRAPH_CONST.histHeight} - ${summaryHeight + 6}px)`; + $(`#${histogramId}`).css('height', chartHeight); + Plotly.relayout(histogramId, {}); + }, + ); + + // mark this option as checked and remove others + $(this).attr('data-checked', 'true'); + $( + `input[name=${eleIdPrefix}${eles.summaryOption}]:not(:checked)`, + ).removeAttr('data-checked'); + } + }, + ); }; const onChangeHistScale = (prefix) => { @@ -290,16 +311,20 @@ const rerenderHistogram = (prefix) => { }; const showTabsAndCharts = ( - eleIdPrefix, data, + eleIdPrefix, + data, genTab = true, onlySensorId = null, ) => { if (data == null) return; let sensors = []; - data.ARRAY_FORMVAL.forEach(arrayFormval => { - sensors = [...sensors, ...arrayFormval.GET02_VALS_SELECT.map(val => Number(val))] - }) - if (typeof (sensors) === 'string') { + data.ARRAY_FORMVAL.forEach((arrayFormval) => { + sensors = [ + ...sensors, + ...arrayFormval.GET02_VALS_SELECT.map((val) => Number(val)), + ]; + }); + if (typeof sensors === 'string') { sensors = [sensors]; } @@ -320,7 +345,10 @@ const showTabsAndCharts = ( // /////////////// each sensor //////////////////// const startProc = data.COMMON.start_proc; for (let sensorIdx = 0; sensorIdx < numSensors; sensorIdx++) { - if (onlySensorId !== null && onlySensorId !== Number(sensors[sensorIdx])) { + if ( + onlySensorId !== null && + onlySensorId !== Number(sensors[sensorIdx]) + ) { continue; } const tabId = `#${eleIdPrefix}${eles.categoryPlotCards}-${sensorIdx}`; @@ -328,10 +356,13 @@ const showTabsAndCharts = ( tabElement.empty(); tabElement.css('display', 'block'); - const sensor = sensors[sensorIdx]; - const sensorPlotDatas = eleIdPrefix !== 'directTerm' ? data.array_plotdata[sensor] - : data.array_plotdata.filter(plot => plot.end_col === Number(sensor)); + const sensorPlotDatas = + eleIdPrefix !== 'directTerm' + ? data.array_plotdata[sensor] + : data.array_plotdata.filter( + (plot) => plot.end_col === Number(sensor), + ); if (!sensorPlotDatas) { continue; } @@ -339,16 +370,24 @@ const showTabsAndCharts = ( // カラム名を取得する。 const displayColName = sensorPlotDatas[0].end_col_name; const endProcName = sensorPlotDatas[0].end_proc_name; - const isCategory = sensorPlotDatas[0] ? sensorPlotDatas[0].is_category : false; + const isCategory = sensorPlotDatas[0] + ? sensorPlotDatas[0].is_category + : false; const allGroupNames = isCategory - ? getAllGroupOfSensor(sensorPlotDatas) : []; + ? getAllGroupOfSensor(sensorPlotDatas) + : []; const generalInfo = { - startProc, endProcName: endProcName, + startProc, + endProcName: endProcName, }; - const isCatLimited = sensorPlotDatas[0] ? sensorPlotDatas[0].is_cat_limited : false; + const isCatLimited = sensorPlotDatas[0] + ? sensorPlotDatas[0].is_cat_limited + : false; if (isCatLimited) { - tabElement.closest('.tab-pane') - .find('.overlay-card').css('display', 'grid'); + tabElement + .closest('.tab-pane') + .find('.overlay-card') + .css('display', 'grid'); } // /////////////// each histogram //////////////////// for (let i = 0; i < numGraphs; i++) { @@ -356,38 +395,78 @@ const showTabsAndCharts = ( const termIdx = sensorPlotDatas[i].term_id || 0; const beforeRankValues = sensorPlotDatas[i].before_rank_values; const stepChartSummary = sensorPlotDatas[i].cat_summary || null; - const catExpBoxCols = [data.COMMON.catExpBox1, data.COMMON.catExpBox2].filter(c => c); - const filterCond = catExpBoxCols.length > 0 - ? catExpValue.toString().split(' | ') : null; + const catExpBoxCols = [ + data.COMMON.catExpBox1, + data.COMMON.catExpBox2, + ].filter((c) => c); + const filterCond = + catExpBoxCols.length > 0 + ? catExpValue.toString().split(' | ') + : null; // get latest thresholds -> show thresholds in scatter, histogram, summary - const [chartInfos, chartInfosOrg] = getChartInfo(sensorPlotDatas[i], 'TIME', filterCond); - const [latestChartInfo, latestChartInfoIdx] = chooseLatestThresholds(chartInfos, chartInfosOrg); + const [chartInfos, chartInfosOrg] = getChartInfo( + sensorPlotDatas[i], + 'TIME', + filterCond, + ); + const [latestChartInfo, latestChartInfoIdx] = + chooseLatestThresholds(chartInfos, chartInfosOrg); const scaleInfo = getScaleInfo(sensorPlotDatas[i], scaleOption); // y_min/max are defined in backend -> get only const kdeData = scaleInfo.kde_data; - const [minY, maxY] = calMinMaxYScale(scaleInfo['y-min'], scaleInfo['y-max'], scaleOption); - const maxX = frequencyOption === frequencyOptions.COMMON ? scaleInfo['x-max'] : null; - const minX = frequencyOption === frequencyOptions.COMMON ? scaleInfo['x-min'] : null; + const [minY, maxY] = calMinMaxYScale( + scaleInfo['y-min'], + scaleInfo['y-max'], + scaleOption, + ); + const maxX = + frequencyOption === frequencyOptions.COMMON + ? scaleInfo['x-max'] + : null; + const minX = + frequencyOption === frequencyOptions.COMMON + ? scaleInfo['x-min'] + : null; // produce summary data - const {summaries, end_col, end_proc_id} = sensorPlotDatas[i]; - const isHideNonePoint = isHideNoneDataPoint(end_proc_id, end_col, data.COMMON.remove_outlier); - const summaryData = calculateSummaryData(summaries, latestChartInfoIdx, isHideNonePoint); + const { summaries, end_col, end_proc_id } = sensorPlotDatas[i]; + const isHideNonePoint = isHideNoneDataPoint( + end_proc_id, + end_col, + data.COMMON.remove_outlier, + ); + const summaryData = calculateSummaryData( + summaries, + latestChartInfoIdx, + isHideNonePoint, + ); const isShowDate = eleIdPrefix !== eles.varTabPrefix; const timeCond = data.time_conds[termIdx]; const chartTitle = buildSummaryChartTitle( - catExpValue, catExpBoxCols, sensorPlotDatas[i].catExpBoxName, - isShowDate, timeCond, true, + catExpValue, + catExpBoxCols, + sensorPlotDatas[i].catExpBoxName, + isShowDate, + timeCond, + true, ); // create summaries HTMLs - const summariesHTML = buildSummaryResultsHTML(summaryData, i + 1, generalInfo, beforeRankValues, stepChartSummary,); + const summariesHTML = buildSummaryResultsHTML( + summaryData, + i + 1, + generalInfo, + beforeRankValues, + stepChartSummary, + ); const histogramId = `${eleIdPrefix}-${sensor}-${eles.histograms}${i + 1}`; - const fromStartPrcClass = String(sensorPlotDatas[i].end_proc_id) === String(startProc) - ? ' card-active' : ''; + const fromStartPrcClass = + String(sensorPlotDatas[i].end_proc_id) === String(startProc) + ? ' card-active' + : ''; const cardHtml = `
${chartTitle} @@ -433,10 +512,14 @@ const showTabsAndCharts = ( } // //////////////////////////////////// // report progress - loadingUpdate(loadingProgressBackend + sensorIdx * ((100 - loadingProgressBackend) / (numSensors || 1))); + loadingUpdate( + loadingProgressBackend + + sensorIdx * + ((100 - loadingProgressBackend) / (numSensors || 1)), + ); } - checkSummaryOption(`${eleIdPrefix}${eles.summaryOption}`); + checkSummaryOption(`${eleIdPrefix}${eles.summaryOption}`); // Init filter modal fillDataToFilterModal(data.filter_on_demand, () => { @@ -464,7 +547,9 @@ const setNameWithPrefix = (prefix) => { const resetSetting = (eleIdPrefix) => { resetSummaryOption(`${eleIdPrefix}${eles.summaryOption}`); - $(`select[name=${eleIdPrefix}${eles.frequencyScale}]`).val(frequencyOptions.COMMON); + $(`select[name=${eleIdPrefix}${eles.frequencyScale}]`).val( + frequencyOptions.COMMON, + ); $(`select[name=${eleIdPrefix}HistScale]`).val(scaleOptionConst.COMMON); }; @@ -480,7 +565,7 @@ const collectFormDataFromGUI = (clearOnFlyFilter, autoUpdate = false) => { } const traceForm = $(eles.mainFormId); let formData = new FormData(traceForm[0]); - + const eleIdPrefix = $('select[name=compareType]').val(); // collect form data if (clearOnFlyFilter) { @@ -489,7 +574,7 @@ const collectFormDataFromGUI = (clearOnFlyFilter, autoUpdate = false) => { formData = reformatFormData(eleIdPrefix, formData); formData = genDatetimeRange(formData); lastUsedFormData = formData; - + resetCheckedCats(); } else { formData = lastUsedFormData; @@ -501,78 +586,98 @@ const collectFormDataFromGUI = (clearOnFlyFilter, autoUpdate = false) => { const showGraph = (clearOnFlyFilter = true, autoUpdate = false) => { requestStartedAt = performance.now(); const eleIdPrefix = $('select[name=compareType]').val(); - - const isValid = checkValidations({max: MAX_NUMBER_OF_SENSOR}); + + const isValid = checkValidations({ max: MAX_NUMBER_OF_SENSOR }); updateStyleOfInvalidElements(); if (!isValid) return; - + // close sidebar beforeShowGraphCommon(clearOnFlyFilter); if (clearOnFlyFilter) { // reset sumary option resetSetting(eleIdPrefix); - }; + } const formData = collectFormDataFromGUI(clearOnFlyFilter, autoUpdate); - showGraphCallApi('/ap/api/stp/index', formData, REQUEST_TIMEOUT, async (res) => { - // set summary bar for prefix - setNameWithPrefix(eleIdPrefix); - - // show result section - $('#categoricalPlotArea').show(); - - if (!_.isEmpty(res.array_plotdata)) { - graphStore.setTraceData(_.cloneDeep(res)); - if (eleIdPrefix === eles.varTabPrefix) { - currentTraceDataVar = res; - showMessageIfFacetNotSelected(res); - } else if (eleIdPrefix === eles.termTabPrefix) { - currentTraceDataTerm = res; - } else { - currentTraceDataCyclicTerm = res; + showGraphCallApi( + '/ap/api/stp/index', + formData, + REQUEST_TIMEOUT, + async (res) => { + // set summary bar for prefix + setNameWithPrefix(eleIdPrefix); + + // show result section + $('#categoricalPlotArea').show(); + + if (!_.isEmpty(res.array_plotdata)) { + graphStore.setTraceData(_.cloneDeep(res)); + if (eleIdPrefix === eles.varTabPrefix) { + currentTraceDataVar = res; + showMessageIfFacetNotSelected(res); + } else if (eleIdPrefix === eles.termTabPrefix) { + currentTraceDataTerm = res; + } else { + currentTraceDataCyclicTerm = res; + } } - } - setScaleOption(eleIdPrefix); - - // show graphs - // if (eleIdPrefix === eles.varTabPrefix || eleIdPrefix === eles.cyclicTermTabPrefix) { - showTabsAndCharts(eleIdPrefix, res); - - // show info table - showInfoTable(res); - - // Move screen to graph after pushing グラフ表示 button - if (!autoUpdate) { - $('html, body').animate({ - scrollTop: $(`#${eles.categoryPlotCards}`).offset().top, - }, 500); - } + setScaleOption(eleIdPrefix); + + // show graphs + // if (eleIdPrefix === eles.varTabPrefix || eleIdPrefix === eles.cyclicTermTabPrefix) { + showTabsAndCharts(eleIdPrefix, res); + + // show info table + showInfoTable(res); + + // Move screen to graph after pushing グラフ表示 button + if (!autoUpdate) { + $('html, body').animate( + { + scrollTop: getOffsetTopDisplayGraph( + `#${eles.categoryPlotCards}`, + ), + }, + 500, + ); + } - // check result and show toastr msg - if (isEmpty(res.array_plotdata) || isEmpty(Object.values(res.array_plotdata)[0])) { - showToastrAnomalGraph(); - } + // check result and show toastr msg + if ( + isEmpty(res.array_plotdata) || + isEmpty(Object.values(res.array_plotdata)[0]) + ) { + showToastrAnomalGraph(); + } - // show limit graphs displayed in one tab message - if (res.isGraphLimited) { - showToastrMsg(i18nCommon.limitDisplayedGraphsInOneTab.replace('NUMBER', MAX_NUMBER_OF_GRAPH)); - } + // show limit graphs displayed in one tab message + if (res.isGraphLimited) { + showToastrMsg( + i18nCommon.limitDisplayedGraphsInOneTab.replace( + 'NUMBER', + MAX_NUMBER_OF_GRAPH, + ), + ); + } - // show scatter plot tab - const imgFile = res.images; - if (imgFile) { - showScatterPlotImage(imgFile); - } - setPollingData(formData, showGraph, [false, true]); + // show scatter plot tab + const imgFile = res.images; + if (imgFile) { + showScatterPlotImage(imgFile); + } + setPollingData(formData, showGraph, [false, true]); - // drag & drop for tables - $('.ui-sortable').sortable(); - }); + // drag & drop for tables + $('.ui-sortable').sortable(); + }, + ); }; const setScaleOption = (prefix) => { stpScaleOption.yAxis = $(`select[name=${prefix}${eles.histScale}]`).val(); - stpScaleOption.xAxis = $(`select[name=${prefix}${eles.frequencyScale}]`).val(); + stpScaleOption.xAxis = $( + `select[name=${prefix}${eles.frequencyScale}]`, + ).val(); }; diff --git a/ap/static/categorical_plot/js/categorical_plot_utils.js b/ap/static/categorical_plot/js/categorical_plot_utils.js index 05958e4..06864f1 100644 --- a/ap/static/categorical_plot/js/categorical_plot_utils.js +++ b/ap/static/categorical_plot/js/categorical_plot_utils.js @@ -1,5 +1,3 @@ -/* eslint-disable guard-for-in */ -/* eslint-disable no-restricted-syntax */ const cyclicEles = { datetimeFrom: $('#i18nDatetimeFrom').text(), datetimeTo: $('#i18nDatetimeTo').text(), @@ -43,16 +41,27 @@ const addLimitNumSensors = () => { }); }; - // generate HTML for tabs const generateTabHTML = (eleIdPrefix, data, sensors, showViewer = false) => { - const genNavItemHTML = (tabId, sensorMasterName, status = '', sensorID = null) => `
  • + const genNavItemHTML = ( + tabId, + sensorMasterName, + status = '', + sensorID = null, + ) => `
  • ${sensorMasterName}
    • `; - const catLimitMsgs = $('#i18nCatLimitedMsg').text().split('BREAK_LINE').join('
    '); - const genTabContentHTML = (tabId, plotCardId, status = '') => `
    + const catLimitMsgs = $('#i18nCatLimitedMsg') + .text() + .split('BREAK_LINE') + .join('
    '); + const genTabContentHTML = ( + tabId, + plotCardId, + status = '', + ) => `
    ${catLimitMsgs} @@ -61,19 +70,36 @@ const generateTabHTML = (eleIdPrefix, data, sensors, showViewer = false) => { const navItemHTMLs = []; const tabContentHTMLs = []; const existPlotData = !_.isEmpty(data.array_plotdata); - for (let sensorIdx = 0; existPlotData && sensorIdx < sensors.length; sensorIdx++) { - const sensorPlotDatas = eleIdPrefix !== 'directTerm' ? data.array_plotdata[sensors[sensorIdx]] - : data.array_plotdata.filter(plot => plot.end_col === Number(sensors[sensorIdx])); + const procNamesSet = new Set(); + for ( + let sensorIdx = 0; + existPlotData && sensorIdx < sensors.length; + sensorIdx++ + ) { + const sensorPlotDatas = + eleIdPrefix !== 'directTerm' + ? data.array_plotdata[sensors[sensorIdx]] + : data.array_plotdata.filter( + (plot) => plot.end_col === Number(sensors[sensorIdx]), + ); // カラム名を取得する。 - const sensorMasterName = sensorPlotDatas[0].end_col_name; - + const { end_proc_name, end_col_name } = sensorPlotDatas[0]; + const sensorMasterName = procNamesSet.has(end_proc_name) + ? `${end_col_name}` + : `${end_proc_name}|${end_col_name}`; + procNamesSet.add(end_proc_name); let status = ''; if (sensorIdx === 0) { status = 'active'; } const tabId = `${eleIdPrefix}HistogramsTab-${sensorIdx}`; const sensorID = sensors[sensorIdx]; - const navItemHTML = genNavItemHTML(tabId, sensorMasterName, status, sensorID); + const navItemHTML = genNavItemHTML( + tabId, + sensorMasterName, + status, + sensorID, + ); navItemHTMLs.push(navItemHTML); const plotCardId = `${eleIdPrefix}CatePlotCards-${sensorIdx}`; const tabContentHTML = genTabContentHTML(tabId, plotCardId, status); @@ -82,8 +108,14 @@ const generateTabHTML = (eleIdPrefix, data, sensors, showViewer = false) => { let viewerNavHTML = ''; let viewerContentHTML = ''; if (showViewer) { - viewerNavHTML = genNavItemHTML(tabId = 'scattersTab', sensorMasterName = i18n.viewerTabName); - viewerContentHTML = genTabContentHTML(tabId = 'scattersTab', plotCardId = 'varScatterPlotCards'); + viewerNavHTML = genNavItemHTML( + (tabId = 'scattersTab'), + (sensorMasterName = i18n.viewerTabName), + ); + viewerContentHTML = genTabContentHTML( + (tabId = 'scattersTab'), + (plotCardId = 'varScatterPlotCards'), + ); } const stratifiedVarTabHTML = `
      @@ -116,7 +148,9 @@ const showResultTabHTMLs = (eleIdPrefix, data, sensors, showViewer = false) => { }; const getEndProcFromFormVal = (sensorId, arrayFormval) => { - const proc = arrayFormval.filter(proc => proc.GET02_VALS_SELECT.includes(sensorId.toString())); + const proc = arrayFormval.filter((proc) => + proc.GET02_VALS_SELECT.includes(sensorId.toString()), + ); return proc[0].end_proc; }; @@ -125,7 +159,7 @@ const isFormDataValid = (eleIdPrefix, formData) => { const formKeys = [...formData.keys()]; for (const chkKey of requiredKeys) { - const result = formKeys.some(e => e.startsWith(chkKey)); + const result = formKeys.some((e) => e.startsWith(chkKey)); if (result === false) { return 2; } @@ -152,16 +186,25 @@ const concatAllArrayY = (tabPrefix, traceData, numChart, sensorID = '') => { let arrayPlotdataY = []; for (let idx = 0; idx < numChart; idx++) { if (tabPrefix === eles.varTabPrefix) { - arrayPlotdataY = arrayPlotdataY.concat(traceData.array_plotdata[sensorID][idx].array_y); + arrayPlotdataY = arrayPlotdataY.concat( + traceData.array_plotdata[sensorID][idx].array_y, + ); } else if (tabPrefix === eles.termTabPrefix) { - arrayPlotdataY = arrayPlotdataY.concat(traceData.array_plotdata[idx].array_y); + arrayPlotdataY = arrayPlotdataY.concat( + traceData.array_plotdata[idx].array_y, + ); } } - arrayPlotdataY = arrayPlotdataY.filter(e => $.isNumeric(e)); + arrayPlotdataY = arrayPlotdataY.filter((e) => $.isNumeric(e)); return arrayPlotdataY; }; -const updateHistogramWhenChaneScale = (currentTraceData, scaleOption = scaleOptionConst.COMMON, sensorID = null, tabPrefix = '') => { +const updateHistogramWhenChaneScale = ( + currentTraceData, + scaleOption = scaleOptionConst.COMMON, + sensorID = null, + tabPrefix = '', +) => { if (tabPrefix === eles.varTabPrefix && !sensorID) { return; } @@ -174,9 +217,11 @@ const updateHistogramWhenChaneScale = (currentTraceData, scaleOption = scaleOpti } if (!numChart) return; - for (let i = 0; i < numChart; i++) { - const scaleInfo = getScaleInfo(currentTraceData.array_plotdata[sensorID][i], scaleOption); + const scaleInfo = getScaleInfo( + currentTraceData.array_plotdata[sensorID][i], + scaleOption, + ); const kdeData = scaleInfo.kde_data; const yMax = scaleInfo['y-max']; const yMin = scaleInfo['y-min']; @@ -191,10 +236,7 @@ const updateHistogramWhenChaneScale = (currentTraceData, scaleOption = scaleOpti x: kdeData.kde, ybins: { end: yMax, size: 128, start: yMin }, }; - const dataUpdate = [ - histogram, - kdeDensity, - ]; + const dataUpdate = [histogram, kdeDensity]; const canvasId = `${tabPrefix}-${sensorID}-Histograms${i + 1}`; Plotly.update(canvasId, dataUpdate); diff --git a/ap/static/co_occurrence/css/co_occurrence.css b/ap/static/co_occurrence/css/co_occurrence.css index b4f268a..ac6275a 100644 --- a/ap/static/co_occurrence/css/co_occurrence.css +++ b/ap/static/co_occurrence/css/co_occurrence.css @@ -3,11 +3,11 @@ display: table; border-collapse: collapse; height: 80vh; - width: inherit + width: inherit; } .node-label-text-path { - fill: #FFFFFF !important; + fill: #ffffff !important; text-shadow: none !important; } @@ -52,7 +52,7 @@ canvas { /* Clear floats after the columns */ .chart-row:after { - content: ""; + content: ''; display: table; clear: both; } @@ -67,4 +67,4 @@ canvas { } .file-selection-group { margin-top: 10px; -} \ No newline at end of file +} diff --git a/ap/static/co_occurrence/css/co_occurrence_csv.css b/ap/static/co_occurrence/css/co_occurrence_csv.css index 1ae6016..471ac70 100644 --- a/ap/static/co_occurrence/css/co_occurrence_csv.css +++ b/ap/static/co_occurrence/css/co_occurrence_csv.css @@ -12,30 +12,30 @@ } .edge-hover { - text-decoration:none; - position:relative; + text-decoration: none; + position: relative; } .edge-hover span { - display:none; - position:fixed; - overflow:hidden; + display: none; + position: fixed; + overflow: hidden; color: #00aeff; font-size: 11px; font-weight: bold; } .edge-hover:hover span { - display:block; - position:fixed; - overflow:hidden; + display: block; + position: fixed; + overflow: hidden; } .coo { height: 83vh !important; } -.btn-control{ +.btn-control { text-align: right; padding: 0.5rem 0 0 0; } @@ -60,5 +60,5 @@ } .plot-container.plotly .main-svg { - background: unset!important; + background: unset !important; } diff --git a/ap/static/co_occurrence/js/co_occurrence_csv.js b/ap/static/co_occurrence/js/co_occurrence_csv.js index 3ca11fb..3962c45 100644 --- a/ap/static/co_occurrence/js/co_occurrence_csv.js +++ b/ap/static/co_occurrence/js/co_occurrence_csv.js @@ -1,4 +1,3 @@ -/* eslint-disable prefer-const */ const REQUEST_TIMEOUT = setRequestTimeOut(); let settingFile = false; const graphStore = new GraphStore(); @@ -117,8 +116,8 @@ const showCoOccurrencePlot = (nodes, edges, showAllNodeLabels = true) => { const y = e.data.captor.clientY; // todo check null if (y && x) { coOccElements.tooltipSpan.text(e.data.edge.label); - coOccElements.tooltipSpan.css('top', `${(y - 10)}px`); - coOccElements.tooltipSpan.css('left', `${(x + 10)}px`); + coOccElements.tooltipSpan.css('top', `${y - 10}px`); + coOccElements.tooltipSpan.css('left', `${x + 10}px`); coOccElements.tooltipSpan.css('display', 'block'); } }); @@ -127,7 +126,6 @@ const showCoOccurrencePlot = (nodes, edges, showAllNodeLabels = true) => { coOccElements.tooltipSpan.css('display', 'none'); }); - s.bind('nodeClick', (e) => { coOccElements.tooltipSpan.css('display', 'none'); }); @@ -173,15 +171,19 @@ const showCoOccurrencePlot = (nodes, edges, showAllNodeLabels = true) => { // console.log(event); // }); - - $('html, body').animate({ - scrollTop: coOccElements.plotCard.offset().top, - }, 200); - + $('html, body').animate( + { + scrollTop: getOffsetTopDisplayGraph('#plotCard'), + }, + 200, + ); coOccElements.restoreZoom.on('click', () => { s.cameras[0].goTo({ - x: 0, y: 0, angle: 0, ratio: 1, + x: 0, + y: 0, + angle: 0, + ratio: 1, }); }); }; @@ -215,24 +217,30 @@ const showGraph = () => { formDat.append('layout', $(coOccElements.layout).val()); formDat.append('file', fileUpload); - showGraphCallApi(coOccElements.apiShowGraphUrl, formDat, REQUEST_TIMEOUT, async (res) => { - coOccElements.plotCard.show(); - coOccElements.plotCOG.show(); - - const dicRes = JSON.parse(res); - showCoOccurrencePlot(dicRes.nodes, dicRes.edges); - currentData = JSON.parse(res); - loadingUpdate(75); - showParetoPlot(dicRes.pareto); - - // move invalid filter - // setColorAndSortHtmlEle(res.matched_filter_ids, res.unmatched_filter_ids, res.not_exact_match_filter_ids); - // if (checkResultExist(res)) { - // saveInvalidFilterCaller(true); - // } else { - // saveInvalidFilterCaller(); - // } - }, { enctype: 'multipart/form-data', dataType: '' }); + showGraphCallApi( + coOccElements.apiShowGraphUrl, + formDat, + REQUEST_TIMEOUT, + async (res) => { + coOccElements.plotCard.show(); + coOccElements.plotCOG.show(); + + const dicRes = JSON.parse(res); + showCoOccurrencePlot(dicRes.nodes, dicRes.edges); + currentData = JSON.parse(res); + loadingUpdate(75); + showParetoPlot(dicRes.pareto); + + // move invalid filter + // setColorAndSortHtmlEle(res.matched_filter_ids, res.unmatched_filter_ids, res.not_exact_match_filter_ids); + // if (checkResultExist(res)) { + // saveInvalidFilterCaller(true); + // } else { + // saveInvalidFilterCaller(); + // } + }, + { enctype: 'multipart/form-data', dataType: '' }, + ); }; const showParetoPlot = (paretoData) => { @@ -250,7 +258,6 @@ function bindUpdateThresholdValue() { }); } - $(() => { const dragAreaCls = '.co-occurrence-drag-area'; const selectFileBtnId = '#selectFileBtn'; @@ -272,5 +279,9 @@ $(() => { const updateNodeLabel = (e) => { const isShowAllNodeLabels = $(e).prop('checked'); coOccElements.plotCOG.empty(); - showCoOccurrencePlot(currentData.nodes, currentData.edges, isShowAllNodeLabels); -} + showCoOccurrencePlot( + currentData.nodes, + currentData.edges, + isShowAllNodeLabels, + ); +}; diff --git a/ap/static/co_occurrence/js/pareto_plot.js b/ap/static/co_occurrence/js/pareto_plot.js index db1893d..4fd3758 100644 --- a/ap/static/co_occurrence/js/pareto_plot.js +++ b/ap/static/co_occurrence/js/pareto_plot.js @@ -10,11 +10,11 @@ const paretoPlot = (prop) => { }, type: 'bar', orientation: prop.bar.orientation, - hovertemplate: '%{y}:%{text}', + hovertemplate: '%{y}:
      %{text}', textposition: 'outside', textfont: { color: '#ffffff', - } + }, }; const lineCumRatio = { @@ -23,7 +23,7 @@ const paretoPlot = (prop) => { name: prop.line_cum_ratio.name, text: prop.line_cum_ratio.text.reverse(), mode: 'lines+markers', - hovertemplate: '%{y}:%{text:.2f} %', + hovertemplate: '%{y}:
      %{text:.2f} %', }; const line80Percent = { @@ -87,8 +87,6 @@ const paretoPlot = (prop) => { displaylogo: false, responsive: true, useResizeHandler: true, - style: {width: '100%', height: '100%'}, + style: { width: '100%', height: '100%' }, }); - - -} \ No newline at end of file +}; diff --git a/ap/static/common/css/components.css b/ap/static/common/css/components.css index 9c41620..6d4d662 100644 --- a/ap/static/common/css/components.css +++ b/ap/static/common/css/components.css @@ -26,10 +26,9 @@ } .objective-item { - max-width: 80px!important; + max-width: 80px !important; } - .floating-dropdown { height: 50vh; position: absolute; @@ -39,11 +38,13 @@ background-color: #333; } -#cond-proc-row h5, h6 { +#cond-proc-row h5, +h6 { margin-bottom: 0; } -.end-proc, .cond-proc { +.end-proc, +.cond-proc { min-width: 250px; } @@ -73,12 +74,11 @@ height: 12px; } - /* Tooltip CSS */ .tooltip-parent .tooltip-content { visibility: hidden; width: 150px; - background-color: rgba(8, 8, 8, .8); + background-color: rgba(8, 8, 8, 0.8); color: #fff; text-align: left; border-radius: 6px; @@ -100,7 +100,7 @@ .tooltip-parent-lg .tooltip-content-lg { visibility: hidden; - background-color: rgba(8, 8, 8, .8); + background-color: rgba(8, 8, 8, 0.8); color: #fff; text-align: left; border-radius: 6px; @@ -136,7 +136,6 @@ border-radius: 3px; } - .level-select { min-width: unset; padding: 1px 3px; @@ -154,7 +153,6 @@ min-width: 60px; } - .expand-arrow { position: relative; padding-bottom: 15px; @@ -177,18 +175,20 @@ padding-left: 35px; } -.gray, .gray + label, .gray input, .gray select, .gray textarea { - color: gray!important; +.gray, +.gray + label, +.gray input, +.gray select, +.gray textarea { + color: gray !important; } .title-col { - color: white!important; + color: white !important; } - - @media (max-width: 1590px) { - .show-name-col { + .show-name-col { flex: 0 0 27%; max-width: 27%; } @@ -208,7 +208,7 @@ } @media (max-width: 1200px) { - .show-name-col-header { + .show-name-col-header { flex: 0 0 66.6666666667%; max-width: 66.6666666667%; } @@ -224,7 +224,7 @@ } @media (max-width: 990px) { - .show-name-col { + .show-name-col { flex: 0 0 27%; max-width: 27%; } @@ -234,7 +234,7 @@ max-width: 54%; } - .type-item { + .type-item { width: 45px; } } @@ -246,10 +246,10 @@ @keyframes blink-animation { 50% { - opacity: 0 + opacity: 0; } } .blink { animation: blink-animation 1s linear infinite; -} \ No newline at end of file +} diff --git a/ap/static/common/css/data-finder.css b/ap/static/common/css/data-finder.css index 04a1615..1be868f 100644 --- a/ap/static/common/css/data-finder.css +++ b/ap/static/common/css/data-finder.css @@ -1,7 +1,7 @@ /* DATA FINDER CSS */ .data-finder { width: 1060px; - max-width: 100%; + /*max-width: 100%;*/ background-color: #222222; height: auto; display: flex; @@ -24,13 +24,13 @@ .calender-box th, .calender-box td { - border: none; + border: none; } .calender-box td.cell, .calender-box div.cell { - border-right: 1px solid #444444; - border-bottom: 1px solid #444444; + border-right: 1px solid #444444; + border-bottom: 1px solid #444444; } .data-finder-action .form-group { @@ -47,7 +47,7 @@ width: 60px; } -.data-finder-action .action{ +.data-finder-action .action { display: flex; } @@ -60,15 +60,20 @@ width: 55px; } -.data-finder-action .action .action-button .action-button-group:not(:last-child) { +.data-finder-action + .action + .action-button + .action-button-group:not(:last-child) { margin-right: 8px; } -.month-calendar, .week-calendar { +.month-calendar, +.week-calendar { display: flex; } -.calender-box th, .calender-box td { +.calender-box th, +.calender-box td { padding: 5px; text-align: center; } @@ -95,7 +100,7 @@ } .calender-box .cell.in-range:before { - border: 1px solid #fff; + border: 1px solid #fff; } .calender-box .cell:hover:before { @@ -164,7 +169,7 @@ } .calender-box td, -.calender-box th{ +.calender-box th { min-width: 40px; } @@ -178,7 +183,7 @@ } .no-border { - border: none!important; + border: none !important; } .calender-box .year-calendar-go-to { @@ -228,7 +233,8 @@ padding: 0px; } -#weekTableTo, #monthTableTo { +#weekTableTo, +#monthTableTo { margin-left: 25px; } @@ -271,7 +277,7 @@ padding: 0; } -.week-calendar .hour span{ +.week-calendar .hour span { display: inline-block; position: relative; bottom: -10px; @@ -318,12 +324,14 @@ width: calc(50% - 14px); } - .year-calendar th, .year-calendar td { + .year-calendar th, + .year-calendar td { width: 5%; min-width: auto; } - #weekTableTo, #monthTableTo { + #weekTableTo, + #monthTableTo { margin-left: 10px; } @@ -416,7 +424,7 @@ button.for-data-finder { background-color: #00aeff52; } -.single-calendar-body .in-week.last-item{ +.single-calendar-body .in-week.last-item { border-bottom-right-radius: 3px; border-top-right-radius: 3px; } @@ -460,4 +468,4 @@ button.for-data-finder { grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(7, 1fr); padding: 0 5px; -} \ No newline at end of file +} diff --git a/ap/static/common/css/dragndrop.css b/ap/static/common/css/dragndrop.css index 750a492..5b1e5b5 100644 --- a/ap/static/common/css/dragndrop.css +++ b/ap/static/common/css/dragndrop.css @@ -1,4 +1,4 @@ -.drag-area{ +.drag-area { border: 2px dashed #444444; /*height: 500px;*/ /*width: 700px;*/ @@ -9,14 +9,14 @@ flex-direction: column; padding: 10px 0; } -.drag-area.active{ +.drag-area.active { border: 2px solid #fff; } -.drag-area .icon{ +.drag-area .icon { font-size: 50px; color: #fff; } -.drag-area header{ +.drag-area header { font-size: 18px; font-weight: 500; color: #fff; @@ -25,12 +25,12 @@ box-shadow: none; padding: 0; } -.drag-area span{ +.drag-area span { font-size: 18px; font-weight: 500; color: #fff; } -.drag-area button{ +.drag-area button { margin-bottom: 10px; padding: 7px 25px; font-weight: 500; @@ -41,7 +41,7 @@ border-radius: 5px; cursor: pointer; } -.drag-area img{ +.drag-area img { height: 100%; width: 100%; object-fit: cover; @@ -53,8 +53,12 @@ .box.has-advanced-upload { outline: 2px dashed #444444; outline-offset: -10px; - -webkit-transition: outline-offset .15s ease-in-out, background-color .15s linear; - transition: outline-offset .15s ease-in-out, background-color .15s linear; + -webkit-transition: + outline-offset 0.15s ease-in-out, + background-color 0.15s linear; + transition: + outline-offset 0.15s ease-in-out, + background-color 0.15s linear; } .box.is-dragover { outline-offset: -15px; @@ -70,4 +74,3 @@ margin-bottom: 10px; display: none; } - diff --git a/ap/static/common/css/fSelect.css b/ap/static/common/css/fSelect.css index f1080ee..f573100 100644 --- a/ap/static/common/css/fSelect.css +++ b/ap/static/common/css/fSelect.css @@ -14,7 +14,7 @@ cursor: default; height: 36.5px; color: #444; - background-clip:padding-box; + background-clip: padding-box; border-radius: 0.25rem; } @@ -31,7 +31,7 @@ text-overflow: ellipsis; white-space: nowrap; overflow: hidden; - color:black + color: black; } .fs-arrow { diff --git a/ap/static/common/css/graph_nav.css b/ap/static/common/css/graph_nav.css index a3c0a55..a400c8e 100644 --- a/ap/static/common/css/graph_nav.css +++ b/ap/static/common/css/graph_nav.css @@ -61,27 +61,39 @@ } .graphNavButtons a:nth-child(1) { - transition: opacity 0.2s ease-in-out 0.3s, transform 0.15s ease-in-out; + transition: + opacity 0.2s ease-in-out 0.3s, + transform 0.15s ease-in-out; } .graphNavButtons a:nth-child(2) { - transition: opacity 0.2s ease-in-out 0.25s, transform 0.15s ease-in-out; + transition: + opacity 0.2s ease-in-out 0.25s, + transform 0.15s ease-in-out; } .graphNavButtons a:nth-child(3) { - transition: opacity 0.2s ease-in-out 0.2s, transform 0.15s ease-in-out; + transition: + opacity 0.2s ease-in-out 0.2s, + transform 0.15s ease-in-out; } .graphNavButtons a:nth-child(4) { - transition: opacity 0.2s ease-in-out 0.15s, transform 0.15s ease-in-out; + transition: + opacity 0.2s ease-in-out 0.15s, + transform 0.15s ease-in-out; } .graphNavButtons a:nth-child(5) { - transition: opacity 0.2s ease-in-out 0.10s, transform 0.15s ease-in-out; + transition: + opacity 0.2s ease-in-out 0.1s, + transform 0.15s ease-in-out; } .graphNavButtons a:nth-child(6) { - transition: opacity 0.2s ease-in-out 0.05s, transform 0.15s ease-in-out; + transition: + opacity 0.2s ease-in-out 0.05s, + transform 0.15s ease-in-out; } .graphNavActions a i { @@ -118,5 +130,5 @@ } .graphNavToggle:checked ~ .graphNavButton i { - transform: rotate(-45deg) + transform: rotate(-45deg); } diff --git a/ap/static/common/css/jsuites.css b/ap/static/common/css/jsuites.css index 450b6e4..07e0868 100644 --- a/ap/static/common/css/jsuites.css +++ b/ap/static/common/css/jsuites.css @@ -1,4 +1,3 @@ - /** * (c) jSuites Javascript Web Components * @@ -10,7 +9,7 @@ */ :root { - --button-color: #298BA8; + --button-color: #298ba8; --active-color: #007aff; } @@ -24,15 +23,15 @@ } .jdragging { - opacity:0.2; + opacity: 0.2; filter: alpha(opacity=20); } .jupload.input { - padding-right:18px; + padding-right: 18px; background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' width='18px' height='18px'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z'/%3E%3C/svg%3E"); - background-position:top 50% right 5px; - background-repeat:no-repeat; + background-position: top 50% right 5px; + background-repeat: no-repeat; box-sizing: border-box; background-size: initial; height: 33px; @@ -42,7 +41,7 @@ .jupload img { width: 100%; -} +} .jupload.input img { width: initial; @@ -88,7 +87,6 @@ filter: alpha(opacity=20); } - /** Animations **/ .fade-in { animation: fade-in 2s forwards; @@ -140,197 +138,276 @@ /** Fadein and Fadeout **/ @keyframes fade-in { - 0% { opacity: 0; } - 100% { opacity: 100; } + 0% { + opacity: 0; + } + 100% { + opacity: 100; + } } @-webkit-keyframes fade-in { - 0% { opacity: 0; } - 100% { opacity: 100; } + 0% { + opacity: 0; + } + 100% { + opacity: 100; + } } @keyframes fade-out { - 0% { opacity: 100; } - 100% { opacity: 0; } + 0% { + opacity: 100; + } + 100% { + opacity: 0; + } } @-webkit-keyframes fade-out { - 0% { opacity: 100; } - 100% { opacity: 0; } + 0% { + opacity: 100; + } + 100% { + opacity: 0; + } } /** Keyframes Left to Right **/ @keyframes slide-left-in { - 0% { left: -100%; } - 100% { left: 0%; } + 0% { + left: -100%; + } + 100% { + left: 0%; + } } @-webkit-keyframes slide-left-in { - 0% { left: -100%; } - 100% { left: 0%; } + 0% { + left: -100%; + } + 100% { + left: 0%; + } } - + @keyframes slide-left-out { - 0% { left: 0%; } - 100% { left: -100%; } + 0% { + left: 0%; + } + 100% { + left: -100%; + } } @-webkit-keyframes slide-left-out { - 0% { left: 0%; } - 100% { left: -100%; } + 0% { + left: 0%; + } + 100% { + left: -100%; + } } /** Keyframes Right to Left **/ @keyframes slide-right-in { - 0% { left: 100%; } - 100% { left: 0%; } + 0% { + left: 100%; + } + 100% { + left: 0%; + } } -@-webkit-keyframes slide-right-in -{ - 0% { left: 100%; } - 100% { left: 0%; } +@-webkit-keyframes slide-right-in { + 0% { + left: 100%; + } + 100% { + left: 0%; + } } - + @keyframes slide-right-out { - 0% { left: 0%; } - 100% { left: 100%; } + 0% { + left: 0%; + } + 100% { + left: 100%; + } } @-webkit-keyframes slide-right-out { - 0% { left: 0%; } - 100% { left: 100%; } + 0% { + left: 0%; + } + 100% { + left: 100%; + } } /** Keyframes Top to Bottom **/ @keyframes slide-top-in { - 0% { transform: translateY(-100%); } - 100% { transform: translateY(0%); } + 0% { + transform: translateY(-100%); + } + 100% { + transform: translateY(0%); + } } @-webkit-keyframes slide-top-in { - 0% { transform: translateY(-100%); } - 100% { -webkit-transform: translateY(0%); } + 0% { + transform: translateY(-100%); + } + 100% { + -webkit-transform: translateY(0%); + } } - + @keyframes slide-top-out { - 0% { transform: translateY(0%); } - 100% { transform: translateY(-100%); } + 0% { + transform: translateY(0%); + } + 100% { + transform: translateY(-100%); + } } @-webkit-keyframes slide-top-out { - 0% { -webkit-transform: translateY(0%); } - 100% { -webkit-transform: translateY(-100%); } + 0% { + -webkit-transform: translateY(0%); + } + 100% { + -webkit-transform: translateY(-100%); + } } /** Keyframes Bottom to Top **/ @keyframes slide-bottom-in { - 0% { transform: translateY(100%); } - 100% { transform: translateY(0%); } + 0% { + transform: translateY(100%); + } + 100% { + transform: translateY(0%); + } } @-webkit-keyframes slide-bottom-in { - 0% { transform: translateY(100%); } - 100% { -webkit-transform: translateY(0%); } + 0% { + transform: translateY(100%); + } + 100% { + -webkit-transform: translateY(0%); + } } - + @keyframes slide-bottom-out { - 0% { transform: translateY(0%); } - 100% { transform: translateY(100%); } + 0% { + transform: translateY(0%); + } + 100% { + transform: translateY(100%); + } } @-webkit-keyframes slide-bottom-out { - 0% { -webkit-transform: translateY(0%); } - 100% { -webkit-transform: translateY(100%); } + 0% { + -webkit-transform: translateY(0%); + } + 100% { + -webkit-transform: translateY(100%); + } } @-webkit-keyframes spin { from { - -webkit-transform:rotate(0deg); + -webkit-transform: rotate(0deg); } to { - -webkit-transform:rotate(360deg); + -webkit-transform: rotate(360deg); } } @keyframes spin { from { - transform:rotate(0deg); + transform: rotate(0deg); } to { - transform:rotate(360deg); + transform: rotate(360deg); } } .jcalendar { - position:absolute; - z-index:9000; - display:none; - box-sizing:border-box; + position: absolute; + z-index: 9000; + display: none; + box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; - -webkit-tap-highlight-color: rgba(0,0,0,0); + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: transparent; - min-width:280px; + min-width: 280px; } .jcalendar.jcalendar-focus { - display:block; + display: block; } .jcalendar .jcalendar-backdrop { - position:fixed; - top:0px; - left:0px; - z-index:9000; - min-width:100%; - min-height:100%; - background-color:rgba(0,0,0,0.5); - border:0px; - padding:0px; - display:none; + position: fixed; + top: 0px; + left: 0px; + z-index: 9000; + min-width: 100%; + min-height: 100%; + background-color: rgba(0, 0, 0, 0.5); + border: 0px; + padding: 0px; + display: none; } .jcalendar .jcalendar-container { - position:relative; - box-sizing:border-box; + position: relative; + box-sizing: border-box; } .jcalendar .jcalendar-content { - position:absolute; - z-index:9001; - -webkit-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.39); - -moz-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.39); - box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.39); - background-color:#fff; + position: absolute; + z-index: 9001; + -webkit-box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.39); + -moz-box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.39); + box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.39); + background-color: #fff; } .jcalendar-header { - text-align:center; + text-align: center; } .jcalendar-header span { - margin-right:4px; - font-size:1.1em; - font-weight:bold; + margin-right: 4px; + font-size: 1.1em; + font-weight: bold; } .jcalendar-prev { - cursor:pointer; - background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z' fill='%23000' /%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3C/svg%3E"); - background-position:center; - background-repeat:no-repeat; + cursor: pointer; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z' fill='%23000' /%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3C/svg%3E"); + background-position: center; + background-repeat: no-repeat; } .jcalendar-next { - cursor:pointer; - background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z' fill='%23000' /%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3C/svg%3E"); - background-position:center; - background-repeat:no-repeat; + cursor: pointer; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z' fill='%23000' /%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3C/svg%3E"); + background-position: center; + background-repeat: no-repeat; } .jcalendar-weekday { @@ -340,89 +417,90 @@ } .jcalendar-table > table { - width:100%; - background-color:#fff; + width: 100%; + background-color: #fff; } .jcalendar-table > table > thead { - cursor:pointer; + cursor: pointer; } .jcalendar-table thead td { - padding:10px; - height:40px; + padding: 10px; + height: 40px; } .jcalendar-table > table > tbody td { - box-sizing:border-box; - cursor:pointer; - padding:9px; - font-size:0.9em; + box-sizing: border-box; + cursor: pointer; + padding: 9px; + font-size: 0.9em; } - .jcalendar-table tfoot td { - padding:10px; + padding: 10px; } -.jcalendar-months td, .jcalendar-years td { - height:24px; -} +.jcalendar-months td, +.jcalendar-years td { + height: 24px; +} .jcalendar-input { - padding-right:18px; - background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='gray'%3E%3Cpath d='M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z'/%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3C/svg%3E"); - background-position:top 50% right 5px; - background-repeat:no-repeat; + padding-right: 18px; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='gray'%3E%3Cpath d='M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z'/%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3C/svg%3E"); + background-position: top 50% right 5px; + background-repeat: no-repeat; box-sizing: border-box; } .jcalendar-done { - -webkit-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.39); - -moz-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.39); - box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.39); - background-color:#fff; + -webkit-box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.39); + -moz-box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.39); + box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.39); + background-color: #fff; } .jcalendar-update { - border:1px solid #ccc; - background-color:#fff; - border-radius:4px; - padding:5px; - width:100%; + border: 1px solid #ccc; + background-color: #fff; + border-radius: 4px; + padding: 5px; + width: 100%; } .jcalendar-container select { - width:55px; - display:inline-block; - border:0px; - padding:4px; - text-align:center; - font-size:1.1em; - user-select:none; - margin-right:10px; + width: 55px; + display: inline-block; + border: 0px; + padding: 4px; + text-align: center; + font-size: 1.1em; + user-select: none; + margin-right: 10px; } .jcalendar-container select:first-child { - margin-right:2px; + margin-right: 2px; } .jcalendar-selected { - background-color:#eee; + background-color: #eee; } -.jcalendar-reset, .jcalendar-confirm { - text-transform:uppercase; - cursor:pointer; +.jcalendar-reset, +.jcalendar-confirm { + text-transform: uppercase; + cursor: pointer; color: var(--active-color); } .jcalendar-controls { - padding:15px; + padding: 15px; -webkit-box-sizing: border-box; box-sizing: border-box; - vertical-align:middle; + vertical-align: middle; display: -webkit-box; display: -moz-box; @@ -432,30 +510,29 @@ -webkit-flex-flow: row wrap; justify-content: space-between; - align-items:center; + align-items: center; } .jcalendar-controls div { - font-weight:bold; + font-weight: bold; } -.jcalendar-fullsize { - position:fixed; - width:100%; - top:0px; - left:0px; +.jcalendar-fullsize { + position: fixed; + width: 100%; + top: 0px; + left: 0px; } -.jcalendar-fullsize .jcalendar-content -{ - position:fixed; - width:100%; - left:0px; - bottom:0px; +.jcalendar-fullsize .jcalendar-content { + position: fixed; + width: 100%; + left: 0px; + bottom: 0px; } .jcalendar-focus.jcalendar-fullsize .jcalendar-backdrop { - display:block; + display: block; } .jcalendar-sunday { @@ -466,10 +543,9 @@ } .jcalendar-time { - display:flex; + display: flex; } - .jcolor { position: absolute; display: none; @@ -477,10 +553,10 @@ } .jcolor-input { - padding-right:18px; + padding-right: 18px; background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' width='18px' height='18px'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9c.83 0 1.5-.67 1.5-1.5 0-.39-.15-.74-.39-1.01-.23-.26-.38-.61-.38-.99 0-.83.67-1.5 1.5-1.5H16c2.76 0 5-2.24 5-5 0-4.42-4.03-8-9-8zm-5.5 9c-.83 0-1.5-.67-1.5-1.5S5.67 9 6.5 9 8 9.67 8 10.5 7.33 12 6.5 12zm3-4C8.67 8 8 7.33 8 6.5S8.67 5 9.5 5s1.5.67 1.5 1.5S10.33 8 9.5 8zm5 0c-.83 0-1.5-.67-1.5-1.5S13.67 5 14.5 5s1.5.67 1.5 1.5S15.33 8 14.5 8zm3 4c-.83 0-1.5-.67-1.5-1.5S16.67 9 17.5 9s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z'/%3E%3C/svg%3E"); - background-position:top 50% right 5px; - background-repeat:no-repeat; + background-position: top 50% right 5px; + background-repeat: no-repeat; box-sizing: border-box; } @@ -490,13 +566,19 @@ z-index: 9000; user-select: none; -webkit-font-smoothing: antialiased; - font-size: .875rem; - letter-spacing: .2px; + font-size: 0.875rem; + letter-spacing: 0.2px; -webkit-border-radius: 4px; border-radius: 4px; - -webkit-box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.2); - box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.2); - background-color:#fff; + -webkit-box-shadow: + 0 8px 10px 1px rgba(0, 0, 0, 0.14), + 0 3px 14px 2px rgba(0, 0, 0, 0.12), + 0 5px 5px -3px rgba(0, 0, 0, 0.2); + box-shadow: + 0 8px 10px 1px rgba(0, 0, 0, 0.14), + 0 3px 14px 2px rgba(0, 0, 0, 0.12), + 0 5px 5px -3px rgba(0, 0, 0, 0.2); + background-color: #fff; box-sizing: border-box; min-width: 260px; } @@ -523,12 +605,12 @@ } .jcolor-focus { - display:block; + display: block; } .jcolor table { - width:100%; - height:100%; + width: 100%; + height: 100%; min-height: 160px; } @@ -537,7 +619,7 @@ } .jcolor-selected { - background-repeat:no-repeat; + background-repeat: no-repeat; background-size: 16px; background-position: center; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z' fill='white'/%3E%3C/svg%3E"); @@ -546,7 +628,7 @@ .jcolor-fullscreen { position: fixed; bottom: 0px; - width:100%; + width: 100%; max-height: 290px; border-radius: 0px; box-sizing: border-box; @@ -554,9 +636,9 @@ .jcolor-fullscreen .jcolor-controls { padding: 15px; - -webkit-box-shadow: 1px 0px 1px 0px rgba(0,0,0,0.39); - -moz-box-shadow: 1px 0px 1px 0px rgba(0,0,0,0.39); - box-shadow: 1px 0px 1px 0px rgba(0,0,0,0.39); + -webkit-box-shadow: 1px 0px 1px 0px rgba(0, 0, 0, 0.39); + -moz-box-shadow: 1px 0px 1px 0px rgba(0, 0, 0, 0.39); + box-shadow: 1px 0px 1px 0px rgba(0, 0, 0, 0.39); } .jcolor-reset { @@ -573,18 +655,18 @@ left: 0px; min-width: 100%; min-height: 100%; - background-color: rgba(0,0,0,0.5); + background-color: rgba(0, 0, 0, 0.5); border: 0px; padding: 0px; z-index: 8000; display: none; - - -webkit-touch-callout: none; /* iOS Safari */ + + -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ - -khtml-user-select: none; /* Konqueror HTML */ - -moz-user-select: none; /* Firefox */ - -ms-user-select: none; /* Internet Explorer/Edge */ - user-select: none; /* Non-prefixed version, currently + -khtml-user-select: none; /* Konqueror HTML */ + -moz-user-select: none; /* Firefox */ + -ms-user-select: none; /* Internet Explorer/Edge */ + user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */ } @@ -724,9 +806,9 @@ } .jcontextmenu { - position:fixed; - z-index:10000; - background:#fff; + position: fixed; + z-index: 10000; + background: #fff; color: #555; font-size: 11px; -webkit-user-select: none; @@ -735,17 +817,17 @@ -webkit-box-shadow: 2px 2px 2px 0px rgba(143, 144, 145, 1); -moz-box-shadow: 2px 2px 2px 0px rgba(143, 144, 145, 1); box-shadow: 2px 2px 2px 0px rgba(143, 144, 145, 1); - border: 1px solid #C6C6C6; + border: 1px solid #c6c6c6; padding: 0px; - padding-top:4px; - padding-bottom:4px; - margin:0px; - outline:none; - display:none; + padding-top: 4px; + padding-bottom: 4px; + margin: 0px; + outline: none; + display: none; } .jcontextmenu.jcontextmenu-focus { - display:inline-block; + display: inline-block; } .jcontextmenu > div { @@ -756,7 +838,7 @@ position: relative; cursor: default; font-size: 11px; - font-family:sans-serif; + font-family: sans-serif; } .jcontextmenu > div::before { @@ -785,7 +867,7 @@ } .jcontextmenu > div span { - margin-right:10px; + margin-right: 10px; } .jcontextmenu .jcontextmenu-disabled a { @@ -799,8 +881,8 @@ .jcontextmenu hr { border: 1px solid #e9e9e9; border-bottom: 0; - margin-top:5px; - margin-bottom:5px; + margin-top: 5px; + margin-bottom: 5px; } .jcontextmenu > hr:hover { @@ -808,22 +890,22 @@ } .jcontextmenu .jcontextmenu { - top: 4px; - left: 99%; - opacity: 0; - position: absolute; + top: 4px; + left: 99%; + opacity: 0; + position: absolute; } .jcontextmenu > div:hover > .jcontextmenu { - display: block; - opacity: 1; - -webkit-transform: translate(0, 0) scale(1); - transform: translate(0, 0) scale(1); - pointer-events: auto; + display: block; + opacity: 1; + -webkit-transform: translate(0, 0) scale(1); + transform: translate(0, 0) scale(1); + pointer-events: auto; } .jdropdown { - cursor:pointer; + cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; @@ -831,108 +913,100 @@ -ms-user-select: none; user-select: none; box-sizing: border-box; - background:#fff; + background: #fff; -webkit-tap-highlight-color: transparent; display: inline-block; } .jdropdown-header::placeholder { - color:#000; + color: #000; } .jdropdown-backdrop { - position:fixed; - top:0px; - left:0px; - min-width:100%; - min-height:100%; - background-color:rgba(0,0,0,0.5); - border:0px; - padding:0px; - z-index:8000; - display:none; + position: fixed; + top: 0px; + left: 0px; + min-width: 100%; + min-height: 100%; + background-color: rgba(0, 0, 0, 0.5); + border: 0px; + padding: 0px; + z-index: 8000; + display: none; } .jdropdown-focus { - position:relative; + position: relative; } .jdropdown-focus .jdropdown-container { - transform: translate3d(0,0,0); + transform: translate3d(0, 0, 0); } .jdropdown-default.jdropdown-focus .jdropdown-header { - outline:auto 5px -webkit-focus-ring-color; + outline: auto 5px -webkit-focus-ring-color; } .jdropdown-default.jdropdown-focus .jdropdown-header.jdropdown-add { background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='gray' width='24px' height='24px'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10h-4v4h-2v-4H7v-2h4V7h2v4h4v2z'/%3E%3C/svg%3E"); } -.jdropdown-container-header -{ - padding:0px; - margin:0px; - position:relative; +.jdropdown-container-header { + padding: 0px; + margin: 0px; + position: relative; } -.jdropdown-header -{ - width:100%; +.jdropdown-header { + width: 100%; appearance: none; background-repeat: no-repeat; - background-position:top 50% right 5px; + background-position: top 50% right 5px; background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath d='M7 10l5 5 5-5H7z' fill='gray'/%3E%3C/svg%3E"); text-overflow: ellipsis; - cursor:pointer; + cursor: pointer; box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; - padding-right:30px !important; + padding-right: 30px !important; } -.jdropdown-insert-button -{ +.jdropdown-insert-button { font-size: 1.4em; text-transform: uppercase; - position:absolute; + position: absolute; right: 30px; top: 4px; - display:none; + display: none; } -.jdropdown-container -{ +.jdropdown-container { min-width: inherit; - transform: translate3d(-10000px,0,0); - position:absolute; - z-index:9001; + transform: translate3d(-10000px, 0, 0); + position: absolute; + z-index: 9001; } -.jdropdown-close -{ - display:none; - font-size:1em; +.jdropdown-close { + display: none; + font-size: 1em; color: var(--active-color); - text-transform:uppercase; - text-align:right; - padding:15px; - font-weight:bold; + text-transform: uppercase; + text-align: right; + padding: 15px; + font-weight: bold; } -.jdropdown-content -{ - min-width:inherit; - margin:0px; - box-sizing:border-box; +.jdropdown-content { + min-width: inherit; + margin: 0px; + box-sizing: border-box; } -.jdropdown-content:empty -{ +.jdropdown-content:empty { } -.jdropdown-item -{ +.jdropdown-item { white-space: nowrap; text-align: left; text-overflow: ellipsis; @@ -942,29 +1016,25 @@ align-items: center; } -.jdropdown-description -{ +.jdropdown-description { text-overflow: ellipsis; overflow: hidden; line-height: 1.5em; } -.jdropdown-image -{ - margin-right:10px; +.jdropdown-image { + margin-right: 10px; width: 32px; height: 32px; - border-radius:20px; + border-radius: 20px; } -.jdropdown-image-small -{ - width:24px; - height:24px; +.jdropdown-image-small { + width: 24px; + height: 24px; } -.jdropdown-title -{ +.jdropdown-title { font-size: 0.7em; text-overflow: ellipsis; overflow-x: hidden; @@ -973,72 +1043,65 @@ /** Default visual **/ -.jdropdown-default .jdropdown-header -{ - border:1px solid #ccc; - padding:5px; - padding-left:10px; - padding-right:16px; +.jdropdown-default .jdropdown-header { + border: 1px solid #ccc; + padding: 5px; + padding-left: 10px; + padding-right: 16px; } -.jdropdown-default .jdropdown-container -{ - background-color:#fff; +.jdropdown-default .jdropdown-container { + background-color: #fff; } .jdropdown-default.jdropdown-focus.jdropdown-insert .jdropdown-header { - padding-right:50px; + padding-right: 50px; } .jdropdown-default.jdropdown-focus.jdropdown-insert .jdropdown-insert-button { - display:block; + display: block; } -.jdropdown-default .jdropdown-content -{ - min-width:inherit; - border:1px solid #8fb1e3; - margin:0px; - background-color:#fff; - box-sizing:border-box; - min-height:10px; - max-height:215px; - overflow-y:auto; +.jdropdown-default .jdropdown-content { + min-width: inherit; + border: 1px solid #8fb1e3; + margin: 0px; + background-color: #fff; + box-sizing: border-box; + min-height: 10px; + max-height: 215px; + overflow-y: auto; } -.jdropdown-default .jdropdown-item -{ - padding:4px; - padding-left:8px; - padding-right:40px; +.jdropdown-default .jdropdown-item { + padding: 4px; + padding-left: 8px; + padding-right: 40px; } -.jdropdown-default .jdropdown-item:hover -{ - background-color:#1f93ff; - color:#fff; +.jdropdown-default .jdropdown-item:hover { + background-color: #1f93ff; + color: #fff; } -.jdropdown-default .jdropdown-cursor -{ - background-color:#eee; +.jdropdown-default .jdropdown-cursor { + background-color: #eee; } -.jdropdown-default .jdropdown-selected -{ +.jdropdown-default .jdropdown-selected { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIiAvPjxwYXRoIGQ9Ik05IDE2LjE3TDQuODMgMTJsLTEuNDIgMS40MUw5IDE5IDIxIDdsLTEuNDEtMS40MXoiIGZpbGw9IndoaXRlIiAvPjwvc3ZnPgo='); - background-repeat:no-repeat; - background-position:top 50% right 5px; - background-color:#1f93ff; - color:#fff; + background-repeat: no-repeat; + background-position: top 50% right 5px; + background-color: #1f93ff; + color: #fff; } .jdropdown-default .jdropdown-group { - margin-top:5px; + margin-top: 5px; } .jdropdown-default .jdropdown-group .jdropdown-item { - padding-left:16px; + padding-left: 16px; } .jdropdown-default .jdropdown-group-name { @@ -1048,134 +1111,124 @@ } .jdropdown-default .jdropdown-reset_ { - content:'x'; - position:absolute; - top:0; - right:0; - margin:5px; - margin-right:10px; - font-size:12px; - width:12px; - cursor:pointer; + content: 'x'; + position: absolute; + top: 0; + right: 0; + margin: 5px; + margin-right: 10px; + font-size: 12px; + width: 12px; + cursor: pointer; text-shadow: 0px 0px 5px #fff; - display:none; + display: none; line-height: 1.8em; } .jdropdown-default.jdropdown-focus .jdropdown-reset_ { - display:block; + display: block; } /** Default render for mobile **/ .jdropdown-picker.jdropdown-focus .jdropdown-backdrop { - display:block; + display: block; } .jdropdown-picker .jdropdown-header { outline: none; } -.jdropdown-picker .jdropdown-container -{ - position:fixed; - bottom:0px; - left:0px; - border-bottom:1px solid #e6e6e8; - width:100%; - background-color:#fff; +.jdropdown-picker .jdropdown-container { + position: fixed; + bottom: 0px; + left: 0px; + border-bottom: 1px solid #e6e6e8; + width: 100%; + background-color: #fff; box-sizing: border-box; } -.jdropdown-picker .jdropdown-close -{ - -webkit-box-shadow: 0px -1px 5px 0px rgba(0,0,0,0.39); - -moz-box-shadow: 0px -1px 5px 0px rgba(0,0,0,0.39); - box-shadow: 0px -1px 5px 0px rgba(0,0,0,0.39); - background-color:#fff; - display:block; +.jdropdown-picker .jdropdown-close { + -webkit-box-shadow: 0px -1px 5px 0px rgba(0, 0, 0, 0.39); + -moz-box-shadow: 0px -1px 5px 0px rgba(0, 0, 0, 0.39); + box-shadow: 0px -1px 5px 0px rgba(0, 0, 0, 0.39); + background-color: #fff; + display: block; } -.jdropdown-picker .jdropdown-content -{ - overflow-y:scroll; - height:280px; - background-color:#fafafa; - border-top:1px solid #e6e6e8; +.jdropdown-picker .jdropdown-content { + overflow-y: scroll; + height: 280px; + background-color: #fafafa; + border-top: 1px solid #e6e6e8; } -.jdropdown-picker .jdropdown-group-name -{ +.jdropdown-picker .jdropdown-group-name { font-size: 1em; text-transform: uppercase; - padding-top:10px; - padding-bottom:10px; + padding-top: 10px; + padding-bottom: 10px; display: block; border-bottom: 1px solid #e6e6e8; - padding-left:20px; - padding-right:20px; - text-align:center; - font-weight:bold; + padding-left: 20px; + padding-right: 20px; + text-align: center; + font-weight: bold; } -.jdropdown-picker .jdropdown-item -{ +.jdropdown-picker .jdropdown-item { font-size: 1em; text-transform: uppercase; - padding-top:10px; - padding-bottom:10px; + padding-top: 10px; + padding-bottom: 10px; border-bottom: 1px solid #e6e6e8; - padding-left:20px; - padding-right:20px; + padding-left: 20px; + padding-right: 20px; } -.jdropdown-picker .jdropdown-selected -{ +.jdropdown-picker .jdropdown-selected { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIiAvPjxwYXRoIGQ9Ik05IDE2LjE3TDQuODMgMTJsLTEuNDIgMS40MUw5IDE5IDIxIDdsLTEuNDEtMS40MXoiIGZpbGw9IndoaXRlIiAvPjwvc3ZnPgo='); - background-repeat:no-repeat; - background-position:top 50% right 15px; - background-color:#1f93ff; - color:#fff; + background-repeat: no-repeat; + background-position: top 50% right 15px; + background-color: #1f93ff; + color: #fff; } -.jdropdown-picker .jdropdown-cursor -{ - background-color:#1f93ff; - color:#fff; +.jdropdown-picker .jdropdown-cursor { + background-color: #1f93ff; + color: #fff; } /** Default render for mobile searchbar **/ -.jdropdown-searchbar.jdropdown-focus -{ - position:fixed; - top:0px !important; - left:0px !important; - width:100% !important; - height:100% !important; - background-color:#fafafa; - padding:0px; - z-index:9001; - overflow-y:scroll; +.jdropdown-searchbar.jdropdown-focus { + position: fixed; + top: 0px !important; + left: 0px !important; + width: 100% !important; + height: 100% !important; + background-color: #fafafa; + padding: 0px; + z-index: 9001; + overflow-y: scroll; will-change: scroll-position; -webkit-overflow-scrolling: touch; } -.jdropdown-searchbar.jdropdown-focus .jdropdown-container-header -{ +.jdropdown-searchbar.jdropdown-focus .jdropdown-container-header { position: fixed; top: 0px; left: 0px; z-index: 9002; - padding:10px; - background-color:#fff; - box-shadow: 0 1px 2px rgba(0,0,0,.1); + padding: 10px; + background-color: #fff; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); max-height: 24px; width: 100%; } -.jdropdown-searchbar.jdropdown-focus .jdropdown-header -{ +.jdropdown-searchbar.jdropdown-focus .jdropdown-header { border: 0px; background-repeat: no-repeat; background-position-x: 0%; @@ -1185,76 +1238,66 @@ padding-right: 60px !important; } -.jdropdown-searchbar.jdropdown-focus .jdropdown-close -{ - display:block; +.jdropdown-searchbar.jdropdown-focus .jdropdown-close { + display: block; } .jdropdown-searchbar .jdropdown-header { outline: none; } -.jdropdown-searchbar .jdropdown-container -{ +.jdropdown-searchbar .jdropdown-container { margin-top: 40px; - width:100%; + width: 100%; } -.jdropdown-searchbar .jdropdown-close -{ - position:fixed; - top:0px; - right:0px; +.jdropdown-searchbar .jdropdown-close { + position: fixed; + top: 0px; + right: 0px; } -.jdropdown-searchbar .jdropdown-content -{ - margin-top:10px; +.jdropdown-searchbar .jdropdown-content { + margin-top: 10px; } -.jdropdown-searchbar .jdropdown-group -{ - margin-top:10px; - margin-bottom:15px; - background-color:#fff; +.jdropdown-searchbar .jdropdown-group { + margin-top: 10px; + margin-bottom: 15px; + background-color: #fff; } -.jdropdown-searchbar .jdropdown-group-name -{ +.jdropdown-searchbar .jdropdown-group-name { border-top: 1px solid #e6e6e8; border-bottom: 1px solid #e6e6e8; - padding:10px; - padding-left:12px; - font-weight:bold; + padding: 10px; + padding-left: 12px; + font-weight: bold; } -.jdropdown-searchbar .jdropdown-group-arrow -{ - float:right; - width:24px; - height:24px; - background-repeat:no-repeat; +.jdropdown-searchbar .jdropdown-group-arrow { + float: right; + width: 24px; + height: 24px; + background-repeat: no-repeat; } -.jdropdown-searchbar .jdropdown-group-arrow-down -{ +.jdropdown-searchbar .jdropdown-group-arrow-down { background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNNy40MSA4LjU5TDEyIDEzLjE3bDQuNTktNC41OEwxOCAxMGwtNiA2LTYtNiAxLjQxLTEuNDF6Ii8+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgyNHYyNEgwVjB6Ii8+PC9zdmc+); } -.jdropdown-searchbar .jdropdown-group-arrow-up -{ +.jdropdown-searchbar .jdropdown-group-arrow-up { background-image: url(data:image/svg+xml;base64,CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTcuNDEgMTUuNDFMMTIgMTAuODNsNC41OSA0LjU4TDE4IDE0bC02LTYtNiA2eiIvPjxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz48L3N2Zz4=); } -.jdropdown-searchbar .jdropdown-item -{ - padding-top:10px; - padding-bottom:10px; +.jdropdown-searchbar .jdropdown-item { + padding-top: 10px; + padding-bottom: 10px; border-bottom: 1px solid #e6e6e8; - padding-left:15px; - padding-right:40px; - background-color:#fff; - font-size:0.9em; + padding-left: 15px; + padding-right: 40px; + background-color: #fff; + font-size: 0.9em; } .jdropdown-searchbar .jdropdown-description { @@ -1263,74 +1306,64 @@ max-width: calc(100% - 20px); } -.jdropdown-searchbar .jdropdown-content > .jdropdown-item:first-child -{ +.jdropdown-searchbar .jdropdown-content > .jdropdown-item:first-child { border-top: 1px solid #e6e6e8; } -.jdropdown-searchbar .jdropdown-selected -{ +.jdropdown-searchbar .jdropdown-selected { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTkgMTYuMTdMNC44MyAxMmwtMS40MiAxLjQxTDkgMTkgMjEgN2wtMS40MS0xLjQxeiIgZmlsbD0iIzAwN2FmZiIvPjwvc3ZnPg=='); - background-repeat:no-repeat; - background-position:top 50% right 15px; + background-repeat: no-repeat; + background-position: top 50% right 15px; } /** List render **/ -.jdropdown-list -{ +.jdropdown-list { } -.jdropdown-list .jdropdown-container -{ - display:block; +.jdropdown-list .jdropdown-container { + display: block; } -.jdropdown-list .jdropdown-header -{ - display:none; +.jdropdown-list .jdropdown-header { + display: none; } -.jdropdown-list .jdropdown-group -{ - background-color:#fff; +.jdropdown-list .jdropdown-group { + background-color: #fff; } -.jdropdown-list .jdropdown-group-name -{ +.jdropdown-list .jdropdown-group-name { border-bottom: 1px solid #e6e6e8; - padding-top:10px; - padding-bottom:10px; - font-weight:bold; + padding-top: 10px; + padding-bottom: 10px; + font-weight: bold; } -.jdropdown-list .jdropdown-item -{ - padding-top:10px; - padding-bottom:10px; +.jdropdown-list .jdropdown-item { + padding-top: 10px; + padding-bottom: 10px; border-bottom: 1px solid #e6e6e8; - padding-left:10px; - padding-right:40px; - background-color:#fff; + padding-left: 10px; + padding-right: 40px; + background-color: #fff; } -.jdropdown-list .jdropdown-selected -{ +.jdropdown-list .jdropdown-selected { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTkgMTYuMTdMNC44MyAxMmwtMS40MiAxLjQxTDkgMTkgMjEgN2wtMS40MS0xLjQxeiIgZmlsbD0iIzAwN2FmZiIvPjwvc3ZnPg=='); - background-repeat:no-repeat; - background-position:top 50% right 10px; + background-repeat: no-repeat; + background-position: top 50% right 10px; } -@media only screen and (max-width : 800px) -{ +@media only screen and (max-width: 800px) { .jdropdown-list { - width:100% !important; - border:0px; - padding:0px; + width: 100% !important; + border: 0px; + padding: 0px; } .jdropdown-list .jdropdown-container { - min-width:100%; + min-width: 100%; } .jdropdown-searchbar.jdropdown-focus .jdropdown-description { @@ -1339,7 +1372,7 @@ } .app .jdropdown-item { - text-transform:uppercase; + text-transform: uppercase; } .jdropdown-create-container { @@ -1364,37 +1397,36 @@ } .jeditor-container { - border:1px solid #ccc; + border: 1px solid #ccc; box-sizing: border-box; } .jeditor-dragging { - border:1px dashed #000; + border: 1px dashed #000; } .jeditor-container.jeditor-padding { - padding:10px; + padding: 10px; } .jeditor { - outline:none; + outline: none; word-break: break-word; - } .jeditor-container.jeditor-padding .jeditor { - min-height:100px; - margin-bottom:10px; - padding:10px; + min-height: 100px; + margin-bottom: 10px; + padding: 10px; } /** Snippet **/ .jsnippet { - margin-top:15px; - cursor:pointer; + margin-top: 15px; + cursor: pointer; border: 1px solid #ccc; - position:relative; + position: relative; } .jsnippet:focus { @@ -1402,30 +1434,30 @@ } .jsnippet img { - width:100%; + width: 100%; } .jsnippet .jsnippet-title { - padding:15px; - font-size:1.4em; + padding: 15px; + font-size: 1.4em; } .jsnippet .jsnippet-description { - padding-left:15px; - padding-right:15px; - font-size:1em; + padding-left: 15px; + padding-right: 15px; + font-size: 1em; } .jsnippet .jsnippet-host { - padding:15px; - text-transform:uppercase; - font-size:0.8em; - color:#777; - text-align:right; + padding: 15px; + text-transform: uppercase; + font-size: 0.8em; + color: #777; + text-align: right; } .jsnippet .jsnippet-url { - display:none; + display: none; } .jeditor .jsnippet:after { @@ -1456,7 +1488,7 @@ } .jeditor img { - border:2px solid transparent; + border: 2px solid transparent; box-sizing: border-box; } @@ -1474,93 +1506,91 @@ } .jeditor img:focus { - border:2px solid #0096FD; - outline: #0096FD; + border: 2px solid #0096fd; + outline: #0096fd; } .jeditor .pdf { background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512;' xml:space='preserve'%3E%3Cpath style='fill:%23C30B15;' d='M511.344,274.266C511.77,268.231,512,262.143,512,256C512,114.615,397.385,0,256,0S0,114.615,0,256 c0,117.769,79.53,216.949,187.809,246.801L511.344,274.266z'/%3E%3Cpath style='fill:%2385080E;' d='M511.344,274.266L314.991,77.913L119.096,434.087l68.714,68.714C209.522,508.787,232.385,512,256,512 C391.243,512,501.976,407.125,511.344,274.266z'/%3E%3Cpolygon style='fill:%23FFFFFF;' points='278.328,333.913 255.711,77.913 119.096,77.913 119.096,311.652 '/%3E%3Cpolygon style='fill:%23E8E6E6;' points='392.904,311.652 392.904,155.826 337.252,133.565 314.991,77.913 255.711,77.913 256.067,333.913 '/%3E%3Cpolygon style='fill:%23FFFFFF;' points='314.991,155.826 314.991,77.913 392.904,155.826 '/%3E%3Crect x='119.096' y='311.652' style='fill:%23FC0F1A;' width='273.809' height='122.435'/%3E%3Cg%3E%3Cpath style='fill:%23FFFFFF;' d='M204.871,346.387c13.547,0,21.341,6.659,21.341,18.465c0,12.412-7.795,19.601-21.341,19.601h-9.611 v14.909h-13.471v-52.975L204.871,346.387L204.871,346.387z M195.26,373.858h8.93c5.904,0,9.308-2.952,9.308-8.552 c0-5.525-3.406-8.324-9.308-8.324h-8.93V373.858z'/%3E%3Cpath style='fill:%23FFFFFF;' d='M257.928,346.387c16.649,0,28.152,10.746,28.152,26.487c0,15.666-11.655,26.488-28.683,26.488 h-22.25v-52.975H257.928z M248.619,388.615h9.611c8.249,0,14.151-6.357,14.151-15.665c0-9.384-6.205-15.817-14.757-15.817h-9.006 V388.615z'/%3E%3Cpath style='fill:%23FFFFFF;' d='M308.563,356.982v12.26h23.763v10.596h-23.763v19.525h-13.471v-52.975h39.277v10.595h-25.806 V356.982z'/%3E%3C/g%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-size: cover; - width:60px; - height:60px; + width: 60px; + height: 60px; } - .jloading { - position:fixed; - z-index:10001; - width:100%; - left:0; - right:0; - top:0; - bottom:0; - background-color: rgba(0,0,0,0.7); + position: fixed; + z-index: 10001; + width: 100%; + left: 0; + right: 0; + top: 0; + bottom: 0; + background-color: rgba(0, 0, 0, 0.7); } .jloading::after { - content:''; - display:block; - margin:0 auto; - margin-top:50vh; - width:40px; - height:40px; - border-style:solid; - border-color:white; - border-top-color:transparent; - border-width:4px; - border-radius:50%; - -webkit-animation: spin .8s linear infinite; - animation: spin .8s linear infinite; + content: ''; + display: block; + margin: 0 auto; + margin-top: 50vh; + width: 40px; + height: 40px; + border-style: solid; + border-color: white; + border-top-color: transparent; + border-width: 4px; + border-radius: 50%; + -webkit-animation: spin 0.8s linear infinite; + animation: spin 0.8s linear infinite; } .jloading.spin { - background-color:transparent; + background-color: transparent; } .jloading.spin::after { - margin:0 auto; - margin-top:80px; - border-color:#aaa; - border-top-color:transparent; + margin: 0 auto; + margin-top: 80px; + border-color: #aaa; + border-top-color: transparent; } - .jmodal { - position:fixed; - top:50%; - left:50%; - width:60%; - height:60%; - -webkit-box-shadow: 0 2px 10px rgba(0,0,0,.2); - -moz-box-shadow: 0 2px 10px rgba(0,0,0,.2); - border:1px solid #ccc; - background-color:#fff; + position: fixed; + top: 50%; + left: 50%; + width: 60%; + height: 60%; + -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); + -moz-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); + border: 1px solid #ccc; + background-color: #fff; transform: translate(-50%, -50%); box-sizing: border-box; - padding-top:50px !important; - z-index:9002; + padding-top: 50px !important; + z-index: 9002; border-radius: 8px; } .jmodal:before { - position:absolute; - top:0; - left:0; - width:100%; - content:attr(title); - padding:15px; + position: absolute; + top: 0; + left: 0; + width: 100%; + content: attr(title); + padding: 15px; box-sizing: border-box; - font-size:1.2em; - box-shadow: 1px 1px 3px rgba(0,0,0,.2); + font-size: 1.2em; + box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); background-color: #fff; border-radius: 8px 8px 0px 0px; } .jmodal_content { - padding:20px; - overflow-y:auto; - max-height:100%; + padding: 20px; + overflow-y: auto; + max-height: 100%; box-sizing: border-box; height: -webkit-fill-available; } @@ -1569,20 +1599,20 @@ } .jmodal.no-title:before { - display:none; + display: none; } .jmodal:after { - content:''; + content: ''; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E"); - position:absolute; - top:0; - right:0; - margin:14px; - font-size:24px; - width:24px; - height:24px; - cursor:pointer; + position: absolute; + top: 0; + right: 0; + margin: 14px; + font-size: 24px; + width: 24px; + height: 24px; + cursor: pointer; text-shadow: 0px 0px 5px #fff; } @@ -1595,29 +1625,27 @@ border-radius: 0px; } - .jmodal_backdrop { position: fixed; top: 0px; left: 0px; min-width: 100%; min-height: 100%; - background-color: rgba(0,0,0,0.5); + background-color: rgba(0, 0, 0, 0.5); border: 0px; padding: 0px; z-index: 8000; display: none; - -webkit-touch-callout: none; /* iOS Safari */ + -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ - -khtml-user-select: none; /* Konqueror HTML */ - -moz-user-select: none; /* Firefox */ - -ms-user-select: none; /* Internet Explorer/Edge */ - user-select: none; /* Non-prefixed version, currently + -khtml-user-select: none; /* Konqueror HTML */ + -moz-user-select: none; /* Firefox */ + -ms-user-select: none; /* Internet Explorer/Edge */ + user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */ } - .jnotification { position: fixed; z-index: 10000; @@ -1634,8 +1662,12 @@ border-radius: 8px; background-color: #000; - background: rgba(92,92,92,1); - background: linear-gradient(0deg, rgba(92,92,92,1) 0%, rgba(77,77,77,1) 100%); + background: rgba(92, 92, 92, 1); + background: linear-gradient( + 0deg, + rgba(92, 92, 92, 1) 0%, + rgba(77, 77, 77, 1) 100% + ); color: #fff; width: 320px; margin: 30px; @@ -1684,8 +1716,12 @@ } .jnotification-error .jnotification-container { - background: rgb(182,38,6); - background: linear-gradient(0deg, rgba(170,41,13,1) 0%, rgba(149,11,11,1) 100%); + background: rgb(182, 38, 6); + background: linear-gradient( + 0deg, + rgba(170, 41, 13, 1) 0%, + rgba(149, 11, 11, 1) 100% + ); } @media (max-width: 800px) { @@ -1694,14 +1730,14 @@ width: 100%; } .jnotification-container { - background: rgba(255,255,255,0.95); + background: rgba(255, 255, 255, 0.95); border: 1px solid #eee; color: #444; margin: 0px; width: initial; } .jnotification-error .jnotification-container { - background: rgba(255,255,255,0.95); + background: rgba(255, 255, 255, 0.95); color: #790909; } .jnotification-close { @@ -1761,7 +1797,10 @@ .jpicker-content { position: absolute; display: none; - box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.2); + box-shadow: + 0 4px 5px 0 rgba(0, 0, 0, 0.14), + 0 1px 10px 0 rgba(0, 0, 0, 0.12), + 0 2px 4px -1px rgba(0, 0, 0, 0.2); border-radius: 4px; background-color: #fff; padding: 4px; @@ -1772,7 +1811,6 @@ scrollbar-color: #333 transparent; } - .jpicker-content::-webkit-scrollbar { width: 8px; } @@ -1796,14 +1834,15 @@ } .jpicker-content > div:hover { - background-color:#efefef; + background-color: #efefef; } .jpicker-content > div:empty { opacity: 0; } -.jpicker-header > i, .jpicker-header > div { +.jpicker-header > i, +.jpicker-header > div { display: block; } @@ -1813,10 +1852,8 @@ flex-wrap: wrap; } - -.jprogressbar -{ - cursor:pointer; +.jprogressbar { + cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; @@ -1824,25 +1861,24 @@ -ms-user-select: none; user-select: none; box-sizing: border-box; - background:#fff; + background: #fff; -webkit-tap-highlight-color: transparent; display: inline-block; box-sizing: border-box; - cursor:pointer; - border:1px solid #ccc; - position:relative; + cursor: pointer; + border: 1px solid #ccc; + position: relative; } .jprogressbar::before { - content:attr(data-value); - position:absolute; - margin:5px; - margin-left:10px; + content: attr(data-value); + position: absolute; + margin: 5px; + margin-left: 10px; } -.jprogressbar-header::placeholder -{ - color:#000; +.jprogressbar-header::placeholder { + color: #000; } .jprogressbar::focus { @@ -1853,16 +1889,16 @@ background-color: #eee; background-color: red; box-sizing: border-box; - height:31px; + height: 31px; } .jrating { - display:flex; + display: flex; } .jrating > div { - width:24px; - height:24px; - line-height:24px; + width: 24px; + height: 24px; + line-height: 24px; background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M22 9.24l-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z' fill='gray'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E"); } @@ -1875,7 +1911,6 @@ background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='red'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E"); } - .jsearch { position: relative; display: none; @@ -1887,19 +1922,21 @@ .jsearch_container { position: absolute; - box-shadow: 0 1px 2px 0 rgba(60,64,67,0.302), 0 2px 6px 2px rgba(60,64,67,0.149); + box-shadow: + 0 1px 2px 0 rgba(60, 64, 67, 0.302), + 0 2px 6px 2px rgba(60, 64, 67, 0.149); border: none; -webkit-border-radius: 4px; border-radius: 4px; width: 280px; padding: 8px 0; - -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.2); - box-shadow: 0 2px 4px rgba(0,0,0,0.2); - -webkit-transition: opacity .218s; - transition: opacity .218s; + -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); + -webkit-transition: opacity 0.218s; + transition: opacity 0.218s; background: #fff; - border: 1px solid rgba(0,0,0,.2); + border: 1px solid rgba(0, 0, 0, 0.2); cursor: pointer; margin: 0; min-width: 300px; @@ -1925,7 +1962,7 @@ user-select: none; -webkit-align-items: center; align-items: center; - + -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; @@ -1978,7 +2015,7 @@ position: fixed; left: 15px; top: 50%; - content:'arrow_back_ios'; + content: 'arrow_back_ios'; color: #fff; width: 30px; height: 30px; @@ -2005,30 +2042,30 @@ } .jslider-close { - width:24px; - height:24px; + width: 24px; + height: 24px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E"); - position:fixed; - top:15px; - right:15px; - cursor:pointer; - z-index:3000; + position: fixed; + top: 15px; + right: 15px; + cursor: pointer; + z-index: 3000; } .jslider-counter { - height:24px; + height: 24px; background-color: transparent; - position:fixed; + position: fixed; left: 50%; transform: translateX(-50%); bottom: 15px; - cursor:pointer; - z-index:3000; + cursor: pointer; + z-index: 3000; display: flex; display: -webkit-flex; -webkit-justify-content: center; - -webkit-align-items: center; + -webkit-align-items: center; -webkit-flex-direction: row; justify-content: center; align-items: center; @@ -2041,10 +2078,10 @@ text-overflow: ellipsis; white-space: nowrap; overflow: hidden; - top:15px; + top: 15px; left: 15px; - z-index:3000; - color: #FFF; + z-index: 3000; + color: #fff; font-size: 1rem; } @@ -2062,19 +2099,19 @@ } .jslider-focus { - position:fixed; - left:0; - top:0; + position: fixed; + left: 0; + top: 0; width: 100%; - min-height:100%; - max-height:100%; - z-index:2000; - margin:0px; - box-sizing:border-box; - - background-color:rgba(0,0,0,0.8); - -webkit-transition-duration: .05s; - transition-duration: .05s; + min-height: 100%; + max-height: 100%; + z-index: 2000; + margin: 0px; + box-sizing: border-box; + + background-color: rgba(0, 0, 0, 0.8); + -webkit-transition-duration: 0.05s; + transition-duration: 0.05s; display: flex; -ms-flex-align: center; -webkit-align-items: center; @@ -2087,9 +2124,9 @@ width: 50vw; height: auto; box-sizing: border-box; - margin:0 auto; - vertical-align:middle; - display:none; + margin: 0 auto; + vertical-align: middle; + display: none; } .jslider-focus img.jslider-vertical { @@ -2127,9 +2164,9 @@ } .jslider-grid[data-total]:after { - content: attr(data-total) "+"; + content: attr(data-total) '+'; font-size: 1.5em; - position:absolute; + position: absolute; color: #fff; right: 15px; bottom: 6px; @@ -2205,7 +2242,6 @@ display: block; } - .jtabs { max-width: 100vw; position: relative; @@ -2287,8 +2323,8 @@ height: 2px; background-color: #888; transform-origin: left; - transition: all .2s cubic-bezier(0.4,0,0.2,1); - transition-property: color,left,transform; + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + transition-property: color, left, transform; display: none; } @@ -2343,7 +2379,7 @@ background-color: #fff; } -.jtabs.jtabs-modern .jtabs-headers > .jtabs-selected { +.jtabs.jtabs-modern .jtabs-headers > .jtabs-selected { color: #000; } @@ -2352,17 +2388,17 @@ } .jtabs .jtabs-headers { - font-size: .9rem; + font-size: 0.9rem; } .jtabs.jtabs-modern .jtabs-headers { - background: #EEEEEF !important; + background: #eeeeef !important; padding: 2px; border-radius: 4px; } .jtabs.jtabs-modern .jtabs-headers .jtabs-border { - border-color: #EEEEEF !important; + border-color: #eeeeef !important; } .jtabs.jtabs-modern .jtabs-border { @@ -2380,13 +2416,13 @@ justify-content: flex-start; padding: 2px; border: 1px solid #ccc; -} +} .jtags.jtags-empty:not(.jtags-focus)::before { position: absolute; margin: 5px; color: #ccc; - content:attr(data-placeholder); + content: attr(data-placeholder); } .jtags > div { @@ -2401,7 +2437,7 @@ } .jtags > div:empty:before { - content: " "; + content: ' '; white-space: pre; } @@ -2426,7 +2462,7 @@ } .jtags_error::after { - color: #fff !important; + color: #fff !important; } .jtags_error { @@ -2434,11 +2470,13 @@ color: #fff; } - .jtoolbar-container { border-radius: 2px; margin-bottom: 5px; - box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.2); + box-shadow: + 0 4px 5px 0 rgba(0, 0, 0, 0.14), + 0 1px 10px 0 rgba(0, 0, 0, 0.12), + 0 2px 4px -1px rgba(0, 0, 0, 0.2); display: inline-flex !important; } @@ -2446,7 +2484,7 @@ cursor: pointer; white-space: nowrap; display: flex; - padding:4px; + padding: 4px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; @@ -2455,7 +2493,7 @@ .jtoolbar-mobile { display: flex; - position:fixed; + position: fixed; bottom: 0; margin: 0; left: 0; @@ -2463,7 +2501,7 @@ background: #f7f7f8; z-index: 1; box-sizing: border-box; - box-shadow: 0 -1px 2px rgba(0,0,0,.1); + box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.1); border-radius: 0px; } @@ -2471,7 +2509,7 @@ display: inline-flex; align-items: center; box-sizing: border-box; - vertical-align:middle; + vertical-align: middle; justify-content: space-evenly; } @@ -2485,13 +2523,13 @@ text-align: center; margin: auto; padding: 2px; - padding-left:4px; - padding-right:4px; + padding-left: 4px; + padding-right: 4px; } .jtoolbar-mobile .jtoolbar-item { - flex:1; -} + flex: 1; +} .jtoolbar .jtoolbar-divisor { width: 2px; @@ -2502,27 +2540,27 @@ background-color: #f2f2f2; } - -.jtoolbar-mobile a -{ - text-decoration:none; - display:inline-block; +.jtoolbar-mobile a { + text-decoration: none; + display: inline-block; } .jtoolbar-mobile i { display: inline-flex !important; - color:#929292; + color: #929292; } .jtoolbar-mobile span { - font-size:0.7em; - display:block; - color:#929292; + font-size: 0.7em; + display: block; + color: #929292; } -.jtoolbar-mobile .jtoolbar-selected a, .jtoolbar-mobile .jtoolbar-selected i, .jtoolbar-mobile .jtoolbar-selected span { - color:var(--active-color) !important; - background-color:transparent; +.jtoolbar-mobile .jtoolbar-selected a, +.jtoolbar-mobile .jtoolbar-selected i, +.jtoolbar-mobile .jtoolbar-selected span { + color: var(--active-color) !important; + background-color: transparent; } .jtoolbar-item { @@ -2534,17 +2572,16 @@ .jtoolbar-item i { display: block; - color:#333; + color: #333; } .jtoolbar-item:hover { - background-color:#f2f2f2; + background-color: #f2f2f2; } - .jtoolbar .jpicker { - padding-left:0px; - padding-right:0px; + padding-left: 0px; + padding-right: 0px; } .jtoolbar .jpicker-header { @@ -2563,7 +2600,7 @@ } .jtoolbar-active { - background-color:#eee; + background-color: #eee; } .jtoolbar .fa { @@ -2595,7 +2632,10 @@ .jtoolbar-floating { position: absolute; display: none; - box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.2); + box-shadow: + 0 4px 5px 0 rgba(0, 0, 0, 0.14), + 0 1px 10px 0 rgba(0, 0, 0, 0.12), + 0 2px 4px -1px rgba(0, 0, 0, 0.2); border-radius: 4px; background-color: #fff; padding: 4px; @@ -2610,5 +2650,3 @@ .jtoolbar-arrow-selected .jtoolbar-floating { display: block; } - - diff --git a/ap/static/common/css/jump_function.css b/ap/static/common/css/jump_function.css index 26e4eba..714c6e2 100644 --- a/ap/static/common/css/jump_function.css +++ b/ap/static/common/css/jump_function.css @@ -6,7 +6,7 @@ } .jump-page-list, -.jump-sensor-list{ +.jump-sensor-list { width: calc(100% / 2 - 20px); } @@ -32,7 +32,7 @@ .jump-list { display: grid; grid-template-columns: repeat(2, 1fr); - gap: 5px + gap: 5px; } .jump-list .tile-content { @@ -117,4 +117,10 @@ #jumpModal .alert strong { font-size: large; -} \ No newline at end of file +} + +.jump-options-area { + display: flex; + flex-direction: column; + gap: 4px; +} diff --git a/ap/static/common/css/main.css b/ap/static/common/css/main.css index 8b68470..3c2979c 100644 --- a/ap/static/common/css/main.css +++ b/ap/static/common/css/main.css @@ -13,7 +13,9 @@ header.green-header { background-color: rgb(55, 127, 64) !important; } -p.modal-inform, label.modal-inform, .modal-confirm .modal-body { +p.modal-inform, +label.modal-inform, +.modal-confirm .modal-body { color: #999; font-size: 1rem; } @@ -113,7 +115,7 @@ a:focus { } #sidebar ul li.active > a, -a[aria-expanded="true"] { +a[aria-expanded='true'] { color: #fff; /* background: #6d7fcc; */ } @@ -128,7 +130,6 @@ a[aria-expanded="true"] { font-size: 14px; } - .sidebar-body { max-height: calc(100% - 100px); overflow-y: auto; @@ -158,7 +159,7 @@ span.sidebar-btm { cursor: pointer; } -a[data-toggle="collapse"] { +a[data-toggle='collapse'] { position: relative; } @@ -190,7 +191,7 @@ ul.CTAs a { a.download { background: #fff; - color: #7386D5; + color: #7386d5; } a.article, @@ -251,7 +252,7 @@ a.article:hover { } #select-language + span.select2-container { - width: 100%!important; + width: 100% !important; } .copyright { @@ -276,7 +277,8 @@ a.article:hover { border: 1px solid #303030; } -.fs-open, .fs-wrap:focus { +.fs-open, +.fs-wrap:focus { border: 1px solid #739ac2; border-radius: 4px; outline: 0; @@ -305,12 +307,15 @@ a.article:hover { border: 1px solid #222222 !important; } -.fs-dropdown, .fs-search input { +.fs-dropdown, +.fs-search input { background-color: #222222 !important; color: #ffffff !important; } -.fs-option, .fs-search, .fs-optgroup-label { +.fs-option, +.fs-search, +.fs-optgroup-label { border-bottom: 1px solid #303030 !important; } @@ -318,7 +323,6 @@ a.article:hover { background-color: rgb(55, 90, 127, 1) !important; } - .close-icon { cursor: pointer; text-align: right; @@ -342,7 +346,8 @@ a.article:hover { font-size: 1.75rem; } -hr, br { +hr, +br { border-top: 2px solid rgb(68, 68, 68); } @@ -356,7 +361,6 @@ hr, br { .error-msg { color: red; - } @keyframes rotate { @@ -385,12 +389,12 @@ hr, br { right: 0; bottom: 0; left: 0; - background: rgba(0, 0, 0, .5); + background: rgba(0, 0, 0, 0.5); z-index: 999; } .loading::before { - content: ""; + content: ''; display: block; position: fixed; left: 50%; @@ -404,7 +408,7 @@ hr, br { } .loading::after { - content: ""; + content: ''; display: block; position: fixed; left: 50%; @@ -414,7 +418,7 @@ hr, br { border-radius: 40px; margin-top: -10px; margin-left: -10px; - border: 4px solid #60ABB9; + border: 4px solid #60abb9; border-right: 4px solid white; animation: rotate 1s infinite linear; } @@ -449,7 +453,8 @@ ul#visnMn li a { width: 20%; } -.th-lg, .td-lg { +.th-lg, +.td-lg { width: 30%; } @@ -457,7 +462,8 @@ ul#visnMn li a { width: 60%; } -.card-xl, .th-xl { +.card-xl, +.th-xl { width: 45%; } @@ -485,7 +491,7 @@ ul#visnMn li a { } .status-i.yellow { - color: #F39C12; + color: #f39c12; } .srtPrc .custom-control-label::before, @@ -503,7 +509,6 @@ ul#visnMn li a { color: #fff !important; } - #toast-container > .toast-error, #toast-container > .toast-warning, #toast-container > .toast-info { @@ -520,7 +525,8 @@ ul#visnMn li a { text-transform: uppercase; } -.toast-title, .toast-message a { +.toast-title, +.toast-message a { text-decoration: underline !important; } @@ -560,11 +566,11 @@ ul#visnMn li a { } .blue-color + .select2-container--default .select2-selection--single { - background-color: rgb(40, 65, 92)!important; + background-color: rgb(40, 65, 92) !important; } .select2-container--default .select2-selection--single { - background-color: #222!important; + background-color: #222 !important; } .select2-results { @@ -573,7 +579,7 @@ ul#visnMn li a { border: 1px solid #676767; } -.select2-container--default .select2-results__option[aria-selected=true] { +.select2-container--default .select2-results__option[aria-selected='true'] { background-color: #29f !important; } @@ -585,7 +591,9 @@ ul#visnMn li a { /* background-color: #2299ff !important;*/ /*}*/ -.select2-container--default .select2-selection--single .select2-selection__rendered { +.select2-container--default + .select2-selection--single + .select2-selection__rendered { color: #fff !important; } @@ -594,11 +602,14 @@ ul#visnMn li a { border: 1px solid #222 !important; } -.select2-container--default.select2-container--focus .select2-selection--multiple { +.select2-container--default.select2-container--focus + .select2-selection--multiple { border: 1px solid #222 !important; } -.select2-container--default .select2-selection--multiple .select2-selection__choice { +.select2-container--default + .select2-selection--multiple + .select2-selection__choice { background-color: #222 !important; } @@ -630,7 +641,6 @@ textarea { color: #ffffff !important; } - .select2-container { display: block; } @@ -640,7 +650,7 @@ textarea { border: 1px solid #222; } -.select2-container--default .select2-results__option[aria-selected=true] { +.select2-container--default .select2-results__option[aria-selected='true'] { background-color: #5897fb; } @@ -649,18 +659,28 @@ textarea { border: 1px solid #222222; } -.select2-container--default .select2-selection--single .select2-selection__rendered { +.select2-container--default + .select2-selection--single + .select2-selection__rendered { color: #ffffff; line-height: 34px; padding-right: 0; } -.select2-container--default .select2-selection--single .select2-selection__arrow { +.select2-container--default + .select2-selection--single + .select2-selection__arrow { height: 32px; } -.select2-container--default .select2-selection--single .select2-selection__arrow b, -.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { +.select2-container--default + .select2-selection--single + .select2-selection__arrow + b, +.select2-container--default.select2-container--open + .select2-selection--single + .select2-selection__arrow + b { border-width: 6px 3px 0 3px; margin-left: -1px; border-color: #ffffff transparent transparent transparent; @@ -680,7 +700,8 @@ textarea { /*padding-left: 1rem !important;*/ } -.table th, .table td { +.table th, +.table td { vertical-align: middle !important; } @@ -698,19 +719,19 @@ textarea { #tblConfig_machine td, #tblConfigpartno th, #tblConfigpartno td, -form[name=otherFilter] th, -form[name=otherFilter] td, +form[name='otherFilter'] th, +form[name='otherFilter'] td, #tblVisualConfig th, -#tblVisualConfig td -{ +#tblVisualConfig td { padding: 2px !important; } -#tblVisualConfig tbody td -{ +#tblVisualConfig tbody td { position: static; } -.select2-container--default .select2-selection--single .select2-selection__clear { +.select2-container--default + .select2-selection--single + .select2-selection__clear { color: white; height: 34px; } @@ -719,7 +740,6 @@ form[name=otherFilter] td, margin-top: 5px; } - /* for collapse configs page */ .collapse-box { margin: 0 10px; @@ -873,12 +893,12 @@ footer { } .download-timeout::after { - content: ""; + content: ''; display: block; width: 25px; height: 25px; border-radius: 25px; - border: 3px solid #60ABB9; + border: 3px solid #60abb9; border-right: 3px solid white; animation: rotate 1s infinite linear; } @@ -916,7 +936,6 @@ footer { display: block; } - .index-inform-content, .setting-inform-content, #dp-info-content { @@ -1233,14 +1252,17 @@ body { top: 0; z-index: 10; box-shadow: inset 0 1px 0 #444; - background-color: #303030!important; + background-color: #303030 !important; } .table-fixed thead tr { - box-shadow: inset 0 1px 0 #444, inset 0 -1px 0 #444; + box-shadow: + inset 0 1px 0 #444, + inset 0 -1px 0 #444; } -.invalid, .invalid + .select2.select2-container { +.invalid, +.invalid + .select2.select2-container { border: 2px solid #65c5f1 !important; border-radius: 3px !important; } @@ -1366,8 +1388,8 @@ input.primary:checked + .slider { right: 0; bottom: 0; background-color: #434343; - -webkit-transition: .4s; - transition: .4s; + -webkit-transition: 0.4s; + transition: 0.4s; } input:checked + .slider:before { @@ -1381,7 +1403,7 @@ input:disabled + .slider:before { } input:disabled + .slider { - background-color: #434343!important; + background-color: #434343 !important; } .slider.round:before { @@ -1390,14 +1412,14 @@ input:disabled + .slider { .slider:before { position: absolute; - content: ""; + content: ''; height: 28px; width: 28px; left: 0px; bottom: 0px; background-color: white; - -webkit-transition: .4s; - transition: .4s; + -webkit-transition: 0.4s; + transition: 0.4s; -webkit-transform: translateX(28px); -ms-transform: translateX(28px); transform: translateX(28px); @@ -1557,7 +1579,6 @@ input:disabled + .slider { width: 20px; } - /* marquee START */ .sidebar-marquee { background-color: #303030; @@ -1582,11 +1603,11 @@ input:disabled + .slider { } .marquee.warn { - background-color: #F39C12; + background-color: #f39c12; } .marquee.error { - background-color: #F31515; + background-color: #f31515; } .marquee p { @@ -1713,7 +1734,6 @@ input:disabled + .slider { border-right: 1px solid #cccccc; } - .table-condensed thead tr:last-child th { border-bottom: 1px solid #cccccc; } @@ -1872,7 +1892,7 @@ input:disabled + .slider { } .table-responsive::-webkit-scrollbar-button:vertical:single-button:increment:hover { - border-color: #777777 transparent transparent transparent; + border-color: #777777 transparent transparent transparent; } .table-responsive::-webkit-scrollbar-button:horizontal:single-button { @@ -1894,8 +1914,8 @@ input:disabled + .slider { } :is(*):not(html, body)::-webkit-scrollbar-thumb { - box-shadow: inset 0 0 6px rgba(0, 0, 0, .3); - -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3); + box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); + -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #222222; width: 100px; border-radius: 25px; @@ -1903,8 +1923,8 @@ input:disabled + .slider { :is(*):not(html, body)::-webkit-scrollbar-corner { background-color: #444 !important; - box-shadow: inset 0 0 6px rgba(0, 0, 0, .3) !important; - -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3) !important; + box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3) !important; + -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3) !important; } /* Input Search deletion icon styles */ @@ -2111,30 +2131,31 @@ span.deleteicon input { animation: load8 1.1s infinite linear; } -.loader, .loader:after { +.loader, +.loader:after { border-radius: 50%; width: 25px; height: 25px; } @-webkit-keyframes load8 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - 100% { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); - } + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } } @keyframes load8 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - 100% { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); - } + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } } .daterangepicker-loading { @@ -2160,7 +2181,7 @@ span.deleteicon input { width: 29px; } -.table-hover-light tbody tr:hover{ +.table-hover-light tbody tr:hover { outline: thin solid white !important; } table.table-hover-light { @@ -2169,15 +2190,15 @@ table.table-hover-light { } .paginationjs-nav.J-paginationjs-nav { - margin-left: 4px!important; - line-height: unset!important; + margin-left: 4px !important; + line-height: unset !important; height: 22px; } .paginationjs .paginationjs-pages li > a { - min-width: 20px!important; - height: 22px!important; - display: flex!important; + min-width: 20px !important; + height: 22px !important; + display: flex !important; align-items: center; justify-content: center; } @@ -2192,7 +2213,8 @@ table.table-hover-light { animation: blinker 3s linear infinite; } -.tschart-title span, .chm-card-title span { +.tschart-title span, +.chm-card-title span { overflow: hidden; text-overflow: ellipsis; display: inline-block; @@ -2219,8 +2241,8 @@ table.table-hover-light { } .paginationjs .paginationjs-pages li.disabled > a:hover { - background-color: #eee!important; - color: #333!important; + background-color: #eee !important; + color: #333 !important; } #copyClipboardContent { @@ -2237,17 +2259,17 @@ table.table-hover-light { border-right: 12px solid transparent; border-top: 12px solid #444444; float: left; - -webkit-transition: -webkit-transform .8s ease-in-out; - -moz-transition: -moz-transform .8s ease-in-out; - -o-transition: -o-transform .8s ease-in-out; - transition: transform .8s ease-in-out; + -webkit-transition: -webkit-transform 0.8s ease-in-out; + -moz-transition: -moz-transform 0.8s ease-in-out; + -o-transition: -o-transform 0.8s ease-in-out; + transition: transform 0.8s ease-in-out; } .btn-collapse.collapsed { - transform:rotate(-90deg); - -ms-transform:rotate(-90deg); - -webkit-transform:rotate(-90deg); - -o-transform:rotate(-90deg); + transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + -webkit-transform: rotate(-90deg); + -o-transform: rotate(-90deg); } .user-setting-btn { @@ -2258,12 +2280,15 @@ table.table-hover-light { #cols-variance-tbl-multiple-range { display: none; } -#cols-variance-tbl, #cols-variance-tbl-multiple-range { +#cols-variance-tbl, +#cols-variance-tbl-multiple-range { text-align: center; width: 100%; } -#cols-variance-tbl th, #cols-variance-tbl td, -#cols-variance-tbl-multiple-range th, #cols-variance-tbl-multiple-range td { +#cols-variance-tbl th, +#cols-variance-tbl td, +#cols-variance-tbl-multiple-range th, +#cols-variance-tbl-multiple-range td { border: 1px solid #949494; } @@ -2273,12 +2298,12 @@ table.table-hover-light { } @media (max-width: 1510px) { - .mr-median-3, .mx-median-3 { + .mr-median-3, + .mx-median-3 { margin-right: 1rem !important; } } - .endColOrderTable th { padding: 5px; } @@ -2314,7 +2339,7 @@ label.checkbox-all-label h6 { .type-item { width: 55px; min-width: 55px; - flex-basis: unset!important; + flex-basis: unset !important; flex-grow: unset; } @@ -2329,17 +2354,28 @@ label.checkbox-all-label h6 { } .col.fit-item > span.select2.select2-container.select2-container--default, .col.fit-item > .select2-container .select2-selection--single, -.col.fit-item > .select2-container--default .select2-selection--single .select2-selection__clear -{ +.col.fit-item + > .select2-container--default + .select2-selection--single + .select2-selection__clear { height: 26px !important; } -.col.fit-item > .select2-container--default .select2-selection--single .select2-selection__rendered { +.col.fit-item + > .select2-container--default + .select2-selection--single + .select2-selection__rendered { line-height: 26px !important; } -.col.fit-item > .select2-container--default .select2-selection--single .select2-selection__arrow { +.col.fit-item + > .select2-container--default + .select2-selection--single + .select2-selection__arrow { height: 28px !important; } -.col.fit-item > .select2-container--default .select2-selection--single .select2-selection__placeholder { +.col.fit-item + > .select2-container--default + .select2-selection--single + .select2-selection__placeholder { margin-left: -10px; font-size: 12px; } @@ -2351,11 +2387,11 @@ label.checkbox-all-label h6 { } .single-check-box:before { - left: 0!important; + left: 0 !important; } .single-check-box:after { - left: 0!important; + left: 0 !important; } .scroll-body { @@ -2416,7 +2452,7 @@ svg.svg-inline--fa.fa-circle-right { .dn-custom-select--select:after { position: absolute; - content: ""; + content: ''; top: 14px; right: 10px; width: 0; @@ -2429,13 +2465,13 @@ svg.svg-inline--fa.fa-circle-right { border-color: #fff transparent transparent transparent; } - .dn-custom-select--select--list div { line-height: 1; - padding: 2px 4px!important; + padding: 2px 4px !important; } -.dn-custom-select--select--list div, .dn-custom-select--select { +.dn-custom-select--select--list div, +.dn-custom-select--select { color: #ffffff; padding: 4px 8px; border: 1px solid transparent; @@ -2484,4 +2520,4 @@ svg.svg-inline--fa.fa-circle-right { #jumpSensorTbl .custom-control.custom-radio { padding: 0 0 0 30px; -} \ No newline at end of file +} diff --git a/ap/static/common/css/multi_level_dropdown.css b/ap/static/common/css/multi_level_dropdown.css new file mode 100644 index 0000000..522ad50 --- /dev/null +++ b/ap/static/common/css/multi_level_dropdown.css @@ -0,0 +1,63 @@ +.multi-level-dropdown > button { + width: 100% !important; + text-align: inherit; + position: sticky; +} + +.multi-level-dropdown li { + min-height: 1.7em; +} + +.multi-level-dropdown li[disabled='disabled'] { + pointer-events: none; +} + +.multi-level-dropdown li:not([disabled='disabled']):hover, +.multi-level-dropdown li.selected { + background: cornflowerblue !important; +} + +.multi-level-dropdown li:hover li, +.multi-level-dropdown li.selected li { + background: unset; +} + +.multi-level-dropdown > .dropdown-menu { + margin-top: 1.9em; +} + +.multi-level-dropdown > .dropdown-menu[x-placement='bottom-start'] { + margin-top: unset; +} + +.multi-level-dropdown .dropdown-menu > li > a { + padding-left: 1em; + display: block; + width: 100%; +} + +.multi-level-dropdown .dropdown-submenu { + position: relative; +} + +.multi-level-dropdown .dropdown-submenu .dropdown-menu { + top: 0 !important; + left: 100% !important; + margin-top: -1px !important; +} + +.multi-level-dropdown .dropdown-submenu .dropdown-menu > li > span { + padding-left: 1em !important; +} + +.multi-level-dropdown .dropdown-submenu > span::after { + content: '»' !important; + float: right !important; + padding-right: 0 !important; +} + +.multi-level-dropdown > button { + width: 100% !important; + text-align: inherit; + position: sticky; +} diff --git a/ap/static/common/css/pagination.css b/ap/static/common/css/pagination.css index ed20b40..b47832c 100644 --- a/ap/static/common/css/pagination.css +++ b/ap/static/common/css/pagination.css @@ -1,37 +1,40 @@ .paginationjs { line-height: 1.6; - font-family: Marmelad, "Lucida Grande", Arial, "Hiragino Sans GB", Georgia, sans-serif; + font-family: Marmelad, 'Lucida Grande', Arial, 'Hiragino Sans GB', Georgia, + sans-serif; font-size: 14px; - box-sizing: initial + box-sizing: initial; } .paginationjs:after { display: table; - content: " "; - clear: both + content: ' '; + clear: both; } .paginationjs .paginationjs-pages { - float: left + float: left; } .paginationjs .paginationjs-pages ul { float: left; margin: 0; - padding: 0 + padding: 0; } -.paginationjs .paginationjs-go-button, .paginationjs .paginationjs-go-input, .paginationjs .paginationjs-nav { +.paginationjs .paginationjs-go-button, +.paginationjs .paginationjs-go-input, +.paginationjs .paginationjs-nav { float: left; margin-left: 10px; - font-size: 14px + font-size: 14px; } .paginationjs .paginationjs-pages li { float: left; border: 1px solid #aaa; border-right: none; - list-style: none + list-style: none; } .paginationjs .paginationjs-pages li > a { @@ -43,46 +46,47 @@ font-size: 14px; color: #333; text-decoration: none; - text-align: center + text-align: center; } .paginationjs .paginationjs-pages li > a:hover { - background: #eee + background: #eee; } .paginationjs .paginationjs-pages li.active { - border: none + border: none; } .paginationjs .paginationjs-pages li.active > a { height: 30px; line-height: 30px; background: #aaa; - color: #fff + color: #fff; } .paginationjs .paginationjs-pages li.disabled > a { - opacity: .3 + opacity: 0.3; } .paginationjs .paginationjs-pages li.disabled > a:hover { - background: 0 0 + background: 0 0; } -.paginationjs .paginationjs-pages li:first-child, .paginationjs .paginationjs-pages li:first-child > a { - border-radius: 3px 0 0 3px +.paginationjs .paginationjs-pages li:first-child, +.paginationjs .paginationjs-pages li:first-child > a { + border-radius: 3px 0 0 3px; } .paginationjs .paginationjs-pages li:last-child { border-right: 1px solid #aaa; - border-radius: 0 3px 3px 0 + border-radius: 0 3px 3px 0; } .paginationjs .paginationjs-pages li:last-child > a { - border-radius: 0 3px 3px 0 + border-radius: 0 3px 3px 0; } -.paginationjs .paginationjs-go-input > input[type=text] { +.paginationjs .paginationjs-go-input > input[type='text'] { width: 30px; height: 28px; background: #fff; @@ -94,10 +98,10 @@ vertical-align: baseline; outline: 0; box-shadow: none; - box-sizing: initial + box-sizing: initial; } -.paginationjs .paginationjs-go-button > input[type=button] { +.paginationjs .paginationjs-go-button > input[type='button'] { min-width: 40px; height: 30px; line-height: 28px; @@ -112,248 +116,288 @@ box-shadow: none; color: #333; cursor: pointer; - vertical-align: middle \9 + vertical-align: middle \9; } -.paginationjs.paginationjs-theme-blue .paginationjs-go-input > input[type=text], .paginationjs.paginationjs-theme-blue .paginationjs-pages li { - border-color: #289de9 +.paginationjs.paginationjs-theme-blue + .paginationjs-go-input + > input[type='text'], +.paginationjs.paginationjs-theme-blue .paginationjs-pages li { + border-color: #289de9; } -.paginationjs .paginationjs-go-button > input[type=button]:hover { - background-color: #f8f8f8 +.paginationjs .paginationjs-go-button > input[type='button']:hover { + background-color: #f8f8f8; } .paginationjs .paginationjs-nav { height: 30px; - line-height: 30px + line-height: 30px; } -.paginationjs .paginationjs-go-button, .paginationjs .paginationjs-go-input { - margin-left: 5px \9 +.paginationjs .paginationjs-go-button, +.paginationjs .paginationjs-go-input { + margin-left: 5px \9; } .paginationjs.paginationjs-small { - font-size: 12px + font-size: 12px; } .paginationjs.paginationjs-small .paginationjs-pages li > a { min-width: 26px; height: 24px; line-height: 24px; - font-size: 12px + font-size: 12px; } .paginationjs.paginationjs-small .paginationjs-pages li.active > a { height: 26px; - line-height: 26px + line-height: 26px; } .paginationjs.paginationjs-small .paginationjs-go-input { - font-size: 12px + font-size: 12px; } -.paginationjs.paginationjs-small .paginationjs-go-input > input[type=text] { +.paginationjs.paginationjs-small .paginationjs-go-input > input[type='text'] { width: 26px; height: 24px; - font-size: 12px + font-size: 12px; } .paginationjs.paginationjs-small .paginationjs-go-button { - font-size: 12px + font-size: 12px; } -.paginationjs.paginationjs-small .paginationjs-go-button > input[type=button] { +.paginationjs.paginationjs-small + .paginationjs-go-button + > input[type='button'] { min-width: 30px; height: 26px; line-height: 24px; padding: 0 6px; - font-size: 12px + font-size: 12px; } .paginationjs.paginationjs-small .paginationjs-nav { height: 26px; line-height: 26px; - font-size: 12px + font-size: 12px; } .paginationjs.paginationjs-big { - font-size: 16px + font-size: 16px; } .paginationjs.paginationjs-big .paginationjs-pages li > a { min-width: 36px; height: 34px; line-height: 34px; - font-size: 16px + font-size: 16px; } .paginationjs.paginationjs-big .paginationjs-pages li.active > a { height: 36px; - line-height: 36px + line-height: 36px; } .paginationjs.paginationjs-big .paginationjs-go-input { - font-size: 16px + font-size: 16px; } -.paginationjs.paginationjs-big .paginationjs-go-input > input[type=text] { +.paginationjs.paginationjs-big .paginationjs-go-input > input[type='text'] { width: 36px; height: 34px; - font-size: 16px + font-size: 16px; } .paginationjs.paginationjs-big .paginationjs-go-button { - font-size: 16px + font-size: 16px; } -.paginationjs.paginationjs-big .paginationjs-go-button > input[type=button] { +.paginationjs.paginationjs-big .paginationjs-go-button > input[type='button'] { min-width: 50px; height: 36px; line-height: 34px; padding: 0 12px; - font-size: 16px + font-size: 16px; } .paginationjs.paginationjs-big .paginationjs-nav { height: 36px; line-height: 36px; - font-size: 16px + font-size: 16px; } .paginationjs.paginationjs-theme-blue .paginationjs-pages li > a { - color: #289de9 + color: #289de9; } .paginationjs.paginationjs-theme-blue .paginationjs-pages li > a:hover { - background: #e9f4fc + background: #e9f4fc; } .paginationjs.paginationjs-theme-blue .paginationjs-pages li.active > a { background: #289de9; - color: #fff + color: #fff; } -.paginationjs.paginationjs-theme-blue .paginationjs-pages li.disabled > a:hover { - background: 0 0 +.paginationjs.paginationjs-theme-blue + .paginationjs-pages + li.disabled + > a:hover { + background: 0 0; } -.paginationjs.paginationjs-theme-blue .paginationjs-go-button > input[type=button] { +.paginationjs.paginationjs-theme-blue + .paginationjs-go-button + > input[type='button'] { background: #289de9; border-color: #289de9; - color: #fff + color: #fff; } -.paginationjs.paginationjs-theme-green .paginationjs-go-input > input[type=text], .paginationjs.paginationjs-theme-green .paginationjs-pages li { - border-color: #449d44 +.paginationjs.paginationjs-theme-green + .paginationjs-go-input + > input[type='text'], +.paginationjs.paginationjs-theme-green .paginationjs-pages li { + border-color: #449d44; } -.paginationjs.paginationjs-theme-blue .paginationjs-go-button > input[type=button]:hover { - background-color: #3ca5ea +.paginationjs.paginationjs-theme-blue + .paginationjs-go-button + > input[type='button']:hover { + background-color: #3ca5ea; } .paginationjs.paginationjs-theme-green .paginationjs-pages li > a { - color: #449d44 + color: #449d44; } .paginationjs.paginationjs-theme-green .paginationjs-pages li > a:hover { - background: #ebf4eb + background: #ebf4eb; } .paginationjs.paginationjs-theme-green .paginationjs-pages li.active > a { background: #449d44; - color: #fff + color: #fff; } -.paginationjs.paginationjs-theme-green .paginationjs-pages li.disabled > a:hover { - background: 0 0 +.paginationjs.paginationjs-theme-green + .paginationjs-pages + li.disabled + > a:hover { + background: 0 0; } -.paginationjs.paginationjs-theme-green .paginationjs-go-button > input[type=button] { +.paginationjs.paginationjs-theme-green + .paginationjs-go-button + > input[type='button'] { background: #449d44; border-color: #449d44; - color: #fff + color: #fff; } -.paginationjs.paginationjs-theme-yellow .paginationjs-go-input > input[type=text], .paginationjs.paginationjs-theme-yellow .paginationjs-pages li { - border-color: #ec971f +.paginationjs.paginationjs-theme-yellow + .paginationjs-go-input + > input[type='text'], +.paginationjs.paginationjs-theme-yellow .paginationjs-pages li { + border-color: #ec971f; } -.paginationjs.paginationjs-theme-green .paginationjs-go-button > input[type=button]:hover { - background-color: #55a555 +.paginationjs.paginationjs-theme-green + .paginationjs-go-button + > input[type='button']:hover { + background-color: #55a555; } .paginationjs.paginationjs-theme-yellow .paginationjs-pages li > a { - color: #ec971f + color: #ec971f; } .paginationjs.paginationjs-theme-yellow .paginationjs-pages li > a:hover { - background: #fdf5e9 + background: #fdf5e9; } .paginationjs.paginationjs-theme-yellow .paginationjs-pages li.active > a { background: #ec971f; - color: #fff + color: #fff; } -.paginationjs.paginationjs-theme-yellow .paginationjs-pages li.disabled > a:hover { - background: 0 0 +.paginationjs.paginationjs-theme-yellow + .paginationjs-pages + li.disabled + > a:hover { + background: 0 0; } -.paginationjs.paginationjs-theme-yellow .paginationjs-go-button > input[type=button] { +.paginationjs.paginationjs-theme-yellow + .paginationjs-go-button + > input[type='button'] { background: #ec971f; border-color: #ec971f; - color: #fff + color: #fff; } -.paginationjs.paginationjs-theme-red .paginationjs-go-input > input[type=text], .paginationjs.paginationjs-theme-red .paginationjs-pages li { - border-color: #c9302c +.paginationjs.paginationjs-theme-red + .paginationjs-go-input + > input[type='text'], +.paginationjs.paginationjs-theme-red .paginationjs-pages li { + border-color: #c9302c; } -.paginationjs.paginationjs-theme-yellow .paginationjs-go-button > input[type=button]:hover { - background-color: #eea135 +.paginationjs.paginationjs-theme-yellow + .paginationjs-go-button + > input[type='button']:hover { + background-color: #eea135; } .paginationjs.paginationjs-theme-red .paginationjs-pages li > a { - color: #c9302c + color: #c9302c; } .paginationjs.paginationjs-theme-red .paginationjs-pages li > a:hover { - background: #faeaea + background: #faeaea; } .paginationjs.paginationjs-theme-red .paginationjs-pages li.active > a { background: #c9302c; - color: #fff + color: #fff; } .paginationjs.paginationjs-theme-red .paginationjs-pages li.disabled > a:hover { - background: 0 0 + background: 0 0; } -.paginationjs.paginationjs-theme-red .paginationjs-go-button > input[type=button] { +.paginationjs.paginationjs-theme-red + .paginationjs-go-button + > input[type='button'] { background: #c9302c; border-color: #c9302c; - color: #fff + color: #fff; } -.paginationjs.paginationjs-theme-red .paginationjs-go-button > input[type=button]:hover { - background-color: #ce4541 +.paginationjs.paginationjs-theme-red + .paginationjs-go-button + > input[type='button']:hover { + background-color: #ce4541; } .paginationjs .paginationjs-pages li.paginationjs-next { - border-right: 1px solid #aaa \9 + border-right: 1px solid #aaa \9; } -.paginationjs .paginationjs-go-input > input[type=text] { +.paginationjs .paginationjs-go-input > input[type='text'] { line-height: 28px \9; - vertical-align: middle \9 + vertical-align: middle \9; } .paginationjs.paginationjs-big .paginationjs-pages li > a { - line-height: 36px \9 + line-height: 36px \9; } -.paginationjs.paginationjs-big .paginationjs-go-input > input[type=text] { +.paginationjs.paginationjs-big .paginationjs-go-input > input[type='text'] { height: 36px \9; - line-height: 36px \9 -} \ No newline at end of file + line-height: 36px \9; +} diff --git a/ap/static/common/css/shepherd.css b/ap/static/common/css/shepherd.css index a34bcf0..9b2fd20 100644 --- a/ap/static/common/css/shepherd.css +++ b/ap/static/common/css/shepherd.css @@ -1,5 +1,5 @@ .shepherd-button { - margin-right: .5rem; + margin-right: 0.5rem; min-width: 40px; } .shepherd-hint-text { @@ -12,32 +12,32 @@ border-bottom-right-radius: 5px; display: flex; flex-direction: row; - justify-content: center + justify-content: center; /* padding: 0 .75rem .75rem */ } .shepherd-footer .shepherd-button:last-child { - margin-right: 0 + margin-right: 0; } .shepherd-cancel-icon { background: transparent; border: none; - color: hsla(0, 0%, 50%, .75); + color: hsla(0, 0%, 50%, 0.75); cursor: pointer; font-size: 1.40625rem; font-weight: bold; padding: 0; - transition: color .5s ease; + transition: color 0.5s ease; margin: -30px -10px 0 0; } .shepherd-cancel-icon:hover { - color: rgba(0, 0, 0, .75) + color: rgba(0, 0, 0, 0.75); } .shepherd-has-title .shepherd-content .shepherd-cancel-icon { - color: hsla(0, 0%, 50%, .75) + color: hsla(0, 0%, 50%, 0.75); } .shepherd-has-title .shepherd-content .shepherd-cancel-icon:hover { @@ -52,7 +52,7 @@ font-size: 1.40625rem; font-weight: 400; margin: 0; - padding: 0 + padding: 0; } .shepherd-header { @@ -62,64 +62,66 @@ display: flex; justify-content: flex-end; line-height: 2em; - padding: .75rem .75rem 0; - margin: 0px 0px + padding: 0.75rem 0.75rem 0; + margin: 0px 0px; } .shepherd-has-title .shepherd-content .shepherd-header { /* background: #e6e6e6; */ background: #303030; - padding: 1em + padding: 1em; } .shepherd-text { /* color: rgba(0, 0, 0, .75); */ font-size: 1rem; line-height: 1.5; - padding: .75em; + padding: 0.75em; border-top: 1px solid #444; border-bottom: 1px solid #444; color: #999; } .shepherd-text p { - margin-top: 0 + margin-top: 0; } .shepherd-text p:last-child { - margin-bottom: 0 + margin-bottom: 0; } .shepherd-content { border-radius: 5px; outline: none; padding: 0; - font-family: Calibri Light + font-family: Calibri Light; } .shepherd-element { background: #303030; border-radius: 5px; border: 1px solid #444; - box-shadow: 0 1px 4px rgba(0, 0, 0, .2); + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); max-width: 500px; opacity: 0; outline: none; - transition: opacity .3s, visibility .3s; - visibility: hidden; + transition: + opacity 0.3s, + visibility 0.3s; + visibility: hidden; width: 100%; - z-index: 9999 + z-index: 9999; } .shepherd-enabled.shepherd-element { opacity: 1; - visibility: visible + visibility: visible; } .shepherd-element[data-popper-reference-hidden]:not(.shepherd-centered) { opacity: 0; pointer-events: none; - visibility: hidden + visibility: hidden; } .shepherd-element, @@ -139,39 +141,40 @@ .shepherd-arrow:before { background: #303030; - content: ""; - transform: rotate(45deg) + content: ''; + transform: rotate(45deg); } -.shepherd-element[data-popper-placement^=top]>.shepherd-arrow { - bottom: -8px +.shepherd-element[data-popper-placement^='top'] > .shepherd-arrow { + bottom: -8px; } -.shepherd-element[data-popper-placement^=bottom]>.shepherd-arrow { - top: -8px +.shepherd-element[data-popper-placement^='bottom'] > .shepherd-arrow { + top: -8px; } -.shepherd-element[data-popper-placement^=left]>.shepherd-arrow { - right: -8px +.shepherd-element[data-popper-placement^='left'] > .shepherd-arrow { + right: -8px; } -.shepherd-element[data-popper-placement^=right]>.shepherd-arrow { - left: -8px +.shepherd-element[data-popper-placement^='right'] > .shepherd-arrow { + left: -8px; } -.shepherd-element.shepherd-centered>.shepherd-arrow { - opacity: 0 +.shepherd-element.shepherd-centered > .shepherd-arrow { + opacity: 0; } -.shepherd-element.shepherd-has-title[data-popper-placement^=bottom]>.shepherd-arrow:before { +.shepherd-element.shepherd-has-title[data-popper-placement^='bottom'] + > .shepherd-arrow:before { /* background-color: #e6e6e6 */ background-color: #303030; - border: 1px solid #444 + border: 1px solid #444; } .shepherd-target-click-disabled.shepherd-enabled.shepherd-target, .shepherd-target-click-disabled.shepherd-enabled.shepherd-target * { - pointer-events: none + pointer-events: none; } .shepherd-modal-overlay-container { @@ -182,18 +185,24 @@ pointer-events: none; position: fixed; top: 0; - transition: all .3s ease-out, height 0ms .3s, opacity .3s 0ms; + transition: + all 0.3s ease-out, + height 0ms 0.3s, + opacity 0.3s 0ms; width: 100vw; - z-index: 9997 + z-index: 9997; } .shepherd-modal-overlay-container.shepherd-modal-is-visible { height: 100vh; - opacity: .5; + opacity: 0.5; transform: translateZ(0); - transition: all .3s ease-out, height 0s 0s, opacity .3s 0s + transition: + all 0.3s ease-out, + height 0s 0s, + opacity 0.3s 0s; } .shepherd-modal-overlay-container.shepherd-modal-is-visible path { - pointer-events: all -} \ No newline at end of file + pointer-events: all; +} diff --git a/ap/static/common/css/toastr.css b/ap/static/common/css/toastr.css index 0e33542..3baf06e 100644 --- a/ap/static/common/css/toastr.css +++ b/ap/static/common/css/toastr.css @@ -1,200 +1,200 @@ .toast-title { - font-weight: bold; + font-weight: bold; } .toast-message { - -ms-word-wrap: break-word; - word-wrap: break-word; + -ms-word-wrap: break-word; + word-wrap: break-word; } .toast-message a, .toast-message label { - color: #ffffff; + color: #ffffff; } .toast-message a:hover { - color: #cccccc; - text-decoration: none; + color: #cccccc; + text-decoration: none; } .toast-close-button { - position: relative; - right: -0.3em; - top: -0.3em; - float: right; - font-size: 20px; - font-weight: bold; - color: #ffffff; - -webkit-text-shadow: 0 1px 0 #ffffff; - text-shadow: 0 1px 0 #ffffff; - opacity: 0.8; - -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); - filter: alpha(opacity=80); + position: relative; + right: -0.3em; + top: -0.3em; + float: right; + font-size: 20px; + font-weight: bold; + color: #ffffff; + -webkit-text-shadow: 0 1px 0 #ffffff; + text-shadow: 0 1px 0 #ffffff; + opacity: 0.8; + -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); + filter: alpha(opacity=80); } .toast-close-button:hover, .toast-close-button:focus { - color: #000000; - text-decoration: none; - cursor: pointer; - opacity: 0.4; - -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40); - filter: alpha(opacity=40); + color: #000000; + text-decoration: none; + cursor: pointer; + opacity: 0.4; + -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40); + filter: alpha(opacity=40); } /*Additional properties for button version iOS requires the button element instead of an anchor tag. If you want the anchor version, it requires `href="#"`.*/ button.toast-close-button { - padding: 0; - cursor: pointer; - background: transparent; - border: 0; - -webkit-appearance: none; + padding: 0; + cursor: pointer; + background: transparent; + border: 0; + -webkit-appearance: none; } .toast-top-center { - top: 0; - right: 0; - width: 100%; + top: 0; + right: 0; + width: 100%; } .toast-bottom-center { - bottom: 0; - right: 0; - width: 100%; + bottom: 0; + right: 0; + width: 100%; } .toast-top-full-width { - top: 0; - right: 0; - width: 100%; + top: 0; + right: 0; + width: 100%; } .toast-bottom-full-width { - bottom: 0; - right: 0; - width: 100%; + bottom: 0; + right: 0; + width: 100%; } .toast-top-left { - top: 12px; - left: 12px; + top: 12px; + left: 12px; } .toast-top-right { - top: 12px; - right: 12px; + top: 12px; + right: 12px; } .toast-bottom-right { - right: 12px; - bottom: 12px; + right: 12px; + bottom: 12px; } .toast-bottom-left { - bottom: 12px; - left: 12px; + bottom: 12px; + left: 12px; } #toast-container { - position: fixed; - z-index: 999999; - pointer-events: none; - /*overrides*/ + position: fixed; + z-index: 999999; + pointer-events: none; + /*overrides*/ } #toast-container * { - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; } #toast-container > div { - position: relative; - pointer-events: auto; - overflow: hidden; - margin: 0 0 6px; - padding: 15px 15px 15px 50px; - width: 300px; - -moz-border-radius: 3px 3px 3px 3px; - -webkit-border-radius: 3px 3px 3px 3px; - border-radius: 3px 3px 3px 3px; - background-position: 15px center; - background-repeat: no-repeat; - -moz-box-shadow: 0 0 12px #999999; - -webkit-box-shadow: 0 0 12px #999999; - box-shadow: 0 0 12px #999999; - color: #ffffff; - opacity: 0.8; - -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); - filter: alpha(opacity=80); + position: relative; + pointer-events: auto; + overflow: hidden; + margin: 0 0 6px; + padding: 15px 15px 15px 50px; + width: 300px; + -moz-border-radius: 3px 3px 3px 3px; + -webkit-border-radius: 3px 3px 3px 3px; + border-radius: 3px 3px 3px 3px; + background-position: 15px center; + background-repeat: no-repeat; + -moz-box-shadow: 0 0 12px #999999; + -webkit-box-shadow: 0 0 12px #999999; + box-shadow: 0 0 12px #999999; + color: #ffffff; + opacity: 0.8; + -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); + filter: alpha(opacity=80); } #toast-container > :hover { - -moz-box-shadow: 0 0 12px #000000; - -webkit-box-shadow: 0 0 12px #000000; - box-shadow: 0 0 12px #000000; - opacity: 1; - -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); - filter: alpha(opacity=100); - cursor: pointer; + -moz-box-shadow: 0 0 12px #000000; + -webkit-box-shadow: 0 0 12px #000000; + box-shadow: 0 0 12px #000000; + opacity: 1; + -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); + filter: alpha(opacity=100); + cursor: pointer; } #toast-container > .toast-info { - background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=") !important; + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=') !important; } #toast-container > .toast-error { - background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=") !important; + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=') !important; } #toast-container > .toast-success { - background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==") !important; + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==') !important; } #toast-container > .toast-warning { - background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=") !important; + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=') !important; } #toast-container.toast-top-center > div, #toast-container.toast-bottom-center > div { - width: 300px; - margin-left: auto; - margin-right: auto; + width: 300px; + margin-left: auto; + margin-right: auto; } #toast-container.toast-top-full-width > div, #toast-container.toast-bottom-full-width > div { - width: 96%; - margin-left: auto; - margin-right: auto; + width: 96%; + margin-left: auto; + margin-right: auto; } .toast { - background-color: #030303; + background-color: #030303; } .toast-success { - background-color: #51a351; + background-color: #51a351; } .toast-error { - background-color: #bd362f; + background-color: #bd362f; } .toast-info { - background-color: #2f96b4; + background-color: #2f96b4; } .toast-warning { - background-color: #f89406; + background-color: #f89406; } .toast-progress { - position: absolute; - left: 0; - bottom: 0; - height: 4px; - background-color: #000000; - opacity: 0.4; - -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40); - filter: alpha(opacity=40); + position: absolute; + left: 0; + bottom: 0; + height: 4px; + background-color: #000000; + opacity: 0.4; + -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40); + filter: alpha(opacity=40); } /*Responsive Design*/ @media all and (max-width: 240px) { - #toast-container > div { - padding: 8px 8px 8px 50px; - width: 11em; - } - #toast-container .toast-close-button { - right: -0.2em; - top: -0.2em; - } + #toast-container > div { + padding: 8px 8px 8px 50px; + width: 11em; + } + #toast-container .toast-close-button { + right: -0.2em; + top: -0.2em; + } } @media all and (min-width: 241px) and (max-width: 480px) { - #toast-container > div { - padding: 8px 8px 8px 50px; - width: 18em; - } - #toast-container .toast-close-button { - right: -0.2em; - top: -0.2em; - } + #toast-container > div { + padding: 8px 8px 8px 50px; + width: 18em; + } + #toast-container .toast-close-button { + right: -0.2em; + top: -0.2em; + } } @media all and (min-width: 481px) and (max-width: 768px) { - #toast-container > div { - padding: 15px 15px 15px 50px; - width: 25em; - } + #toast-container > div { + padding: 15px 15px 15px 50px; + width: 25em; + } } diff --git a/ap/static/common/css/user-setting-table.css b/ap/static/common/css/user-setting-table.css index 2a7a3a2..f4f8d55 100644 --- a/ap/static/common/css/user-setting-table.css +++ b/ap/static/common/css/user-setting-table.css @@ -1,68 +1,70 @@ #tblUserSetting { - width: 100% !important; - border-collapse: collapse; - background: #303030; - font-size: 16px; + width: 100% !important; + border-collapse: collapse; + background: #303030; + font-size: 16px; } #tblUserSetting thead { - background: #303030; + background: #303030; } #tblUserSetting thead tr:nth-last-child(1) { - box-shadow: inset 0 1px 0 #444, inset 0 0 0 #444; + box-shadow: + inset 0 1px 0 #444, + inset 0 0 0 #444; } #tblUserSetting thead th { - padding: 5px !important; - font-weight: bold; - text-align: center; + padding: 5px !important; + font-weight: bold; + text-align: center; } #tblUserSetting thead input { - height: auto; - padding: 3px 5px; + height: auto; + padding: 3px 5px; } #tblUserSetting .no-footer { - border-bottom: none; + border-bottom: none; } #tblUserSetting tbody th, -#tblUserSetting tbody td{ +#tblUserSetting tbody td { padding: 3px 5px; /*min-width: 50px;*/ /*text-align: center;*/ - border: 1px solid #444; - position: static; + border: 1px solid #444; + position: static; } #tblUserSetting tbody td.action { - text-align: center; + text-align: center; } #tblUserSetting tbody tr { - background: #303030; + background: #303030; } #tblUserSetting tbody tr:hover { - border: 1.1px solid white !important; + border: 1.1px solid white !important; } -#tblUserSetting th:nth-child(2){ - min-width: 65px !important; +#tblUserSetting th:nth-child(2) { + min-width: 65px !important; } -#tblUserSetting th:nth-child(3){ +#tblUserSetting th:nth-child(3) { width: 100px !important; } #tblUserSetting th:nth-child(6), #tblUserSetting th:nth-child(7), -#tblUserSetting th:nth-child(8){ +#tblUserSetting th:nth-child(8) { width: 70px !important; } -#tblUserSetting td:nth-child(5){ +#tblUserSetting td:nth-child(5) { /*width: 180px !important;*/ - font-size: 16px; + font-size: 16px; } .col-date { width: 150px; @@ -71,22 +73,22 @@ min-width: 70px !important; } -#tblUserSetting th:last-child{ +#tblUserSetting th:last-child { width: 200px !important; } -#tblUserSetting button{ +#tblUserSetting button { font-size: 12px !important; padding-left: 8px !important; padding-right: 8px !important; } #tblUserSetting select { - font-size: 16px; + font-size: 16px; } #tblUserSetting td:nth-child(1), #tblUserSetting td:nth-child(2), -#tblUserSetting td:nth-child(5){ +#tblUserSetting td:nth-child(5) { text-align: center; -} \ No newline at end of file +} diff --git a/ap/static/common/js/ap_tour.js b/ap/static/common/js/ap_tour.js index 02753f0..103a881 100644 --- a/ap/static/common/js/ap_tour.js +++ b/ap/static/common/js/ap_tour.js @@ -1,4 +1,3 @@ - const getTourContent = () => { const htmlTagConst = { BREAK_LINE: '
      ', @@ -6,7 +5,8 @@ const getTourContent = () => { A_END_TAG: '', SPAN_TAG: ``, SPAN_END_TAG: '', - FILTER_ICON: '', + FILTER_ICON: + '', }; const addHTMLTag = (content, htmlTag) => { return content.replaceAll(htmlTag, htmlTagConst[htmlTag]); @@ -90,40 +90,61 @@ const getTourContent = () => { }; const tourCleansingContent = (cleansingContent) => { - const exception = `Exception (${ - $('#partNoDefaultName').text() - }: ON)
      `; - const outlier = `Outlier(Trim) (${ - $('#partNoDefaultName').text() - }: OFF)
      `; - const pulsed = `Pulsed (${ - $('#partNoDefaultName').text() - }: ON)
      `; - const dup = `Dup (${ - $('#partNoDefaultName').text() - }: ON)
      `; + const exception = `Exception (${$( + '#partNoDefaultName', + ).text()}: ON)
      `; + const outlier = `Outlier(Trim) (${$( + '#partNoDefaultName', + ).text()}: OFF)
      `; + const pulsed = `Pulsed (${$( + '#partNoDefaultName', + ).text()}: ON)
      `; + const dup = `Dup (${$( + '#partNoDefaultName', + ).text()}: ON)
      `; return `${cleansingContent}${exception}${outlier}${pulsed}${dup}`; }; - tourSelectTargetVar.content = addHTMLTag(tourSelectTargetVar.content, 'BREAK_LINE'); - tourSelectTargetVar.content_2 = addHTMLTag(tourSelectTargetVar.content_2, 'BREAK_LINE'); + tourSelectTargetVar.content = addHTMLTag( + tourSelectTargetVar.content, + 'BREAK_LINE', + ); + tourSelectTargetVar.content_2 = addHTMLTag( + tourSelectTargetVar.content_2, + 'BREAK_LINE', + ); tourSelectTargetVar.content = `${tourSelectTargetVar.content}Label, Facet:${tourSelectTargetVar.content_2}` - tourSelectTargetPeriod.content = addHTMLTag(tourSelectTargetPeriod.content, 'BREAK_LINE'); - tourSelectTargetPeriodDatePicker.content = addHTMLTag(tourSelectTargetPeriodDatePicker.content, 'BREAK_LINE'); + class="shepherd-hint-text">Facet:${tourSelectTargetVar.content_2}`; + tourSelectTargetPeriod.content = addHTMLTag( + tourSelectTargetPeriod.content, + 'BREAK_LINE', + ); + tourSelectTargetPeriodDatePicker.content = addHTMLTag( + tourSelectTargetPeriodDatePicker.content, + 'BREAK_LINE', + ); tourFindData.content = addHTMLTag(tourFindData.content, 'BREAK_LINE'); - tourFindDataWithDatafinder.content = addHTMLTag(tourFindDataWithDatafinder.content, 'BREAK_LINE'); - tourFindDataWithDatafinder.content = addHTMLTag(tourFindDataWithDatafinder.content, 'SPAN_TAG'); - tourFindDataWithDatafinder.content = addHTMLTag(tourFindDataWithDatafinder.content, 'SPAN_END_TAG'); + tourFindDataWithDatafinder.content = addHTMLTag( + tourFindDataWithDatafinder.content, + 'BREAK_LINE', + ); + tourFindDataWithDatafinder.content = addHTMLTag( + tourFindDataWithDatafinder.content, + 'SPAN_TAG', + ); + tourFindDataWithDatafinder.content = addHTMLTag( + tourFindDataWithDatafinder.content, + 'SPAN_END_TAG', + ); tourUseFilter.content = addHTMLTag(tourUseFilter.content, 'BREAK_LINE'); tourUseFilter.content = addHTMLTag(tourUseFilter.content, 'A_TAG'); tourUseFilter.content = addHTMLTag(tourUseFilter.content, 'A_END_TAG'); @@ -133,7 +154,6 @@ const getTourContent = () => { tourShowGraph.content = addHTMLTag(tourShowGraph.content, 'BREAK_LINE'); tourFinish.content = addHTMLTag(tourFinish.content, 'BREAK_LINE'); - return { tourWelcome, tourSelectTargetVar, @@ -155,7 +175,7 @@ const tryTour = () => { classes: 'btn btn-sm btn-secondary', action() { $('body').css('overflow-x', 'hidden'); - return this.complete() + return this.complete(); }, }; @@ -163,7 +183,7 @@ const tryTour = () => { text: $('#i18nGoBack').text(), classes: 'btn btn-sm btn-secondary', action() { - return this.back() + return this.back(); }, }; @@ -171,7 +191,7 @@ const tryTour = () => { text: $('#i18nGoNext').text(), classes: 'btn btn-sm btn-primary', action() { - return this.next() + return this.next(); }, }; const tour = new Shepherd.Tour({ @@ -179,14 +199,11 @@ const tryTour = () => { defaultStepOptions: { classes: 'shadow-md bg-purple-dark', cancelIcon: { - enabled: true + enabled: true, }, - buttons: [ - backStepButton, - nextStepButton - ], - scrollTo: { behavior: 'smooth', block: 'center' } - } + buttons: [backStepButton, nextStepButton], + scrollTo: { behavior: 'smooth', block: 'center' }, + }, }); const tourContent = getTourContent(); @@ -194,10 +211,7 @@ const tryTour = () => { id: 'fpp_welcome', title: tourContent.tourWelcome.title, text: tourContent.tourWelcome.content, - buttons: [ - quitTourButton, - nextStepButton - ] + buttons: [quitTourButton, nextStepButton], }); tour.addStep({ @@ -206,8 +220,8 @@ const tryTour = () => { text: tourContent.tourSelectTargetVar.content, attachTo: { element: '#endPrc', - on: 'bottom' - } + on: 'bottom', + }, }); tour.addStep({ @@ -216,7 +230,7 @@ const tryTour = () => { text: tourContent.tourSelectTargetPeriod.content, attachTo: { element: '#srtPrc', - on: 'top' + on: 'top', }, buttons: [ backStepButton, @@ -224,14 +238,18 @@ const tryTour = () => { text: tourContent.tourSelectTargetPeriod.next, classes: 'btn btn-sm btn-primary', action() { - const radioSelector = document.getElementById('radioDefaultInterval') - const dttmPickerSelector = document.getElementById('datetimeRangePicker') - radioSelector.click() - dttmPickerSelector.select() - return this.next() + const radioSelector = document.getElementById( + 'radioDefaultInterval', + ); + const dttmPickerSelector = document.getElementById( + 'datetimeRangePicker', + ); + radioSelector.click(); + dttmPickerSelector.select(); + return this.next(); }, - } - ] + }, + ], }); tour.addStep({ @@ -240,7 +258,7 @@ const tryTour = () => { text: tourContent.tourSelectTargetPeriodDatePicker.content, attachTo: { element: '.daterangepicker', - on: 'top' + on: 'top', }, scrollTo: false, buttons: [ @@ -249,13 +267,14 @@ const tryTour = () => { text: tourContent.tourSelectTargetPeriodDatePicker.next, classes: 'btn btn-sm btn-primary', action() { - const dataFinderDOM = document.getElementsByName('dataFinderBtn')[0]; + const dataFinderDOM = + document.getElementsByName('dataFinderBtn')[0]; dataFinderDOM.style.display = 'inherit'; - return this.next() + return this.next(); }, - } + }, ], - modalOverlayOpeningPadding: 50 + modalOverlayOpeningPadding: 50, }); tour.addStep({ @@ -265,7 +284,7 @@ const tryTour = () => { text: tourContent.tourFindData.content, attachTo: { element: 'button[name=dataFinderBtn]', - on: 'bottom' + on: 'bottom', }, scrollTo: false, buttons: [ @@ -273,8 +292,10 @@ const tryTour = () => { text: tourContent.tourFindData.back, classes: 'btn btn-sm btn-secondary', action() { - closeCalenderModal() - const selector = document.getElementById('datetimeRangePicker') + closeCalenderModal(); + const selector = document.getElementById( + 'datetimeRangePicker', + ); selector.select(); return this.back(); }, @@ -283,12 +304,13 @@ const tryTour = () => { text: tourContent.tourFindData.next, classes: 'btn btn-sm btn-primary', action() { - const selector = document.getElementsByName('dataFinderBtn')[0]; - selector.click() - return this.next() + const selector = + document.getElementsByName('dataFinderBtn')[0]; + selector.click(); + return this.next(); }, - } - ] + }, + ], }); tour.addStep({ @@ -297,7 +319,7 @@ const tryTour = () => { text: tourContent.tourFindDataWithDatafinder.content, attachTo: { element: '#data-finder-card', - on: 'bottom' + on: 'bottom', }, buttons: [ { @@ -305,15 +327,18 @@ const tryTour = () => { classes: 'btn btn-sm btn-secondary', action() { closeCalenderModal(); - const dataFinderDOM = document.getElementsByName('dataFinderBtn')[0]; + const dataFinderDOM = + document.getElementsByName('dataFinderBtn')[0]; dataFinderDOM.style.display = 'inherit'; - const selector = document.getElementById('datetimeRangePicker'); + const selector = document.getElementById( + 'datetimeRangePicker', + ); selector.select(); return this.back(); }, }, nextStepButton, - ] + ], }); tour.addStep({ @@ -321,21 +346,22 @@ const tryTour = () => { title: tourContent.tourUseFilter.title, text: tourContent.tourUseFilter.content, attachTo: { - element: "#cndPrc", - on: 'top' + element: '#cndPrc', + on: 'top', }, buttons: [ { text: tourContent.tourUseFilter.back, classes: 'btn btn-sm btn-secondary', action() { - const elements = document.getElementById('data-finder-card'); - const display = elements.style.display - return this.back() + const elements = + document.getElementById('data-finder-card'); + const display = elements.style.display; + return this.back(); }, }, - nextStepButton - ] + nextStepButton, + ], }); tour.addStep({ @@ -344,8 +370,8 @@ const tryTour = () => { text: tourContent.tourCleansing.content, attachTo: { element: '#cleansing-selection', - on: 'top' - } + on: 'top', + }, }); tour.addStep({ @@ -355,8 +381,8 @@ const tryTour = () => { advanceOn: { selector: '#showTraceDataGraph', event: 'click' }, attachTo: { element: '#showTraceDataGraph', - on: 'top' - } + on: 'top', + }, }); tour.addStep({ @@ -368,12 +394,12 @@ const tryTour = () => { { text: tourContent.tourFinish.finish, classes: 'btn btn-sm btn-primary', - action () { + action() { $('body').css('overflow-x', 'hidden'); return this.complete(); - } - } - ] + }, + }, + ], }); tour.start(); @@ -384,11 +410,11 @@ const tryTourInterface = () => { ACCESS_COUNT: 'cumlativeAccessCount', TRY_TOUR: 'tryTour', }; - const set = (key=undefined, value=undefined) => { + const set = (key = undefined, value = undefined) => { localStorage.setItem(key, value); return true; }; - const get = (key=undefined) => { + const get = (key = undefined) => { if (key) { const accessCount = localStorage.getItem(key); return accessCount; @@ -404,12 +430,12 @@ const tryTourInterface = () => { let accessCount = get(keys.ACCESS_COUNT) || 0; accessCount = Number(accessCount) + 1; return set(keys.ACCESS_COUNT, accessCount); - } + }; const isTryTour = () => { const tryTour = get(keys.TRY_TOUR); return !!tryTour; }; - const reset = (key=undefined) => { + const reset = (key = undefined) => { if (key) { localStorage.removeItem(key); } @@ -418,7 +444,7 @@ const tryTourInterface = () => { return { keys, set, reset, isBlink, isTryTour, addAccessCount }; }; -const openTour = (url=undefined, showTour=true) => { +const openTour = (url = undefined, showTour = true) => { const goToPage = url || '/ap/fpp'; if (showTour) { useTileInterface().set(); @@ -440,4 +466,4 @@ $(() => { tour.reset(tour.keys.TRY_TOUR); } tour.addAccessCount(); -}); \ No newline at end of file +}); diff --git a/ap/static/common/js/auto-update-common.js b/ap/static/common/js/auto-update-common.js index c6bf961..7cfd9dc 100644 --- a/ap/static/common/js/auto-update-common.js +++ b/ap/static/common/js/auto-update-common.js @@ -1,4 +1,3 @@ -/* eslint-disable no-unused-vars,camelcase */ let isSSEListening = false; let longPollingData = { @@ -32,7 +31,9 @@ const shouldChartBeRefreshed = (formData) => { }; const handleSourceListener = () => { - const isAutoUpdate = shouldChartBeRefreshed(longPollingData.formData || new FormData()); + const isAutoUpdate = shouldChartBeRefreshed( + longPollingData.formData || new FormData(), + ); if (isAutoUpdate) { showDateTimeRangeValue(); } diff --git a/ap/static/common/js/base.js b/ap/static/common/js/base.js index ba1bba8..1ae6f0c 100644 --- a/ap/static/common/js/base.js +++ b/ap/static/common/js/base.js @@ -1,4 +1,3 @@ -/* eslint-disable arrow-parens,camelcase */ // eslint-disable no-undef, no-unused-vars // term of use validateTerms(); @@ -7,6 +6,7 @@ const HEART_BEAT_MILLI = 2500; const RE_HEART_BEAT_MILLI = HEART_BEAT_MILLI * 4; let scpSelectedPoint = null; let scpCustomData = null; +/** @type {EventSource} */ let serverSentEventCon = null; let loadingProgressBackend = 0; let formDataQueried = null; @@ -16,7 +16,6 @@ const serverSentEventUrl = '/ap/api/setting/listen_background_job'; let problematicData = null; let problematicPCAData = null; - let originalUserSettingInfo; let isGraphShown = false; let requestStartedAt; @@ -39,11 +38,13 @@ const serverSentEventType = { diskUsage: 'DISK_USAGE', reloadTraceConfig: 'RELOAD_TRACE_CONFIG', dataRegister: 'DATA_REGISTER', + backupDataFinished: 'BACKUP_DATA_FINISHED', + restoreDataFinished: 'RESTORE_DATA_FINISHED', }; const KEY_CODE = { - ENTER: 13 -} + ENTER: 13, +}; let isShutdownListening = false; @@ -82,6 +83,33 @@ const masterDataGroup = { GENERATED_EQUATION: 100, }; +const processOrderForFilterCheck = { + first: '1', + all: 'all', +}; + +const masterDataFilterSystem = [ + { + id: masterDataGroup.LINE_NAME, + propTarget: processOrderForFilterCheck.first, + }, + { + id: masterDataGroup.LINE_NO, + propTarget: processOrderForFilterCheck.first, + }, + { id: masterDataGroup.EQ_NAME, propTarget: processOrderForFilterCheck.all }, + { id: masterDataGroup.EQ_NO, propTarget: processOrderForFilterCheck.all }, + { + id: masterDataGroup.PART_NAME, + propTarget: processOrderForFilterCheck.first, + }, + { + id: masterDataGroup.PART_NO, + propTarget: processOrderForFilterCheck.first, + }, + { id: masterDataGroup.ST_NO, propTarget: processOrderForFilterCheck.all }, +]; + const GRAPH_CONST = { histHeight: '100%', // vw, not vh in this case, when change, plz also change ".his" class in trace_data.css histWidth: '100%', @@ -96,11 +124,11 @@ const dnJETColorScale = [ ['0.5', 'rgb(0, 255, 0)'], ['0.6666', 'rgb(255,255,0)'], ['0.8333', 'rgb(255,127,0)'], - ['1.0', 'rgb(255,0,0)'] + ['1.0', 'rgb(255,0,0)'], ]; const reverseScale = (colorScale) => { - const keys = colorScale.map(color => color[0]); - const val = [...colorScale.map(color => color[1])].reverse(); + const keys = colorScale.map((color) => color[0]); + const val = [...colorScale.map((color) => color[1])].reverse(); return keys.map((k, i) => [k, val[i]]); }; @@ -114,8 +142,8 @@ const colorPallets = { ['0.5', 'rgb(71, 128, 166)'], // 204, 57, 65 ['0.6666', 'rgb(83, 150, 194)'], // 204, 57, 76 ['0.8333', 'rgb(95, 171, 222)'], // 204, 57, 87 - ['1.0', 'rgb(107, 193, 250)'] // 204, 57, 98 - ] + ['1.0', 'rgb(107, 193, 250)'], // 204, 57, 98 + ], }, BLUE_REV: { isRev: true, @@ -126,24 +154,24 @@ const colorPallets = { ['0.5', 'rgb(71, 128, 166)'], ['0.6666', 'rgb(59, 106, 138)'], ['0.8333', 'rgb(47, 85, 110)'], - ['1.0', 'rgb(33, 59, 77)'] - ] + ['1.0', 'rgb(33, 59, 77)'], + ], }, JET: { isRev: false, - scale: dnJETColorScale + scale: dnJETColorScale, }, JET_REV: { isRev: true, - scale: reverseScale(dnJETColorScale) + scale: reverseScale(dnJETColorScale), }, JET_ABS: { isRev: false, - scale: null + scale: null, }, JET_ABS_REV: { isRev: true, - scale: null + scale: null, }, }; @@ -151,49 +179,49 @@ const channelType = { heartBeat: 'heart-beat', sseMsg: 'sse-msg', sseErr: 'sse-error', -} +}; // Broadcast channel for SSE let bc = { - onmessage: () => { - - }, - postMessage: () => { - - } + onmessage: () => {}, + postMessage: () => {}, }; try { bc = new BroadcastChannel('sse'); } catch (e) { // Broadcast is not support safari version less than 15.4 - console.log(e) + console.log(e); } function postHeartbeat() { // send heart beat - if (serverSentEventCon && serverSentEventCon.readyState === serverSentEventCon.OPEN) { + if ( + serverSentEventCon && + serverSentEventCon.readyState === serverSentEventCon.OPEN + ) { // console.log(toLocalTime(), 'post heart beat'); - bc.postMessage({type: channelType.heartBeat}); + bc.postMessage({ type: channelType.heartBeat }); consoleLogDebug(`[SSE][Main] Broadcast: ${channelType.heartBeat}`); } else { - consoleLogDebug(`[SSE] Status code: ${(serverSentEventCon ?? {}).readyState}`); + consoleLogDebug( + `[SSE] Status code: ${(serverSentEventCon ?? {}).readyState}`, + ); // make new SSE connection openServerSentEvent(true); // console.log(toLocalTime(), 'force request'); } - } // Handle SSE messages and errors const handleSSEMessage = (event) => { // console.log(toLocalTime(), event.data); - const {type, data} = event.data; + const { type, data } = event.data; if (type === channelType.heartBeat) { consoleLogDebug(`[SSE][Sub] ${type}`); delayPostHeartBeat(RE_HEART_BEAT_MILLI); if (serverSentEventCon) { - serverSentEventCon.close() + serverSentEventCon.close(); } } else { consoleLogDebug(`[SSE][Sub] ${type}\n${JSON.stringify(data)}`); @@ -254,7 +282,8 @@ const handleSSEMessage = (event) => { if (type === serverSentEventType.reloadTraceConfig) { if (typeof doReloadTraceConfig !== 'undefined') { - const { procs: procs, isUpdatePosition: isUpdatePosition } = data; + const { procs: procs, isUpdatePosition: isUpdatePosition } = + data; doReloadTraceConfig(procs, isUpdatePosition); } } @@ -262,23 +291,45 @@ const handleSSEMessage = (event) => { // for data register page if (type === serverSentEventType.dataRegister) { if (typeof updateDataRegisterStatus !== 'undefined') { - updateDataRegisterStatus({type, data}); + updateDataRegisterStatus({ type, data }); + } + } + + if (type === serverSentEventType.backupDataFinished) { + if (typeof showBackupDataFinishedToastr !== 'undefined') { + showBackupDataFinishedToastr(); + } + } + + if (type === serverSentEventType.restoreDataFinished) { + if (typeof showRestoreDataFinishedToastr !== 'undefined') { + showRestoreDataFinishedToastr(); } } } }; -const delayPostHeartBeat = (() => (ms = 0, ...args) => { - if (this.__heartBeatIntervalID__) clearInterval(this.__heartBeatIntervalID__); - this.__heartBeatIntervalID__ = setInterval(postHeartbeat, ms || 0, ...args); -})(); -const isDebugMode = localStorage.getItem('DEBUG') ? localStorage.getItem('DEBUG').trim().toLowerCase() === 'true' : false; +const delayPostHeartBeat = ( + () => + (ms = 0, ...args) => { + if (this.__heartBeatIntervalID__) + clearInterval(this.__heartBeatIntervalID__); + this.__heartBeatIntervalID__ = setInterval( + postHeartbeat, + ms || 0, + ...args, + ); + } +)(); +const isDebugMode = localStorage.getItem('DEBUG') + ? localStorage.getItem('DEBUG').trim().toLowerCase() === 'true' + : false; const consoleLogDebug = (msg = '') => { // If you want to show log, you must set DEBUG=true on localStorage first !!! if (!isDebugMode) return; console.debug(msg); -} +}; const openServerSentEvent = (isForce = false) => { if (isForce || serverSentEventCon == null) { @@ -297,7 +348,9 @@ const openServerSentEvent = (isForce = false) => { } const force = isForce ? 1 : 0; - serverSentEventCon = new EventSource(`${serverSentEventUrl}/${force}/${uuid}/${mainTabUUID}`); + serverSentEventCon = new EventSource( + `${serverSentEventUrl}/${force}/${uuid}/${mainTabUUID}`, + ); serverSentEventCon.onerror = (err) => { delayPostHeartBeat(RE_HEART_BEAT_MILLI); @@ -311,28 +364,42 @@ const openServerSentEvent = (isForce = false) => { } }; - serverSentEventCon.addEventListener(serverSentEventType.ping, (event) => { - bc.postMessage({type: channelType.heartBeat}); - consoleLogDebug(`[SSE][Main] Broadcast: ${channelType.heartBeat}`); + serverSentEventCon.addEventListener( + serverSentEventType.ping, + (event) => { + bc.postMessage({ type: channelType.heartBeat }); + consoleLogDebug( + `[SSE][Main] Broadcast: ${channelType.heartBeat}`, + ); - delayPostHeartBeat(HEART_BEAT_MILLI); + delayPostHeartBeat(HEART_BEAT_MILLI); - if (!bc.onmessage) { - bc.onmessage = handleSSEMessage; - } - // listenSSE(); - notifyStatusSSE(); - }, false); + if (!bc.onmessage) { + bc.onmessage = handleSSEMessage; + } + // listenSSE(); + notifyStatusSSE(); + }, + false, + ); - serverSentEventCon.addEventListener(serverSentEventType.timeout, (event) => { - consoleLogDebug(`[SSE][Main] Server feedback: timeout`); - }, false); + serverSentEventCon.addEventListener( + serverSentEventType.timeout, + (event) => { + consoleLogDebug(`[SSE][Main] Server feedback: timeout`); + }, + false, + ); - serverSentEventCon.addEventListener(serverSentEventType.closeOldSSE, (event) => { - consoleLogDebug(`[SSE][Main] Server feedback: closeOldSSE`); - serverSentEventCon.close(); - consoleLogDebug(`[SSE] SSE connection closed`); - }, false); + serverSentEventCon.addEventListener( + serverSentEventType.closeOldSSE, + (event) => { + consoleLogDebug(`[SSE][Main] Server feedback: closeOldSSE`); + serverSentEventCon.close(); + consoleLogDebug(`[SSE] SSE connection closed`); + }, + false, + ); } }; @@ -343,7 +410,7 @@ const divideOptions = { directTerm: 'directTerm', dataNumberTerm: 'dataNumberTerm', cyclicCalender: 'cyclicCalender', -} +}; function handleError(data) { if (data) { @@ -379,7 +446,7 @@ function shutdownApp() { }, body: JSON.stringify({}), }) - .then(response => response.clone().json()) + .then((response) => response.clone().json()) .then(() => { // closeOldConnection(source); }) @@ -403,93 +470,152 @@ const notifyStatusSSE = () => { } // data type error - serverSentEventCon.addEventListener(serverSentEventType.dataTypeErr, (event) => { - const data = JSON.parse(event.data); - consoleLogDebug(`[SSE][Main] Broadcast: ${serverSentEventType.dataTypeErr}\n${event.data}`); - bc.postMessage({type: serverSentEventType.dataTypeErr, data: data}); - handleError(data); - }, false); + serverSentEventCon.addEventListener( + serverSentEventType.dataTypeErr, + (event) => { + const data = JSON.parse(event.data); + consoleLogDebug( + `[SSE][Main] Broadcast: ${serverSentEventType.dataTypeErr}\n${event.data}`, + ); + bc.postMessage({ + type: serverSentEventType.dataTypeErr, + data: data, + }); + handleError(data); + }, + false, + ); // import empty file - serverSentEventCon.addEventListener(serverSentEventType.emptyFile, (event) => { - const data = JSON.parse(event.data); - consoleLogDebug(`[SSE][Main] Broadcast: ${serverSentEventType.emptyFile}\n${event.data}`); - bc.postMessage({type: serverSentEventType.emptyFile, data: data}); - handleEmptyFile(data); - }, false); + serverSentEventCon.addEventListener( + serverSentEventType.emptyFile, + (event) => { + const data = JSON.parse(event.data); + consoleLogDebug( + `[SSE][Main] Broadcast: ${serverSentEventType.emptyFile}\n${event.data}`, + ); + bc.postMessage({ type: serverSentEventType.emptyFile, data: data }); + handleEmptyFile(data); + }, + false, + ); // fetch pca data - serverSentEventCon.addEventListener(serverSentEventType.pcaSensor, (event) => { - const data = JSON.parse(event.data); - consoleLogDebug(`[SSE][Main] Broadcast: ${serverSentEventType.pcaSensor}\n${event.data}`); - bc.postMessage({type: serverSentEventType.pcaSensor, data: data}); - if (typeof appendSensors !== 'undefined') { - appendSensors(data); - } - }, false); + serverSentEventCon.addEventListener( + serverSentEventType.pcaSensor, + (event) => { + const data = JSON.parse(event.data); + consoleLogDebug( + `[SSE][Main] Broadcast: ${serverSentEventType.pcaSensor}\n${event.data}`, + ); + bc.postMessage({ type: serverSentEventType.pcaSensor, data: data }); + if (typeof appendSensors !== 'undefined') { + appendSensors(data); + } + }, + false, + ); // fetch show graph progress - serverSentEventCon.addEventListener(serverSentEventType.showGraph, (event) => { - const data = JSON.parse(event.data); - consoleLogDebug(`[SSE][Main] Broadcast: ${serverSentEventType.showGraph}\n${event.data}`); - bc.postMessage({type: serverSentEventType.showGraph, data: data}); - if (typeof showGraphProgress !== 'undefined') { - showGraphProgress(data); - } - }, false); + serverSentEventCon.addEventListener( + serverSentEventType.showGraph, + (event) => { + const data = JSON.parse(event.data); + consoleLogDebug( + `[SSE][Main] Broadcast: ${serverSentEventType.showGraph}\n${event.data}`, + ); + bc.postMessage({ type: serverSentEventType.showGraph, data: data }); + if (typeof showGraphProgress !== 'undefined') { + showGraphProgress(data); + } + }, + false, + ); // show warning/error message about disk usage - serverSentEventCon.addEventListener(serverSentEventType.diskUsage, (event) => { - const data = JSON.parse(event.data); - consoleLogDebug(`[SSE][Main] Broadcast: ${serverSentEventType.diskUsage}\n${event.data}`); - bc.postMessage({type: serverSentEventType.diskUsage, data: data}); - if (typeof checkDiskCapacity !== 'undefined') { - checkDiskCapacity(data); - } - }, false); - - serverSentEventCon.addEventListener(serverSentEventType.jobRun, (event) => { - const data = JSON.parse(event.data); - consoleLogDebug(`[SSE][Main] Broadcast: ${serverSentEventType.jobRun}\n${event.data}`); - bc.postMessage({type: serverSentEventType.jobRun, data: data}); - if (typeof updateBackgroundJobs !== 'undefined') { - updateBackgroundJobs(data); - } - }, false); + serverSentEventCon.addEventListener( + serverSentEventType.diskUsage, + (event) => { + const data = JSON.parse(event.data); + consoleLogDebug( + `[SSE][Main] Broadcast: ${serverSentEventType.diskUsage}\n${event.data}`, + ); + bc.postMessage({ type: serverSentEventType.diskUsage, data: data }); + if (typeof checkDiskCapacity !== 'undefined') { + checkDiskCapacity(data); + } + }, + false, + ); - serverSentEventCon.addEventListener(serverSentEventType.shutDown, (event) => { - consoleLogDebug(`[SSE][Main] Broadcast: ${serverSentEventType.shutDown}\n${true}`); - bc.postMessage({type: serverSentEventType.shutDown, data: true}); - if (typeof shutdownApp !== 'undefined') { - shutdownApp(); - } - }, false); - - serverSentEventCon.addEventListener(serverSentEventType.procLink, (event) => { - consoleLogDebug(`[SSE][Main] Broadcast: ${serverSentEventType.procLink}\n${true}`); - bc.postMessage({type: serverSentEventType.procLink, data: true}); - // calculate proc link count - if (typeof realProcLink !== 'undefined') { - realProcLink(false); - setTimeout(hideAlertMessages, 3000); - } + serverSentEventCon.addEventListener( + serverSentEventType.jobRun, + (event) => { + const data = JSON.parse(event.data); + consoleLogDebug( + `[SSE][Main] Broadcast: ${serverSentEventType.jobRun}\n${event.data}`, + ); + bc.postMessage({ type: serverSentEventType.jobRun, data: data }); + if (typeof updateBackgroundJobs !== 'undefined') { + updateBackgroundJobs(data); + } + }, + false, + ); - if (typeof handleSourceListener !== 'undefined') { - handleSourceListener(); - } + serverSentEventCon.addEventListener( + serverSentEventType.shutDown, + (event) => { + consoleLogDebug( + `[SSE][Main] Broadcast: ${serverSentEventType.shutDown}\n${true}`, + ); + bc.postMessage({ type: serverSentEventType.shutDown, data: true }); + if (typeof shutdownApp !== 'undefined') { + shutdownApp(); + } + }, + false, + ); - }, false); + serverSentEventCon.addEventListener( + serverSentEventType.procLink, + (event) => { + consoleLogDebug( + `[SSE][Main] Broadcast: ${serverSentEventType.procLink}\n${true}`, + ); + bc.postMessage({ type: serverSentEventType.procLink, data: true }); + // calculate proc link count + if (typeof realProcLink !== 'undefined') { + realProcLink(false); + setTimeout(hideAlertMessages, 3000); + } + + if (typeof handleSourceListener !== 'undefined') { + handleSourceListener(); + } + }, + false, + ); // for data register page - serverSentEventCon.addEventListener(serverSentEventType.dataRegister, (event) => { - const data = JSON.parse(event.data); - consoleLogDebug(`[SSE][Main] Broadcast: ${serverSentEventType.dataRegister}\n${true}`); - const postDat = {type: serverSentEventType.dataRegister, data: data}; - bc.postMessage(postDat); - if (typeof updateDataRegisterStatus !== 'undefined') { - updateDataRegisterStatus(postDat); - } - }, false); + serverSentEventCon.addEventListener( + serverSentEventType.dataRegister, + (event) => { + const data = JSON.parse(event.data); + consoleLogDebug( + `[SSE][Main] Broadcast: ${serverSentEventType.dataRegister}\n${true}`, + ); + const postDat = { + type: serverSentEventType.dataRegister, + data: data, + }; + bc.postMessage(postDat); + if (typeof updateDataRegisterStatus !== 'undefined') { + updateDataRegisterStatus(postDat); + } + }, + false, + ); // serverSentEventCon.addEventListener(serverSentEventType.dataRegister, (event) => { // const data = JSON.parse(event.data); // consoleLogDebug(`[SSE][Main] Broadcast: ${serverSentEventType.dataRegister}\n${true}`); @@ -508,6 +634,42 @@ const notifyStatusSSE = () => { // updateDataRegisterStatus(postDat); // } // }, false); + + serverSentEventCon.addEventListener( + serverSentEventType.backupDataFinished, + (event) => { + consoleLogDebug( + `[SSE][Main] Broadcast: ${serverSentEventType.backupDataFinished}\n${true}`, + ); + bc.postMessage({ + type: serverSentEventType.backupDataFinished, + data: true, + }); + // calculate proc link count + if (typeof showBackupDataFinishedToastr !== 'undefined') { + showBackupDataFinishedToastr(); + } + }, + false, + ); + + serverSentEventCon.addEventListener( + serverSentEventType.restoreDataFinished, + (event) => { + consoleLogDebug( + `[SSE][Main] Broadcast: ${serverSentEventType.restoreDataFinished}\n${true}`, + ); + bc.postMessage({ + type: serverSentEventType.restoreDataFinished, + data: true, + }); + // calculate proc link count + if (typeof showRestoreDataFinishedToastr !== 'undefined') { + showRestoreDataFinishedToastr(); + } + }, + false, + ); }; const checkDiskCapacity = (data) => { @@ -516,7 +678,9 @@ const checkDiskCapacity = (data) => { const isMarqueeMessageDisplay = () => { const serverTypeList = [edgeServerType]; for (let i = 0; i < serverTypeList.length; i++) { - const marqueMsgElm = $(`#marquee-msg-${serverTypeList[i].toLowerCase()}`); + const marqueMsgElm = $( + `#marquee-msg-${serverTypeList[i].toLowerCase()}`, + ); if (marqueMsgElm.text() !== '') return true; } @@ -539,11 +703,14 @@ const checkDiskCapacity = (data) => { level = MESSAGE_LEVEL.ERROR; msg = $(baseEles.i18nErrorFullDiskMsg).text(); msg = msg.replace('__LIMIT_PERCENT__', data.error_limit_percent); - } else { // In case of normal, hide marquee message + } else { + // In case of normal, hide marquee message show_flag = 'hidden'; } - const marqueMsgElm = $(`#marquee-msg-${data.server_type.toLowerCase()}`); + const marqueMsgElm = $( + `#marquee-msg-${data.server_type.toLowerCase()}`, + ); const sidebarElm = marqueMsgElm.parents('.sidebar-marquee'); const marqueeElm = marqueMsgElm.parents('.marquee'); @@ -580,7 +747,6 @@ const addAttributeToElement = (parent = null, additionalOption = {}) => { // clearNoLinkDataSelection(); }; -// eslint-disable-next-line no-unused-vars const collapseConfig = () => { // let config page collapse const toggleIcon = (e) => { @@ -601,7 +767,8 @@ const collapseConfig = () => { }; const toggleToMinIcon = (collapseId) => { - const ele = $(`#${collapseId}`).parents('.card') + const ele = $(`#${collapseId}`) + .parents('.card') .find('.collapse-box') .find('.more-less'); ele.removeClass('fa-window-maximize'); @@ -609,7 +776,8 @@ const toggleToMinIcon = (collapseId) => { }; const toggleToMaxIcon = (collapseId) => { - const ele = $(`#${collapseId}`).parents('.card') + const ele = $(`#${collapseId}`) + .parents('.card') .find('.collapse-box') .find('.more-less'); ele.removeClass('fa-window-minimize'); @@ -618,10 +786,11 @@ const toggleToMaxIcon = (collapseId) => { const hideContextMenu = () => { const menuName = '[name=contextMenu]'; - $(menuName).css({display: 'none'}); + $(menuName).css({ display: 'none' }); }; -const handleMouseUp = (e) => { // later, not just mouse down, + mouseout of menu +const handleMouseUp = (e) => { + // later, not just mouse down, + mouseout of menu hideContextMenu(); }; @@ -696,7 +865,8 @@ const sidebarCollapseHandle = () => { resetTimeoutEvent(); toutEnter = setTimeout(() => { clearTimeout(toutClick); - $(sidebarEles.dropdownToggle).unbind('mouseenter') + $(sidebarEles.dropdownToggle) + .unbind('mouseenter') .on('mouseenter', (e) => { if ($(e.currentTarget).attr('aria-expanded') === 'false') { $(e.currentTarget).click(); @@ -728,20 +898,20 @@ const sidebarCollapseHandle = () => { }; // mark as call page from tile interface, do not apply user setting -const useTileInterface = () => { +const useTileInterface = (storageKey = 'isLoadingFromTitleInterface') => { const set = () => { - localStorage.setItem('isLoadingFromTitleInterface', true); + localStorage.setItem(storageKey, true); return true; }; const get = () => { - const isUseTitleInterface = localStorage.getItem('isLoadingFromTitleInterface'); + const isUseTitleInterface = localStorage.getItem(storageKey); return !!isUseTitleInterface; }; const reset = () => { - localStorage.removeItem('isLoadingFromTitleInterface'); + localStorage.removeItem(storageKey); return null; }; - return {set, get, reset}; + return { set, get, reset }; }; const openNewPage = () => { @@ -755,10 +925,14 @@ const openNewPage = () => { }; const isLoadingFromTitleInterface = useTileInterface().get(); +const isUseLatestSetting = useTileInterface('useLatestSetting').get(); $(async () => { - isDirectFromJumpFunction = !!(getParamFromUrl(goToFromJumpFunction) && localStorage.getItem(sortedColumnsKey)); - isLoadingUserSetting = !!localStorage.getItem('loadingSetting') + isDirectFromJumpFunction = !!( + getParamFromUrl(goToFromJumpFunction) && + localStorage.getItem(sortedColumnsKey) + ); + isLoadingUserSetting = !!localStorage.getItem('loadingSetting'); // hide userBookmarkBar $('#userBookmarkBar').hide(); @@ -800,11 +974,9 @@ $(async () => { }, body: JSON.stringify({}), }) - .then(response => response.clone().json()) - .then(() => { - }) - .catch(() => { - }); + .then((response) => response.clone().json()) + .then(() => {}) + .catch(() => {}); }, 1000); }); @@ -823,7 +995,7 @@ $(async () => { } else if (needToLoaUserSettingsFromUrl()) { const newUserSetting = await makeUserSettingFromParams(); applyUserSetting(newUserSetting, null, true); - autoClickShowGraphButton(null, 1) + autoClickShowGraphButton(null, 1); } else { // load user input on page load setTimeout(() => { @@ -831,21 +1003,21 @@ $(async () => { originalUserSettingInfo = saveOriginalSetting(); if (userSettingId) { useUserSetting(userSettingId); - autoClickShowGraphButton(null, userSettingId) + autoClickShowGraphButton(null, userSettingId); } else if (loadingSetting) { const loadingSettingObj = JSON.parse(loadingSetting); const isRedirect = loadingSettingObj.redirect; if (isRedirect) { useUserSetting(loadingSettingObj.settingID); - autoClickShowGraphButton(loadingSetting) + autoClickShowGraphButton(loadingSetting); } - } else { + } else if (isUseLatestSetting) { + useTileInterface('useLatestSetting').reset(); useUserSettingOnLoad(); } }, 100); } - // onChange event for datetime group setTimeout(() => { onChangeForDateTimeGroup(); @@ -860,7 +1032,9 @@ $(async () => { const divTarget = e.currentTarget.closest('.card-body'); // console.log(divTarget); - const sharedSetting = JSON.parse(localStorage.getItem(SHARED_USER_SETTING)); + const sharedSetting = JSON.parse( + localStorage.getItem(SHARED_USER_SETTING), + ); useUserSetting(null, sharedSetting, divTarget, false, true); setTimeout(() => { @@ -869,7 +1043,12 @@ $(async () => { }); $('[name=pastePage]').click((e) => { - const sharedSetting = JSON.parse(localStorage.getItem(SHARED_USER_SETTING)); + const key = e?.isDirectFromJumpFunction + ? JUMP_SHARED_USER_SETTING + : SHARED_USER_SETTING; + const localShareSetting = getLocalStorageShareUserSetting(key); + const sharedSetting = + localShareSetting?.settings?.traceDataForm || null; useUserSetting(null, sharedSetting, null, false, true); setTimeout(() => { @@ -881,15 +1060,27 @@ $(async () => { $('[name=copyPage]').click(function () { let formId = getShowFormId(); let srcSetting = window.location.pathname; - localStorage.setItem('srcSetting', srcSetting); - const loadFunc = saveLoadUserInput(`#${formId}`, '', '', SHARED_USER_SETTING); + const currentPage = getCurrentPage(); + localStorage.setItem( + 'srcSetting', + JSON.stringify({ + srcPath: srcSetting, + pageName: currentPage, + isJump: isCopyFromJumpModel, + }), + ); + const keyName = isCopyFromJumpModel + ? JUMP_SHARED_USER_SETTING + : SHARED_USER_SETTING; + const loadFunc = saveLoadUserInput(`#${formId}`, '', '', keyName); loadFunc(false); setTooltip($(this), $(baseEles.i18nCopied).text()); }); if (isDirectFromJumpFunction) { setTimeout(() => { - $('[name=pastePage]').trigger('click'); + const event = $.Event('click', { isDirectFromJumpFunction: true }); + $('[name=pastePage]').trigger(event); autoClickShowGraphButton(null, null); }, 1000); } @@ -906,7 +1097,7 @@ $(async () => { // showGraph ctrl+Enter document.addEventListener('keydown', (event) => { - if (event.ctrlKey && event.key == "Enter") { + if (event.ctrlKey && event.key == 'Enter') { $(baseEles.showGraphBtn).click(); clearLoadingSetting(); } @@ -929,7 +1120,7 @@ const autoClickShowGraphButton = (loadingSetting, userSettingId) => { clearInterval(checkShownGraphInterval); isDirectFromJumpFunction = false; } - }, 100) + }, 100); }; const handleAutoClickShowGraph = (loadingSetting, userSettingId) => { @@ -956,7 +1147,6 @@ const handleAutoClickShowGraph = (loadingSetting, userSettingId) => { } if (loadingSetting || userSettingId || isDirectFromJumpFunction) { - // before click, check params in url to modify GUI input modifyGUIInput(); @@ -971,10 +1161,22 @@ const initTargetPeriod = () => { showDateTimeRangeValue(); // validate and change to default and max value cyclic term - validateInputByNameWithOnchange(CYCLIC_TERM.WINDOW_LENGTH, CYCLIC_TERM.WINDOW_LENGTH_MIN_MAX); - validateInputByNameWithOnchange(CYCLIC_TERM.INTERVAL, CYCLIC_TERM.INTERVAL_MIN_MAX); - validateInputByNameWithOnchange(CYCLIC_TERM.DIV_OFFSET, CYCLIC_TERM.DIV_OFFSET_MIN_MAX); - validateInputByNameWithOnchange(CYCLIC_TERM.RECENT_INTERVAL, CYCLIC_TERM.TIME_UNIT); + validateInputByNameWithOnchange( + CYCLIC_TERM.WINDOW_LENGTH, + CYCLIC_TERM.WINDOW_LENGTH_MIN_MAX, + ); + validateInputByNameWithOnchange( + CYCLIC_TERM.INTERVAL, + CYCLIC_TERM.INTERVAL_MIN_MAX, + ); + validateInputByNameWithOnchange( + CYCLIC_TERM.DIV_OFFSET, + CYCLIC_TERM.DIV_OFFSET_MIN_MAX, + ); + validateInputByNameWithOnchange( + CYCLIC_TERM.RECENT_INTERVAL, + CYCLIC_TERM.TIME_UNIT, + ); setTimeout(() => { $('input[type=text]').trigger('change'); @@ -982,7 +1184,6 @@ const initTargetPeriod = () => { }; const onSearchTableContent = (inputID, tbID, inputElement = null) => { - const inputEl = inputID ? $(`#${inputID}`) : inputElement; initCommonSearchInput(inputEl); @@ -994,7 +1195,7 @@ const onSearchTableContent = (inputID, tbID, inputElement = null) => { inputEl.on('change', (e) => { handleInputTextZenToHanEvent(e); - const {value} = e.currentTarget; + const { value } = e.currentTarget; searchTableContent(tbID, value, false); }); }; @@ -1002,33 +1203,40 @@ const onSearchTableContent = (inputID, tbID, inputElement = null) => { const searchTableContent = (tbID, value, isFilter = true) => { const newValue = makeRegexForSearchCondition(value); const regex = new RegExp(newValue.toLowerCase(), 'i'); - const matchedIndex = [] + const matchedIndex = []; $(`#${tbID} tbody tr`).filter(function () { let text = ''; - $(this).find('td').each((i, td) => { - const selects = $(td).find('select'); - if (selects.length > 0) { - text += selects.find('option:selected').text(); - } - const input = $(td).find('input'); - if (input.length > 0) { - text += input.val(); - } + $(this) + .find('td') + .each((i, td) => { + const selects = $(td).find('select'); + if (selects.length > 0) { + text += selects.find('option:selected').text(); + } + const input = $(td).find('input'); + if (input.length > 0) { + text += input.val(); + } - const textArea = $(td).find('textarea'); - if (textArea.length > 0) { - text += textArea.text(); - } + const textArea = $(td).find('textarea'); + if (textArea.length > 0) { + text += textArea.text(); + } - const searchClass = $(td).find('.for-search'); - if (searchClass.length > 0) { - text += searchClass.text(); - } + const searchClass = $(td).find('.for-search'); + if (searchClass.length > 0) { + text += searchClass.text(); + } - if (textArea.length === 0 && input.length === 0 && selects.length === 0 && searchClass.length === 0) { - text += $(td).text(); - } - }); + if ( + textArea.length === 0 && + input.length === 0 && + selects.length === 0 && + searchClass.length === 0 + ) { + text += $(td).text(); + } + }); if (regex.test(text)) { matchedIndex.push($(this).index()); @@ -1049,13 +1257,11 @@ const searchTableContent = (tbID, value, isFilter = true) => { return matchedIndex; }; - const handleChangeInterval = (e, to) => { let currentShower = null; if (e.checked) { if (to) { currentShower = $(`#for-${to}`); - } else { currentShower = $(`#for-${e.value}`); } @@ -1063,13 +1269,16 @@ const handleChangeInterval = (e, to) => { currentShower = $('#for-fromTo'); } if (e.value === 'default') { - $('.for-recent-cyclicCalender').find('input').prop('disabled', true); + $('.for-recent-cyclicCalender') + .find('input') + .prop('disabled', true); $('.for-recent-cyclicCalender').addClass('hide'); $('.for-recent-cyclicCalender').hide(); - } if (e.value === 'recent') { - $('.for-recent-cyclicCalender').find('input').prop('disabled', false); + $('.for-recent-cyclicCalender') + .find('input') + .prop('disabled', false); $('.for-recent-cyclicCalender').removeClass('hide'); $('.for-recent-cyclicCalender').show(); } @@ -1085,16 +1294,16 @@ const handleChangeInterval = (e, to) => { const handleChangeDivideOption = (e) => { const tabs = []; - e.options.forEach(el => { + e.options.forEach((el) => { tabs.push(el.value); }); const currentShower = $(`#for-${e.value}`); currentShower.removeAttr('style'); toggleDisableAllInputOfNoneDisplayEl(currentShower, false); currentShower.find('input[type=text]').trigger('change'); - tabs.forEach(tab => { + tabs.forEach((tab) => { if (tab !== e.value) { - $(`#for-${tab}`).css({display: 'none', visibility: 'hidden'}); + $(`#for-${tab}`).css({ display: 'none', visibility: 'hidden' }); toggleDisableAllInputOfNoneDisplayEl($(`#for-${tab}`)); } }); @@ -1135,37 +1344,53 @@ const addNewDatTimeRange = () => { removeDateTimeInList(); initializeDateTimeRangePicker(dtId); $(`#${dtId}`).on('focus', (e) => { - handleOnfocusEmptyDatetimeRange(e.currentTarget) - }) + handleOnfocusEmptyDatetimeRange(e.currentTarget); + }); }); }; - const handleOnfocusEmptyDatetimeRange = (e) => { const _this = $(e); const value = _this.val(); if (value) return; - const aboveSiblingValue = _this.parent().prev().find('input[name=DATETIME_RANGE_PICKER]').val(); + const aboveSiblingValue = _this + .parent() + .prev() + .find('input[name=DATETIME_RANGE_PICKER]') + .val(); _this.attr('old-value', aboveSiblingValue); _this.val(aboveSiblingValue).trigger('change'); }; const removeUnusedDate = () => { // remove extra date - const dateGroups = $('.datetimerange-group').find('[name=DATETIME_RANGE_PICKER]'); + const dateGroups = $('.datetimerange-group').find( + '[name=DATETIME_RANGE_PICKER]', + ); dateGroups.each((i, el) => { const val = el.value; if (!val) { - $(el).closest('.datetimerange-group').find('.remove-date').trigger('click'); + $(el) + .closest('.datetimerange-group') + .find('.remove-date') + .trigger('click'); } }); }; -const getDateTimeRangeValue = (tab = null, traceTimeName = 'varTraceTime', forDivision = true) => { +const getDateTimeRangeValue = ( + tab = null, + traceTimeName = 'varTraceTime', + forDivision = true, +) => { const currentTab = tab || $('select[name=compareType]').val(); let result = ''; - if (['var', 'category', 'dataNumberTerm', 'cyclicCalender'].includes(currentTab)) { + if ( + ['var', 'category', 'dataNumberTerm', 'cyclicCalender'].includes( + currentTab, + ) + ) { result = calDateTimeRangeForVar(currentTab, traceTimeName, forDivision); if (result.trim() === DATETIME_PICKER_SEPARATOR.trim()) { result = `${DEFAULT_START_DATETIME}${DATETIME_PICKER_SEPARATOR}${DEFAULT_END_DATETIME}`; @@ -1177,17 +1402,25 @@ const getDateTimeRangeValue = (tab = null, traceTimeName = 'varTraceTime', forDi } if (currentTab === 'cyclicCalender') { - const currentTargetDiv = forDivision ? $(`#for-${currentTab}`) : $('#target-period-wrapper'); + const currentTargetDiv = forDivision + ? $(`#for-${currentTab}`) + : $('#target-period-wrapper'); // format by divide format - const isLatest = currentTargetDiv.find(`[name*=${traceTimeName}]:checked`).val() === TRACE_TIME_CONST.RECENT; - const currentDivFormat = $(`input[name=${CYCLIC_TERM.DIV_CALENDER}]:checked`).val(); + const isLatest = + currentTargetDiv.find(`[name*=${traceTimeName}]:checked`).val() === + TRACE_TIME_CONST.RECENT; + const currentDivFormat = $( + `input[name=${CYCLIC_TERM.DIV_CALENDER}]:checked`, + ).val(); if (currentDivFormat) { const offset = $(`input[name=${CYCLIC_TERM.DIV_OFFSET}]`).val(); - const { - from, - to, - div - } = dividedByCalendar(result.split(DATETIME_PICKER_SEPARATOR)[0], result.split(DATETIME_PICKER_SEPARATOR)[1], currentDivFormat, isLatest, offset); + const { from, to, div } = dividedByCalendar( + result.split(DATETIME_PICKER_SEPARATOR)[0], + result.split(DATETIME_PICKER_SEPARATOR)[1], + currentDivFormat, + isLatest, + offset, + ); result = `${from}${DATETIME_PICKER_SEPARATOR}${to}`; $('#cyclicCalenderShowDiv').text(`Div: ${div}`); } @@ -1196,7 +1429,9 @@ const getDateTimeRangeValue = (tab = null, traceTimeName = 'varTraceTime', forDi } $('#datetimeRangeShowValue').text(result); $(`#${currentTab}-daterange`).text(result); - changeFormatAndExample($(`input[name=${CYCLIC_TERM.DIV_CALENDER}]:checked`)); + changeFormatAndExample( + $(`input[name=${CYCLIC_TERM.DIV_CALENDER}]:checked`), + ); return result; }; @@ -1209,14 +1444,26 @@ const showDateTimeRangeValue = () => { const handleChangeUpdateTimeRange = () => { getDateTimeRangeValue(); compareSettingChange(); -} +}; -const calDateTimeRangeForVar = (currentTab, traceTimeName = 'varTraceTime', forDivision = true) => { - const currentTargetDiv = forDivision ? $(`#for-${currentTab}`) : $('#target-period-wrapper'); - const traceOption = currentTargetDiv.find(`[name*=${traceTimeName}]:checked`).val(); - const dateTimeRange = currentTargetDiv.find('[name=DATETIME_RANGE_PICKER]').val(); - const {startDate, startTime, endDate, endTime} = splitDateTimeRange(dateTimeRange) - const recentTimeInterval = currentTargetDiv.find('[name=recentTimeInterval]').val() || 24; +const calDateTimeRangeForVar = ( + currentTab, + traceTimeName = 'varTraceTime', + forDivision = true, +) => { + const currentTargetDiv = forDivision + ? $(`#for-${currentTab}`) + : $('#target-period-wrapper'); + const traceOption = currentTargetDiv + .find(`[name*=${traceTimeName}]:checked`) + .val(); + const dateTimeRange = currentTargetDiv + .find('[name=DATETIME_RANGE_PICKER]') + .val(); + const { startDate, startTime, endDate, endTime } = + splitDateTimeRange(dateTimeRange); + const recentTimeInterval = + currentTargetDiv.find('[name=recentTimeInterval]').val() || 24; const timeUnit = currentTargetDiv.find('[name=timeUnit]').val() || 60; if (traceOption === TRACE_TIME_CONST.RECENT) { @@ -1228,48 +1475,85 @@ const calDateTimeRangeForVar = (currentTab, traceTimeName = 'varTraceTime', forD const calDateTimeRangeForCyclic = (currentTab) => { const currentTargetDiv = $(`#for-${currentTab}`); - const traceTimeOption = currentTargetDiv.find('[name=cyclicTermTraceTime1]:checked').val(); + const traceTimeOption = currentTargetDiv + .find('[name=cyclicTermTraceTime1]:checked') + .val(); const divisionNum = currentTargetDiv.find('[name=cyclicTermDivNum]').val(); - const intervalNum = currentTargetDiv.find('[name=cyclicTermInterval]').val(); - const windowsLengthNum = currentTargetDiv.find('[name=cyclicTermWindowLength]').val(); + const intervalNum = currentTargetDiv + .find('[name=cyclicTermInterval]') + .val(); + const windowsLengthNum = currentTargetDiv + .find('[name=cyclicTermWindowLength]') + .val(); const datetime = currentTargetDiv.find('[name=DATETIME_PICKER]').val(); - const {date, time} = splitDateTime(datetime) - - const targetDate = traceTimeOption === TRACE_TIME_CONST.RECENT - ? moment().format('YYYY-MM-DD') : date; - const targetTime = traceTimeOption === TRACE_TIME_CONST.RECENT - ? moment().format('HH:mm') : time; - - - const [startTimeRange, endTimeRange] = traceTimeOption === TRACE_TIME_CONST.FROM ? getEndTimeRange( - targetDate, targetTime, divisionNum, intervalNum, windowsLengthNum, - ) : getStartTimeRange( - traceTimeOption, targetDate, targetTime, divisionNum, intervalNum, windowsLengthNum, - ); + const { date, time } = splitDateTime(datetime); + + const targetDate = + traceTimeOption === TRACE_TIME_CONST.RECENT + ? moment().format('YYYY-MM-DD') + : date; + const targetTime = + traceTimeOption === TRACE_TIME_CONST.RECENT + ? moment().format('HH:mm') + : time; + + const [startTimeRange, endTimeRange] = + traceTimeOption === TRACE_TIME_CONST.FROM + ? getEndTimeRange( + targetDate, + targetTime, + divisionNum, + intervalNum, + windowsLengthNum, + ) + : getStartTimeRange( + traceTimeOption, + targetDate, + targetTime, + divisionNum, + intervalNum, + windowsLengthNum, + ); return `${startTimeRange[0]} ${startTimeRange[1]}${DATETIME_PICKER_SEPARATOR}${endTimeRange[0]} ${endTimeRange[1]}`; }; -const getEndTimeRange = (targetDate, targetTime, divisionNum, intervalNum, windowsLengthNum) => { +const getEndTimeRange = ( + targetDate, + targetTime, + divisionNum, + intervalNum, + windowsLengthNum, +) => { const MILSEC = 60 * 60 * 1000; const startDateTimeMil = moment(`${targetDate} ${targetTime}`).valueOf(); - const endDateTimeMil = startDateTimeMil + ((divisionNum - 1) * intervalNum * MILSEC) + (windowsLengthNum * MILSEC); + const endDateTimeMil = + startDateTimeMil + + (divisionNum - 1) * intervalNum * MILSEC + + windowsLengthNum * MILSEC; return [ - [ - targetDate, - targetTime, - ], + [targetDate, targetTime], [ moment(endDateTimeMil).format(DATE_FORMAT), moment(endDateTimeMil).format(TIME_FORMAT), ], ]; }; -const getStartTimeRange = (traceTimeOpt, targetDate, targetTime, divisionNum, intervalNum, windowsLengthNum) => { +const getStartTimeRange = ( + traceTimeOpt, + targetDate, + targetTime, + divisionNum, + intervalNum, + windowsLengthNum, +) => { const MILSEC = 60 * 60 * 1000; const endDateTimeMil = moment(`${targetDate} ${targetTime}`).valueOf(); - const startDateTimeMil = endDateTimeMil - ((divisionNum - 1) * intervalNum * MILSEC) - (windowsLengthNum * MILSEC); + const startDateTimeMil = + endDateTimeMil - + (divisionNum - 1) * intervalNum * MILSEC - + windowsLengthNum * MILSEC; // default as RECENT type let endTimeRange = [ @@ -1277,10 +1561,7 @@ const getStartTimeRange = (traceTimeOpt, targetDate, targetTime, divisionNum, in moment().format(TIME_FORMAT), ]; if (traceTimeOpt === TRACE_TIME_CONST.TO) { - endTimeRange = [ - targetDate, - targetTime, - ]; + endTimeRange = [targetDate, targetTime]; } return [ [ @@ -1307,8 +1588,12 @@ const calDateTimeRangeForDirectTerm = (currentTab) => { const [minOfStart] = findMinMax(starts); const [, maxOfEnd] = findMinMax(ends); - const minDate = minOfStart ? moment(Math.min(...starts)).format(DATETIME_PICKER_FORMAT) : ''; - const maxDate = maxOfEnd ? moment(Math.max(...ends)).format(DATETIME_PICKER_FORMAT) : ''; + const minDate = minOfStart + ? moment(Math.min(...starts)).format(DATETIME_PICKER_FORMAT) + : ''; + const maxDate = maxOfEnd + ? moment(Math.max(...ends)).format(DATETIME_PICKER_FORMAT) + : ''; return `${minDate}${DATETIME_PICKER_SEPARATOR}${maxDate}`; }; @@ -1316,7 +1601,7 @@ const calDateTimeRangeForDirectTerm = (currentTab) => { const SetAppEnv = () => { const env = localStorage.getItem('env'); if (env) return; - $.get('/ap/api/setting/get_env', {"_": $.now()}, (resp) => { + $.get('/ap/api/setting/get_env', { _: $.now() }, (resp) => { localStorage.setItem('env', resp.env); }); }; @@ -1344,8 +1629,7 @@ const showCustomContextMenu = (plotDOM, positivePointOnly = false) => { } }); // show context menu - plotDOM.removeEventListener('contextmenu', () => { - }); + plotDOM.removeEventListener('contextmenu', () => {}); plotDOM.addEventListener('contextmenu', function (e) { e.preventDefault(); hideContextMenu(); @@ -1355,23 +1639,37 @@ const showCustomContextMenu = (plotDOM, positivePointOnly = false) => { setTimeout(() => { var pts = ''; for (var i = 0; i < plotViewData.points.length; i++) { - pts = 'x = ' + plotViewData.points[i].x + '\ny = ' + - plotViewData.points[i].y.toPrecision(4) + '\n\n'; + pts = + 'x = ' + + plotViewData.points[i].x + + '\ny = ' + + plotViewData.points[i].y.toPrecision(4) + + '\n\n'; } scpSelectedPoint = { point_index: plotViewData.points[0].pointNumber, - proc_id_x: plotViewData.points[0].data.customdata ? - plotViewData.points[0].data.customdata.proc_id_x : scpCustomData.proc_id_x, - sensor_id_x: plotViewData.points[0].data.customdata ? - plotViewData.points[0].data.customdata.sensor_id_x : scpCustomData.sensor_id_x, + proc_id_x: plotViewData.points[0].data.customdata + ? plotViewData.points[0].data.customdata.proc_id_x + : scpCustomData.proc_id_x, + sensor_id_x: plotViewData.points[0].data.customdata + ? plotViewData.points[0].data.customdata.sensor_id_x + : scpCustomData.sensor_id_x, }; // customdata - const hasCycleIds = Object.keys(plotViewData.points[0].data).includes('customdata') ? - Object.keys(plotViewData.points[0].data.customdata).includes('cycle_ids') : false; + const hasCycleIds = Object.keys( + plotViewData.points[0].data, + ).includes('customdata') + ? Object.keys(plotViewData.points[0].data.customdata).includes( + 'cycle_ids', + ) + : false; if (hasCycleIds) { - scpSelectedPoint.cycle_ids = plotViewData.points[0].data.customdata.cycle_ids; + scpSelectedPoint.cycle_ids = + plotViewData.points[0].data.customdata.cycle_ids; } - const isFromMarkers = plotViewData.points.length ? plotViewData.points[0].data.type === 'scatter' : false; + const isFromMarkers = plotViewData.points.length + ? plotViewData.points[0].data.type === 'scatter' + : false; if (isFromMarkers) { rightClickHandler(plotViewData.event, '#contextMenuTimeSeries'); } @@ -1379,8 +1677,7 @@ const showCustomContextMenu = (plotDOM, positivePointOnly = false) => { e.stopPropagation(); }); // hide context menu - plotDOM.removeEventListener('mousemove', () => { - }); + plotDOM.removeEventListener('mousemove', () => {}); plotDOM.addEventListener('mousemove', function (e) { hideContextMenu(); removeHoverInfo(); @@ -1392,7 +1689,7 @@ const goToGraphConfigPage = (url) => { const procId = scpSelectedPoint.proc_id_x; goToOtherPage(`${url}?proc_id=${procId}`, false); -} +}; const genQueryStringFromFormData = (formDat = null) => { const traceForm = $(formElements.formID); @@ -1417,18 +1714,25 @@ const handleSelectedPlotView = () => { const currentTraceData = graphStore.getTraceData(); let xTime; if (scpSelectedPoint) { - const cycleId = scpSelectedPoint.cycle_ids ? scpSelectedPoint.cycle_ids[scpSelectedPoint.point_index] : - currentTraceData.cycle_ids[scpSelectedPoint.point_index]; - const sensorDat = currentTraceData.array_plotdata.filter(i => - i.end_col_id == scpSelectedPoint.sensor_id_x && - i.end_proc_id == scpSelectedPoint.proc_id_x + const cycleId = scpSelectedPoint.cycle_ids + ? scpSelectedPoint.cycle_ids[scpSelectedPoint.point_index] + : currentTraceData.cycle_ids[scpSelectedPoint.point_index]; + const sensorDat = currentTraceData.array_plotdata.filter( + (i) => + i.end_col_id == scpSelectedPoint.sensor_id_x && + i.end_proc_id == scpSelectedPoint.proc_id_x, ); if ('array_x' in sensorDat[0]) { xTime = sensorDat[0].array_x[scpSelectedPoint.point_index]; } else { xTime = currentTraceData.datetime[scpSelectedPoint.point_index]; } - const timeKeys = [CONST.STARTDATE, CONST.STARTTIME, CONST.ENDDATE, CONST.ENDTIME]; + const timeKeys = [ + CONST.STARTDATE, + CONST.STARTTIME, + CONST.ENDDATE, + CONST.ENDTIME, + ]; // pca use testing time only timeKeys.forEach((timeKey) => { const values = formDataQueried.getAll(timeKey); @@ -1450,18 +1754,20 @@ const handleSelectedPlotView = () => { const showPlotView = (queryString) => { // open new tab window.open(`/ap/api/common/plot_view?${queryString}`, '_blank'); - return (false); + return false; }; const initCommonSearchInput = (inputElement, className = '') => { // common-search-input if (inputElement.closest('.deleteicon').length) return; - inputElement.wrap(``).after($('x')); + inputElement + .wrap(``) + .after($('x')); $('.remove-search').off('click'); $('.remove-search').on('click', function () { - const e = $.Event("input"); + const e = $.Event('input'); e.which = KEY_CODE.ENTER; e.keyCode = KEY_CODE.ENTER; $(this).prev('input').val('').trigger('input').focus().trigger(e); @@ -1478,8 +1784,12 @@ const keepValueEachDivision = () => { // get value of oldDivision const oldParentEl = $(`#for-${oldDivision}`); dateRange = $(`#${oldDivision}-daterange`).text(); - traceOption = oldParentEl.find('input[name*=raceTime]:is(:checked)').val(); - autoUpdate = oldParentEl.find('input[name=autoUpdateInterval]').is(':checked'); + traceOption = oldParentEl + .find('input[name*=raceTime]:is(:checked)') + .val(); + autoUpdate = oldParentEl + .find('input[name=autoUpdateInterval]') + .is(':checked'); // assign new value to current division const division = $(e.currentTarget).val(); @@ -1493,19 +1803,32 @@ const keepValueEachDivision = () => { } const startDate = dateRange.split(DATETIME_PICKER_SEPARATOR)[0]; - parentEl.find('input[name=DATETIME_PICKER]').val(startDate).trigger('change'); + parentEl + .find('input[name=DATETIME_PICKER]') + .val(startDate) + .trigger('change'); } else if (isDirectTerm) { traceOption = TRACE_TIME_CONST.DEFAULT; - $(parentEl.find('input[name=DATETIME_RANGE_PICKER]')[0]).val(dateRange).trigger('change'); + $(parentEl.find('input[name=DATETIME_RANGE_PICKER]')[0]) + .val(dateRange) + .trigger('change'); } else { if (traceOption !== TRACE_TIME_CONST.RECENT) { traceOption = TRACE_TIME_CONST.DEFAULT; - parentEl.find('input[name=DATETIME_RANGE_PICKER]').val(dateRange).trigger('change'); + parentEl + .find('input[name=DATETIME_RANGE_PICKER]') + .val(dateRange) + .trigger('change'); } } - parentEl.find(`input[name*=raceTime][value=${traceOption}]`).prop('checked', true).trigger('change'); - parentEl.find('input[name=autoUpdateInterval]').prop('checked', autoUpdate); + parentEl + .find(`input[name*=raceTime][value=${traceOption}]`) + .prop('checked', true) + .trigger('change'); + parentEl + .find('input[name=autoUpdateInterval]') + .prop('checked', autoUpdate); oldDivision = division; }); @@ -1513,8 +1836,16 @@ const keepValueEachDivision = () => { const updateCleansing = (inputEle) => { const selectedLabel = $('#cleansing-selected'); - const cleansingValues = uniq([...$('#cleansing-content').find('input[type=checkbox]:is(:checked)')].map(el => $(el).attr('show-value'))); - let dupValue = $('#cleansing-content').find('select option:selected').map((i, el) => $(el).attr('show-value')); + const cleansingValues = uniq( + [ + ...$('#cleansing-content').find( + 'input[type=checkbox]:is(:checked)', + ), + ].map((el) => $(el).attr('show-value')), + ); + let dupValue = $('#cleansing-content') + .find('select option:selected') + .map((i, el) => $(el).attr('show-value')); const removeOutlierType = dupValue[0]; dupValue = dupValue.splice(1); if (cleansingValues.includes('O')) { @@ -1524,63 +1855,90 @@ const updateCleansing = (inputEle) => { if (dupValue) { cleansingValues.push(...dupValue); } - const selectedValues = cleansingValues.length > 0 ? `[${cleansingValues.join('')}]` : ''; + const selectedValues = + cleansingValues.length > 0 ? `[${cleansingValues.join('')}]` : ''; selectedLabel.text(selectedValues); $('input[name=cleansing]').val(selectedValues); }; const cleansingHandling = () => { - const openEvent = new Event("open", {bubbles: true}) - $('.custom-selection').off('click').on('click', (e) => { - const contentDOM = $(e.target).closest('.custom-selection-section').find('.custom-selection-content'); - const contentIsShowed = contentDOM.is(':visible'); - const selectContent = document.getElementById('cyclicCalender-content'); - if (contentIsShowed) { - contentDOM.hide(); - } else { - contentDOM.show(); - if (selectContent) { - selectContent.dispatchEvent(openEvent); + const openEvent = new Event('open', { bubbles: true }); + $('.custom-selection') + .off('click') + .on('click', (e) => { + const contentDOM = $(e.target) + .closest('.custom-selection-section') + .find('.custom-selection-content'); + const contentIsShowed = contentDOM.is(':visible'); + const selectContent = document.getElementById( + 'cyclicCalender-content', + ); + if (contentIsShowed) { + contentDOM.hide(); + } else { + contentDOM.show(); + if (selectContent) { + selectContent.dispatchEvent(openEvent); + } } - } - }); + }); window.addEventListener('click', function (e) { const orderingContentDOM = document.getElementById('ordering-content'); - const orderingSelectiontDOM = document.getElementById('ordering-selection'); - const inOrderingContent = orderingContentDOM ? orderingContentDOM.contains(e.target) : false; - const inOrderingSelection = orderingSelectiontDOM ? orderingSelectiontDOM.contains(e.target) : false; + const orderingSelectiontDOM = + document.getElementById('ordering-selection'); + const inOrderingContent = orderingContentDOM + ? orderingContentDOM.contains(e.target) + : false; + const inOrderingSelection = orderingSelectiontDOM + ? orderingSelectiontDOM.contains(e.target) + : false; if (!inOrderingContent && !inOrderingSelection) { $('#ordering-content').hide(); } if (!e.target.closest('.dn-custom-select')) { - $('.dn-custom-select--select--list').addClass('select-hide') + $('.dn-custom-select--select--list').addClass('select-hide'); } - if (!e.target.closest('.custom-selection-content') && !e.target.closest('.custom-selection')) { + if ( + !e.target.closest('.custom-selection-content') && + !e.target.closest('.custom-selection') + ) { $('.custom-selection-content').hide(); } // hide single calendar - if (!e.target.closest('.single-calendar') && !e.target.closest('.showSingleCalendar')) { + if ( + !e.target.closest('.single-calendar') && + !e.target.closest('.showSingleCalendar') + ) { $('.single-calendar').hide(); } // hide single calendar - if (!e.target.closest('.config-data-type-dropdown') && !e.target.closest('.config-data-type-dropdown button')) { + if ( + !e.target.closest('.config-data-type-dropdown') && + !e.target.closest('.config-data-type-dropdown button') + ) { $('.data-type-selection').hide(); } }); }; const getUserSettingData = () => { - let formId = getShowFormId(); - const getFormSettings = saveLoadUserInput(`#${formId}`); - const settingDat = getFormSettings(false, false); - return settingDat -}; - -const showGraphCallApi = async (url, formData, timeOut, callback, additionalOption = {}) => { + let formId = getShowFormId(); + const getFormSettings = saveLoadUserInput(`#${formId}`); + const settingDat = getFormSettings(false, false); + return settingDat; +}; + +const showGraphCallApi = async ( + url, + formData, + timeOut, + callback, + additionalOption = {}, +) => { if (!requestStartedAt) { requestStartedAt = performance.now(); } @@ -1589,11 +1947,12 @@ const showGraphCallApi = async (url, formData, timeOut, callback, additionalOpti // set isExportMode to fromData formData.set('isExportMode', 1); } else { - formData.delete('isExportMode') + formData.delete('isExportMode'); } // set req_id and filter on-demand value if there is option_id in URL params - const {req_id, option_id, loadGUIFromURL, func, latest} = getRequestParamsForShowGraph(); + const { req_id, bookmark_id, option_id, loadGUIFromURL, func, latest } = + getRequestParamsForShowGraph(); if (req_id) { formData.set('req_id', req_id); @@ -1602,32 +1961,41 @@ const showGraphCallApi = async (url, formData, timeOut, callback, additionalOpti // loadGUIFromURL mean the request from /dn7 external API. We will save info of page and setting to create a bookmark from API const settingData = getUserSettingData(); if (latest) { - const position = settingData.map(object => object.id).indexOf('datetimeRangePicker') - const startDatetime = `${formatDateTime(`${formData.get(CONST.STARTDATE)} ${formData.get(CONST.STARTTIME)}`, DATE_TIME_FMT)}` - const endDatetime = `${formatDateTime(`${formData.get(CONST.ENDDATE)} ${formData.get(CONST.ENDTIME)}`, DATE_TIME_FMT)}` - settingData[position].value = `${startDatetime}${DATETIME_PICKER_SEPARATOR}${endDatetime}` + const position = settingData + .map((object) => object.id) + .indexOf('datetimeRangePicker'); + const startDatetime = `${formatDateTime(`${formData.get(CONST.STARTDATE)} ${formData.get(CONST.STARTTIME)}`, DATE_TIME_FMT)}`; + const endDatetime = `${formatDateTime(`${formData.get(CONST.ENDDATE)} ${formData.get(CONST.ENDTIME)}`, DATE_TIME_FMT)}`; + settingData[position].value = + `${startDatetime}${DATETIME_PICKER_SEPARATOR}${endDatetime}`; } const params = { settings: { - traceDataForm: settingData + traceDataForm: settingData, }, - function: func - } + function: func, + }; formData.set('params', JSON.stringify(params)); } + } + if (bookmark_id) { + formData.set('bookmark_id', bookmark_id); } if (option_id) { // get option from db - const option = await fetchData(`/ap/api/v1/option?option_id=${option_id}`, {}, 'GET') + const option = await fetchData( + `/ap/api/v1/option?option_id=${option_id}`, + {}, + 'GET', + ); if (option) { - const {od_filter} = JSON.parse(option.option) + const { od_filter } = JSON.parse(option.option); if (od_filter) { - formData.set('dic_cat_filters', JSON.stringify(od_filter)) + formData.set('dic_cat_filters', JSON.stringify(od_filter)); } - } } @@ -1645,13 +2013,13 @@ const showGraphCallApi = async (url, formData, timeOut, callback, additionalOpti // send GA mode "Auto update mode" or "Normal mode" const GAMode = isSSEListening ? 'AutoUpdate' : 'Normal'; - let showGraphMethod = "" - if(isLoadingUserSetting) { - showGraphMethod = 'Bookmark' - } else if (isDirectFromJumpFunction){ - showGraphMethod = 'Jump' + let showGraphMethod = ''; + if (isLoadingUserSetting) { + showGraphMethod = 'Bookmark'; + } else if (isDirectFromJumpFunction) { + showGraphMethod = 'Jump'; } else { - showGraphMethod = "Normal" + showGraphMethod = 'Normal'; } gtag('event', 'apdn7_events_tracking', { dn_app_version: app_version, @@ -1695,17 +2063,30 @@ const showGraphCallApi = async (url, formData, timeOut, callback, additionalOpti isGraphShown = true; // hide loading inside ajax - setTimeout(loadingHide, loadingHideDelayTime(res.actual_record_number)); + setTimeout( + loadingHide, + loadingHideDelayTime(res.actual_record_number), + ); // move invalid filter - setColorAndSortHtmlEle(res.matched_filter_ids, res.unmatched_filter_ids, res.not_exact_match_filter_ids); + setColorAndSortHtmlEle( + res.matched_filter_ids, + res.unmatched_filter_ids, + res.not_exact_match_filter_ids, + ); // export mode handleZipExport(res); const finishedAt = performance.now(); // show processing time at bottom - drawProcessingTime(responsedAt, finishedAt, res.backend_time, res.actual_record_number, res.unique_serial); + drawProcessingTime( + responsedAt, + finishedAt, + res.backend_time, + res.actual_record_number, + res.unique_serial, + ); } catch (e) { console.error(e); loadingHide(); @@ -1738,24 +2119,41 @@ const showGraphCallApi = async (url, formData, timeOut, callback, additionalOpti // click show graph problematicPCAData = { train_data: { - null_percent: resJson.json_errors.train_data.null_percent || {}, - zero_variance: resJson.json_errors.train_data.zero_variance || {}, - selected_vars: resJson.json_errors.train_data.selected_vars + null_percent: + resJson.json_errors.train_data + .null_percent || {}, + zero_variance: + resJson.json_errors.train_data + .zero_variance || {}, + selected_vars: + resJson.json_errors.train_data + .selected_vars, }, target_data: { - null_percent: resJson.json_errors.target_data.null_percent || {}, - zero_variance: resJson.json_errors.target_data.zero_variance || [], - selected_vars: resJson.json_errors.target_data.selected_vars + null_percent: + resJson.json_errors.target_data + .null_percent || {}, + zero_variance: + resJson.json_errors.target_data + .zero_variance || [], + selected_vars: + resJson.json_errors.target_data + .selected_vars, }, }; reselectCallback = reselectPCAData; } - const trainDataErrors = resJson.json_errors.train_data.errors || [] - const targetDataErrors = resJson.json_errors.target_data.errors || [] + const trainDataErrors = + resJson.json_errors.train_data.errors || []; + const targetDataErrors = + resJson.json_errors.target_data.errors || []; showToastr(resJson.json_errors); - if (problematicPCAData && (trainDataErrors.length || targetDataErrors.length)) { + if ( + problematicPCAData && + (trainDataErrors.length || targetDataErrors.length) + ) { showRemoveProblematicColsMdl(problematicPCAData, true); } return; @@ -1771,7 +2169,6 @@ const showGraphCallApi = async (url, formData, timeOut, callback, additionalOpti }); }; - const generateCalenderExample = () => { const datetimeRange = $('#datetimeRangeShowValue').text(); if (!datetimeRange) return; @@ -1781,13 +2178,19 @@ const generateCalenderExample = () => { if (!calenderCyclicItems || !calenderCyclicItems.length) return; for (let i = 0; i < calenderCyclicItems.length; i += 1) { const calenderCyclicItem = $(calenderCyclicItems[i]); - let format = calenderCyclicItem.find(`input[name=${CYCLIC_TERM.DIV_CALENDER}]`).val(); + let format = calenderCyclicItem + .find(`input[name=${CYCLIC_TERM.DIV_CALENDER}]`) + .val(); if (!format) continue; const example = getExampleFormatOfDate(targetDateTimeStr, format); - calenderCyclicItem.find(`input[name=${CYCLIC_TERM.DIV_CALENDER}]`).attr('data-example', example); - calenderCyclicItem.find('.cyclic-calender-option-example').text(example); + calenderCyclicItem + .find(`input[name=${CYCLIC_TERM.DIV_CALENDER}]`) + .attr('data-example', example); + calenderCyclicItem + .find('.cyclic-calender-option-example') + .text(example); } }; @@ -1806,12 +2209,12 @@ const getExampleFormatOfDate = (targetDate, format) => { [fmt, hasW] = transformFormat(format); example = moment(targetDate).format(fmt); if (hasW) { - example = example.replace(WEEK_FORMAT, 'W') + example = example.replace(WEEK_FORMAT, 'W'); } } return example; -} +}; const changeFormatAndExample = (formatEl) => { // offset is show only in mode latest and unit != hour @@ -1824,7 +2227,9 @@ const changeFormatAndExample = (formatEl) => { // hide offset input when hour is selected const unit = currentTarget.attr('data-unit'); - const offsetIsDisabled = $(`input[name=${CYCLIC_TERM.DIV_OFFSET}]`).parent().hasClass('hide'); + const offsetIsDisabled = $(`input[name=${CYCLIC_TERM.DIV_OFFSET}]`) + .parent() + .hasClass('hide'); if (!offsetIsDisabled) { if (unit === DivideFormatUnit.Hour) { $('.for-recent-cyclicCalender').hide(); @@ -1836,17 +2241,22 @@ const changeFormatAndExample = (formatEl) => { const handleTimeUnitOnchange = (e) => { const _this = $(e); - const selectedOption = _this.find(`option[value=${_this.val()}]`).attr('data-key'); + const selectedOption = _this + .find(`option[value=${_this.val()}]`) + .attr('data-key'); // set default value of time unit by selected option - const selectedTimeUnit = TIME_UNIT[selectedOption] - const timeInput = $(`[name=${CYCLIC_TERM.RECENT_INTERVAL}]`) - if(!timeInput.val()){ + const selectedTimeUnit = TIME_UNIT[selectedOption]; + const timeInput = $(`[name=${CYCLIC_TERM.RECENT_INTERVAL}]`); + if (!timeInput.val()) { timeInput.val(selectedTimeUnit.DEFAULT).trigger('change'); } CYCLIC_TERM.TIME_UNIT = selectedTimeUnit; - validateInputByNameWithOnchange(CYCLIC_TERM.RECENT_INTERVAL, selectedTimeUnit); + validateInputByNameWithOnchange( + CYCLIC_TERM.RECENT_INTERVAL, + selectedTimeUnit, + ); showDateTimeRangeValue(); -} +}; const collapsingTiles = (collapsing = true) => { const toggle = collapsing ? 'hide' : 'show'; @@ -1855,7 +2265,9 @@ const collapsingTiles = (collapsing = true) => { const showBrowserSupportMsg = () => { if (isBrowserInvalidVersion && isBrowserInvalidVersion == '1') { - const msg = $('#i18nBrowserInvalidVersion').text().replace('BREAK_LINE', '
      '); + const msg = $('#i18nBrowserInvalidVersion') + .text() + .replace('BREAK_LINE', '
      '); showToastrMsg(msg); } }; @@ -1865,11 +2277,10 @@ const getParamFromUrl = (paramKey) => { return urlParams.get(paramKey); }; - const getRequestParamsForShowGraph = () => { const reqId = getParamFromUrl('req_id'); const bookmarkId = getParamFromUrl('bookmark_id'); - const startDateTime = getParamFromUrl('start_datetime'); + let startDateTime = getParamFromUrl('start_datetime'); let endDateTime = getParamFromUrl('end_datetime'); const optionId = getParamFromUrl('option_id'); let columns = getParamFromUrl('columns'); @@ -1880,19 +2291,19 @@ const getRequestParamsForShowGraph = () => { const latest = getParamFromUrl('latest'); let facet = getParamFromUrl('facet'); let filter = getParamFromUrl('filter'); - const div = getParamFromUrl('div') + const div = getParamFromUrl('div'); const page = getParamFromUrl('page'); - columns = columns ? columns.split(',') : [] - facet = facet ? facet.split(',') : [] - filter = filter ? filter.split(',') : [] - procs = procs ? JSON.parse(procs) : [] + columns = columns ? columns.split(',') : []; + facet = facet ? facet.split(',') : []; + filter = filter ? filter.split(',') : []; + procs = procs ? JSON.parse(procs) : []; let datetimeRange = ''; if (startDateTime && endDateTime) { - if (page && page === 'chm') { - const formattedStartDt = formatDateTime(startDateTime, DATE_FORMAT); - let formattedEndDt = formatDateTime(endDateTime, DATE_FORMAT); + const formattedStartDt = formatDateTime(startDateTime, DATE_FORMAT); + const formattedEndDt = formatDateTime(endDateTime, DATE_FORMAT); + if ((page && page === PAGE_NAME.chm) || page === PAGE_NAME.fpp) { if (formattedStartDt === formattedEndDt) { endDateTime = moment(endDateTime).add(1, 'days'); } @@ -1900,7 +2311,6 @@ const getRequestParamsForShowGraph = () => { datetimeRange = `${formatDateTime(startDateTime, DATE_TIME_FMT)}${DATETIME_PICKER_SEPARATOR}${formatDateTime(endDateTime, DATE_TIME_FMT)}`; } - return { req_id: reqId, bookmark_id: bookmarkId, @@ -1917,33 +2327,43 @@ const getRequestParamsForShowGraph = () => { facet: facet, filter: filter, div: div, - } + }; }; - const modifyGUIInput = () => { - let {start_datetime, end_datetime, bookmark_id, datetimeRange, latest} = getRequestParamsForShowGraph(); + let { start_datetime, end_datetime, bookmark_id, datetimeRange, latest } = + getRequestParamsForShowGraph(); if (start_datetime && end_datetime && bookmark_id) { - const dateTimeRangeInput = $('input[name=DATETIME_RANGE_PICKER]:not(:disabled)'); + const dateTimeRangeInput = $( + 'input[name=DATETIME_RANGE_PICKER]:not(:disabled)', + ); const dateTimeInput = $('input[name=DATETIME_PICKER]:not(:disabled)'); if (dateTimeRangeInput.length) { - dateTimeRangeInput.val(datetimeRange) + dateTimeRangeInput.val(datetimeRange); } else if (datetimeRange.length) { - dateTimeInput.val(formatDateTime(start_datetime, DATE_TIME_FMT)) + dateTimeInput.val(formatDateTime(start_datetime, DATE_TIME_FMT)); } } if (latest) { - $('input[name=traceTime][value=recent]').prop('checked', true).trigger('change'); - $('input[name=cyclicTermTraceTime1][value=recent]').prop('checked', true).trigger('change'); - $('input[name=varTraceTime1][value=recent]').prop('checked', true).trigger('change'); - $('input[name=varTraceTime2][value=recent]').prop('checked', true).trigger('change'); + $('input[name=traceTime][value=recent]') + .prop('checked', true) + .trigger('change'); + $('input[name=cyclicTermTraceTime1][value=recent]') + .prop('checked', true) + .trigger('change'); + $('input[name=varTraceTime1][value=recent]') + .prop('checked', true) + .trigger('change'); + $('input[name=varTraceTime2][value=recent]') + .prop('checked', true) + .trigger('change'); $('input[name=autoUpdateInterval]').prop('checked', true); $('select[name=timeUnit]').val('60').trigger('change'); - $('input[name=recentTimeInterval]').val(latest) + $('input[name=recentTimeInterval]').val(latest); } -} +}; const makeUserSettingFromParams = async () => { let { @@ -1957,7 +2377,7 @@ const makeUserSettingFromParams = async () => { filter, div, } = getRequestParamsForShowGraph(); - const settings = [] + const settings = []; const divideOption = $('select[name=compareType]'); if (divideOption.length) { if (div) { @@ -1965,30 +2385,30 @@ const makeUserSettingFromParams = async () => { id: 'divideOption', name: 'compareType', type: 'select-one', - value: 'category' - }) + value: 'category', + }); if (start_datetime) { settings.push({ id: 'datetimeRangePicker', name: 'DATETIME_RANGE_PICKER', type: 'text', value: datetimeRange, - }) + }); } } else { settings.push({ id: 'divideOption', name: 'compareType', type: 'select-one', - value: 'cyclicTerm' - }) + value: 'cyclicTerm', + }); if (start_datetime) { settings.push({ id: 'cyclicTermDatetimePicker', name: 'DATETIME_PICKER', type: 'text', - value: formatDateTime(start_datetime, DATE_TIME_FMT) - }) + value: formatDateTime(start_datetime, DATE_TIME_FMT), + }); } } } @@ -1998,14 +2418,14 @@ const makeUserSettingFromParams = async () => { name: 'traceTime', value: 'traceTime', type: 'radio', - checked: 'true' - }) + checked: 'true', + }); settings.push({ id: 'datetimeRangePicker', name: 'DATETIME_RANGE_PICKER', type: 'text', - value: datetimeRange - }) + value: datetimeRange, + }); } for (const idx in endProcs) { @@ -2017,9 +2437,9 @@ const makeUserSettingFromParams = async () => { name: `end_proc${index}`, value: endProc.toString(), type: 'select-one', - genBtnId: 'btn-add-end-proc' - }) - await cfgProcess.updateColumns() + genBtnId: 'btn-add-end-proc', + }); + await cfgProcess.updateColumns(); for (const colId of columns) { const column = cfgProcess.getColumnById(colId); @@ -2029,38 +2449,38 @@ const makeUserSettingFromParams = async () => { value: colId.toString(), name: `GET02_VALS_SELECT${index}`, type: 'checkbox', - checked: true - }) + checked: true, + }); } if (facet) { - for (let facetCol of facet) { + for (let facetCol of facet) { const column = cfgProcess.getColumnById(facetCol); if (!column) continue; settings.push({ id: `catExpItem-${facetCol}`, name: 'catExpBox', - value: String(facet.indexOf(facetCol)+1), + value: String(facet.indexOf(facetCol) + 1), type: 'select-one', level: 2, - }) + }); } } - if(div) { + if (div) { const column = cfgProcess.getColumnById(div); if (column) { settings.push({ - id: `catExpItem-${div}`, - name: 'catExpBox', - value: 3, - type: 'select', - }) + id: `catExpItem-${div}`, + name: 'catExpBox', + value: 3, + type: 'select', + }); } } - if(filter) { - for(let filterCol of filter) { + if (filter) { + for (let filterCol of filter) { const column = cfgProcess.getColumnById(filterCol); if (!column) continue; settings.push({ @@ -2068,8 +2488,8 @@ const makeUserSettingFromParams = async () => { checked: true, name: `GET02_CATE_SELECT${index}`, value: `${filterCol}`, - type: 'checkbox' - }) + type: 'checkbox', + }); } } } @@ -2080,37 +2500,37 @@ const makeUserSettingFromParams = async () => { name: 'traceTime', value: 'recent', type: 'radio', - checked: 'true' - }) + checked: 'true', + }); settings.push({ id: 'cyclicRecentInterval', name: 'cyclicTermTraceTime1', checked: true, value: 'recent', - type: 'radio' - }) + type: 'radio', + }); settings.push({ id: 'CyclicAutoUpdateInterval', name: 'autoUpdateInterval', checked: true, value: '1', - type: 'checkbox' - }) + type: 'checkbox', + }); settings.push({ id: 'timeUnit', name: 'timeUnit', type: 'select-one', - value: '60' - }) + value: '60', + }); settings.push({ id: 'recentTimeInterval', name: 'recentTimeInterval', value: latest, - type: 'text' - }) + type: 'text', + }); } if (objective) { @@ -2120,20 +2540,20 @@ const makeUserSettingFromParams = async () => { value: objective, type: 'radio', checked: true, - }) + }); } return { settings: { - traceDataForm: settings - } + traceDataForm: settings, + }, }; }; const needToLoaUserSettingsFromUrl = () => { - const {loadGUIFromURL} = getRequestParamsForShowGraph(); + const { loadGUIFromURL } = getRequestParamsForShowGraph(); return loadGUIFromURL; -} +}; const showNominalScaleModal = () => { $('#nominalScaleModal').modal('show'); @@ -2171,30 +2591,36 @@ const loadNominalSensors = (resData) => { const onSearchNominalScale = () => { onSearchTableContent('searchNominalScaleInput', 'nominalScaleTable'); - $('#setNominalScaleInput').off('click'); $('#setNominalScaleInput').on('click', (e) => { e.preventDefault(); const matchedEls = $('#nominalScaleTable tbody tr:not(.gray)'); - matchedEls.find('input[name=graph_nominal_scale]').prop('checked', true).trigger('change'); + matchedEls + .find('input[name=graph_nominal_scale]') + .prop('checked', true) + .trigger('change'); }); $('#resetNominalScaleInput').off('click'); $('#resetNominalScaleInput').on('click', (e) => { e.preventDefault(); const matchedEls = $('#nominalScaleTable tbody tr:not(.gray)'); - matchedEls.find('input[name=graph_nominal_scale]').prop('checked', false).trigger('change'); + matchedEls + .find('input[name=graph_nominal_scale]') + .prop('checked', false) + .trigger('change'); }); - }; const checkAllAsNominalScale = (e) => { const isCheckAll = $(e).is(':checked'); $('input[name=graph_nominal_scale]').prop('checked', isCheckAll); -} +}; const checkAsNominalScale = () => { - const nomialScaleItems = $('input[name=graph_nominal_scale]:checked').length; + const nomialScaleItems = $( + 'input[name=graph_nominal_scale]:checked', + ).length; const allItems = $('input[name=graph_nominal_scale]').length; const checkAll = nomialScaleItems == allItems; $('input[name=nominal_scale_all]').prop('checked', checkAll); -} +}; diff --git a/ap/static/common/js/cat_facet_label_filter_modal.js b/ap/static/common/js/cat_facet_label_filter_modal.js index 6953087..4a4c2c9 100644 --- a/ap/static/common/js/cat_facet_label_filter_modal.js +++ b/ap/static/common/js/cat_facet_label_filter_modal.js @@ -1,13 +1,3 @@ -/* eslint-disable arrow-body-style */ -/* eslint-disable -no-unused-vars, -camelcase, -arrow-parens, -object-curly-newline, -no-use-before-define, -prefer-arrow-callback, -no-restricted-syntax */ - let catFilter = {}; let globalTypingCount = 0; const summaries = {}; @@ -59,20 +49,26 @@ const bindCategorySort = () => { // get category order from on-demand filter const categoryBox = modalEls.categoriesBox; const catOnDemand = categoryBox.find('.column-datas'); - const catOrderIds = catOnDemand.map((i, el) => String($(el).data('id'))).get(); - const catOrderProcIds = catOnDemand.map((i, el) => String($(el).data('proc-id'))).get(); + const catOrderIds = catOnDemand + .map((i, el) => String($(el).data('id'))) + .get(); + const catOrderProcIds = catOnDemand + .map((i, el) => String($(el).data('proc-id'))) + .get(); let _serialCols = currentTrace.COMMON.serialColumn; if (!Array.isArray(_serialCols)) { _serialCols = [_serialCols]; } - const serialCols = _serialCols.map(i => String(i)); + const serialCols = _serialCols.map((i) => String(i)); let xOption = currentTrace.COMMON.xOption || 'TIME'; if (catOnDemandChanged && xOption === 'INDEX') { updateOrderCols = []; catOrderIds.forEach((col, idx) => { // find in serial series list - let colIdx = serialCols.map(col_id => String(col_id)).indexOf(String(col)); + let colIdx = serialCols + .map((col_id) => String(col_id)) + .indexOf(String(col)); const processId = catOrderProcIds[idx]; let orderType = 1; // default as asc, 0 for desc if (colIdx >= 0) { @@ -83,13 +79,15 @@ const bindCategorySort = () => { }); // assign unlabel cols serialCols.forEach((col, idx) => { - if (!catOrderIds.includes(col)) { - updateOrderCols.push(orderColumn( - currentTrace.COMMON.serialProcess[idx], - col, - currentTrace.COMMON.serialOrder[idx] - )); - } + if (!catOrderIds.includes(col)) { + updateOrderCols.push( + orderColumn( + currentTrace.COMMON.serialProcess[idx], + col, + currentTrace.COMMON.serialOrder[idx], + ), + ); + } }); if (updateOrderCols.length) { @@ -108,7 +106,6 @@ const setMouseDown = () => { }, 100); }; - const setMouseUp = () => { clearInterval(dragDropInterval); if (dragDropTime >= DELAY_MOUSE_TIME) { @@ -125,8 +122,8 @@ const filterDataModal = { system: [], filter: [], color: [], - div: [] -} + div: [], +}; function fillDataToFilterModal(data = filterDataModal, callback) { let facetHtml = renderFilterHtml(data.facet); @@ -143,7 +140,7 @@ function fillDataToFilterModal(data = filterDataModal, callback) { const filterHtml = renderFilterHtml(data.filter); init(); initCommonSearchInput(modalEls.search); - + modalEls.okBtn.unbind('click'); modalEls.okBtn.on('click', () => { modalEls.modal.modal('toggle'); @@ -171,7 +168,6 @@ function fillDataToFilterModal(data = filterDataModal, callback) { }, 500); }, 500); event.preventDefault(); - } else { setTimeout(() => { currentRegexVal = stringNormalization(this.value); @@ -202,48 +198,20 @@ function fillDataToFilterModal(data = filterDataModal, callback) { $('.show-detail').unbind('click'); $('.show-detail').click(function () { - if (!isDragDrop) { - const selectedColumnID = $(this).attr('data-id'); - modalEls.modal.modal('toggle'); - prepareDuplicateColumnID(selectedColumnID); - filterPaging(dicCheckboxes); - - setTimeout(() => { - if (isDragDrop) return; - showCheckStatus(dicConfirmed); - sortCheckboxes(); - checkboxOnChange(); - onChangeAllOption(); - onDemandFilterInputCheck(); - }, 500); - } - }); - - - // mouseover 2 seconds - let timeoutId = null; - $('.show-detail:not(.click-only)').hover(function () { - if (!timeoutId) { - timeoutId = setTimeout(() => { - timeoutId = null; - const selectedColumnID = $(this).attr('data-id'); - modalEls.modal.modal('toggle'); - prepareDuplicateColumnID(selectedColumnID); - filterPaging(dicCheckboxes); + if (!isDragDrop) { + const selectedColumnID = $(this).attr('data-id'); + modalEls.modal.modal('toggle'); + prepareDuplicateColumnID(selectedColumnID); + filterPaging(dicCheckboxes); - setTimeout(() => { - showCheckStatus(dicConfirmed); - sortCheckboxes(); - checkboxOnChange(); - onChangeAllOption(); - onDemandFilterInputCheck(); - }, 500); - }, 2000); - } - }, function () { - if (timeoutId) { - window.clearTimeout(timeoutId); - timeoutId = null; + setTimeout(() => { + if (isDragDrop) return; + showCheckStatus(dicConfirmed); + sortCheckboxes(); + checkboxOnChange(); + onChangeAllOption(); + onDemandFilterInputCheck(); + }, 500); } }); @@ -257,7 +225,8 @@ function fillDataToFilterModal(data = filterDataModal, callback) { // Sort modalEls.sortBtn.unbind('click'); modalEls.sortBtn.click(() => { - const dicTarget = Object.keys(dicEnter).length === 0 ? dicCheckboxes : dicEnter; + const dicTarget = + Object.keys(dicEnter).length === 0 ? dicCheckboxes : dicEnter; let dicCheckboxesSorted; isSort = (isSort + 1) % 5; if (isSort) { @@ -295,26 +264,38 @@ function fillDataToFilterModal(data = filterDataModal, callback) { modalEls.categoriesBox.sortable({ axis: 'x', - change: function() { + change: function () { catOnDemandChanged = true; - } + }, }); } function addHighLightToSelectedColumn(selectedColumnID) { if (selectedColumnID) { - const columnEl = modalEls.categoriesBox.find('.filter-data .column-datas'); + const columnEl = modalEls.categoriesBox.find( + '.filter-data .column-datas', + ); if (selectedColumnID === 'color') { - modalEls.colorBox.find('.filter-data .column-datas').addClass('active'); + modalEls.colorBox + .find('.filter-data .column-datas') + .addClass('active'); } else if (selectedColumnID === 'x') { columnEl.length && columnEl[0].classList.add('active'); } else if (selectedColumnID === 'y') { - columnEl.length && columnEl.length > 1 &&columnEl[1].classList.add('active'); + columnEl.length && + columnEl.length > 1 && + columnEl[1].classList.add('active'); } else { - modalEls.categoriesBox.find(`.filter-data .column-datas[data-id=${selectedColumnID}]`).addClass('active'); + modalEls.categoriesBox + .find( + `.filter-data .column-datas[data-id=${selectedColumnID}]`, + ) + .addClass('active'); } } else { - modalEls.catExpBox.find('.filter-data .column-datas').addClass('active'); + modalEls.catExpBox + .find('.filter-data .column-datas') + .addClass('active'); } } @@ -328,7 +309,10 @@ function fillDataToFilterModal(data = filterDataModal, callback) { preparedCatBox[i].isDisabled = true; } else { preparedCategories.forEach((cat2, i2) => { - if (cat.column_id !== Number(selectedColumnID) && cat.column_id === cat2.column_id) { + if ( + cat.column_id !== Number(selectedColumnID) && + cat.column_id === cat2.column_id + ) { preparedCategories[i2].unique_categories = []; preparedCategories[i2].isDisabled = true; } @@ -354,19 +338,21 @@ function fillDataToFilterModal(data = filterDataModal, callback) { } const onDemandFilterInputCheck = () => { - $(`.column-datas div`).unbind('click').bind('click', (e) => { - let target = $(e.target); - if ($(e.target).data('check-all')) { - const allSelection = $(e.target).find('input'); - const allStatus = allSelection.prop('checked'); - allSelection.prop('checked', !allStatus).change(); - } else { - target.find('input').each((idx, item) => { - const currenStatus = $(item).prop('checked'); - $(item).prop('checked', !currenStatus).change(); - }); - } - }); + $(`.column-datas div`) + .unbind('click') + .bind('click', (e) => { + let target = $(e.target); + if ($(e.target).data('check-all')) { + const allSelection = $(e.target).find('input'); + const allStatus = allSelection.prop('checked'); + allSelection.prop('checked', !allStatus).change(); + } else { + target.find('input').each((idx, item) => { + const currenStatus = $(item).prop('checked'); + $(item).prop('checked', !currenStatus).change(); + }); + } + }); }; function moveCheckedLabelsToTop() { $('.column-datas').mouseleave(function () { @@ -387,7 +373,8 @@ function getSortedCatExpAndCategories() { const procId = $(el).attr('data-proc-id'); const columnId = $(el).attr('data-id'); categories.push({ - end_proc_cate: procId, GET02_CATE_SELECT: [columnId], + end_proc_cate: procId, + GET02_CATE_SELECT: [columnId], }); }); @@ -400,7 +387,9 @@ function setAndResetFilter(isSet = true) { const regex = new RegExp(currentRegexVal, 'i'); targets.filter(function () { const val = $(this).val(); - if (regex.test(['null', null].includes(val) ? COMMON_CONSTANT.NA : val)) { + if ( + regex.test(['null', null].includes(val) ? COMMON_CONSTANT.NA : val) + ) { $(this).prop('checked', isSet); } }); @@ -413,7 +402,11 @@ function setAndResetFilter(isSet = true) { } } else { for (const key of Object.keys(dicChecked)) { - dicChecked[key] = searchRegexOnList(currentRegexVal, dicChecked[key], true); + dicChecked[key] = searchRegexOnList( + currentRegexVal, + dicChecked[key], + true, + ); } } } @@ -424,7 +417,7 @@ function showTitle(data = filterDataModal) { } else { modalEls.catExpBoxTitle.parent().show(); } - + if (data.category && data.category.length === 0) { modalEls.categoriesBoxTitle.parent().hide(); } else { @@ -436,13 +429,13 @@ function showTitle(data = filterDataModal) { } else { modalEls.divBoxTitle.parent().show(); } - + if (data.color && data.color.length === 0) { modalEls.colorBoxTitle.parent().hide(); } else { modalEls.colorBoxTitle.parent().show(); } - + if (data.system && data.system.length === 0) { modalEls.categoriesVarTitle.parent().hide(); } else { @@ -450,7 +443,7 @@ function showTitle(data = filterDataModal) { } if (data.filter && data.filter.length === 0) { - modalEls.filterTitle.parent().hide(); + modalEls.filterTitle.parent().hide(); } else { modalEls.filterTitle.parent().show(); } @@ -462,8 +455,15 @@ function resetCheckedCats() { function renderFilterHtml(filterData) { if (!filterData || !_.isArray(filterData)) return; - return filterData.map(cat => { - const { unique_categories, column_id, column_master_name, proc_master_name, isDisabled, proc_name } = cat; + return filterData.map((cat) => { + const { + unique_categories, + column_id, + column_master_name, + proc_master_name, + isDisabled, + proc_name, + } = cat; let divColId = ''; let divPagingId = ''; if (!isDisabled) { @@ -560,13 +560,21 @@ const pagination = (columnId, dataSource) => { showNavigator: true, showPageNumbers: false, callback(data, pagi) { - const html = data.map(value => genCheckBox(columnId, value)); + const html = data.map((value) => genCheckBox(columnId, value)); dataContainer.html(allCheckbox + html.join(' ')); const thisEL = $(pagi.el[0]); const ul = thisEL.find('.paginationjs-pages ul'); - const totalPageNum = thisEL.find('.paginationjs-nav.J-paginationjs-nav').text().split('/')[1].trim(); - const isDisibleNext = ul.find('.paginationjs-next').hasClass('disabled'); - const isDisiblePre = ul.find('.paginationjs-prev').hasClass('disabled'); + const totalPageNum = thisEL + .find('.paginationjs-nav.J-paginationjs-nav') + .text() + .split('/')[1] + .trim(); + const isDisibleNext = ul + .find('.paginationjs-next') + .hasClass('disabled'); + const isDisiblePre = ul + .find('.paginationjs-prev') + .hasClass('disabled'); const goToFirstHtml = `
      • @@ -632,7 +640,9 @@ const showCheckStatus = (dicTarget, parentEle = null) => { const val = $(this).val() === 'null' ? null : $(this).val(); const columnId = Number($(this).attr('data-column')); - const stringSearchList = dicTarget[columnId].map(v => v !== null ? v.toString() : v); + const stringSearchList = dicTarget[columnId].map((v) => + v !== null ? v.toString() : v, + ); if (stringSearchList.includes(val)) { $(this).prop('checked', true); @@ -640,7 +650,7 @@ const showCheckStatus = (dicTarget, parentEle = null) => { }); }; -const regexFilter= (typingCount) => { +const regexFilter = (typingCount) => { if (typingCount !== null && typingCount < globalTypingCount) { return; } @@ -648,7 +658,10 @@ const regexFilter= (typingCount) => { for (const key of Object.keys(dicCheckboxes)) { const vals = searchRegexOnList(currentRegexVal, dicCheckboxes[key]); const checkedList = dicChecked[key]; - dicEnter[key] = uniq([...checkedList, ...vals.map(el=> el !== null ? el.toString() : null)]); + dicEnter[key] = uniq([ + ...checkedList, + ...vals.map((el) => (el !== null ? el.toString() : null)), + ]); } filterPaging(dicEnter); setTimeout(() => { @@ -660,8 +673,10 @@ const regexFilter= (typingCount) => { }, 500); }; -const sortCheckedAsc = (a, b, checkedVals) => (checkedVals.indexOf(a) < checkedVals.indexOf(b) ? 1 : -1); -const sortCheckedDesc = (a, b, checkedVals) => (checkedVals.indexOf(a) > checkedVals.indexOf(b) ? 1 : -1); +const sortCheckedAsc = (a, b, checkedVals) => + checkedVals.indexOf(a) < checkedVals.indexOf(b) ? 1 : -1; +const sortCheckedDesc = (a, b, checkedVals) => + checkedVals.indexOf(a) > checkedVals.indexOf(b) ? 1 : -1; const sortCate = (dicTarget, sortType) => { const dicOutput = {}; @@ -673,10 +688,14 @@ const sortCate = (dicTarget, sortType) => { sortedVals = [...vals].sort().reverse(); } else if (sortType === 3) { const checkedVals = dicChecked[key]; - sortedVals = [...vals].sort((a, b) => sortCheckedAsc(a, b, checkedVals)); + sortedVals = [...vals].sort((a, b) => + sortCheckedAsc(a, b, checkedVals), + ); } else if (sortType === 4) { const checkedVals = dicChecked[key]; - sortedVals = [...vals].sort((a, b) => sortCheckedDesc(a, b, checkedVals)); + sortedVals = [...vals].sort((a, b) => + sortCheckedDesc(a, b, checkedVals), + ); } dicOutput[key] = sortedVals; } @@ -733,14 +752,16 @@ const filterAvailableLabels = () => { // availableDic = merge each dicPair for (const key in dicPair) { if (availableDic[key]) { - availableDic[key] = _.intersection(availableDic[key], dicPair[key]); + availableDic[key] = _.intersection( + availableDic[key], + dicPair[key], + ); } else { availableDic[key] = dicPair[key]; } } } - const dicAvailable = { ...dicCheckboxes, ...availableDic, @@ -822,7 +843,6 @@ const onChangeAllOption = () => { }); }; - const checkboxOnChange = (parentEle = null) => { const targets = getHtmlCheckboxes(parentEle); targets.off('change'); @@ -848,4 +868,4 @@ const getHtmlCheckboxes = (parentEle = null) => { } return targets; -}; \ No newline at end of file +}; diff --git a/ap/static/common/js/clipboard_utils.js b/ap/static/common/js/clipboard_utils.js index 110245e..9f66154 100644 --- a/ap/static/common/js/clipboard_utils.js +++ b/ap/static/common/js/clipboard_utils.js @@ -1,49 +1,160 @@ async function askWritePermission() { try { - const { state } = await navigator.permissions.query({ name: 'clipboard-write' }); + const { state } = await navigator.permissions.query({ + name: 'clipboard-write', + }); return state === 'granted'; } catch (error) { return false; } } +const NoPermissionMessage = Object.freeze( + 'There is not have permissions to access clipboard.', +); + // @params blob - The ClipboardItem takes an object with the MIME type as key, and the actual blob as the value. // @return Promise const setToClipboard = (blob) => { - writeClipboardBlob(blob) + writeClipboardBlob(blob); }; - const writeClipboardBlob = (blob) => { - if (!navigator.clipboard) { + if (!navigator.clipboard || typeof ClipboardItem === 'undefined') { loadingHide(); - showToastrMsg(i18nCommon.copyClipboardFailed, MESSAGE_LEVEL.ERROR); + showToastCopyToClipboardFailed(NoPermissionMessage); return; } const data = [new ClipboardItem({ [blob.type]: blob })]; - navigator.clipboard.write(data).then(function() { - showToastrMsg(i18nCommon.copyClipboardSuccessful, MESSAGE_LEVEL.INFO); - console.log('Write to clipboard successful!!!') - }, function() { - loadingHide(); - showToastrMsg(i18nCommon.copyClipboardFailed, MESSAGE_LEVEL.ERROR); - }); + navigator.clipboard + .write(data) + .then( + showToastCopyToClipboardSuccessful, + showToastCopyToClipboardFailed, + ); }; - const writeClipboardText = (text) => { if (!navigator.clipboard) { loadingHide(); - showToastrMsg(i18nCommon.copyClipboardFailed, MESSAGE_LEVEL.ERROR); + showToastCopyToClipboardFailed(NoPermissionMessage); return; } - navigator.clipboard.writeText(text).then(function() { - showToastrMsg(i18nCommon.copyClipboardSuccessful, MESSAGE_LEVEL.INFO); - console.log('Write to clipboard successful!!!') - }, function() { - loadingHide(); - showToastrMsg(i18nCommon.copyClipboardFailed, MESSAGE_LEVEL.ERROR); - }); + navigator.clipboard + .writeText(text) + .then( + showToastCopyToClipboardSuccessful, + showToastCopyToClipboardFailed, + ); }; +/** + * Show toast message in case Copy To Clipboard Successful + */ +function showToastCopyToClipboardSuccessful() { + console.log('Write to clipboard successful!!!'); + showToastrMsg(i18nCommon.copyClipboardSuccessful, MESSAGE_LEVEL.INFO); +} + +/** + * Show toast message in case Paste From Clipboard Successful + */ +function showToastPasteFromClipboardSuccessful() { + console.log('Paste from clipboard successful!!!'); + showToastrMsg(i18nCommon.pasteFromClipboardSuccessful, MESSAGE_LEVEL.INFO); +} + +/** + * Show toast message in case No Permission Copy To Clipboard + * @param {Error | string?} error - an error message + */ +function showToastCopyToClipboardFailed(error) { + console.error(error); + showToastrMsg(i18nCommon.copyClipboardFailed, MESSAGE_LEVEL.ERROR); +} + +/** + * Show toast message in case No Permission Read Clipboard + * @param {Error | string?} error - an error message + */ +function showToastPasteFromClipboardFailed(error) { + console.error(error); + showToastrMsg(i18nCommon.pasteFromClipboardFailed, MESSAGE_LEVEL.ERROR); +} + +/** + * Unsecured paste text from clipboard + * @summary this function ONLY work on DEVELOPER TOOLS + * @return {Promise} + * @deprecated + */ +function unsecuredPasteFromClipboard() { + return new Promise((resolve, reject) => { + const textarea = document.createElement('textarea'); + // document.body.appendChild(textarea); + document.body.prepend(textarea); + + textarea.focus(); + let value = null; + + try { + document.execCommand('paste'); + value = textarea.value; + } catch (error) { + reject(error); + } finally { + textarea.remove(); + } + + resolve(value); + }); +} + +/** + * Unsecured copy text to clipboard + * @summary this function ONLY work on DEVELOPER TOOLS + * @param {string} text + * @return {Promise} + * @deprecated + */ +function unsecuredCopyToClipboard(text) { + return new Promise((resolve, reject) => { + const textArea = document.createElement('textarea'); + textArea.value = text; + // document.body.appendChild(textArea); + document.body.prepend(textArea); + // textArea.focus(); + textArea.select(); + + try { + document.execCommand('copy'); + } catch (error) { + reject(error); + } finally { + document.body.removeChild(textArea); + } + + resolve(); + }); +} + +/** + * Wrapper to show message inform in case cannot access to clipboard + */ +function handleAccessingClipboardInUnsecuredContext() { + if (navigator.clipboard == null) { + const throwError = () => + new Promise((resolve, reject) => { + reject(new Error(NoPermissionMessage)); + }); + + navigator.clipboard = { + writeText: throwError, + readText: throwError, + write: throwError, + }; + } +} + +$(() => handleAccessingClipboardInUnsecuredContext()); diff --git a/ap/static/common/js/column_ordering.js b/ap/static/common/js/column_ordering.js index c2a6bf1..1f9a89a 100644 --- a/ap/static/common/js/column_ordering.js +++ b/ap/static/common/js/column_ordering.js @@ -1,10 +1,11 @@ - let sortedColIds = []; let latestSortColIds = []; let showOrderModalClick = 0; let showOrderModalGraphAreaClick = 0; let removeColIds = []; let latestSortColIdsJumpPage = []; +const isScpOrHmpPage = + getCurrentPage() === PAGE_NAME.scp || getCurrentPage() === PAGE_NAME.hmp; const orderingEls = { endColOrderTable: '#endColOrderTable', @@ -34,7 +35,7 @@ const findIndex = (array, value) => { const sortGraphs = (array, ColKey, sortedColIds) => { let endCols = []; - array.forEach(data => { + array.forEach((data) => { const endCol = data[ColKey]; let singleColID = [endCol]; if (Array.from(endCol).length) { @@ -42,10 +43,12 @@ const sortGraphs = (array, ColKey, sortedColIds) => { singleColID = endCol; } endCols = [...endCols, ...singleColID]; - }) - endCols = endCols.map(id => Number(id)); - sortedColIds = sortedColIds.map(col => Number(col.split('-')[1])); - const notOrderCols = [...array].filter(colDat => !sortedColIds.includes(colDat[ColKey])); + }); + endCols = endCols.map((id) => Number(id)); + sortedColIds = sortedColIds.map((col) => Number(col.split('-')[1])); + const notOrderCols = [...array].filter( + (colDat) => !sortedColIds.includes(colDat[ColKey]), + ); const graph_sort_key = 'graph_sort_value'; const removeIndexes = []; for (let i = 0; i < array.length; i++) { @@ -63,17 +66,19 @@ const sortGraphs = (array, ColKey, sortedColIds) => { } const sortedCols = sortListByKey(array, graph_sort_key); - return [...sortedCols, ...notOrderCols] + return [...sortedCols, ...notOrderCols]; }; const getSelectedEndColIds = () => { const colIds = []; $('#end-proc-row .end-proc').each((_, endProc) => { - const procId = $(endProc).find('[name*="end_proc"] option:selected').val(); - const cols = $(endProc).find('li [name*=GET02_VALS_SELECT]:checked') + const procId = $(endProc) + .find('[name*="end_proc"] option:selected') + .val(); + const cols = $(endProc).find('li [name*=GET02_VALS_SELECT]:checked'); cols.each((_, element) => { if (element.value && element.value !== 'All') { - colIds.push(`${procId}-${element.value}`) + colIds.push(`${procId}-${element.value}`); } }); }); @@ -83,8 +88,10 @@ const getSelectedEndColIds = () => { const getSelectedEndProcIds = () => { const procIds = []; $('#end-proc-row .end-proc').each((_, endProc) => { - const procId = $(endProc).find('[name*="end_proc"] option:selected').val(); - procIds.push(procId) + const procId = $(endProc) + .find('[name*="end_proc"] option:selected') + .val(); + procIds.push(procId); }); return procIds; }; @@ -97,32 +104,67 @@ const generateSortOrderColumn = (sortList, graphArea) => { if (!sortList.length) { $(`${orderingEls.endColOrderTable + graphArea} tbody`).empty(); } + + // for scp or heatmap => get 2 last item in sortList + sortList = isScpOrHmpPage ? sortList.slice(-2) : sortList; + const $okBtnInChart = $(orderingEls.endColOrderModalOkBtn + graphArea); + // in SCP and Heatmap page, if sortedlist <2 => disable OK button + if (isScpOrHmpPage && sortList.length < 2) { + $okBtnInChart.prop('disabled', true); + $okBtnInChart.removeClass('btn-primary'); + $okBtnInChart.addClass('btn-secondary'); + } else if (isScpOrHmpPage && sortList.length === 2) { + $okBtnInChart.prop('disabled', false); + $okBtnInChart.addClass('btn-primary'); + $okBtnInChart.removeClass('btn-secondary'); + } + for (const col of sortList) { const [procId, colId] = col.split('-'); const cfgProc = procConfigs[procId]; const dicCols = cfgProc.dicColumns; - if (!dicCols || dicCols && !dicCols[colId]) continue; + if (!dicCols || (dicCols && !dicCols[colId])) continue; const colShowName = dicCols[colId].shown_name; const columnName = dicCols[colId].name_en; const dataType = dataTypeShort(dicCols[colId]); const procEnName = cfgProc.name_en; - showColOrderingSetting(orderingEls.endColOrderTable + graphArea, colId, cfgProc.id, cfgProc.shown_name, procEnName, colShowName, columnName, dataType, isReset, graphArea); + showColOrderingSetting( + orderingEls.endColOrderTable + graphArea, + colId, + cfgProc.id, + cfgProc.shown_name, + procEnName, + colShowName, + columnName, + dataType, + isReset, + graphArea, + ); isReset = false; } }; const isDropDownChanged = () => { const originalSelected = getSelectedEndColIds().sort(); - return JSON.stringify(originalSelected) !== JSON.stringify([...sortedColIds].sort()); -} + return ( + JSON.stringify(originalSelected) !== + JSON.stringify([...sortedColIds].sort()) + ); +}; // -const getSensorOrderFromGUI = (sortedIds=[]) => { +const getSensorOrderFromGUI = (sortedIds = []) => { const selectedSensors = getSelectedEndColIds(); - return sortedIds.filter(id => selectedSensors.includes(id)); + return sortedIds.filter((id) => selectedSensors.includes(id)); }; -const loadDataSortColumnsToModal = (graphAreaSuffix = '', force = false, callback = null) => { - sortedColIds = isDropDownChanged() ? getSensorOrderFromGUI(latestSortColIds) : sortedColIds; +const loadDataSortColumnsToModal = ( + graphAreaSuffix = '', + force = false, + callback = null, +) => { + sortedColIds = isDropDownChanged() + ? getSensorOrderFromGUI(latestSortColIds) + : sortedColIds; if (force) { const sortedCols = localStorage.getItem(sortedColumnsKey); if (sortedCols) { @@ -132,21 +174,25 @@ const loadDataSortColumnsToModal = (graphAreaSuffix = '', force = false, callbac } } generateSortOrderColumn(sortedColIds, graphAreaSuffix); - if (!showOrderModalClick) { + if (!showOrderModalClick) { $(orderingEls.endColOrderModalOkBtn).on('click', (e) => { // remove checked cols for (const colId of removeColIds) { - $(`input[name^=GET02_VALS_SELECT][value=${colId}]`).prop('checked', false).trigger('change'); + $(`input[name^=GET02_VALS_SELECT][value=${colId}]`) + .prop('checked', false) + .trigger('change'); } removeColIds = []; sortedColIds = []; - $(orderingEls.endColOrderTable).find('tr').each((_, element) => { - const colId = $(element).attr('data-colId'); - const procId = $(element).attr('data-procId'); - if (colId) { - sortedColIds.push(`${procId}-${colId}`); - } - }); + $(orderingEls.endColOrderTable) + .find('tr') + .each((_, element) => { + const colId = $(element).attr('data-colId'); + const procId = $(element).attr('data-procId'); + if (colId) { + sortedColIds.push(`${procId}-${colId}`); + } + }); }); $(orderingEls.endColOrderModalCancelBtn).on('click', (e) => { @@ -156,37 +202,45 @@ const loadDataSortColumnsToModal = (graphAreaSuffix = '', force = false, callbac } if (!showOrderModalGraphAreaClick) { - $(orderingEls.endColOrderModalOkBtn + graphAreaSuffix).on('click', (e) => { - latestSortColIds = []; - $(orderingEls.endColOrderTable + graphAreaSuffix).find('tr').each((_, element) => { - const colId = $(element).attr('data-colId'); - const procId = $(element).attr('data-procId'); - if (colId) { - latestSortColIds.push(`${procId}-${colId}`); + $(orderingEls.endColOrderModalOkBtn + graphAreaSuffix).on( + 'click', + (e) => { + latestSortColIds = []; + $(orderingEls.endColOrderTable + graphAreaSuffix) + .find('tr') + .each((_, element) => { + const colId = $(element).attr('data-colId'); + const procId = $(element).attr('data-procId'); + if (colId) { + latestSortColIds.push(`${procId}-${colId}`); + } + }); + if (callback) { + callback(); } - }); - if (callback) { - callback(); - } - }); + }, + ); - $(orderingEls.endColOrderModalCancelBtn + graphAreaSuffix).on('click', (e) => { - generateSortOrderColumn(latestSortColIds, graphAreaSuffix); - }); - } + $(orderingEls.endColOrderModalCancelBtn + graphAreaSuffix).on( + 'click', + (e) => { + generateSortOrderColumn(latestSortColIds, graphAreaSuffix); + }, + ); + } if (graphAreaSuffix) { - showOrderModalGraphAreaClick ++; + showOrderModalGraphAreaClick++; } else { - showOrderModalClick ++; + showOrderModalClick++; } -} +}; const showSortColModal = (graphArea = null, callback) => { const graphAreaSuffix = Number(graphArea) ? 'GraphArea' : ''; $(orderingEls.endColOrderModal + graphAreaSuffix).modal('show'); loadDataSortColumnsToModal(graphAreaSuffix, false, callback); -} +}; const initShowGraphCommon = () => { $('button.show-graph').on('click', () => { @@ -207,7 +261,17 @@ const initShowGraphCommon = () => { }); }; -const htmlEndColOrderRowTemplate = (priority, colId, procId, processName, procEnName, showName, colName, dataType, graphArea) => ` +const htmlEndColOrderRowTemplate = ( + priority, + colId, + procId, + processName, + procEnName, + showName, + colName, + dataType, + graphArea, +) => ` ${priority} ${procEnName} ${processName} @@ -217,15 +281,18 @@ const htmlEndColOrderRowTemplate = (priority, colId, procId, processName, procEn - ${!graphArea ? ` + ${ + !graphArea + ? ` - ` : '' } + ` + : '' + } `; - const handleDeleteColumn = (e) => { delClosestEle(e, 'tr'); // uncheck selected columns @@ -233,25 +300,54 @@ const handleDeleteColumn = (e) => { removeColIds.push(id); }; -const showColOrderingSetting = (tableId, colId, procId, processName, procEnName, colShowName, colName, dataType, isReset = false, graphArea) => { - const calcPriority = () => $(`${tableId} tbody tr`).length + 1; +const showColOrderingSetting = ( + tableId, + colId, + procId, + processName, + procEnName, + colShowName, + colName, + dataType, + isReset = false, + graphArea, +) => { + const calcPriority = () => { + if (isScpOrHmpPage) { + return $(`${tableId} tbody tr`).length === 0 ? 'X' : 'Y'; + } else { + return $(`${tableId} tbody tr`).length + 1; + } + }; // add to modal const tableBody = $(`${tableId} tbody`); if (isReset) { tableBody.empty(); tableBody.sortable({ - helper: dragDropRowInTable.fixHelper, update: () => { - updatePriority(tableId) + helper: dragDropRowInTable.fixHelper, + update: () => { + updatePriority(tableId); }, }); } - const rowHtml = htmlEndColOrderRowTemplate(calcPriority(), colId, procId, processName, procEnName, colShowName, colName, dataType, graphArea) - tableBody.append(rowHtml) + const rowHtml = htmlEndColOrderRowTemplate( + calcPriority(), + colId, + procId, + processName, + procEnName, + colShowName, + colName, + dataType, + graphArea, + ); + + tableBody.append(rowHtml); $(`${tableId} thead .filter-row`).remove(); - sortableTable(tableId.replace('#', ''), [0, 1, 2, 3, 4, 5]) + sortableTable(tableId.replace('#', ''), [0, 1, 2, 3, 4, 5]); }; -const handleGoToTopRow = (e, type='top') => { +const handleGoToTopRow = (e, type = 'top') => { const _this = $(e); const targetTr = _this.parents('tr'); const targetTbody = _this.parents('tbody'); @@ -261,11 +357,11 @@ const handleGoToTopRow = (e, type='top') => { } else { targetTbody.prepend(targetTr); } - const tableId = _this.parents('table').attr("id"); - updatePriority(`#${tableId}`) -} + const tableId = _this.parents('table').attr('id'); + updatePriority(`#${tableId}`); +}; -const createOrUpdateSensorOrdering = (event, checkAll=false) => { +const createOrUpdateSensorOrdering = (event, checkAll = false) => { const selectedEndCols = getSelectedEndColIds(); if (!$(event.target).attr('name').includes('GET02_VALS_SELECT')) { return; @@ -281,11 +377,17 @@ const createOrUpdateSensorOrdering = (event, checkAll=false) => { if (procID) { const orderingID = `${procID}-${columnID}`; const isAdd = $(event.target).is(':checked'); - if (isAdd && !latestSortColIds.includes(orderingID) && selectedEndCols.includes(orderingID)) { + if ( + isAdd && + !latestSortColIds.includes(orderingID) && + selectedEndCols.includes(orderingID) + ) { latestSortColIds.push(orderingID); } if (!isAdd) { - latestSortColIds = latestSortColIds.filter(col => col !== orderingID); + latestSortColIds = latestSortColIds.filter( + (col) => col !== orderingID, + ); } } -}; \ No newline at end of file +}; diff --git a/ap/static/common/js/components.js b/ap/static/common/js/components.js index b0c07a8..a8873bf 100644 --- a/ap/static/common/js/components.js +++ b/ap/static/common/js/components.js @@ -1,10 +1,6 @@ -/* eslint-disable no-unused-vars,no-use-before-define,no-trailing-spaces,prefer-arrow-callback */ -/* eslint-disable no-loop-func */ -/* eslint-disable no-undef */ let i18nCommon = {}; const MAX_DYNAMIC_CARD = 50; - // use this config for select2 const select2ConfigI18n = { language: { @@ -31,7 +27,8 @@ const select2ConfigI18n = { }, }, }; -const countUp = (cnt, minNumber = 1, maxNumber = MAX_DYNAMIC_CARD) => (cnt >= maxNumber ? minNumber : cnt + 1); +const countUp = (cnt, minNumber = 1, maxNumber = MAX_DYNAMIC_CARD) => + cnt >= maxNumber ? minNumber : cnt + 1; const extractNumberAtTheEnd = (inputStr) => { const matches = inputStr.match(/\d+$/); @@ -42,7 +39,12 @@ const extractNumberAtTheEnd = (inputStr) => { return null; }; -const checkExistDataGenBtn = (btnId, count, parentFormId = '', maxNumber = MAX_DYNAMIC_CARD) => { +const checkExistDataGenBtn = ( + btnId, + count, + parentFormId = '', + maxNumber = MAX_DYNAMIC_CARD, +) => { const DYNAMIC_ELE_ATTR = 'data-gen-btn'; if (parentFormId && parentFormId[0] !== '#') { parentFormId = `#${parentFormId}`; @@ -139,17 +141,27 @@ const updateI18nCommon = async () => { agPColorExplanation: $('#i18nAgPColorExplanation').text(), changedToMaxValue: $('#i18nChangedDivisionNumberToMax').text(), limitDisplayedGraphs: $('#i18nLimitDisplayedGraphs').text(), - limitDisplayedGraphsInOneTab: $('#i18nLimitDisplayedGraphsInOneTab').text(), - availableSelectMinMaxSensor: $('#i18nAvailableSelectMinMaxSensor').text(), + limitDisplayedGraphsInOneTab: $( + '#i18nLimitDisplayedGraphsInOneTab', + ).text(), + availableSelectMinMaxSensor: $( + '#i18nAvailableSelectMinMaxSensor', + ).text(), availableSelectMaxSensor: $('#i18nAvailableSelectMaxSensor').text(), saveSetting: $('#i18nSaveSetting').text(), notApplicable: $('#i18nNotApplicable').text(), copyClipboardSuccessful: $('#i18nCopyClipboardSuccessful').text(), copyClipboardFailed: $('#i18nCopyClipboardFailed').text(), + pasteFromClipboardSuccessful: $( + '#i18nPasteFromClipboardSuccessful', + ).text(), + pasteFromClipboardFailed: $('#i18nPasteFromClipboardFailed').text(), saveUserSettingConfirm: $('#i18nSaveUserSettingConfirm').text(), editUserSettingConfirm: $('#i18nEditUserSettingConfirm').text(), changeDivConfirmText: $('#i18nChangeDivConfirmText').text(), - changeDivideOptionConfirmText: $('#i18nChangeDivideOptionConfirm').text(), + changeDivideOptionConfirmText: $( + '#i18nChangeDivideOptionConfirm', + ).text(), first: $('#i18nFirst').text(), last: $('#i18nLast').text(), all: $('#i18nAll2').text(), @@ -170,89 +182,132 @@ const endProcSortable = () => { $('.grouplist-checkbox-with-search').sortable({ update: function (event, ui) { const targetItem = $(ui.item); - const isChecked = targetItem.find('input[name^=GET02_VALS_SELECT]').prop('checked'); + const isChecked = targetItem + .find('input[name^=GET02_VALS_SELECT]') + .prop('checked'); if (!isChecked) return; // add order number - targetItem.parent().find('input[name^=GET02_VALS_SELECT]').removeAttr('order'); - const checked = targetItem.parent().find('input[name^=GET02_VALS_SELECT]:checked'); + targetItem + .parent() + .find('input[name^=GET02_VALS_SELECT]') + .removeAttr('order'); + const checked = targetItem + .parent() + .find('input[name^=GET02_VALS_SELECT]:checked'); checked.each((i, el) => { $(el).attr('order', i); - }) - } + }); + }, }); }; const objectiveInputEventHandle = () => { $('input[name="objectiveVar"]').on('change', (e) => { const isChecked = e.currentTarget.checked; const parentRow = $(e.target).closest('li.list-group-item.form-check'); - isChecked && parentRow.find('input[type=checkbox][name^=GET02_VALS_SELECT]').prop('checked', true); + isChecked && + parentRow + .find('input[type=checkbox][name^=GET02_VALS_SELECT]') + .prop('checked', true); }); }; const inputCheckInlineEvents = (parentId) => { $(`#${parentId} li.list-group-item`).on('click', (e) => { - const firstInputIsChecked = $(e.currentTarget).find('input:eq(0)')[0].checked; + const firstInputIsChecked = $(e.currentTarget).find('input:eq(0)')[0] + .checked; const childInputElems = $(e.target).find('input'); - const isLabelInput = $(e.target).closest(".fit-item").find("input[type=checkbox]").hasClass("checkbox-all-labels"); + const isLabelInput = $(e.target) + .closest('.fit-item') + .find('input[type=checkbox]') + .hasClass('checkbox-all-labels'); if (isLabelInput) { return; } - if ($(e.target).is('select') || $(e.target).hasClass('select2-selection__rendered')) { + if ( + $(e.target).is('select') || + $(e.target).hasClass('select2-selection__rendered') + ) { return; } - const [childInput] = childInputElems.length ? childInputElems : $(e.target).parent().find('input'); + const [childInput] = childInputElems.length + ? childInputElems + : $(e.target).parent().find('input'); // check if this input is CL - const isSecondaryCheckbox = ['thresholdBox', 'catExpBox', 'objectiveVar', 'colorVar'].includes(childInput.name) - || childInput.name.includes('GET02_CATE_SELECT'); + const isSecondaryCheckbox = + ['thresholdBox', 'catExpBox', 'objectiveVar', 'colorVar'].includes( + childInput?.name, + ) || childInput.name.includes('GET02_CATE_SELECT'); if (isSecondaryCheckbox) { - $(e.target).find('input:visible').each((idx, item) => { - let inputStatus = true; - if (item.type === 'checkbox' || item.name == 'colorVar') { - inputStatus = !childInput.checked; - } - $(item).prop('checked', inputStatus).trigger('change'); - }); + $(e.target) + .find('input:visible') + .each((idx, item) => { + let inputStatus = true; + if (item.type === 'checkbox' || item.name == 'colorVar') { + inputStatus = !childInput.checked; + } + $(item).prop('checked', inputStatus).trigger('change'); + }); return; } if (childInputElems.length || !isSecondaryCheckbox) { // if (childInputElems.length) { - $(e.currentTarget).find('input:visible').each((idx, item) => { - if ($(item).hasClass('checkbox-all-labels')) { - return; - } - // fpp label column - if ($(item).attr('data-autoselect') === 'false' || $(item).prop('disabled')) { - return; - } - if (item.type === 'radio' && !['colorVar', 'judgeVar'].includes(item.name)) { - item.checked = true; - } else if (item.type === 'checkbox') { - item.checked = !firstInputIsChecked; - } - $(item).trigger('change'); - }); + $(e.currentTarget) + .find('input:visible') + .each((idx, item) => { + if ($(item).hasClass('checkbox-all-labels')) { + return; + } + // fpp label column + if ( + $(item).attr('data-autoselect') === 'false' || + $(item).prop('disabled') + ) { + return; + } + if ( + item.type === 'radio' && + !['colorVar', 'judgeVar'].includes(item.name) + ) { + item.checked = true; + } else if (item.type === 'checkbox') { + item.checked = !firstInputIsChecked; + } + $(item).trigger('change'); + }); } else { // to check CL input - $(e.target).parent().find('input').each((idx, item) => { - if (item.type === 'radio') { - item.checked = true; - } else if (item.type === 'checkbox') { - item.checked = !childInput.checked; - } - $(item).trigger('change'); - }); + $(e.target) + .parent() + .find('input') + .each((idx, item) => { + if (item.type === 'radio') { + item.checked = true; + } else if (item.type === 'checkbox') { + item.checked = !childInput.checked; + } + $(item).trigger('change'); + }); } }); }; -const genColDOM = (isShow, label, description, textCenter = false, withCheckBox = false, id = '', className = '') => { +const genColDOM = ( + isShow, + label, + description, + textCenter = false, + withCheckBox = false, + id = '', + className = '', +) => { // todo: check nofilter option - const filterClasses = (id !== '') ? - 'col custom-control custom-checkbox fit-item text-center pr-1 d-flex ' : - 'col px-1 fit-item title-col'; + const filterClasses = + id !== '' + ? 'col custom-control custom-checkbox fit-item text-center pr-1 d-flex ' + : 'col px-1 fit-item title-col'; if (isShow) { if (withCheckBox) { return `
      @@ -271,8 +326,16 @@ const genColDOM = (isShow, label, description, textCenter = false, withCheckBox let limitedCheckedList = []; -const addGroupListCheckboxWithSearch = (parentId, id, label, itemIds, itemVals, props) => { +const addGroupListCheckboxWithSearch = ( + parentId, + id, + label, + itemIds, + itemVals, + props, +) => { const mainChkBoxClass = 'main-checkbox'; + const requiredInputClass = 'required-input'; const indexDic = { dataType: 2, label: 3, @@ -282,10 +345,23 @@ const addGroupListCheckboxWithSearch = (parentId, id, label, itemIds, itemVals, judge: 7, filter: 8, }; - const isShowColorCheckBox = props ? (props.showColor && !props.colorAsDropdown) : false; - const genDetailItem = (isHeader = false, chkBox, shownName = null, thresholdBox = null, - dataType = null, colDataTypeShowName = null, catExpBox = null, isGetDate = false, - objectiveSelectionDOM = null, categoryLabelDOM = null, colorDOM = null, judgeDOM = null) => { + const isShowColorCheckBox = props + ? props.showColor && !props.colorAsDropdown + : false; + const genDetailItem = ( + isHeader = false, + chkBox, + shownName = null, + thresholdBox = null, + dataType = null, + colDataTypeShowName = null, + catExpBox = null, + isGetDate = false, + objectiveSelectionDOM = null, + categoryLabelDOM = null, + colorDOM = null, + judgeDOM = null, + ) => { if (!chkBox) { return ''; } @@ -299,8 +375,16 @@ const addGroupListCheckboxWithSearch = (parentId, id, label, itemIds, itemVals, const col = thresholdBox ? '10' : '12'; - - const rowClass = [props.showLabel, props.showColor, props.showCatExp, props.showObjectiveInput, props.judge].filter(col => col).length > 1 ? '' : 'less-col'; + const rowClass = + [ + props.showLabel, + props.showColor, + props.showCatExp, + props.showObjectiveInput, + props.judge, + ].filter((col) => col).length > 1 + ? '' + : 'less-col'; let html = `
      ${chkBox} @@ -311,8 +395,19 @@ const addGroupListCheckboxWithSearch = (parentId, id, label, itemIds, itemVals, } if (shownName) { - const isStrCol = dataType === DataTypes.STRING.name ? ' is-string-col' : ''; - const originalTotalCol = [chkBox, shownName, props.itemDataTypes, props.showLabel, props.showColor, props.showCatExp, props.showObjectiveInput, props.judge, props.showFilter]; + const isStrCol = + dataType === DataTypes.STRING.name ? ' is-string-col' : ''; + const originalTotalCol = [ + chkBox, + shownName, + props.itemDataTypes, + props.showLabel, + props.showColor, + props.showCatExp, + props.showObjectiveInput, + props.judge, + props.showFilter, + ]; html = `
      ${chkBox} @@ -326,7 +421,11 @@ const addGroupListCheckboxWithSearch = (parentId, id, label, itemIds, itemVals, if (i === indexDic.dataType) { // data type; const title = $(`#${DataTypes[dataType].exp}`).text(); - const hiddenValue = DataTypes[dataType].short === DataTypes.DATETIME.short ? DataTypes.STRING.short : DataTypes[dataType].short; + const hiddenValue = + DataTypes[dataType].short === + DataTypes.DATETIME.short + ? DataTypes.STRING.short + : DataTypes[dataType].short; const hiddenDataTypeInput = ``; html += `
      ${colDataTypeShowName}${hiddenDataTypeInput} @@ -401,7 +500,8 @@ const addGroupListCheckboxWithSearch = (parentId, id, label, itemIds, itemVals, catExp: $('#i18nCatExpExplain').text(), catExpLabel: $('#i18nCatExp').text(), objectiveLabel: $('#i18nObjective').text(), - objectiveExpl: props.objectiveHoverMsg || $('#i18nObjectiveExplain').text(), + objectiveExpl: + props.objectiveHoverMsg || $('#i18nObjectiveExplain').text(), labelExplain: $('#i18nLabelVariableDescription').text(), filterLabelExplain: $('#i18nFilterLabelExplain').text(), judgeHoverMsg: $('#i18nJudgeHoverMsg').text(), @@ -441,7 +541,14 @@ const addGroupListCheckboxWithSearch = (parentId, id, label, itemIds, itemVals, colDataType = DataTypes[props.itemDataTypes[i]].org_type; colDataTypeShowName = props.itemDataTypeShownNames[i]; catExpChkBoxId = `catExp-${chkBoxId}`; - if (props.showCatExp && [DataTypes.INTEGER.name, DataTypes.STRING.name, DataTypes.TEXT.name].includes(colDataType)) { + if ( + props.showCatExp && + [ + DataTypes.INTEGER.name, + DataTypes.STRING.name, + DataTypes.TEXT.name, + ].includes(colDataType) + ) { catExpBox = ` col.id === itemId)) { + checked = 'checked'; + } const categoryGroupId = props.groupIDx || 1; - if ([DataTypes.INTEGER.name, DataTypes.STRING.name, DataTypes.TEXT.name].includes(colDataType)) { + if ( + [ + DataTypes.INTEGER.name, + DataTypes.STRING.name, + DataTypes.TEXT.name, + ].includes(colDataType) + ) { categoryLabelDOM = ` + id="${clChkBoxId}"${clSelection} data-autoselect="false" ${checked}> `; } } - + const isColorRequired = props.isColorRequired ? requiredInputClass : ''; let colorDOM = null; if (props.showColor) { if (props.colorAsDropdown) { @@ -492,8 +626,11 @@ const addGroupListCheckboxWithSearch = (parentId, id, label, itemIds, itemVals, data-load-level="2" class="form-control level-select select2-selection--single select-n-columns" data-target-var-id="${itemId}"> `; - if (props.availableColorVars && props.availableColorVars.length) { - props.availableColorVars.forEach(col => { + if ( + props.availableColorVars && + props.availableColorVars.length + ) { + props.availableColorVars.forEach((col) => { colorDOM += ``; }); } @@ -502,7 +639,7 @@ const addGroupListCheckboxWithSearch = (parentId, id, label, itemIds, itemVals, const radioButtonColorId = `scp-color-${itemId}`; colorDOM = `
      `; @@ -520,22 +657,46 @@ const addGroupListCheckboxWithSearch = (parentId, id, label, itemIds, itemVals,
      `; } - isChecked = (props.checkedIds && props.checkedIds.includes(itemId)) ? 'checked' : ''; - const isHideCheckInput = (props.hideStrVariable && colDataType === DataTypes.STRING.name) || (props.disableSerialAsObjective && colDataTypeShowName === DataTypes.SERIAL.short) || (props.hideRealVariable && [DataTypes.REAL.short, DataTypes.DATETIME.short].includes(colDataTypeShowName)); + isChecked = + props.checkedIds && props.checkedIds.includes(itemId) + ? 'checked' + : ''; + const isHideCheckInput = + (props.hideStrVariable && colDataType === DataTypes.STRING.name) || + (props.disableSerialAsObjective && + colDataTypeShowName === DataTypes.SERIAL.short) || + (props.hideRealVariable && + [DataTypes.REAL.short, DataTypes.DATETIME.short].includes( + colDataTypeShowName, + )); const hideClass = isHideCheckInput ? ' hidden-input' : ''; - const inputEl = !isHideCheckInput ? `` : ''; + id="${chkBoxId}" ${isChecked} data-proc-id="${props.procId || ''}" data-type-shown-name="${colDataTypeShowName}">` + : ''; const option = ` ${inputEl} `; - const isGetDate = (itemId === props.getDateColID); + const isGetDate = itemId === props.getDateColID; itemList.push( - genDetailItem(false, option, itemName, threshold, colDataType, colDataTypeShowName, catExpBox, - isGetDate, objectiveSelectionDOM, categoryLabelDOM, colorDOM, judgeDOM), + genDetailItem( + false, + option, + itemName, + threshold, + colDataType, + colDataTypeShowName, + catExpBox, + isGetDate, + objectiveSelectionDOM, + categoryLabelDOM, + colorDOM, + judgeDOM, + ), ); } @@ -544,20 +705,75 @@ const addGroupListCheckboxWithSearch = (parentId, id, label, itemIds, itemVals, let allOption = null; const isShowThreshold = props.noFilter ? false : props.thresholdBoxes; - const thresholdBoxDOM = genColDOM(isShowThreshold, 'CL', i18nHoverText.threshold); - const typeColDOM = genColDOM(props.itemDataTypes, 'Type', i18nHoverText.sensorExp, false, false, '', 'type-item'); - const objColDOM = genColDOM(props.showObjectiveInput, i18nHoverText.objectiveLabel, i18nHoverText.objectiveExpl, false, false, '', 'objective-item'); - const judgeTitle = genColDOM(props.judge, i18nHoverText.judgeLabel, i18nHoverText.judgeHoverMsg); + const thresholdBoxDOM = genColDOM( + isShowThreshold, + 'CL', + i18nHoverText.threshold, + ); + const typeColDOM = genColDOM( + props.itemDataTypes, + 'Type', + i18nHoverText.sensorExp, + false, + false, + '', + 'type-item', + ); + const objColDOM = genColDOM( + props.showObjectiveInput, + i18nHoverText.objectiveLabel, + i18nHoverText.objectiveExpl, + false, + false, + '', + 'objective-item', + ); + const judgeTitle = genColDOM( + props.judge, + i18nHoverText.judgeLabel, + i18nHoverText.judgeHoverMsg, + ); // change Title on On-demand filter $('#categoriesBoxTitle').text(!props.showFilter ? 'Label' : 'Filter'); - const categoryLabelColDOM = genColDOM(props.showLabel, 'Label', i18nHoverText.labelExplain, true, false, '', 'small-col'); - const filterColDOM = genColDOM(props.showFilter, 'Filter', i18nHoverText.filterLabelExplain, true, false, '', 'small-col'); - const catExpDOM = genColDOM(props.showCatExp, i18nHoverText.catExpLabel, i18nHoverText.catExp); - const colorTile = genColDOM(props.showColor, 'Color', props.colorAsDropdown ? i18nCommon.agPColorExplanation : i18nCommon.colorExplanation, false); + const categoryLabelColDOM = genColDOM( + props.showLabel, + 'Label', + i18nHoverText.labelExplain, + true, + false, + '', + 'small-col', + ); + const filterColDOM = genColDOM( + props.showFilter, + 'Filter', + i18nHoverText.filterLabelExplain, + true, + false, + '', + 'small-col', + ); + const catExpDOM = genColDOM( + props.showCatExp, + i18nHoverText.catExpLabel, + i18nHoverText.catExp, + ); + const colorTile = genColDOM( + props.showColor, + 'Color', + props.colorAsDropdown + ? i18nCommon.agPColorExplanation + : i18nCommon.colorExplanation, + false, + ); // const defaultColSize = ''; if (!props.isRadio) { if (props.noFilter) { - isChecked = (props.checkedIds && itemIds.some(e => props.checkedIds.includes(e))) ? '' : 'checked'; + isChecked = + props.checkedIds && + itemIds.some((e) => props.checkedIds.includes(e)) + ? '' + : 'checked'; noFilterOption = `
      CL
      `; } else { - isChecked = (props.checkedIds && !isEmpty(itemIds) - && itemIds.every(e => props.checkedIds.includes(e))) ? 'checked' : ''; + isChecked = + props.checkedIds && + !isEmpty(itemIds) && + itemIds.every((e) => props.checkedIds.includes(e)) + ? 'checked' + : ''; } const requiredClass = props.isRequired ? 'required-input' : ''; @@ -596,9 +816,13 @@ const addGroupListCheckboxWithSearch = (parentId, id, label, itemIds, itemVals, const labelClass = label ? 'flex-grow-1 border-gray-curve' : ''; const groupLabelClass = label ? '' : 'border-gray-curve'; const expandClass = isExpand ? 'expand-arrow' : ''; - const expandArrow = isExpand ? `` : ''; - const labelContent = label ? `
      -
      ${label}
      ` : ''; + const expandArrow = isExpand + ? `` + : ''; + const labelContent = label + ? `
      +
      ${label}
      ` + : ''; const groupList = `
      ${labelContent} @@ -616,17 +840,25 @@ const addGroupListCheckboxWithSearch = (parentId, id, label, itemIds, itemVals, $(`#${parentId}`).append(groupList); // show sensors as a floating list when hover for 1s - // eslint-disable-next-line no-use-before-define + showSensorAsFloatingList(sensorListId); // ADD EVENTS // check all event $(`#checkbox-all-${id + parentId}`).change(function f(e) { - $(`#${this.closest('.list-group').id} .checkbox-no-filter`).prop('checked', !$(this).prop('checked')); - $(`#${this.closest('.list-group').id} .${mainChkBoxClass}`).prop('checked', $(this).prop('checked')); + $(`#${this.closest('.list-group').id} .checkbox-no-filter`).prop( + 'checked', + !$(this).prop('checked'), + ); + $(`#${this.closest('.list-group').id} .${mainChkBoxClass}`).prop( + 'checked', + $(this).prop('checked'), + ); if ($(this).is(':checked') === false) { // reset objective - const objectiveEle = $(this.closest('ul.list-group')).find('input[name=objectiveVar]:checked'); + const objectiveEle = $(this.closest('ul.list-group')).find( + 'input[name=objectiveVar]:checked', + ); if (objectiveEle.data('is-target')) { objectiveEle.prop('checked', false); } @@ -644,32 +876,51 @@ const addGroupListCheckboxWithSearch = (parentId, id, label, itemIds, itemVals, }); // check all labels and filters $(`.checkbox-all-labels`).change(function f() { - $(`#${this.closest('.list-group').id} .as-label-input`).prop('checked', $(this).prop('checked')); + $(`#${this.closest('.list-group').id} .as-label-input`).prop( + 'checked', + $(this).prop('checked'), + ); return; }); // check to mark no filter $(`#checkbox-no-filter-${id + parentId}`).change(function f() { - $(`#${this.closest('.list-group').id} .checkbox-all`).prop('checked', !$(this).prop('checked')); - $(`#${this.closest('.list-group').id} .${mainChkBoxClass}`).prop('checked', !$(this).prop('checked')); + $(`#${this.closest('.list-group').id} .checkbox-all`).prop( + 'checked', + !$(this).prop('checked'), + ); + $(`#${this.closest('.list-group').id} .${mainChkBoxClass}`).prop( + 'checked', + !$(this).prop('checked'), + ); compareSettingChange(); }); // check event $(`#${id} .check-item`).on('change', function f(e) { - const checkboxNoFilter = $(`#${this.closest('.list-group').id} .checkbox-no-filter`); + const checkboxNoFilter = $( + `#${this.closest('.list-group').id} .checkbox-no-filter`, + ); const thresholdBox = $(`#threshold-${this.id}`); - const isCheckLimit = MAX_NUMBER_OF_SENSOR && /VALS_SELECT/.test($(this).attr('name')); + const isCheckLimit = + MAX_NUMBER_OF_SENSOR && /VALS_SELECT/.test($(this).attr('name')); if ($(this).is(':checked') === false) { - $(`#${this.closest('.list-group').id} .checkbox-all`).prop('checked', $(this).prop('checked')); + $(`#${this.closest('.list-group').id} .checkbox-all`).prop( + 'checked', + $(this).prop('checked'), + ); const parentRow = $(this.closest('li.list-group-item.form-check')); parentRow.find('[name=objectiveVar]').prop('checked', false); thresholdBox.prop('checked', false); if (isCheckLimit) { - limitedCheckedList = limitedCheckedList.filter((el) => $(el).attr('id') !== $(this).attr('id')); + limitedCheckedList = limitedCheckedList.filter( + (el) => $(el).attr('id') !== $(this).attr('id'), + ); if (isShowColorCheckBox) { $(this).removeAttr('data-sensor'); - $(this.closest('.list-group-item')).find('[name=catExpBox]').prop('disabled', false); + $(this.closest('.list-group-item')) + .find('[name=catExpBox]') + .prop('disabled', false); } } } else { @@ -677,8 +928,13 @@ const addGroupListCheckboxWithSearch = (parentId, id, label, itemIds, itemVals, if (isCheckLimit) { limitedCheckedList.push($(this)); if (isShowColorCheckBox) { - $(this.closest('.list-group-item')).find('[name=catExpBox]').val('').trigger('change'); - $(this.closest('.list-group-item')).find('[name=catExpBox]').prop('disabled', true); + $(this.closest('.list-group-item')) + .find('[name=catExpBox]') + .val('') + .trigger('change'); + $(this.closest('.list-group-item')) + .find('[name=catExpBox]') + .prop('disabled', true); } } } @@ -688,32 +944,55 @@ const addGroupListCheckboxWithSearch = (parentId, id, label, itemIds, itemVals, // Modify checkbox of ALL when all checkbox is checked // apply for card != filter condition - if ($(`#${id} .${mainChkBoxClass}:not([name="thresholdBox"]):checked`).length === itemIds.length) { + if ( + $(`#${id} .${mainChkBoxClass}:not([name="thresholdBox"]):checked`) + .length === itemIds.length + ) { if (!this.closest('.filter-condition-card')) { - $(`#${this.closest('.list-group').id} .checkbox-all`).prop('checked', true); + $(`#${this.closest('.list-group').id} .checkbox-all`).prop( + 'checked', + true, + ); } } else { - $(`#${this.closest('.list-group').id} .checkbox-all`).prop('checked', false); + $(`#${this.closest('.list-group').id} .checkbox-all`).prop( + 'checked', + false, + ); } // check no filter when uncheck all items - if ($(`#${id} .check-item:not([name="thresholdBox"]):not(:checked)`).length === itemIds.length) { - $(`#${this.closest('.list-group').id} .checkbox-no-filter`).prop('checked', true); + if ( + $(`#${id} .check-item:not([name="thresholdBox"]):not(:checked)`) + .length === itemIds.length + ) { + $(`#${this.closest('.list-group').id} .checkbox-no-filter`).prop( + 'checked', + true, + ); } // only allow selected 2 items in list - if (isCheckLimit && limitedCheckedList.length > MAX_NUMBER_OF_SENSOR && $(this).is(':checked')) { + if ( + isCheckLimit && + limitedCheckedList.length > MAX_NUMBER_OF_SENSOR && + $(this).is(':checked') + ) { // shift first item from list if $(this) is checked // to avoid shift/uncheck 2 items at same time // we should also remove count total variables from process which had a checkbox removed const idStart = 'end-proc-val-div-'; - let removedItemParentId = limitedCheckedList[0].closest(`div[id^=${idStart}`).attr('id'); + let removedItemParentId = limitedCheckedList[0] + .closest(`div[id^=${idStart}`) + .attr('id'); let removedItemGroupIdx = removedItemParentId.replace(idStart, ''); $(limitedCheckedList[0]).prop('checked', false); countVariables(removedItemParentId, removedItemGroupIdx); if (isShowColorCheckBox) { - $(limitedCheckedList[0].closest('.list-group-item')).find('[name=catExpBox]').prop('disabled', false); + $(limitedCheckedList[0].closest('.list-group-item')) + .find('[name=catExpBox]') + .prop('disabled', false); // remove data-sensor attr limitedCheckedList[0].removeAttr('data-sensor'); } @@ -723,9 +1002,13 @@ const addGroupListCheckboxWithSearch = (parentId, id, label, itemIds, itemVals, // in case of either x or y data type is string, color variable will be changed belong with string sensor. if (isShowColorCheckBox && limitedCheckedList.length > 0) { const xSensor = limitedCheckedList[0]; - const xSensorType = xSensor ? $(`#dataType-${xSensor.val()}`).val() : ''; + const xSensorType = xSensor + ? $(`#dataType-${xSensor.val()}`).val() + : ''; const ySensor = limitedCheckedList[1]; - const ySensorType = ySensor ? $(`#dataType-${ySensor.val()}`).val() : ''; + const ySensorType = ySensor + ? $(`#dataType-${ySensor.val()}`).val() + : ''; if (xSensor && xSensorType === DataTypes.STRING.short) { $(`#scp-color-${xSensor.val()}`).prop('checked', true); } else if (ySensor && ySensorType === DataTypes.STRING.short) { @@ -733,8 +1016,10 @@ const addGroupListCheckboxWithSearch = (parentId, id, label, itemIds, itemVals, } // set x, y flag - limitedCheckedList[0] && limitedCheckedList[0].attr('data-sensor', 'x'); - limitedCheckedList[1] && limitedCheckedList[1].attr('data-sensor', 'y'); + limitedCheckedList[0] && + limitedCheckedList[0].attr('data-sensor', 'x'); + limitedCheckedList[1] && + limitedCheckedList[1].attr('data-sensor', 'y'); compareSettingChange(); } @@ -743,7 +1028,6 @@ const addGroupListCheckboxWithSearch = (parentId, id, label, itemIds, itemVals, createOrUpdateSensorOrdering(e); }); - // remove check color radio button when click selected again $('.uncheck-when-click').on('click', (e) => { const currentEl = $(e.currentTarget).parent().find('input'); @@ -758,21 +1042,24 @@ const addGroupListCheckboxWithSearch = (parentId, id, label, itemIds, itemVals, handleSearchItems(id); // objectiveVar only choose one - $(`#${parentId} input:checkbox[name=objectiveVar]`).on('change', function () { - // in the handler, 'this' refers to the box clicked on - const $box = $(this); - if ($box.is(':checked')) { - // the name of the box is retrieved using the .attr() method - // as it is assumed and expected to be immutable - const group = `input:checkbox[name='${$box.attr('name')}']`; - // the checked state of the group/box on the other hand will change - // and the current value is retrieved using .prop() method - $(group).prop('checked', false); - $box.prop('checked', true); - } else { - $box.prop('checked', false); - } - }); + $(`#${parentId} input:checkbox[name=objectiveVar]`).on( + 'change', + function () { + // in the handler, 'this' refers to the box clicked on + const $box = $(this); + if ($box.is(':checked')) { + // the name of the box is retrieved using the .attr() method + // as it is assumed and expected to be immutable + const group = `input:checkbox[name='${$box.attr('name')}']`; + // the checked state of the group/box on the other hand will change + // and the current value is retrieved using .prop() method + $(group).prop('checked', false); + $box.prop('checked', true); + } else { + $box.prop('checked', false); + } + }, + ); addAttributeToElement(); if (parentId.includes('cond-proc-others')) { @@ -795,7 +1082,9 @@ const countVariables = (parentId, groupId) => { }; const countTotalVariables = () => { - let selectedVars = $('span[id^=count-variables-]').map((idx, ele) => parseInt($(ele).text())); + let selectedVars = $('span[id^=count-variables-]').map((idx, ele) => + parseInt($(ele).text()), + ); selectedVars = Array.from(selectedVars); let countVars = 0; if (selectedVars.length) { @@ -806,10 +1095,15 @@ const countTotalVariables = () => { $('#variables-count').show(); // check validate - if (countVars > MAX_NUMBER_OF_SENSOR || (MIN_NUMBER_OF_SENSOR > 0 && countVars > 0 && countVars < MIN_NUMBER_OF_SENSOR)) { + if ( + countVars > MAX_NUMBER_OF_SENSOR || + (MIN_NUMBER_OF_SENSOR > 0 && + countVars > 0 && + countVars < MIN_NUMBER_OF_SENSOR) + ) { $('#variables-count').css({ color: 'red', - }) + }); } else { $('#variables-count').removeAttr('style'); } @@ -836,7 +1130,7 @@ const onchangeJudge = (e) => { const _this = $(e); const parentRow = _this.parents('li'); const facetEl = parentRow.find('[name=catExpBox]'); - const isChecked = _this.prop('checked'); + const isChecked = $('input[name="judgeVar"]:checked').length > 0; const judgeConditionCard = $('#judgeConditionCard'); const NGCondition = $('#NGCondition'); const NGConditionValue = $('#NGConditionValue'); @@ -857,20 +1151,18 @@ const onchangeJudge = (e) => { // validate type = Int, and real input validateNumericInput(NGConditionValue); if (!Number(NGConditionValue.val())) { - NGConditionValue.val(0) + NGConditionValue.val(0); } } // reset facet in row - facetEl.val('') + facetEl.val(''); } else { judgeConditionCard.hide(); judgeConditionCard.find('input, select').prop('disabled', true); - } compareSettingChange(); - }; // Render search with set and reset button @@ -905,18 +1197,20 @@ const handleSearchItems = (id) => { value = makeRegexForSearchCondition(value); const regex = new RegExp(value, 'i'); - selectedEls = $(`#${searchEle.closest('.form-group').id} li`).filter(function f(index) { - const searchEls = $(this).find('.search-col'); - searchEls.removeClass('gray'); - const val = searchEls.text().toLowerCase(); - // keep to show first (header) row as index = 0 - if (index) { - $(this).toggle(regex.test(val)); + selectedEls = $(`#${searchEle.closest('.form-group').id} li`).filter( + function f(index) { + const searchEls = $(this).find('.search-col'); + searchEls.removeClass('gray'); + const val = searchEls.text().toLowerCase(); + // keep to show first (header) row as index = 0 + if (index) { + $(this).toggle(regex.test(val)); - return regex.test(val); - } - return false; - }); + return regex.test(val); + } + return false; + }, + ); if (event.keyCode === KEY_CODE.ENTER) { $(`#${searchEle.closest('.form-group').id} li`).filter(function () { @@ -929,7 +1223,7 @@ const handleSearchItems = (id) => { } else { $(el).removeClass('gray'); } - }) + }); if (!value) return false; return regex.test(val); @@ -939,26 +1233,46 @@ const handleSearchItems = (id) => { // handle on click set selected items button $(`#setBtnSearch-${id}`).on('click', function () { - selectedEls.find('input.main-checkbox').prop('checked', true).trigger('change'); + selectedEls + .find('input.main-checkbox') + .prop('checked', true) + .trigger('change'); sortCheckItems(); }); // handle on click reset selected items button $(`#resetBtnSearch-${id}`).on('click', function () { - const checkBoxNoFilter = originalCheckBoxs.find('input.checkbox-no-filter'); + const checkBoxNoFilter = originalCheckBoxs.find( + 'input.checkbox-no-filter', + ); if (checkBoxNoFilter.length && !selectedEls.length) { // reset in filter component - originalCheckBoxs.parent().find('input[name=thresholdBox]').prop('checked', false).trigger('change'); + originalCheckBoxs + .parent() + .find('input[name=thresholdBox]') + .prop('checked', false) + .trigger('change'); checkBoxNoFilter.prop('checked', true).trigger('change'); } if (selectedEls.length) { // reset only searched element - selectedEls.find('input.main-checkbox').prop('checked', false).trigger('change'); + selectedEls + .find('input.main-checkbox') + .prop('checked', false) + .trigger('change'); } if (!selectedEls.length && !checkBoxNoFilter.length) { // reset all input, select - originalCheckBoxs.parent().find('input[type=checkbox]').prop('checked', false).trigger('change'); - originalCheckBoxs.parent().find('input[type=radio]').prop('checked', false).trigger('change'); + originalCheckBoxs + .parent() + .find('input[type=checkbox]') + .prop('checked', false) + .trigger('change'); + originalCheckBoxs + .parent() + .find('input[type=radio]') + .prop('checked', false) + .trigger('change'); originalCheckBoxs.parent().find('select').val('').trigger('change'); } @@ -988,55 +1302,70 @@ const showSensorAsFloatingList = (sensorListId) => { $(that).addClass('disable-max-height'); // find max width of column - const dropDownWidthMin = $(window).width() - $(that).offset().left - 40; - const colWidths = $(that).find('li label').map((i, item) => $(item).width()); - const maxWidth = (Math.max(...colWidths)) * 2 + 380 || 0; + const dropDownWidthMin = + $(window).width() - $(that).offset().left - 40; + const colWidths = $(that) + .find('li label') + .map((i, item) => $(item).width()); + const maxWidth = Math.max(...colWidths) * 2 + 380 || 0; const selectBoxWidth = $(that).parent().width(); - const dropDownWidth = maxWidth > selectBoxWidth ? maxWidth : selectBoxWidth; + const dropDownWidth = + maxWidth > selectBoxWidth ? maxWidth : selectBoxWidth; const dropDownHeight = dropDownFullHeight + 2; - const leftHeightFromCurrentPosition = $(window).height() - $(that).get(0).getBoundingClientRect().top - 12; + const leftHeightFromCurrentPosition = + $(window).height() - + $(that).get(0).getBoundingClientRect().top - + 12; const windowWidth = $(window).width() - 100; if (dropDownWidth > dropDownWidthMin) { - $(that).css({transform: `translateX(-${dropDownWidth - dropDownWidthMin}px)`}); + $(that).css({ + transform: `translateX(-${dropDownWidth - dropDownWidthMin}px)`, + }); } - $(that).css({width: `${dropDownWidth}px`}); - $(that).css({maxWidth: `${windowWidth}px`}); + $(that).css({ width: `${dropDownWidth}px` }); + $(that).css({ maxWidth: `${windowWidth}px` }); if (dropDownHeight > leftHeightFromCurrentPosition) { - $(that).css({height: `${leftHeightFromCurrentPosition}px`}); + $(that).css({ height: `${leftHeightFromCurrentPosition}px` }); } else { - $(that).css({height: `${dropDownHeight}px`}); + $(that).css({ height: `${dropDownHeight}px` }); } - parent.css({height: `${parentHeight + 15}px`}); + parent.css({ height: `${parentHeight + 15}px` }); isExpand = true; }, 50); }); // dropDown.mouseleave(e => sortHtmlElements(e.target)); - dropDown.closest('.floating-dropdown-parent.expand-arrow').off('mouseleave'); - dropDown.closest('.floating-dropdown-parent.expand-arrow').on('mouseleave', (e) => { - if (!isExpand) { - // move selected options to top - const isChanged = sortHtmlElements(dropDown); - if (isChanged) { - $(dropDown).scrollTop(0); - } + dropDown + .closest('.floating-dropdown-parent.expand-arrow') + .off('mouseleave'); + dropDown + .closest('.floating-dropdown-parent.expand-arrow') + .on('mouseleave', (e) => { + if (!isExpand) { + // move selected options to top + const isChanged = sortHtmlElements(dropDown); + if (isChanged) { + $(dropDown).scrollTop(0); + } - return; - } + return; + } - timerOpen = setTimeout(() => { - collapseFloatingList(dropDown); - isExpand = false; - }, 2000); - }); + timerOpen = setTimeout(() => { + collapseFloatingList(dropDown); + isExpand = false; + }, 2000); + }); dropDown.mouseout(() => { clearTimeout(timerOpen); }); const checkAndCollapseFloatingList = (e) => { - const clickedInList = $(e.target).closest('.floating-dropdown-parent').length; + const clickedInList = $(e.target).closest( + '.floating-dropdown-parent', + ).length; if (!clickedInList) { collapseFloatingLists(); clearTimeout(timerOpen); @@ -1047,8 +1376,10 @@ const showSensorAsFloatingList = (sensorListId) => { $(document).on('click', checkAndCollapseFloatingList); }; - -const updateSelectedItems = (isCategoryItem = false, selectParent = $(formElements.endProcSelectedItem)) => { +const updateSelectedItems = ( + isCategoryItem = false, + selectParent = $(formElements.endProcSelectedItem), +) => { let selectedItems = []; let allSelected; if (isCategoryItem) { @@ -1065,7 +1396,10 @@ const updateSelectedItems = (isCategoryItem = false, selectParent = $(formElemen if (!['catExpBox', 'colorVar'].includes($(selected).attr('name'))) { $.each($(selected).find('option'), (key, option) => { const optionVal = $(option).val(); - if (selectedItems.includes(optionVal) && currentCardSelector !== optionVal) { + if ( + selectedItems.includes(optionVal) && + currentCardSelector !== optionVal + ) { $(option).attr('disabled', 'disabled'); } else if (!selectedItems.includes(optionVal)) { $(option).removeAttr('disabled'); @@ -1075,52 +1409,67 @@ const updateSelectedItems = (isCategoryItem = false, selectParent = $(formElemen }); }; -const cardRemovalByClick = (parentId = '', callbackFunc = null, dicParams = null) => { - $(`${parentId} .close-icon`).last().on('click', (e) => { - const card = $(e.currentTarget).closest('.card'); - if (!card.parent().parent().length) return; - const cardId = `${card.parent().parent().get(0).id}`; - - if (cardId.endsWith('end-proc-row')) { - if (card && card.parent().parent().find('.card').length > 1) { - card.fadeOut(); - setTimeout(() => { - card.parent().remove(); - countTotalVariables(); - updateSelectedItems(); - checkIfProcessesAreLinked(); - }, 100); - } - } else if (cardId.endsWith('end-proc-cate-row') || cardId.endsWith('category-cond-proc-row')) { - if (card && card.parent().parent().find('.card').length > 1) { - card.fadeOut(); - setTimeout(() => { - card.parent().remove(); - updateSelectedItems(isCategoryItem = true); - }, 100); +const cardRemovalByClick = ( + parentId = '', + callbackFunc = null, + dicParams = null, +) => { + $(`${parentId} .close-icon`) + .last() + .on('click', (e) => { + const card = $(e.currentTarget).closest('.card'); + if (!card.parent().parent().length) return; + const cardId = `${card.parent().parent().get(0).id}`; + + if (cardId.endsWith('end-proc-row')) { + if (card && card.parent().parent().find('.card').length > 1) { + card.fadeOut(); + setTimeout(() => { + card.parent().remove(); + countTotalVariables(); + updateSelectedItems(); + checkIfProcessesAreLinked(); + }, 100); + } + } else if ( + cardId.endsWith('end-proc-cate-row') || + cardId.endsWith('category-cond-proc-row') + ) { + if (card && card.parent().parent().find('.card').length > 1) { + card.fadeOut(); + setTimeout(() => { + card.parent().remove(); + updateSelectedItems((isCategoryItem = true)); + }, 100); + } + } else if ( + card && + (cardId.endsWith('cond-proc-row') || + cardId.startsWith('end-proc-paracords')) + ) { + if (card && card.parent().parent().find('.card').length > 0) { + card.fadeOut(); + setTimeout(() => { + card.parent().remove(); + updateSelectedItems( + false, + $(formElements.condProcSelectedItem), + ); + }, 100); + } } - } else if (card && (cardId.endsWith('cond-proc-row') - || cardId.startsWith('end-proc-paracords'))) { - if (card && card.parent().parent().find('.card').length > 0) { - card.fadeOut(); + if (callbackFunc) { setTimeout(() => { - card.parent().remove(); - updateSelectedItems(false, $(formElements.condProcSelectedItem)); - }, 100); + if (dicParams) { + callbackFunc(dicParams); + } else { + callbackFunc(); + } + }, 200); } - } - if (callbackFunc) { - setTimeout(() => { - if (dicParams) { - callbackFunc(dicParams); - } else { - callbackFunc(); - } - }, 200); - } - setProcessID(); - }); + setProcessID(); + }); }; // get filter by type @@ -1137,17 +1486,22 @@ const getFilterByTypes = (process, filterType) => { }); return [filterIDs, filterVals]; } - return procFilters.map(filter => ({ + return procFilters.map((filter) => ({ id: filter.id, title: filter.name, name: filter.name, - ids: filter.filter_details.map(fd => fd.id), - vals: filter.filter_details.map(fd => fd.name), + ids: filter.filter_details.map((fd) => fd.id), + vals: filter.filter_details.map((fd) => fd.name), })); }; // Condition Line change event -const condLineOnChange = async (selectedLines, count, prefix = '', isNew = false) => { +const condLineOnChange = async ( + selectedLines, + count, + prefix = '', + isNew = false, +) => { const selectedProc = $(`#${prefix}cond-proc-process-${count}`).val(); if (selectedLines.length === 0) { $(`#${prefix}cond-proc-machine-div-${count}`).css('display', 'none'); @@ -1165,10 +1519,15 @@ const condLineOnChange = async (selectedLines, count, prefix = '', isNew = false if (!isEmpty(procInfo)) { await procInfo.updateFilters(); - const machineFilter = procInfo.getOneFilterByType(filterTypes.MACHINE); + const machineFilter = procInfo.getOneFilterByType( + filterTypes.MACHINE, + ); if (machineFilter) { const filterDetails = machineFilter.filter_details || []; - if (selectedLines.includes(filterOptions.ALL.toLowerCase()) || selectedLines.includes(formElements.NO_FILTER.toLowerCase())) { + if ( + selectedLines.includes(filterOptions.ALL.toLowerCase()) || + selectedLines.includes(formElements.NO_FILTER.toLowerCase()) + ) { filterDetails.forEach((filterDetail) => { machineIds.push(filterDetail.id); machineVals.push(filterDetail.name); @@ -1176,7 +1535,9 @@ const condLineOnChange = async (selectedLines, count, prefix = '', isNew = false } else { filterDetails.forEach((filterDetail) => { selectedLines.forEach((line, i) => { - if (`${line}` === `${filterDetail.parent_detail_id}`) { + if ( + `${line}` === `${filterDetail.parent_detail_id}` + ) { machineIds.push(filterDetail.id); machineVals.push(filterDetail.name); } @@ -1195,34 +1556,42 @@ const condLineOnChange = async (selectedLines, count, prefix = '', isNew = false if (machineIds) { const machineLabel = i18nCommon.mach || ''; const thresholdBoxes = []; - machineIds.forEach(e => thresholdBoxes.push(hasGraphCfgsFilterDetails.includes(e))); + machineIds.forEach((e) => + thresholdBoxes.push(hasGraphCfgsFilterDetails.includes(e)), + ); addGroupListCheckboxWithSearch( parentId, elId, machineLabel, machineIds, - machineVals, { + machineVals, + { checkedIds, name: elName, noFilter: true, - thresholdBoxes - }); + thresholdBoxes, + }, + ); } } else { // hide and disabled show filter, not generate from scratch if (machineIds) { // hide all machine elements - const allInput = $(`input[name=${elName}]`).not(`[value=${CONST.NO_FILTER}],[value=All]`); + const allInput = $(`input[name=${elName}]`).not( + `[value=${CONST.NO_FILTER}],[value=All]`, + ); allInput.attr('disabled', true); allInput.closest('li').hide(); for (const machineId of machineIds) { - $(`input[name=${elName}][value=${machineId}]`).removeAttr('disabled'); - $(`input[name=${elName}][value=${machineId}]`).closest('li').show(); + $(`input[name=${elName}][value=${machineId}]`).removeAttr( + 'disabled', + ); + $(`input[name=${elName}][value=${machineId}]`) + .closest('li') + .show(); } } } - - } }; @@ -1255,7 +1624,9 @@ const condProcOnChange = async (count, prefix = '', parentFormId = '') => { if (lineIds) { const thresholdBoxes = []; - lineIds.forEach(e => thresholdBoxes.push(hasGraphCfgsFilterDetails.includes(e))); + lineIds.forEach((e) => + thresholdBoxes.push(hasGraphCfgsFilterDetails.includes(e)), + ); addGroupListCheckboxWithSearch( `${prefix}cond-proc-line-div-${count}`, condProcMachineLineId, @@ -1265,15 +1636,19 @@ const condProcOnChange = async (count, prefix = '', parentFormId = '') => { { name: `filter-line-machine-id${count}`, noFilter: true, - thresholdBoxes - }); + thresholdBoxes, + }, + ); - const lineInputs = $(document.getElementsByName(`filter-line-machine-id${count}`)); + const lineInputs = $( + document.getElementsByName(`filter-line-machine-id${count}`), + ); let selectedLines = []; lineInputs.change(() => { selectedLines = []; for (let i = 0; i < lineInputs.length; i++) { - if (lineInputs[i].checked) selectedLines.push(lineInputs[i].value.toLowerCase()); + if (lineInputs[i].checked) + selectedLines.push(lineInputs[i].value.toLowerCase()); } condLineOnChange(selectedLines, count, prefix); }); @@ -1282,12 +1657,17 @@ const condProcOnChange = async (count, prefix = '', parentFormId = '') => { condLineOnChange(['all'], count, prefix, true); } - const [partnoIds, partnoVals] = getFilterByTypes(procInfo, filterTypes.PART_NO); + const [partnoIds, partnoVals] = getFilterByTypes( + procInfo, + filterTypes.PART_NO, + ); let parentId = `${prefix}cond-proc-partno-div-${count}`; if (partnoIds) { const thresholdBoxes = []; - partnoIds.forEach(e => thresholdBoxes.push(hasGraphCfgsFilterDetails.includes(e))); + partnoIds.forEach((e) => + thresholdBoxes.push(hasGraphCfgsFilterDetails.includes(e)), + ); // load partno multi checkbox to Condition Proc. addGroupListCheckboxWithSearch( @@ -1299,19 +1679,20 @@ const condProcOnChange = async (count, prefix = '', parentFormId = '') => { { name: `filter-partno${count}`, noFilter: true, - thresholdBoxes - } + thresholdBoxes, + }, ); } - const filterOthers = getFilterByTypes(procInfo, filterTypes.OTHER); parentId = `${prefix}cond-proc-others-div-${count}`; if (filterOthers.length) { filterOthers.forEach((filter, k) => { if (filter.title) { const thresholdBoxes = []; - filter.ids.forEach(e => thresholdBoxes.push(hasGraphCfgsFilterDetails.includes(e))); + filter.ids.forEach((e) => + thresholdBoxes.push(hasGraphCfgsFilterDetails.includes(e)), + ); addGroupListCheckboxWithSearch( parentId, `${prefix}cond-proc-filterother-${filter.id}-${count}`, @@ -1321,8 +1702,8 @@ const condProcOnChange = async (count, prefix = '', parentFormId = '') => { { name: `filter-other-${filter.id}-${count}`, noFilter: true, - thresholdBoxes - } + thresholdBoxes, + }, ); } }); @@ -1333,7 +1714,13 @@ const condProcOnChange = async (count, prefix = '', parentFormId = '') => { }; // add condition proc -const addCondProc = (procIds, procVals, prefix = '', parentFormId = '', dataGenBtn = 'btn-add-cond-proc') => { +const addCondProc = ( + procIds, + procVals, + prefix = '', + parentFormId = '', + dataGenBtn = 'btn-add-cond-proc', +) => { let count = 1; const innerFunc = () => { const itemList = []; @@ -1341,7 +1728,9 @@ const addCondProc = (procIds, procVals, prefix = '', parentFormId = '', dataGenB const itemId = procIds[i]; const itemVal = procVals[i].shown_name; const itemEnVal = procVals[i].name_en; - itemList.push(``); + itemList.push( + ``, + ); } while (checkExistDataGenBtn(dataGenBtn, count, parentFormId)) { @@ -1374,14 +1763,16 @@ const addCondProc = (procIds, procVals, prefix = '', parentFormId = '', dataGenB
      `; $(`#${prefix}cond-proc-row div`).last().before(proc); bindFilterRemoveEvents(`#${prefix}cond-proc-row div`); - cardRemovalByClick(`#${prefix}cond-proc-row div`, bindRemoveFilterCondByCards); + cardRemovalByClick( + `#${prefix}cond-proc-row div`, + bindRemoveFilterCondByCards, + ); addAttributeToElement(); updateSelectedItems(false, $(formElements.condProcSelectedItem)); }; return innerFunc; }; - const onChangeForDateTimeGroup = (parentEle = null) => { const targetClass = '.datetime-group-with-radio-btn'; let targetEle; @@ -1392,16 +1783,24 @@ const onChangeForDateTimeGroup = (parentEle = null) => { } targetEle.each((i, e) => { - $(e).find('input,select').not('input:radio').on('change', (event) => { - const ele = event.currentTarget; - $(ele).parents('.datetime-group-with-radio-btn').find('input:radio').prop('checked', true); - }); + $(e) + .find('input,select') + .not('input:radio') + .on('change', (event) => { + const ele = event.currentTarget; + $(ele) + .parents('.datetime-group-with-radio-btn') + .find('input:radio') + .prop('checked', true); + }); }); }; const genTotalAndNonLinkedHTML = (summaryOption, generalInfo) => { const linkedTotal = summaryOption.ntotal - summaryOption.countUnlinked; - const nTotalHTML = isEmpty(summaryOption.ntotal) ? '-' : `${applySignificantDigit(linkedTotal)} (${applySignificantDigit(summaryOption.linkedPct)}%)`; + const nTotalHTML = isEmpty(summaryOption.ntotal) + ? '-' + : `${applySignificantDigit(linkedTotal)} (${applySignificantDigit(summaryOption.linkedPct)}%)`; let noLinkedHTML = ''; if (`${generalInfo.endProcName}` !== `${generalInfo.startProc}`) { @@ -1425,12 +1824,16 @@ const changeFacetLevel = (e) => { const currentTabID = ''; const judgeEl = $(e).parents('li').find('[name=judgeVar]:checked'); - const findSameLevelSet = $(`#${currentTabID}end-proc-row select[name=catExpBox][id!=${currentSelectedID}]`); + const findSameLevelSet = $( + `#${currentTabID}end-proc-row select[name=catExpBox][id!=${currentSelectedID}]`, + ); if (currentLevelSet === facetLevels.LV_1) { $(findSameLevelSet).each((_, sel) => { if ($(sel).val() === facetLevels.LV_1) { // find level 2 - const level2Selected = findSameLevelSet.find(`option:selected[value=${facetLevels.LV_2}]`); + const level2Selected = findSameLevelSet.find( + `option:selected[value=${facetLevels.LV_2}]`, + ); if (level2Selected.length) { $(sel).val(facetLevels.UNSET); } else { @@ -1442,7 +1845,9 @@ const changeFacetLevel = (e) => { $(findSameLevelSet).each((_, sel) => { if ($(sel).val() === facetLevels.LV_2) { // find level 1 - const level1Selected = findSameLevelSet.find(`option:selected[value=${facetLevels.LV_1}]`); + const level1Selected = findSameLevelSet.find( + `option:selected[value=${facetLevels.LV_1}]`, + ); if (level1Selected.length) { $(sel).val(facetLevels.UNSET); } else { @@ -1460,7 +1865,9 @@ const changeFacetLevel = (e) => { // uncheck target variable for STP if (formID.endsWith('categoricalPlotForm')) { - const targetVarDOM = $(e).closest('.row').find('input[name^=GET02_VALS_SELECT]'); + const targetVarDOM = $(e) + .closest('.row') + .find('input[name^=GET02_VALS_SELECT]'); const targetVarSelected = targetVarDOM.is(':checked'); if (currentLevelSet && targetVarSelected) { targetVarDOM.prop('checked', false); @@ -1475,8 +1882,13 @@ const changeFacetLevel = (e) => { updateStyleButtonByCheckingValid(); }; - -const dateTimeRangePickerHTML = (dtName, dtId, prefix, isSetDefaultValue = 'False', props = '') => ( +const dateTimeRangePickerHTML = ( + dtName, + dtId, + prefix, + isSetDefaultValue = 'False', + props = '', +) => ` @@ -1485,8 +1897,7 @@ const dateTimeRangePickerHTML = (dtName, dtId, prefix, isSetDefaultValue = 'Fals - ` -); + `; /** * @@ -1496,7 +1907,9 @@ const dateTimeRangePickerHTML = (dtName, dtId, prefix, isSetDefaultValue = 'Fals const resizeListOptionSelect2 = (select2El) => { select2El.off('select2:open'); select2El.on('select2:open', (e) => { - const selects = $('.select2-container.select2-container--default.select2-container--open'); + const selects = $( + '.select2-container.select2-container--default.select2-container--open', + ); const targetSelect = $(selects[selects.length - 1]); const top = targetSelect.css('top'); const left = targetSelect.css('left'); @@ -1512,17 +1925,32 @@ const resizeListOptionSelect2 = (select2El) => { }; const resetSummaryOption = (name) => { - $(`input[name=${name}][value='none']`).prop('checked', true).trigger('change'); + $(`input[name=${name}][value='none']`) + .prop('checked', true) + .trigger('change'); $(`input[name=${name}]`).removeAttr('data-checked'); }; const checkSummaryOption = (name) => { - $(`input[name=${name}]:checked`).prop('checked', false).prop('checked', true).trigger('change'); + $(`input[name=${name}]:checked`) + .prop('checked', false) + .prop('checked', true) + .trigger('change'); }; -const buildSummaryChartTitle = (catExpValue, catExpBoxCols, facetName, isShowDate, timeCond, isShowFilterModal = false) => { - const facets = checkTrue(catExpValue) ? catExpValue.toString().split(' | ') : []; - const hasFacet = catExpBoxCols.length > 0 && facetName.length > 0 && facets.length > 0; // fpp co NA +const buildSummaryChartTitle = ( + catExpValue, + catExpBoxCols, + facetName, + isShowDate, + timeCond, + isShowFilterModal = false, +) => { + const facets = checkTrue(catExpValue) + ? catExpValue.toString().split(' | ') + : []; + const hasFacet = + catExpBoxCols.length > 0 && facetName.length > 0 && facets.length > 0; // fpp co NA const hasLevel2 = hasFacet && facets.length === 2; const isShowTitle = hasFacet || isShowDate; const hasLevel12OnRightBox = isShowDate && hasLevel2; @@ -1539,15 +1967,20 @@ const buildSummaryChartTitle = (catExpValue, catExpBoxCols, facetName, isShowDat const timeText = ` ${startDate} ${startTime} -
      ${endDate} ${endTime}       `; - const facetLevel1Text = hasFacet ? ` + const facetLevel1Text = hasFacet + ? ` ${facetName[0]} ${facets[0]} - ` : ''; - const facetLevel2Text = hasLevel2 ? ` + ` + : ''; + const facetLevel2Text = hasLevel2 + ? ` ${facetName[1]} ${facets[1]} - ` : ''; - const isShowBoxRight = isShowDate && hasFacet || !isShowDate && hasLevel2; + ` + : ''; + const isShowBoxRight = + (isShowDate && hasFacet) || (!isShowDate && hasLevel2); let rightBoxDOM = ''; if (isShowBoxRight) { @@ -1574,8 +2007,8 @@ const getColorFromScale = (pointValue, maxCorr = 1) => { // max = 0.5 -> 1 // min = 0 -> 0 - const offsetPer = maxCorr ? (1 / maxCorr) : 1; - const vValue = 0.3 + ((pointValue * offsetPer) * 0.7); + const offsetPer = maxCorr ? 1 / maxCorr : 1; + const vValue = 0.3 + pointValue * offsetPer * 0.7; if (Number.isNaN(vValue)) return null; const color = hsv2rgb({ @@ -1590,9 +2023,14 @@ const getAllGroupOfSensor = (sensorData) => { const ranks = {}; let rankIDs = []; sensorData.forEach((sensorDat, i) => { - if (sensorDat.before_rank_values && sensorDat.before_rank_values.length) { - if (sensorDat.before_rank_values[0].length - && sensorDat.before_rank_values[1].length) { + if ( + sensorDat.before_rank_values && + sensorDat.before_rank_values.length + ) { + if ( + sensorDat.before_rank_values[0].length && + sensorDat.before_rank_values[1].length + ) { sensorDat.before_rank_values[0].forEach((rank, k) => { if (!rankIDs.includes(rank)) { ranks[rank] = sensorDat.before_rank_values[1][k]; @@ -1642,13 +2080,12 @@ const changeObjectiveVarEvent = () => { }; const isLinkedWithStartProcess = async (end_proc_id, start_proc_id) => { - const url = `/ap/api/setting/proc_config/${end_proc_id}/traces_with/${start_proc_id}` + const url = `/ap/api/setting/proc_config/${end_proc_id}/traces_with/${start_proc_id}`; const res = await fetchData(url, {}, 'GET'); return res.data; -} +}; const setColorRelativeStartEndProc = () => { - const startProc = $('select[name=start_proc]'); const startProcVal = startProc.val(); const endProcs = $('select[name^=end_proc]'); @@ -1656,7 +2093,6 @@ const setColorRelativeStartEndProc = () => { // no data link -> start proc blue -> all end proc black startProc.addClass('blue-color'); endProcs.removeClass('blue-color'); - } if (startProcVal === '') { @@ -1675,65 +2111,75 @@ const setColorRelativeStartEndProc = () => { } else if ($(el).val()) { $(el).addClass('blue-color'); } - }) + }); } }; const checkIfProcessesAreLinked = async () => { - if(isSettingLoading){ - return + if (isSettingLoading) { + return; } const startProc = $('select[name=start_proc]'); const startProcVal = startProc.val(); const endProcs = $('select[name^=end_proc]'); - const warningSigns = $('svg[id^=no-link-with-start-proc]') - warningSigns.css({display: 'none'}); + const warningSigns = $('svg[id^=no-link-with-start-proc]'); + warningSigns.css({ display: 'none' }); hideAlertMessages(); if (startProcVal === '') { - const startProcId = $(endProcs[0]).val() + const startProcId = $(endProcs[0]).val(); let displayAlert = false; for (const el of endProcs) { - if(($(el).val() === startProcId) || !$(el).val()){ - continue + if ($(el).val() === startProcId || !$(el).val()) { + continue; } - const warningSign = $(el).siblings('svg[id^=no-link-with-start-proc]') - const hasLink = await isLinkedWithStartProcess($(el).val(), startProcId) + const warningSign = $(el).siblings( + 'svg[id^=no-link-with-start-proc]', + ); + const hasLink = await isLinkedWithStartProcess( + $(el).val(), + startProcId, + ); if (hasLink) { - warningSign.css({display: 'none'}); + warningSign.css({ display: 'none' }); } else { - warningSign.css({display: 'block'}); + warningSign.css({ display: 'block' }); displayAlert = true; } } if (displayAlert) { - displayRegisterMessage("#alertNoLinkConfig", { + displayRegisterMessage('#alertNoLinkConfig', { is_error: true, - message: $("#i18nNoLinkConfig").text(), - }) + message: $('#i18nNoLinkConfig').text(), + }); } else hideAlertMessages(); } if (startProcVal && startProcVal !== '0') { let displayAlert = false; for (const el of endProcs) { - if(!$(el).val()){ - continue + if (!$(el).val()) { + continue; } - const warningSign = $(el).siblings('svg[id^=no-link-with-start-proc]'); - const hasLink = await isLinkedWithStartProcess($(el).val(), startProcVal); + const warningSign = $(el).siblings( + 'svg[id^=no-link-with-start-proc]', + ); + const hasLink = await isLinkedWithStartProcess( + $(el).val(), + startProcVal, + ); if (hasLink) { - warningSign.css({display: 'none'}); + warningSign.css({ display: 'none' }); } else { - warningSign.css({display: 'block'}); + warningSign.css({ display: 'block' }); displayAlert = true; } } if (displayAlert) { - displayRegisterMessage("#alertNoLinkConfig", { + displayRegisterMessage('#alertNoLinkConfig', { is_error: true, - message: $("#i18nNoLinkConfig").text(), - }) - } else hideAlertMessages() + message: $('#i18nNoLinkConfig').text(), + }); + } else hideAlertMessages(); } -} \ No newline at end of file +}; diff --git a/ap/static/common/js/config_data_interface.js b/ap/static/common/js/config_data_interface.js index 382f814..1c1df47 100644 --- a/ap/static/common/js/config_data_interface.js +++ b/ap/static/common/js/config_data_interface.js @@ -65,7 +65,7 @@ const DataTypes = Object.freeze({ exp: 'i18nCTTypeExplain', org_type: 'DATETIME', operator: [''], - selectionBoxDisplay: 'Datetime' + selectionBoxDisplay: 'Datetime', }, DATE: { name: 'DATE', @@ -76,7 +76,7 @@ const DataTypes = Object.freeze({ exp: 'i18nCTTypeExplain', org_type: 'DATE', operator: [''], - selectionBoxDisplay: 'Datetime' + selectionBoxDisplay: 'Datetime', }, TIME: { name: 'TIME', @@ -87,7 +87,7 @@ const DataTypes = Object.freeze({ exp: 'i18nCTTypeExplain', org_type: 'TIME', operator: [''], - selectionBoxDisplay: 'Datetime' + selectionBoxDisplay: 'Datetime', }, TEXT: { name: 'TEXT', @@ -99,7 +99,7 @@ const DataTypes = Object.freeze({ exp: 'i18nString', org_type: 'TEXT', operator: ['', 'Valid-like'], - selectionBoxDisplay: "Str", + selectionBoxDisplay: 'Str', }, REAL_SEP: { name: 'REAL_SEP', @@ -164,13 +164,27 @@ const DataTypes = Object.freeze({ name: 'BOOLEAN', short: 'Bool', i18nLabelID: 'i18nBool', - } + selectionBoxDisplay: 'Boolean', + column_type: 77, + }, + JUDGE: { + name: 'JUDGE', + short: 'Judge', + i18nLabelID: 'i18nJudgementDataTypeHover', + exp: 'i18nJudge', + }, }); const dataTypeShort = (col) => { if (col.is_serial_no) { return DataTypes.SERIAL.short; } + if (col.column_type === DataTypes.BOOLEAN.column_type) { + return DataTypes.BOOLEAN.short; + } + if (col.is_judge) { + return DataTypes.JUDGE.short; + } if (col.is_int_category && !col.is_serial_no) { return DataTypes.CATEGORY.short; } @@ -178,28 +192,70 @@ const dataTypeShort = (col) => { return dataType ? DataTypes[dataType].short : ''; }; - const filterTypes = { LINE: 'LINE', MACHINE: 'MACHINE_ID', PART_NO: 'PART_NO', OTHER: 'OTHER', -} +}; const filterOptions = { NO_FILTER: 'NO_FILTER', ALL: 'ALL', -} +}; const CfgProcess_CONST = { - REAL_TYPES: [DataTypes.REAL.name, DataTypes.EU_REAL_SEP.name, DataTypes.REAL_SEP.name], - NUMERIC_TYPES: [DataTypes.REAL.name, DataTypes.INTEGER.name, DataTypes.EU_REAL_SEP.name, DataTypes.REAL_SEP.name, DataTypes.INTEGER_SEP.name, DataTypes.EU_INTEGER_SEP.name], - NUMERIC_AND_STR_TYPES: [DataTypes.REAL.name, DataTypes.INTEGER.name, DataTypes.STRING.name, DataTypes.TEXT.name, DataTypes.EU_REAL_SEP.name, DataTypes.REAL_SEP.name, DataTypes.INTEGER_SEP.name, DataTypes.EU_INTEGER_SEP.name], - ALL_TYPES: [DataTypes.DATETIME.name, DataTypes.REAL.name, DataTypes.INTEGER.name, DataTypes.STRING.name, DataTypes.TEXT.name, DataTypes.EU_REAL_SEP.name, DataTypes.REAL_SEP.name, DataTypes.INTEGER_SEP.name, DataTypes.EU_INTEGER_SEP.name], - CATEGORY_TYPES: [DataTypes.STRING.name, DataTypes.INTEGER.name, DataTypes.TEXT.name, DataTypes.INTEGER_SEP.name, DataTypes.EU_INTEGER_SEP.name, DataTypes.BIG_INT.name], + REAL_TYPES: [ + DataTypes.REAL.name, + DataTypes.EU_REAL_SEP.name, + DataTypes.REAL_SEP.name, + ], + NUMERIC_TYPES: [ + DataTypes.REAL.name, + DataTypes.INTEGER.name, + DataTypes.EU_REAL_SEP.name, + DataTypes.REAL_SEP.name, + DataTypes.INTEGER_SEP.name, + DataTypes.EU_INTEGER_SEP.name, + DataTypes.DATETIME.name, + ], + NUMERIC_AND_STR_TYPES: [ + DataTypes.REAL.name, + DataTypes.INTEGER.name, + DataTypes.STRING.name, + DataTypes.TEXT.name, + DataTypes.EU_REAL_SEP.name, + DataTypes.REAL_SEP.name, + DataTypes.INTEGER_SEP.name, + DataTypes.EU_INTEGER_SEP.name, + ], + ALL_TYPES: [ + DataTypes.DATETIME.name, + DataTypes.REAL.name, + DataTypes.INTEGER.name, + DataTypes.STRING.name, + DataTypes.TEXT.name, + DataTypes.EU_REAL_SEP.name, + DataTypes.REAL_SEP.name, + DataTypes.INTEGER_SEP.name, + DataTypes.EU_INTEGER_SEP.name, + ], + CATEGORY_TYPES: [ + DataTypes.STRING.name, + DataTypes.INTEGER.name, + DataTypes.TEXT.name, + DataTypes.INTEGER_SEP.name, + DataTypes.EU_INTEGER_SEP.name, + DataTypes.BIG_INT.name, + ], CT_TYPES: [DataTypes.DATETIME.name], - EU_TYPE_VALUE: [DataTypes.REAL_SEP.value, DataTypes.EU_REAL_SEP.value, DataTypes.INTEGER_SEP.value, DataTypes.EU_INTEGER_SEP.value] -} + EU_TYPE_VALUE: [ + DataTypes.REAL_SEP.value, + DataTypes.EU_REAL_SEP.value, + DataTypes.INTEGER_SEP.value, + DataTypes.EU_INTEGER_SEP.value, + ], +}; class CfgColumn { id; @@ -215,19 +271,18 @@ class CfgColumn { is_serial_no; is_int_category; is_category; + is_judge; is_linking_column; operator; coef; order; constructor(inObj) { - // set data Object.assign(this, inObj); } } - class CfgFilter { id; name; @@ -268,7 +323,6 @@ class CfgVisualization { } } - class CfgProcess { id; name; @@ -302,7 +356,7 @@ class CfgProcess { if (inObj && inObj.columns) { const colJsons = inObj.columns || []; for (const colJson of colJsons) { - this.addColumn(colJson) + this.addColumn(colJson); } } @@ -329,69 +383,85 @@ class CfgProcess { const newColumn = new CfgColumn(column); this.columns.push(newColumn); this.dicColumns[newColumn.id] = newColumn; - } + }; addFilter = (filter) => { this.filters.push(new CfgFilter(filter)); - } + }; addVisualization = (visualizationJson) => { this.visualizations.push(new CfgVisualization(visualizationJson)); - } + }; getColumns = () => { return this.columns; - } + }; getColumnById = (colId) => { return this.dicColumns[colId]; - } + }; getFilters = () => { return this.filters; - } + }; getVisualizations = () => { return this.visualizations; - } + }; getFiltersByType = (filterType) => { if (this.filters) { - return this.filters.filter(pf => pf.filter_type === filterType); + return this.filters.filter((pf) => pf.filter_type === filterType); } - return; - } + return null; + }; getOneFilterByType = (filterType) => { - const relevantFilters = this.filters.filter(filter => filter.filter_type === filterType); + const relevantFilters = this.filters.filter( + (filter) => filter.filter_type === filterType, + ); if (relevantFilters.length) { return relevantFilters[0]; } return null; - } + }; getFilterByColumnId = (columnId) => { - const relevantFilters = this.filters.filter(filter => `${filter.column_id}` === `${columnId}`); + const relevantFilters = this.filters.filter( + (filter) => `${filter.column_id}` === `${columnId}`, + ); if (relevantFilters.length) { return relevantFilters[0]; } return null; - } + }; getCategoryColumns() { - return this.columns.filter(col => CfgProcess_CONST.CATEGORY_TYPES.includes(col.data_type)); + return this.columns.filter((col) => + CfgProcess_CONST.CATEGORY_TYPES.includes(col.data_type), + ); } getNumericColumns() { - return this.columns.filter(col => CfgProcess_CONST.NUMERIC_TYPES.includes(col.data_type)); + return this.columns.filter((col) => + CfgProcess_CONST.NUMERIC_TYPES.includes(col.data_type), + ); } getCTColumn() { - return this.columns.filter(col => CfgProcess_CONST.CT_TYPES.includes(col.data_type) && col.is_get_date); + return this.columns.filter( + (col) => + CfgProcess_CONST.CT_TYPES.includes(col.data_type) && + col.is_get_date, + ); } getDatetimeColumns() { - return this.columns.filter(col => CfgProcess_CONST.CT_TYPES.includes(col.data_type) && !col.is_get_date); + return this.columns.filter( + (col) => + CfgProcess_CONST.CT_TYPES.includes(col.data_type) && + !col.is_get_date, + ); } updateColumns = async () => { @@ -400,7 +470,7 @@ class CfgProcess { } else { await this.getColumnFromDB(); } - } + }; getColumnFromDB = async () => { const url = `/ap/api/setting/proc_config/${this.id}/columns`; @@ -413,9 +483,7 @@ class CfgProcess { this.dicColumns[cfgColumn.id] = cfgColumn; } } - } - - + }; updateFilters = async () => { if (this.filters && this.filters.length) { @@ -423,12 +491,12 @@ class CfgProcess { } else { await this.updateProcFilters(); } - } + }; // get filter from process config updateProcFilters = async () => { const url = `/ap/api/setting/proc_config/${this.id}/filters`; - const res = await fetchData(url, {}, 'GET'); + const res = await fetchData(url, {}, 'GET'); this.filters = []; if (res.data) { for (let filterItem of res.data) { @@ -436,23 +504,26 @@ class CfgProcess { this.filters.push(cfgFilter); } } - } + }; setColumnData = (columnId, data) => { this.dicColumnData[columnId] = data; - } + }; getColumnData = (columnId) => { return this.dicColumnData[columnId] || []; - } + }; updateColDataFromUDB = async (columnId) => { - if (this.dicColumnData[columnId] && this.dicColumnData[columnId].length) { + if ( + this.dicColumnData[columnId] && + this.dicColumnData[columnId].length + ) { return; } else { await this.getColumnDataFromUDB(columnId); } - } + }; getColumnDataFromUDB = async (columnId) => { if (isEmpty(columnId)) return; @@ -461,12 +532,12 @@ class CfgProcess { if (res.data) { this.dicColumnData[columnId] = res.data || []; } - } - + }; + getXAxisSetting = () => { const columns = this.columns; return columns; - } + }; getCTRange = async () => { const url = `/ap/api/setting/proc_config/${this.id}/get_ct_range`; @@ -474,7 +545,7 @@ class CfgProcess { if (res.data) { this.ct_range = res.data; } - } + }; } class CfgDataSourceDB { @@ -523,7 +594,7 @@ class CfgDataSourceCSV { this.csv_columns = []; const csv_cols = inObj.csv_columns || []; for (const csv_col of csv_cols) { - this.add_column(csv_col) + this.add_column(csv_col); } } @@ -550,7 +621,7 @@ class CfgDataSource { this.processes = []; const procs = inObj.processes || []; for (const proc of procs) { - this.add_process(proc) + this.add_process(proc); } this.csv_detail = new CfgDataSourceCSV(inObj.csv_detail); @@ -565,22 +636,24 @@ class CfgDataSource { function sortByOrderOrID(proc1, proc2) { const order1 = proc1.order + 1 || proc1.id; const order2 = proc2.order + 1 || proc2.id; - return ((order1 < order2) ? -1 : ((order1 > order2) ? 1 : 0)); + return order1 < order2 ? -1 : order1 > order2 ? 1 : 0; } const genProcessDropdownData = (procConfigs = {}) => { const ids = ['']; const names = ['---']; - Object.values(procConfigs).sort(sortByOrderOrID).forEach((proc) => { - ids.push(proc.id); - names.push({ - shown_name: proc.shown_name, - name_en: proc.name_en, + Object.values(procConfigs) + .sort(sortByOrderOrID) + .forEach((proc) => { + ids.push(proc.id); + names.push({ + shown_name: proc.shown_name, + name_en: proc.name_en, + }); }); - }); return { ids, names, }; -} \ No newline at end of file +}; diff --git a/ap/static/common/js/data-finder.js b/ap/static/common/js/data-finder.js index ab1a79e..87ef229 100644 --- a/ap/static/common/js/data-finder.js +++ b/ap/static/common/js/data-finder.js @@ -1,5 +1,3 @@ -/* eslint-disable no-unused-vars,linebreak-style,arrow-body-style */ - const calenderTypes = { year: 'year', month: 'month', @@ -26,9 +24,42 @@ let isDataFinderShowing = false; const weekDays = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']; const weekDays2 = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; const jaWeekDays = ['月', '火', '水', '木', '金', '土', '日']; -const enMonth = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; -const enFullMonth = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] -const colorsData = ['#18324c', '#204465', '#2d5e88', '#3b7aae', '#56b0f4', '#6dc3fd']; +const enMonth = [ + 'Jan', + 'Feb', + 'Mar', + 'Apr', + 'May', + 'Jun', + 'Jul', + 'Aug', + 'Sep', + 'Oct', + 'Nov', + 'Dec', +]; +const enFullMonth = [ + 'January', + 'February', + 'March', + 'April', + 'May', + 'June', + 'July', + 'August', + 'September', + 'October', + 'November', + 'December', +]; +const colorsData = [ + '#18324c', + '#204465', + '#2d5e88', + '#3b7aae', + '#56b0f4', + '#6dc3fd', +]; const colorDic = { 0: '#222222', 1: '#18324c', @@ -44,7 +75,7 @@ const DATE_TIME_FMT = 'YYYY-MM-DD HH:mm'; let processId = null; const getColor = (max, count) => { - const per = count / max * 100; + const per = (count / max) * 100; let newPer = per; if (per > 0 && per <= 15) { newPer = 1; @@ -95,6 +126,33 @@ const dataFinderEls = { showSingleYearCalendar: '#showSingleYearCalendar', }; +/** + * Add cache function to reload data count for Backup&Restore Modal + * @param {function(): void} func - get data count function + * @param {?boolean} isTableFrom - true: is left table, false: is right table, null: only one table + */ +const addCacheFunctionForBackupRestoreModal = (func, isTableFrom = null) => { + // Cache function for Backup&Restore Modal + const backupAndRestoreModal = + /** @type{HTMLDivElement} */ document.getElementById( + 'backupAndRestoreModal', + ); + if (backupAndRestoreModal) { + if (isTableFrom == null) { + backupAndRestoreModal.cacheFunction = func; + } else { + if ( + backupAndRestoreModal.cacheFunction == null || + _.isFunction(backupAndRestoreModal.cacheFunction) + ) { + backupAndRestoreModal.cacheFunction = {}; + } + + const key = isTableFrom ? 'tableFrom' : 'tableTo'; + backupAndRestoreModal.cacheFunction[key] = func; + } + } +}; // Common function block START const setValueFromToInput = (from = null, to = null, type) => { @@ -121,10 +179,13 @@ const getFromToInputByType = (type) => { const setDefaultValueOfCalender = (type) => { defaultDateTime = getDefaultDateTime(); - const currentDatetimeRangeVal = typeof(currentDateRangeEl) == 'object' ? currentDateRangeEl.val() : currentDateRangeEl; + const currentDatetimeRangeVal = + typeof currentDateRangeEl == 'object' + ? currentDateRangeEl.val() + : currentDateRangeEl; if (type === calenderTypes.month) { const currentSetDateRange = currentDatetimeRangeVal; - let { startDate, endDate } = splitDateTimeRange(currentSetDateRange) + let { startDate, endDate } = splitDateTimeRange(currentSetDateRange); if (!endDate) { endDate = moment(startDate).add(1, 'months').format(DATE_FMT); } @@ -139,19 +200,52 @@ const setDefaultValueOfCalender = (type) => { // setMonthFromTo(defaultDateTime.firstDayOfMonth, defaultDateTime.date); const firstDate = startDateObj ? startDateObj : defaultDateTime; const lastDate = endDateObj ? endDateObj : defaultDateTime; - const fromDate = startDateObj ? firstDate.date : firstDate.firstDayOfMonth; + const fromDate = startDateObj + ? firstDate.date + : firstDate.firstDayOfMonth; setValueFromToInput(fromDate, lastDate.date, type); let prevMonth = firstDate; // if from and to is same then - 1 - if (moment(`${firstDate.year}-${firstDate.month}`).isSame(`${lastDate.year}-${lastDate.month}`)) { - prevMonth = getPrevMonthFromCalendar(firstDate.year, firstDate.month); + if ( + moment(`${firstDate.year}-${firstDate.month}`).isSame( + `${lastDate.year}-${lastDate.month}`, + ) + ) { + prevMonth = getPrevMonthFromCalendar( + firstDate.year, + firstDate.month, + ); } generateMonthCalender(prevMonth.year, prevMonth.month, true, true); generateMonthCalender(lastDate.year, lastDate.month, false, true); + addCacheFunctionForBackupRestoreModal( + () => + generateMonthCalender( + prevMonth.year, + prevMonth.month, + true, + true, + ), + true, + ); + addCacheFunctionForBackupRestoreModal( + () => + generateMonthCalender( + lastDate.year, + lastDate.month, + false, + true, + ), + false, + ); } else { const from = `${fromInput}-01`; - const selectedTo = moment(`${toInput}-01`).endOf('month').format(DATE_FMT); - const to = moment().isBefore(selectedTo) ? moment().format(DATE_FMT) : selectedTo; + const selectedTo = moment(`${toInput}-01`) + .endOf('month') + .format(DATE_FMT); + const to = moment().isBefore(selectedTo) + ? moment().format(DATE_FMT) + : selectedTo; let fromObj = getDateObject(from); let toObj = getDateObject(to); // monthFrom = monthFrom === monthTo ? monthFrom - 1 : monthFrom; @@ -159,11 +253,33 @@ const setDefaultValueOfCalender = (type) => { setValueFromToInput(from, to, type); // if from and to is same then - 1 let prevMonth = fromObj; - if (moment(`${fromObj.year}-${fromObj.month}`).isSame(`${toObj.year}-${toObj.month}`)) { - prevMonth = getPrevMonthFromCalendar(fromObj.year, fromObj.month); + if ( + moment(`${fromObj.year}-${fromObj.month}`).isSame( + `${toObj.year}-${toObj.month}`, + ) + ) { + prevMonth = getPrevMonthFromCalendar( + fromObj.year, + fromObj.month, + ); } generateMonthCalender(prevMonth.year, prevMonth.month, true, true); generateMonthCalender(toObj.year, toObj.month, false, true); + addCacheFunctionForBackupRestoreModal( + () => + generateMonthCalender( + prevMonth.year, + prevMonth.month, + true, + true, + ), + true, + ); + addCacheFunctionForBackupRestoreModal( + () => + generateMonthCalender(toObj.year, toObj.month, false, true), + false, + ); } } @@ -176,17 +292,31 @@ const setDefaultValueOfCalender = (type) => { const defaultFromInput = `${fromInput} 00:00`; // next day of 00:00 const selectedTo = `${moment(toInput).add(1, 'days').format(DATE_FMT)} 00:00`; - const defaultToInput = moment().isBefore(selectedTo) ? moment().format(DATE_TIME_FMT) : selectedTo; - let startOfLastWeek = moment(defaultToInput).subtract(6, 'days').format(DATE_FMT); + const defaultToInput = moment().isBefore(selectedTo) + ? moment().format(DATE_TIME_FMT) + : selectedTo; + let startOfLastWeek = moment(defaultToInput) + .subtract(6, 'days') + .format(DATE_FMT); const fromEndDate = moment(fromInput).add(6, 'days').format(DATE_FMT); if (moment(startOfLastWeek).isBefore(fromEndDate)) { - startOfLastWeek = moment(fromEndDate).add(1, 'days').format(DATE_FMT); + startOfLastWeek = moment(fromEndDate) + .add(1, 'days') + .format(DATE_FMT); } setValueFromToInput(defaultFromInput, defaultToInput, type); generateWeekCalender(fromInput); generateWeekCalender(startOfLastWeek, false); + addCacheFunctionForBackupRestoreModal( + () => generateWeekCalender(fromInput), + true, + ); + addCacheFunctionForBackupRestoreModal( + () => generateWeekCalender(startOfLastWeek, false), + false, + ); } if (type === calenderTypes.year) { @@ -201,14 +331,20 @@ const setDefaultValueOfCalender = (type) => { const fromObj = getDateObject(fromInput); const toObj = getDateObject(toInput); generateYearCalendar(Number(toInput.split('-')[0]) - YEARS + 1); - setValueFromToInput(`${fromObj.year}-${addZeroToNumber(fromObj.month)}`, `${toObj.year}-${addZeroToNumber(toObj.month)}`, type); + setValueFromToInput( + `${fromObj.year}-${addZeroToNumber(fromObj.month)}`, + `${toObj.year}-${addZeroToNumber(toObj.month)}`, + type, + ); } } }; const switchCalender = (type) => { // set from to label - $(dataFinderEls.dataFinderInputLabel).text(isCyclicTermTab ? 'From' : 'From To'); + $(dataFinderEls.dataFinderInputLabel).text( + isCyclicTermTab ? 'From' : 'From To', + ); $('#data-finder-card').show(); $('.calender-box').hide(); @@ -256,9 +392,9 @@ function getRandomInt(max) { } // Common function block END - // handling function START const showDataFinderModal = (e) => { + addCacheFunctionForBackupRestoreModal(() => showDataFinderModal(e)); isDataFinderShowing = true; currentDateRangeEl = $(e).parent().find('[name^=DATETIME]'); if (!currentDateRangeEl.get().length) { @@ -283,6 +419,7 @@ const closeCalenderModal = () => { }; const handleGoToCalender = (type) => { + addCacheFunctionForBackupRestoreModal(() => handleGoToCalender(type)); switchCalender(type); setDefaultValueOfCalender(type); }; @@ -290,9 +427,9 @@ const handleGoToCalender = (type) => { const getPrevMonthFromCalendar = (year, month) => { let prevMonth = month - 1; if (prevMonth) { - return { year, month: prevMonth } + return { year, month: prevMonth }; } - return { year: year - 1, month: 12 } + return { year: year - 1, month: 12 }; }; const handleBackToCalender = (type) => { // get old value and fill input @@ -305,15 +442,48 @@ const handleBackToCalender = (type) => { let monthFrom = moment(fromInput).month() + 1; const monthTo = moment(toInput).month() + 1; // monthFrom = monthTo === monthFrom ? monthFrom - 1 : monthFrom; - const prevMonth = getPrevMonthFromCalendar(moment(fromInput).year(), monthFrom); + const prevMonth = getPrevMonthFromCalendar( + moment(fromInput).year(), + monthFrom, + ); generateMonthCalender(prevMonth.year, prevMonth.month, true, true); generateMonthCalender(moment(toInput).year(), monthTo, false, true); + addCacheFunctionForBackupRestoreModal( + () => + generateMonthCalender( + prevMonth.year, + prevMonth.month, + true, + true, + ), + true, + ); + addCacheFunctionForBackupRestoreModal( + () => + generateMonthCalender( + moment(toInput).year(), + monthTo, + false, + true, + ), + false, + ); } if (type === calenderTypes.week) { - const startOfLastWeek = moment(toInput).subtract(6, 'days').format(DATE_FMT); + const startOfLastWeek = moment(toInput) + .subtract(6, 'days') + .format(DATE_FMT); generateWeekCalender(fromInput); generateWeekCalender(startOfLastWeek, false); + addCacheFunctionForBackupRestoreModal( + () => generateWeekCalender(fromInput), + true, + ); + addCacheFunctionForBackupRestoreModal( + () => generateWeekCalender(startOfLastWeek, false), + false, + ); } }; @@ -325,29 +495,38 @@ const handleApplyYearInput = (from) => { } }; -const handleSetValueToDateRangePicker = (inputVal = null, closeModal = true) => { +const handleSetValueToDateRangePicker = ( + inputVal = null, + closeModal = true, +) => { // const [from, to] = getFromToInputByType(calenderTypes.week); if (!inputVal) { inputVal = $(dataFinderEls.inputFromTo).val(); if (currentCalendarType === calenderTypes.month) { // add default start time -> 00:00 // add default end time -> next day of 00:00 - const d = splitDateTimeRange(inputVal) - const nextEndDate = moment(d.endDate).add(1, 'days').format(DATE_FMT); + const d = splitDateTimeRange(inputVal); + const nextEndDate = moment(d.endDate) + .add(1, 'days') + .format(DATE_FMT); inputVal = `${d.startDate} 00:00 ${DATETIME_PICKER_SEPARATOR} ${nextEndDate} 00:00`; } if (currentCalendarType === calenderTypes.year) { // add default start date time = first day of this month 00:00 // add default end date time = end day of this month 24:00 - const d = splitDateTimeRange(inputVal) - const endDate = moment(`${d.endDate}-01`).endOf('month').format(DATE_FMT); + const d = splitDateTimeRange(inputVal); + const endDate = moment(`${d.endDate}-01`) + .endOf('month') + .format(DATE_FMT); const nextEndDate = moment(endDate).add(1, 'days').format(DATE_FMT); - inputVal = `${d.startDate}-01 00:00 ${DATETIME_PICKER_SEPARATOR} ${nextEndDate} 00:00` + inputVal = `${d.startDate}-01 00:00 ${DATETIME_PICKER_SEPARATOR} ${nextEndDate} 00:00`; } } - if (!(typeof(currentDateRangeEl) == 'object')) { - $('input[name=DATETIME_PICKER]').val(inputVal.split(` ${COMMON_CONSTANT.EN_DASH} `)[0]).trigger('change'); + if (!(typeof currentDateRangeEl == 'object')) { + $('input[name=DATETIME_PICKER]') + .val(inputVal.split(` ${COMMON_CONSTANT.EN_DASH} `)[0]) + .trigger('change'); } else { currentDateRangeEl.val(inputVal).trigger('change'); } @@ -380,20 +559,30 @@ const createDaysForPreviousMonth = (year, month, firstDayOfMonth) => { const previousMonth = moment(`${year}-${month}-01`).subtract(1, 'months'); // Cover first day of the month being sunday (firstDayOfTheMonthWeekday === 0) - const visibleNumberOfDaysFromPreviousMonth = firstDayOfTheMonthWeekday ? firstDayOfTheMonthWeekday - 1 : 6; - - const previousMonthLastMondayDayOfMonth = moment(firstDayOfMonth.date).subtract(visibleNumberOfDaysFromPreviousMonth, 'days').date(); - - return [...Array(visibleNumberOfDaysFromPreviousMonth)].map((day, index) => { - const date = moment(`${previousMonth.year()}-${previousMonth.month() + 1}-${previousMonthLastMondayDayOfMonth + index}`); - return getDateObject(date, false); - }); + const visibleNumberOfDaysFromPreviousMonth = firstDayOfTheMonthWeekday + ? firstDayOfTheMonthWeekday - 1 + : 6; + + const previousMonthLastMondayDayOfMonth = moment(firstDayOfMonth.date) + .subtract(visibleNumberOfDaysFromPreviousMonth, 'days') + .date(); + + return [...Array(visibleNumberOfDaysFromPreviousMonth)].map( + (day, index) => { + const date = moment( + `${previousMonth.year()}-${previousMonth.month() + 1}-${previousMonthLastMondayDayOfMonth + index}`, + ); + return getDateObject(date, false); + }, + ); }; const createDaysForNextMonth = (year, month, remainingDays) => { const nextMonth = moment(`${year}-${month}-01`).add(1, 'months'); return [...Array(remainingDays)].map((day, index) => { - const date = moment(`${nextMonth.year()}-${nextMonth.month() + 1}-${index + 1}`); + const date = moment( + `${nextMonth.year()}-${nextMonth.month() + 1}-${index + 1}`, + ); return getDateObject(date, false); }); }; @@ -407,10 +596,12 @@ const createMonthTableView = (year, month, from = true) => { const id = from ? 'monthTableFrom' : 'monthTableTo'; $(`#${id}`).remove(); - const weekdaysEls = weekDays.map((week, index) => { - const cl = [5, 6].includes(index) ? 'inactive' : ''; - return `${week}`; - }).join(''); + const weekdaysEls = weekDays + .map((week, index) => { + const cl = [5, 6].includes(index) ? 'inactive' : ''; + return `${week}`; + }) + .join(''); const table = ` @@ -445,7 +636,12 @@ const createMonthTableView = (year, month, from = true) => { }; const disableMonthArrowButton = () => { - if (moment(monthFrom).isSame(moment(monthTo).subtract(1, 'months').format(DATE_FMT), 'month')) { + if ( + moment(monthFrom).isSame( + moment(monthTo).subtract(1, 'months').format(DATE_FMT), + 'month', + ) + ) { $('.from-calendar-go-to .next-month').attr('disabled', true); $('.to-calendar-go-to .previous-month').attr('disabled', true); } else { @@ -457,7 +653,12 @@ const disableMonthArrowButton = () => { const disableWeekArrowButton = () => { const fromEndDate = moment(weekFromStartDate).add(6, 'days'); - if (fromEndDate.isSame(moment(weekToStartDate).subtract(1, 'days').format(DATE_FMT), 'day')) { + if ( + fromEndDate.isSame( + moment(weekToStartDate).subtract(1, 'days').format(DATE_FMT), + 'day', + ) + ) { $('.from-calendar-go-to .next-week').attr('disabled', true); $('.to-calendar-go-to .previous-week').attr('disabled', true); } else { @@ -468,18 +669,36 @@ const disableWeekArrowButton = () => { const initMonthSelectors = (tableEl, year, month, isFrom) => { disableMonthArrowButton(); - tableEl.find('.previous-month').on('click', () => { + tableEl.find('.previous-month').on('click', (e) => { const preMonth = moment(`${year}-${month}-01`).subtract(1, 'months'); generateMonthCalender(preMonth.year(), preMonth.month() + 1, isFrom); disableMonthArrowButton(); + addCacheFunctionForBackupRestoreModal( + () => + generateMonthCalender( + preMonth.year(), + preMonth.month() + 1, + isFrom, + ), + isFrom, + ); }); - tableEl.find('.next-month').on('click', () => { + tableEl.find('.next-month').on('click', (e) => { const nextMonth = moment(`${year}-${month}-01`).add(1, 'months'); generateMonthCalender(nextMonth.year(), nextMonth.month() + 1, isFrom); disableMonthArrowButton(); + addCacheFunctionForBackupRestoreModal( + () => + generateMonthCalender( + nextMonth.year(), + nextMonth.month() + 1, + isFrom, + ), + isFrom, + ); }); tableEl.find('#showSingleYearCalendar').on('click', (e) => { @@ -489,17 +708,22 @@ const initMonthSelectors = (tableEl, year, month, isFrom) => { generateSingleYearCalendar(year, month); // show with this position - const { clientX, clientY} = e.originalEvent; + const { clientX, clientY } = e.originalEvent; $(dataFinderEls.singleMonthCalendar).css({ display: 'block', top: `${clientY + 25}px`, left: `${clientX - 45}px`, zIndex: 90, - }) - }) + }); + }); }; -const generateMonthCalender = (year, month, isFrom = true, useFromInput = false) => { +const generateMonthCalender = ( + year, + month, + isFrom = true, + useFromInput = false, +) => { if (isFrom) { setMonthFromTo(`${year}-${month}`, null); } else { @@ -512,11 +736,15 @@ const generateMonthCalender = (year, month, isFrom = true, useFromInput = false) let dayIndex = 0; const tbody = tableEl.find('tbody'); for (let row = 1; row <= WEEKS; row += 1) { - let tds = days[dayIndex] ? `` : ''; + let tds = days[dayIndex] + ? `` + : ''; for (let col = 1; col <= DAYS; col += 1) { const currDate = days[dayIndex]; const hoverMsg = `Date: ${currDate.date}BRCount: 0`; - tds += currDate ? `` : ''; + tds += currDate + ? `` + : ''; dayIndex += 1; } @@ -533,34 +761,55 @@ const generateMonthCalender = (year, month, isFrom = true, useFromInput = false) rangeCell(calenderTypes.month); }; - const getDaysOfMonth = (year, month) => { const currentMonthDays = createDaysForCurrentMonth(year, month); - const previousMonthDays = createDaysForPreviousMonth(year, month, currentMonthDays[0]); - const remainingDays = 42 - (currentMonthDays.length + previousMonthDays.length); + const previousMonthDays = createDaysForPreviousMonth( + year, + month, + currentMonthDays[0], + ); + const remainingDays = + 42 - (currentMonthDays.length + previousMonthDays.length); const nextMonthDays = createDaysForNextMonth(year, month, remainingDays); const days = [...previousMonthDays, ...currentMonthDays, ...nextMonthDays]; return days; -} - +}; -const generateSingleMonthCalendar = (year = 2023, month = 1, startDate, endDate) => { +const generateSingleMonthCalendar = ( + year = 2023, + month = 1, + startDate, + endDate, +) => { const days = getDaysOfMonth(year, month); const locale = docCookies.getItem('locale') || 'en'; - const showYearMonth = locale === 'ja' ? `${year}年${month}月` : `${enFullMonth[month - 1]} ${year}`; + const showYearMonth = + locale === 'ja' + ? `${year}年${month}月` + : `${enFullMonth[month - 1]} ${year}`; $(dataFinderEls.singleDateCalendarShowYearMonth).text(showYearMonth); $(dataFinderEls.singleDateCalendarBody).empty(); const showDayList = locale === 'ja' ? jaWeekDays : weekDays; - let daysHtml = showDayList.map(day => `
      ${day}
      `).join(''); + let daysHtml = showDayList + .map( + (day) => + `
      ${day}
      `, + ) + .join(''); for (const day of days) { let isInThisSelectedWeek = false; let firstItem = false; let lastItem = false; if (startDate && endDate) { - if (moment(day.date).isAfter(startDate) && moment(day.date).isBefore(endDate) || day.date === startDate || day.date === endDate) { + if ( + (moment(day.date).isAfter(startDate) && + moment(day.date).isBefore(endDate)) || + day.date === startDate || + day.date === endDate + ) { isInThisSelectedWeek = true; } @@ -571,25 +820,24 @@ const generateSingleMonthCalendar = (year = 2023, month = 1, startDate, endDate) lastItem = true; } } - daysHtml += `
      ${day.dayOfMonth}
      `; + daysHtml += `
      ${day.dayOfMonth}
      `; } $(dataFinderEls.singleDateCalendarBody).append(daysHtml); initGoToNextPrevMonth(year, month); }; const initGoToNextPrevYear = (year) => { - $(dataFinderEls.singleMonthCalendarGoToNextYear).off('click'); $(dataFinderEls.singleMonthCalendarGoToNextYear).on('click', () => { const nextYear = year + 1; generateSingleYearCalendar(nextYear); - }) + }); $(dataFinderEls.singleMonthCalendarGoToPrevYear).off('click'); $(dataFinderEls.singleMonthCalendarGoToPrevYear).on('click', () => { const prevYear = year - 1; generateSingleYearCalendar(prevYear); - }) + }); $('.single-month-calendar-item').off('click'); $('.single-month-calendar-item').on('click', (e) => { @@ -599,48 +847,87 @@ const initGoToNextPrevYear = (year) => { const currentMonthDay = `${year}-${addZeroToNumber(month)}-01 00:00`; const prevMonth = moment(currentMonthDay).subtract(1, 'months'); - const nextMonth = moment(currentMonthDay).add(1, 'months').format(DATE_TIME_FMT); - - - generateMonthCalender(prevMonth.year(), prevMonth.month() + 1, true, false); + const nextMonth = moment(currentMonthDay) + .add(1, 'months') + .format(DATE_TIME_FMT); + + generateMonthCalender( + prevMonth.year(), + prevMonth.month() + 1, + true, + false, + ); generateMonthCalender(year, month, false, false); // set input setValueFromToInput(currentMonthDay, nextMonth, calenderTypes.month); - }) + addCacheFunctionForBackupRestoreModal( + () => + generateMonthCalender( + prevMonth.year(), + prevMonth.month() + 1, + true, + false, + ), + true, + ); + addCacheFunctionForBackupRestoreModal( + () => generateMonthCalender(year, month, false, false), + false, + ); + }); $(dataFinderEls.singleMonthCalendarThisWeek).off('click'); $(dataFinderEls.singleMonthCalendarThisWeek).on('click', (e) => { const currentDate = moment(); - const startOfThisWeek = currentDate.startOf('isoWeek').format(DATE_TIME_FMT); - const lastWeek = moment(startOfThisWeek).subtract('7', 'days').format(DATE_TIME_FMT); - const endOfThisWeek = currentDate.endOf('isoWeek').add(1, 'days').format('YYYY-MM-DD 00:00'); - setValueFromToInput(startOfThisWeek, endOfThisWeek, calenderTypes.month); + const startOfThisWeek = currentDate + .startOf('isoWeek') + .format(DATE_TIME_FMT); + const lastWeek = moment(startOfThisWeek) + .subtract('7', 'days') + .format(DATE_TIME_FMT); + const endOfThisWeek = currentDate + .endOf('isoWeek') + .add(1, 'days') + .format('YYYY-MM-DD 00:00'); + setValueFromToInput( + startOfThisWeek, + endOfThisWeek, + calenderTypes.month, + ); handleGoToCalender('week'); generateWeekCalender(startOfThisWeek, false); generateWeekCalender(lastWeek, true); setValueFromToInput(startOfThisWeek, endOfThisWeek, calenderTypes.week); handleSetValueToDateRangePicker(null, false); hideSingleCalendar(); + addCacheFunctionForBackupRestoreModal( + () => generateWeekCalender(startOfThisWeek, false), + false, + ); + addCacheFunctionForBackupRestoreModal( + () => generateWeekCalender(lastWeek, true), + true, + ); }); }; const hideSingleCalendar = () => { $('.single-calendar').hide(); -} +}; const initGoToNextPrevMonth = (year, month) => { $(dataFinderEls.singleDateCalendarGoToNextMonth).off('click'); $(dataFinderEls.singleDateCalendarGoToNextMonth).on('click', () => { const nextMonth = moment(`${year}-${month}-01`).add(1, 'months'); generateSingleMonthCalendar(nextMonth.year(), nextMonth.month() + 1); - }) + }); $(dataFinderEls.singleDateCalendarGoToPrevMonth).off('click'); $(dataFinderEls.singleDateCalendarGoToPrevMonth).on('click', () => { const nextMonth = moment(`${year}-${month}-01`).subtract(1, 'months'); generateSingleMonthCalendar(nextMonth.year(), nextMonth.month() + 1); - }) + }); $('.single-date-calendar-item').off('click'); $('.single-date-calendar-item').on('click', (e) => { @@ -648,8 +935,10 @@ const initGoToNextPrevMonth = (year, month) => { const date = _this.attr('data'); const startWeekDate = moment(date).startOf('week').format(DATE_FMT); - const startOldWeekDate = moment(startWeekDate).subtract(1, 'days').startOf('week').format(DATE_FMT); - + const startOldWeekDate = moment(startWeekDate) + .subtract(1, 'days') + .startOf('week') + .format(DATE_FMT); generateWeekCalender(startOldWeekDate, true); generateWeekCalender(startWeekDate, false); @@ -659,22 +948,32 @@ const initGoToNextPrevMonth = (year, month) => { // set input setValueFromToInput(from, to, calenderTypes.week); - }) + addCacheFunctionForBackupRestoreModal( + () => generateWeekCalender(startOldWeekDate, true), + true, + ); + addCacheFunctionForBackupRestoreModal( + () => generateWeekCalender(startWeekDate, false), + false, + ); + }); $(dataFinderEls.singleDateCalendarThisDate).off('click'); $(dataFinderEls.singleDateCalendarThisDate).on('click', (e) => { - // * Weekly calendar has "今日(En: Today)" button. If user push the button, the app shows daily calendar and input today's "From to" on input box. + // * Weekly calendar has "今日(En: Today)" button. If user push the button, the app shows daily calendar and input today's "From to" on input box. const from = moment().format('YYYY-MM-DD 00:00'); const to = moment().add(1, 'days').format('YYYY-MM-DD 00:00'); setValueFromToInput(from, to, calenderTypes.week); setValueFromToInput(from, to, calenderTypes.month); - handleSetValueToDateRangePicker(`${from}${DATETIME_PICKER_SEPARATOR}${to}`, false); + handleSetValueToDateRangePicker( + `${from}${DATETIME_PICKER_SEPARATOR}${to}`, + false, + ); handleBackToCalender('month'); hideSingleCalendar(); }); -} - +}; const generateSingleYearCalendar = (year = 2023, month) => { const locale = docCookies.getItem('locale') || 'en'; @@ -694,7 +993,11 @@ const generateSingleYearCalendar = (year = 2023, month) => { }; const fillColorMonthCalender = async (from, to, isFrom) => { - const { data, max_val } = await getDataByType(from, to, calenderTypes.month); + const { data, max_val } = await getDataByType( + from, + to, + calenderTypes.month, + ); if (!data) return; const { count } = data; let nextDate = moment(from); @@ -804,9 +1107,12 @@ const generateWeekCalender = (startDate, isFrom = true) => { } else { setWeekFromToStartDate(null, startDate); } - startDate = moment(startDate).startOf('isoWeek').format(DATE_FMT) + startDate = moment(startDate).startOf('isoWeek').format(DATE_FMT); const startDateMoment = moment(startDate); - const [tableEl, days, endDate] = createWeekTableView(startDateMoment, isFrom); + const [tableEl, days, endDate] = createWeekTableView( + startDateMoment, + isFrom, + ); let hourCellEls = ''; for (let row = 0; row < HOURS; row += 1) { @@ -828,7 +1134,11 @@ const generateWeekCalender = (startDate, isFrom = true) => { }; const fillColorWeekCalender = async (fromDate, toDate, days, isFrom) => { - const { data, max_val } = await getDataByType(fromDate, toDate, calenderTypes.week); + const { data, max_val } = await getDataByType( + fromDate, + toDate, + calenderTypes.week, + ); if (!data) return; let nextDate = moment(fromDate); const daysNumber = Math.abs(nextDate.diff(toDate, 'days')) + 1; @@ -837,7 +1147,9 @@ const fillColorWeekCalender = async (fromDate, toDate, days, isFrom) => { for (let h = 0; h < HOURS; h += 1) { const count = data[currDate] ? data[currDate].count[h] : 0; const color = getColor(max_val, count); - const id = isFrom ? `week-from-${currDate}-${h}` : `week-to-${currDate}-${h}`; + const id = isFrom + ? `week-from-${currDate}-${h}` + : `week-to-${currDate}-${h}`; $(`#${id}`).css({ backgroundColor: color, }); @@ -851,7 +1163,7 @@ const fillColorWeekCalender = async (fromDate, toDate, days, isFrom) => { const initWeekSelectors = (tableEl, startDate, isFrom) => { disableWeekArrowButton(); - tableEl.find('.previous-week').on('click', () => { + tableEl.find('.previous-week').on('click', (e) => { let previousStartDate = startDate.subtract(7, 'days').format(DATE_FMT); if (!isFrom) { // check to is greater than from @@ -862,36 +1174,51 @@ const initWeekSelectors = (tableEl, startDate, isFrom) => { } generateWeekCalender(previousStartDate, isFrom); disableWeekArrowButton(); + addCacheFunctionForBackupRestoreModal( + () => generateWeekCalender(previousStartDate, isFrom), + isFrom, + ); }); - tableEl.find('.next-week').on('click', () => { + tableEl.find('.next-week').on('click', (e) => { let nextStartDate = startDate.add(7, 'days').format(DATE_FMT); if (isFrom) { // check from is smaller than to const nextEndDate = moment(nextStartDate).add('6', 'days'); if (moment(nextEndDate).isAfter(weekToStartDate, 'day')) { - nextStartDate = moment(weekToStartDate).subtract(7, 'days').format(DATE_FMT); + nextStartDate = moment(weekToStartDate) + .subtract(7, 'days') + .format(DATE_FMT); } } generateWeekCalender(nextStartDate, isFrom); disableWeekArrowButton(); + addCacheFunctionForBackupRestoreModal( + () => generateWeekCalender(nextStartDate, isFrom), + isFrom, + ); }); tableEl.find('#showSingleMonthCalendar').on('click', (e) => { const _this = $(e.currentTarget); const startDate = _this.attr('start-date'); const endDate = _this.attr('end-date'); - generateSingleMonthCalendar(Number(startDate.split('-')[0]), Number(startDate.split('-')[1]), startDate, endDate); + generateSingleMonthCalendar( + Number(startDate.split('-')[0]), + Number(startDate.split('-')[1]), + startDate, + endDate, + ); - // show with this position - const { clientX, clientY} = e.originalEvent; + // show with this position + const { clientX, clientY } = e.originalEvent; $(dataFinderEls.singleDateCalendar).css({ display: 'block', top: `${clientY + 25}px`, left: `${clientX - 45}px`, zIndex: 90, - }) - }) + }); + }); }; // Weel calendar function END @@ -900,9 +1227,11 @@ const createYearTableView = () => { const id = 'yearTable'; $(`#${id}`).remove(); - const th = [...Array(12)].map((month, index) => { - return ``; - }).join(''); + const th = [...Array(12)] + .map((month, index) => { + return ``; + }) + .join(''); const table = `
      ${days[dayIndex].weekNo}${days[dayIndex].weekNo}${currDate.dayOfMonth}${currDate.dayOfMonth}${index + 1}${index + 1}
      @@ -934,15 +1263,20 @@ const createYearTableView = () => { }; const generateYearCalendar = (startYear) => { + addCacheFunctionForBackupRestoreModal(() => + generateYearCalendar(startYear), + ); const [tableEl, goToButtons] = createYearTableView(); let nextYear = startYear; let tr = ''; for (let year = 1; year <= YEARS; year += 1) { - const dataOfYear = [...Array(12)].map((_, i) => { - const month = addZeroToNumber(i + 1); - const hoverMsg = `Month: ${nextYear}-${month}BRCount: 0`; - return ``; - }).join(''); + const dataOfYear = [...Array(12)] + .map((_, i) => { + const month = addZeroToNumber(i + 1); + const hoverMsg = `Month: ${nextYear}-${month}BRCount: 0`; + return ``; + }) + .join(''); tr += ` @@ -963,7 +1297,11 @@ const generateYearCalendar = (startYear) => { const fillColorYear = async (startYear) => { const toYear = startYear + YEARS - 1; - const { data, max_val } = await getDataByType(startYear.toString(), toYear.toString(), calenderTypes.year); + const { data, max_val } = await getDataByType( + startYear.toString(), + toYear.toString(), + calenderTypes.year, + ); if (!data) return; let nextYear = startYear; for (let year = 1; year <= YEARS; year += 1) { @@ -1004,12 +1342,16 @@ const initYearSelectors = (tableEl, startYear) => { // Year calendar function END // Service -const getDataByType = async (from, to, type = calenderTypes.year, timeout = null) => { +const getDataByType = async ( + from, + to, + type = calenderTypes.year, + timeout = null, +) => { if (!processId) { return {}; } const url = '/ap/api/fpp/data_count'; - const data = { process_id: processId, type, @@ -1017,13 +1359,23 @@ const getDataByType = async (from, to, type = calenderTypes.year, timeout = null to, timezone: detectLocalTimezone(), }; + + // In Backup & Restore Transaction Data Modal, if it is at restore tab, get record count in backup files + const flagBKRT = + /** HTMLInputElement */ document.getElementById('idFlagBKRT'); + if (flagBKRT) { + data['count_in_file'] = flagBKRT.value === 'restoreTab'; + } + const option = timeout ? { timeout } : {}; const res = await fetchData(url, JSON.stringify(data), 'POST', option); return res; }; const showDataFinderButton = (processId, btnParent) => { - const btn = btnParent ? btnParent.find(dataFinderEls.dataFinderBtn) : $(dataFinderEls.dataFinderBtn); + const btn = btnParent + ? btnParent.find(dataFinderEls.dataFinderBtn) + : $(dataFinderEls.dataFinderBtn); if (processId) { btn.show(); } else { @@ -1036,9 +1388,12 @@ const setProcessID = async () => { const btnParent = compareType ? $(`#for-${compareType}`) : null; processId = getFirstSelectedProc(); showDataFinderButton(processId, btnParent); - if (processId) { - if (procConfigs[processId] && procConfigs[processId].is_use_dummy_datetime) { - await changeDefaultIndexOrdering(); + if (processId && typeof procConfigs !== 'undefined') { + if ( + procConfigs[processId] && + procConfigs[processId].is_use_dummy_datetime + ) { + await changeDefaultIndexOrdering(); } else { updateXOption(false); } @@ -1049,7 +1404,6 @@ const setProcessID = async () => { switchCalender(currentCalendarType); setDefaultValueOfCalender(currentCalendarType); } - }; const rangeCell = (type) => { @@ -1070,14 +1424,14 @@ const rangeCell = (type) => { }); $(`.${type}-calendar .cell`).off('mouseleave'); - $(`.${type}-calendar .cell`).on('mouseleave', function (e){ + $(`.${type}-calendar .cell`).on('mouseleave', function (e) { $('.data-finder-hover').css({ display: 'none', }); }); $('.data-finder-hover').off('mouseleave'); - $('.data-finder-hover').on('mouseleave', function (e){ + $('.data-finder-hover').on('mouseleave', function (e) { $(e.currentTarget).css({ display: 'none', }); @@ -1104,21 +1458,40 @@ const handleShowHoverMessage = (e) => { left: `${left + thisWidth}px`, display: 'block', }); + + // Correct hint position for Backup&Restore Modal + if ($('#backupAndRestoreModal').length) { + const isYear = thisCell.attr('id').includes('year'); + const hintLeft = isYear + ? left + thisCell.closest('tr').width() / 13 + : left + thisCell.closest('tr').width() / 7; + dataFinderHover.offset({ + top: top, + left: hintLeft, + }); + } }; const handleMouseoverCell = (e, type) => { const parentClass = `.${type}-calendar`; if (startDate && !endDate) { const thisCell = $(e.currentTarget); - const selectedDate = calenderTypes.week ? thisCell.attr('date') : thisCell.attr('data'); + const selectedDate = calenderTypes.week + ? thisCell.attr('date') + : thisCell.attr('data'); const diffType = type === calenderTypes.year ? 'months' : 'days'; const format = type === calenderTypes.year ? 'YYYY-MM' : DATE_FMT; - let nextDate = type === calenderTypes.week ? moment(startDate).format(DATE_FMT) : startDate; - const diffCount = selectedDate ? moment(selectedDate).diff(nextDate, diffType) : null; + let nextDate = + type === calenderTypes.week + ? moment(startDate).format(DATE_FMT) + : startDate; + const diffCount = selectedDate + ? moment(selectedDate).diff(nextDate, diffType) + : null; const isForwardSelection = diffCount < 0; const rangeDays = thisCell.closest(parentClass).find('.cell'); - let dates = [...rangeDays].map(el => $(el).attr('date')); + let dates = [...rangeDays].map((el) => $(el).attr('date')); dates.push(thisCell.attr('date')); dates = uniq(dates); rangeDays.removeClass('in-range'); @@ -1130,7 +1503,10 @@ const handleMouseoverCell = (e, type) => { if (dates.includes(nextDate)) { modifyDates.push(nextDate); } - nextDate = diffCount > 0 ? moment(nextDate).add(1, diffType) : moment(nextDate).subtract(1, diffType); + nextDate = + diffCount > 0 + ? moment(nextDate).add(1, diffType) + : moment(nextDate).subtract(1, diffType); nextDate = nextDate.format(format); } @@ -1138,7 +1514,8 @@ const handleMouseoverCell = (e, type) => { if (type === calenderTypes.week) { const isOneDay = modifyDates.length === 1; if (i === modifyDates.length - 1) { - endH = Number(moment(thisCell.attr('data')).format('HH')) + 1; + endH = + Number(moment(thisCell.attr('data')).format('HH')) + 1; } if (isOneDay && startH > endH) { const temp = endH; @@ -1147,15 +1524,24 @@ const handleMouseoverCell = (e, type) => { } if (isForwardSelection) { for (let h = startH; h >= endH; h -= 1) { - thisCell.closest(parentClass).find(`.cell[dat=${date}-${h}]`).addClass('in-range'); + thisCell + .closest(parentClass) + .find(`.cell[dat=${date}-${h}]`) + .addClass('in-range'); } } else { for (let h = startH; h < endH; h += 1) { - thisCell.closest(parentClass).find(`.cell[dat=${date}-${h}]`).addClass('in-range'); + thisCell + .closest(parentClass) + .find(`.cell[dat=${date}-${h}]`) + .addClass('in-range'); } } } else { - thisCell.closest(parentClass).find(`td[data=${date}]`).addClass('in-range'); + thisCell + .closest(parentClass) + .find(`td[data=${date}]`) + .addClass('in-range'); } startH = isForwardSelection ? HOURS : 0; }); @@ -1176,9 +1562,14 @@ const handleClickCell = (e, type) => { setValueFromToInput(startDate, startDate, type); return; } - const searchData = type === calenderTypes.week ? thisCell.attr('dat') : thisCell.attr('data'); - const allSameCell = type === calenderTypes.week ? thisCell.closest(parentClass).find(`.cell[dat=${searchData}]`) : - thisCell.closest(parentClass).find(`.cell[data=${searchData}]`); + const searchData = + type === calenderTypes.week + ? thisCell.attr('dat') + : thisCell.attr('data'); + const allSameCell = + type === calenderTypes.week + ? thisCell.closest(parentClass).find(`.cell[dat=${searchData}]`) + : thisCell.closest(parentClass).find(`.cell[data=${searchData}]`); if (!startDate) { allSameCell.addClass('active in-range'); startDate = thisCell.attr('data'); @@ -1194,7 +1585,7 @@ const handleClickCell = (e, type) => { endDate = temp; } if (type === calenderTypes.week) { - endDate = moment(endDate).add(1, 'hours').format(DATE_TIME_FMT) + endDate = moment(endDate).add(1, 'hours').format(DATE_TIME_FMT); } setValueFromToInput(startDate, endDate, type); return; @@ -1228,5 +1619,13 @@ $(() => { }); }, 2000); - $('body').append(''); + let $wrapper; + if ($('#backupAndRestoreModal').length) { + $wrapper = $('#data-finder-card'); + } else { + $wrapper = $('body'); + } + $wrapper.append( + '', + ); }); diff --git a/ap/static/common/js/data_point_info_table.js b/ap/static/common/js/data_point_info_table.js index a93957b..58bbfbd 100644 --- a/ap/static/common/js/data_point_info_table.js +++ b/ap/static/common/js/data_point_info_table.js @@ -51,7 +51,13 @@ const genTRItems = (firstCol, secondCol, thirdCol = null) => { let hoverInfoTimeOut = null; -const genDataPointHoverTable = (dataTable, offset, width, autoHide = true, chartID = null) => { +const genDataPointHoverTable = ( + dataTable, + offset, + width, + autoHide = true, + chartID = null, +) => { initHoverInfoHandler(() => { const dpInforID = dpInfoCons.domID; $(`#${dpInforID} tbody`).html(dataTable); @@ -87,12 +93,14 @@ const filterNameByLocale = (threholdInfo) => { if (!threholdInfo.type) { return labels.default; } - return (currentLocale === localeConst.JP) ? threholdInfo.type : (threholdInfo.eng_name || ''); + return currentLocale === localeConst.JP + ? threholdInfo.type + : threholdInfo.eng_name || ''; }; -// eslint-disable-next-line no-unused-vars + const showMSPDataTable = (data, offset, chartID) => { const isContour = !!data.z; - if (isContour) return; + if (isContour) return; const getFilterInfo = (chartInfo) => { const labels = genLabels(); const filterCol = filterNameByLocale(chartInfo); @@ -127,10 +135,16 @@ const showMSPDataTable = (data, offset, chartID) => { // if (data.thresholds) { // filter tblContent += genTRItems('', ''); - tblContent += genTRItems(Xlabels.attribute, - Xfilters.filterCol, Xfilters.filterDetail); - tblContent += genTRItems(Ylabels.attribute, - Yfilters.filterCol, Yfilters.filterDetail); + tblContent += genTRItems( + Xlabels.attribute, + Xfilters.filterCol, + Xfilters.filterDetail, + ); + tblContent += genTRItems( + Ylabels.attribute, + Yfilters.filterCol, + Yfilters.filterDetail, + ); // threshold table tblContent += genTRItems('', ''); tblContent += genTRItems('', Xlabels.limit, Xlabels.procLimit); @@ -145,8 +159,14 @@ const showMSPDataTable = (data, offset, chartID) => { data.thresholds.x['prc-min'] || '', ); tblContent += genTRItems(Xlabels.valid, ''); - tblContent += genTRItems(Xlabels.validFrom, data.thresholds.x['act-from'] || ''); - tblContent += genTRItems(Xlabels.validTo, data.thresholds.x['act-to'] || ''); + tblContent += genTRItems( + Xlabels.validFrom, + data.thresholds.x['act-from'] || '', + ); + tblContent += genTRItems( + Xlabels.validTo, + data.thresholds.x['act-to'] || '', + ); tblContent += genTRItems('', ''); tblContent += genTRItems('', Ylabels.limit, Ylabels.procLimit); tblContent += genTRItems( @@ -160,20 +180,20 @@ const showMSPDataTable = (data, offset, chartID) => { data.thresholds.y['prc-min'] || '', ); tblContent += genTRItems(Ylabels.valid, ''); - tblContent += genTRItems(Ylabels.validFrom, data.thresholds.y['act-from'] || ''); - tblContent += genTRItems(Ylabels.validTo, data.thresholds.y['act-to'] || ''); + tblContent += genTRItems( + Ylabels.validFrom, + data.thresholds.y['act-from'] || '', + ); + tblContent += genTRItems( + Ylabels.validTo, + data.thresholds.y['act-to'] || '', + ); // } tblContent += ''; return tblContent; }; const dataTable = genDataTable(); - genDataPointHoverTable( - dataTable, - offset, - 130, - true, - chartID, - ); + genDataPointHoverTable(dataTable, offset, 130, true, chartID); }; const genSimpleDataTable = (yValue, nTotal) => { const valueLabel = $('#i18nValue').text(); @@ -185,15 +205,15 @@ const genSimpleDataTable = (yValue, nTotal) => { }; const genHoverDataTable = (data) => { - let tblContent = ''; - for (const d of data) { - const key = d[0]; - const value = d[1]; - tblContent += genTRItems(key, value); - } - tblContent += ''; - return tblContent; -} + let tblContent = ''; + for (const d of data) { + const key = d[0]; + const value = d[1]; + tblContent += genTRItems(key, value); + } + tblContent += ''; + return tblContent; +}; const getDataPointIndex = (data) => { if ('pointIndex' in data.points[0]) { @@ -201,22 +221,30 @@ const getDataPointIndex = (data) => { } return data.points[0].pointIndices[0]; }; -// eslint-disable-next-line no-unused-vars + const showInforTbl = (data, horizontal = true, chartID) => { if (data.points) { const dpIndex = getDataPointIndex(data); const dataPoint = data.points[0]; - let countValue = horizontal ? dataPoint.data.x[dpIndex] : dataPoint.data.y[dpIndex]; - if (dpInfoCons.customdata in dataPoint.data - && dpInfoCons.count in dataPoint.data.customdata) { + let countValue = horizontal + ? dataPoint.data.x[dpIndex] + : dataPoint.data.y[dpIndex]; + if ( + dpInfoCons.customdata in dataPoint.data && + dpInfoCons.count in dataPoint.data.customdata + ) { countValue = dataPoint.data.customdata.count[dpIndex] || 0; } - let yValue = horizontal ? dataPoint.data.y[dpIndex] : dataPoint.data.x[dpIndex]; - // eslint-disable-next-line no-undef + let yValue = horizontal + ? dataPoint.data.y[dpIndex] + : dataPoint.data.x[dpIndex]; + yValue = applySignificantDigit(yValue); - - if (dpInfoCons.customdata in dataPoint.data - && dpInfoCons.isBarChart in dataPoint.data.customdata) { + + if ( + dpInfoCons.customdata in dataPoint.data && + dpInfoCons.isBarChart in dataPoint.data.customdata + ) { if (dataPoint.data.customdata.isbarchart) { yValue = dataPoint.data.customdata.groupname.value[dpIndex]; } @@ -225,7 +253,8 @@ const showInforTbl = (data, horizontal = true, chartID) => { genDataPointHoverTable( dataTable, { - x: data.event.pageX - 120, y: data.event.pageY, + x: data.event.pageX - 120, + y: data.event.pageY, }, 130, true, @@ -234,7 +263,7 @@ const showInforTbl = (data, horizontal = true, chartID) => { } }; // scp -// eslint-disable-next-line no-unused-vars + const showSCPDataTable = (data, offset, chartID, type = dpInfoCons.scatter) => { const genDataTable = () => { let tblContent = ''; @@ -260,15 +289,20 @@ const showSCPDataTable = (data, offset, chartID, type = dpInfoCons.scatter) => { tblContent += genTRItems('Mode', data.mode); tblContent += genTRItems('Average', data.avg); tblContent += genTRItems('N', data.n); - } else if ([dpInfoCons.heatmap, dpInfoCons.heatmapByInt].includes(type)) { - // tblContent += genTRItems(data.xName, data.xVal); - // tblContent += genTRItems(data.yName, data.yVal); + } else if ( + [dpInfoCons.heatmap, dpInfoCons.heatmapByInt].includes(type) + ) { + tblContent += genTRItems(data.xName, data.xVal); + tblContent += genTRItems(data.yName, data.yVal); // tblContent += genTRItems(data.colorName, data.color); let [aggFunc, aggUnit] = [data.agg_func, '']; if (data.agg_func.includes('[%]')) { [aggFunc, aggUnit] = ['Ratio', '[%]']; } - tblContent += genTRItems(aggFunc, applySignificantDigit(data.agg_value) + aggUnit); + tblContent += genTRItems( + aggFunc, + applySignificantDigit(data.agg_value) + aggUnit, + ); } else { tblContent += genTRItems('X', data.x); tblContent += genTRItems('Y', data.y); @@ -282,8 +316,20 @@ const showSCPDataTable = (data, offset, chartID, type = dpInfoCons.scatter) => { tblContent += genTRItems('Elapsed time', data.elapsed_time); } tblContent += genTRItems('', ''); - tblContent += genTRItems('From', data.from); - tblContent += genTRItems('To', data.to); + tblContent += genTRItems( + 'From', + formatDateTime(data.from, DATE_FORMAT_WITHOUT_TZ, { + withMillisecs: false, + isLocalTime: true, + }), + ); + tblContent += genTRItems( + 'To', + formatDateTime(data.to, DATE_FORMAT_WITHOUT_TZ, { + withMillisecs: false, + isLocalTime: true, + }), + ); if (type !== dpInfoCons.heatmapByInt) { tblContent += genTRItems('N', data.n_total); @@ -292,13 +338,7 @@ const showSCPDataTable = (data, offset, chartID, type = dpInfoCons.scatter) => { return tblContent; }; const dataTable = genDataTable(); - genDataPointHoverTable( - dataTable, - offset, - 130, - true, - chartID, - ); + genDataPointHoverTable(dataTable, offset, 130, true, chartID); }; const clearHoverTimeOut = () => { @@ -306,32 +346,35 @@ const clearHoverTimeOut = () => { window.clearTimeout(hoverInfoTimeOut); hoverInfoTimeOut = null; } -} +}; const initHoverInfoHandler = (callback) => { if (!hoverInfoTimeOut) { - hoverInfoTimeOut = setTimeout(() => { - hoverInfoTimeOut = null; - if (isInHoverInfo) return; - isInHoverInfo = false; - callback(); - }, 1000) + hoverInfoTimeOut = setTimeout(() => { + hoverInfoTimeOut = null; + if (isInHoverInfo) return; + isInHoverInfo = false; + callback(); + }, 1000); } }; const unHoverHandler = (plot) => { - plot.on('plotly_unhover', clearHoverTimeOut) -} + plot.on('plotly_unhover', clearHoverTimeOut); +}; $(() => { - $(`#${dpInfoCons.domID}`).on('mouseleave', function() { + $(`#${dpInfoCons.domID}`).on('mouseleave', function () { $(this).hide(); isInHoverInfo = false; }); - $(`#${dpInfoCons.domID}`).on('mouseover', function() { + $(`#${dpInfoCons.domID}`).on('mouseover', function () { isInHoverInfo = true; }); - $(window).on('click', function (e){ - if (!e.target.closest(`#${dpInfoCons.domID}`) && $(`#${dpInfoCons.domID}`).css('display') === 'block') { + $(window).on('click', function (e) { + if ( + !e.target.closest(`#${dpInfoCons.domID}`) && + $(`#${dpInfoCons.domID}`).css('display') === 'block' + ) { $(`#${dpInfoCons.domID}`).hide(); isInHoverInfo = false; } diff --git a/ap/static/common/js/database-config.js b/ap/static/common/js/database-config.js index 23a426f..2d62bbd 100644 --- a/ap/static/common/js/database-config.js +++ b/ap/static/common/js/database-config.js @@ -1,11 +1,7 @@ -/* eslint-disable no-unused-vars */ class Databases { constructor(configurations = {}) { // DB required attributes - this.REQUIRED_ATTRS = [ - 'name', - 'type', - ]; + this.REQUIRED_ATTRS = ['name', 'type']; // DB optional attributes this.OPTIONAL_ATTRS = [ 'host', @@ -126,13 +122,24 @@ class Databases { validate(configurations = {}) { const item = Object.values(configurations); if (item.length > 0) { - const attrs = Object.keys(item[0]) - .filter(k => this.REQUIRED_ATTRS.includes(k)); - const missingAttrs = this.REQUIRED_ATTRS.filter(i => attrs.indexOf(i) === -1); - const missingValues = Object.values(attrs).filter(k => item[0][k] === ''); - const message = missingAttrs.length === 0 ? 'MISSING_ATTRS' : (missingValues.length === 0 ? 'MISSING_VALUE' : null); + const attrs = Object.keys(item[0]).filter((k) => + this.REQUIRED_ATTRS.includes(k), + ); + const missingAttrs = this.REQUIRED_ATTRS.filter( + (i) => attrs.indexOf(i) === -1, + ); + const missingValues = Object.values(attrs).filter( + (k) => item[0][k] === '', + ); + const message = + missingAttrs.length === 0 + ? 'MISSING_ATTRS' + : missingValues.length === 0 + ? 'MISSING_VALUE' + : null; return { - isValid: missingAttrs.length === 0 && missingValues.length === 0, + isValid: + missingAttrs.length === 0 && missingValues.length === 0, // isValid: missingAttrs.length === 0, missingAttrs, // missingValues, @@ -157,14 +164,22 @@ class Databases { getDBCfg(id, type) { this.dbCfg = {}; // At first, get from tmp instance - if (Object.keys(this.tmpCfg).includes(id) && this.tmpCfg[id].type === type) { + if ( + Object.keys(this.tmpCfg).includes(id) && + this.tmpCfg[id].type === type + ) { this.dbCfg = { ...this.instances.db[id], ...this.tmpCfg[id] }; - } else if (Object.keys(this.instances.db).includes(id) && type === this.instances.db[id].type) { + } else if ( + Object.keys(this.instances.db).includes(id) && + type === this.instances.db[id].type + ) { // If current DB instance includes request ID && re-assign origin type // get origin data item this.dbCfg = this.instances.db[id]; } else { - const key = Object.keys(this.DB_CONFIGS).filter(k => this.DB_CONFIGS[k].type === type); + const key = Object.keys(this.DB_CONFIGS).filter( + (k) => this.DB_CONFIGS[k].type === type, + ); this.dbCfg = this.DB_CONFIGS[key]; } return this.dbCfg; @@ -195,10 +210,7 @@ class Databases { } } -const REQUIRED_ATTRS = [ - 'name', - 'type', -]; +const REQUIRED_ATTRS = ['name', 'type']; // DB optional attributes const OPTIONAL_ATTRS = [ 'host', diff --git a/ap/static/common/js/datetime_label_format.js b/ap/static/common/js/datetime_label_format.js index abbceef..b9c6e1b 100644 --- a/ap/static/common/js/datetime_label_format.js +++ b/ap/static/common/js/datetime_label_format.js @@ -16,7 +16,10 @@ const getUnitDateTimeFormat = (startTime, endTime, tickLength = 1) => { const start = moment(startTime); const end = moment(endTime); const distanceTime = moment.duration(end.diff(start), 'milliseconds'); - const offsetTime = moment.duration(distanceTime / tickLength, 'milliseconds'); + const offsetTime = moment.duration( + distanceTime / tickLength, + 'milliseconds', + ); if (distanceTime.asYears() >= 1) { unit = offsetTime.asYears() >= 1 ? 'year' : 'month'; } else if (distanceTime.asMonths() >= 1) { diff --git a/ap/static/common/js/divide_by_calendar.js b/ap/static/common/js/divide_by_calendar.js index ca09c83..e940530 100644 --- a/ap/static/common/js/divide_by_calendar.js +++ b/ap/static/common/js/divide_by_calendar.js @@ -1,7 +1,7 @@ const WEEK_DAY = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']; let divOffset = ''; const FISCAL_START_MONTH = Number(localStorage.getItem('fiscalYear')) || 4; -const WEEK_FORMAT = 'K' +const WEEK_FORMAT = 'K'; const DivideFormatUnit = { Minute: 'minute', @@ -14,41 +14,40 @@ const DivideFormatUnit = { FYHalf: 'half', FYMonth: 'fy_month', FYYear: 'fy_year', - }; const weekDayOrder = { - 'Mon': 0, - 'Tue': 1, - 'Wed': 2, - 'Thu': 3, - 'Fri': 4, - 'Sat': 5, - 'Sun': 6 -} + Mon: 0, + Tue: 1, + Wed: 2, + Thu: 3, + Fri: 4, + Sat: 5, + Sun: 6, +}; const SPECIAL_FORMAT = { - "ffffh": "ffff00h", - "ffffq": 'ffff00q', - "ffh": 'ff00h', - "ffq": 'ff00q', - "ffff": "ffff", - "ff": "ff", - "h": 'h', - "q": 'q', - "ffffmm": 'ffffmm', - "ffmm": 'ffmm', - "FY2022H1": "FYYYYYH1", - "FY2022Q1": "FYYYYYQ1", - "FY22H1": "FYYYH1", - "FY22Q1": "FYYYQ1", - "FY2022": "FYYYYY", - "FY2022-mm": "FYYYYY-mm", - "FY22-mm": "FYYY-mm", - "FY22": "FYYY", - "H1": 'H1', - "Q1": "Q1", -} + ffffh: 'ffff00h', + ffffq: 'ffff00q', + ffh: 'ff00h', + ffq: 'ff00q', + ffff: 'ffff', + ff: 'ff', + h: 'h', + q: 'q', + ffffmm: 'ffffmm', + ffmm: 'ffmm', + FY2022H1: 'FYYYYYH1', + FY2022Q1: 'FYYYYYQ1', + FY22H1: 'FYYYH1', + FY22Q1: 'FYYYQ1', + FY2022: 'FYYYYY', + 'FY2022-mm': 'FYYYYY-mm', + 'FY22-mm': 'FYYY-mm', + FY22: 'FYYY', + H1: 'H1', + Q1: 'Q1', +}; const DIVIDE_FORMAT_UNIT = { yyyymmddHH: DivideFormatUnit.Hour, @@ -63,8 +62,8 @@ const DIVIDE_FORMAT_UNIT = { 'yyyy-mm-dd_Fri': DivideFormatUnit.Date, 'yy-mm-dd_Fri': DivideFormatUnit.Date, 'mm-dd_Fri': DivideFormatUnit.Date, - 'dd_Fri': DivideFormatUnit.Date, - 'Fri': DivideFormatUnit.Date, + dd_Fri: DivideFormatUnit.Date, + Fri: DivideFormatUnit.Date, yyyymmdd: DivideFormatUnit.Date, yymmdd: DivideFormatUnit.Date, @@ -82,45 +81,46 @@ const DIVIDE_FORMAT_UNIT = { yyyy: DivideFormatUnit.Year, yy: DivideFormatUnit.Year, - 'ww': DivideFormatUnit.Week, - "Www": DivideFormatUnit.Week, - "Www_mm-dd": DivideFormatUnit.Week, - "yyyy_Www": DivideFormatUnit.Week, - "yyyy_Www_mm-dd": DivideFormatUnit.Week, - "yy_Www": DivideFormatUnit.Week, - "yy_Www_mm-dd": DivideFormatUnit.Week, + ww: DivideFormatUnit.Week, + Www: DivideFormatUnit.Week, + 'Www_mm-dd': DivideFormatUnit.Week, + yyyy_Www: DivideFormatUnit.Week, + 'yyyy_Www_mm-dd': DivideFormatUnit.Week, + yy_Www: DivideFormatUnit.Week, + 'yy_Www_mm-dd': DivideFormatUnit.Week, // Fiscal Year - "ffffh": DivideFormatUnit.FYHalf, - "ffffq": DivideFormatUnit.FYQuarter, - "ffh": DivideFormatUnit.FYHalf, - "ffq": DivideFormatUnit.FYQuarter, - "ffff": DivideFormatUnit.FYYear, - "ff": DivideFormatUnit.FYYear, - "h": DivideFormatUnit.FYHalf, - "q": DivideFormatUnit.FYQuarter, - "ffffmm": DivideFormatUnit.FYMonth, - "ffmm": DivideFormatUnit.FYMonth, - "FY2022H1": DivideFormatUnit.FYHalf, - "FY2022Q1": DivideFormatUnit.FYQuarter, - "FY22H1": DivideFormatUnit.FYHalf, - "FY22Q1": DivideFormatUnit.FYQuarter, - "FY2022": DivideFormatUnit.FYYear, - "FY22": DivideFormatUnit.FYYear, - "H1": DivideFormatUnit.FYHalf, - "Q1": DivideFormatUnit.FYQuarter, - "FY2022-mm": DivideFormatUnit.FYMonth, - "FY22-mm": DivideFormatUnit.FYMonth, + ffffh: DivideFormatUnit.FYHalf, + ffffq: DivideFormatUnit.FYQuarter, + ffh: DivideFormatUnit.FYHalf, + ffq: DivideFormatUnit.FYQuarter, + ffff: DivideFormatUnit.FYYear, + ff: DivideFormatUnit.FYYear, + h: DivideFormatUnit.FYHalf, + q: DivideFormatUnit.FYQuarter, + ffffmm: DivideFormatUnit.FYMonth, + ffmm: DivideFormatUnit.FYMonth, + FY2022H1: DivideFormatUnit.FYHalf, + FY2022Q1: DivideFormatUnit.FYQuarter, + FY22H1: DivideFormatUnit.FYHalf, + FY22Q1: DivideFormatUnit.FYQuarter, + FY2022: DivideFormatUnit.FYYear, + FY22: DivideFormatUnit.FYYear, + H1: DivideFormatUnit.FYHalf, + Q1: DivideFormatUnit.FYQuarter, + 'FY2022-mm': DivideFormatUnit.FYMonth, + 'FY22-mm': DivideFormatUnit.FYMonth, }; let divArrays = []; let divFromTo = []; -let divFormats = [] +let divFormats = []; let lastFrom = ''; const getDivideFormatUnit = (strDivideFormat) => { - const isWeekDayIncluded = WEEK_DAY.some(v => strDivideFormat.trim() - .endsWith(v)); + const isWeekDayIncluded = WEEK_DAY.some((v) => + strDivideFormat.trim().endsWith(v), + ); // TODO: handle this properly if (isWeekDayIncluded) { @@ -133,14 +133,16 @@ const calculateToDateOfLatest = (dateStr, unit) => { let parsedDate = moment(dateStr, DATE_TIME_FMT); let firstDay = null; switch (unit) { - case DivideFormatUnit.Hour: + case DivideFormatUnit.Hour: firstDay = moment(parsedDate.format('YYYY-MM-DD HH:00')); break; case DivideFormatUnit.Date: firstDay = moment(parsedDate.format('YYYY-MM-DD 00:00')); break; - case DivideFormatUnit.Week: - const monday = moment(parsedDate.clone().weekday(1).format('YYYY-MM-DD 00:00')); + case DivideFormatUnit.Week: { + const monday = moment( + parsedDate.clone().weekday(1).format('YYYY-MM-DD 00:00'), + ); firstDay = moment(parsedDate.format('YYYY-MM-DD 00:00')); if (firstDay.isBefore(monday)) { return monday.format(DATE_TIME_FMT); @@ -148,17 +150,18 @@ const calculateToDateOfLatest = (dateStr, unit) => { firstDay = monday.clone(); } break; + } case DivideFormatUnit.Month: firstDay = moment(parsedDate.format('YYYY-MM-01 00:00')); break; case DivideFormatUnit.Year: firstDay = moment(parsedDate.format('YYYY-01-01 00:00')); break; - } - if (parsedDate.isAfter(firstDay)) { - parsedDate = firstDay.add(1, unit); - } - return parsedDate.format(DATE_TIME_FMT) + } + if (parsedDate.isAfter(firstDay)) { + parsedDate = firstDay.add(1, unit); + } + return parsedDate.format(DATE_TIME_FMT); }; const parseDatetime = (strDate, isLatest, offsetHour, unit) => { @@ -171,19 +174,23 @@ const parseDatetime = (strDate, isLatest, offsetHour, unit) => { // moment.js have different unit when using `add days` and `set date`. // So we need to get different format for specific task -const getManipulateFormatUnit = divideFormatUnit => (divideFormatUnit === DivideFormatUnit.Date ? 'days' : divideFormatUnit); +const getManipulateFormatUnit = (divideFormatUnit) => + divideFormatUnit === DivideFormatUnit.Date ? 'days' : divideFormatUnit; const addOneUnit = (currentDate, unit, step) => { const manipulateFormatUnit = getManipulateFormatUnit(unit); - return currentDate.clone() - .add(step, manipulateFormatUnit); + return currentDate.clone().add(step, manipulateFormatUnit); }; -const getNextDivision = (currentDate, unit, step=1, isFull=true) => { +const getNextDivision = (currentDate, unit, step = 1, isFull = true) => { const res = addOneUnit(currentDate, unit, step); - if (!isFull && (unit === DivideFormatUnit.Month || unit === DivideFormatUnit.Year)) { + if ( + !isFull && + (unit === DivideFormatUnit.Month || unit === DivideFormatUnit.Year) + ) { const expectedDate = currentDate.date() + 1; - const currentLastDate = res.clone() + const currentLastDate = res + .clone() .endOf(DivideFormatUnit.Month) .date(); if (currentLastDate < expectedDate) { @@ -197,7 +204,7 @@ const getNextDivision = (currentDate, unit, step=1, isFull=true) => { }; const getNewFrom = (from, unit) => { - return moment(from).format('YYYY-MM-DD '+ divOffset); + return moment(from).format('YYYY-MM-DD ' + divOffset); }; const getNewTo = (to, unit) => { @@ -207,31 +214,42 @@ const getNewTo = (to, unit) => { if (unit === DivideFormatUnit.Hour) { return toDate.format('YYYY-MM-DD HH:mm'); } else { - const fromOffset = Number(divOffset.split(':')[0]) + (Number(divOffset.split(':')[1]) / 60); + const fromOffset = + Number(divOffset.split(':')[0]) + + Number(divOffset.split(':')[1]) / 60; const toHour = toDate.format('HH:mm').split(':'); - const toOffset = Number(toHour[0]) + ( Number(toHour[1]) / 60 ); + const toOffset = Number(toHour[0]) + Number(toHour[1]) / 60; if (toOffset > fromOffset) { - return toDate.add(1, 'day').format('YYYY-MM-DD '+ divOffset); + return toDate.add(1, 'day').format('YYYY-MM-DD ' + divOffset); } else { - return toDate.format('YYYY-MM-DD '+ divOffset); + return toDate.format('YYYY-MM-DD ' + divOffset); } - } }; -const calculateDivisionSet = (from, to, unit, step= 1, returnObject=false) => { +const calculateDivisionSet = ( + from, + to, + unit, + step = 1, + returnObject = false, +) => { const divisionSet = []; - to = moment(to) + to = moment(to); let current = moment(from).clone(); if (!returnObject) { - divisionSet.push(current.format(DATE_TIME_FMT)) + divisionSet.push(current.format(DATE_TIME_FMT)); } let newCurrent = getNextDivision(current, unit, step); while (newCurrent <= to) { - divisionSet.push(returnObject ? { - from: current.format(DATE_TIME_FMT), - to: newCurrent.format(DATE_TIME_FMT), - } : newCurrent.format(DATE_TIME_FMT)); + divisionSet.push( + returnObject + ? { + from: current.format(DATE_TIME_FMT), + to: newCurrent.format(DATE_TIME_FMT), + } + : newCurrent.format(DATE_TIME_FMT), + ); current = newCurrent; newCurrent = getNextDivision(current, unit, step); } @@ -247,69 +265,72 @@ const transformFormat = (fmtStr) => { } fmtStr = fmtStr.toUpperCase(); fmtStr = fmtStr.replaceAll('FRI', 'ddd'); - return [fmtStr, hasW] + return [fmtStr, hasW]; }; const sliceFYWithExpectDate = (from, to, divs, divFormats) => { - let fromDivIdx = 0 + let fromDivIdx = 0; let toDivIdx = divs.length; for (const i in divFormats) { const div = divs[i]; - const nextDiv = divs[Number(i) + 1] + const nextDiv = divs[Number(i) + 1]; if (moment(from).isSameOrAfter(div) && moment(from).isBefore(nextDiv)) { - fromDivIdx = Number(i); + fromDivIdx = Number(i); } if (moment(to).isSameOrAfter(div) && moment(to).isBefore(nextDiv)) { - toDivIdx = Number(i); + toDivIdx = Number(i); } } let newDivs = []; let newDivFormats = []; - newDivs.push(from) - newDivFormats.push(divFormats[fromDivIdx]) + newDivs.push(from); + newDivFormats.push(divFormats[fromDivIdx]); for (let i = fromDivIdx + 1; i < toDivIdx; i++) { newDivs.push(divs[i]); - newDivFormats.push(divFormats[i]) + newDivFormats.push(divFormats[i]); } if (toDivIdx !== divs.length) { newDivs.push(to); } - return [newDivs, newDivFormats] - -} + return [newDivs, newDivFormats]; +}; const getSpecialFYFormat = (targetDate, fmt) => { const [divs, divFormats] = getFYDivAndFormatDivs(targetDate, null, fmt); return divFormats[0]; }; - const getNextDateOfCurrentDate = (targetDate, fmt) => { const [divs, divFormats] = getFYDivAndFormatDivs(targetDate, null, fmt); return moment(divs[1]).format('YYYY-MM-DD 00:00'); -} +}; -const getFYDivAndFormatDivs = (fromDate, toDate=null, fmtstr='') => { +const getFYDivAndFormatDivs = (fromDate, toDate = null, fmtstr = '') => { const FYUnit = DIVIDE_FORMAT_UNIT[fmtstr]; - let [startDateOfYear, endDateOfYear] = calcDateRangeOfFiscalYear(fromDate, toDate); + let [startDateOfYear, endDateOfYear] = calcDateRangeOfFiscalYear( + fromDate, + toDate, + ); // get unit - const to = moment(endDateOfYear).subtract(1, 'minutes').format(DATE_TIME_FMT); - let divs = [] - let format_divs = [] + const to = moment(endDateOfYear) + .subtract(1, 'minutes') + .format(DATE_TIME_FMT); + let divs = []; + let format_divs = []; const getCurrentFY = (date) => { - return moment(date); - } + return moment(date); + }; const { step, divOfYear, unit } = getFYDivOfYearAndStep(fmtstr); divs = calculateDivisionSet(startDateOfYear, to, unit, step); - fmtstr = SPECIAL_FORMAT[fmtstr] + fmtstr = SPECIAL_FORMAT[fmtstr]; let fisYear = getCurrentFY(divs[0]); fmtstr = fmtstr.toUpperCase(); @@ -330,11 +351,11 @@ const getFYDivAndFormatDivs = (fromDate, toDate=null, fmtstr='') => { fmt = 'FY' + fmt; } if (hasHaft) { - fmt = fmt + haftFmt + `${step}` + fmt = fmt + haftFmt + `${step}`; } return fmt; - } + }; fmtstr = fmtstr.replaceAll('FY', ''); fmtstr = fmtstr.replaceAll('H1', ''); @@ -350,19 +371,30 @@ const getFYDivAndFormatDivs = (fromDate, toDate=null, fmtstr='') => { } let fmt; - if ([DivideFormatUnit.FYQuarter, DivideFormatUnit.FYHalf, DivideFormatUnit.FYYear].includes(FYUnit)) { + if ( + [ + DivideFormatUnit.FYQuarter, + DivideFormatUnit.FYHalf, + DivideFormatUnit.FYYear, + ].includes(FYUnit) + ) { fmt = fmtstr ? fisYear.format(fmtstr) : ''; - fmt = addSpecialChar(fmt, index) + fmt = addSpecialChar(fmt, index); } else { fmt = fmtstr ? moment(div).format(fmtstr) : ''; - fmt = addSpecialChar(fmt, index) + fmt = addSpecialChar(fmt, index); } - format_divs.push(fmt) + format_divs.push(fmt); index += 1; } - divs.push(endDateOfYear) - - return sliceFYWithExpectDate(fromDate, toDate || endDateOfYear, divs, format_divs) + divs.push(endDateOfYear); + + return sliceFYWithExpectDate( + fromDate, + toDate || endDateOfYear, + divs, + format_divs, + ); }; const getFYDivOfYearAndStep = (strFormat) => { @@ -370,7 +402,7 @@ const getFYDivOfYearAndStep = (strFormat) => { let step = 1; let unit = DivideFormatUnit.Year; const FYUnit = DIVIDE_FORMAT_UNIT[strFormat]; - if (FYUnit === DivideFormatUnit.FYQuarter) { + if (FYUnit === DivideFormatUnit.FYQuarter) { divOfYear = 4; step = 3; unit = DivideFormatUnit.Month; @@ -388,43 +420,49 @@ const getFYDivOfYearAndStep = (strFormat) => { unit = DivideFormatUnit.Month; } - return {step, unit, divOfYear}; + return { step, unit, divOfYear }; }; const calcDivNumber = (from, to, unit, divideFormat) => { const isFYFormat = getIsFYFormat(divideFormat); if (isFYFormat) { [divFromTo, divFormats] = getFYDivAndFormatDivs(from, to, divideFormat); - divFromTo = divFromTo.filter(e => e) - divFormats = divFormats.filter(e => e) + divFromTo = divFromTo.filter((e) => e); + divFormats = divFormats.filter((e) => e); divArrays = uniq(divFormats); } else { const [format, hasW] = transformFormat(divideFormat); to = moment(to).subtract(1, 'minutes').format(DATE_TIME_FMT); divFromTo = calculateDivisionSet(from, to, unit); - divFormats = divFromTo.map(date => moment(date).format(format)); - divArrays = uniq(divFromTo.map(date => moment(date).format(format))); - divFromTo.push(lastFrom) + divFormats = divFromTo.map((date) => moment(date).format(format)); + divArrays = uniq(divFromTo.map((date) => moment(date).format(format))); + divFromTo.push(lastFrom); if (format === 'ddd') { // sort from monday to sunday divArrays.sort((a, b) => { return weekDayOrder[a] > weekDayOrder[b] ? 1 : -1; - }) + }); } else if (format !== 'WW_MM-DD') { divArrays.sort(); } if (hasW) { - divArrays = divArrays.map(d => d.replace(WEEK_FORMAT, 'W')); - divFormats = divFormats.map(d => d.replace(WEEK_FORMAT, 'W')); + divArrays = divArrays.map((d) => d.replace(WEEK_FORMAT, 'W')); + divFormats = divFormats.map((d) => d.replace(WEEK_FORMAT, 'W')); } } return divArrays.length; }; -const dividedByCalendarDateRange = (fromDate, toDate, strDivideFormat, isLatest, offsetHour) => { +const dividedByCalendarDateRange = ( + fromDate, + toDate, + strDivideFormat, + isLatest, + offsetHour, +) => { const divideFormatUnit = getDivideFormatUnit(strDivideFormat); - if (!divideFormatUnit) return ; + if (!divideFormatUnit) return; let from = fromDate; let to = toDate; if (!isLatest) { @@ -432,12 +470,11 @@ const dividedByCalendarDateRange = (fromDate, toDate, strDivideFormat, isLatest, from = getNewFrom(fromDate, divideFormatUnit); to = getNewTo(toDate, divideFormatUnit); } else { - const isFYFormat = getIsFYFormat(strDivideFormat); - const { step, unit } = getUnitAndStepOfStrFormat(strDivideFormat); + const { step, unit } = getUnitAndStepOfStrFormat(strDivideFormat); // latest is shift to full hour, day, week, month, year let actualStep = Math.round(moment(to).diff(from, unit)) || 1; - // get next date of step unit + // get next date of step unit if (isFYFormat) { to = getNextDateOfCurrentDate(to, strDivideFormat); if (actualStep < step) { @@ -463,7 +500,7 @@ const dividedByCalendarDateRange = (fromDate, toDate, strDivideFormat, isLatest, const getUnitAndStepOfStrFormat = (strFormat) => { const isFYFormat = getIsFYFormat(strFormat); - let result = { step: 1, unit: getDivideFormatUnit(strFormat)} + let result = { step: 1, unit: getDivideFormatUnit(strFormat) }; if (isFYFormat) { result = getFYDivOfYearAndStep(strFormat); @@ -477,33 +514,52 @@ const getIsFYFormat = (strFormat) => { }; const getFiscalYearStartMonth = () => { - fetchData('/ap/api/setting/get_fiscal_year_default', {}, 'GET').then((res) => { - const fy = res.fiscal_year_start_month; - if (fy) { - localStorage.setItem('fiscalYear', fy); - } - }); + fetchData('/ap/api/setting/get_fiscal_year_default', {}, 'GET').then( + (res) => { + const fy = res.fiscal_year_start_month; + if (fy) { + localStorage.setItem('fiscalYear', fy); + } + }, + ); }; const calcDateRangeOfFiscalYear = (fromDate, toDate = null) => { const currentFromYear = moment(fromDate).format('YYYY'); const currentFromMonth = Number(moment(fromDate).format('MM')); - const currentHour = moment(fromDate).format('HH:mm') - let startDate = moment(`${currentFromYear}-${FISCAL_START_MONTH}-01 ${currentHour}`); + const currentHour = moment(fromDate).format('HH:mm'); + let startDate = moment( + `${currentFromYear}-${FISCAL_START_MONTH}-01 ${currentHour}`, + ); if (currentFromMonth < Number(FISCAL_START_MONTH)) { startDate = startDate.subtract(1, 'y'); } let endOfStartDate = startDate.clone().add(1, 'y'); if (toDate) { - while (moment(toDate).isAfter(endOfStartDate)) { + while (moment(toDate).isAfter(endOfStartDate)) { endOfStartDate = endOfStartDate.add(1, 'y'); } } - return [startDate.format(DATE_TIME_FMT), endOfStartDate.format(DATE_TIME_FMT)] + return [ + startDate.format(DATE_TIME_FMT), + endOfStartDate.format(DATE_TIME_FMT), + ]; }; -const dividedByCalendar = (fromDate, toDate, strDivideFormat, isLatest, offsetHour) => { - return dividedByCalendarDateRange(fromDate, toDate, strDivideFormat, isLatest, offsetHour); +const dividedByCalendar = ( + fromDate, + toDate, + strDivideFormat, + isLatest, + offsetHour, +) => { + return dividedByCalendarDateRange( + fromDate, + toDate, + strDivideFormat, + isLatest, + offsetHour, + ); }; diff --git a/ap/static/common/js/dn-custom-select.js b/ap/static/common/js/dn-custom-select.js index 065e1e3..85f2b8b 100644 --- a/ap/static/common/js/dn-custom-select.js +++ b/ap/static/common/js/dn-custom-select.js @@ -9,14 +9,14 @@ const initCustomSelect = () => { const select = customSelect.find('select'); const selectClass = $(select[0]).attr('class'); const selectOption = select.find('option'); - const selectedOption = select.find('option:selected') + const selectedOption = select.find('option:selected'); const selectedVal = select.val(); const selectedDiv = `
      ${selectedOption.text()}
      `; let options = ''; - selectOption.each((i, op) =>{ + selectOption.each((i, op) => { const option = $(op); const value = option.val(); const text = option.text(); @@ -26,7 +26,7 @@ const initCustomSelect = () => { ${text} `; - }) + }); const selectList = `
      @@ -41,47 +41,66 @@ const initCustomSelect = () => { if ($(el).attr('data-value') === selectedVal) { $(el).addClass('selected-item'); } - }) + }); customSelect.find('.dn-custom-select--select').off('click'); customSelect.find('.dn-custom-select--select').on('click', (e) => { - if (customSelect.find('.dn-custom-select--select--list').hasClass('select-hide')) { - customSelect.find('.dn-custom-select--select--list').removeClass('select-hide') - }else { - customSelect.find('.dn-custom-select--select--list').addClass('select-hide') + if ( + customSelect + .find('.dn-custom-select--select--list') + .hasClass('select-hide') + ) { + customSelect + .find('.dn-custom-select--select--list') + .removeClass('select-hide'); + } else { + customSelect + .find('.dn-custom-select--select--list') + .addClass('select-hide'); } }); customSelect.find('.dn-custom-select--select--list').off('click'); - customSelect.find('.dn-custom-select--select--list').on('click', (e) => { - let item = e.target.closest('.dn-custom-select--select--list--item') - $('.dn-custom-select--select--list--item').removeClass('selected-item') - if (!item) return; - item = $(item); - const value = item.attr('data-value'); - select.val(value).trigger('change'); - item.addClass('selected-item') - customSelect.find('.dn-custom-select--select').text(item.text()); + customSelect + .find('.dn-custom-select--select--list') + .on('click', (e) => { + let item = e.target.closest( + '.dn-custom-select--select--list--item', + ); + $('.dn-custom-select--select--list--item').removeClass( + 'selected-item', + ); + if (!item) return; + item = $(item); + const value = item.attr('data-value'); + select.val(value).trigger('change'); + item.addClass('selected-item'); + customSelect + .find('.dn-custom-select--select') + .text(item.text()); - // hide - customSelect.find('.dn-custom-select--select--list').addClass('select-hide'); - }) + // hide + customSelect + .find('.dn-custom-select--select--list') + .addClass('select-hide'); + }); select.off('change'); select.on('change', (e) => { - resetCustomSelect($(e.currentTarget)) - }) - - }) -} + resetCustomSelect($(e.currentTarget)); + }); + }); +}; const resetCustomSelect = (selectEL) => { const customSelect = selectEL.parent(); const value = selectEL.val(); - const selectedOption = selectEL.find('option:selected') - customSelect.find('.dn-custom-select--select--list--item').removeClass('selected-item') + const selectedOption = selectEL.find('option:selected'); + customSelect + .find('.dn-custom-select--select--list--item') + .removeClass('selected-item'); customSelect.find('.dn-custom-select--select--list--item').each((i, el) => { - if ($(el).attr('data-value') === value) { - $(el).addClass('selected-item'); - } - }) - customSelect.find('.dn-custom-select--select').text(selectedOption.text()) -}; \ No newline at end of file + if ($(el).attr('data-value') === value) { + $(el).addClass('selected-item'); + } + }); + customSelect.find('.dn-custom-select--select').text(selectedOption.text()); +}; diff --git a/ap/static/common/js/graph_nav.js b/ap/static/common/js/graph_nav.js index 8afef10..725fef6 100644 --- a/ap/static/common/js/graph_nav.js +++ b/ap/static/common/js/graph_nav.js @@ -1,4 +1,3 @@ -// eslint-disable-next-line no-unused-vars const graphNavUtil = (() => { // target graph html class // const TARGET_ELE_CLASSES = [ @@ -16,11 +15,7 @@ const graphNavUtil = (() => { // every screen can use their own classes list. it is useful when some page have tab // [.active.show card] // let custom_ele_classes = null; - const TARGET_ELE_CLASSES = [ - '.graph-navi', - '.card-body', - '.card', - ]; + const TARGET_ELE_CLASSES = ['.graph-navi', '.card-body', '.card']; // array element is a arr , arr[0] is has class, arr[1] is has no class. // const EXCLUDE_ELE_CLASSES = [ @@ -31,7 +26,6 @@ const graphNavUtil = (() => { // element has at lease one will be used for move top down const TARGET_TOP_DOWN = 'graph-navi-top-down'; - // checker if an element in viewport const checkEleInView = (el) => { const scroll = window.scrollY || window.pageYOffset; @@ -90,14 +84,15 @@ const graphNavUtil = (() => { // get all graph in html page const getGraphs = () => { - // eslint-disable-next-line no-restricted-syntax // let target_ele_classes = custom_ele_classes; // if (target_ele_classes == null) { // target_ele_classes = TARGET_ELE_CLASSES // } - // eslint-disable-next-line no-restricted-syntax + for (const cls of TARGET_ELE_CLASSES) { - let eles = Array.from($(cls).not($('.tab-pane:not(.active.show)').find(cls))); + let eles = Array.from( + $(cls).not($('.tab-pane:not(.active.show)').find(cls)), + ); // eles.concat(Array.from($(document).find('*').not(tab).find(cls))); // eles = clearExclude(eles); @@ -116,7 +111,7 @@ const graphNavUtil = (() => { } let currentIdx = -1; - // eslint-disable-next-line no-restricted-syntax + for (const [idx, ele] of eles.entries()) { if (checkEleInView(ele)) { currentIdx = idx; @@ -164,10 +159,14 @@ const graphNavUtil = (() => { if (!step) { // check page has no graph const beforeFooterItem = eles[eles.length - 2]; - const showGraphIdx = eles.map(ele => $(ele).attr('class').includes(TARGET_TOP_DOWN)).indexOf(true, 2); + const showGraphIdx = eles + .map((ele) => $(ele).attr('class').includes(TARGET_TOP_DOWN)) + .indexOf(true, 2); const firstGraphIdx = showGraphIdx + 1; - if ($(beforeFooterItem).attr('class').includes(TARGET_TOP_DOWN) || - $(eles[firstGraphIdx]).offset().top >= topPosition) { + if ( + $(beforeFooterItem).attr('class').includes(TARGET_TOP_DOWN) || + $(eles[firstGraphIdx]).offset().top >= topPosition + ) { // has no graph -> scroll to top of screen return eles[0]; } @@ -178,12 +177,23 @@ const graphNavUtil = (() => { return eles[eles.length - 1]; } // get first item which over offset from screen - const currentItemIdx = eles.map(ele => $(ele).offset().top >= topPosition).indexOf(true); - const nextIDx = currentItemIdx + step; + const currentItemIdx = eles + .map((ele) => $(ele).offset().top >= topPosition) + .indexOf(true); + const isDownOneStep = step === 1; + const topPositionGraphNavi = $(eles[currentItemIdx]).offset().top; + const marginTopCurrentElem = + parseInt($(eles[currentItemIdx]).css('margin-top').slice(0, -2)) + + 1; + const nextIDx = + topPositionGraphNavi > topPosition + marginTopCurrentElem && + isDownOneStep + ? currentItemIdx + : currentItemIdx + step; const nextItem = eles[nextIDx]; if (!$(nextItem).is(':visible')) { // in case of DOM is hidden, return next DOM - return getNearbyItem(eles, nextIDx + 1); + return getNearbyItem(eles, nextIDx); } return nextItem; }; @@ -210,7 +220,6 @@ const graphNavUtil = (() => { return !moveToEle(ele); }; - // scroll to first const moveFirst = () => { const eles = getGraphs(); @@ -226,11 +235,11 @@ const graphNavUtil = (() => { }; // move screen by nearby position - const move = (step=1) => { + const move = (step = 1) => { const eles = getGraphs(); const ele = getNearbyItem(eles, step); return !moveToEle(ele); - } + }; return { moveFirst, diff --git a/ap/static/common/js/jump_function.js b/ap/static/common/js/jump_function.js index 20c321e..1761338 100644 --- a/ap/static/common/js/jump_function.js +++ b/ap/static/common/js/jump_function.js @@ -1,6 +1,19 @@ -const JUMP_API = '/ap/api/common/jump_cfg' - -const PAGES = ['fpp', 'stp', 'rlp', 'msp', 'chm', 'scp', 'agp', 'skd', 'pcp', 'gl', 'pca'] +const JUMP_API = '/ap/api/common/jump_cfg'; + +const PAGES = [ + 'fpp', + 'stp', + 'rlp', + 'msp', + 'chm', + 'scp', + 'agp', + 'skd', + 'pcp', + 'gl', + 'pca', + 'hmp', +]; const PAGE_NAME = { fpp: 'fpp', @@ -13,7 +26,8 @@ const PAGE_NAME = { skd: 'skd', pcp: 'pcp', gl: 'gl', - pca: 'pca' + pca: 'pca', + hmp: 'hmp', }; const MAX_JUMP_SENSOR_NUMBER = 20; @@ -32,8 +46,18 @@ const jumpEls = { jumpErrEle: '#jumpAlertMsg', jumpWithoutTargetPage: '#i18nJumpWithoutTargetPageMsg', jumpWithDfMode: '#i18nJumpWithDfModeMsg', - jumpObjectiveEls: '#jumpSensorTbl tbody tr input[type=radio][name=objective_var]', + jumpObjectiveEls: + '#jumpSensorTbl tbody tr input[type=radio][name=objective_var]', jumpVariableEls: '#jumpSensorTbl tbody tr input[type=checkbox]', + jumpSelectAllCheckbox: '#jumpSelectAllSensor', + autoSelectedColumn: '#jumpAutoSelectedItems', + searchInput: '#jumpSearchInput', + searchSetBtn: '#jumpSetBtn', + searchResetBtn: '#jumpResetBtn', + totalCheckedColumn: '#jumpTotalCheckedColumn', + totalColumns: '#jumpTotalColumns', + tdOrders: '#jumpSensorTbl tbody tr td.jump-order', + checkboxOdfSetting: '#useOdfSettingCheckbox', }; const goToFromJumpFunction = 'from_jump_func'; @@ -42,6 +66,7 @@ let divideOption = ''; let dumpedUserSetting = []; let jumpKey = ''; let noneObjective = false; +let isCopyFromJumpModel = false; const MAX_SENSOR_NUMBER = { fpp: 20, @@ -62,7 +87,7 @@ const HAS_OBJECTIVE_PAGE = ['skd', 'pcp', 'gl']; const ALL_DIVISION = { stp: { all: ['var', 'cyclicTerm', 'directTerm'], - default: 'var' + default: 'var', }, rlp: { all: ['category', 'cyclicTerm', 'directTerm'], @@ -70,13 +95,62 @@ const ALL_DIVISION = { }, scp: { all: ['category', 'cyclicTerm', 'directTerm', 'dataNumberTerm'], - default: 'category' + default: 'category', }, agp: { - all: ['category', 'cyclicTerm', 'directTerm', 'dataNumberTerm', 'cyclicCalender'], - default: 'cyclicCalender' - } -} + all: [ + 'category', + 'cyclicTerm', + 'directTerm', + 'dataNumberTerm', + 'cyclicCalender', + ], + default: 'cyclicCalender', + }, + hmp: { + all: ['category', 'cyclicTerm', 'directTerm', 'dataNumberTerm'], + default: 'category', + }, +}; + +$(() => { + initCommonSearchInput($(jumpEls.searchInput)); + // Handler set search input button + $(jumpEls.searchSetBtn).on('click', function () { + const variableInput = $(jumpEls.jumpTblBody).find( + 'tr:not(.gray) input[type=checkbox]:visible:not(:checked)', + ); + updateLatestSortColByRowElems( + variableInput.closest('tr').toArray(), + [], + ); + variableInput.prop('checked', true); + handleSortVariableNameByCheckbox(); + updatePriority(jumpEls.jumpTblID); + updateOverItemsColor(jumpEls.jumpTblID); + updateJumpStatus(); + }); + $(jumpEls.searchResetBtn).on('click', function () { + const variableInput = $(jumpEls.jumpTblBody).find( + 'tr:not(.gray) input[type=checkbox]:visible', + ); + const objectiveInput = $(jumpEls.jumpTblBody).find( + 'tr:not(.gray) input[type=radio]:visible', + ); + updateLatestSortColByRowElems( + [], + variableInput.closest('tr').toArray(), + ); + variableInput.prop('checked', false); + objectiveInput.prop('checked', false); + validateJumpSkdObjective(); + handleSortVariableNameByCheckbox(); + updatePriority(jumpEls.jumpTblID); + updateOverItemsColor(jumpEls.jumpTblID); + updateJumpStatus(); + }); +}); + const showJumpModal = async () => { // reset jump err message resetJumpErrMsg(); @@ -93,13 +167,14 @@ const showJumpModal = async () => { $(`${jumpEls.pageItem}:first`).trigger('click'); // Auto select to first graph }; - const showOptionalCheckbox = (page) => { $('.jump-check-box-option').find('input').prop('disabled', true); $('.jump-check-box-option').hide(); - $(`.jump-check-box-option[data-for=${page}]`).find('input').prop('disabled', false); + $(`.jump-check-box-option[data-for=${page}]`) + .find('input') + .prop('disabled', false); $(`.jump-check-box-option[data-for=${page}]`).show(); -} +}; const getJumpPages = async (page) => { if (!page) return {}; @@ -110,20 +185,19 @@ const getJumpPages = async (page) => { const resetJumpErrMsg = () => { // reset error message if existing $(jumpEls.jumpErrEle).find('button').click(); -} +}; const getCurrentPage = () => { const path = window.location.pathname; for (const page of PAGES) { - if (path.includes(page)) - return page; + if (path.includes(page)) return page; } return null; }; const generatePageItem = (page, pageObj, parentDivId = null) => { - const {hover, link_address, png_path, title} = pageObj; - const shownHover = hover.replaceAll('\"', '"') + const { hover, link_address, png_path, title } = pageObj; + const shownHover = hover.replaceAll('"', '"'); const html = `
      @@ -141,7 +215,7 @@ const generatePageItem = (page, pageObj, parentDivId = null) => { }; const loadJumpPages = (res) => { - const {all, master, recommended, unavailable} = res; + const { all, master, recommended, unavailable } = res; $(jumpEls.recommendedId).empty(); $(jumpEls.allList).empty(); @@ -153,7 +227,7 @@ const loadJumpPages = (res) => { for (const page of all) { if (unavailable.includes(page)) { - continue + continue; } const pageObj = master[page]; generatePageItem(page, pageObj, jumpEls.allList); @@ -164,40 +238,51 @@ const loadJumpPages = (res) => { $(jumpEls.jumpOkButton).off('click', handleClickOKJumpButton); $(jumpEls.jumpOkButton).on('click', handleClickOKJumpButton); + $(jumpEls.searchInput).on('keypress input', searchJumpInputHandler); }; const handleOnClickPage = (e) => { e.preventDefault(); const _this = $(e.currentTarget); + const objectiveIdVal = $(jumpEls.jumpTblBody) + .find('input[name=objective_var]:checked') + .attr('id'); $('.jump-page-list .tile-item').removeClass('active'); _this.addClass('active'); + $(jumpEls.autoSelectedColumn).prop('checked', true); + noneObjective = false; updateVariableStatusJumpPage(); - updateObjectiveForTargetJumpPage(jumpEls.jumpTblID); + updateObjectiveForTargetJumpPage(); updateOverItemsColor(jumpEls.jumpTblID); resetJumpErrMsg(); validateJumpSkdObjective(); -} +}; const validateJumpSkdObjective = () => { const targetPage = $(`${jumpEls.pageItem}.active`).attr('data-target-page'); - const isJumpToSkd = targetPage === PAGE_NAME.skd; + const targetPageHasObjective = HAS_OBJECTIVE_PAGE.includes(targetPage); const objectiveVal = $(`${jumpEls.jumpObjectiveEls}:checked`).val(); - if (isJumpToSkd && !objectiveVal) { + if (targetPageHasObjective && !objectiveVal) { const text = $('#i18nJumpWithoutObjectiveVariableMsg').text(); showErrorMsg(text); } else { resetJumpErrMsg(); } - $(jumpEls.jumpOkButton).prop("disabled",isJumpToSkd && !objectiveVal); -} + $(jumpEls.jumpOkButton).prop( + 'disabled', + targetPageHasObjective && !objectiveVal, + ); +}; const addEventChangeVariableOrObjective = () => { $(`${jumpEls.jumpObjectiveEls}, ${jumpEls.jumpVariableEls}`) .off('click', validateJumpSkdObjective) .on('click', validateJumpSkdObjective); -} +}; + const updateOverItemsColor = (tableID) => { - const maxJumpSensorNumber = MAX_SENSOR_NUMBER[getTargetPage()[0]] || MAX_JUMP_SENSOR_NUMBER + const maxJumpSensorNumber = + MAX_SENSOR_NUMBER[getTargetPage()[0]] || MAX_JUMP_SENSOR_NUMBER; $(`${tableID} tbody tr`).each((rowIdx, row) => { $(row).removeClass('over-lim-item'); if (rowIdx + 1 > maxJumpSensorNumber) { @@ -206,10 +291,12 @@ const updateOverItemsColor = (tableID) => { }); }; -const updateObjectiveForTargetJumpPage = (tableID) => { +const updateObjectiveForTargetJumpPage = () => { const targetPage = getTargetPage()[0]; const targetPageHasObjective = HAS_OBJECTIVE_PAGE.includes(targetPage); - const objectiveElem = $(`${jumpEls.jumpTblBody} tr input[type=radio][name=objective_var]`); + const objectiveElem = $( + `${jumpEls.jumpTblBody} tr input[type=radio][name=objective_var]`, + ); if (targetPageHasObjective) { enableJumpObjective(objectiveElem); } else { @@ -220,30 +307,45 @@ const updateObjectiveForTargetJumpPage = (tableID) => { const disableJumpObjective = (objectiveElem) => { objectiveElem.prop('checked', ''); objectiveElem.prop('disabled', true); -} +}; const enableJumpObjective = (objectiveElem) => { - objectiveElem.prop({'checked': '', 'disabled': false}); + objectiveElem.prop({ checked: '', disabled: false }); const currentTraceDat = graphStore.getTraceData(); - const objectiveVal = currentTraceDat.COMMON.objectiveVar ? Number(currentTraceDat.COMMON.objectiveVar[0]) : undefined; - const currentPageObjectiveVal = $(`${formElements.endProcItems} input[name=objectiveVar]:checked`); - const isJumpToSkd = getTargetPage()[0] === PAGE_NAME.skd; + const objectiveVal = currentTraceDat.COMMON.objectiveVar + ? Number(currentTraceDat.COMMON.objectiveVar[0]) + : undefined; + const currentPageObjectiveVal = $( + `${formElements.endProcItems} input[name=objectiveVar]:checked`, + ); + const isPageJumpToHasObjective = HAS_OBJECTIVE_PAGE.includes( + getTargetPage()[0], + ); const elemObjectiveVal = jumpEls.jumpObjectiveEls; - if (isJumpToSkd) { + if (isPageJumpToHasObjective && !noneObjective) { if (objectiveVal && currentPageObjectiveVal.length) { - $(`${elemObjectiveVal}[value=${objectiveVal}]`).prop('checked', true); + $(`${elemObjectiveVal}[value=${objectiveVal}]`).prop( + 'checked', + true, + ); } } else { - if (objectiveVal && currentPageObjectiveVal.length ) { - $(`${elemObjectiveVal}[value=${objectiveVal}]`).prop('checked', true); + if (objectiveVal && currentPageObjectiveVal.length) { + $(`${elemObjectiveVal}[value=${objectiveVal}]`).prop( + 'checked', + true, + ); } else { if (!noneObjective) { $(`${elemObjectiveVal}:first`).prop('checked', true); } + $(`${elemObjectiveVal}[value=${objectiveVal}]`).prop( + 'checked', + true, + ); } - } -} +}; const bindChangeVariableOrderingSKD = (e) => { const changeStatus = $(e).prop('checked'); @@ -251,21 +353,29 @@ const bindChangeVariableOrderingSKD = (e) => { }; const genColTypeForJumpTbl = (variable) => { let colType = dataTypeShort(variable); - if (variable.name.includes(COMMON_CONSTANT.NG_RATE_NAME) || + if ( + variable.name.includes(COMMON_CONSTANT.NG_RATE_NAME) || variable.name.includes(COMMON_CONSTANT.EMD_DRIFT_NAME) || - variable.name.includes(COMMON_CONSTANT.EMD_DIFF_NAME)) { + variable.name.includes(COMMON_CONSTANT.EMD_DIFF_NAME) + ) { colType = DataTypes.REAL.short; } return colType; }; -const buildJumpTbl = (varOrdering, dfMode=true) => { +const buildJumpTbl = (varOrdering, dfMode = true) => { // update checkbox status if (varOrdering.ordering.length) { $(jumpEls.jumpTblBody).html(''); let tblContent = ''; varOrdering.ordering.forEach((variable, i) => { - const objectiveChecked = checkedDefaultJumpObjective(i, variable.id); - const variableChecked = checkedJumpVariableByLatestSortCol(variable.id, varOrdering.orderingID); + const objectiveChecked = checkedDefaultJumpObjective( + i, + variable.id, + ); + const variableChecked = checkedJumpVariableByLatestSortCol( + variable.id, + varOrdering.orderingID, + ); tblContent += `
      @@ -284,19 +394,22 @@ const buildJumpTbl = (varOrdering, dfMode=true) => { - + - ` + `; }); $(jumpEls.jumpTblBody).html(tblContent); updateEventChangeVariableNameJump(varOrdering); updateOverItemsColor(jumpEls.jumpTblID); validateJumpSkdObjective(); addEventChangeVariableOrObjective(); + updateObjectiveForTargetJumpPage(); + updateJumpStatus(); $(jumpEls.jumpTblBody).sortable({ - helper: dragDropRowInTable.fixHelper, update: () => { + helper: dragDropRowInTable.fixHelper, + update: () => { updatePriority(jumpEls.jumpTblID); updateOverItemsColor(jumpEls.jumpTblID); }, @@ -309,98 +422,143 @@ const checkedDefaultJumpObjective = (rowIndex, variableId) => { const targetPage = getTargetPage()[0]; const isJumpToSkd = targetPage === PAGE_NAME.skd; const currentTrace = graphStore.traceDataResult; - const objectiveVariable = currentTrace.COMMON.objectiveVar ? Number(currentTrace.COMMON.objectiveVar[0]) : undefined; + const objectiveVariable = currentTrace.COMMON.objectiveVar + ? Number(currentTrace.COMMON.objectiveVar[0]) + : undefined; const currentPageHasObjective = HAS_OBJECTIVE_PAGE.includes(currentPage); - const currentPageObjectiveVal = $(`${formElements.endProcItems} input[name=objectiveVar]:checked`); - if (!isJumpToSkd && (!currentPageHasObjective || !currentPageObjectiveVal.length)) { + const currentPageObjectiveVal = $( + `${formElements.endProcItems} input[name=objectiveVar]:checked`, + ); + if ( + !isJumpToSkd && + (!currentPageHasObjective || !currentPageObjectiveVal.length) + ) { return !rowIndex ? ' checked=checked' : ''; } if (objectiveVariable && currentPageObjectiveVal.length) { return objectiveVariable === variableId ? ' checked=checked' : ''; } return ''; -} +}; const checkedJumpVariableByLatestSortCol = (variableId, ordering) => { - if (ordering.find(colId=> colId === variableId)) { + if (ordering.find((colId) => colId === variableId)) { return ' checked=checked'; } return ''; -} +}; const updateVariableStatusJumpPage = () => { const targetPage = getTargetPage()[0]; const currentPage = getCurrentPage(); - const elemsVariableCheckBox = $(`${jumpEls.jumpTblBody} tr input[type=checkbox]`); + const elemsVariableCheckBox = $( + `${jumpEls.jumpTblBody} tr input[type=checkbox]`, + ); // Check all checkboxes by default when jumping to SkD if (targetPage === PAGE_NAME.skd) { elemsVariableCheckBox.prop('checked', true); + updateJumpStatus(); } else { let ordering = getVariableOrderingFromPage(currentPage); elemsVariableCheckBox.prop('checked', false); ordering.orderingID.forEach(function (orderingId) { - $(`${jumpEls.jumpTblBody} tr[data-col-id=${orderingId}] input[type=checkbox]`).prop('checked', true); + $( + `${jumpEls.jumpTblBody} tr[data-col-id=${orderingId}] input[type=checkbox]`, + ).prop('checked', true); }); latestSortColIdsJumpPage = [...latestSortColIds]; buildJumpTbl(ordering); } - const elemTrVariableChecked = $(`${jumpEls.jumpVariableEls}:checked`).closest('tr').toArray(); - latestSortColIdsJumpPage = elemTrVariableChecked.map((el) => `${$(el).attr('data-proc-id')}-${$(el).attr('data-col-id')}`); -} + const elemTrVariableChecked = $(`${jumpEls.jumpVariableEls}:checked`) + .closest('tr') + .toArray(); + latestSortColIdsJumpPage = elemTrVariableChecked.map( + (el) => `${$(el).attr('data-proc-id')}-${$(el).attr('data-col-id')}`, + ); +}; const getVariableOrderingFromPage = (page) => { const isSkDPage = page === PAGE_NAME.skd; const isSkDSelectChecked = $(jumpEls.jumpVariableSetting).prop('checked'); let orderings = {}; if (page === PAGE_NAME.skd) { - orderings = graphStore.getVariableOrdering(procConfigs, isSkDPage && isSkDSelectChecked, !isSkDPage); - } else if(page === PAGE_NAME.rlp) { + orderings = graphStore.getVariableOrdering( + procConfigs, + isSkDPage && isSkDSelectChecked, + !isSkDPage, + ); + } else if (page === PAGE_NAME.rlp) { const targetVars = graphStore.getTargetVariables(true); orderings = { ordering: targetVars, - orderingID: targetVars.map(col => col.id), - } + orderingID: targetVars.map((col) => col.id), + }; } else { - orderings = graphStore.getVariableOrdering(procConfigs, false, !isSkDPage); + orderings = graphStore.getVariableOrdering( + procConfigs, + false, + !isSkDPage, + ); } return orderings; -} +}; -const bindVariableOrderingToModal = (useFeatureImportance = true, loadByOrderIDs = false) => { +const bindVariableOrderingToModal = ( + useFeatureImportance = true, + loadByOrderIDs = false, +) => { let currentTraceDat = graphStore.getTraceData(); const endProc = {}; const currenPage = getCurrentPage(); let varOrdering = undefined; - if (latestSortColIds || (currentTraceDat.ARRAY_FORMVAL.length && procConfigs)) { + if ( + latestSortColIds || + (currentTraceDat.ARRAY_FORMVAL.length && procConfigs) + ) { latestSortColIdsJumpPage = [...latestSortColIds]; if (latestSortColIds) { - latestSortColIds.forEach(async val => { + latestSortColIds.forEach(async (val) => { const [procId, colId] = val.split('-'); endProc[Number(colId)] = Number(procId); graphStore.updateEndProc(endProc); await procConfigs[Number(procId)].updateColumns(); - }) + }); } else if (currentTraceDat.ARRAY_FORMVAL.length) { - currentTraceDat.ARRAY_FORMVAL.forEach(async endProc => { + currentTraceDat.ARRAY_FORMVAL.forEach(async (endProc) => { await procConfigs[Number(endProc.end_proc)].updateColumns(); }); } if (currenPage === 'skd') { - varOrdering = graphStore.getVariableOrdering(procConfigs, useFeatureImportance, loadByOrderIDs); - }else if(currenPage === 'rlp') { + varOrdering = graphStore.getVariableOrdering( + procConfigs, + useFeatureImportance, + loadByOrderIDs, + ); + } else if (currenPage === 'rlp') { const ordering = graphStore.getTargetVariables(true); varOrdering = { ordering: ordering, - orderingID: ordering.map(col => col.id), + orderingID: ordering.map((col) => col.id), }; } else { - varOrdering = graphStore.getVariableOrdering(procConfigs, false, loadByOrderIDs); + varOrdering = graphStore.getVariableOrdering( + procConfigs, + false, + loadByOrderIDs, + ); } // Check all variable when jump target page is Skd - if (currenPage === PAGE_NAME.skd && getTargetPage()[0] === PAGE_NAME.skd) { - varOrdering.orderingID = varOrdering.ordering.map(col => col.id); - latestSortColIdsJumpPage = [...varOrdering.ordering.map(col => `${col.proc_id}-${col.id}`)]; + if ( + currenPage === PAGE_NAME.skd && + getTargetPage()[0] === PAGE_NAME.skd + ) { + varOrdering.orderingID = varOrdering.ordering.map((col) => col.id); + latestSortColIdsJumpPage = [ + ...varOrdering.ordering.map( + (col) => `${col.proc_id}-${col.id}`, + ), + ]; } if (varOrdering) { buildJumpTbl(varOrdering); @@ -419,7 +577,7 @@ const showErrorMsg = (errMsg) => { // const errMsg = $('#i18nJumpWithoutTargetPageMsg').text(); displayRegisterMessage('#jumpAlertMsg', { message: errMsg, - is_error: true + is_error: true, }); }; const handleClickOKJumpButton = (e) => { @@ -432,7 +590,9 @@ const handleClickOKJumpButton = (e) => { return; } - const isJumpByEmd = $(`${jumpEls.jumpByEmdDf}:not(:disabled)`).prop('checked'); + const isJumpByEmd = $(`${jumpEls.jumpByEmdDf}:not(:disabled)`).prop( + 'checked', + ); let jumpKeyParams = ''; if (isJumpByEmd) { @@ -451,7 +611,8 @@ const handleClickOKJumpButton = (e) => { const limitTargetSensor = MAX_SENSOR_NUMBER[targetPage]; const targetPageHasObjective = HAS_OBJECTIVE_PAGE.includes(targetPage); const rootPageHasObjective = HAS_OBJECTIVE_PAGE.includes(page); - const targetPageHasDivideOption = Object.keys(ALL_DIVISION).includes(targetPage); + const targetPageHasDivideOption = + Object.keys(ALL_DIVISION).includes(targetPage); const rootPageHasDivideOption = Object.keys(ALL_DIVISION).includes(page); // objectiveVar-39 @@ -459,22 +620,45 @@ const handleClickOKJumpButton = (e) => { // const validTrEl = [...allColumnsTr].splice(0, limitTargetSensor); // const excludeTrEl = allColumnsTr.length > limitTargetSensor ? [...allColumnsTr].splice(limitTargetSensor - allColumnsTr.length) : []; - const validTrEl = $(`${jumpEls.jumpTblBody} tr:not(.over-lim-item) input[type=checkbox]:checked`).closest('tr').toArray(); - const excludeTrEl = $(`${jumpEls.jumpTblBody}`).find('tr.over-lim-item input[type=checkbox]:checked,tr input[type=checkbox]:not(:checked)').closest('tr').toArray(); - excludeSensors = excludeTrEl.map(el => $(el).attr('data-col-id')); - jumpCheckedAllSensors = [...validTrEl].map(el => $(el).attr('data-col-id')); + const validTrEl = $( + `${jumpEls.jumpTblBody} tr:not(.over-lim-item) input[type=checkbox]:checked`, + ) + .closest('tr') + .toArray(); + const excludeTrEl = $(`${jumpEls.jumpTblBody}`) + .find( + 'tr.over-lim-item input[type=checkbox]:checked,tr input[type=checkbox]:not(:checked)', + ) + .closest('tr') + .toArray(); + excludeSensors = excludeTrEl.map((el) => $(el).attr('data-col-id')); + jumpCheckedAllSensors = [...validTrEl].map((el) => + $(el).attr('data-col-id'), + ); // let originColID = $(allColumnsTr[0]).attr('data-org-col-id'); // const originColDataType = $(allColumnsTr[0]).attr('data-type'); - const rowObjective = $(`${jumpEls.jumpTblBody} tr input[type=radio]:checked`).closest('tr') + const rowObjective = $( + `${jumpEls.jumpTblBody} tr input[type=radio]:checked`, + ).closest('tr'); let originColID = rowObjective.attr('data-org-col-id'); const originColDataType = rowObjective.attr('data-type'); - const canNotCheckObjectDataType = [DataTypes.STRING.short, DataTypes.DATETIME.short]; + const canNotCheckObjectDataType = [ + DataTypes.STRING.short, + DataTypes.DATETIME.short, + ]; if (isJumpByEmd) { if (canNotCheckObjectDataType.includes(originColDataType)) { - originColID = $([...allColumnsTr].filter(el => !canNotCheckObjectDataType.includes($(el).attr('data-type')))[0]).attr('data-org-col-id'); + originColID = $( + [...allColumnsTr].filter( + (el) => + !canNotCheckObjectDataType.includes( + $(el).attr('data-type'), + ), + )[0], + ).attr('data-org-col-id'); } if (!jumpCheckedAllSensors.includes(originColID)) { @@ -493,11 +677,11 @@ const handleClickOKJumpButton = (e) => { } // IGNORE CHECK ALL - excludeSensors.push('All') + excludeSensors.push('All'); const setDefaultDivision = (targetPage) => { divideOption = ALL_DIVISION[targetPage].default; - } + }; if (!rootPageHasDivideOption && targetPageHasDivideOption) { setDefaultDivision(targetPage); @@ -505,21 +689,31 @@ const handleClickOKJumpButton = (e) => { if (rootPageHasDivideOption && targetPageHasDivideOption) { // check current of root division has in target division all option - const currentRootDivision = graphStore.getTraceData().COMMON.compareType; - - const isTargetPageHasCurrentRootDivision = ALL_DIVISION[targetPage].all.includes(currentRootDivision); + const datetimeRange = $('#datetimeRangeShowValue').text(); + const currentRootDivision = + graphStore.getTraceData().COMMON.compareType; + const isTargetPageHasCurrentRootDivision = + ALL_DIVISION[targetPage].all.includes(currentRootDivision); if (!isTargetPageHasCurrentRootDivision) { - setDefaultDivision(targetPage) + setDefaultDivision(targetPage); if (divideOption && divideOption === divideOptions.cyclicTerm) { dumpedUserSetting.push({ id: 'cyclicTermDatetimePicker', name: 'DATETIME_PICKER', type: 'text', - value: $('#datetimeRangeShowValue').text().split(DATETIME_PICKER_SEPARATOR)[0], + value: datetimeRange.split(DATETIME_PICKER_SEPARATOR)[0], }); } } + if (ALL_DIVISION[page].default === divideOptions.cyclicTerm) { + dumpedUserSetting.push({ + id: DEFAULT_DATETIME_RANGE, + name: DEFAULT_DATETIME_RANGE, + type: 'text', + value: datetimeRange, + }); + } } if (objectiveId && targetPageHasObjective && !rootPageHasObjective) { @@ -529,7 +723,7 @@ const handleClickOKJumpButton = (e) => { checked: true, type: 'radio', value: originColID, - }) + }); } if (rootPageHasDivideOption && !targetPageHasDivideOption) { @@ -537,22 +731,27 @@ const handleClickOKJumpButton = (e) => { id: 'datetimeRangePicker', name: 'DATETIME_RANGE_PICKER', value: $('#datetimeRangeShowValue').text(), - type: 'text' - }) + type: 'text', + }); } // get sorted columns - let sortedColumnIds = validTrEl.map(el => `${$(el).attr('data-proc-id')}-${$(el).attr('data-col-id')}`); + let sortedColumnIds = validTrEl.map( + (el) => `${$(el).attr('data-proc-id')}-${$(el).attr('data-col-id')}`, + ); let currentTraceDat = graphStore.getTraceData(); const isUseDfMode = $(jumpEls.jumpByEmdDf).is(':checked'); if (currentTraceDat.ng_rates && isUseDfMode) { - let ngRateCols = currentTraceDat.ng_rates - .map(ngRateCol => `${ngRateCol.end_proc_id}-${(Number(ngRateCol.end_col_id) * RLP_DUMMY_ID)}`); - ngRateCols = ngRateCols.filter(col => !sortedColumnIds.includes(col)); + let ngRateCols = currentTraceDat.ng_rates.map( + (ngRateCol) => + `${ngRateCol.end_proc_id}-${Number(ngRateCol.end_col_id) * RLP_DUMMY_ID}`, + ); + ngRateCols = ngRateCols.filter((col) => !sortedColumnIds.includes(col)); sortedColumnIds = [...sortedColumnIds, ...ngRateCols]; } localStorage.setItem(sortedColumnsKey, JSON.stringify(sortedColumnIds)); + isCopyFromJumpModel = true; $('button[name="copyPage"]').trigger('click'); goToOtherPage(`${targetUrl}?from_jump_func=1${jumpKeyParams}`, false, true); $(jumpEls.jumpModal).modal('hide'); @@ -564,6 +763,7 @@ const resetCommonJumpObj = () => { objectiveId = null; divideOption = null; dumpedUserSetting = []; + isCopyFromJumpModel = false; }; const disableGUIFormElement = () => { @@ -572,10 +772,10 @@ const disableGUIFormElement = () => { if (useEMD) { GuiFrom.css({ position: 'relative', - }) + }); const jumpWithDfModeMsg = $(jumpEls.jumpWithDfMode).text(); const overlayEL = `
      ${jumpWithDfModeMsg}
      `; - GuiFrom.append(overlayEL) + GuiFrom.append(overlayEL); } else { enableGUIFormElement(); } @@ -592,17 +792,20 @@ const jumpWithEMDAndNGCols = (e) => { const targetVars = graphStore.getTargetVariables(isJumpWithEMDChecked); ordering = { ordering: targetVars, - orderingID: targetVars.map(col => col.id), - } + orderingID: targetVars.map((col) => col.id), + }; } else { - ordering = graphStore.getVariableOrdering(procConfigs, false) + ordering = graphStore.getVariableOrdering(procConfigs, false); } // Check all variable when jump target page is Skd if (getTargetPage()[0] === PAGE_NAME.skd) { - ordering.orderingID = ordering.ordering.map(col => col.id); - latestSortColIdsJumpPage = [...ordering.ordering.map(col => `${col.proc_id}-${col.id}`)]; + ordering.orderingID = ordering.ordering.map((col) => col.id); + latestSortColIdsJumpPage = [ + ...ordering.ordering.map((col) => `${col.proc_id}-${col.id}`), + ]; } buildJumpTbl(ordering, isJumpWithEMDChecked); + validateJumpSkdObjective(); }; const updateEventChangeVariableNameJump = (varOrdering) => { @@ -610,37 +813,63 @@ const updateEventChangeVariableNameJump = (varOrdering) => { varOrdering.ordering.forEach((variable, i) => { const procId = variable.proc_id; const procColId = variable.id; - $(jumpEls.jumpTblBody).find(`tr[data-proc-id="${procId}"][data-col-id="${procColId}"]`).find(`input[type="checkbox"]`).on('change', (e) => { - updateOrderingJumpPage(varOrdering, e); - handleSortVariableNameByCheckbox(e); - updateObjectiveForTargetJumpPage(jumpEls.jumpTblID); - updatePriority(jumpEls.jumpTblID); - updateOverItemsColor(jumpEls.jumpTblID); - }); - $(jumpEls.jumpTblBody).find(`tr[data-proc-id="${procId}"][data-col-id="${procColId}"]`).find(`input[type="radio"]`).on('change', (e) => { - noneObjective = false; - sortVariableByObjective(varOrdering, e); - updatePriority(jumpEls.jumpTblID); - updateOverItemsColor(jumpEls.jumpTblID); - }) + $(jumpEls.jumpTblBody) + .find( + `tr[data-proc-id="${procId}"][data-col-id="${procColId}"]`, + ) + .find(`input[type="checkbox"]`) + .on('change', (e) => { + const targetObjectiveId = $(e.target) + .closest('tr') + .find('input[type="radio"]') + .attr('id'); + const objectiveIdVal = $(jumpEls.jumpTblBody) + .find('input[name=objective_var]:checked') + .attr('id'); + updateOrderingJumpPage(varOrdering, e); + updateObjectiveForTargetPage( + objectiveIdVal, + targetObjectiveId, + ); + handleSortVariableNameByCheckbox(e); + validateJumpSkdObjective(); + updatePriority(jumpEls.jumpTblID); + updateOverItemsColor(jumpEls.jumpTblID); + updateJumpStatus(); + }); + $(jumpEls.jumpTblBody) + .find( + `tr[data-proc-id="${procId}"][data-col-id="${procColId}"]`, + ) + .find(`input[type="radio"]`) + .on('change', (e) => { + noneObjective = false; + validateJumpSkdObjective(); + sortVariableByObjective(varOrdering, e); + updatePriority(jumpEls.jumpTblID); + updateOverItemsColor(jumpEls.jumpTblID); + updateJumpStatus(); + }); }); } if (noneObjective) { - $(jumpEls.jumpTblBody).find('input[type="radio"]').each(function() { - $(this).prop('checked', false); - }); + $(jumpEls.jumpTblBody) + .find('input[type="radio"]') + .each(function () { + $(this).prop('checked', false); + }); } }; const handleSortVariableNameByCheckbox = (e) => { const rowVariableName = $(jumpEls.jumpTblBodyTr); - rowVariableName.sort(function(a,b) { + rowVariableName.sort(function (a, b) { const aChecked = $(a).find('input[type="checkbox"]').is(':checked'); const bChecked = $(b).find('input[type="checkbox"]').is(':checked'); // Rows with checked checkboxes come bellow list checked return aChecked === bChecked ? 0 : aChecked ? -1 : 1; }); - $.each(rowVariableName, function(index, row) { + $.each(rowVariableName, function (index, row) { $(jumpEls.jumpTblBody).append(row); }); }; @@ -654,20 +883,28 @@ const updateOrderingJumpPage = (varOrdering, e) => { latestSortColIdsJumpPage.push(`${procId}-${colId}`); } } else { - const isObjective = elementRow.find('input[name="objective_var"]').is(':checked'); - if (isObjective){ - $(jumpEls.jumpTblBody).find(`input[name="objective_var"]:checked`).prop('checked', false); + const isObjective = elementRow + .find('input[name="objective_var"]') + .is(':checked'); + if (isObjective) { + $(jumpEls.jumpTblBody) + .find(`input[name="objective_var"]:checked`) + .prop('checked', false); noneObjective = true; } - latestSortColIdsJumpPage = latestSortColIdsJumpPage.filter(e => e !== `${procId}-${colId}`); + latestSortColIdsJumpPage = latestSortColIdsJumpPage.filter( + (e) => e !== `${procId}-${colId}`, + ); } const newVarOrdering = { ordering: varOrdering.ordering, - orderingID: latestSortColIdsJumpPage.map(val => Number(val.split('-')[1])), - } + orderingID: latestSortColIdsJumpPage.map((val) => + Number(val.split('-')[1]), + ), + }; buildJumpTbl(newVarOrdering); -} +}; const sortVariableByObjective = (varOrdering, e) => { const elementRow = $(e.target).closest('tr'); @@ -675,7 +912,9 @@ const sortVariableByObjective = (varOrdering, e) => { const colId = elementRow.attr('data-col-id'); if (e.target.checked) { - const checkboxIsChecked = elementRow.find('input[type="checkbox"]').is(':checked'); + const checkboxIsChecked = elementRow + .find('input[type="checkbox"]') + .is(':checked'); if (!checkboxIsChecked) { elementRow.find('input[type="checkbox"]').prop('checked', true); } @@ -685,12 +924,126 @@ const sortVariableByObjective = (varOrdering, e) => { $(jumpEls.jumpTblBody).prepend(elementRow); } else { elementRow.find('input[type="checkbox"]').prop('checked', false); - latestSortColIdsJumpPage = latestSortColIdsJumpPage.filter(e => e !== `${procId}-${colId}`); + latestSortColIdsJumpPage = latestSortColIdsJumpPage.filter( + (e) => e !== `${procId}-${colId}`, + ); const newVarOrdering = { ordering: varOrdering.ordering, - orderingID: latestSortColIdsJumpPage.map(val => Number(val.split('-')[1])), - } + orderingID: latestSortColIdsJumpPage.map((val) => + Number(val.split('-')[1]), + ), + }; buildJumpTbl(newVarOrdering); } -} \ No newline at end of file +}; + +const updateObjectiveForTargetPage = (objectiveIdVal, targetObjectiveId) => { + const objectiveElem = $( + `${jumpEls.jumpTblBody} tr input[type=radio][name=objective_var]`, + ); + const isPageJumpToHasObjective = HAS_OBJECTIVE_PAGE.includes( + getTargetPage()[0], + ); + if (isPageJumpToHasObjective) { + if ( + objectiveIdVal && + objectiveIdVal === targetObjectiveId && + !noneObjective + ) { + noneObjective = true; + $(`#${objectiveIdVal}`).prop('checked', false); + } else if (objectiveIdVal && !noneObjective) { + moveObjectiveRowToTop(objectiveIdVal); + } else { + objectiveElem.prop('checked', ''); + } + } else { + disableJumpObjective(objectiveElem); + } +}; + +const moveObjectiveRowToTop = (objectiveIdVal) => { + const elementRow = $(`#${objectiveIdVal}`) + .prop('checked', true) + .parents() + .eq(2); + $(jumpEls.jumpTblBody).prepend(elementRow); +}; + +const handleJumpChangeSelectAll = (elem) => { + const isChecked = elem.checked; + $(jumpEls.jumpVariableEls).prop('checked', isChecked); + if (isChecked) { + latestSortColIdsJumpPage = $(jumpEls.jumpTblBodyTr) + .toArray() + .map( + (elem) => + `${$(elem).attr('data-proc-id')}-${$(elem).attr('data-col-id')}`, + ); + } else { + $(jumpEls.jumpObjectiveEls).prop('checked', false); + latestSortColIdsJumpPage = []; + } + updateJumpStatus(); +}; + +const handleJumpSelectedItems = (elem) => { + const isChecked = elem.checked; + if (isChecked) { + $(`${jumpEls.pageItem}.active`).trigger('click'); + } else { + const currentPage = getCurrentPage(); + const orgOrdering = getVariableOrderingFromPage(currentPage); + orgOrdering.orderingID.map((valID) => { + const orgValElem = $(`#variable_${valID}`); + orgValElem.prop('checked', isChecked).trigger('change'); + }); + } +}; + +// Update [select all] , [selected item], [total checked] +const updateJumpStatus = () => { + const targetPage = getTargetPage()[0]; + const countVariable = $(jumpEls.jumpVariableEls).length; + const countVariableUnChecked = $( + `${jumpEls.jumpVariableEls}:not(:checked)`, + ).length; + const countVariableChecked = countVariable - countVariableUnChecked; + $(jumpEls.totalCheckedColumn).text(countVariableChecked); + $(jumpEls.totalColumns).text(MAX_SENSOR_NUMBER[targetPage]); + $(jumpEls.jumpSelectAllCheckbox).prop( + 'checked', + countVariable !== 0 && countVariableUnChecked === 0, + ); + if ($(`${jumpEls.jumpTblBodyTr}.gray`).length === 0) { + $(jumpEls.searchInput).trigger($.Event('keypress'), { keycode: 13 }); + } +}; + +function searchJumpInputHandler(event) { + // Ignore enter event + if (event.keyCode !== 13) { + /** @type HTMLTableRowElement[] */ + const rows = [...$(jumpEls.jumpTblBodyTr)]; + searchByValueOfTable(event, rows); + } +} + +const updateLatestSortColByRowElems = (rowElemsAdd, rowElemsRemove) => { + const variableChecked = rowElemsAdd.map( + (elem) => + `${$(elem).attr('data-proc-id')}-${$(elem).attr('data-col-id')}`, + ); + const variableUnchecked = rowElemsRemove.map( + (elem) => + `${$(elem).attr('data-proc-id')}-${$(elem).attr('data-col-id')}`, + ); + latestSortColIdsJumpPage.filter( + (item) => !variableUnchecked.includes(item), + ); + latestSortColIdsJumpPage.push(...variableChecked); + latestSortColIdsJumpPage = latestSortColIdsJumpPage + .filter((item) => !variableUnchecked.includes(item)) + .filter((value, index, array) => array.indexOf(value) === index); +}; diff --git a/ap/static/common/js/save_load_user_input.js b/ap/static/common/js/save_load_user_input.js index 006ae90..af30e79 100644 --- a/ap/static/common/js/save_load_user_input.js +++ b/ap/static/common/js/save_load_user_input.js @@ -1,7 +1,3 @@ -/* eslint-disable guard-for-in,indent,no-tabs,linebreak-style */ -/* eslint-disable no-restricted-syntax */ -/* eslint-disable no-undef */ - let isExportMode = false; let UserSettingExportInfo = null; let isUserSwitchedTab = true; @@ -13,6 +9,8 @@ let isSettingChanged = false; let isSettingLoading = false; const INVALID_FILTER_DETAIL_IDS = 'invalid_filter_detail_ids'; const SHARED_USER_SETTING = 'shared_user_setting'; +const JUMP_SHARED_USER_SETTING = 'jump_shared_user_setting'; +const DEFAULT_DATETIME_RANGE = 'defaultRangeTime'; let lastUsedFormData = null; let latestIndexOrder = []; let selectedHref = ''; @@ -96,24 +94,36 @@ const getShowFormId = () => { } return null; - - }; -const genInvalidFilterName = (procId, startDate, startTime, endDate, endTime) => [INVALID_FILTER_DETAIL_IDS, procId, startDate, startTime, endDate, endTime].join('_'); +const genInvalidFilterName = (procId, startDate, startTime, endDate, endTime) => + [ + INVALID_FILTER_DETAIL_IDS, + procId, + startDate, + startTime, + endDate, + endTime, + ].join('_'); const getConditionGroups = (parentDiv) => { - const searchGroups = $(parentDiv).find('[id*=cond-proc].grouplist-checkbox-with-search'); + const searchGroups = $(parentDiv).find( + '[id*=cond-proc].grouplist-checkbox-with-search', + ); return searchGroups; }; const getNonConditionGroups = (parentDiv) => { - const searchGroups = $(parentDiv).find('.grouplist-checkbox-with-search').not('[id*=cond-proc]'); + const searchGroups = $(parentDiv) + .find('.grouplist-checkbox-with-search') + .not('[id*=cond-proc]'); return searchGroups; }; const getCheckedFilters = (parentDiv) => { - const filterEles = $(parentDiv).find('[id$=cond-proc-row] input:checkbox:checked'); + const filterEles = $(parentDiv).find( + '[id$=cond-proc-row] input:checkbox:checked', + ); const filterDetailIds = []; for (el of filterEles) { const val = Number(el.value); @@ -134,7 +144,9 @@ const getFilterKeys = (parentDiv) => { return null; } - const timeRadio = $(parentDiv).find('input[type=radio][name*=raceTime]:checked'); + const timeRadio = $(parentDiv).find( + 'input[type=radio][name*=raceTime]:checked', + ); if (!timeRadio.length) { return null; } @@ -165,7 +177,13 @@ const getFilterKeys = (parentDiv) => { endTime = endTimes[i].value; } - const key = genInvalidFilterName(proc.val(), startDates[i].value, startTime, endDate, endTime); + const key = genInvalidFilterName( + proc.val(), + startDates[i].value, + startTime, + endDate, + endTime, + ); keys.push(key); } @@ -173,7 +191,8 @@ const getFilterKeys = (parentDiv) => { }; const controlInvalidFilterLifeCycle = (key) => { - const invalidFilterKeys = JSON.parse(localStorage.getItem(INVALID_FILTER_DETAIL_IDS)) || []; + const invalidFilterKeys = + JSON.parse(localStorage.getItem(INVALID_FILTER_DETAIL_IDS)) || []; const pos = invalidFilterKeys.indexOf(key); if (pos >= 0) { invalidFilterKeys.splice(pos, 1); @@ -187,7 +206,10 @@ const controlInvalidFilterLifeCycle = (key) => { invalidFilterKeys.splice(i, 1); } - localStorage.setItem(INVALID_FILTER_DETAIL_IDS, JSON.stringify(invalidFilterKeys)); + localStorage.setItem( + INVALID_FILTER_DETAIL_IDS, + JSON.stringify(invalidFilterKeys), + ); }; const saveInvalidFilters = (key, invalidFilterDetailIds) => { @@ -221,7 +243,6 @@ const removeInvalidFilters = (key, invalidFilterDetailIds) => { return true; }; - const getInvalidFilters = (key) => { const data = JSON.parse(localStorage.getItem(key)) || []; return data; @@ -234,16 +255,33 @@ const getSortKeys = (targetEle, isSimple = null) => { const liBlue = $(targetEle).hasClass('li-blue'); const columnName = $(targetEle).find('.column-master-name'); const cycleTimeCol = $(targetEle).find('.data-type'); - const facetSelect = $(targetEle).find('select'); - const facetLevel = facetSelect.length > 0 && facetSelect.val() !== '' ? Number(facetSelect.val()) : lastPosNumber; + const colorValElm = $(targetEle).find('select[name=colorVar]'); + const facetSelect = $(targetEle).find('select:not([name=colorVar])'); + const colorVal = + colorValElm.length > 0 && colorValElm.val() !== '' + ? Number(colorValElm.val()) + : lastPosNumber; + const facetLevel = + facetSelect.length > 0 && facetSelect.val() !== '' + ? Number(facetSelect.val()) + : lastPosNumber; const checkboxs = $(targetEle).find('input:checkbox,input:radio'); const val = checkboxs.length === 0 ? lastPosNumber : checkboxs[0].value; - const sensorOrder = checkboxs.length > 0 ? Number($(checkboxs[0]).attr('data-order')) : null; + const sensorOrder = + checkboxs.length > 0 + ? Number($(checkboxs[0]).attr('data-order')) + : null; const isChecked = !!(checkboxs.length > 0 && checkboxs[0].checked); - const isColumnNameBlank = !!(columnName.length > 0 && columnName.text() === ''); + const isColumnNameBlank = !!( + columnName.length > 0 && columnName.text() === '' + ); // order by sensor x, y - const sensor = checkboxs.length > 0 ? $(checkboxs[0]).attr('data-sensor') : null; - const order = checkboxs.length > 0 && isChecked ? $(checkboxs[0]).attr('order') : null; + const sensor = + checkboxs.length > 0 ? $(checkboxs[0]).attr('data-sensor') : null; + const order = + checkboxs.length > 0 && isChecked + ? $(checkboxs[0]).attr('order') + : null; if (val === 'NO_FILTER') { keys.push(0); @@ -254,7 +292,7 @@ const getSortKeys = (targetEle, isSimple = null) => { } if (isSimple) { - keys.push(isChecked === null ? lastPosNumber : (isChecked ? 0 : 1)); + keys.push(isChecked === null ? lastPosNumber : isChecked ? 0 : 1); return keys; } @@ -277,14 +315,14 @@ const getSortKeys = (targetEle, isSimple = null) => { } else if (sensor && sensor === 'y') { keys.push(0.1); } else { - keys.push(isChecked === null ? lastPosNumber : (isChecked ? 0 : 1)); + keys.push(isChecked === null ? lastPosNumber : isChecked ? 0 : 1); } - keys.push(facetLevel); + keys.push(colorVal, facetLevel); } else { - keys.push(facetLevel); - keys.push(isChecked === null ? lastPosNumber : (isChecked ? 0 : 1)); + keys.push(colorVal, facetLevel); + keys.push(isChecked === null ? lastPosNumber : isChecked ? 0 : 1); } - keys.push(liGrey ? 2 : (liBlue ? 1 : 0)); + keys.push(liGrey ? 2 : liBlue ? 1 : 0); keys.push(checkboxs.length >= 2 ? (checkboxs[1].checked ? 0 : 1) : 2); keys.push(cycleTimeVal); // keys.push(Number(val)); @@ -318,7 +356,11 @@ const sortHtmlElements = (parentEle, isSimple = null) => { return isChanged; }; -const moveFilter = (searchGroup, invalidFilterDetailIds, onlyCheckedFilter = true) => { +const moveFilter = ( + searchGroup, + invalidFilterDetailIds, + onlyCheckedFilter = true, +) => { const items = $(searchGroup).find('.list-group-item'); for (e of items) { const ele = $(e); @@ -334,7 +376,9 @@ const moveFilter = (searchGroup, invalidFilterDetailIds, onlyCheckedFilter = tru } if (filterEle.length) { - if (invalidFilterDetailIds.indexOf(Number(filterEle[0].value)) >= 0) { + if ( + invalidFilterDetailIds.indexOf(Number(filterEle[0].value)) >= 0 + ) { if (!ele.hasClass('li-grey')) { ele.addClass('li-grey'); } @@ -428,13 +472,22 @@ const setTriggerInvalidFilter = (parentDiv) => { proc = $(parentDiv).find('select[name^=end_proc]').first(); } - const timeRadio = $(parentDiv).find('input[type=radio][name*=raceTime]:checked'); + const timeRadio = $(parentDiv).find( + 'input[type=radio][name*=raceTime]:checked', + ); const startDates = $(parentDiv).find('input[name*=START_DATE]'); const startTimes = $(parentDiv).find('input[name*=START_TIME]'); const endDates = $(parentDiv).find('input[name*=END_DATE]'); const endTimes = $(parentDiv).find('input[name*=END_TIME]'); - for (const ele of [proc, timeRadio, startDates, startTimes, endDates, endTimes]) { + for (const ele of [ + proc, + timeRadio, + startDates, + startTimes, + endDates, + endTimes, + ]) { ele.on('change', (_) => { const showTab = getShowTab(); loadAllInvalidFilterCaller(showTab); @@ -461,8 +514,15 @@ const checkResultExist = (res) => { }; // //////////////////////////////////////// -const saveLoadUserInput = (selector, localStorageKeyPrefix = '', parent = '', localStorageKey = null, isLoadNew = true) => { +const saveLoadUserInput = ( + selector, + localStorageKeyPrefix = '', + parent = '', + localStorageKey = null, + isLoadNew = true, +) => { const DYNAMIC_ELE_ATTR = 'data-gen-btn'; + const isEventJumpOKBtn = isCopyFromJumpModel; const buildEleSelector = (name, value = null, id = null) => { let output = ''; @@ -486,9 +546,8 @@ const saveLoadUserInput = (selector, localStorageKeyPrefix = '', parent = '', lo let formId; let form; - if (typeof (selector) === 'string') { - if (!selector.replace('#', '')) return () => { - }; + if (typeof selector === 'string') { + if (!selector.replace('#', '')) return () => {}; form = document.querySelector(selector); // form does not exist if (!form) { @@ -519,16 +578,22 @@ const saveLoadUserInput = (selector, localStorageKeyPrefix = '', parent = '', lo const tabPanes = document.querySelectorAll('.tab-pane'); const checkActiveTab = (el) => { - return el.classList.contains('tab-pane') && el.classList.contains('active') && el.classList.contains('show'); + return ( + el.classList.contains('tab-pane') && + el.classList.contains('active') && + el.classList.contains('show') + ); }; - const serializeArray = () => { const serializeData = []; elements.forEach((el) => { const data = { - id: el.id, name: el.name, value: el.value || $(el).val(), type: el.type, + id: el.id, + name: el.name, + value: el.value || $(el).val(), + type: el.type, }; // load level const loadLevel = $(el).data('load-level'); @@ -539,14 +604,19 @@ const saveLoadUserInput = (selector, localStorageKeyPrefix = '', parent = '', lo // only match if (el.type === 'radio' || el.type === 'checkbox') { if (data.name === 'objectiveVar' && objectiveId) { - if (data.id === objectiveId) { + if (data.id === objectiveId) { data.checked = true; } else if (data.id !== objectiveId) { data.checked = false; } } else if (/GET02_VALS_SELECT/.test(data.name)) { - if (jumpCheckedAllSensors.length || jumpCheckedAllSensors.length) { - data.checked = jumpCheckedAllSensors.includes(data.value); + if ( + jumpCheckedAllSensors.length || + jumpCheckedAllSensors.length + ) { + data.checked = jumpCheckedAllSensors.includes( + data.value, + ); } else { data.checked = el.checked; } @@ -560,13 +630,17 @@ const saveLoadUserInput = (selector, localStorageKeyPrefix = '', parent = '', lo // convert data.name === 'DATETIME_RANGE_PICKER' if (data.name === 'DATETIME_RANGE_PICKER') { - const {startDate, startTime, endDate, endTime} = splitDateTimeRange(data.value); + const { startDate, startTime, endDate, endTime } = + splitDateTimeRange(data.value); if (!startTime && !endTime) { - data.value = `${startDate} 00:00 ${DATETIME_PICKER_SEPARATOR} ${endDate} 00:00` + data.value = `${startDate} 00:00 ${DATETIME_PICKER_SEPARATOR} ${endDate} 00:00`; } } - if (data.id === 'datetimeRangePicker' && data.name === 'DATETIME_RANGE_PICKER') { + if ( + data.id === 'datetimeRangePicker' && + data.name === 'DATETIME_RANGE_PICKER' + ) { if (divideOption === divideOptions.cyclicTerm) { // assign new data serializeData.push({ @@ -575,6 +649,7 @@ const saveLoadUserInput = (selector, localStorageKeyPrefix = '', parent = '', lo type: 'text', value: data.value.split(DATETIME_PICKER_SEPARATOR)[0], }); + serializeData.push(...calcCyclicTermConfig(data.value)); } if (divideOption === divideOptions.dataNumberTerm) { @@ -597,16 +672,15 @@ const saveLoadUserInput = (selector, localStorageKeyPrefix = '', parent = '', lo } serializeData.push(data); - }); if (divideOption) { serializeData.push({ - id: "divideOption", - name: "compareType", - type: "select-one", + id: 'divideOption', + name: 'compareType', + type: 'select-one', value: divideOption, - }) + }); } if (dumpedUserSetting.length) { @@ -617,14 +691,20 @@ const saveLoadUserInput = (selector, localStorageKeyPrefix = '', parent = '', lo tabPanes.forEach((el) => { const data = { - id: el.id, name: el.name, value: el.value, type: el.type, isActiveTab: checkActiveTab(el), + id: el.id, + name: el.name, + value: el.value, + type: el.type, + isActiveTab: checkActiveTab(el), }; serializeData.push(data); }); - // sort checked judge - const checkedJudge = serializeData.filter(setting => setting.name === 'judgeVar' && setting.checked === true); + const checkedJudge = serializeData.filter( + (setting) => + setting.name === 'judgeVar' && setting.checked === true, + ); if (checkedJudge.length) { serializeData.push(checkedJudge[0]); } @@ -633,8 +713,23 @@ const saveLoadUserInput = (selector, localStorageKeyPrefix = '', parent = '', lo }; const saveUserInput = () => { - const formData = JSON.stringify(serializeArray()); - localStorage.setItem(key, formData); + const formData = serializeArray(); + // Handler save user setting to local storage for Jump mode + if (isEventJumpOKBtn) { + const settings = { filter: {}, traceDataForm: formData }; + const userShareSettings = { settings: settings }; + const isJumpWithOdf = $(jumpEls.checkboxOdfSetting).prop('checked'); + if (isJumpWithOdf) { + userShareSettings.settings.filter = getOnDemandFilterInput(); + } + localStorage.setItem( + JUMP_SHARED_USER_SETTING, + JSON.stringify(userShareSettings), + ); + } else { + // Save share user setting for copy page + localStorage.setItem(key, JSON.stringify(formData)); + } }; // call all event of element @@ -658,7 +753,9 @@ const saveLoadUserInput = (selector, localStorageKeyPrefix = '', parent = '', lo let shownEles = []; for (const keyword of [id, name]) { if (keyword) { - shownEles = form.querySelectorAll(`[${DYNAMIC_ELE_ATTR}="${id}"]`); + shownEles = form.querySelectorAll( + `[${DYNAMIC_ELE_ATTR}="${id}"]`, + ); if (shownEles.length) { return shownEles; } @@ -715,7 +812,7 @@ const saveLoadUserInput = (selector, localStorageKeyPrefix = '', parent = '', lo // console.log(`genNewEle: ${i}, ${ele.name}`); const btnAddNew = checkEleExistOnScreen(btn, ele); if (btnAddNew) { - callAllEvent(btnAddNew, events = ['click']); + callAllEvent(btnAddNew, (events = ['click'])); } else { break; } @@ -732,8 +829,13 @@ const saveLoadUserInput = (selector, localStorageKeyPrefix = '', parent = '', lo const shownEles = getShownEles(dataGenBtnId, dataGenBtnName); for (const shownEle of shownEles) { if (!usedEleNames.includes(shownEle.name)) { - const target = form.querySelectorAll(`[name="${shownEle.name}"]`); - $(target).closest('.dynamic-element').find('.close-icon').trigger('click'); + const target = form.querySelectorAll( + `[name="${shownEle.name}"]`, + ); + $(target) + .closest('.dynamic-element') + .find('.close-icon') + .trigger('click'); } } }; @@ -764,7 +866,10 @@ const saveLoadUserInput = (selector, localStorageKeyPrefix = '', parent = '', lo const ele = eles[idx]; eleNames.push(ele.name); // check if process is exists then render HTML elements - if (procConfigs[ele.value] && (!['TermSerialProcess', 'serialProcess'].includes(ele.name))) { + if ( + procConfigs[ele.value] && + !['TermSerialProcess', 'serialProcess'].includes(ele.name) + ) { genNewEle(btn, ele); } @@ -772,7 +877,9 @@ const saveLoadUserInput = (selector, localStorageKeyPrefix = '', parent = '', lo ele.value = convertDatetimePickerSeparator(ele.value); callAllEvent($(`#${btn}`), ['click']); // APPLY VALUE TO RENDERED DATE TIME PICKER - const dates = $('.datetimerange-group').find(`[name=${DATETIME_RANGE_PICKER_CLASS}]`); + const dates = $('.datetimerange-group').find( + `[name=${DATETIME_RANGE_PICKER_CLASS}]`, + ); const renderedInput = dates[dates.length - 1]; $(renderedInput).val(ele.value).trigger('change'); @@ -797,10 +904,14 @@ const saveLoadUserInput = (selector, localStorageKeyPrefix = '', parent = '', lo }; const isDateTimePickerEl = (name) => { - if ([DATETIME_RANGE_PICKER_CLASS, - DATE_RANGE_PICKER_CLASS, - DATETIME_PICKER_CLASS, - DATE_PICKER_CLASS].includes(name)) { + if ( + [ + DATETIME_RANGE_PICKER_CLASS, + DATE_RANGE_PICKER_CLASS, + DATETIME_PICKER_CLASS, + DATE_PICKER_CLASS, + ].includes(name) + ) { return true; } return false; @@ -809,7 +920,7 @@ const saveLoadUserInput = (selector, localStorageKeyPrefix = '', parent = '', lo // todo: check 09/16 endtime const loadNonRadioCheckEle = (data) => { const remainEles = []; - const srcSetting = localStorage.getItem('srcSetting') || null; + const srcSetting = getLocalStorageSrcSetting(); const desSetting = window.location.pathname; // load value @@ -827,14 +938,25 @@ const saveLoadUserInput = (selector, localStorageKeyPrefix = '', parent = '', lo let eleSelector = buildEleSelector(v.name, null, v.id); input = form.querySelector(eleSelector); // selection - if (v.name === 'remove_outlier_type' && v.value === 'majority') { + if ( + v.name === 'remove_outlier_type' && + v.value === 'majority' + ) { continue; } if (v.type === 'select-one') { // in case of existing selection, but not existing item/option // do nothing - if (input !== null && v.name === 'catExpBox' && !isLoadNew) { - v.value = facetGenerate(srcSetting, desSetting, v) + if ( + input !== null && + v.name === 'catExpBox' && + !isLoadNew + ) { + v.value = facetGenerate( + srcSetting?.srcPath, + desSetting, + v, + ); } } @@ -862,8 +984,12 @@ const saveLoadUserInput = (selector, localStorageKeyPrefix = '', parent = '', lo if (v.name === 'compareType') { const devideDOM = $('select[id=divideOption]'); if (devideDOM.length) { - const optionsDOM = $('select[id=divideOption]').find('option'); - const options = Array.from(optionsDOM).map((opt) => $(opt).val()); + const optionsDOM = $('select[id=divideOption]').find( + 'option', + ); + const options = Array.from(optionsDOM).map((opt) => + $(opt).val(), + ); if (!options.includes(v.value)) { v.value = options[0]; } @@ -885,7 +1011,10 @@ const saveLoadUserInput = (selector, localStorageKeyPrefix = '', parent = '', lo } let input = null; let eleSelector; - if (v.name === CYCLIC_TERM.DIV_CALENDER || v.name === "autoUpdateInterval") { + if ( + v.name === CYCLIC_TERM.DIV_CALENDER || + v.name === 'autoUpdateInterval' + ) { eleSelector = buildEleSelector(null, null, v.id); } else { eleSelector = buildEleSelector(v.name); @@ -921,6 +1050,44 @@ const saveLoadUserInput = (selector, localStorageKeyPrefix = '', parent = '', lo return remainEles; }; + const updateShareUserSetting = (src, des, dataUpdate) => { + const outlierFromPages = [PAGE_NAME.pcp, PAGE_NAME.skd, PAGE_NAME.gl]; + + if (!src || !des || isEmpty(dataUpdate)) return; + + if ( + !isLoadNew && + outlierFromPages.includes(src) && + !outlierFromPages.includes(des) + ) { + updateOutlierSetting(src, des, dataUpdate); + } + }; + + /* + Update outlier when copy from PCP/SKD/GL pages and paste to other pages + --------- PCP, SKD, GL pages ----------------- Other pages ---- + | [objective var] | [explanatory var] | Outlier | + | check | No check | No check | + | check | check | check | + | No check | check | check | + | No check | No check | No check | + */ + const updateOutlierSetting = (src, des, dataUpdate) => { + const objectiveVar = dataUpdate.find( + (e) => e.name === 'remove_outlier_objective_var', + ); + const explanatoryVar = dataUpdate.find( + (e) => e.name === 'remove_outlier_explanatory_var', + ); + const outlierIndex = dataUpdate.findIndex( + (e) => e.name === 'remove_outlier', + ); + if (objectiveVar && explanatoryVar && outlierIndex !== -1) { + dataUpdate[outlierIndex].checked = explanatoryVar.checked; + } + }; + const divideElementGroup = (data) => { const xIndexNames = ['serialProcess', 'serialColumn', 'serialOrder']; const activeTabs = []; @@ -964,20 +1131,85 @@ const saveLoadUserInput = (selector, localStorageKeyPrefix = '', parent = '', lo } procs.forEach(async (proc, i) => { - await addSerialOrderRow(null, 'serialProcess', 'serialColumn', 'serialOrder', Number(proc.value), Number(cols[i].value), orders[i].value); + await addSerialOrderRow( + null, + 'serialProcess', + 'serialColumn', + 'serialOrder', + Number(proc.value), + Number(cols[i].value), + orders[i].value, + ); bindChangeProcessEvent(); updatePriorityAndDisableSelected(); - setTimeout(() => { // wait select2 to be shown + setTimeout(() => { + // wait select2 to be shown bindChangeOrderColEvent(); }, 200); - }) + }); + }; + + const handlerSettingDefaultDivide = (data, srcSetting) => { + // Ignore load default datetime ranges + if (isLoadNew || !srcSetting || srcSetting.isJump) { + return; + } + const currentPage = getCurrentPage(); + const pagePasteHasDivideOption = + Object.keys(ALL_DIVISION).includes(currentPage); + const pageCopiedHasDivideOption = Object.keys(ALL_DIVISION).includes( + srcSetting.pageName, + ); + const radioDefaultInterval = data.find( + (d) => d.id === 'radioDefaultInterval' && d.name === 'traceTime', + ); + const isDefaultInterval = + radioDefaultInterval && radioDefaultInterval.checked; + // Case copy page not division option to pages have DIVISION + if ( + !pageCopiedHasDivideOption && + pagePasteHasDivideOption && + isDefaultInterval + ) { + const setDefaultCyclicTerm = + $('#divideOption').val() === CYCLIC_TERM.NAME; + const datetimeRange = data.find( + (d) => d.name === 'DATETIME_RANGE_PICKER', + ); + setDefaultCyclicTermConfig( + datetimeRange?.value, + setDefaultCyclicTerm, + ); + } + }; + + const getLocalStorageSrcSetting = () => { + const srcSetting = localStorage.getItem('srcSetting') || null; + if (srcSetting) { + try { + const parseSrcSetting = JSON.parse(srcSetting); + if (typeof parseSrcSetting === 'object') return parseSrcSetting; + } catch (e) { + return { + srcPath: srcSetting, + pageName: srcSetting.split('/').at(-1), + isJump: false, + }; + } + } + return srcSetting; }; - const innerFunc = (isLoad = true, isSaveToLocalStorage = true, savedData = null) => { + const innerFunc = ( + isLoad = true, + isSaveToLocalStorage = true, + savedData = null, + ) => { if (isLoad) { let data; if (isSaveToLocalStorage) { - data = JSON.parse(localStorage.getItem(key)); + const shareSettings = getLocalStorageShareUserSetting(); + data = shareSettings?.settings?.traceDataForm || null; } else { data = savedData; } @@ -985,11 +1217,25 @@ const saveLoadUserInput = (selector, localStorageKeyPrefix = '', parent = '', lo if (!data) { return; } + const jumpDefaultRangeTime = data.find( + (e) => e.name === DEFAULT_DATETIME_RANGE, + ); + const isJumpPath = + window.location.href.includes(goToFromJumpFunction); + const isUseDefaultRangeTime = + isJumpPath && jumpDefaultRangeTime !== undefined; + const srcSetting = getLocalStorageSrcSetting(); // gen dynamic eles genDynamicEle(data); + updateShareUserSetting( + srcSetting?.pageName, + getCurrentPage(), + data, + ); - const [activeTabs, radioChecks, others1, others2, indexVals] = divideElementGroup(data); + const [activeTabs, radioChecks, others1, others2, indexVals] = + divideElementGroup(data); if (isSaveToLocalStorage) { loadActiveTab(activeTabs); @@ -1013,6 +1259,15 @@ const saveLoadUserInput = (selector, localStorageKeyPrefix = '', parent = '', lo setTimeout(() => { loadRadioCheckboxEle(remainRadioChecks); + // Set default datetime range for jump target page + if (isUseDefaultRangeTime) { + setDefaultCyclicTermConfig( + jumpDefaultRangeTime.value, + true, + ); + } + // Handler set default division + handlerSettingDefaultDivide(data, srcSetting); }, 200); // load invalid @@ -1107,27 +1362,30 @@ const clearSettingID = () => { } }; - const updateSettingPriority = (elem, userSettingId) => { const settingPriority = $(elem).val(); if (settingPriority) { - $.get(`/ap/api/setting/user_setting/${userSettingId}`, {"_": $.now()}, (res) => { - if (res.status === 200) { - const settingDat = { - id: userSettingId, - priority: settingPriority, - created_by: res.data.created_by, - description: res.data.description, - key: res.data.key, - page: res.data.page, - settings: res.data.settings, - share_info: res.data.share_info, - title: res.data.title, - use_current_time: res.data.use_current_time, - }; - createOrUpdateSetting(settingDat); - } - }); + $.get( + `/ap/api/setting/user_setting/${userSettingId}`, + { _: $.now() }, + (res) => { + if (res.status === 200) { + const settingDat = { + id: userSettingId, + priority: settingPriority, + created_by: res.data.created_by, + description: res.data.description, + key: res.data.key, + page: res.data.page, + settings: res.data.settings, + share_info: res.data.share_info, + title: res.data.title, + use_current_time: res.data.use_current_time, + }; + createOrUpdateSetting(settingDat); + } + }, + ); } }; @@ -1157,8 +1415,10 @@ const createHTMLRow = (setting, idx, isCurrentSetting) => { return ''; } - const backgroundColor = isCurrentSetting ? ' style=" background-color: steelblue;"': ''; - const htmlRow =` + const backgroundColor = isCurrentSetting + ? ' style=" background-color: steelblue;"' + : ''; + const htmlRow = ``; if (stepChartSummary) { let stepChartStatUnLinkedHTML = ''; - const naAfterLinked = stepChartSummary.n_na - summaryOption.countUnlinked; + const naAfterLinked = + stepChartSummary.n_na - summaryOption.countUnlinked; if (`${generalInfo.endProcName}` !== `${generalInfo.startProc}`) { stepChartStatUnLinkedHTML = ``; } - const naAfterLinkedPctg = stepChartSummary.n_na_pctg - summaryOption.noLinkedPct; + const naAfterLinkedPctg = + stepChartSummary.n_na_pctg - summaryOption.noLinkedPct; stepChartNTotalHTML = `
      ${nextYear}
      ${i + 1}${i + 1} ${variable.proc_name} ${variable.name} ${genColTypeForJumpTbl(variable)}
      ${idx} ${setting.share_info ? $(i18nEles.shared).text() : $(i18nEles.private).text()} @@ -1209,10 +1469,15 @@ const showUserSettingsToModal = (userSettings) => { const currentUser = localStorage.getItem('settingCommonUserName'); let idx = 1; for (const setting of userSettings) { - const isShowSetting = !currentUser || currentUser && setting.created_by === currentUser || setting.share_info; + const isShowSetting = + !currentUser || + (currentUser && setting.created_by === currentUser) || + setting.share_info; if (isShowSetting) { - const isCurrentSetting = currentLoadSetting ? setting.id == currentLoadSetting.id : false + const isCurrentSetting = currentLoadSetting + ? setting.id == currentLoadSetting.id + : false; const rowHTML = createHTMLRow(setting, idx, isCurrentSetting); rowHTMLs.push(rowHTML); idx += 1; @@ -1256,7 +1521,6 @@ const bindDeleteUserSetting = (e, userSettingId) => { $('#deleteSettingConfirmModal').modal('show'); }; -// eslint-disable-next-line no-unused-vars const deleteUserSetting = (e) => { const userSettingId = $(e).attr('data-item-id'); @@ -1268,12 +1532,9 @@ const deleteUserSetting = (e) => { }, body: JSON.stringify({}), }) - .then((response) => { - }) - .then(() => { - }) - .catch(() => { - }); + .then((response) => {}) + .then(() => {}) + .catch(() => {}); $('#tblUserSetting').find(`tr[data-setting-id=${userSettingId}]`).remove(); @@ -1287,15 +1548,23 @@ const clearLoadingSetting = () => { localStorage.removeItem('loadingSetting'); }; -const setExportMode = isExport => isExportMode = isExport; - -const goToSettingPage = (userSettingId, settingPage, isImportMode = false, isBlank = false) => { - localStorage.setItem('loadingSetting', JSON.stringify({ - redirect: true, - settingID: userSettingId, - isExportMode, - isImportMode, - })); +const setExportMode = (isExport) => (isExportMode = isExport); + +const goToSettingPage = ( + userSettingId, + settingPage, + isImportMode = false, + isBlank = false, +) => { + localStorage.setItem( + 'loadingSetting', + JSON.stringify({ + redirect: true, + settingID: userSettingId, + isExportMode, + isImportMode, + }), + ); // reset debug mode setExportMode(false); @@ -1312,12 +1581,18 @@ const goToSettingPage = (userSettingId, settingPage, isImportMode = false, isBla const handleGoToSettingPage = (e, userSettingId, settingPage) => { e.preventDefault(); if (e.ctrlKey) { - goToSettingPage(userSettingId, settingPage, false, true) + goToSettingPage(userSettingId, settingPage, false, true); } else { goToSettingPage(userSettingId, settingPage); } }; -const useUserSetting = (userSettingId = null, sharedSetting = null, onlyLoad = null, isLoadNew = true, fromPaste = false) => { +const useUserSetting = ( + userSettingId = null, + sharedSetting = null, + onlyLoad = null, + isLoadNew = true, + fromPaste = false, +) => { const reqHeaders = new Headers(); reqHeaders.append('Content-Type', 'application/json'); isSettingLoading = true; @@ -1332,7 +1607,7 @@ const useUserSetting = (userSettingId = null, sharedSetting = null, onlyLoad = n shared_user_setting: sharedSetting, }), }) - .then(response => response.json()) + .then((response) => response.json()) .then((json) => { const userSetting = json.data; if (!fromPaste) { @@ -1340,7 +1615,7 @@ const useUserSetting = (userSettingId = null, sharedSetting = null, onlyLoad = n } applyUserSetting(userSetting, onlyLoad, isLoadNew); }) - .catch(error => console.log('error', error)); + .catch((error) => console.log('error', error)); }; const useUserSettingOnLoad = () => { @@ -1352,13 +1627,13 @@ const useUserSettingOnLoad = () => { method: 'GET', headers: reqHeaders, }) - .then(response => response.json()) + .then((response) => response.json()) .then((json) => { const userSetting = json.data; currentLoadSetting = userSetting; applyUserSetting(userSetting); }) - .catch(error => console.log('error', error)); + .catch((error) => console.log('error', error)); }; const showIndexInforBox = () => { @@ -1372,12 +1647,11 @@ const showIndexInforBox = () => { }; const applyUserSetting = (userSetting, onlyLoad = null, isLoadNew = true) => { - if (isEmpty(userSetting)) return; isSettingLoading = true; let userInputs; - if (typeof (userSetting.settings) === 'string') { + if (typeof userSetting.settings === 'string') { userInputs = JSON.parse(userSetting.settings || '{}'); } else { userInputs = userSetting.settings || {}; @@ -1388,7 +1662,7 @@ const applyUserSetting = (userSetting, onlyLoad = null, isLoadNew = true) => { for (const formId in userInputs) { if (onlyLoad) { loadFunc = saveLoadUserInput(onlyLoad, '', '', null, isLoadNew); - } else if (typeof (formId) === 'string') { + } else if (typeof formId === 'string') { loadFunc = saveLoadUserInput(`#${formId}`, '', '', null, isLoadNew); } @@ -1434,7 +1708,7 @@ const saveStateAndShowLabelSetting = (userSetting, inplace = true) => { userSettingText = `${userSetting.title}`; // set current loading setting label fillStartBookmark(); - $('#setting-name').text(userSettingText) + $('#setting-name').text(userSettingText); $(settingModals.bookmarkBtn).attr('title', userSettingText); $(settingModals.overwriteSaveSettingBtn).show(); $(settingModals.editSettingBtn).show(); @@ -1452,11 +1726,9 @@ const fillStartBookmark = () => { const emptyStartBookmark = () => { $(settingModals.bookmarkBtn).html('☆'); -} +}; -// eslint-disable-next-line no-unused-vars const loadAllUserSetting = () => { - $('#loadUserSettingModal').modal('show'); const reqHeaders = new Headers(); @@ -1466,12 +1738,12 @@ const loadAllUserSetting = () => { method: 'GET', headers: reqHeaders, }) - .then(response => response.json()) + .then((response) => response.json()) .then((json) => { const userSettings = json.data; showUserSettingsToModal(userSettings); }) - .catch(error => console.log('error', error)); + .catch((error) => console.log('error', error)); }; const showSettingModal = (userSetting) => { @@ -1487,16 +1759,21 @@ const showSettingModal = (userSetting) => { Object.keys(userSetting).forEach((settingKey) => { const setting = userSetting[settingKey]; if (settingModalKeys.includes(settingKey)) { - const settingInput = $(settingModals.userSetting) - .find(`[name="${settingKey}"]`); - const elType = settingInput.is('select') ? 'select' : settingInput.attr('type'); + const settingInput = $(settingModals.userSetting).find( + `[name="${settingKey}"]`, + ); + const elType = settingInput.is('select') + ? 'select' + : settingInput.attr('type'); switch (elType) { case 'checkbox': settingInput.prop('checked', setting); break; case 'select': if (settingKey === 'priority' && setting === 0) { - settingInput.append(``); + settingInput.append( + ``, + ); settingInput.val(0); settingInput.prop('disabled', true); } else { @@ -1505,7 +1782,7 @@ const showSettingModal = (userSetting) => { break; default: settingInput.val(setting); - settingInput.attr('org-data', setting) + settingInput.attr('org-data', setting); } } }); @@ -1517,7 +1794,11 @@ const showSettingModal = (userSetting) => { }; const getUserSettingById = async (userSettingId) => { - const res = await fetchData(`/ap/api/setting/user_setting/${userSettingId}`, {}, 'GET'); + const res = await fetchData( + `/ap/api/setting/user_setting/${userSettingId}`, + {}, + 'GET', + ); return res; }; @@ -1550,12 +1831,20 @@ const resetSaveUserSettingModal = () => { $(settingModals.common).find('input[name=page]').val(''); $(settingModals.common).find('input[name=created_by]').val(''); $(settingModals.common).find('select[name=priority]').val('1'); - $(settingModals.common).find('select[name=priority] option[value="0"]').remove(); - $(settingModals.common).find('select[name=priority]').prop('disabled', false); + $(settingModals.common) + .find('select[name=priority] option[value="0"]') + .remove(); + $(settingModals.common) + .find('select[name=priority]') + .prop('disabled', false); $(settingModals.common).find('input[name=description]').val(''); - $(settingModals.common).find('input[name=use_current_time]').prop('checked', true); - $(settingModals.common).find('input[name=share_info]').prop('checked', true); -} + $(settingModals.common) + .find('input[name=use_current_time]') + .prop('checked', true); + $(settingModals.common) + .find('input[name=share_info]') + .prop('checked', true); +}; const showOverwriteConfirmModel = () => { $(settingModals.overwriteConfirmation).modal('show'); @@ -1580,24 +1869,30 @@ const createOrUpdateSetting = (settingDat, inplace = true) => { }); }; const setModalOverlay = () => { - $(document).on({ - 'show.bs.modal': function () { - const zIndex = 1040 + (10 * $('.modal:visible').length); - $(this).css('z-index', zIndex); - setTimeout(() => { - $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack'); - }, 0); - }, - 'hidden.bs.modal': function () { - if ($('.modal:visible').length > 0) { - // restore the modal-open class to the body element, so that scrolling works - // properly after de-stacking a modal. + $(document).on( + { + 'show.bs.modal': function () { + const zIndex = 1040 + 10 * $('.modal:visible').length; + $(this).css('z-index', zIndex); setTimeout(() => { - $(document.body).addClass('modal-open'); + $('.modal-backdrop') + .not('.modal-stack') + .css('z-index', zIndex - 1) + .addClass('modal-stack'); }, 0); - } + }, + 'hidden.bs.modal': function () { + if ($('.modal:visible').length > 0) { + // restore the modal-open class to the body element, so that scrolling works + // properly after de-stacking a modal. + setTimeout(() => { + $(document.body).addClass('modal-open'); + }, 0); + } + }, }, - }, '.modal'); + '.modal', + ); // $(document).on('show.bs.modal', '.modal', function (event) { // var zIndex = 1040 + (10 * $('.modal:visible').length); // $(this).css('z-index', zIndex); @@ -1654,7 +1949,9 @@ const getSettingCommonInfo = () => { const graphSettings = []; - const radioEls = graphSettingsArea.find('input[type=radio]:is(:checked)'); + const radioEls = graphSettingsArea.find( + 'input[type=radio]:is(:checked)', + ); radioEls.each((i, el) => { graphSettings.push({ @@ -1701,7 +1998,9 @@ const getSettingCommonInfo = () => { }); }); - const texts = graphSettingsArea.find('input:not([type=checkbox]):not([type=radio])'); + const texts = graphSettingsArea.find( + 'input:not([type=checkbox]):not([type=radio])', + ); texts.each((i, el) => { graphSettings.push({ name: $(el).attr('name'), @@ -1713,13 +2012,6 @@ const getSettingCommonInfo = () => { }); }); - - const filterData = { - dic_cat_filters: lastUsedFormData ? JSON.parse(lastUsedFormData.get('dic_cat_filters')) : '', - temp_cat_exp: lastUsedFormData ? JSON.parse(lastUsedFormData.get('temp_cat_exp')) : '', - temp_cat_procs: lastUsedFormData ? JSON.parse(lastUsedFormData.get('temp_cat_procs')) : '', - }; - const isIndexOder = hasIndexOrderInGraphSetting(graphSettings); if (isIndexOder) { @@ -1727,7 +2019,7 @@ const getSettingCommonInfo = () => { } formSettingDat['graphSetting'] = graphSettings; - formSettingDat['filter'] = filterData; + formSettingDat['filter'] = getOnDemandFilterInput(); // update column ordering by user clicked formSettingDat.column_ordering = latestSortColIds; @@ -1739,12 +2031,29 @@ const getSettingCommonInfo = () => { return settingCommonInfo; }; +const getOnDemandFilterInput = () => { + return { + dic_cat_filters: lastUsedFormData + ? JSON.parse(lastUsedFormData.get('dic_cat_filters')) + : '', + temp_cat_exp: lastUsedFormData + ? JSON.parse(lastUsedFormData.get('temp_cat_exp')) + : '', + temp_cat_procs: lastUsedFormData + ? JSON.parse(lastUsedFormData.get('temp_cat_procs')) + : '', + }; +}; const hasIndexOrderInGraphSetting = (graphSettings = []) => { if (!graphSettings) return null; - const isIndexOrder = graphSettings.filter(graph => graph.name === 'XAxisOrder' && graph.value === CONST.XOPT_INDEX).length > 0; + const isIndexOrder = + graphSettings.filter( + (graph) => + graph.name === 'XAxisOrder' && graph.value === CONST.XOPT_INDEX, + ).length > 0; return isIndexOrder; -} +}; const convertDatetimePickerSeparator = (value) => { const temp = value; @@ -1755,7 +2064,7 @@ const checkExistTitleSetting = async (title) => { loadingShow(true); $.ajax({ url: '/ap/api/setting/check_exist_title_setting', - data: JSON.stringify({title}), + data: JSON.stringify({ title }), dataType: 'json', type: 'POST', contentType: false, @@ -1792,21 +2101,26 @@ $(document).ready(() => { } $(saveUserBtn).click(() => { inputForms.each((i, form) => { - const userInput = saveLoadUserInput(`#${form.id}`, window.location.pathname); + const userInput = saveLoadUserInput( + `#${form.id}`, + window.location.pathname, + ); userInput(false); }); }); $(loadUserBtn).click(() => { inputForms.each((i, form) => { - const userInput = saveLoadUserInput(`#${form.id}`, window.location.pathname); + const userInput = saveLoadUserInput( + `#${form.id}`, + window.location.pathname, + ); userInput(); }); }); settingDataTableInit(); - // save user setting to DB mainFormSettings = $(settingModals.mainSettingForm); @@ -1834,7 +2148,9 @@ $(document).ready(() => { $(settingModals.confirmBtn).on('click', () => { let invalidPage = false; Object.keys(saveSettingExceptionPages).forEach((k) => { - if (window.location.pathname.includes(saveSettingExceptionPages[k])) { + if ( + window.location.pathname.includes(saveSettingExceptionPages[k]) + ) { invalidPage = true; } }); @@ -1850,9 +2166,11 @@ $(document).ready(() => { // set userName in localStorage at first time getOrSetUserName(settingCommonInfo.created_by); - const inplaceSetting = !settingCommonInfo.id ? true : (currentLoadSetting && settingCommonInfo) - ? (Number(currentLoadSetting.id) === Number(settingCommonInfo.id)) - : true; + const inplaceSetting = !settingCommonInfo.id + ? true + : currentLoadSetting && settingCommonInfo + ? Number(currentLoadSetting.id) === Number(settingCommonInfo.id) + : true; createOrUpdateSetting(settingCommonInfo, inplaceSetting); }); @@ -1861,7 +2179,9 @@ $(document).ready(() => { // retrieve data from setting forms const settingCommonInfo = currentLoadSetting; const settingInfo = getSettingCommonInfo(); - const saveGraphSetting = $('[name=save_graph_settings_overwrite]').prop('checked'); + const saveGraphSetting = $('[name=save_graph_settings_overwrite]').prop( + 'checked', + ); settingCommonInfo.save_graph_settings = saveGraphSetting || ''; settingCommonInfo.settings = settingInfo.settings; @@ -1948,35 +2268,37 @@ const compareSettingChange = () => { const newFormData = new FormData($(currentFormID)[0]); if (currentFromDataFromLoadSetting && newFormData) { // remove exclude name from form - ['export_from'].map(val => { + ['export_from'].map((val) => { currentFromDataFromLoadSetting.delete(val); newFormData.delete(val); }); - isSettingChanged = JSON.stringify([...currentFromDataFromLoadSetting.entries()]) !== JSON.stringify([...newFormData.entries()]); + isSettingChanged = + JSON.stringify([ + ...currentFromDataFromLoadSetting.entries(), + ]) !== JSON.stringify([...newFormData.entries()]); } } if (isSettingChanged) { - if (currentLoadSetting) { emptyStartBookmark(); } $('#setting-change-mark').show(); - $(window).off("beforeunload"); - $(window).on("beforeunload", function () { + $(window).off('beforeunload'); + $(window).on('beforeunload', function () { return 'Do you want to save changes?'; }); } else { fillStartBookmark(); resetChangeSettingMark(); } -} +}; const resetChangeSettingMark = () => { isSettingChanged = false; $('#setting-change-mark').hide(); - $(window).off("beforeunload"); + $(window).off('beforeunload'); if (currentLoadSetting) { fillStartBookmark(); } @@ -1984,7 +2306,7 @@ const resetChangeSettingMark = () => { const showSettingChangeModalHandler = (callback) => { if (isSettingChanged) { - $(settingModals.changeSettingConfirmModal).modal('show') + $(settingModals.changeSettingConfirmModal).modal('show'); $('#saveChangeSetting').on('click', () => { $(settingModals.changeSettingConfirmModal).modal('hide'); @@ -2006,7 +2328,13 @@ const showSettingChangeModalHandler = (callback) => { } }; -const goToOtherPage = (href, inplace = true, emptyPage = false, mainPage = '') => { +const goToOtherPage = ( + href, + inplace = true, + emptyPage = false, + mainPage = '', + useLatestSetting = false, +) => { if (!href) { href = selectedHref; } @@ -2016,6 +2344,9 @@ const goToOtherPage = (href, inplace = true, emptyPage = false, mainPage = '') = if (emptyPage) { useTileInterface().set(); } + if (useLatestSetting) { + useTileInterface('useLatestSetting').set(); + } if (inplace) { showSettingChangeModalHandler(() => { resetChangeSettingMark(); @@ -2033,13 +2364,26 @@ const handleUseUserSetting = (id) => { }; const isSaveGraphSetting = () => { - return currentLoadSetting && currentLoadSetting.save_graph_settings && !isSettingChanged; + return ( + currentLoadSetting && + currentLoadSetting.save_graph_settings && + !isSettingChanged + ); +}; + +const isLoadingFromJumpPage = () => { + const isJumpPath = window.location.href.includes(goToFromJumpFunction); + return !currentLoadSetting && !isSettingChanged && isJumpPath; }; const isSaveColumnOrdering = () => { if (!(currentLoadSetting | 0)) return false; const settings = JSON.parse(currentLoadSetting.settings); - return !isSettingChanged && settings.column_ordering && settings.column_ordering.length; + return ( + !isSettingChanged && + settings.column_ordering && + settings.column_ordering.length + ); }; const handleCopyUrlToClipBoard = async (e, userSettingId) => { @@ -2048,8 +2392,8 @@ const handleCopyUrlToClipBoard = async (e, userSettingId) => { if (res.status === 200) { page = res.data.page; let url = `${window.location.host}${page}?bookmark_id=${res.data.id}`; - const serverMachineName = ""; - url = url.replace(/localhost|127.0.0.1/, res.hostname) + const serverMachineName = ''; + url = url.replace(/localhost|127.0.0.1/, res.hostname); $('#copyClipboardContent').show(); $('#copyClipboardContentText').text(url); setTimeout(() => { @@ -2057,11 +2401,15 @@ const handleCopyUrlToClipBoard = async (e, userSettingId) => { setTooltip($(e), 'Copied!'); }, 300); } -} - +}; const getFilterOnDemand = () => { - if (!currentLoadSetting) return null; + const jumpFilter = getJumpFilterOnDemand(); + if (!currentLoadSetting && !isLoadingFromJumpPage()) return null; + // Get filter on demand for case copy user settings from jump modal + if (isLoadingFromJumpPage()) { + return jumpFilter; + } const settings = JSON.parse(currentLoadSetting.settings); return settings.filter; }; @@ -2071,9 +2419,11 @@ const getGraphSettings = () => { const settings = JSON.parse(currentLoadSetting.settings); // sort by order - return settings.graphSetting ? settings.graphSetting.sort(function (a, b) { - return a.order > b.order ? -1 : 1; - }) : null; + return settings.graphSetting + ? settings.graphSetting.sort(function (a, b) { + return a.order > b.order ? -1 : 1; + }) + : null; }; const getIndexOrder = () => { @@ -2081,10 +2431,10 @@ const getIndexOrder = () => { const settings = JSON.parse(currentLoadSetting.settings); return settings.indexOrder || []; -} +}; const setFitlerIntoFormData = (formData) => { - if (!isSaveGraphSetting()) return formData; + if (!isSaveGraphSetting() && !isLoadingFromJumpPage()) return formData; const filter = getFilterOnDemand(); if (!filter) return formData; @@ -2119,7 +2469,9 @@ const loadGraphSettings = (isFirstTime = false) => { // get default value of element if (setting.type === 'radio') { defaultValue = graphArea.find(`${selectorStr}:checked`).val(); - el = graphArea.find(`${selectorStr}[value=${setting.value}]`).prop('checked', true); + el = graphArea + .find(`${selectorStr}[value=${setting.value}]`) + .prop('checked', true); } else if (setting.type === 'select') { el = graphArea.find(`${selectorStr}`); defaultValue = el.val(); @@ -2128,7 +2480,6 @@ const loadGraphSettings = (isFirstTime = false) => { el = graphArea.find(`${selectorStr}`); defaultValue = el.is('checked'); el.prop('checked', setting.checked); - } else if (setting.type === 'text') { el = graphArea.find(`${selectorStr}`); defaultValue = el.val(); @@ -2146,11 +2497,11 @@ const loadGraphSettings = (isFirstTime = false) => { if (isTriggerChange) { el.trigger('change'); } - }; + } }; const getDicChecked = () => { - if (!isSaveGraphSetting()) return null; + if (!isSaveGraphSetting() && !isLoadingFromJumpPage()) return null; const filter = getFilterOnDemand(); return filter ? filter.dic_cat_filters : null; }; @@ -2164,27 +2515,130 @@ const facetGenerate = (src, des, value) => { }; if (src && des) { - - if (src.includes('stp') && des.includes('rlp') && facetVal !== '') { - // from stp -> rlp - // facet lv1 -> div - // facet lv2 -> lv1 - facetVal = (facetVal === facets.LV1) ? facets.DIV : facets.LV1; - } if (src.includes('rlp') && des.includes('stp') && facetVal !== '') { // from rlp -> stp // facet div -> lv1 // facet lv1 -> lv2 - facetVal = (facetVal === facets.DIV) ? facets.LV1 : facets.LV2; + facetVal = facetVal === facets.DIV ? facets.LV1 : facets.LV2; } } return facetVal; }; const isShowCTTime = (settingData) => { - const isShowCTTime = settingData.find(e=>e.name === 'is_show_ct_time'); + const isShowCTTime = settingData.find((e) => e.name === 'is_show_ct_time'); if (isShowCTTime) { return isShowCTTime.checked; } return false; -} \ No newline at end of file +}; + +const calcCyclicTermConfig = (rangeTime) => { + const DatetimeRange = rangeTime.split(DATETIME_PICKER_SEPARATOR); + const hoursDiff = + moment(DatetimeRange[1]).diff(moment(DatetimeRange[0]), 'minutes') / 60; + const stepSize = hoursDiff / (CYCLIC_TERM.DEFAULT_DIV_NUM_BY_PAGE.rlp + 1); + const windowLength = stepSize * 2; + const defaultTimeRange = { + id: DEFAULT_DATETIME_RANGE, + name: DEFAULT_DATETIME_RANGE, + type: 'text', + value: rangeTime, + }; + const cyclicTermDivNum = { + id: 'cyclicTermDivNum', + name: 'cyclicTermDivNum', + type: 'text', + value: CYCLIC_TERM.DEFAULT_DIV_NUM_BY_PAGE.rlp, + }; + const cyclicTermWindowLength = { + id: 'cyclicTermWindowLength', + name: 'cyclicTermWindowLength', + type: 'text', + value: windowLength, + }; + const cyclicTermInterval = { + id: 'cyclicTermInterval', + name: 'cyclicTermInterval', + type: 'text', + value: stepSize, + }; + return [ + defaultTimeRange, + cyclicTermDivNum, + cyclicTermWindowLength, + cyclicTermInterval, + ]; +}; + +const setDefaultCyclicTermConfig = (rangeTime, isSetDefaultCyclicTerm) => { + const divideOption = $('#divideOption').val(); + const DatetimeRange = rangeTime.split(DATETIME_PICKER_SEPARATOR); + let isChangeDatetimeRange = false; + + /* Set default cyclic term ([Division number], [Window length], [Step size]) + endTime - startTime = A [hours] + A [hours] / DEFAULT_DIV_NUM_BY_PAGE [cycles] = B [step size] + B [step size] * 2 = C [window length] + */ + if (isSetDefaultCyclicTerm) { + const cyclicTermDefaultVal = + CYCLIC_TERM.DEFAULT_DIV_NUM_BY_PAGE[getCurrentPage()]; + const hoursDiff = + moment(DatetimeRange[1]).diff(moment(DatetimeRange[0]), 'minutes') / + 60; + const stepSize = hoursDiff / cyclicTermDefaultVal; + const windowLength = stepSize * 2; + $(`#${CYCLIC_TERM.DIV_NUM}`).val(cyclicTermDefaultVal); + $(`#${CYCLIC_TERM.WINDOW_LENGTH}`).val(windowLength); + $(`#${CYCLIC_TERM.INTERVAL}`).val(stepSize); + } + // Set date time range for options [category], [cyclicTerm], [directTerm](first input of datetimeList), [var], [dataNumberTerm] + switch (divideOption) { + case divideOptions.category: + isChangeDatetimeRange = true; + $('#datetimeRangePicker').val(rangeTime); + break; + case divideOptions.cyclicTerm: + isChangeDatetimeRange = true; + $('#cyclicTermDatetimePicker').val(DatetimeRange[0]); + break; + case divideOptions.directTerm: + isChangeDatetimeRange = true; + $('#datetimeList input:first[name=DATETIME_RANGE_PICKER]').val( + rangeTime, + ); + break; + case divideOptions.cyclicCalender: + // Nothing + break; + default: + isChangeDatetimeRange = true; + $('input:visible[name=DATETIME_RANGE_PICKER]').val(rangeTime); + } + if (isChangeDatetimeRange) { + $('#datetimeRangeShowValue').text(rangeTime); + } +}; + +const getJumpFilterOnDemand = () => { + const userSetting = JSON.parse( + localStorage.getItem(JUMP_SHARED_USER_SETTING), + ); + if (userSetting && userSetting.settings) { + const filter = userSetting.settings.filter; + return filter || null; + } + return null; +}; + +const getLocalStorageShareUserSetting = (key) => { + const shareUserSetting = JSON.parse(localStorage.getItem(key)); + const isEmptyShareUserSetting = isEmpty(shareUserSetting); + if (key === JUMP_SHARED_USER_SETTING) { + return isEmptyShareUserSetting ? null : shareUserSetting; + } + return isEmptyShareUserSetting + ? null + : { settings: { traceDataForm: shareUserSetting } }; +}; diff --git a/ap/static/common/js/summary_table.js b/ap/static/common/js/summary_table.js index 1c185b5..fc077f4 100644 --- a/ap/static/common/js/summary_table.js +++ b/ap/static/common/js/summary_table.js @@ -1,5 +1,8 @@ -/* eslint-disable */ -const calculateSummaryData = (summaries = {}, summaryIdx = 0, isHideNonePoint = false) => { +const calculateSummaryData = ( + summaries = {}, + summaryIdx = 0, + isHideNonePoint = false, +) => { const summary = summaries[summaryIdx] || {}; const summaryData = { @@ -35,20 +38,26 @@ const calculateSummaryData = (summaries = {}, summaryIdx = 0, isHideNonePoint = cp: getNode(summary, ['basic_statistics', 'Cp'], '-') || '-', cpk: getNode(summary, ['basic_statistics', 'Cpk'], '-') || '-', maxValue: getNode(summary, ['basic_statistics', 'Max'], '0') || '0', - maxValueOrg: getNode(summary, ['basic_statistics', 'max_org'], '0') || '0', + maxValueOrg: + getNode(summary, ['basic_statistics', 'max_org'], '0') || '0', minValue: getNode(summary, ['basic_statistics', 'Min'], '0') || '0', - minValueOrg: getNode(summary, ['basic_statistics', 'min_org'], '0') || '0', - bsAverage: getNode(summary, ['basic_statistics', 'average'], '0') || '0', + minValueOrg: + getNode(summary, ['basic_statistics', 'min_org'], '0') || '0', + bsAverage: + getNode(summary, ['basic_statistics', 'average'], '0') || '0', sigma: getNode(summary, ['basic_statistics', 'sigma'], '0') || '0', sigma3: getNode(summary, ['basic_statistics', 'sigma_3'], '0') || '0', - tnStats: getNode(summary, ['basic_statistics', 't_n_stats'], '-') || '-', + tnStats: + getNode(summary, ['basic_statistics', 't_n_stats'], '-') || '-', tcp: getNode(summary, ['basic_statistics', 't_cp'], '-') || '-', tcpk: getNode(summary, ['basic_statistics', 't_Cpk'], '-') || '-', tmaxValue: getNode(summary, ['basic_statistics', 't_max'], '0') || '0', tminValue: getNode(summary, ['basic_statistics', 't_min'], '0') || '0', - tbsAverage: getNode(summary, ['basic_statistics', 't_average'], '0') || '0', + tbsAverage: + getNode(summary, ['basic_statistics', 't_average'], '0') || '0', tsigma: getNode(summary, ['basic_statistics', 't_sigma'], '0') || '0', - tsigma3: getNode(summary, ['basic_statistics', 't_sigma_3'], '0') || '0', + tsigma3: + getNode(summary, ['basic_statistics', 't_sigma_3'], '0') || '0', // non-parametric median: getNode(summary, ['non_parametric', 'median'], '0') || '0', p5: getNode(summary, ['non_parametric', 'p5'], '0') || '0', @@ -57,8 +66,10 @@ const calculateSummaryData = (summaries = {}, summaryIdx = 0, isHideNonePoint = p75Q3: getNode(summary, ['non_parametric', 'p75'], '0') || '0', p75Q3Org: getNode(summary, ['non_parametric', 'p75_org'], '0') || '0', p95: getNode(summary, ['non_parametric', 'p95'], '0') || '0', - numOverLower: getNode(summary, ['non_parametric', 'num_over_lower'], '0') || '0', - numOverUpper: getNode(summary, ['non_parametric', 'num_over_upper'], '0') || '0', + numOverLower: + getNode(summary, ['non_parametric', 'num_over_lower'], '0') || '0', + numOverUpper: + getNode(summary, ['non_parametric', 'num_over_upper'], '0') || '0', iqr: getNode(summary, ['non_parametric', 'iqr'], '-') || '-', niqr: getNode(summary, ['non_parametric', 'niqr'], '-') || '-', mode: getNode(summary, ['non_parametric', 'mode'], '0') || '0', @@ -80,17 +91,32 @@ const calculateSummaryData = (summaries = {}, summaryIdx = 0, isHideNonePoint = return summaryData; }; - const isHideNoneDataPoint = (procId, colId, isRemoveOutlier) => { const col = procConfigs[procId].getColumnById(colId) || {}; const isCTCol = isCycleTimeCol(procId, colId); - const isHideNonePoint = (Boolean(isRemoveOutlier) && [DataTypes.REAL.name, DataTypes.INTEGER.name].includes(col.data_type)) || isCTCol; + const isHideNonePoint = + (Boolean(isRemoveOutlier) && + [ + DataTypes.REAL.name, + DataTypes.INTEGER.name, + DataTypes.TEXT.name, + ].includes(col.data_type)) || + isCTCol; return isHideNonePoint; -} +}; -const buildSummaryResultsHTML = (summaryOption, tableIndex, generalInfo, beforeRankValues = null, stepChartSummary = null) => { - const [nTotalHTML, noLinkedHTML] = genTotalAndNonLinkedHTML(summaryOption, generalInfo); +const buildSummaryResultsHTML = ( + summaryOption, + tableIndex, + generalInfo, + beforeRankValues = null, + stepChartSummary = null, +) => { + const [nTotalHTML, noLinkedHTML] = genTotalAndNonLinkedHTML( + summaryOption, + generalInfo, + ); if (beforeRankValues) { let stepChartStatHTML = ''; @@ -102,14 +128,16 @@ const buildSummaryResultsHTML = (summaryOption, tableIndex, generalInfo, beforeR
      NNoLinked ${applySignificantDigit(summaryOption.countUnlinked)} (${applySignificantDigit(summaryOption.noLinkedPct)}%)
      Ntotal @@ -314,4 +342,4 @@ const buildSummaryResultsHTML = (summaryOption, tableIndex, generalInfo, beforeR
      `; -}; \ No newline at end of file +}; diff --git a/ap/static/common/js/take_screenshot.js b/ap/static/common/js/take_screenshot.js index c316bea..bf97087 100644 --- a/ap/static/common/js/take_screenshot.js +++ b/ap/static/common/js/take_screenshot.js @@ -4,7 +4,9 @@ let checkShownGraphInterval = null; const colorScalePages = ['CHM', 'ScP', 'PCP', 'PCA', 'MSP']; const clearOldScreenShot = () => { - const oldCanvas = document.getElementById('screenshot').querySelectorAll('canvas')[0]; + const oldCanvas = document + .getElementById('screenshot') + .querySelectorAll('canvas')[0]; if (oldCanvas) { const context = oldCanvas.getContext('2d'); context.clearRect(0, 0, oldCanvas.width, oldCanvas.height); @@ -58,7 +60,7 @@ const copyImageToClipboard = async (isFullPage = false) => { } else { defaultCapture().copy(mainContent); } - } catch (err) { + } catch (err) { defaultCapture().copy(mainContent); } }; @@ -130,7 +132,9 @@ const defaultCapture = () => { const generator = async (mainContent) => { // create screenshot as canvas await html2canvas(mainContent, { - scale: 1, logging: true, backgroundColor: '#222222', + scale: 1, + logging: true, + backgroundColor: '#222222', }).then((canvas) => { canvas.id = 'tsCanvas'; document.getElementById('screenshot').appendChild(canvas); @@ -144,20 +148,24 @@ const defaultCapture = () => { hideInfoContent(); }; const download = () => { - const screenshot = document.getElementById('screenshot').querySelectorAll('canvas')[0]; + const screenshot = document + .getElementById('screenshot') + .querySelectorAll('canvas')[0]; const targetLink = document.createElement('a'); if (screenshot) { const filename = $('#screenshotFilename').val(); targetLink.setAttribute('download', filename); targetLink.href = screenshot.toDataURL(); } - return targetLink; hideInfoContent(); + return targetLink; }; const copy = async (mainContent) => { // create screenshot as canvas await html2canvas(mainContent, { - scale: 1, logging: true, backgroundColor: '#222222', + scale: 1, + logging: true, + backgroundColor: '#222222', }).then(async (canvas) => { canvas.id = 'tsCanvas'; const response = await fetch(canvas.toDataURL()); @@ -173,14 +181,15 @@ const defaultCapture = () => { generator, download, copy, - } - + }; }; const modernScreenShotCapture = () => { const generator = (mainContent) => { $('.select2-selection__rendered').css('margin-right', '50px'); - modernScreenshot.domToPng(mainContent).then(dataUrl => { - document.getElementById('screenshot').setAttribute('data-url', dataUrl); + modernScreenshot.domToPng(mainContent).then((dataUrl) => { + document + .getElementById('screenshot') + .setAttribute('data-url', dataUrl); // generate filename const filename = `${generateDefaultNameExport()}.png`; $('#screenshotFilename').val(filename); @@ -189,9 +198,11 @@ const modernScreenShotCapture = () => { hideInfoContent(); }); - } + }; const download = () => { - const screenshot = document.getElementById('screenshot').getAttribute('data-url'); + const screenshot = document + .getElementById('screenshot') + .getAttribute('data-url'); const targetLink = document.createElement('a'); if (screenshot) { const filename = $('#screenshotFilename').val(); @@ -218,7 +229,7 @@ const modernScreenShotCapture = () => { generator, download, copy, - } + }; }; const captureImage = (mainContent) => { @@ -229,7 +240,7 @@ const captureImage = (mainContent) => { } else { defaultCapture().generator(mainContent); } - } catch (err) { + } catch (err) { defaultCapture().generator(mainContent); } }; diff --git a/ap/static/common/js/terms_of_use.js b/ap/static/common/js/terms_of_use.js index 55d7616..9a052ff 100644 --- a/ap/static/common/js/terms_of_use.js +++ b/ap/static/common/js/terms_of_use.js @@ -7,28 +7,42 @@ const setAcceptTerms = () => { const apVersion = getAPVersion(); const currentTermsOfUserAccepted = getTermsOfUserAccepted(); currentTermsOfUserAccepted[apVersion] = 1; - localStorage.setItem(TERMS_OF_USE_KEY, JSON.stringify(currentTermsOfUserAccepted)); + localStorage.setItem( + TERMS_OF_USE_KEY, + JSON.stringify(currentTermsOfUserAccepted), + ); return true; }; const getAPVersion = () => { try { - return decodeURIComponent(document.cookie.replace(new RegExp(`(?:(?:^|.*;)\\s*${encodeURIComponent('app_version').replace(/[\-\.\+\*]/g, '\\$&')}\\s*\\=\\s*([^;]*).*$)|^.*$`), '$1')); + return decodeURIComponent( + document.cookie.replace( + new RegExp( + `(?:(?:^|.*;)\\s*${encodeURIComponent('app_version').replace(/[-.+*]/g, '\\$&')}\\s*\\=\\s*([^;]*).*$)|^.*$`, + ), + '$1', + ), + ); } catch (e) { return ''; } }; const getTermsOfUserAccepted = () => { - let currentTermsOfUserAccepted = localStorage.getItem(TERMS_OF_USE_KEY); - currentTermsOfUserAccepted = currentTermsOfUserAccepted ? JSON.parse(currentTermsOfUserAccepted) : null; - if (!currentTermsOfUserAccepted || !_.isObject(currentTermsOfUserAccepted)) { + currentTermsOfUserAccepted = currentTermsOfUserAccepted + ? JSON.parse(currentTermsOfUserAccepted) + : null; + if ( + !currentTermsOfUserAccepted || + !_.isObject(currentTermsOfUserAccepted) + ) { currentTermsOfUserAccepted = {}; } return currentTermsOfUserAccepted; -} +}; const getAcceptTerms = () => { const apVersion = getAPVersion(); @@ -37,7 +51,12 @@ const getAcceptTerms = () => { }; const validateTerms = () => { - if ([TERMS_OF_USE_PAGE, PAGE_NOT_FOUND].includes(window.location.pathname) || getAcceptTerms()) { + if ( + [TERMS_OF_USE_PAGE, PAGE_NOT_FOUND].includes( + window.location.pathname, + ) || + getAcceptTerms() + ) { return; } // redirect terms of use page diff --git a/ap/static/common/js/utils.js b/ap/static/common/js/utils.js index 8bf615c..0bee04c 100644 --- a/ap/static/common/js/utils.js +++ b/ap/static/common/js/utils.js @@ -1,15 +1,5 @@ -/* eslint-disable no-restricted-syntax */ -/* eslint-disable no-shadow */ -/* eslint-disable no-param-reassign */ -/* eslint-disable no-mixed-operators */ -/* eslint-disable no-bitwise */ -/* eslint-disable object-shorthand */ /* eslint-disable no-useless-escape */ -/* eslint-disable default-case */ -/* eslint-disable max-len */ -/* eslint-disable no-unused-expressions */ -/* eslint-disable func-names */ -/* eslint-disable no-unused-vars */ + let xhr = null; const SQL_LIMIT = 50000; let dataSetID = null; @@ -18,11 +8,16 @@ let showElapsedTime = null; const RLP_DUMMY_ID = 1000001; const EMD_DIFF_ID = 1000000; +// FPP: If yScale is Threshold: this number is the margin between threshold line (red line) with the border of the chart +// margin is 4.5% +const FPP_THRESHOLD_MARGIN = 0.045; + const localeConst = { JP: 'ja', -} +}; const DATETIME_FORMAT = 'YYYY-MM-DD HH:mm:ss'; +const DATETIME_FORMAT_PLACE_HOLDER = '%Y-%m-%d %H:%M:%S.%f'; const THOUSAND_SEP_PATTERN = /^[0-9]{1,3}(,[0-9]{3})*(\.[0-9]+)?$/; const COMMON_CONSTANT = { @@ -55,8 +50,8 @@ const scaleOptionConst = { const frequencyOptions = { COMMON: '1', - AUTO: '2' -} + AUTO: '2', +}; // facet level definition const facetLevels = { @@ -69,8 +64,8 @@ const facetLevels = { const EMDType = { DRIFT: 'drift', DIFF: 'diff', - BOTH: 'both' -} + BOTH: 'both', +}; const TIME_UNIT = { hour: { @@ -102,8 +97,8 @@ const TIME_UNIT = { MIN: 0.01, MAX: 2, DEFAULT: 1, - } -} + }, +}; const CYCLIC_TERM = { NAME: 'cyclicTerm', @@ -129,6 +124,13 @@ const CYCLIC_TERM = { MAX: 150, DEFAULT: 30, }, + DEFAULT_DIV_NUM_BY_PAGE: { + rlp: 250, + agp: 120, + scp: 49, + stp: 16, + hmp: 49, + }, DIV_OFFSET_MIN_MAX: { MIN: -24, MAX: 24, @@ -181,8 +183,6 @@ const CONST = { // y value type to differentiate normal vs irregular data NORMAL: 0, - INF: 1, - NEG_INF: -1, NONE: 2, OUTLIER: 3, NEG_OUTLIER: -3, @@ -221,6 +221,7 @@ const CONST = { ARRAY_FORMVAL: 'ARRAY_FORMVAL', CATEGORY: 'category', CORR: 'correlation', + ONLY_EXPORT_DATA_SELECTED: 'only_export_data_selected', NAV: ['', 'null', null, 'nan', 'NA', '-inf', 'inf'], BGR_COLOR_ATTR: 'bgr-color', @@ -232,9 +233,19 @@ const CONST = { NO_LINKED: 'NoLinked', LIMIT_SIZE_NAME: 14, IS_ADMIN: 'is_admin', + RESIZE_RANGE_CHART: 0.5, + + SCP_HMP_X_AXIS: 'SCP_HMP_X_AXIS', + SCP_HMP_Y_AXIS: 'SCP_HMP_Y_AXIS', }; -const chmColorPalettes = [['0', '#18324c'], ['0.2', '#204465'], ['0.4', '#2d5e88'], - ['0.6', '#3b7aae'], ['0.8', '#56b0f4'], ['1', '#6dc3fd']]; +const chmColorPalettes = [ + ['0', '#18324c'], + ['0.2', '#204465'], + ['0.4', '#2d5e88'], + ['0.6', '#3b7aae'], + ['0.8', '#56b0f4'], + ['1', '#6dc3fd'], +]; let reselectCallback = null; const domEles = { @@ -243,27 +254,41 @@ const domEles = { problematicPCATbl: '#cols-variance-tbl-multiple-range', }; -const trimLeft = target => target.replace(new RegExp(/^[\s]+/), ''); +const OFFSET_SCROLL = -15; -const trimRight = target => target.replace(new RegExp(/[\s]+$/), ''); +const trimLeft = (target) => target.replace(new RegExp(/^[\s]+/), ''); -const trimMid = target => target.replace(new RegExp(/\s+/), ' '); +const trimRight = (target) => target.replace(new RegExp(/[\s]+$/), ''); -const trimBoth = target => trimLeft(trimRight(trimMid(target))); +const trimMid = (target) => target.replace(new RegExp(/\s+/), ' '); + +const trimBoth = (target) => trimLeft(trimRight(trimMid(target))); const isEmpty = (val) => { - if (!val) { // null or undefined or ''(空文字) or 0 or false + if (!val) { + // null or undefined or ''(空文字) or 0 or false if (val !== 0 && val !== false) { return true; } - } else if (typeof val === 'object') { // array or object + } else if (typeof val === 'object') { + // array or object return Object.keys(val).length === 0; } return false; // 値は空ではない }; const isNumericDatatype = (type) => { - const NUMERIC_TYPE = ['int', 'num', 'real', 'float', 'double', 'long', 'dec', 'bit', 'money']; + const NUMERIC_TYPE = [ + 'int', + 'num', + 'real', + 'float', + 'double', + 'long', + 'dec', + 'bit', + 'money', + ]; if (!type) return false; // convert to lower case before compare const lowerType = type.toLowerCase(); @@ -286,7 +311,14 @@ const jsonParse = (res) => { const docCookies = { getItem(sKey) { try { - return decodeURIComponent(document.cookie.replace(new RegExp(`(?:(?:^|.*;)\\s*${encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, '\\$&')}\\s*\\=\\s*([^;]*).*$)|^.*$`), '$1')); + return decodeURIComponent( + document.cookie.replace( + new RegExp( + `(?:(?:^|.*;)\\s*${encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, '\\$&')}\\s*\\=\\s*([^;]*).*$)|^.*$`, + ), + '$1', + ), + ); } catch (e) { return ''; } @@ -299,7 +331,10 @@ const docCookies = { if (vEnd) { switch (vEnd.constructor) { case Number: - sExpires = vEnd === Infinity ? '; expires=Fri, 31 Dec 9999 23:59:59 GMT' : `; max-age=${vEnd}`; + sExpires = + vEnd === Infinity + ? '; expires=Fri, 31 Dec 9999 23:59:59 GMT' + : `; max-age=${vEnd}`; break; case String: sExpires = `; expires=${vEnd}`; @@ -320,21 +355,16 @@ const docCookies = { return true; }, hasItem(sKey) { - return (new RegExp(`(?:^|;\\s*)${encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, '\\$&')}\\s*\\=`)).test(document.cookie); - }, - keys: /* optional method: you can safely remove it! */ function () { - const aKeys = document.cookie.replace(/((?:^|\s*;)[^\=]+)(?=;|$)|^\s*|\s*(?:\=[^;]*)?(?:\1|$)/g, '').split(/\s*(?:\=[^;]*)?;\s*/); - for (let nIdx = 0; nIdx < aKeys.length; nIdx++) { - aKeys[nIdx] = decodeURIComponent(aKeys[nIdx]); - } - return aKeys; + return new RegExp( + `(?:^|;\\s*)${encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, '\\$&')}\\s*\\=`, + ).test(document.cookie); }, getLocale() { return this.getItem('locale') || 'en'; }, isJaLocale() { return this.getLocale() === 'ja'; - } + }, }; // get or create node from object @@ -348,7 +378,7 @@ const getOrCreateNewObj = (node, key, val = {}) => { // get or create node from object using array of keys const getOrCreateNodeByKeys = (dictObj, keys, defaultVal = undefined) => { let node = dictObj; - // eslint-disable-next-line no-restricted-syntax + for (const key of keys) { // if key is a number , result will be wrong. // because it get a element in array instead a key in dictionary @@ -356,7 +386,7 @@ const getOrCreateNodeByKeys = (dictObj, keys, defaultVal = undefined) => { return defaultVal; } - if (node !== undefined && node !== null && typeof (node) === 'object') { + if (node !== undefined && node !== null && typeof node === 'object') { if (node[key] === undefined) { node[key] = {}; } @@ -369,12 +399,12 @@ const getOrCreateNodeByKeys = (dictObj, keys, defaultVal = undefined) => { }; // generate random string of length `len` -const generateRandomString = len => 'x'.repeat(len).replace(/[xy]/g, (c) => { - const r = Math.random() * 16 | 0; - const - v = c === 'x' ? r : (r & 0x3 | 0x8); - return v.toString(16); -}); +const generateRandomString = (len) => + 'x'.repeat(len).replace(/[xy]/g, (c) => { + const r = (Math.random() * 16) | 0; + const v = c === 'x' ? r : (r & 0x3) | 0x8; + return v.toString(16); + }); const isArrayDuplicated = (array) => { if (!Array.isArray(array)) return false; @@ -384,20 +414,21 @@ const isArrayDuplicated = (array) => { const findIndexes = (arr1, arr2) => { if (!arr1 || !arr2) return []; const output = []; - arr1.forEach(e => output.push(arr2.indexOf(e))); + arr1.forEach((e) => output.push(arr2.indexOf(e))); return output; }; const getValueByIndexes = (indexes, targetArray, atlArray) => { if (!indexes) return []; const output = []; - indexes.forEach(idx => output.push(targetArray[idx] || atlArray[idx])); + indexes.forEach((idx) => output.push(targetArray[idx] || atlArray[idx])); return output; }; const setPageTitle = () => { // Set sub_title - const subTitle = docCookies.getItem('sub_title') || COMMON_CONSTANT.DEFAULT_SUB_TITLE; + const subTitle = + docCookies.getItem('sub_title') || COMMON_CONSTANT.DEFAULT_SUB_TITLE; $('#page-sub-title').text(subTitle); const currentPageTitle = $('title').text(); const fullTitle = `${currentPageTitle} ${subTitle}`; @@ -405,6 +436,27 @@ const setPageTitle = () => { $('title').html(fullTitle); }; +/** + * Show or hide options that export data|image to clipboard base on secure context + * + * This function ONLY effects to show graph pages + */ +function showHideExportToClipboardOptions() { + const $exportDataToClipboardRow = $('#exportDataToClipboardAcr').closest( + 'div.row', + ); + const $exportImageToClipboardRow = $('#exportImageToClipboardAcr').closest( + 'div.row', + ); + if (window.isSecureContext) { + $exportDataToClipboardRow.show(); + $exportImageToClipboardRow.show(); + } else { + $exportDataToClipboardRow.hide(); + $exportImageToClipboardRow.hide(); + } +} + const DEFAULT_LOCALE = 'ja'; $(() => { @@ -439,18 +491,22 @@ $(() => { $(e.currentTarget).removeClass('show'); } }); + + showHideExportToClipboardOptions(); }); const validateNumericInput = (textbox) => { textbox.on('input', (eve) => { - let {value} = eve.currentTarget; + let { value } = eve.currentTarget; value = value.replace(/[^((0-9)|(０-９).\+\-)]+/gi, ''); - eve.currentTarget.value = value + eve.currentTarget.value = value; }); textbox.on('change', (eve) => { - let {value} = eve.currentTarget; + let { value } = eve.currentTarget; const replaceVal = /[０-９]/gi; - value = value.replaceAll(replaceVal, s => String.fromCharCode(s.charCodeAt(0) - 65248)); + value = value.replaceAll(replaceVal, (s) => + String.fromCharCode(s.charCodeAt(0) - 65248), + ); eve.currentTarget.value = value; }); }; @@ -470,11 +526,10 @@ const validateTargetPeriodInput = () => { validateNumericInput($(`input[name=${CYCLIC_TERM.DIV_OFFSET}]`)); validateNumericInput($(`input[name=${CYCLIC_TERM.RECENT_INTERVAL}]`)); - }; const stringNormalization = (val) => { - if (typeof (val) !== 'string') { + if (typeof val !== 'string') { return val; } @@ -493,7 +548,11 @@ const stringNormalization = (val) => { }; // convert input textbox element from Zenkaku to Hankaku on specific event -const handleInputTextZenToHanEvent = (event, afterOKCheckFn = null, callbackParams = null) => { +const handleInputTextZenToHanEvent = ( + event, + afterOKCheckFn = null, + callbackParams = null, +) => { event.currentTarget.value = stringNormalization(event.currentTarget.value); event.currentTarget.oldValue = event.currentTarget.value; @@ -519,7 +578,7 @@ const setInputFilterH2Z = (element, unbind = false, ignoreWithAttr = []) => { const assignValueToSelect2 = (select2Element, val) => { if (isEmpty(val)) return; - if (typeof (val) === 'object') val = val.join(' '); + if (typeof val === 'object') val = val.join(' '); let words = [val]; const isMultipleselect2 = select2Element.attr('multiple'); if (isMultipleselect2) { @@ -529,7 +588,9 @@ const assignValueToSelect2 = (select2Element, val) => { const matchOptions = []; for (const word of words) { if (!isEmpty(word)) { - const found = select2Element.find('option').filter((i, e) => $(e).val() === word).length; + const found = select2Element + .find('option') + .filter((i, e) => $(e).val() === word).length; if (!found) { const newOption = new Option(word, word, false, false); select2Element.append(newOption).trigger('change'); @@ -540,13 +601,12 @@ const assignValueToSelect2 = (select2Element, val) => { select2Element.val(null).val(matchOptions).trigger('change'); }; - const handleInputTextZenToHanEventSelect2 = (element) => { let val = element.val(); if (!val) return; - if (typeof (val) !== 'object') { + if (typeof val !== 'object') { val = [val]; } val = val.join(' '); @@ -575,23 +635,26 @@ const convertTextH2Z = (parent = null) => { } const alreadyConvertClass = '.already-convert-hankaku'; - eles.find('input, textarea').not(alreadyConvertClass).each(function () { - if ($(this).attr('type') !== 'file') { - setInputFilterH2Z($(this), false, ['multiple']); - $(this).addClass(alreadyConvertClass.substr(1)); - } - }); + eles.find('input, textarea') + .not(alreadyConvertClass) + .each(function () { + if ($(this).attr('type') !== 'file') { + setInputFilterH2Z($(this), false, ['multiple']); + $(this).addClass(alreadyConvertClass.substr(1)); + } + }); - eles.find('select').not(alreadyConvertClass).each(function () { - const thisElement = $(this); - if (thisElement.hasClass('convert-h2z')) { - setInputFilterH2ZSelect2(thisElement, true); - thisElement.addClass(alreadyConvertClass.substr(1)); - } - }); + eles.find('select') + .not(alreadyConvertClass) + .each(function () { + const thisElement = $(this); + if (thisElement.hasClass('convert-h2z')) { + setInputFilterH2ZSelect2(thisElement, true); + thisElement.addClass(alreadyConvertClass.substr(1)); + } + }); }; - // convert fullwidth special symbols to halfwidth katakana // const replaceStringByArrayOfIndex = (str, src, dest) => { // const len = src.length; @@ -665,25 +728,41 @@ const convertTextH2Z = (parent = null) => { // return res; // }; - // gen Json for Db Config Data -const genJsonfromHTML = (searchFromHtml, jsonRootKey, valAlwaysArray = false) => { +const genJsonfromHTML = ( + searchFromHtml, + jsonRootKey, + valAlwaysArray = false, +) => { const result = {}; - const parentHtml = typeof (searchFromHtml) === 'string' ? $(`${searchFromHtml}`) : searchFromHtml; + const parentHtml = + typeof searchFromHtml === 'string' + ? $(`${searchFromHtml}`) + : searchFromHtml; if (parentHtml.length === 1) { // root value is a json result[jsonRootKey] = {}; } else { // root value is an array - result[jsonRootKey] = [...Array(parentHtml.length)].map(() => JSON.parse('{}')); + result[jsonRootKey] = [...Array(parentHtml.length)].map(() => + JSON.parse('{}'), + ); } // closure - const inner = (searchHtmlName, getHtmlValFunc = null, jsonKey = searchHtmlName) => { + const inner = ( + searchHtmlName, + getHtmlValFunc = null, + jsonKey = searchHtmlName, + ) => { // loop parent HTML elements parentHtml.each((i, parentEle) => { - const vals = [...parentEle.querySelectorAll(`[name=${searchHtmlName}]`)].map(e => (getHtmlValFunc === null ? e.value : getHtmlValFunc(e))); + const vals = [ + ...parentEle.querySelectorAll(`[name=${searchHtmlName}]`), + ].map((e) => + getHtmlValFunc === null ? e.value : getHtmlValFunc(e), + ); // const vals = [...$(parentEle).find(`[name=${searchHtmlName}]`)].map(e => (getHtmlValFunc === null ? e.value : getHtmlValFunc(e))); let val; @@ -711,11 +790,10 @@ const genJsonfromHTML = (searchFromHtml, jsonRootKey, valAlwaysArray = false) => return inner; }; - // get node from dictionary const getNode = (dictObj, keys, defaultVal = null) => { let node = dictObj; - // eslint-disable-next-line no-restricted-syntax + for (const key of keys) { // if key is a number , result will be wrong. // because it get a element in array instead a key in dictionary @@ -723,7 +801,7 @@ const getNode = (dictObj, keys, defaultVal = null) => { return defaultVal; } - if (node && typeof (node) === 'object') { + if (node && typeof node === 'object') { node = node[key]; // node is not a dictionary if (node === undefined) return defaultVal; @@ -736,7 +814,10 @@ const getNode = (dictObj, keys, defaultVal = null) => { }; // display message after press register buttons -const displayRegisterMessage = (alertID, flaskMessage = {message: '', is_error: false, is_warning: false}) => { +const displayRegisterMessage = ( + alertID, + flaskMessage = { message: '', is_error: false, is_warning: false }, +) => { if (alertID === null || alertID === undefined) return; if (flaskMessage.message) { $(`${alertID}-content`).html(flaskMessage.message); @@ -765,6 +846,18 @@ const hideAlertMessages = () => { $('.alert.alert-dismissible.fade.show').css('display', 'none'); }; +const generateRegisterMessage = ( + message, + isError = false, + isWarning = false, +) => { + return { + message: message, + isError: isError, + isWarning: isWarning, + }; +}; + // delete closest element const delClosestEle = (e, closestEle) => { e.closest(closestEle).remove(); @@ -842,7 +935,7 @@ const fetchBackgroundJobs = (cb) => { 'Content-Type': 'application/json', }, }) - .then(response => response.clone().json()) + .then((response) => response.clone().json()) .then((json) => { if (json) { cb(json); @@ -860,8 +953,16 @@ const TIME_FORMAT_TZ = 'HH:mm:ss Z'; const DATE_FORMAT_WITHOUT_TZ = 'YYYY-MM-DD HH:mm:ss'; const DATE_FORMAT = 'YYYY-MM-DD'; const DATE_PICKER_FORMAT = 'yy-mm-dd'; -const DATE_FORMAT_VALIDATE = ['YYYY/MM/DD', 'YYYY/M/DD', 'YYYY/M/D', 'YYYY/M/DD', - 'YYYY-MM-DD', 'YYYY-M-DD', 'YYYY-M-DD', 'YYYY-M-D']; +const DATE_FORMAT_VALIDATE = [ + 'YYYY/MM/DD', + 'YYYY/M/DD', + 'YYYY/M/D', + 'YYYY/M/DD', + 'YYYY-MM-DD', + 'YYYY-M-DD', + 'YYYY-M-DD', + 'YYYY-M-D', +]; const TIME_FORMAT = 'HH:mm'; const TIME_FORMAT_VALIDATE = ['HH:mm', 'H:mm', 'HH:m', 'H:m']; @@ -874,22 +975,33 @@ const TRACE_TIME_CONST = { const TRACE_TIME_NAME = { PCA: 'testTraceTime', }; -const DATETIME_FORMAT_VALIDATE = DATE_FORMAT_VALIDATE.concat( - [DATE_FORMAT_TZ, DATE_FORMAT_WITHOUT_TZ, DATE_FORMAT, DATE_PICKER_FORMAT], -); +const DATETIME_FORMAT_VALIDATE = DATE_FORMAT_VALIDATE.concat([ + DATE_FORMAT_TZ, + DATE_FORMAT_WITHOUT_TZ, + DATE_FORMAT, + DATE_PICKER_FORMAT, +]); // replace_date -const formatDate = dt => dt.replaceAll('\/', '-'); - -const formatDateTime = (dt, fm = DATE_FORMAT_WITHOUT_TZ) => { +const formatDate = (dt) => dt.replaceAll('/', '-'); + +const formatDateTime = ( + dt, + fm = DATE_FORMAT_WITHOUT_TZ, + options = { + withMillisecs: true, + isLocalTime: false, + }, +) => { let formatStr = fm; if (fm === DATE_FORMAT_WITHOUT_TZ) { const milliSeconds = checkDatetimeHasMilliseconds(dt); - if (milliSeconds) { + if (milliSeconds && options.withMillisecs) { formatStr = DATE_FORMAT_WITHOUT_TZ + milliSeconds; } } - return moment.utc(dt).local().format(formatStr); + const datetime = options.isLocalTime ? moment(dt) : moment.utc(dt); + return datetime.local().format(formatStr); }; const checkDatetimeHasMilliseconds = (datetimeStr) => { @@ -899,44 +1011,29 @@ const checkDatetimeHasMilliseconds = (datetimeStr) => { } return '.SSS'; - - const subMillisecond = match[0]; - // .1, .12, .123 -> .SSS - if (/\.[1-9]{1,3}0*$/.test(subMillisecond)) { - return '.SSS'; - } - // .1234 -> .SSSSSS - if (/\.[1-9]{1,}0*$/.test(subMillisecond)) { - return subMillisecond; - } - - return false - }; const detectLocalTimezone = () => { return Intl.DateTimeFormat().resolvedOptions().timeZone; }; - /* Binary search in JavaScript. - * Returns the index of of the element in a sorted array or (-n-1) - * where n is the insertion point for the new element. - * Parameters: - * ar - A sorted array - * el - An element to search for - * compare_fn - A comparator function. The function takes two arguments: (a, b) and returns: - * a negative number if a is less than b; - * 0 if a is equal to b; - * a positive number of a is greater than b. - * The array may contain duplicate elements. If there are more than one equal elements in the array, - * the returned value can be the index of any one of the equal elements. - */ + * Returns the index of of the element in a sorted array or (-n-1) + * where n is the insertion point for the new element. + * Parameters: + * ar - A sorted array + * el - An element to search for + * compare_fn - A comparator function. The function takes two arguments: (a, b) and returns: + * a negative number if a is less than b; + * 0 if a is equal to b; + * a positive number of a is greater than b. + * The array may contain duplicate elements. If there are more than one equal elements in the array, + * the returned value can be the index of any one of the equal elements. + */ const binarySearch = (ar, el, compareFn) => { let m = 0; let n = ar.length - 1; while (m <= n) { - // eslint-disable-next-line no-bitwise const k = (n + m) >> 1; const cmp = compareFn(el, ar[k]); if (cmp > 0) { @@ -968,7 +1065,7 @@ function niceNum(localRange, round) { /** nice, rounded fraction */ const exponent = Math.floor(Math.log10(localRange)); - const fraction = localRange / (10 ** exponent); + const fraction = localRange / 10 ** exponent; if (round) { if (fraction < 1.5) { @@ -989,12 +1086,12 @@ function niceNum(localRange, round) { } else { niceFraction = 10; } - return niceFraction * (10 ** exponent); + return niceFraction * 10 ** exponent; } - function getPrecision(n) { - let loggedPrecision = 1 - Math.floor(Math.log(Math.abs(n % 1))) / Math.log(10); + let loggedPrecision = + 1 - Math.floor(Math.log(Math.abs(n % 1))) / Math.log(10); loggedPrecision = Math.round(loggedPrecision); if (Number.isFinite(loggedPrecision)) { return loggedPrecision; @@ -1012,10 +1109,8 @@ const saveOrderToDB = (orderName, rowOrders = {}) => { type: 'POST', contentType: 'application/json', processData: false, - success: (res) => { - }, - error: (res) => { - }, + success: (res) => {}, + error: (res) => {}, }); }; @@ -1025,11 +1120,14 @@ const dragDropRowInTable = (() => { const DATA_ORDER_ATTR = 'data-order'; // get values of order columns - const getValuesOfOrderCols = ele => $(ele).attr('id') - || [...$(ele).find(`[${DATA_ORDER_ATTR}]`)].map(e => e.value).join('_'); + const getValuesOfOrderCols = (ele) => + $(ele).attr('id') || + [...$(ele).find(`[${DATA_ORDER_ATTR}]`)].map((e) => e.value).join('_'); - const getValuesOfOrderColsMasterConfig = ele => [...$(ele).find(`[${DATA_ORDER_ATTR}]`)].map(e => e.value).join('_') - || $(ele).attr('id'); + const getValuesOfOrderColsMasterConfig = (ele) => + [...$(ele).find(`[${DATA_ORDER_ATTR}]`)] + .map((e) => e.value) + .join('_') || $(ele).attr('id'); // fix width of tr when drag drop const fixHelper = (_v, ui) => { @@ -1040,11 +1138,13 @@ const dragDropRowInTable = (() => { }; // get values of order columns - const getValuesOfOrderColsAndDsId = ele => $(ele).attr('data-ds-id') - || [...$(ele).find(`[${DATA_ORDER_ATTR}]`)].map(e => e.value).join('_'); + const getValuesOfOrderColsAndDsId = (ele) => + $(ele).attr('data-ds-id') || + [...$(ele).find(`[${DATA_ORDER_ATTR}]`)].map((e) => e.value).join('_'); - const getValuesOfOrderColsAndDsProcId = ele => $(ele).attr('data-proc-id') - || [...$(ele).find(`[${DATA_ORDER_ATTR}]`)].map(e => e.value).join('_'); + const getValuesOfOrderColsAndDsProcId = (ele) => + $(ele).attr('data-proc-id') || + [...$(ele).find(`[${DATA_ORDER_ATTR}]`)].map((e) => e.value).join('_'); // Update LocalStorage for ordering const setItemLocalStorage = (tblBody, prefix = null) => { @@ -1056,15 +1156,25 @@ const dragDropRowInTable = (() => { } if (localStorageId === 'tblDbConfig') { - dicRowId = Object.fromEntries([...tblBody.rows].map((ele, i) => [getValuesOfOrderColsAndDsId(ele), i])); + dicRowId = Object.fromEntries( + [...tblBody.rows].map((ele, i) => [ + getValuesOfOrderColsAndDsId(ele), + i, + ]), + ); } else { - dicRowId = Object.fromEntries([...tblBody.rows].map((ele, i) => [getValuesOfOrderColsAndDsProcId(ele), i])); + dicRowId = Object.fromEntries( + [...tblBody.rows].map((ele, i) => [ + getValuesOfOrderColsAndDsProcId(ele), + i, + ]), + ); } localStorage.setItem(localStorageId, JSON.stringify(dicRowId)); // save orders to db - saveOrderToDB(orderName = localStorageId, rowOrders = dicRowId); + saveOrderToDB((orderName = localStorageId), (rowOrders = dicRowId)); }; // Update LocalStorage for ordering @@ -1111,25 +1221,29 @@ const dragDropRowInTable = (() => { } else { rows.sort((a, b) => sortFunction(a, b, orderDic)); } - rows.forEach(row => tbody.append(row)); + rows.forEach((row) => tbody.append(row)); updateTableRowNumber(localStorageId); // TODO }; // return public function return { - DATA_ORDER_ATTR, fixHelper, updateOrder, sortRowInTable, setItemLocalStorage, + DATA_ORDER_ATTR, + fixHelper, + updateOrder, + sortRowInTable, + setItemLocalStorage, }; })(); -// eslint-disable-next-line no-unused-vars const stickyHeaders = (() => { jQuery.expr.filters.offscreen = (el) => { const rect = el.getBoundingClientRect(); return ( - (rect.x + rect.width) < 0 - || (rect.y + rect.height) < 0 - || (rect.x > window.innerWidth || rect.y > window.innerHeight) + rect.x + rect.width < 0 || + rect.y + rect.height < 0 || + rect.x > window.innerWidth || + rect.y > window.innerHeight ); }; const $window = $(window); @@ -1137,28 +1251,39 @@ const stickyHeaders = (() => { const whenScrolling = () => { $stickies.each((i, e) => { - const $cardParent = $(e).parents().filter('form') - .parent() - .parent(); + const $cardParent = $(e).parents().filter('form').parent().parent(); const $thisSticky = $(e); const $stickyPosition = $thisSticky.data('originalPosition'); - if ($stickyPosition <= $window.scrollTop() && !$cardParent.is(':offscreen')) { + if ( + $stickyPosition <= $window.scrollTop() && + !$cardParent.is(':offscreen') + ) { const $nextSticky = $stickies.eq(i + 1); - const $nextStickyPosition = $nextSticky.data('originalPosition') - $thisSticky.data('originalHeight'); + const $nextStickyPosition = + $nextSticky.data('originalPosition') - + $thisSticky.data('originalHeight'); $thisSticky.addClass('btn-fixed'); - if ($nextSticky.length > 0 && $thisSticky.offset().top >= $nextStickyPosition) { - $thisSticky.addClass('absolute').css('top', $nextStickyPosition); + if ( + $nextSticky.length > 0 && + $thisSticky.offset().top >= $nextStickyPosition + ) { + $thisSticky + .addClass('absolute') + .css('top', $nextStickyPosition); } } else { const $prevSticky = $stickies.eq(i - 1); $thisSticky.removeClass('btn-fixed'); - if ($prevSticky.length > 0 - && $window.scrollTop() <= $thisSticky.data('originalPosition') - $thisSticky.data('originalHeight') + if ( + $prevSticky.length > 0 && + $window.scrollTop() <= + $thisSticky.data('originalPosition') - + $thisSticky.data('originalHeight') ) { $prevSticky.removeClass('absolute').removeAttr('style'); } @@ -1166,7 +1291,11 @@ const stickyHeaders = (() => { }); }; const load = (stickies) => { - if (typeof stickies === 'object' && stickies instanceof jQuery && stickies.length > 0) { + if ( + typeof stickies === 'object' && + stickies instanceof jQuery && + stickies.length > 0 + ) { let $originWH = $(document).height(); $stickies = stickies.each((_v, e) => { const $thisSticky = $(e).wrap('
      '); @@ -1199,16 +1328,16 @@ const stickyHeaders = (() => { }; })(); - // TODO refactor scrollFloatingElement and stickyHeaders -// eslint-disable-next-line no-unused-vars + const scrollFloatingElement = (() => { jQuery.expr.filters.offscreen = (el) => { const rect = el.getBoundingClientRect(); return ( - (rect.x + rect.width) < 0 - || (rect.y + rect.height) < 0 - || (rect.x > window.innerWidth || rect.y > window.innerHeight) + rect.x + rect.width < 0 || + rect.y + rect.height < 0 || + rect.x > window.innerWidth || + rect.y > window.innerHeight ); }; const $window = $(window); @@ -1218,21 +1347,29 @@ const scrollFloatingElement = (() => { const whenScrolling = () => { $stickies.each((i, e) => { - const $cardParent = $(e).parents().filter('form') - .parent() - .parent(); + const $cardParent = $(e).parents().filter('form').parent().parent(); const $thisSticky = $(e); const $stickyPosition = $thisSticky.data('originalPosition'); - if ($stickyPosition <= $window.scrollTop() && !$cardParent.is(':offscreen')) { + if ( + $stickyPosition <= $window.scrollTop() && + !$cardParent.is(':offscreen') + ) { const $nextSticky = $stickies.eq(i + 1); - const $nextStickyPosition = $nextSticky.data('originalPosition') - $thisSticky.data('originalHeight'); + const $nextStickyPosition = + $nextSticky.data('originalPosition') - + $thisSticky.data('originalHeight'); // add custom css $thisSticky.addClass($adjustCSSClass); - if ($nextSticky.length > 0 && $thisSticky.offset().top >= $nextStickyPosition) { - $thisSticky.addClass('absolute').css('top', $nextStickyPosition); + if ( + $nextSticky.length > 0 && + $thisSticky.offset().top >= $nextStickyPosition + ) { + $thisSticky + .addClass('absolute') + .css('top', $nextStickyPosition); } if ($callBackFunc) { @@ -1244,8 +1381,11 @@ const scrollFloatingElement = (() => { // remove custom css $thisSticky.removeClass($adjustCSSClass); - if ($prevSticky.length > 0 - && $window.scrollTop() <= $thisSticky.data('originalPosition') - $thisSticky.data('originalHeight') + if ( + $prevSticky.length > 0 && + $window.scrollTop() <= + $thisSticky.data('originalPosition') - + $thisSticky.data('originalHeight') ) { $prevSticky.removeClass('absolute').removeAttr('style'); } @@ -1253,7 +1393,11 @@ const scrollFloatingElement = (() => { }); }; const load = (stickies, adjustCSSClass = '', callBackFunc = null) => { - if (typeof stickies === 'object' && stickies instanceof jQuery && stickies.length > 0) { + if ( + typeof stickies === 'object' && + stickies instanceof jQuery && + stickies.length > 0 + ) { let $originWH = $(document).height(); $stickies = stickies.each((_v, e) => { const $thisSticky = $(e).wrap('
      '); @@ -1360,7 +1504,10 @@ const closeAllToast = () => { // show toastr msg to warn about abnormal result const showToastrAnomalGraph = () => { const i18nTexts = { - abnormalGraphShow: $('#i18nAbnormalGraphShow').text().split('BREAK_LINE').join('
      '), + abnormalGraphShow: $('#i18nAbnormalGraphShow') + .text() + .split('BREAK_LINE') + .join('
      '), }; const msgContent = `

      ${i18nTexts.abnormalGraphShow}

      `; @@ -1419,12 +1566,15 @@ const syncTraceDateTimeRange = (parentId = '', dtNames = {}, dtValues = {}) => { const datetimeRangeVal = dtValues.DATETIME_RANGE_PICKER; if (!isEmpty(datetimeRange) && !isEmpty(datetimeRangeVal)) { - $(`#${parentId} input[name=${datetimeRange}]`).first().val(datetimeRangeVal); + $(`#${parentId} input[name=${datetimeRange}]`) + .first() + .val(datetimeRangeVal); } }; const toUTCDateTime = (localDate, localTime, withDateTime = false) => { - if (!withDateTime && (isEmpty(localDate) || isEmpty(localTime))) return {date: localDate, time: localTime}; + if (!withDateTime && (isEmpty(localDate) || isEmpty(localTime))) + return { date: localDate, time: localTime }; const datetime = withDateTime ? localDate : `${localDate} ${localTime}`; const utcDT = moment.utc(moment(datetime, `${DATE_FORMAT} ${TIME_FORMAT}`)); @@ -1437,7 +1587,7 @@ const toUTCDateTime = (localDate, localTime, withDateTime = false) => { time: utcDT.format(TIME_FORMAT), }; } - return {date: localDate, time: localTime}; + return { date: localDate, time: localTime }; }; const getColumnName = (endProcName, getVal) => { @@ -1467,7 +1617,6 @@ const createDatetime = (v) => { return new Date(v); }; - const createIndex = (v) => { if (v === 'min') { return 0; @@ -1478,7 +1627,6 @@ const createIndex = (v) => { return v; }; - const getChartInfo = (plotdata, xAxisOption = 'TIME', filterCond = null) => { let chartInfos = plotdata.chart_infos || []; let chartInfosOrg = plotdata.chart_infos_org || []; @@ -1502,24 +1650,28 @@ const getChartInfo = (plotdata, xAxisOption = 'TIME', filterCond = null) => { } if (!isFacetHasFilterConditionValue) { - return [chartInfos, chartInfosOrg] + return [chartInfos, chartInfosOrg]; } - chartInfos = chartInfos.filter( - settingInfo => settingInfo.name ? filterCond.includes(settingInfo.name) : true); - chartInfosOrg = chartInfosOrg.filter( - settingInfo => settingInfo.name ? filterCond.includes(settingInfo.name) : true); + chartInfos = chartInfos.filter((settingInfo) => + settingInfo.name ? filterCond.includes(settingInfo.name) : true, + ); + chartInfosOrg = chartInfosOrg.filter((settingInfo) => + settingInfo.name ? filterCond.includes(settingInfo.name) : true, + ); } return [chartInfos, chartInfosOrg]; }; - -const chooseLatestThresholds = (chartInfos = [], chartInfosOrg = [], - clickedIdx = null, convertFunc = createDatetime) => { +const chooseLatestThresholds = ( + chartInfos = [], + chartInfosOrg = [], + clickedIdx = null, + convertFunc = createDatetime, +) => { if (isEmpty(chartInfos)) return [{}, 0]; - // no click -> no point -> no time // if chartInfosOrg empty -> don't use chartInfosOrg if (isEmpty(clickedIdx)) { @@ -1529,7 +1681,10 @@ const chooseLatestThresholds = (chartInfos = [], chartInfosOrg = [], const chartInfo = chartInfos[idx]; const latestActTo = latestChartInfo['act-to']; const actTo = chartInfo['act-to']; - if (isEmpty(actTo) || (!isEmpty(latestActTo) && actTo > latestActTo)) { + if ( + isEmpty(actTo) || + (!isEmpty(latestActTo) && actTo > latestActTo) + ) { latestChartInfo = chartInfo; latestIndex = idx; } @@ -1545,8 +1700,12 @@ const chooseLatestThresholds = (chartInfos = [], chartInfosOrg = [], let latestIndexOrg = null; for (const idx in chartInfosOrg) { const chartInfo = chartInfosOrg[idx]; - const actFrom = isEmpty(chartInfo['act-from']) ? defaultActFrom : convertFunc(chartInfo['act-from']); - const actTo = isEmpty(chartInfo['act-to']) ? defaultActTo : convertFunc(chartInfo['act-to']); + const actFrom = isEmpty(chartInfo['act-from']) + ? defaultActFrom + : convertFunc(chartInfo['act-from']); + const actTo = isEmpty(chartInfo['act-to']) + ? defaultActTo + : convertFunc(chartInfo['act-to']); let relevantChartInfo = false; if (actFrom <= sensorDateTime && sensorDateTime <= actTo) { relevantChartInfo = true; @@ -1556,7 +1715,9 @@ const chooseLatestThresholds = (chartInfos = [], chartInfosOrg = [], latestChartInfoOrg = chartInfo; latestIndexOrg = idx; } else { - const latestActTo = isEmpty(latestChartInfoOrg['act-to']) ? defaultActTo : convertFunc(latestChartInfoOrg['act-to']); + const latestActTo = isEmpty(latestChartInfoOrg['act-to']) + ? defaultActTo + : convertFunc(latestChartInfoOrg['act-to']); if (latestActTo < actTo) { latestChartInfoOrg = chartInfo; latestIndexOrg = idx; @@ -1603,10 +1764,11 @@ const formatResultMulti = (data) => { } const $result = $( - `${'
      ' - + '
      ${columnName}
      ` - + `
      ${data.text}
      ` - + '
      ', + `${ + '
      ' + '
      ${columnName}
      ` + + `
      ${data.text}
      ` + + '
      ', ); return $result; }; @@ -1632,7 +1794,10 @@ const matchCustom = (params, data) => { params.term = params.term.toLowerCase(); const dataText = data.text.toLowerCase(); const dataTitle = data.title.toLowerCase(); - if (dataText.indexOf(params.term) > -1 || dataTitle.indexOf(params.term) > -1) { + if ( + dataText.indexOf(params.term) > -1 || + dataTitle.indexOf(params.term) > -1 + ) { const modifiedData = $.extend({}, data, true); // You can return modified objects from here @@ -1661,9 +1826,9 @@ const setSelect2Selection = (parent = null, additionalOption = {}) => { language: { noResults: function (params) { return i18nCommon.notApplicable; - } - } - } + }, + }, + }; const nColCls = 'select-n-columns'; // const alreadyConvertCls = 'already-convert-select2'; @@ -1672,43 +1837,45 @@ const setSelect2Selection = (parent = null, additionalOption = {}) => { ...additionalOption, }; - const dicNColsOptions = { ...commonOption, templateResult: formatResultMulti, - ...additionalOption + ...additionalOption, }; // single select2 - eles.find('select.select2-selection--single:not([hidden])').each(function () { - const ele = $(this); - let select2El = null; - - if (ele.attr('data-allow-clear')) { - Object.assign(dicNColsOptions, {allowClear: true}); - Object.assign(dicOptions, {allowClear: true}); - } - if (ele.hasClass(nColCls)) { - select2El = ele.select2(dicNColsOptions); - } else { - select2El = ele.select2(dicOptions); - } - - // Add placeholder in search input - $(ele).data('select2').$dropdown.find(':input.select2-search__field').attr('placeholder', i18nCommon.search + '...') + eles.find('select.select2-selection--single:not([hidden])').each( + function () { + const ele = $(this); + let select2El = null; + + if (ele.attr('data-allow-clear')) { + Object.assign(dicNColsOptions, { allowClear: true }); + Object.assign(dicOptions, { allowClear: true }); + } + if (ele.hasClass(nColCls)) { + select2El = ele.select2(dicNColsOptions); + } else { + select2El = ele.select2(dicOptions); + } - resizeListOptionSelect2(select2El) + // Add placeholder in search input + $(ele) + .data('select2') + .$dropdown.find(':input.select2-search__field') + .attr('placeholder', i18nCommon.search + '...'); - }); + resizeListOptionSelect2(select2El); + }, + ); }; -const uniq = vals => [...new Set(vals)]; - +const uniq = (vals) => [...new Set(vals)]; const getPearsonCorrelation = (_x, _y) => { let shortestArrayLength = 0; - const x = _x.filter(i => Number.isFinite(i)); - const y = _y.filter(i => Number.isFinite(i)); + const x = _x.filter((i) => Number.isFinite(i)); + const y = _y.filter((i) => Number.isFinite(i)); if (x.length === y.length) { shortestArrayLength = x.length; } else if (x.length > y.length) { @@ -1747,9 +1914,9 @@ const getPearsonCorrelation = (_x, _y) => { } } - const step1 = (shortestArrayLength * sumXY) - (sumX * sumY); - const step2 = (shortestArrayLength * sumX2) - (sumX * sumX); - const step3 = (shortestArrayLength * sumY2) - (sumY * sumY); + const step1 = shortestArrayLength * sumXY - sumX * sumY; + const step2 = shortestArrayLength * sumX2 - sumX * sumX; + const step3 = shortestArrayLength * sumY2 - sumY * sumY; const step4 = Math.sqrt(step2 * step3); const answer = step1 / step4; @@ -1771,18 +1938,27 @@ const getCorrelation = (corrMatrix, sensorID, targetID) => { const genPlotlyIconSettings = () => ({ modeBarButtonsToRemove: [ - 'zoom2d', 'pan2d', 'select2d', 'lasso2d', 'zoomIn2d', 'zoomOut2d', - 'hoverClosestCartesian', 'hoverCompareCartesian', - 'toggleSpikelines', 'sendDataToCloud', + 'zoom2d', + 'pan2d', + 'select2d', + 'lasso2d', + 'zoomIn2d', + 'zoomOut2d', + 'hoverClosestCartesian', + 'hoverCompareCartesian', + 'toggleSpikelines', + 'sendDataToCloud', ], displaylogo: false, }); const initializeDateTime = (dtElements = {}, syncStartEnd = true) => { let dateDiff = 0; - const startDateElement = dtElements.START_DATE || $('input[name="START_DATE"]'); + const startDateElement = + dtElements.START_DATE || $('input[name="START_DATE"]'); const endDateElement = dtElements.END_DATE || $('input[name="END_DATE"]'); - const startTimeElement = dtElements.START_TIME || $('input[name="START_TIME"]'); + const startTimeElement = + dtElements.START_TIME || $('input[name="START_TIME"]'); const endTimeElement = dtElements.END_TIME || $('input[name="END_TIME"]'); // set default time @@ -1814,7 +1990,9 @@ const initializeDateTime = (dtElements = {}, syncStartEnd = true) => { // update end_date to value of start_date const startDate = startDateElement.val(); const mStartDate = moment(startDate, DATE_FORMAT); - const newEndDate = mStartDate.add(dateDiff, 'days').format(DATE_FORMAT); + const newEndDate = mStartDate + .add(dateDiff, 'days') + .format(DATE_FORMAT); endDateElement.val(newEndDate); endDateElement.attr('data-current-val', newEndDate); // todo: update datetime range span @@ -1855,7 +2033,7 @@ const validateDateTime = (event, dtFormat) => { if (newValue === curTarget.getAttribute('data-current-val')) { return; } - const {currentVal} = event.target.dataset; + const { currentVal } = event.target.dataset; if (!moment(newValue, dtFormat, true).isValid()) { event.target.value = currentVal; } else { @@ -1863,11 +2041,21 @@ const validateDateTime = (event, dtFormat) => { } }; -const adjustMinMax1Percent = (minY, maxY) => [minY - 0.01 * Math.abs(minY), maxY + 0.01 * Math.abs(maxY)]; +const adjustMinMax1Percent = (minY, maxY) => [ + minY - 0.01 * Math.abs(minY), + maxY + 0.01 * Math.abs(maxY), +]; -const createHistogramParams = (scaleOption, arrayY, - setYMin, setYMax, - commonMinY, commonMaxY, latestChartInfo, corrSummary) => { +const createHistogramParams = ( + scaleOption, + arrayY, + setYMin, + setYMax, + commonMinY, + commonMaxY, + latestChartInfo, + corrSummary, +) => { // max/minY based on scaleOption let maxY = getNode(corrSummary, ['non_parametric', 'upper_range']); let minY = getNode(corrSummary, ['non_parametric', 'lower_range']); @@ -1882,7 +2070,11 @@ const createHistogramParams = (scaleOption, arrayY, } else if (scaleOption === '3') { const threshHigh = latestChartInfo['thresh-high']; const threshLow = latestChartInfo['thresh-low']; - if (!isEmpty(threshHigh) && !isEmpty(threshLow) && threshHigh !== threshLow) { + if ( + !isEmpty(threshHigh) && + !isEmpty(threshLow) && + threshHigh !== threshLow + ) { maxY = threshHigh + Math.abs(threshHigh - threshLow) * 0.125; minY = threshLow - Math.abs(threshHigh - threshLow) * 0.125; } @@ -1894,33 +2086,49 @@ const createHistogramParams = (scaleOption, arrayY, if (minY === maxY) { [minY, maxY] = adjustMinMax1Percent(minY, maxY); } - if (minY > maxY) { // rare case, i saw long time ago + if (minY > maxY) { + // rare case, i saw long time ago const temp = minY; minY = maxY; maxY = temp; } const globalRange = [minY, maxY]; - const customBinSize = Math.max((globalRange[1] - globalRange[0]) / 128, Math.round(setYMax - setYMin) / 128) || 1; + const customBinSize = + Math.max( + (globalRange[1] - globalRange[0]) / 128, + Math.round(setYMax - setYMin) / 128, + ) || 1; return [minY, maxY, globalRange, customBinSize]; }; -const colorErrorCells = (jexcelDivId, errorCells, requiredErrorEles=[]) => { +const colorErrorCells = (jexcelDivId, errorCells, requiredErrorEles = []) => { if (isEmpty(errorCells)) return; - const styleParams = errorCells.reduce((a, b) => ({...a, [b]: 'color:red;'}), {}); + const styleParams = errorCells.reduce( + (a, b) => ({ ...a, [b]: 'color:red;' }), + {}, + ); document.getElementById(jexcelDivId).jspreadsheet.setStyle(styleParams); if (requiredErrorEles.length) { - const emptyCellsParams = requiredErrorEles.reduce((a, b) => ({...a, [b]: 'background-color: red;'}), {}); - document.getElementById(jexcelDivId).jspreadsheet.setStyle(emptyCellsParams); + const emptyCellsParams = requiredErrorEles.reduce( + (a, b) => ({ ...a, [b]: 'background-color: red;' }), + {}, + ); + document + .getElementById(jexcelDivId) + .jspreadsheet.setStyle(emptyCellsParams); } }; const colorErrorCheckboxCells = (jexcelDivId, errorCells) => { if (isEmpty(errorCells)) return; - const styleParams = errorCells.reduce((a, b) => ({...a, [b]: 'background-color: red;'}), {}); + const styleParams = errorCells.reduce( + (a, b) => ({ ...a, [b]: 'background-color: red;' }), + {}, + ); document.getElementById(jexcelDivId).jspreadsheet.setStyle(styleParams); }; @@ -1934,7 +2142,10 @@ const showGAToastr = (errors) => { showToastrMsg(msgContent, MESSAGE_LEVEL.ERROR); }; -const getSelectedItems = (isCategoryItem = false, selectParent = $(formElements.endProcSelectedItem)) => { +const getSelectedItems = ( + isCategoryItem = false, + selectParent = $(formElements.endProcSelectedItem), +) => { const selectedItems = []; let allSelected = []; @@ -1947,7 +2158,10 @@ const getSelectedItems = (isCategoryItem = false, selectParent = $(formElements. if (allSelected.length > 0) { Array.prototype.forEach.call(allSelected, (selected) => { if ($(selected).attr('name') !== 'catExpBox') { - if (selected.value && selectedItems.includes(selected.value) === false) { + if ( + selected.value && + selectedItems.includes(selected.value) === false + ) { selectedItems.push(selected.value); } } @@ -1957,9 +2171,18 @@ const getSelectedItems = (isCategoryItem = false, selectParent = $(formElements. }; // PythonのNumpyのhistgram関数相当のヒストグラム計算処理を実施 -function genHistLabelsCounts(arrayVals, localNumBins, localValMin, localValMax) { - const labelMin = !isEmpty(localValMin) ? localValMin : Math.min.apply(null, arrayVals); - const labelMax = !isEmpty(localValMax) ? localValMax : Math.max.apply(null, arrayVals); +function genHistLabelsCounts( + arrayVals, + localNumBins, + localValMin, + localValMax, +) { + const labelMin = !isEmpty(localValMin) + ? localValMin + : Math.min.apply(null, arrayVals); + const labelMax = !isEmpty(localValMax) + ? localValMax + : Math.max.apply(null, arrayVals); const histLabels = genHistLabels(labelMin, labelMax, localNumBins); const histCounts = genHistCounts(histLabels, arrayVals, labelMin, labelMax); @@ -1968,7 +2191,10 @@ function genHistLabelsCounts(arrayVals, localNumBins, localValMin, localValMax) histLabels.pop(); // histLabelsがヒストグラムのX軸、histCountsがヒストグラムのY軸 // 表示を合わせるために値を逆順にする - return {histLabels: histLabels.reverse(), histCounts: histCounts.reverse()}; + return { + histLabels: histLabels.reverse(), + histCounts: histCounts.reverse(), + }; } function genHistLabels(labelMin, labelMax, localNumBins) { @@ -2009,7 +2235,12 @@ function genHistCounts(histLabels, arrayVals, labelMin, labelMax) { } const histLabelMin = histLabels[j]; const histLabelMax = histLabels[j + 1]; - if (val !== null && val !== undefined && val >= histLabelMin && val < histLabelMax) { + if ( + val !== null && + val !== undefined && + val >= histLabelMin && + val < histLabelMax + ) { histCounts[j] += 1; } } @@ -2043,11 +2274,13 @@ const endProcMultiSelectOnChange = async (count, props) => { const checkedIds = []; const dataTypes = []; const dataTypeShownName = []; + const columnInfo = []; await procInfo.updateColumns(); const procColumns = procInfo.getColumns(); - const dataTypeTargets = props.showStrColumn ? CfgProcess_CONST.ALL_TYPES : CfgProcess_CONST.NUMERIC_TYPES; - + const dataTypeTargets = props.showStrColumn + ? CfgProcess_CONST.ALL_TYPES + : CfgProcess_CONST.NUMERIC_TYPES; // push cycle time columns first if (props.showStrColumn && !props.hideCTCol) { @@ -2058,7 +2291,8 @@ const endProcMultiSelectOnChange = async (count, props) => { vals.push(ctCol.name_en); names.push(ctCol.shown_name); dataTypes.push(ctCol.data_type); - dataTypeShownName.push(dataTypeShort(ctCol)) + dataTypeShownName.push(dataTypeShort(ctCol)); + columnInfo.push({ id: ctCol.id, columnType: ctCol.column_type }); } if (datetimeCols) { for (const dtCol of datetimeCols) { @@ -2066,7 +2300,11 @@ const endProcMultiSelectOnChange = async (count, props) => { vals.push(dtCol.name_en); names.push(dtCol.shown_name); dataTypes.push(dtCol.data_type); - dataTypeShownName.push(dataTypeShort(dtCol)) + dataTypeShownName.push(dataTypeShort(dtCol)); + columnInfo.push({ + id: dtCol.id, + columnType: dtCol.column_type, + }); } } } @@ -2076,29 +2314,53 @@ const endProcMultiSelectOnChange = async (count, props) => { if (col.is_get_date) { getDateColID = col.id; } - if (dataTypeTargets.includes(col.data_type) && !CfgProcess_CONST.CT_TYPES.includes(col.data_type)) { + if ( + dataTypeTargets.includes(col.data_type) && + !CfgProcess_CONST.CT_TYPES.includes(col.data_type) + ) { ids.push(col.id); vals.push(col.name_en); names.push(col.shown_name); // checkedIds.push(col.id); dataTypes.push(col.data_type); - dataTypeShownName.push(dataTypeShort(col)) + dataTypeShownName.push(dataTypeShort(col)); + columnInfo.push({ id: col.id, columnType: col.column_type }); } } // load machine multi checkbox to Condition Proc. if (ids) { const parentId = `end-proc-val-div-${count}`; - const availableColorVars = procColumns.filter(col => [ - DataTypes.STRING.name, DataTypes.INTEGER.name, DataTypes.TEXT.name - ].includes(col.data_type)); + const propIndex = + $('#end-proc-row') + .children() + .index($(`#end-proc-process-div-${count}-parent`).parent()) + 1; + const dataFilterSystemAllowCheck = masterDataFilterSystem + .filter( + (e) => + e.propTarget === processOrderForFilterCheck.all || + e.propTarget === propIndex.toString(), + ) + .map((e) => e.id); + const dataFilterSystem = columnInfo.filter((col) => + dataFilterSystemAllowCheck.includes(col.columnType), + ); + const availableColorVars = procColumns.filter((col) => + [ + DataTypes.STRING.name, + DataTypes.INTEGER.name, + DataTypes.TEXT.name, + ].includes(col.data_type), + ); const listGroupProps = { checkedIds, name: `GET02_VALS_SELECT${count}`, noFilter: false, itemNames: names, itemDataTypes: props.showDataType ? dataTypes : null, - itemDataTypeShownNames: props.showDataType ? dataTypeShownName : null, + itemDataTypeShownNames: props.showDataType + ? dataTypeShownName + : null, isRadio: !!props.radio, showCatExp: props.showCatExp, isRequired: props.isRequired, @@ -2119,14 +2381,17 @@ const endProcMultiSelectOnChange = async (count, props) => { judge: props.judge || false, shouldObjectiveIsTarget: props.shouldObjectiveIsTarget || false, disableSerialAsObjective: props.disableSerialAsObjective || false, + isColorRequired: props.isColorRequired || false, procId, + dataFilterSystem, }; addGroupListCheckboxWithSearch( parentId, - `end-proc-val-${count}`, '', + `end-proc-val-${count}`, + '', ids, vals, - listGroupProps + listGroupProps, ); } updateSelectedItems(); @@ -2136,17 +2401,23 @@ const endProcMultiSelectOnChange = async (count, props) => { checkIfProcessesAreLinked(); }; - // add end proc const addEndProcMultiSelect = (procIds, procVals, props) => { let count = 1; - const innerFunc = (onChangeCallbackFunc = null, onCloseCallbackFunc = null, onChangeCallbackDicParam = null, onCloseCallbackDicParam = null) => { + const innerFunc = ( + onChangeCallbackFunc = null, + onCloseCallbackFunc = null, + onChangeCallbackDicParam = null, + onCloseCallbackDicParam = null, + ) => { const itemList = []; for (let i = 0; i < procIds.length; i++) { const itemId = procIds[i]; const itemVal = procVals[i].shown_name; const itemEnVal = procVals[i].name_en; - itemList.push(``); + itemList.push( + ``, + ); } while (checkExistDataGenBtn('btn-add-end-proc', count)) { @@ -2184,7 +2455,7 @@ const addEndProcMultiSelect = (procIds, procVals, props) => { const eleNumber = e.currentTarget.id.match(/\d+$/)[0]; const isShowCTTime = $(formElements.showCT_Time).prop('checked'); if (isShowCTTime !== undefined && props.hideCTCol !== undefined) { - props.hideCTCol = isShowCTTime? !isShowCTTime: true; + props.hideCTCol = isShowCTTime ? !isShowCTTime : true; } endProcMultiSelectOnChange(eleNumber, props).then((r) => { if (onChangeCallbackFunc) { @@ -2198,13 +2469,16 @@ const addEndProcMultiSelect = (procIds, procVals, props) => { countTotalVariables(); }); - cardRemovalByClick('#end-proc-row div', onCloseCallbackFunc, onCloseCallbackDicParam); + cardRemovalByClick( + '#end-proc-row div', + onCloseCallbackFunc, + onCloseCallbackDicParam, + ); updateSelectedItems(); }; return innerFunc; }; - const getStratifiedVars = async (selectedEndProc) => { if (!selectedEndProc) { return; @@ -2240,26 +2514,38 @@ const scrollList2Top = () => { $('ul').scrollTop(0); }; -const updateTableRowNumber = (tableId = null, tableElement = null, tableBody = null) => { +const updateTableRowNumber = ( + tableId = null, + tableElement = null, + tableBody = null, +) => { // numbering rows in a table try { if (!isEmpty(tableElement)) { tableElement.find('tbody tr').each((rowIdx, row) => { - $(row).find('td.col-number').text(rowIdx + 1); + $(row) + .find('td.col-number') + .text(rowIdx + 1); }); return; } if (!isEmpty(tableId)) { $(`#${tableId} tbody tr`).each((rowIdx, row) => { - $(row).find('td.col-number').text(rowIdx + 1); + $(row) + .find('td.col-number') + .text(rowIdx + 1); }); return; } if (!isEmpty(tableBody)) { - $(tableBody).find('tr').each((rowIdx, row) => { - $(row).find('td.col-number').text(rowIdx + 1); - }); + $(tableBody) + .find('tr') + .each((rowIdx, row) => { + $(row) + .find('td.col-number') + .text(rowIdx + 1); + }); } } catch (e) { // @@ -2270,8 +2556,8 @@ const collapseFloatingList = (el) => { // collapse
      `; } } else if (i > k) { row += `
      { onmouseleave="clearOldChartTitles();" data-y-title="${chartXLabel}" data-x-title="${chartYLabel}"> -
      `; +
      `; } } row += '
      '; @@ -302,17 +337,43 @@ const multipleScatterPlot = (data, clearOnFlyFilter = true) => { // Histogram Chart $('.hist-item div').each((k, his) => { const hisChartID = $(his).attr('id'); + setTimeout(() => console.log($(his).width())); const cId = hisChartID.split('-'); const ypd = Number(cId[1]); - const plotData = sensors.filter(val => val.end_col_id === ypd)[0]; + const plotData = sensors.filter((val) => val.end_col_id === ypd)[0]; const scaleInfo = getScaleInfo(plotData, xScaleOption); const xrange = [scaleInfo['y-min'], scaleInfo['y-max']]; - const { xThreshold } = getThresholdData(cId, data, xScaleOption, yScaleOption); - + const { xThreshold } = getThresholdData( + cId, + data, + xScaleOption, + yScaleOption, + ); const chartLabel = $(his).parent().attr('data-x-title'); - + const labelFontSize = 10.5; const [histTrace, fmt] = genHistogramTrace(plotData, xScaleOption); - const histLayout = genHistogramLayout(xrange, false, fmt, isLargeOfSensors, chartLabel); + + const customChartLabel = isLargeOfSensors + ? chartLabel.split('|')[0] + : chartLabel; + const chartWidth = $('.plot-content').width() / sensors.length; + + // 70, 10 is number get by UI Testing by plotlyLayout margin (l, r, x) + const labelSpace = isLargeOfSensors ? 50 : 80; + const truncateLabel = truncateTextByWidth( + customChartLabel, + chartWidth - labelSpace, + labelFontSize, + ); + + const histLayout = genHistogramLayout( + xrange, + false, + fmt, + isLargeOfSensors, + truncateLabel, + labelFontSize, + ); const maxHistNum = Math.max(...scaleInfo.kde_data.hist_counts); const layoutWithThresholds = addHistogramThresholds( @@ -376,9 +437,12 @@ const multipleScatterPlot = (data, clearOnFlyFilter = true) => { const sctData = getScatterContourData(cId, scatterContourData); - const { - xThreshold, yThreshold, yRange, xRange, - } = getThresholdData(cId, data, xScaleOption, yScaleOption); + const { xThreshold, yThreshold, yRange, xRange } = getThresholdData( + cId, + data, + xScaleOption, + yScaleOption, + ); const cycleIDs = sctData.scatter_data.cycle_ids || []; const serials = sctData.scatter_data.serials || []; const datetime = sctData.scatter_data.datetime || []; @@ -392,9 +456,13 @@ const multipleScatterPlot = (data, clearOnFlyFilter = true) => { y: yThreshold, }, }; - const scatterTrace = genScatterOutlierTrace(sctData, showContourOption, - data.proc_name, cycleIDs, - options); + const scatterTrace = genScatterOutlierTrace( + sctData, + showContourOption, + data.proc_name, + cycleIDs, + options, + ); let sctTraces = [scatterTrace]; if (showContourOption) { const contourTrace = genContourTrace(sctData, options); @@ -402,9 +470,20 @@ const multipleScatterPlot = (data, clearOnFlyFilter = true) => { } const scatterData = sctData.scatter_data; - const {x_fmt, y_fmt} = scatterData; - let sctLayout = genScatterContourLayout(showColor, x_fmt || '', y_fmt || '', isLargeOfSensors); - sctLayout.shapes = genThresholds(xThreshold, yThreshold, {xaxis: 'x', yaxis: 'y'}, xRange, yRange); + const { x_fmt, y_fmt } = scatterData; + let sctLayout = genScatterContourLayout( + showColor, + x_fmt || '', + y_fmt || '', + isLargeOfSensors, + ); + sctLayout.shapes = genThresholds( + xThreshold, + yThreshold, + { xaxis: 'x', yaxis: 'y' }, + xRange, + yRange, + ); sctLayout = addAxisRange(sctLayout, xRange, yRange); sctLayout.xaxis.ticklen = 0; sctLayout.yaxis.ticklen = 0; @@ -415,9 +494,15 @@ const multipleScatterPlot = (data, clearOnFlyFilter = true) => { const dataPoint = data.points[0]; const xValue = applySignificantDigit(dataPoint.data.x[dpIndex]); const yValue = applySignificantDigit(dataPoint.data.y[dpIndex]); - const zValue = 'z' in dataPoint.data ? applySignificantDigit(dataPoint.data.z[dpIndex]) : null; + const zValue = + 'z' in dataPoint.data + ? applySignificantDigit(dataPoint.data.z[dpIndex]) + : null; const datetime = dataPoint.data.customdata.datetime[dpIndex]; - const serials = dataPoint.data.customdata.serials.map(serial => serial[dpIndex]) || []; + const serials = + dataPoint.data.customdata.serials.map( + (serial) => serial[dpIndex], + ) || []; const suffixLabel = dataPoint.data.customdata.suffix_label || ''; const thresholds = dataPoint.data.customdata.thresholds; showMSPDataTable( @@ -461,7 +546,11 @@ const resetGraphSetting = () => { formElements.showHeatmapInput.prop('checked', true); }; -const scatterTraceData = (formData, clearOnFlyFilter = false, autoUpdate = false) => { +const scatterTraceData = ( + formData, + clearOnFlyFilter = false, + autoUpdate = false, +) => { if (!checkDisableScatterBtn()) { loadingHide(); return; @@ -471,76 +560,88 @@ const scatterTraceData = (formData, clearOnFlyFilter = false, autoUpdate = false formData = collectFormDataMSP(clearOnFlyFilter, autoUpdate); } - showGraphCallApi('/ap/api/msp/plot', formData, REQUEST_TIMEOUT, async (res) => { - resultData = res; - // save global - graphStore.setTraceData(_.cloneDeep(res)); - - if (res.is_send_ga_off) { - showGAToastr(true); - } - // Hide loading screen - loading.addClass('hide'); - $('#plot-cards').empty(); - $('#showContour').show(); - - // check result and show toastr msg - if (isEmpty(res.array_plotdata)) { - showToastrAnomalGraph(); - } + showGraphCallApi( + '/ap/api/msp/plot', + formData, + REQUEST_TIMEOUT, + async (res) => { + resultData = res; + // save global + graphStore.setTraceData(_.cloneDeep(res)); + + if (res.is_send_ga_off) { + showGAToastr(true); + } + // Hide loading screen + loading.addClass('hide'); + $('#plot-cards').empty(); + $('#showContour').show(); + + // check result and show toastr msg + if (isEmpty(res.array_plotdata)) { + showToastrAnomalGraph(); + } - if (res.actual_record_number > SQL_LIMIT) { - showToastrMsg(i18n.SQLLimit); - } + if (res.actual_record_number > SQL_LIMIT) { + showToastrMsg(i18n.SQLLimit); + } - // show toastr to inform result was truncated upto 5000 - if (res.is_res_limited) { - showToastrMsg(i18n.traceResulLimited.split('BREAK_LINE').join('
      ')); - } + // show toastr to inform result was truncated upto 5000 + if (res.is_res_limited) { + showToastrMsg( + i18n.traceResulLimited.split('BREAK_LINE').join('
      '), + ); + } - if (res.as_heatmap_matrix) { - showHeatmap(res.heatmap_matrix); - $(formElements.plotCardId).addClass('align-items-center'); - $(window).off('resize', handleResizeWindow); - $(window).on('resize', handleResizeWindow); - } else { - $(window).off('resize', handleResizeWindow); - multipleScatterPlot(res, clearOnFlyFilter); - $(formElements.plotCardId).removeClass('align-items-center'); - } + if (res.as_heatmap_matrix) { + showHeatmap(res.heatmap_matrix); + $(formElements.plotCardId).addClass('align-items-center'); + $(window).off('resize', handleResizeWindow); + $(window).on('resize', handleResizeWindow); + } else { + $(window).off('resize', handleResizeWindow); + multipleScatterPlot(res, clearOnFlyFilter); + $(formElements.plotCardId).removeClass('align-items-center'); + } - if (clearOnFlyFilter) { - $('html, body').animate({ - scrollTop: $(formElements.plotCardId).offset().top, - }, 1500); - } + if (clearOnFlyFilter) { + $('html, body').animate( + { + scrollTop: getOffsetTopDisplayGraph( + '#graph-settings-area', + ), + }, + 1500, + ); + } - // show info table - showInfoTable(res); + // show info table + showInfoTable(res); - // render cat, category label filer modal - fillDataToFilterModal(res.filter_on_demand, () => { - scatterTraceData(null, false, false); - }); + // render cat, category label filer modal + fillDataToFilterModal(res.filter_on_demand, () => { + scatterTraceData(null, false, false); + }); - setPollingData(formData, scatterTraceData, [formData, false, true]); + setPollingData(formData, scatterTraceData, [formData, false, true]); - if (res.is_show_contour_only) { - showToastrMsg(i18n.hideContourMsg); - } - }); + if (res.is_show_contour_only) { + showToastrMsg(i18n.hideContourMsg); + } + }, + ); $('#plot-cards').empty(); }; let timerVar; const handleResizeWindow = () => { - if (!resultData.as_heatmap_matrix) return; + if (!resultData.as_heatmap_matrix) return; - clearTimeout(timerVar); - timerVar = setTimeout(() => { - showHeatmap(resultData.heatmap_matrix); - }, 500); + clearTimeout(timerVar); + timerVar = setTimeout(() => { + showHeatmap(resultData.heatmap_matrix); + }, 500); }; // get correlation between 2 variables @@ -560,15 +661,25 @@ const getThresholdData = (cId, data, xScale, yScale) => { const rowId = Number(cId[2]); const colId = Number(cId[1]); - const rowData = data.array_plotdata.filter(val => val.end_col_id === rowId)[0]; - const colData = data.array_plotdata.filter(val => val.end_col_id === colId)[0]; + const rowData = data.array_plotdata.filter( + (val) => val.end_col_id === rowId, + )[0]; + const colData = data.array_plotdata.filter( + (val) => val.end_col_id === colId, + )[0]; const iChartInfos = rowData.chart_infos || []; const iChartInfosOrg = rowData.chart_infos_org || []; const kChartInfos = colData.chart_infos || []; const kChartInfosOrg = colData.chart_infos_org || []; - const [iChartInfo, _1] = chooseLatestThresholds(iChartInfos, iChartInfosOrg); - const [kChartInfo, _2] = chooseLatestThresholds(kChartInfos, kChartInfosOrg); + const [iChartInfo, _1] = chooseLatestThresholds( + iChartInfos, + iChartInfosOrg, + ); + const [kChartInfo, _2] = chooseLatestThresholds( + kChartInfos, + kChartInfosOrg, + ); const xScaleInfo = getScaleInfo(rowData, xScale); const yScaleInfo = getScaleInfo(colData, yScale); @@ -632,7 +743,8 @@ const showMSPHeatmap = () => { const sctChartID = $(sct).attr('id'); if (sctChartID) { const sctPlot = document.getElementById(sctChartID); - const bgrColor = $(sct).attr(CONST.BGR_COLOR_ATTR) || CONST.BGR_COLOR; + const bgrColor = + $(sct).attr(CONST.BGR_COLOR_ATTR) || CONST.BGR_COLOR; const paperBgr = !showHeatmap ? CONST.BGR_COLOR : bgrColor; Plotly.relayout(sctPlot, { paper_bgcolor: paperBgr, @@ -641,7 +753,8 @@ const showMSPHeatmap = () => { }); // update correlation background $('.coef-item').each((_k, corrDom) => { - const bgrColor = $(corrDom).attr(CONST.BGR_COLOR_ATTR) || CONST.BGR_COLOR; + const bgrColor = + $(corrDom).attr(CONST.BGR_COLOR_ATTR) || CONST.BGR_COLOR; const paperBgr = !showHeatmap ? CONST.BGR_COLOR : bgrColor; $(corrDom).css(CONST.BGR_COLOR_KEY, paperBgr); }); @@ -650,7 +763,7 @@ const showMSPHeatmap = () => { }; const handleChangeScaleOption = (type = 'x', e) => { - if (resultData.as_heatmap_matrix) return; + if (resultData.as_heatmap_matrix) return; if (type === 'x') { xScaleOption = $(e).val(); } else { @@ -670,7 +783,7 @@ const handleExportData = (type) => { showGraphAndDumpData(type, dumpData); }; -const showChartTitle = (chartDOM, showTitle=true) => { +const showChartTitle = (chartDOM, showTitle = true) => { if (!showTitle) { return; } @@ -695,4 +808,4 @@ const clearOldChartTitles = () => { // reset title $('#x-title').text(''); $('#y-title').text(''); -}; \ No newline at end of file +}; diff --git a/ap/static/parallel_plot/css/parallel_plot.css b/ap/static/parallel_plot/css/parallel_plot.css index 70ba333..44ada45 100644 --- a/ap/static/parallel_plot/css/parallel_plot.css +++ b/ap/static/parallel_plot/css/parallel_plot.css @@ -45,7 +45,7 @@ canvas { /* Clear floats after the columns */ .chart-row:after { - content: ""; + content: ''; display: table; clear: both; } @@ -59,7 +59,7 @@ canvas { transform: translate(-50%, -50%); } -.coef-text{ +.coef-text { font-size: 18pt; text-align: center; } @@ -72,10 +72,9 @@ canvas { background-color: #222222; padding: 5px; border-radius: 3px; - } -.sort-corr-setting input{ +.sort-corr-setting input { background-color: #353535; width: 150px; float: right; @@ -117,4 +116,22 @@ span.text-option { text.axis-title.fineSelect { transform: translate(0px, -45px); -} \ No newline at end of file +} + +/*Table data selected*/ +#tableViewDataSelected tbody tr > td:first-child { + text-align: center; +} + +#tableDataSelectedArea table { + margin-bottom: 1px; + border-collapse: collapse; +} + +#tableDataSelectedArea table td { + padding: 8px; +} + +.hidden-important { + display: none !important; +} diff --git a/ap/static/parallel_plot/js/parallel_plot.js b/ap/static/parallel_plot/js/parallel_plot.js index 4279c82..2045470 100644 --- a/ap/static/parallel_plot/js/parallel_plot.js +++ b/ap/static/parallel_plot/js/parallel_plot.js @@ -1,8 +1,3 @@ -/* eslint-disable no-restricted-syntax */ -/* eslint-disable guard-for-in */ -/* eslint-disable no-unused-vars */ -/* eslint-disable no-undef */ -/* eslint-disable no-use-before-define */ const REQUEST_TIMEOUT = setRequestTimeOut(); let tabID = null; @@ -25,6 +20,8 @@ let latestDimensionInChart; let changeVariableOnly = false; let needUpdateDimColor = false; +let onlyExportSelectedData = false; + let pcpPlot = {}; const formElements = { @@ -42,7 +39,18 @@ const formElements = { VAL_SELECTED: 'GET02_VALS_SELECT', fineSelectEl: $('input#findSelect'), showVar: $('select[name=show-var]'), - showCT_Time: 'input#show-ct-time' + yScaleOption: $('select[name=yScaleOption]'), + showCT_Time: 'input#show-ct-time', +}; + +const tableSelectedDataElems = { + cardContainer: '#pcpCardDataSelected', + tableHeader: '#tableViewDataSelected thead', + tableHeaderTr: '#tableViewDataSelected thead tr', + tableBody: '#tableViewDataSelected tbody', + tableHeaderContent: '#tableViewDataSelected thead td', + tableBodyTr: '#tableViewDataSelected tbody tr', + tableBodyContent: '#tableViewDataSelected tbody tr td', }; const i18n = { @@ -70,7 +78,7 @@ const paracordsSetting = { REAL: 'real', CATEGORY: 'category', NUMBER: 'number', - CATEGORIZED: 'categorized_real' + CATEGORIZED: 'categorized_real', }, corrOrdering: { orderBy: ['correlation', 'top'], @@ -83,7 +91,7 @@ const paracordsSetting = { setting: 'setting', process: 'process', correlation: 'correlation', - } + }, }; $(() => { @@ -100,7 +108,7 @@ $(() => { const endProcs = genProcessDropdownData(procConfigs); // add first end process - // add first end process + // add first end process const endProcItem = addEndProcMultiSelect(endProcs.ids, endProcs.names, { showDataType: true, showStrColumn: true, @@ -113,13 +121,19 @@ $(() => { endProcItem(); // add first condition process - const condProcItem = addCondProc(endProcs.ids, endProcs.names, '', formElements.formID, 'btn-add-cond-proc'); + const condProcItem = addCondProc( + endProcs.ids, + endProcs.names, + '', + formElements.formID, + 'btn-add-cond-proc', + ); condProcItem(); // click even of condition proc add button $(formElements.btnAddCondProc).click(() => { - condProcItem(); - addAttributeToElement(); + condProcItem(); + addAttributeToElement(); }); // click even of end proc add button @@ -164,7 +178,10 @@ const showSettingMenu = (menu, domEvent) => { }); }; -const parallelTraceDataWithDBChecking = (action = 'TRACE-DATA', clearOnFlyFilter = false) => { +const parallelTraceDataWithDBChecking = ( + action = 'TRACE-DATA', + clearOnFlyFilter = false, +) => { requestStartedAt = performance.now(); if (clearOnFlyFilter) { const isValid = checkValidations({ max: MAX_NUMBER_OF_SENSOR }); @@ -203,7 +220,9 @@ const mergeTargetProc = (formData) => { // find duplicate process from end_proc list endProcID.forEach((v, k) => { - const selectedValue = formData.getAll(formElements.VAL_SELECTED + endProcSuf[k]).filter(x => x !== 'All'); + const selectedValue = formData + .getAll(formElements.VAL_SELECTED + endProcSuf[k]) + .filter((x) => x !== 'All'); const selectedObj = {}; if (!uniqueProcs.includes(v)) { uniqueProcs.push(v); @@ -219,7 +238,9 @@ const mergeTargetProc = (formData) => { Object.entries(valSelected).forEach(([k, v]) => { formData.delete(`${formElements.VAL_SELECTED}${k}`); if (v.length) { - v.map(selection => formData.append(`${formElements.VAL_SELECTED}${k}`, selection)); + v.map((selection) => + formData.append(`${formElements.VAL_SELECTED}${k}`, selection), + ); } else { formData.delete(`${formElements.END_PROC}${k}`); } @@ -233,7 +254,10 @@ const mergeTargetProc = (formData) => { // append objective var for new PCP const objectiveVar = formData.get('objectiveVar'); if (objectiveVar) { - const sensorValName = $(`#objectiveVar-${objectiveVar}`).closest('.row').find('input:eq(0)').attr('name'); + const sensorValName = $(`#objectiveVar-${objectiveVar}`) + .closest('.row') + .find('input:eq(0)') + .attr('name'); const allValsSelected = formData.getAll(sensorValName); if (sensorValName && !allValsSelected.includes(sensorValName)) { formData.append(sensorValName, objectiveVar); @@ -242,7 +266,7 @@ const mergeTargetProc = (formData) => { return formData; }; -const resetSetting = (isRedirectFromJump=false) => { +const resetSetting = (isRedirectFromJump = false) => { // reset setting variables formElements.showVar.val('all'); const orderValue = paracordsSetting.orderOptions.correlation; @@ -251,6 +275,7 @@ const resetSetting = (isRedirectFromJump=false) => { // default is top 8 variables $(`input[name='sort_option'][value=top]`).prop('checked', true); } + $(formElements.yScaleOption).val(scaleOptionConst.AUTO); formElements.fineSelectEl.prop('checked', false); }; @@ -277,63 +302,83 @@ const getSensorTypes = (sensorDat) => { return paracordsSetting.showVariables.ALL; }; - const collectFormDataPCP = (clearOnFlyFilter) => { let formData = collectFormData(formElements.formID); if (clearOnFlyFilter) { formData = mergeTargetProc(formData); formData = genDatetimeRange(formData); - formData.set('fine_select', '0') + formData.set('fine_select', '0'); lastUsedFormData = formData; } else { formData = lastUsedFormData; formData = transformCatFilterParams(formData); const fineSelect = formElements.fineSelectEl.is(':checked') ? 1 : 0; - formData.set('fine_select', fineSelect) + formData.set('fine_select', fineSelect); } return formData; }; -const showParallelGraph = (clearOnFlyFilter = false, isRedirectFromJump=false) => { +const showParallelGraph = ( + clearOnFlyFilter = false, + isRedirectFromJump = false, +) => { const formData = collectFormDataPCP(clearOnFlyFilter); - showGraphCallApi('/ap/api/pcp/index', formData, REQUEST_TIMEOUT, async (res) => { - if (res.is_send_ga_off) { - showGAToastr(true); - } - - paracordTraces = res; - // store trace result - graphStore.setTraceData(_.cloneDeep(res)); - - // clear targetSensorIndex - clearTargetTmp(); + showGraphCallApi( + '/ap/api/pcp/index', + formData, + REQUEST_TIMEOUT, + async (res) => { + if (res.is_send_ga_off) { + showGAToastr(true); + } - // reset setting variables - if (clearOnFlyFilter) { - resetSetting(isRedirectFromJump); - } + paracordTraces = res; + // store trace result + graphStore.setTraceData(_.cloneDeep(res)); - const sensorTypes = getSensorTypes(res.array_plotdata); - // set sensor type default - $('select[name=show-var]').val(sensorTypes); - let defaultShowOrder = - paracordsSetting.orderOptions.correlation; - // set order default value for paracat only - if (sensorTypes === paracordsSetting.showVariables.CATEGORY) { - defaultShowOrder = paracordsSetting.orderOptions.process; - } - // sort graphs - if (latestSortColIds.length) { - res.ARRAY_FORMVAL = sortGraphs(res.ARRAY_FORMVAL, 'GET02_VALS_SELECT', latestSortColIds); - res.array_plotdata = sortGraphs(res.array_plotdata, 'end_col_id', latestSortColIds); - } - showParacords(res, {showVars: sensorTypes, orderBy: defaultShowOrder}, isRedirectFromJump, clearOnFlyFilter); + // clear targetSensorIndex + clearTargetTmp(); - // show info table - showInfoTable(res); + // reset setting variables + if (clearOnFlyFilter) { + resetSetting(isRedirectFromJump); + } - }); + const sensorTypes = getSensorTypes(res.array_plotdata); + // set sensor type default + $('select[name=show-var]').val(sensorTypes); + let defaultShowOrder = paracordsSetting.orderOptions.correlation; + // set order default value for paracat only + if (sensorTypes === paracordsSetting.showVariables.CATEGORY) { + defaultShowOrder = paracordsSetting.orderOptions.process; + } + // sort graphs + if (latestSortColIds.length) { + res.ARRAY_FORMVAL = sortGraphs( + res.ARRAY_FORMVAL, + 'GET02_VALS_SELECT', + latestSortColIds, + ); + res.array_plotdata = sortGraphs( + res.array_plotdata, + 'end_col_id', + latestSortColIds, + ); + } + showParacords( + res, + { showVars: sensorTypes, orderBy: defaultShowOrder }, + isRedirectFromJump, + clearOnFlyFilter, + null, + true, + ); + + // show info table + showInfoTable(res); + }, + ); }; const hideMenu = () => { @@ -391,10 +436,17 @@ const getSettingOptions = () => { const showVariable = $("select[name='show-var']").val(); const showOrder = $("input[name='sort_by']:checked").val(); const sortedOptions = $("input[name='sort_option']:checked").val(); + const yScaleOption = $("select[name='yScaleOption']").val(); const isSortedByCorr = sortedOptions === CONST.CORR; const showOrderFrom = $("input[name='corr_value']").val(); - const showMaxVars = showOrder === CONST.CORR ? Number($("input[name='max_vars']").val()) : undefined; - const showTopVars = showOrder === CONST.CORR ? Number($("input[name='top_vars']").val()) : undefined; + const showMaxVars = + showOrder === CONST.CORR + ? Number($("input[name='max_vars']").val()) + : undefined; + const showTopVars = + showOrder === CONST.CORR + ? Number($("input[name='top_vars']").val()) + : undefined; const fineSelect = formElements.fineSelectEl.is(':checked'); return { showVars: showVariable, @@ -405,42 +457,49 @@ const getSettingOptions = () => { varNum: showMaxVars, top: showTopVars, }, + yScaleOption: yScaleOption, fineSelect: fineSelect, }; }; const setSettingOptions = (showVariable = false, showOrder = false) => { if (showVariable) { - $(`input[name='show-var'][value='${showVariable}']`).prop('checked', true); + $(`input[name='show-var'][value='${showVariable}']`).prop( + 'checked', + true, + ); } if (showOrder) { $(`input[name='sort_by'][value='${showOrder}']`).prop('checked', true); - const orderingName = $('input[name=sort_by]:checked').closest('.form-check').find('span:first').text(); + const orderingName = $('input[name=sort_by]:checked') + .closest('.form-check') + .find('span:first') + .text(); // update ordering name $('#ordering-name').text(orderingName); } }; -const handleSelectMenuItem = (e, updatePosition=false) => { +const handleSelectMenuItem = (e, updatePosition = false) => { // get setting options const settings = getSettingOptions(); // bind target sensor const selectedDim = $(e).attr('data-target-dim') || null; if (selectedDim) { - const [, dim] = selectedDim.split('-').map(i => Number(i)); + const [, dim] = selectedDim.split('-').map((i) => Number(i)); let selectedCol = Number(dim); if (updatePosition) { const options = { - explainDim: selectedCol + explainDim: selectedCol, }; paracordTraces.options = options; // update pcp data showParacords(paracordTraces, settings, false, false, options); } else { const options = { - objectiveDim: selectedCol + objectiveDim: selectedCol, }; paracordTraces.options = options; showParacords(paracordTraces, settings, false, true, options); @@ -450,41 +509,64 @@ const handleSelectMenuItem = (e, updatePosition=false) => { hideMenu(); }; +const onChangeYScale = (selection) => { + showParacordWithSettings(true); + const settings = getSettingOptions(); + showParacords( + paracordTraces, + settings, + false, + false, + paracordTraces.options, + ); +}; + const onChangeFineSelect = () => { const settings = getSettingOptions(); showParacordWithSettings(true); - showParacords(paracordTraces, settings, false, false, paracordTraces.options); -} + showParacords( + paracordTraces, + settings, + false, + false, + paracordTraces.options, + ); +}; const callToBackEndAPI = async (filter) => { loadingShow(); const formData = collectFormDataPCP(false); - showGraphCallApi('/ap/api/pcp/index', formData, REQUEST_TIMEOUT, async (res) => { - paracordTraces = res; - const settings = getSettingOptions(); - needUpdateDimColor = true; - graphStore.setTraceData(_.cloneDeep(res)); - - // clear old target variables - if (settings.showVariable === 'category') { - // clearTargetTmp(); - const previousEndDim = getDPVFromLatestCatDim(); - if (previousEndDim) { - updateTargetDim(previousEndDim); + showGraphCallApi( + '/ap/api/pcp/index', + formData, + REQUEST_TIMEOUT, + async (res) => { + paracordTraces = res; + const settings = getSettingOptions(); + needUpdateDimColor = true; + graphStore.setTraceData(_.cloneDeep(res)); + + // clear old target variables + if (settings.showVariable === 'category') { + // clearTargetTmp(); + const previousEndDim = getDPVFromLatestCatDim(); + if (previousEndDim) { + updateTargetDim(previousEndDim); + } } - } - if (paracordTraces) { - // do not use default corr threshold - settings.useCorrDefaultThreshold = false; - showParacords(paracordTraces, settings, false, filter); - $('#updateParacords').addClass('hide'); - } + if (paracordTraces) { + // do not use default corr threshold + settings.useCorrDefaultThreshold = false; + showParacords(paracordTraces, settings, false, filter); + $('#updateParacords').addClass('hide'); + } - removeOutlierOptionChanged = false; - removeOutliers = 0; - }); + removeOutlierOptionChanged = false; + removeOutliers = 0; + }, + ); }; const showParacordWithSettings = async (filter = false) => { @@ -514,15 +596,18 @@ const changeObjectiveVar = (objectiveID) => { const getEndCatDimFromChart = () => { // paracat only const getPosition = (translateVal) => { - const [x,] = translateVal.replace('translate', '') + const [x] = translateVal + .replace('translate', '') .replace('(', '') .replace(')', '') .split(',') - .map(val => Number(val)) + .map((val) => Number(val)); return x; - } ; - const dimensions = $('g.dimension') - let dimPosition = dimensions.map((i, dim) => [[getPosition($(dim).attr('transform')), i]]); + }; + const dimensions = $('g.dimension'); + let dimPosition = dimensions.map((i, dim) => [ + [getPosition($(dim).attr('transform')), i], + ]); dimPosition.sort((a, b) => b[0] - a[0]); if (dimPosition.length) { // last dim at first position of list @@ -531,14 +616,15 @@ const getEndCatDimFromChart = () => { return $(lastDim); } return null; - }; -const changeDimColor = (objective, isParacat=false) => { +const changeDimColor = (objective, isParacat = false) => { const allDim = $('#paracord-plot g.y-axis'); const lastDim = $(`#paracord-plot g.y-axis:eq(${allDim.length - 1})`); if (objective.name) { - const sameProcDim = $('#paracord-plot g.y-axis').find(`.axis-title[data-dpv^=${objective.procId}]`); + const sameProcDim = $('#paracord-plot g.y-axis').find( + `.axis-title[data-dpv^=${objective.procId}]`, + ); const tspanLabel = '.axis-title tspan.line>tspan'; // reset all dim color allDim.find(tspanLabel).css('fill', CONST.WHITE); @@ -557,11 +643,16 @@ const changeDimColor = (objective, isParacat=false) => { const endDim = getEndCatDimFromChart(); // assign blue for same process columns if (objective.name) { - allCatDim.filter((i, v) => $(v).data('dpv') === objective.name) + allCatDim + .filter((i, v) => $(v).data('dpv') === objective.name) .css('fill', CONST.YELLOW); - allCatDim.filter((i, v) => - $(v).data('dpv').split('-')[0] === String(objective.procId) && - $(v).data('dpv') !== objective.name) + allCatDim + .filter( + (i, v) => + $(v).data('dpv').split('-')[0] === + String(objective.procId) && + $(v).data('dpv') !== objective.name, + ) .css('fill', CONST.LIGHT_BLUE); if (needUpdateDimColor) { if (endDim && endDim.length) { @@ -576,28 +667,31 @@ const changeDimColor = (objective, isParacat=false) => { needUpdateDimColor = false; }; -const updateTargetDim = (targetDPV, changeColor=false) => { +const updateTargetDim = (targetDPV, changeColor = false) => { if (paracordTraces) { // update on-demand-filter modal content const dimPositions = getDimPositionFromGraph(); if (dimPositions && latestDimensionInChart) { - const {category} = paracordTraces.filter_on_demand; + const { category } = paracordTraces.filter_on_demand; const dimAfterUpdate = updateDimPosition(dimPositions); const odfData = updateCategoryOrdering(category, dimAfterUpdate); const filterData = { ...paracordTraces.filter_on_demand, category: odfData, - } + }; fillDataToFilterModal(filterData, () => { showParacordWithSettings(true); }); } - const newTargetDPV = targetDPV.split('-').map(i => Number(i)); + const newTargetDPV = targetDPV.split('-').map((i) => Number(i)); clearTargetTmp(); // re-assign target dimension information paracordTraces.array_plotdata.forEach((dat, idx) => { - if (dat.col_detail.col_id === newTargetDPV[1] && dat.col_detail.proc_id === newTargetDPV[0]) { + if ( + dat.col_detail.col_id === newTargetDPV[1] && + dat.col_detail.proc_id === newTargetDPV[0] + ) { targetDim = newTargetDPV; targetSensorIndex = idx; targetSensorDat = dat.array_y; @@ -615,7 +709,10 @@ const getDPVFromLatestCatDim = () => { const dimensions = $('g.dimension'); const transList = []; dimensions.each((idx, dim) => { - const transDats = $(dim).attr('transform').match(/\(([^)]+)\)/)[1].split(','); + const transDats = $(dim) + .attr('transform') + .match(/\(([^)]+)\)/)[1] + .split(','); const transDat = Number(transDats[0]) || 0; transList.push(transDat); const [, maxTrans] = findMinMax([...transList, transDat]); @@ -629,8 +726,16 @@ const getDPVFromLatestCatDim = () => { return latestDim; }; -const showParacords = (dat, settings=undefined, isRedirectFromJump=false, clearOnFlyFilter=false, options=null) => { +const showParacords = ( + dat, + settings = undefined, + isRedirectFromJump = false, + clearOnFlyFilter = false, + options = null, + isReturnToDefaultOrderingParams = false, +) => { $('#paracord-plot').html(''); + clearTableDataSelected(); const showFilterClass = 'show-detail click-only'; // hide setting as default @@ -650,7 +755,7 @@ const showParacords = (dat, settings=undefined, isRedirectFromJump=false, clearO } } if (options && options.explainDim) { - if (!pcpPlot.explain || (options.explainDim !== pcpPlot.explain.id)) { + if (!pcpPlot.explain || options.explainDim !== pcpPlot.explain.id) { pcpPlot.setObjective(options.explainDim, true); } } @@ -659,37 +764,49 @@ const showParacords = (dat, settings=undefined, isRedirectFromJump=false, clearO setSettingOptions(pcpPlot.settings.showVars, pcpPlot.settings.orderBy); // const dimensions = pcp.data; - pcpPlot.show(); + pcpPlot.show(isReturnToDefaultOrderingParams); getSelectedValues(); - // $('#paracord-plot').show(); - $('html, body').animate({ - scrollTop: $('#sctr-card').offset().top, - }, 500); + $('html, body').animate( + { + scrollTop: getOffsetTopDisplayGraph('#sctr-card'), + }, + 500, + ); const plotDat = dat.array_plotdata; // if showVar = 'category only' and - const categoryOnly = plotDat.filter((data) => data.col_detail.is_category).length === plotDat.length; - const isShowMsg = pcpPlot.dimensions.length > 0 && !categoryOnly && changeVariableOnly; - if ((pcpPlot.settings.showVars === ParallelProps.showVariables.CATEGORY) && - isShowMsg) { + const categoryOnly = + plotDat.filter((data) => data.col_detail.is_category).length === + plotDat.length; + const isShowMsg = + pcpPlot.dimensions.length > 0 && !categoryOnly && changeVariableOnly; + if ( + pcpPlot.settings.showVars === ParallelProps.showVariables.CATEGORY && + isShowMsg + ) { const msgContent = $('#i18nRemoveRealInParcats').text(); showToastrMsg(msgContent); changeVariableOnly = false; } - setTimeout(()=> { + setTimeout(() => { loadingHide(); - $('text.dimlabel[data-dpv]:not([is-categorize])').addClass(showFilterClass); + $('text.dimlabel[data-dpv]:not([is-categorize])').addClass( + showFilterClass, + ); $('#paracord-plot').scrollLeft(1000); // update category position of on-demand-filter same as dimension - const odfData = updateCategoryOrdering(dat.filter_on_demand.category, pcpPlot.dimensions); + const odfData = updateCategoryOrdering( + dat.filter_on_demand.category, + pcpPlot.dimensions, + ); const filterData = { ...dat.filter_on_demand, category: odfData, - } + }; fillDataToFilterModal(filterData, () => { showParacordWithSettings(true); }); @@ -703,8 +820,12 @@ const showParacords = (dat, settings=undefined, isRedirectFromJump=false, clearO }, 1000); }; -const propComparator = propName => (a, b) => (Math.abs(a[propName]) === Math.abs(b[propName]) - ? 0 : Math.abs(a[propName]) < Math.abs(b[propName]) ? -1 : 1); +const propComparator = (propName) => (a, b) => + Math.abs(a[propName]) === Math.abs(b[propName]) + ? 0 + : Math.abs(a[propName]) < Math.abs(b[propName]) + ? -1 + : 1; const updateParacords = (dimensionID) => { if (!paracordTraces) { @@ -712,15 +833,29 @@ const updateParacords = (dimensionID) => { } const plotData = paracordTraces.array_plotdata; let targetDim = plotData[plotData.length - 1]; - const explainDim = plotData.filter(dim => String(dim.end_col_id) == String(dimensionID)); - const pcpData = plotData.filter(dim => ![ - String(dimensionID), - String(targetDim.end_col_id) - ].includes(String(dim.end_col_id))); + const explainDim = plotData.filter( + (dim) => String(dim.end_col_id) == String(dimensionID), + ); + const pcpData = plotData.filter( + (dim) => + ![String(dimensionID), String(targetDim.end_col_id)].includes( + String(dim.end_col_id), + ), + ); // update pcp data paracordTraces.array_plotdata = [...pcpData, ...explainDim, targetDim]; }; const changeShowVariableByType = (selection) => { + // hide scale y when selection is CATEGORY + if ( + selection.value === paracordsSetting.showVariables.CATEGORY || + selection.value === paracordsSetting.showVariables.CATEGORIZED + ) { + $(formElements.yScaleOption).parent().addClass('hidden-important'); + } else { + $(formElements.yScaleOption).parent().removeClass('hidden-important'); + } + changeVariableOnly = true; needUpdateDimColor = true; let propOption = false; @@ -732,7 +867,10 @@ const changeShowVariableByType = (selection) => { $('input[name=sort_by][value=setting]').prop('checked', true); } } - $('input[type=radio][name=sort_by][value=correlation]').prop('disabled', propOption); + $('input[type=radio][name=sort_by][value=correlation]').prop( + 'disabled', + propOption, + ); $('input[type=number][name=corr_value]').prop('disabled', propOption); loading.show(); @@ -743,28 +881,35 @@ const changeShowVariableByType = (selection) => { }, 500); }; -const filterByShowVarType = (plotData, showVar) => plotData.filter((data) => { - if (showVar === paracordsSetting.showVariables.ALL) { - return true; - } - - if (showVar === paracordsSetting.showVariables.NUMBER) { - return data.col_detail.data_type === DataTypes.REAL.name || data.col_detail.data_type === DataTypes.INTEGER.name; - } - - if (showVar === paracordsSetting.showVariables.CATEGORY) { - return data.col_detail.is_category === true; - } - - if (showVar === paracordsSetting.showVariables.REAL) { - return data.col_detail.data_type === DataTypes.REAL.name; - } +const filterByShowVarType = (plotData, showVar) => + plotData.filter((data) => { + if (showVar === paracordsSetting.showVariables.ALL) { + return true; + } - if (showVar === paracordsSetting.showVariables.CATEGORIZED) { - return [DataTypes.INTEGER.name, DataTypes.REAL.name].includes(data.col_detail.data_type) || - data.col_detail.is_category === true; - } -}); + if (showVar === paracordsSetting.showVariables.NUMBER) { + return ( + data.col_detail.data_type === DataTypes.REAL.name || + data.col_detail.data_type === DataTypes.INTEGER.name + ); + } + + if (showVar === paracordsSetting.showVariables.CATEGORY) { + return data.col_detail.is_category === true; + } + + if (showVar === paracordsSetting.showVariables.REAL) { + return data.col_detail.data_type === DataTypes.REAL.name; + } + + if (showVar === paracordsSetting.showVariables.CATEGORIZED) { + return ( + [DataTypes.INTEGER.name, DataTypes.REAL.name].includes( + data.col_detail.data_type, + ) || data.col_detail.is_category === true + ); + } + }); const orderingEventHandler = () => { $('input[data-action=reload]').on('change', (e) => { @@ -772,35 +917,47 @@ const orderingEventHandler = () => { const targetVal = isSubInput ? e.target.name : e.target.value; const sortBy = $('input[name=sort_by]:checked').val(); const corrOrderBy = $('input[name=sort_option]:checked').val(); - if (!paracordsSetting.corrOrdering.all.includes(targetVal) || (sortBy === CONST.CORR && !corrOrderBy)) { + if ( + !paracordsSetting.corrOrdering.all.includes(targetVal) || + (sortBy === CONST.CORR && !corrOrderBy) + ) { // reset before change $('input[name=sort_option]').prop('checked', false); if (sortBy === CONST.CORR) { - $('input[name=sort_option][value=top]') - .prop('checked', true); + $('input[name=sort_option][value=top]').prop('checked', true); } } else if (sortBy !== CONST.CORR) { $(`input[name=sort_by][value=${CONST.CORR}]`).prop('checked', true); } // sub input - if (isSubInput && corrOrderBy !== CONST.CORR - && paracordsSetting.corrOrdering.corrValue.includes(targetVal)) { + if ( + isSubInput && + corrOrderBy !== CONST.CORR && + paracordsSetting.corrOrdering.corrValue.includes(targetVal) + ) { // reset to corr order - $('input[name=sort_option][value=correlation]') - .prop('checked', true); + $('input[name=sort_option][value=correlation]').prop( + 'checked', + true, + ); } - if (isSubInput && corrOrderBy === CONST.CORR - && paracordsSetting.corrOrdering.orderLim.includes(targetVal)) { + if ( + isSubInput && + corrOrderBy === CONST.CORR && + paracordsSetting.corrOrdering.orderLim.includes(targetVal) + ) { // reset to top variable limit - $('input[name=sort_option][value=top]') - .prop('checked', true); + $('input[name=sort_option][value=top]').prop('checked', true); } - - const orderingName = $('input[name=sort_by]:checked').closest('.form-check').find('span:first').text(); + + const orderingName = $('input[name=sort_by]:checked') + .closest('.form-check') + .find('span:first') + .text(); // update ordering name $('#ordering-name').text(orderingName); - + // update chart by settings loading.show(); @@ -821,17 +978,29 @@ const orderingEventHandler = () => { const dumpData = (type) => { const formData = lastUsedFormData || collectFormDataPCP(true); - formData.set('constraint_range', JSON.stringify(pcpPlot.selectedConstraintRange)); + formData.set( + 'constraint_range', + JSON.stringify(pcpPlot.selectedConstraintRange), + ); + formData.set(CONST.ONLY_EXPORT_DATA_SELECTED, onlyExportSelectedData); + if (onlyExportSelectedData) { + formData.set('export_from', 'plot'); + } handleExportDataCommon(type, formData, '/ap/api/pcp/data_export'); }; -const handleExportData = (type) => { +const handleExportData = (type, exportDataSelected = false) => { + onlyExportSelectedData = exportDataSelected; showGraphAndDumpData(type, dumpData); }; -const getObjectiveDim = (asArray=false) => { - const endRealDim = $('#paracord-plot g.y-axis:eq(-1)').find('text.axis-title').data('dpv'); - const endcatDim = $('#paracord-plot g.dimension:eq(-1)').find('.dimlabel:eq(0)').data('dpv'); +const getObjectiveDim = (asArray = false) => { + const endRealDim = $('#paracord-plot g.y-axis:eq(-1)') + .find('text.axis-title') + .data('dpv'); + const endcatDim = $('#paracord-plot g.dimension:eq(-1)') + .find('.dimlabel:eq(0)') + .data('dpv'); const endDimID = endRealDim || endcatDim; if (asArray) { return endDimID.split('-'); @@ -839,36 +1008,42 @@ const getObjectiveDim = (asArray=false) => { return endDimID; }; -const bindChangeDimColor = (objective, isParacat=false) => { +const bindChangeDimColor = (objective, isParacat = false) => { // update color of dimension changeDimColor(objective, isParacat); // bind drag-drpo dimension events $('g.y-axis .axis-title, g.dimension text.dimlabel') - .off('mouseover').on('mouseover', (e) => { + .off('mouseover') + .on('mouseover', (e) => { const dimName = $(e.currentTarget).attr('data-dName'); $('#dimFullName').text(dimName); showDimFullName(e); }) - .off('mouseout').on('mouseout', () => { + .off('mouseout') + .on('mouseout', () => { $('#dimFullName').text(''); $('#dimFullName').hide(); - }) - + }); }; const updateCategoryOrdering = (categoryData, dimensions) => { if (!categoryData.length || !dimensions.length) { return []; } - const catsOnDemandFilter = dimensions.map(dim => { - const [procID, colID] = dim.dimID.split('-').map(i => Number(i)); - const odfDims = categoryData.filter(catDim => catDim.proc_name == procID && catDim.column_id == colID); - if (odfDims.length) { - return odfDims[0]; - } - return null; - }).filter(dim => dim !== null); + const catsOnDemandFilter = dimensions + .map((dim) => { + const [procID, colID] = dim.dimID.split('-').map((i) => Number(i)); + const odfDims = categoryData.filter( + (catDim) => + catDim.proc_name == procID && catDim.column_id == colID, + ); + if (odfDims.length) { + return odfDims[0]; + } + return null; + }) + .filter((dim) => dim !== null); return catsOnDemandFilter; }; @@ -882,19 +1057,24 @@ const getDimOrderingFromODF = () => { const endDimIDFromChart = endDim.dPV; const [, odfDims] = getSortedCatExpAndCategories(); - const dimOrderingFromODF = odfDims.map(dim => [Number(dim.end_proc_cate), Number(dim.GET02_CATE_SELECT[0])]); + const dimOrderingFromODF = odfDims.map((dim) => [ + Number(dim.end_proc_cate), + Number(dim.GET02_CATE_SELECT[0]), + ]); if (!dimOrderingFromODF || !dimOrderingFromODF.length) { - return endDimIDFromChart.split('-').map(val => Number(val)); + return endDimIDFromChart.split('-').map((val) => Number(val)); } - const dpvOrdering = dimOrderingFromODF.map(dim => `${dim[0]}-${dim[1]}`); + const dpvOrdering = dimOrderingFromODF.map((dim) => `${dim[0]}-${dim[1]}`); const endDimFromODF = dpvOrdering[dpvOrdering.length - 1]; if (dpvOrdering.includes(endDimIDFromChart)) { - endDim = latestDimensionInChart.filter(dim => dim.dPV == endDimFromODF)[0]; + endDim = latestDimensionInChart.filter( + (dim) => dim.dPV == endDimFromODF, + )[0]; } - return endDim.dPV.split('-').map(val => Number(val)); -} + return endDim.dPV.split('-').map((val) => Number(val)); +}; const rearrangeDimAfterODF = (data) => { if (!data.length) { @@ -906,67 +1086,83 @@ const rearrangeDimAfterODF = (data) => { let catDims = []; const [, odfDims] = getSortedCatExpAndCategories(); - const dimOrderingFromODF = odfDims.map(dim => [Number(dim.end_proc_cate), Number(dim.GET02_CATE_SELECT[0])]); + const dimOrderingFromODF = odfDims.map((dim) => [ + Number(dim.end_proc_cate), + Number(dim.GET02_CATE_SELECT[0]), + ]); if (!dimOrderingFromODF) { return data; } const endDimIDFromChart = data[data.length - 1].dPV; - const dpvOrdering = dimOrderingFromODF.map(dim => `${dim[0]}-${dim[1]}`); + const dpvOrdering = dimOrderingFromODF.map((dim) => `${dim[0]}-${dim[1]}`); const endDimFromODF = dpvOrdering[dpvOrdering.length - 1]; if (!dpvOrdering.includes(endDimIDFromChart)) { // keep objective var from chart endDim = data[data.length - 1]; } else { - endDim = data.filter(dim => dim.dPV == endDimFromODF)[0]; + endDim = data.filter((dim) => dim.dPV == endDimFromODF)[0]; } // filter columns are not in category list and endDim - unCatDims = data.filter(dim => !dpvOrdering.includes(dim.dPV) && dim.dPV !== endDim.dPV); - - catDims = dpvOrdering.filter(dimDPV => dimDPV !== endDim.dPV).map(dimDPV => { - return data.filter(dim => dim.dPV === dimDPV)[0]; - }); + unCatDims = data.filter( + (dim) => !dpvOrdering.includes(dim.dPV) && dim.dPV !== endDim.dPV, + ); + + catDims = dpvOrdering + .filter((dimDPV) => dimDPV !== endDim.dPV) + .map((dimDPV) => { + return data.filter((dim) => dim.dPV === dimDPV)[0]; + }); - return [...catDims, ...unCatDims, endDim].filter(dim => dim !== undefined); + return [...catDims, ...unCatDims, endDim].filter( + (dim) => dim !== undefined, + ); }; const getAllDimDPVFromChart = () => { - const allDimInParal = Array.from($('#paracord-plot g.y-axis').find('text.axis-title')); + const allDimInParal = Array.from( + $('#paracord-plot g.y-axis').find('text.axis-title'), + ); const allDimInParac = $('g.dimension'); const getParacDimPosition = (translateVal) => { - const [x,] = translateVal.replace('translate', '') + const [x] = translateVal + .replace('translate', '') .replace('(', '') .replace(')', '') .split(',') - .map(val => Number(val)) + .map((val) => Number(val)); return x; - } ; + }; // parallel graph if (allDimInParal.length) { - return allDimInParal.map(dim => $(dim).data('dpv')); + return allDimInParal.map((dim) => $(dim).data('dpv')); } - let catDimPosition = allDimInParac.map((i, dim) => [[getParacDimPosition($(dim).attr('transform')), i]]); + let catDimPosition = allDimInParac.map((i, dim) => [ + [getParacDimPosition($(dim).attr('transform')), i], + ]); // sort categroy dimension by transform value catDimPosition.sort((a, b) => a[0] - b[0]); if (catDimPosition.length) { - const dpvs = catDimPosition.map((_, dim) => $(allDimInParac[dim[1]]).find('text.dimlabel:eq(0)').data('dpv')); + const dpvs = catDimPosition.map((_, dim) => + $(allDimInParac[dim[1]]).find('text.dimlabel:eq(0)').data('dpv'), + ); return Array.from(dpvs); } - return [] - + return []; }; const getDimPositionFromGraph = () => { if (!latestDimensionInChart) { return false; } - const latestDimDPV = latestDimensionInChart.map(dim => dim.dPV); + const latestDimDPV = latestDimensionInChart.map((dim) => dim.dPV); const currentDimDPV = getAllDimDPVFromChart(); - const isChanged = JSON.stringify(latestDimDPV) !== JSON.stringify(currentDimDPV); + const isChanged = + JSON.stringify(latestDimDPV) !== JSON.stringify(currentDimDPV); if (isChanged) { return currentDimDPV; } @@ -976,9 +1172,11 @@ const getDimPositionFromGraph = () => { const updateDimPosition = (dimPositions) => { if (latestDimensionInChart) { const dimensions = []; - dimPositions.forEach(dPV => { - dimensions.push(latestDimensionInChart.filter(dim => dim.dPV === dPV)[0]); - }) + dimPositions.forEach((dPV) => { + dimensions.push( + latestDimensionInChart.filter((dim) => dim.dPV === dPV)[0], + ); + }); return dimensions; } return latestDimensionInChart; @@ -986,27 +1184,36 @@ const updateDimPosition = (dimPositions) => { const transformCategoryData = (dimensions, useCategorized) => { dimensions.forEach((dimension) => { - const [,colID] = dimension.dPV.split('-').map(i => Number(i)); - const [sensorDat] = paracordTraces ? paracordTraces.array_plotdata.filter( - plot => plot.end_col_id == colID) : null; + const [, colID] = dimension.dPV.split('-').map((i) => Number(i)); + const [sensorDat] = paracordTraces + ? paracordTraces.array_plotdata.filter( + (plot) => plot.end_col_id == colID, + ) + : null; const uniqueArrayY = Array.from(new Set(sensorDat.array_y)).length; // format ticks of dimension - dimension.ticktext = dimension.ticktext.map(i => applySignificantDigit(i)); + dimension.ticktext = dimension.ticktext.map((i) => + applySignificantDigit(i), + ); if (sensorDat.col_detail.data_type == DataTypes.INTEGER.name) { if (uniqueArrayY > MAX_INT_LABEL_SIZE) { - dimension.values = sensorDat.categorized_data.map(i => parseInt(i)); + dimension.values = sensorDat.categorized_data.map((i) => + parseInt(i), + ); return; } } - dimension.values = dimension.values.map(i => Number(i)); + dimension.values = dimension.values.map((i) => Number(i)); dimension.categoryorder = 'array'; // set 'array' to ordering groups by ticktext if (sensorDat && Object.keys(sensorDat.rank_value).length) { - let rankVal = Object.keys(sensorDat.rank_value).map(i => Number(i)).sort((a, b) => a - b); + let rankVal = Object.keys(sensorDat.rank_value) + .map((i) => Number(i)) + .sort((a, b) => a - b); if (dimension.isReal) { rankVal.reverse(); } - dimension.ticktext = rankVal.map(i => sensorDat.rank_value[i]); + dimension.ticktext = rankVal.map((i) => sensorDat.rank_value[i]); dimension.tickvals = rankVal; if (!rankVal.length) { let sensorArrayY = sensorDat.array_y; @@ -1014,7 +1221,9 @@ const transformCategoryData = (dimensions, useCategorized) => { sensorArrayY = sensorDat.categorized_data; } let hasNA = sensorArrayY.includes(null); - rankVal = Array.from(new Set(sensorArrayY.filter(i => i))).sort((a, b) => a - b); + rankVal = Array.from( + new Set(sensorArrayY.filter((i) => i)), + ).sort((a, b) => a - b); if (dimension.isReal) { rankVal.reverse(); // [3,2,1] } @@ -1030,15 +1239,19 @@ const transformCategoryData = (dimensions, useCategorized) => { const naIndex = dimension.ticktext.indexOf(COMMON_CONSTANT.NA); // has NA in rank_value if (naIndex >= 0) { - const tickTextWtNA = dimension.ticktext.filter(tick => tick !== COMMON_CONSTANT.NA); - const tickValWtNA = dimension.tickvals.filter((val, i) => i !== naIndex); + const tickTextWtNA = dimension.ticktext.filter( + (tick) => tick !== COMMON_CONSTANT.NA, + ); + const tickValWtNA = dimension.tickvals.filter( + (val, i) => i !== naIndex, + ); const naVal = dimension.tickvals[naIndex]; // add NA to categories of sensors dimension.ticktext = [...tickTextWtNA, COMMON_CONSTANT.NA]; dimension.tickvals = [...tickValWtNA, naVal]; } } - dimension.ticktext = dimension.ticktext.map(i => String(i)); + dimension.ticktext = dimension.ticktext.map((i) => String(i)); dimension.categoryarray = dimension.tickvals; dimension.group = dimension.ticktext; } @@ -1049,14 +1262,16 @@ const transformCategoryData = (dimensions, useCategorized) => { const rearrangeNominalVars = (data, categoryCols, prop) => { const isNominalScale = prop.is_nominal_scale == 'true'; // re-arrange when there are nominal vars else do not apply - let nominalVars = prop.nominal_vars ? prop.nominal_vars.map(i => Number(i)) : []; + let nominalVars = prop.nominal_vars + ? prop.nominal_vars.map((i) => Number(i)) + : []; if (isNominalScale) { - nominalVars = categoryCols.map(col => col.col_id); + nominalVars = categoryCols.map((col) => col.col_id); } if (nominalVars.length) { - data.forEach(dim => { - const [, colID] = dim.dPV.split('-').map(i => Number(i)); + data.forEach((dim) => { + const [, colID] = dim.dPV.split('-').map((i) => Number(i)); if (nominalVars.includes(colID)) { const naIdx = dim.ticktext.indexOf(COMMON_CONSTANT.NA); const naValues = { @@ -1064,15 +1279,20 @@ const rearrangeNominalVars = (data, categoryCols, prop) => { group: dim.group[naIdx], ticktext: dim.ticktext[naIdx], tickvals: dim.tickvals[naIdx], - } - let tickVals = dim.ticktext.map(tick => !isNaN(Number(tick)) ? Number(tick) : tick) - .filter(tick => tick !== COMMON_CONSTANT.NA); + }; + let tickVals = dim.ticktext + .map((tick) => (!isNaN(Number(tick)) ? Number(tick) : tick)) + .filter((tick) => tick !== COMMON_CONSTANT.NA); let tickValsSorted = [...tickVals].sort((a, b) => a - b); - const sortIndex = tickValsSorted.map(tick => tickVals.indexOf(tick)); - dim.categoryarray = sortIndex.map(idx => dim.categoryarray[idx]); - dim.group = sortIndex.map(idx => dim.group[idx]); - dim.ticktext = sortIndex.map(idx => dim.ticktext[idx]); - dim.tickvals = sortIndex.map(idx => dim.tickvals[idx]); + const sortIndex = tickValsSorted.map((tick) => + tickVals.indexOf(tick), + ); + dim.categoryarray = sortIndex.map( + (idx) => dim.categoryarray[idx], + ); + dim.group = sortIndex.map((idx) => dim.group[idx]); + dim.ticktext = sortIndex.map((idx) => dim.ticktext[idx]); + dim.tickvals = sortIndex.map((idx) => dim.tickvals[idx]); if (naIdx >= 0) { dim.categoryarray.push(naValues.categoryarray); dim.group.push(naValues.group); @@ -1098,7 +1318,7 @@ const genObjectiveDimForNumberCol = (dimensions, objectVarID) => { if (endDim.ticktext.includes(NA)) { let naIdx = endDim.ticktext.indexOf(NA); if (naIdx < 0 && Object.keys(endDim).includes('group')) { - naIdx = endDim.group.indexOf(NA); + naIdx = endDim.group.indexOf(NA); } hasNA = naIdx >= 0; if (hasNA) { @@ -1114,24 +1334,35 @@ const genObjectiveDimForNumberCol = (dimensions, objectVarID) => { let reverseVals = [...uniqueVals].reverse(); // add NA again if (hasNA) { - uniqueVals = [...uniqueVals.filter(i => i !== NAValue), NAValue]; - reverseVals = [...reverseVals.filter(i => i !== NAValue), NAValue]; + uniqueVals = [...uniqueVals.filter((i) => i !== NAValue), NAValue]; + reverseVals = [ + ...reverseVals.filter((i) => i !== NAValue), + NAValue, + ]; } // create dummy value - endDim.values = dummyVals.map(i => reverseVals[uniqueVals.indexOf(i)]); + endDim.values = dummyVals.map( + (i) => reverseVals[uniqueVals.indexOf(i)], + ); // update categoryarray endDim.categoryarray = uniqueVals; if (hasNA) { - endDim.values = endDim.values.map(i => i == NAValue ? maxVal : i); - endDim.categoryarray = endDim.categoryarray.map(i => i == NAValue ? maxVal : i); + endDim.values = endDim.values.map((i) => + i == NAValue ? maxVal : i, + ); + endDim.categoryarray = endDim.categoryarray.map((i) => + i == NAValue ? maxVal : i, + ); } // update tickvals endDim.tickvals = endDim.categoryarray; // update ticktext const tickWoNA = endDim.ticktext.reverse(); - endDim.ticktext = hasNA ? [...tickWoNA.filter(i => i !== NA), NA]: tickWoNA; + endDim.ticktext = hasNA + ? [...tickWoNA.filter((i) => i !== NA), NA] + : tickWoNA; // update group endDim.group = endDim.ticktext; @@ -1142,9 +1373,9 @@ const genObjectiveDimForNumberCol = (dimensions, objectVarID) => { }; } return [dimensions, line]; -} +}; -const handleSortPCPDimension = (lastDimIsObjective=false) => { +const handleSortPCPDimension = (lastDimIsObjective = false) => { const dimensions = pcpPlot.dimensions; let dimensionOrdering = [...latestSortColIds]; const sortBy = getSettingOptions(); @@ -1157,8 +1388,8 @@ const handleSortPCPDimension = (lastDimIsObjective=false) => { const dimAsObj = {}; dimensionOrdering = [...dimensions]; if (pcpPlot.objective.id) { - dimensionOrdering.forEach(dim => dimAsObj[dim.dimID] = dim); - dimOrdering = latestSortColIds.map(dimID => { + dimensionOrdering.forEach((dim) => (dimAsObj[dim.dimID] = dim)); + dimOrdering = latestSortColIds.map((dimID) => { const [, colID] = dimID.split('-'); if (String(pcpPlot.objective.id) !== String(colID)) { return dimAsObj[dimID]; @@ -1167,44 +1398,62 @@ const handleSortPCPDimension = (lastDimIsObjective=false) => { } return null; }); - dimensionOrdering = dimOrdering.filter(i => i !== null); + dimensionOrdering = dimOrdering.filter((i) => i !== null); dimensionOrdering = [...dimensionOrdering, dimAsObj[endDim]]; } } pcpPlot.setOrdering(dimensionOrdering, !lastDimIsObjective); pcpPlot.show(); -} +}; const getSelectedValues = () => { const graphDiv = document.getElementById(pcpPlot.plotDOMId); + // do not execute data selection for categorized real graph + if ( + [ + ParallelProps.showVariables.CATEGORY, + ParallelProps.showVariables.CATEGORIZED, + ].includes(pcpPlot.settings.showVars) + ) { + return; + } graphDiv.on('plotly_restyle', (data) => { const dimensionKey = Object.keys(data[0])[0]; + if (!dimensionKey || !dimensionKey.includes('constraintrange')) { + // this event for reselect range of value in dimension only, not for other restyle events + return; + } const dimensionId = Number(dimensionKey.match(/\d+/g)[0]); const selectedDimension = pcpPlot.dimensions[dimensionId]; let constraintRange = data[0][dimensionKey]; if (constraintRange && _.isArray(constraintRange[0][0])) { constraintRange = constraintRange[0]; - } else { - constraintRange = constraintRange; } if (!selectedDimension.isNum && constraintRange) { // get category value by ticks text and ticks value // tim so nguyen trong mang - constraintRange = constraintRange.map(range => { + constraintRange = constraintRange.map((range) => { const from = Math.round(range[0]); const to = Math.round(range[1]); const selectedValue = []; for (let i = from; i <= to; i++) { selectedValue.push(i); } - return selectedValue.map(val => { - const indexTickVal = selectedDimension.tickvals.indexOf(val); - return selectedDimension.ticktext[indexTickVal]; - }).filter(v => v); + return selectedValue + .map((val) => { + const indexTickVal = + selectedDimension.tickvals.indexOf(val); + return selectedDimension.ticktext[indexTickVal]; + }) + .filter((v) => v); }); } pcpPlot.setSelectedValue(selectedDimension.colId, constraintRange); - }) + getSelectedDataFrame().then((r) => { + loadingHide(); + handlerPCPDisplayTableDataSelected(r); + }); + }); }; const onChangeShowCTTime = (e) => { @@ -1214,5 +1463,78 @@ const onChangeShowCTTime = (e) => { $(formElements.endProcSelectedItem).trigger('change'); setTimeout(function () { applyUserSetting(settingInfo, null, false); - },100); -}; \ No newline at end of file + }, 100); +}; + +const getSelectedDataFrame = async () => { + const formData = collectFormDataPCP(true); + formData.set('export_from', 'plot'); + formData.set( + 'constraint_range', + JSON.stringify(pcpPlot.selectedConstraintRange), + ); + loadingShow(); + const queryString = genQueryStringFromFormData(formData); + if (queryString && queryString.includes('GET02_VALS_SELECT')) { + return await fetchSelectedDataFrame(queryString); + } + loadingHide(); + return null; +}; + +const fetchSelectedDataFrame = async (queryString) => { + const dataFrame = await fetchData( + `/ap/api/pcp/select_data?${queryString}`, + {}, + ); + return [dataFrame['cols'], dataFrame['rows'], dataFrame['cols_name']]; +}; + +const buildPCPTableDataSelectedHeader = (columnsName) => { + $(tableSelectedDataElems.tableHeaderTr).append(''); + columnsName.forEach((columnName) => { + const tdHtml = ` + + ${columnName} + + `; + $(tableSelectedDataElems.tableHeaderTr).append(tdHtml); + }); +}; + +const buildPCPTableDataSelectedBody = (rows) => { + let tbodyRowHtml = ``; + rows.forEach((row, index) => { + let tdHtml = ``; + tdHtml += `${index + 1}`; + Object.keys(row).forEach(function (key) { + tdHtml += ` + + ${row[key]} + `; + }); + tbodyRowHtml += `${tdHtml}>`; + }); + $(tableSelectedDataElems.tableBody).append(tbodyRowHtml); +}; + +const handlerPCPDisplayTableDataSelected = (dataSelected) => { + clearTableDataSelected(); + if (isEmpty(dataSelected) || isEmpty(pcpPlot.selectedConstraintRange)) { + // Hide table data selected if don't selected data + $(tableSelectedDataElems.cardContainer).css('display', 'none'); + return; + } + const [_, rows, colsName] = dataSelected; + $(tableSelectedDataElems.tableBodyContent).remove(); + $(tableSelectedDataElems.cardContainer).css('display', 'block'); + // Handler display table data selected + buildPCPTableDataSelectedHeader(colsName); + buildPCPTableDataSelectedBody(rows); +}; + +const clearTableDataSelected = () => { + $(tableSelectedDataElems.tableHeaderContent).remove(); + $(tableSelectedDataElems.tableBodyContent).remove(); + $(tableSelectedDataElems.cardContainer).css('display', 'none'); +}; diff --git a/ap/static/parallel_plot/js/parallel_properties.js b/ap/static/parallel_plot/js/parallel_properties.js index 290dcbc..26e3c0d 100644 --- a/ap/static/parallel_plot/js/parallel_properties.js +++ b/ap/static/parallel_plot/js/parallel_properties.js @@ -1,13 +1,12 @@ class ParallelProps { - constructor() { - } + constructor() {} static showVariables = { ALL: 'all', REAL: 'real', CATEGORY: 'category', NUMBER: 'number', - CATEGORIZED: 'categorized_real' - } + CATEGORIZED: 'categorized_real', + }; // static corrOrdering = { // orderBy: ['correlation', 'top'], // corrValue: ['corr_value', 'max_vars'], @@ -19,7 +18,7 @@ class ParallelProps { setting: 'setting', process: 'process', correlation: 'correlation', - } + }; static realTypes = [ DataTypes.REAL.name, @@ -32,12 +31,8 @@ class ParallelProps { DataTypes.EU_INTEGER_SEP.name, DataTypes.BIG_INT.name, ]; - static catTypes = [ - DataTypes.STRING.name, - ]; - static datetimeType = [ - DataTypes.DATETIME.name, - ] + static catTypes = [DataTypes.STRING.name]; + static datetimeType = [DataTypes.DATETIME.name]; // valid data types init static validDataTypes = { all: [ @@ -47,27 +42,19 @@ class ParallelProps { ...this.datetimeType, ], real: this.realTypes, - number: [ - ...this.realTypes, - ...this.intTypes, - ], - category: [ - ...this.catTypes, - ...this.intTypes, - ], + number: [...this.realTypes, ...this.intTypes], + category: [...this.catTypes, ...this.intTypes], categorized_real: [ ...this.realTypes, ...this.intTypes, ...this.catTypes, ], - datetime: [ - ...this.datetimeType, - ] + datetime: [...this.datetimeType], }; // sort value setting static valueOrder = { DESC: 'desc', - ASC: 'asc' - } -} \ No newline at end of file + ASC: 'asc', + }; +} diff --git a/ap/static/parallel_plot/js/parallel_utils.js b/ap/static/parallel_plot/js/parallel_utils.js index 314cf51..f290e17 100644 --- a/ap/static/parallel_plot/js/parallel_utils.js +++ b/ap/static/parallel_plot/js/parallel_utils.js @@ -25,10 +25,10 @@ class ParallelPlot { } // check type of variable is number or category - isNumberVariable(colId, colData=undefined) { + isNumberVariable(colId, colData = undefined) { if (!colData) { [colData] = this.traceData.array_plotdata.filter( - col => String(col.col_detail.col_id) === String(colId) + (col) => String(col.col_detail.col_id) === String(colId), ); } if (!colData) { @@ -41,7 +41,7 @@ class ParallelPlot { // set maxCorr(isAuto) { // this.autoAssignMaxCorr = isAuto; // } - setObjective(objectiveId, isExplain=false) { + setObjective(objectiveId, isExplain = false) { if (!objectiveId) { objectiveId = this.traceData.COMMON.objectiveVar; if (_.isArray(objectiveId)) { @@ -49,7 +49,7 @@ class ParallelPlot { } } const [colData] = this.traceData.array_plotdata.filter( - col => String(col.col_detail.col_id) === String(objectiveId) + (col) => String(col.col_detail.col_id) === String(objectiveId), ); if (colData) { const updateCol = { @@ -58,7 +58,7 @@ class ParallelPlot { procId: colData.col_detail.proc_id, name: `${colData.col_detail.proc_id}-${objectiveId}`, type: colData.col_detail.data_type, - asNumber: this.isNumberVariable(objectiveId, colData) + asNumber: this.isNumberVariable(objectiveId, colData), }; if (isExplain) { @@ -74,9 +74,10 @@ class ParallelPlot { // plot setting from GUI setSettings(settings) { - let defaultShowChart = (this.objective && this.objective.asNumber) ? - ParallelProps.showVariables.ALL : - ParallelProps.showVariables.CATEGORY; + let defaultShowChart = + this.objective && this.objective.asNumber + ? ParallelProps.showVariables.ALL + : ParallelProps.showVariables.CATEGORY; this.settings = { showVars: defaultShowChart, orderBy: ParallelProps.orderBy.correlation, @@ -89,33 +90,44 @@ class ParallelPlot { valueOrder: ParallelProps.valueOrder.DESC, // order value of dimension, from top to bot }; if (settings) { - this.settings.showVars = settings.showVars || this.settings.showVars; + this.settings.showVars = + settings.showVars || this.settings.showVars; this.settings.orderBy = settings.orderBy || this.settings.orderBy; this.settings.fineSelect = settings.fineSelect || false; + this.settings.yScaleOption = + settings.yScaleOption || scaleOptionConst.AUTO; if (settings.corrSetting) { // reset corrSetting this.settings.corrSetting = {}; - if (this.settings.orderBy === ParallelProps.orderBy.correlation) { - this.settings.corrSetting = settings.corrSetting.byCorr ? { - byCorr: true, - min: settings.corrSetting.minCorr, - dimNum: settings.corrSetting.varNum, - top: undefined, - } : { - byCorr: false, - min: undefined, - dimNum: undefined, - top: settings.corrSetting.top, - } + if ( + this.settings.orderBy === ParallelProps.orderBy.correlation + ) { + this.settings.corrSetting = settings.corrSetting.byCorr + ? { + byCorr: true, + min: settings.corrSetting.minCorr, + dimNum: settings.corrSetting.varNum, + top: undefined, + } + : { + byCorr: false, + min: undefined, + dimNum: undefined, + top: settings.corrSetting.top, + }; } } // set order default value for paracat only - if (this.settings.showVars === ParallelProps.showVariables.CATEGORY) { + if ( + this.settings.showVars === ParallelProps.showVariables.CATEGORY + ) { this.settings.orderBy = ParallelProps.orderBy.process; } - this.settings.useCorrDefaultThreshold = (settings.useCorrDefaultThreshold !== undefined) - ? settings.useCorrDefaultThreshold : true; + this.settings.useCorrDefaultThreshold = + settings.useCorrDefaultThreshold !== undefined + ? settings.useCorrDefaultThreshold + : true; } // reset custom ordering this.selectedOrder = []; @@ -125,16 +137,24 @@ class ParallelPlot { this.fromJump = isJump; } - setOrdering(ordering, useDimID=false) { + setOrdering(ordering, useDimID = false) { this.selectedOrder = ordering; if (useDimID) { - this.selectedOrder = this.selectedOrder.map(dimID => { - const selectedDim = this.allDimensions.filter(dim => dim.dimID === dimID && dim.dimID !== this.objective.name); - return selectedDim.length ? selectedDim[0] : undefined; - }).filter(dim => dim !== undefined); - } - - let objectiveDim = this.allDimensions.filter(dim => dim.dimID === this.objective.name); + this.selectedOrder = this.selectedOrder + .map((dimID) => { + const selectedDim = this.allDimensions.filter( + (dim) => + dim.dimID === dimID && + dim.dimID !== this.objective.name, + ); + return selectedDim.length ? selectedDim[0] : undefined; + }) + .filter((dim) => dim !== undefined); + } + + let objectiveDim = this.allDimensions.filter( + (dim) => dim.dimID === this.objective.name, + ); objectiveDim = objectiveDim.length ? objectiveDim[0] : null; // push origin objective variable if (objectiveDim) { @@ -149,12 +169,12 @@ class ParallelPlot { const plotDOM = document.getElementById(this.plotDOMId); // bind event after plot plotDOM.on('plotly_afterplot', () => { - const dPVar = this.dimensions.map(dim => dim.dimID); - const dNames = this.dimensions.map(dim => dim.dimName); + const dPVar = this.dimensions.map((dim) => dim.dimID); + const dNames = this.dimensions.map((dim) => dim.dimName); const axisDim = $('.axis-title'); - if (this.settings.fineSelect) { - axisDim.addClass('fineSelect'); - } + if (this.settings.fineSelect) { + axisDim.addClass('fineSelect'); + } if (dPVar.length) { dPVar.forEach((dimension, i) => { $(axisDim[i]).attr('data-dpv', dimension); @@ -173,10 +193,19 @@ class ParallelPlot { const dimInSVG = document.getElementsByClassName('dimension'); this.dimensions.forEach((dim, i) => { // add custom data - $($(dimInSVG[i]).find('.dimlabel')[0]).attr('data-dpv', dim.dimID); - $($(dimInSVG[i]).find('.dimlabel')[0]).attr('data-dName', dim.dimName); + $($(dimInSVG[i]).find('.dimlabel')[0]).attr( + 'data-dpv', + dim.dimID, + ); + $($(dimInSVG[i]).find('.dimlabel')[0]).attr( + 'data-dName', + dim.dimName, + ); if (dim.isCategorize) { - $($(dimInSVG[i]).find('.dimlabel')[0]).attr('is-categorize', dim.isCategorize); + $($(dimInSVG[i]).find('.dimlabel')[0]).attr( + 'is-categorize', + dim.isCategorize, + ); } }); } @@ -191,17 +220,25 @@ class ParallelPlot { const offset = { x: data.event.pageX - 120, y: data.event.pageY, - } - const ratio = applySignificantDigit(count / this.traceData.actual_record_number * 100); - const tbl = genHoverDataTable([['N', applySignificantDigit(count)], ['Ratio', `${ratio}%`]]); + }; + const ratio = applySignificantDigit( + (count / this.traceData.actual_record_number) * 100, + ); + const tbl = genHoverDataTable([ + ['N', applySignificantDigit(count)], + ['Ratio', `${ratio}%`], + ]); - genDataPointHoverTable(tbl, offset, 100, true, 'paracord-plot') + genDataPointHoverTable(tbl, offset, 100, true, 'paracord-plot'); }); // bind unhover event unHoverHandler(plotDOM); // update dimension position for pcp $('.axis-title').each((i, el) => { - const isCategory = $(el).attr('data-unformatted').toString().includes('is-category'); + const isCategory = $(el) + .attr('data-unformatted') + .toString() + .includes('is-category'); if (isCategory) { const showFilterClass = 'show-detail click-only'; $(el).find('tspan:last-child tspan').addClass(showFilterClass); @@ -215,7 +252,10 @@ class ParallelPlot { if (label && dimInfo) { // [targetSensorName] = label.split(' '); // targetDim = dimInfo.split('-').map(i => Number(i)); - $('#contextMenuParallelPlot .menu-item').attr('data-target-dim', dimInfo); + $('#contextMenuParallelPlot .menu-item').attr( + 'data-target-dim', + dimInfo, + ); } selectTargetDimHandler(e); }); @@ -223,8 +263,13 @@ class ParallelPlot { genCorrValue() { if (this.autoAssignMaxCorr) { - const corrVals = this.data.length ? this.data.map(i => i.correlation ? Number(i.correlation) : 0) : []; - const maxCorr = Math.round(Math.max(...corrVals) * 0.8 * 1000) / 1000; + const corrVals = this.data.length + ? this.data.map((i) => + i.correlation ? Number(i.correlation) : 0, + ) + : []; + const maxCorr = + Math.round(Math.max(...corrVals) * 0.8 * 1000) / 1000; if (maxCorr) { const corrDOM = $('input[name=corr_value]'); corrDOM.val(maxCorr); @@ -233,13 +278,37 @@ class ParallelPlot { } } + genDefaultSetting() { + const elementTopVar = $(`input[name='top_vars']`); + const elementMaxVar = $(`input[name='max_vars']`); + const defaultTopVar = elementTopVar.attr(CONST.DEFAULT_VALUE); + const defaultMaxVar = elementMaxVar.attr(CONST.DEFAULT_VALUE); + elementTopVar.val( + this.settings.corrSetting.top + ? this.settings.corrSetting.top + : defaultTopVar, + ); + elementMaxVar.val( + this.settings.corrSetting.dimNum + ? this.settings.corrSetting.dimNum + : defaultMaxVar, + ); + } + // gen chart options genPlotlyIconsSetting() { return { modeBarButtonsToRemove: [ - 'zoom2d', 'pan2d', 'select2d', 'lasso2d', 'zoomIn2d', 'zoomOut2d', - 'hoverClosestCartesian', 'hoverCompareCartesian', - 'toggleSpikelines', 'sendDataToCloud', + 'zoom2d', + 'pan2d', + 'select2d', + 'lasso2d', + 'zoomIn2d', + 'zoomOut2d', + 'hoverClosestCartesian', + 'hoverCompareCartesian', + 'toggleSpikelines', + 'sendDataToCloud', ], displaylogo: false, }; @@ -279,15 +348,26 @@ class ParallelPlot { // } // gen dimension range text for real sensor - genDimRangeText (dimValues, infIDX, minfIDX, isInt = false, fmt='', fineSelect = false) { - const notNADim = dimValues.filter(i => i === 0 || i); - const [minText, maxText] = findMinMax(notNADim); + genDimRangeText( + dimValues, + infIDX, + minfIDX, + isInt = false, + fmt = '', + fineSelect = false, + [yMin, yMax], + ) { + const notNADim = dimValues.filter((i) => i === 0 || i); + // const [minText, maxText] = findMinMax(notNADim); + const [minText, maxText] = [yMin, yMax]; const rangeVals = maxText - minText; const stepVals = rangeVals / 9; - const fractionDigit = rangeVals <= 1 ? 3 : 2; - const irrNum = maxText.toString().includes('e') || minText.toString().includes('e'); + const fractionDigit = rangeVals <= 1 ? 4 : 2; // change 3 => 4 to fix 0.0000 + const irrNum = + maxText.toString().includes('e') || + minText.toString().includes('e'); let tickVals = Array(...Array(10)).map((v, i) => { - const tickVal = (minText + (stepVals * i)); + const tickVal = minText + stepVals * i; if (isInt) { return parseInt(tickVal, 10); } @@ -299,9 +379,13 @@ class ParallelPlot { }); // check inf/-inf - // eslint-disable-next-line no-nested-ternary - const naPosition = infIDX.length > 0 && minfIDX.length > 0 - ? 3 : ((infIDX.length > 0 || minfIDX.length > 0) ? 2 : 1); + + const naPosition = + infIDX.length > 0 && minfIDX.length > 0 + ? 3 + : infIDX.length > 0 || minfIDX.length > 0 + ? 2 + : 1; // inf position const infDumVal = minText - stepVals; const minfDumVal = minText - 2 * stepVals; @@ -351,7 +435,10 @@ class ParallelPlot { genPCatDimLabel(colData, corr) { // labelColor will be set after plot chart const isNumCol = this.isNumberVariable(colData.end_col_id, colData); - let dimProcName = shortTextName(colData.col_detail.proc_shown_name, CONST.LIMIT_SIZE_NAME); + let dimProcName = shortTextName( + colData.col_detail.proc_shown_name, + CONST.LIMIT_SIZE_NAME, + ); let dimSensorName = shortTextName(colData.col_detail.col_shown_name); let dimLabel = `${dimSensorName} ${dimProcName}`; @@ -372,7 +459,10 @@ class ParallelPlot { } else if (Number(colData.col_detail.proc_id) === Number(startProcID)) { labelColor = CONST.LIGHT_BLUE; } - let dimProcName = shortTextName(colData.col_detail.proc_shown_name, CONST.LIMIT_SIZE_NAME); + let dimProcName = shortTextName( + colData.col_detail.proc_shown_name, + CONST.LIMIT_SIZE_NAME, + ); let dimSensorName = shortTextName(colData.col_detail.col_shown_name); let dimLabel = `${dimSensorName}
      `; dimLabel += `${dimProcName}[${applySignificantDigit(corr)}]`; @@ -389,25 +479,34 @@ class ParallelPlot { markupNAValue(dimValue) { let encodedValue = {}; const NADefinition = [null, undefined, 'NA']; - const hasNA = !!dimValue.filter(i => NADefinition.includes(i)).length; + const hasNA = !!dimValue.filter((i) => NADefinition.includes(i)).length; if (hasNA) { const uniqValues = Array.from(new Set(dimValue)); - const minValue = Math.min(...uniqValues.filter(i => !NADefinition.includes(i))); + const minValue = Math.min( + ...uniqValues.filter((i) => !NADefinition.includes(i)), + ); const naValue = minValue - 1; - encodedValue = {'NA': naValue}; - dimValue = dimValue.map(i => NADefinition.includes(i) ? naValue : i) + encodedValue = { NA: naValue }; + dimValue = dimValue.map((i) => + NADefinition.includes(i) ? naValue : i, + ); } return [dimValue, encodedValue]; } - rearrangeDimValue(colData, dim, asPCat=true) { - const isCategoryCol = !this.isNumberVariable(colData.end_col_id, colData); + rearrangeDimValue(colData, dim, asPCat = true) { + const isCategoryCol = !this.isNumberVariable( + colData.end_col_id, + colData, + ); const sortFunc = (a, b) => { - return this.settings.valueOrder === ParallelProps.valueOrder.DESC ? (b - a) : (a - b); + return this.settings.valueOrder === ParallelProps.valueOrder.DESC + ? b - a + : a - b; // if (this.settings.valueOrder === ParallelProps.valueOrder.DESC) { // return (a > b ? -1 : 1); // } // return (b > a ? -1 : 1); - } + }; const naIdx = dim.tickvals.indexOf(CONST.NAV); const naValues = { categoryarray: asPCat ? dim.categoryarray[naIdx] : null, @@ -417,24 +516,75 @@ class ParallelPlot { }; // todo: remove NA before sort let tickValsSorted = [...dim.tickvals].sort(sortFunc); - let sortIndex = tickValsSorted.map(tick => dim.tickvals.indexOf(tick)); - dim.categoryarray = asPCat ? sortIndex.map(idx => dim.categoryarray[idx]) : null; - dim.group = asPCat ? sortIndex.map(idx => dim.group[idx]) : null; - dim.ticktext = sortIndex.map(idx => dim.ticktext[idx]); - dim.tickvals = sortIndex.map(idx => dim.tickvals[idx]); + let sortIndex = tickValsSorted.map((tick) => + dim.tickvals.indexOf(tick), + ); + dim.categoryarray = asPCat + ? sortIndex.map((idx) => dim.categoryarray[idx]) + : null; + dim.group = asPCat ? sortIndex.map((idx) => dim.group[idx]) : null; + dim.ticktext = sortIndex.map((idx) => dim.ticktext[idx]); + dim.tickvals = sortIndex.map((idx) => dim.tickvals[idx]); if (isCategoryCol && Object.keys(colData.rank_value).length) { if (dim.ticktext.includes('NA')) { const naIdx = dim.ticktext.indexOf('NA'); - dim.values = dim.values.map(i => i == naIdx ? -1 : i); + dim.values = dim.values.map((i) => (i == naIdx ? -1 : i)); } } return dim; } + + // this function using to check if the data include valid chartInfo or not + checkIsValidChartInfo(chartInfos) { + return chartInfos.some((chartInfo) => { + for (let key in chartInfo) { + if (chartInfo[key] != null) { + return true; + } + } + return false; + }); + } + + // get yScale, colValue base on chartInfo (using for PCP and PCat Dimension) + getYScaleAndColValue({ colData, colValue }) { + // get y scale select value + const yScaleSelectValue = this.settings.yScaleOption; + + // get yScale Value [yMin, yMax] + let yScale = getScaleInfo(colData, yScaleSelectValue); + const isValidChartInfo = this.checkIsValidChartInfo( + colData['chart_infos'], + ); + + // if: colValue not having valid chartInfo and "yScale Select Value" is Threshold + // OR "yScale Select Value" is auto range + // OR if colValue not having valid chartInfo and "yScale Select Value" is setting_config + // => set is DimRange is full + if ( + (!isValidChartInfo && + yScaleSelectValue === scaleOptionConst.THRESHOLD) || + yScaleSelectValue === scaleOptionConst.AUTO || + (!isValidChartInfo && + yScaleSelectValue === scaleOptionConst.SETTING) + ) { + yScale = getScaleInfo(colData, scaleOptionConst.FULL_RANGE); + } + + return { colValue, yScale }; + } + // gen dimension data genPCPDimension(colData) { - const colValue = [...colData.array_y]; + const { colValue, yScale } = this.getYScaleAndColValue({ + colData, + colValue: [...colData.array_y], + }); + const fmt = this.traceData.fmt[colData.end_col_id]; + const [yMin, yMax] = [yScale['y-min'], yScale['y-max']]; + let dim = this.genDimRangeText( colValue, colData.inf_idx, @@ -442,28 +592,38 @@ class ParallelPlot { false, fmt, this.settings.fineSelect, + [yMin, yMax], ); + // for int or string col with ranked encoding if (!_.isEmpty(colData.rank_value)) { const ranking = Object.keys(colData.rank_value); dim.tickvals = ranking; if (ranking.length > MAX_CAT_LABEL) { const step = Math.floor(ranking.length / MAX_CAT_LABEL); - dim.tickvals = ranking.filter(k => (Number(k) === 0) || (Number(k) + 1) % step === 0); + dim.tickvals = ranking.filter( + (k) => Number(k) === 0 || (Number(k) + 1) % step === 0, + ); } - dim.tickvals = dim.tickvals.map(i => Number(i)); - dim.ticktext = dim.tickvals.map(i => colData.rank_value[i]); + dim.tickvals = dim.tickvals.map((i) => Number(i)); + dim.ticktext = dim.tickvals.map((i) => colData.rank_value[i]); } - dim.tickvals = dim.tickvals.map(i => Number(i)); + dim.tickvals = dim.tickvals.map((i) => Number(i)); dim = this.rearrangeDimValue(colData, dim, false); - const dimRange = findMinMax(dim.values); + // get dimRange in dim.tickvals instead of dim.values + const dimRange = findMinMax(dim.tickvals); + const dimRangeValue = findMinMax(dim.values); + dimRange[0] = Math.min(dimRange[0], dimRangeValue[0]); + dimRange[1] = Math.max(dimRange[1], dimRangeValue[1]); let corr = getCorrelation( this.traceData.corrs, colData.col_detail.col_id, - this.objective.id + this.objective.id, ); - dim.ticktext = dim.ticktext.map(i => String(i)); - const notShowTicks = this.settings.fineSelect && !colData.col_detail.is_category; + dim.ticktext = dim.ticktext.map((i) => String(i)); + const notShowTicks = + this.settings.fineSelect && !colData.col_detail.is_category; + return { values: dim.values, ticktext: notShowTicks ? null : dim.ticktext, @@ -481,20 +641,34 @@ class ParallelPlot { } // gen dimension data genPCatDimension(colData) { + // hide scale y when selection is CATEGORY + if ( + this.settings.showVars === + paracordsSetting.showVariables.CATEGORY || + this.settings.showVars === + paracordsSetting.showVariables.CATEGORIZED + ) { + $(formElements.yScaleOption).parent().addClass('hidden-important'); + } + let rankValues = {}; const isNumber = this.isNumberVariable(colData.end_col_id, colData); let dim = { categoryorder: 'array', // set 'array' to ordering groups by ticktext - values: [...colData.array_y].map(i => i !== null ? Number(i) : i), + values: [...colData.array_y].map((i) => + i !== null ? Number(i) : i, + ), }; // categorized real data or big int if (colData.categorized_data.length) { dim.values = colData.categorized_data; [dim.values, rankValues] = this.markupNAValue(dim.values); if (colData.col_detail.data_type === DataTypes.INTEGER.name) { - dim.values = dim.values.map(i => parseInt(i)); + dim.values = dim.values.map((i) => parseInt(i)); } - dim.tickvals = Array.from(new Set(dim.values)).map(i => Number(i)); + dim.tickvals = Array.from(new Set(dim.values)).map((i) => + Number(i), + ); dim.ticktext = dim.tickvals; } @@ -504,10 +678,12 @@ class ParallelPlot { dim.tickvals = ranking; if (ranking.length > MAX_CAT_LABEL) { const step = Math.floor(ranking.length / MAX_CAT_LABEL); - dim.tickvals = ranking.filter(k => (Number(k) === 0) || (Number(k) + 1) % step === 0); + dim.tickvals = ranking.filter( + (k) => Number(k) === 0 || (Number(k) + 1) % step === 0, + ); } - dim.tickvals = dim.tickvals.map(i => Number(i)); - dim.ticktext = dim.tickvals.map(i => colData.rank_value[i]); + dim.tickvals = dim.tickvals.map((i) => Number(i)); + dim.ticktext = dim.tickvals.map((i) => colData.rank_value[i]); } dim.categoryarray = dim.tickvals; dim.group = dim.tickvals; @@ -517,17 +693,17 @@ class ParallelPlot { const corr = getCorrelation( this.traceData.corrs, colData.col_detail.col_id, - this.objective.id + this.objective.id, ); if (isNumber) { - dim.ticktext = dim.ticktext.map(i => { - if (Object.keys(rankValues).length && (i === rankValues.NA)) { + dim.ticktext = dim.ticktext.map((i) => { + if (Object.keys(rankValues).length && i === rankValues.NA) { return 'NA'; } return `${applySignificantDigit(i)}`; }); } else { - dim.ticktext = dim.ticktext.map(i => String(i)); + dim.ticktext = dim.ticktext.map((i) => String(i)); } return { values: dim.values, @@ -546,7 +722,7 @@ class ParallelPlot { correlation: corr, }; } - validateObjectiveType(colType=null) { + validateObjectiveType(colType = null) { if (this.traceData['from_jump_emd']) { return true; } @@ -555,23 +731,35 @@ class ParallelPlot { return ParallelProps.validDataTypes[showVars].includes(colType); } validateCorr(colData) { - return this.settings.corrSetting.min <= Math.abs( - this.traceData.corrs.corr[this.objective.id][colData.end_col_id] + return ( + this.settings.corrSetting.min <= + Math.abs( + this.traceData.corrs.corr[this.objective.id][ + colData.end_col_id + ], + ) ); } filterDimension(colData) { let isValid = this.validateObjectiveType(colData.col_detail.data_type); - if (isValid && - (this.settings.orderBy === ParallelProps.orderBy.correlation) && - (this.settings.corrSetting.min !== undefined) + if ( + isValid && + this.settings.orderBy === ParallelProps.orderBy.correlation && + this.settings.corrSetting.min !== undefined ) { isValid = this.validateCorr(colData); } return isValid; } updateDefaultCorrThreshold(dimensions) { - const explainDims = dimensions.filter(dim => dim.dimID !== this.objective.name); - const corrVals = explainDims.length ? explainDims.map(i => i.correlation ? Number(i.correlation) : 0) : []; + const explainDims = dimensions.filter( + (dim) => dim.dimID !== this.objective.name, + ); + const corrVals = explainDims.length + ? explainDims.map((i) => + i.correlation ? Number(i.correlation) : 0, + ) + : []; const maxCorr = Math.round(Math.max(...corrVals) * 0.8 * 1000) / 1000; if (maxCorr) { $('input[name=corr_value]').val(maxCorr); @@ -584,42 +772,61 @@ class ParallelPlot { } // todo: order dimension by setting // limitation - let limit = this.settings.corrSetting.top || this.settings.corrSetting.dim_num || dimension.length; + let limit = + this.settings.corrSetting.top || + this.settings.corrSetting.dim_num || + dimension.length; // add one more to show objective var limit += 1; - if (dimension.length && - (this.settings.orderBy === ParallelProps.orderBy.correlation) && - (limit !== 0)) { + if ( + dimension.length && + this.settings.orderBy === ParallelProps.orderBy.correlation && + limit !== 0 + ) { // order by correlation number of dimension - dimension.sort((a, b) => Math.abs(a.correlation) - Math.abs(b.correlation)); + dimension.sort( + (a, b) => Math.abs(a.correlation) - Math.abs(b.correlation), + ); dimension = [...dimension].reverse().slice(0, limit).reverse(); } // objective variable in last column - const objectiveDimension = dimension.filter(dim => dim.dimID === this.objective.name); + const objectiveDimension = dimension.filter( + (dim) => dim.dimID === this.objective.name, + ); let explainDimension = []; if (this.explain) { - explainDimension = dimension.filter(dim => dim.dimID === this.explain.name); + explainDimension = dimension.filter( + (dim) => dim.dimID === this.explain.name, + ); } - const otherDimensions = dimension.filter(dim => dim.dimID !== this.objective.name && - (this.explain ? dim.dimID !== this.explain.name : true) - ); - let nonObjectiveDimension = [...otherDimensions, ...explainDimension]; + let otherDimensions = [ + ...dimension.filter( + (dim) => + dim.dimID !== this.objective.name && + (this.explain ? dim.dimID !== this.explain.name : true), + ), + ]; if (this.settings.orderBy === ParallelProps.orderBy.correlation) { - nonObjectiveDimension = nonObjectiveDimension.sort(propComparator(this.settings.orderBy)); + otherDimensions = otherDimensions.sort( + propComparator(this.settings.orderBy), + ); } if (this.settings.orderBy === ParallelProps.orderBy.setting) { - nonObjectiveDimension = nonObjectiveDimension.sort(propComparator('colId')); + otherDimensions = otherDimensions.sort(propComparator('colId')); } - if(this.settings.orderBy === ParallelProps.orderBy.process) { - const order = this.traceData.proc_link_order - nonObjectiveDimension = nonObjectiveDimension.sort((x,y) => order.indexOf(x.process) - order.indexOf(y.process)) + if (this.settings.orderBy === ParallelProps.orderBy.process) { + const order = this.traceData.proc_link_order; + otherDimensions = otherDimensions.sort( + (x, y) => order.indexOf(x.process) - order.indexOf(y.process), + ); } + let nonObjectiveDimension = [...otherDimensions, ...explainDimension]; // append objectiveDimension at the end after sorting - dimension = [...nonObjectiveDimension, ...objectiveDimension] + dimension = [...nonObjectiveDimension, ...objectiveDimension]; // update corr default threshold if (this.settings.useCorrDefaultThreshold) { this.updateDefaultCorrThreshold(dimension); @@ -638,7 +845,7 @@ class ParallelPlot { if (endDim.ticktext.includes(CONST.NA)) { let naIdx = endDim.ticktext.indexOf(CONST.NA); if (naIdx < 0 && Object.keys(endDim).includes('group')) { - naIdx = endDim.group.indexOf(CONST.NA); + naIdx = endDim.group.indexOf(CONST.NA); } hasNA = naIdx >= 0; if (hasNA) { @@ -650,28 +857,39 @@ class ParallelPlot { // create dummy values let dummyVals = endDim.values; - let uniqueVals = Array.from(new Set(dummyVals)).sort(); + let uniqueVals = Array.from(new Set(dummyVals)).sort((a, b) => a - b); let reverseVals = [...uniqueVals].reverse(); // add NA again if (hasNA) { - uniqueVals = [...uniqueVals.filter(i => i !== NAValue), NAValue]; - reverseVals = [...reverseVals.filter(i => i !== NAValue), NAValue]; + uniqueVals = [...uniqueVals.filter((i) => i !== NAValue), NAValue]; + reverseVals = [ + ...reverseVals.filter((i) => i !== NAValue), + NAValue, + ]; } // create dummy value - endDim.values = dummyVals.map(i => reverseVals[uniqueVals.indexOf(i)]); + endDim.values = dummyVals.map( + (i) => reverseVals[uniqueVals.indexOf(i)], + ); // update categoryarray endDim.categoryarray = uniqueVals; if (hasNA) { - endDim.values = endDim.values.map(i => i === NAValue ? maxVal : i); - endDim.categoryarray = endDim.categoryarray.map(i => i === NAValue ? maxVal : i); + endDim.values = endDim.values.map((i) => + i === NAValue ? maxVal : i, + ); + endDim.categoryarray = endDim.categoryarray.map((i) => + i === NAValue ? maxVal : i, + ); } // update tickvals endDim.tickvals = endDim.categoryarray; // update ticktext const tickWoNA = endDim.ticktext.reverse(); - endDim.ticktext = hasNA ? [...tickWoNA.filter(i => i !== CONST.NA), CONST.NA]: tickWoNA; + endDim.ticktext = hasNA + ? [...tickWoNA.filter((i) => i !== CONST.NA), CONST.NA] + : tickWoNA; endDim.ticktext = [...endDim.ticktext].reverse(); // update group endDim.group = endDim.categoryarray; @@ -686,36 +904,44 @@ class ParallelPlot { showscale: false, // reversescale: true, }; - return [{ - type: 'parcats', - dimensions: this.dimensions, - line: lineCfg, - hoveron: 'color', - hoverinfo: 'none', - labelfont: {size: 10.5}, - arrangement: 'freeform', - }]; + return [ + { + type: 'parcats', + dimensions: this.dimensions, + line: lineCfg, + hoveron: 'color', + hoverinfo: 'none', + labelfont: { size: 10.5 }, + arrangement: 'freeform', + }, + ]; } genPCPData() { const fmt = this.traceData.fmt[this.objective.id]; - return [{ - type: 'parcoords', - line: { - showscale: true, - reversescale: false, - colorscale: dnJETColorScale, - color: this.objective.data, - colorbar: { - tickformat: fmt, + // get colors for lines from objective dimension data (replaced NA with naDumVal etc) + const colors = this.dimensions.filter( + (i) => i.colId === this.objective.id, + )[0].values; + return [ + { + type: 'parcoords', + line: { + showscale: true, + reversescale: false, + colorscale: dnJETColorScale, + color: colors, + colorbar: { + tickformat: fmt, + }, }, + labelfont: { size: 10.5 }, + hoverinfo: 'none', + dimensions: this.dimensions, }, - labelfont: {size: 10.5}, - hoverinfo: 'none', - dimensions: this.dimensions, - }]; + ]; } // gen dimension data - genData(useCurrentObjectiveVar=true) { + genData(useCurrentObjectiveVar = true) { const asDiscretePlot = [ ParallelProps.showVariables.CATEGORY, ParallelProps.showVariables.CATEGORIZED, @@ -725,13 +951,17 @@ class ParallelPlot { return []; } if (this.traceData.COMMON.is_nominal_scale === 'true') { - this.nominalVars = this.traceData.category_cols.map(col => col.col_id); + this.nominalVars = this.traceData.category_cols.map( + (col) => col.col_id, + ); } dimension = this.traceData.array_plotdata - .filter( - colData => this.filterDimension(colData) - ) - .map(colData => asDiscretePlot ? this.genPCatDimension(colData) : this.genPCPDimension(colData)); + .filter((colData) => this.filterDimension(colData)) + .map((colData) => + asDiscretePlot + ? this.genPCatDimension(colData) + : this.genPCPDimension(colData), + ); this.allDimensions = [...dimension]; this.dimensions = this.orderDimension(dimension); if (asDiscretePlot) { @@ -750,10 +980,13 @@ class ParallelPlot { } // show parallel graph - show() { + show(isReturnToDefaultOrderingParams) { // gen dimension data this.genData(); this.genCorrValue(); + if (isReturnToDefaultOrderingParams) { + this.genDefaultSetting(); + } // get chart layout const layout = this.genLayout(); // gen icons setting @@ -762,4 +995,4 @@ class ParallelPlot { $(`#${this.plotDOMId}`).show(); this.bindEvents(); } -} \ No newline at end of file +} diff --git a/ap/static/plot_view/css/plot_view.css b/ap/static/plot_view/css/plot_view.css index 76db6c2..8841511 100644 --- a/ap/static/plot_view/css/plot_view.css +++ b/ap/static/plot_view/css/plot_view.css @@ -1,4 +1,5 @@ -.table th, .table td { +.table th, +.table td { padding: 0.1rem !important; vertical-align: middle; border: 1px solid #444; @@ -7,8 +8,8 @@ } .table-wrapper { - overflow-x: auto !important; - white-space: nowrap; + overflow-x: auto !important; + white-space: nowrap; margin-bottom: 2rem; } @@ -38,7 +39,7 @@ tbody { } thead { - color: #3385b7;; + color: #3385b7; font-family: Calibri Light; font-size: 0.9vw; } @@ -48,4 +49,4 @@ thead { font-family: Calibri Light; font-size: 0.9vw; font-weight: bold; -} \ No newline at end of file +} diff --git a/ap/static/plot_view/js/plot_view.js b/ap/static/plot_view/js/plot_view.js index 1438015..49a1b0f 100644 --- a/ap/static/plot_view/js/plot_view.js +++ b/ap/static/plot_view/js/plot_view.js @@ -13,5 +13,4 @@ $(() => { clipboard.on('error', (e) => { setTooltip(e.trigger, 'Failed!'); }); - }); diff --git a/ap/static/ridgeline_plot/css/ridgeline.css b/ap/static/ridgeline_plot/css/ridgeline.css index f44a1ec..d84c618 100644 --- a/ap/static/ridgeline_plot/css/ridgeline.css +++ b/ap/static/ridgeline_plot/css/ridgeline.css @@ -56,12 +56,12 @@ } .ridgeLineItem { - border: 1px solid #434343; - border-radius: 4px; - margin-bottom: 4px; - padding-top: 5px; - position: relative; - background-color: #222222; + border: 1px solid #434343; + border-radius: 4px; + margin-bottom: 4px; + padding-top: 5px; + position: relative; + background-color: #222222; display: flex; } @@ -116,7 +116,8 @@ z-index: 100; } -span.btn-anchor.pin, span.btn-anchor:hover { +span.btn-anchor.pin, +span.btn-anchor:hover { color: white; } diff --git a/ap/static/ridgeline_plot/js/ridgeline_plot.js b/ap/static/ridgeline_plot/js/ridgeline_plot.js index e05d846..e095649 100644 --- a/ap/static/ridgeline_plot/js/ridgeline_plot.js +++ b/ap/static/ridgeline_plot/js/ridgeline_plot.js @@ -1,14 +1,14 @@ -/* eslint-disable no-restricted-syntax */ -/* eslint-disable no-unused-vars */ -/* eslint-disable no-undef */ -/* eslint-disable no-use-before-define */ const REQUEST_TIMEOUT = setRequestTimeOut(); const MAX_NUMBER_OF_GRAPH = 20; const MAX_NUMBER_OF_SENSOR = 20; const MIN_NUMBER_OF_SENSOR = 0; let valueInfo = null; const graphStore = new GraphStore(); -const dicTabs = { '#byCategory': 'category', '#byCyclicTerm': 'cyclicTerm', '#byDirectTerm': 'directTerm' }; +const dicTabs = { + '#byCategory': 'category', + '#byCyclicTerm': 'cyclicTerm', + '#byDirectTerm': 'directTerm', +}; let resData = null; let judgeScaleData = {}; // const procMaster = getParam.proc_master; @@ -126,14 +126,19 @@ $(() => { // add endproc $('#btn-add-end-proc').click(() => { varEndProcItem(() => { - onChangeDivInFacet(); + onChangeDivInFacet(); }); addAttributeToElement(); }); // add first condition process - const condProcItem = addCondProc(endProcs.ids, endProcs.names, - eles.varTabPrefix, formElements.mainForm, `${eles.varTabPrefix}btn-add-cond-proc`); + const condProcItem = addCondProc( + endProcs.ids, + endProcs.names, + eles.varTabPrefix, + formElements.mainForm, + `${eles.varTabPrefix}btn-add-cond-proc`, + ); condProcItem(); // click event of condition proc add button @@ -160,7 +165,6 @@ $(() => { $('#divideOption').trigger('change'); - // add limit after running load_user_setting setTimeout(() => { // add validations for target period @@ -169,7 +173,11 @@ $(() => { }, 2000); // validate and change to default and max value cyclic term - validateInputByNameWithOnchange(CYCLIC_TERM.DIV_NUM, { MAX: 240, MIN: 2, DEFAULT: 120 }); + validateInputByNameWithOnchange(CYCLIC_TERM.DIV_NUM, { + MAX: 256, + MIN: 2, + DEFAULT: 250, + }); onChangeDivideOption(); @@ -184,15 +192,14 @@ $(() => { loadingShow(); const emdType = e.currentTarget.value; resData.emdType = emdType; - showRidgeLine(resData, resData.COMMON.compareType, true) + showRidgeLine(resData, resData.COMMON.compareType, true); loadingHide(); - }) + }); }); const loading = $('.loading'); const isFormDataValid = (eleIdPrefix, formData) => { - if (eleIdPrefix === eles.varTabPrefix) { const hasDiv = formData.get('div'); if (!hasDiv) { @@ -209,16 +216,19 @@ const reformatFormData = (eleIdPrefix, formData) => { return formatedFormData; }; -const ngRateToColor = (ngRateArray, yScaleFixed=false) => { +const ngRateToColor = (ngRateArray, yScaleFixed = false) => { if (ngRateArray) { - let maxValue = yScaleFixed ? 100 : Math.max(...ngRateArray.map(i => Math.abs(i))); - let minValue = yScaleFixed ? 0 : Math.min(...ngRateArray); + let maxValue = yScaleFixed + ? 100 + : Math.max(...ngRateArray.map((i) => Math.abs(i))); + let minValue = yScaleFixed ? 0 : Math.min(...ngRateArray); if (maxValue === minValue) { maxValue = 100; minValue = 0; } return ngRateArray.map((ngRateValue) => { - hValue = 120 * (1 - ((ngRateValue - minValue) / (maxValue - minValue))); + hValue = + 120 * (1 - (ngRateValue - minValue) / (maxValue - minValue)); const hsv = { h: hValue, s: 1, @@ -231,7 +241,7 @@ const ngRateToColor = (ngRateArray, yScaleFixed=false) => { }; const emdToColor = (emdArray) => { if (emdArray) { - const maxValue = Math.max(...emdArray.map(i => Math.abs(i))); + const maxValue = Math.max(...emdArray.map((i) => Math.abs(i))); const minValue = Math.min(...emdArray); return emdArray.map((emdValue) => { let hValue; @@ -268,7 +278,13 @@ const createEMDTrace = (emdGroup, emdData, emdColors) => ({ showlegend: false, }); -const createEMDByLine = (emdGroup, emdData, emdColors, nTotalList, labelList) => { +const createEMDByLine = ( + emdGroup, + emdData, + emdColors, + nTotalList, + labelList, +) => { const fmt = getFmtValueOfArrayTrim5Percent(emdData); const res = { line: { width: 1, color: '#444444' }, @@ -327,12 +343,21 @@ const showRidgeLine = (res, eleIdPrefix = 'category', isFilterEmd = false) => { const showXAxis = $('#showXAxis').is(':checked'); // generate mock judge data - let judgeIndex = 0 + let judgeIndex = 0; if (res.ng_rates) { for (const judgeData of res.ng_rates) { judgeData.x = res.rlp_xaxis; - renderJudgeChart(eleIdPrefix, rlpCard, judgeIndex, judgeData, startProc, emdType === EMDType.BOTH ? '1' : '', rlpItemHeight, showXAxis) - judgeIndex ++; + renderJudgeChart( + eleIdPrefix, + rlpCard, + judgeIndex, + judgeData, + startProc, + emdType === EMDType.BOTH ? '1' : '', + rlpItemHeight, + showXAxis, + ); + judgeIndex++; } } @@ -348,18 +373,45 @@ const showRidgeLine = (res, eleIdPrefix = 'category', isFilterEmd = false) => { if (emdType === EMDType.BOTH) { showType = i === 1 ? '(Drift)' : '(Diff)'; } - renderRidgeLine(rlpCard, eleIdPrefix, res, plotName, startProc, numGraphs, - rlpItemHeight, compareType, showType, emdIdx, showXAxis); + renderRidgeLine( + rlpCard, + eleIdPrefix, + res, + plotName, + startProc, + numGraphs, + rlpItemHeight, + compareType, + showType, + emdIdx, + showXAxis, + ); emdIdx += 1; } }); }; -const renderJudgeChart = (eleIdPrefix, rlpCard, idx, judgeData, startProcId, emdType, rlpItemHeight, showXAxis) => { +const renderJudgeChart = ( + eleIdPrefix, + rlpCard, + idx, + judgeData, + startProcId, + emdType, + rlpItemHeight, + showXAxis, +) => { const colId = judgeData.end_col_id; - const ngCondition = `${judgeData.NGCondition} ${judgeData.NGConditionValue}` - const [CTTile, fromStartProcClass, facetDetailHTML, titleStyle] = genCommonTitleChartInfo(colId, startProcId, judgeData.end_proc_id, judgeData.catExpBox, emdType); + const ngCondition = `${judgeData.NGCondition} ${judgeData.NGConditionValue}`; + const [CTTile, fromStartProcClass, facetDetailHTML, titleStyle] = + genCommonTitleChartInfo( + colId, + startProcId, + judgeData.end_proc_id, + judgeData.catExpBox, + emdType, + ); const cardId = `judgeChart${colId}-${idx}`; const cardGroupID = `judgeChartGroup${colId}-${idx}`; const showName = `${judgeData.sensor_name}${CTTile} ${ngCondition}`; @@ -381,31 +433,46 @@ const renderJudgeChart = (eleIdPrefix, rlpCard, idx, judgeData, startProcId, emd
      `); - const noneIdxs = judgeData.y.map((rateVal, idx) => rateVal == null ? idx : null).filter(i => i); + const noneIdxs = judgeData.y + .map((rateVal, idx) => (rateVal == null ? idx : null)) + .filter((i) => i); judgeData.x = judgeData.x.filter((x, idx) => !noneIdxs.includes(idx)); judgeData.y = judgeData.y.filter((y, idx) => !noneIdxs.includes(idx)); - judgeData.count = judgeData.count.filter((c, idx) => !noneIdxs.includes(idx)); + judgeData.count = judgeData.count.filter( + (c, idx) => !noneIdxs.includes(idx), + ); // judgeData.categories = judgeData.categories.filter((cat, idx) => !noneIdxs.includes(idx)); - let [groupName, categories, datetimeCategory, tickTexts, tickVals] = genTickTextAndTickValue(eleIdPrefix, resData.categories, [], resData.rlp_xaxis, 9); - categories = categories.filter((y, idx) => !noneIdxs.includes(idx)); - datetimeCategory = datetimeCategory.filter((y, idx) => !noneIdxs.includes(idx)); + let [groupName, categories, datetimeCategory, tickTexts, tickVals] = + genTickTextAndTickValue( + eleIdPrefix, + resData.categories, + [], + resData.rlp_xaxis, + 9, + ); + categories = categories.filter((y, idx) => !noneIdxs.includes(idx)); + datetimeCategory = datetimeCategory.filter( + (y, idx) => !noneIdxs.includes(idx), + ); judgeXAxis[eleIdPrefix].push(tickVals); const markerColor = ngRateToColor(judgeData.y); - const data = [{ - marker: { - color: markerColor - // colorscale: dnJETColorScale, - // color: judgeData.y + const data = [ + { + marker: { + color: markerColor, + // colorscale: dnJETColorScale, + // color: judgeData.y + }, + mode: 'lines+markers', + type: 'scatter', + y: judgeData.y, + x: judgeData.x, + text: judgeData.count, + hoverinfo: 'none', + line: { width: 1, color: '#444444' }, }, - mode: 'lines+markers', - type: 'scatter', - y: judgeData.y, - x: judgeData.x, - text: judgeData.count, - hoverinfo: 'none', - line: { width: 1, color: '#444444' }, - }]; + ]; const layout = { font: { color: 'white' }, @@ -444,7 +511,7 @@ const renderJudgeChart = (eleIdPrefix, rlpCard, idx, judgeData, startProcId, emd linecolor: '#757575', linewidth: 1, mirror: true, - range: [0.05, 1.2] + range: [0.05, 1.2], }, margin: { l: 64, @@ -457,9 +524,9 @@ const renderJudgeChart = (eleIdPrefix, rlpCard, idx, judgeData, startProcId, emd showlegend: false, plot_bgcolor: '#222222', paper_bgcolor: '#222222', - } + }; - judgeLayout.push(layout) + judgeLayout.push(layout); // judgeScaleData[cardId].layout = layout; judgeScaleData[cardId] = { color: judgeData.y, @@ -469,26 +536,23 @@ const renderJudgeChart = (eleIdPrefix, rlpCard, idx, judgeData, startProcId, emd const judgePlot = document.getElementById(cardId); - Plotly.newPlot( - cardId, - data, - layout, - { - ...genPlotlyIconSettings(), - responsive: true, // responsive - useResizeHandler: true, // responsive - style: {width: '100%', height: 250}, // responsive - }, - ); + Plotly.newPlot(cardId, data, layout, { + ...genPlotlyIconSettings(), + responsive: true, // responsive + useResizeHandler: true, // responsive + style: { width: '100%', height: 250 }, // responsive + }); judgePlot.on('plotly_hover', (data) => { const dataPoint = data.points && data.points[0]; const y = dataPoint.y; const count = dataPoint.text; - const position = {x: data.event.pageX - 120, y: data.event.pageY}; + const position = { x: data.event.pageX - 120, y: data.event.pageY }; const pointIndex = dataPoint.pointIndex; const catName = datetimeCategory.length ? 'Category' : 'Div'; - const catVal = datetimeCategory.length ? datetimeCategory[pointIndex] : categories[pointIndex]; + const catVal = datetimeCategory.length + ? datetimeCategory[pointIndex] + : categories[pointIndex]; const hoverInfo = [ [judgeData.sensor_name, ngCondition], ['NG rate', applySignificantDigit(y) + ' %'], @@ -511,30 +575,57 @@ const renderJudgeChart = (eleIdPrefix, rlpCard, idx, judgeData, startProcId, emd 120, true, cardId, - ) + ); }); unHoverHandler(judgePlot); }; -const genCommonTitleChartInfo = (colId, startProcId, endProcId, catExpBox, emdType) => { - const cfgProcess = procConfigs[parseInt(endProcId)] || procConfigs[endProcId]; +const genCommonTitleChartInfo = ( + colId, + startProcId, + endProcId, + catExpBox, + emdType, +) => { + const cfgProcess = + procConfigs[parseInt(endProcId)] || procConfigs[endProcId]; const column = cfgProcess.getColumnById(colId); const isColCT = column.data_type === DataTypes.DATETIME.name; const CTTile = isColCT ? ` (${DataTypes.DATETIME.short}) [sec]` : ''; - catExpBox = catExpBox && _.isArray(catExpBox) ? catExpBox.join(' | ') : catExpBox; + catExpBox = + catExpBox && _.isArray(catExpBox) ? catExpBox.join(' | ') : catExpBox; - const fromStartProcClass = String(startProcId) === String(endProcId) ? ' card-active' : ''; + const fromStartProcClass = + String(startProcId) === String(endProcId) ? ' card-active' : ''; const facetLabel = catExpBox && catExpBox !== 'None' ? catExpBox : ''; - const facetDetailHTML = facetLabel ? `${facetLabel}` : ''; - const titleStyle = facetLabel && emdType ? 'width: 80px' : (facetLabel && !emdType || !facetLabel && emdType) ? 'width: 65px' : ''; - - return [CTTile, fromStartProcClass, facetDetailHTML, titleStyle] + const facetDetailHTML = facetLabel + ? `${facetLabel}` + : ''; + const titleStyle = + facetLabel && emdType + ? 'width: 80px' + : (facetLabel && !emdType) || (!facetLabel && emdType) + ? 'width: 65px' + : ''; + + return [CTTile, fromStartProcClass, facetDetailHTML, titleStyle]; }; - -const renderRidgeLine = (rlpCard, eleIdPrefix, res, plotName, startProc, numGraphs, rlpItemHeight, compareType, emdType, emdIdx, showXAxis) => { +const renderRidgeLine = ( + rlpCard, + eleIdPrefix, + res, + plotName, + startProc, + numGraphs, + rlpItemHeight, + compareType, + emdType, + emdIdx, + showXAxis, +) => { // const originalData = []; const ridgelineCardID = `${eleIdPrefix}RLPCard-${plotName}-${emdIdx}`; const rlpCardGroupID = `${eleIdPrefix}RLPCardGroup-${plotName}-${emdIdx}`; @@ -558,9 +649,19 @@ const renderRidgeLine = (rlpCard, eleIdPrefix, res, plotName, startProc, numGrap }; const emdColors = emdToColor(emdData); const rlpColors = [...emdColors]; - const transRLPColors = transEMDFromRidgeline(rlpColors, sensorData.ridgelines); + const transRLPColors = transEMDFromRidgeline( + rlpColors, + sensorData.ridgelines, + ); - const [CTTile, fromStartProcClass, facetDetailHTML, titleStyle] = genCommonTitleChartInfo(sensorData.sensor_id, startProc, end_proc_id, sensorData.catExpBox, emdType); + const [CTTile, fromStartProcClass, facetDetailHTML, titleStyle] = + genCommonTitleChartInfo( + sensorData.sensor_id, + startProc, + end_proc_id, + sensorData.catExpBox, + emdType, + ); rlpCard.append(`
      @@ -584,9 +685,19 @@ const renderRidgeLine = (rlpCard, eleIdPrefix, res, plotName, startProc, numGrap }; const { yMin, yMax } = getYSaleOption(sensorData); - const yRange = checkTrue(yMax) && checkTrue(yMax) ? [yMin, yMax] : sensorData.rlp_yaxis; - - const [groupName, categories, datetimeCategory, tickTexts, tickVals] = genTickTextAndTickValue(eleIdPrefix, resData.categories, sensorData.ridgelines, sensorData.rlp_xaxis, 9); + const yRange = + checkTrue(yMax) && checkTrue(yMax) + ? [yMin, yMax] + : sensorData.rlp_yaxis; + + const [groupName, categories, datetimeCategory, tickTexts, tickVals] = + genTickTextAndTickValue( + eleIdPrefix, + resData.categories, + sensorData.ridgelines, + sensorData.rlp_xaxis, + 9, + ); // rlp new layout const rlpLayout = rlpByLineTemplate( @@ -611,8 +722,13 @@ const renderRidgeLine = (rlpCard, eleIdPrefix, res, plotName, startProc, numGrap const histLabels = sensorData.ridgelines[k].kde_data.hist_labels; const ntotal = sensorData.ridgelines[k].data_counts; const transKDE = sensorData.ridgelines[k].trans_kde; - const lineColor = (sensorData.ridgelines[k].data_counts >= 8) ? transRLPColors[k] : '#808080'; - const rlpLabel = datetimeCategory.length ? datetimeCategory[k] : categories[k]; + const lineColor = + sensorData.ridgelines[k].data_counts >= 8 + ? transRLPColors[k] + : '#808080'; + const rlpLabel = datetimeCategory.length + ? datetimeCategory[k] + : categories[k]; nTotalList.push(ntotal); labelList.push(rlpLabel); const rlpInst = rlpSingleLine( @@ -630,45 +746,56 @@ const renderRidgeLine = (rlpCard, eleIdPrefix, res, plotName, startProc, numGrap } } // get all ridgelines which has trans_kde but data_counts < 8 - const inValidEMDIdx = sensorData.ridgelines.filter(i => i.trans_kde.length).map((v, i) => { - if (v.data_counts > 0 && v.data_counts < 8) { - return i; - } - return null; - }).filter(i => i); + const inValidEMDIdx = sensorData.ridgelines + .filter((i) => i.trans_kde.length) + .map((v, i) => { + if (v.data_counts > 0 && v.data_counts < 8) { + return i; + } + return null; + }) + .filter((i) => i); // EMD and color will be excluding the ridgeline which data counts < 8 const validEMDDat = emdData.filter((v, i) => !inValidEMDIdx.includes(i)); nTotalList = nTotalList.filter((v, i) => !exceptIdx.includes(i)); labelList = labelList.filter((v, i) => !exceptIdx.includes(i)); - const validRLPXAxis = sensorData.rlp_xaxis.filter((v, i) => !exceptIdx.includes(i) - && sensorData.ridgelines[i].trans_kde.length); - const validEMDColor = emdColors.filter((v, i) => !inValidEMDIdx.includes(i)); + const validRLPXAxis = sensorData.rlp_xaxis.filter( + (v, i) => + !exceptIdx.includes(i) && sensorData.ridgelines[i].trans_kde.length, + ); + const validEMDColor = emdColors.filter( + (v, i) => !inValidEMDIdx.includes(i), + ); // remove emdData in case of data point less than 8 if (validEMDDat) { - const [rlpEMD, fmt] = createEMDByLine(validRLPXAxis, validEMDDat, validEMDColor, nTotalList, labelList); - rlpLayout.template.layout.yaxis2.tickformat = fmt.includes('e') ? '.1e' : ''; + const [rlpEMD, fmt] = createEMDByLine( + validRLPXAxis, + validEMDDat, + validEMDColor, + nTotalList, + labelList, + ); + rlpLayout.template.layout.yaxis2.tickformat = fmt.includes('e') + ? '.1e' + : ''; // push emd to data list rlpData.push(rlpEMD); } - Plotly.newPlot( - ridgelineCardID, - rlpData, - rlpLayout, - { - ...genPlotlyIconSettings(), - responsive: true, // responsive - useResizeHandler: true, // responsive - style: {width: '100%', height: 250}, // responsive - }, - ); + Plotly.newPlot(ridgelineCardID, rlpData, rlpLayout, { + ...genPlotlyIconSettings(), + responsive: true, // responsive + useResizeHandler: true, // responsive + style: { width: '100%', height: 250 }, // responsive + }); const hdPlot = document.getElementById(ridgelineCardID); const rlpDataTable = (data) => { const isRLP = data.points[0].data.customdata.isridgline; - const dpIndex = ('pointIndex' in data.points[0]) - ? data.points[0].pointIndex - : data.points[0].pointIndices[0]; + const dpIndex = + 'pointIndex' in data.points[0] + ? data.points[0].pointIndex + : data.points[0].pointIndices[0]; // "2022-03-15 07:00 – 2022-03-17 07:00" let textValue = ''; @@ -701,7 +828,6 @@ const renderRidgeLine = (rlpCard, eleIdPrefix, res, plotName, startProc, numGrap if (isRLP) { const yValue = data.points[0].data.customdata.count || 0; dataTable = genDataTable(label[0], label[1], yValue); - } else { const count = data.points[0].data.customdata.count[dpIndex]; const fmt = data.points[0].data.customdata.fmt; @@ -712,7 +838,8 @@ const renderRidgeLine = (rlpCard, eleIdPrefix, res, plotName, startProc, numGrap genDataPointHoverTable( dataTable, { - x: data.event.pageX - 120, y: data.event.pageY, + x: data.event.pageX - 120, + y: data.event.pageY, }, 175, true, @@ -725,14 +852,23 @@ const renderRidgeLine = (rlpCard, eleIdPrefix, res, plotName, startProc, numGrap unHoverHandler(hdPlot); // report progress - loadingUpdate(loadingProgressBackend + emdIdx * ((100 - loadingProgressBackend) / (numGraphs || 1))); + loadingUpdate( + loadingProgressBackend + + emdIdx * ((100 - loadingProgressBackend) / (numGraphs || 1)), + ); }; -const genTickTextAndTickValue = (eleIdPrefix, categories, ridgelines, xAxisVals, nticks = 9) => { - // tmp groups for EMD zero case +const genTickTextAndTickValue = ( + eleIdPrefix, + categories, + ridgelines, + xAxisVals, + nticks = 9, +) => { + // tmp groups for EMD zero case let groupName = []; if (categories.length === 1 && categories.length < ridgelines.length) { - groupName = ridgelines.map(rlp => rlp.cate_name); + groupName = ridgelines.map((rlp) => rlp.cate_name); } else { groupName = categories; } @@ -745,7 +881,7 @@ const genTickTextAndTickValue = (eleIdPrefix, categories, ridgelines, xAxisVals, groupName = Array.from(uniqueGroupName); } - const datetimeCategory = []; + const datetimeCategory = []; // convert local time if category is datetime categories = groupName.map((group) => { if (eleIdPrefix === eles.varTabPrefix) { @@ -758,25 +894,31 @@ const genTickTextAndTickValue = (eleIdPrefix, categories, ridgelines, xAxisVals, const endDt = timeRange[1]; const startDateTime = formatDateTime(startDt, DATETIME_FORMAT); const endDateTime = formatDateTime(endDt, DATETIME_FORMAT); - datetimeCategory.push(`${startDateTime} ${COMMON_CONSTANT.EN_DASH} ${endDateTime}${timeRange.slice(2).length ? ` | ${timeRange.slice(2).join(' | ')}` : ''}`); + datetimeCategory.push( + `${startDateTime} ${COMMON_CONSTANT.EN_DASH} ${endDateTime}${timeRange.slice(2).length ? ` | ${timeRange.slice(2).join(' | ')}` : ''}`, + ); return `${startDateTime}`; } return group; }); - // re-scale groups in x-axes + // re-scale groups in x-axes let tickVals = [...xAxisVals]; let tickTexts = [...categories]; if (nticks > 0) { const step = Math.ceil(tickTexts.length / nticks); // nticks = 20, groups = 100 -> step = 5 - const tickIndexs = groupName.map((v, i) => ((i % step === 0) ? i : null)).filter(i => i !== null); + const tickIndexs = groupName + .map((v, i) => (i % step === 0 ? i : null)) + .filter((i) => i !== null); tickTexts = categories.filter((v, i) => tickIndexs.includes(i)); - tickTexts = tickTexts.map(tick => (_.isString(tick) ? tick.replace('|', '
      ~') : tick)); + tickTexts = tickTexts.map((tick) => + _.isString(tick) ? tick.replace('|', '
      ~') : tick, + ); tickVals = tickVals.filter((v, i) => tickIndexs.includes(i)); } return [groupName, categories, datetimeCategory, tickTexts, tickVals]; -} +}; const isRLPHasFewDataPoint = (res) => { let result = false; @@ -790,7 +932,11 @@ const isRLPHasFewDataPoint = (res) => { return result; }; -const collectRLPFormData = (clearOnFlyFilter, eleIdPrefix, autoUpdate = false) => { +const collectRLPFormData = ( + clearOnFlyFilter, + eleIdPrefix, + autoUpdate = false, +) => { if (autoUpdate) { return genDatetimeRange(lastUsedFormData); } @@ -836,10 +982,14 @@ const showGraph = (clearOnFlyFilter = true, autoUpdate = false) => { beforeShowGraphCommon(clearOnFlyFilter); if (clearOnFlyFilter) { - resetCheckedCats(); + resetCheckedCats(); } - let formData = collectRLPFormData(clearOnFlyFilter, eleIdPrefix, autoUpdate); + let formData = collectRLPFormData( + clearOnFlyFilter, + eleIdPrefix, + autoUpdate, + ); // validate form const validateFlg = isFormDataValid(eleIdPrefix, formData); @@ -859,48 +1009,61 @@ const showGraph = (clearOnFlyFilter = true, autoUpdate = false) => { resetGraphSetting(); } - showGraphCallApi('/ap/api/rlp/index', formData, REQUEST_TIMEOUT, async (res) => { - res = sortResponseData(res); - resData = res; - graphStore.setTraceData(_.cloneDeep(res)); - // Sprint73_#18.1 : array_xのlengthをチェックする - if (isRLPHasFewDataPoint(res)) { - showToastrMsg(i18n.FewDataPointInRLP); - } + showGraphCallApi( + '/ap/api/rlp/index', + formData, + REQUEST_TIMEOUT, + async (res) => { + res = sortResponseData(res); + resData = res; + graphStore.setTraceData(_.cloneDeep(res)); + // Sprint73_#18.1 : array_xのlengthをチェックする + if (isRLPHasFewDataPoint(res)) { + showToastrMsg(i18n.FewDataPointInRLP); + } - // show limit graphs displayed message - if (res.isGraphLimited) { - showToastrMsg(i18nCommon.limitDisplayedGraphs.replace('NUMBER', MAX_NUMBER_OF_GRAPH)); - } + // show limit graphs displayed message + if (res.isGraphLimited) { + showToastrMsg( + i18nCommon.limitDisplayedGraphs.replace( + 'NUMBER', + MAX_NUMBER_OF_GRAPH, + ), + ); + } - // show result section - $(`#${eles.categoryPlotCards}`).css('display', 'block'); + // show result section + $(`#${eles.categoryPlotCards}`).css('display', 'block'); - // disable emd type in chart - const isDisabledEMD = res.emdType !== EMDType.BOTH; - $('select[name=filterEmd]').val(res.emdType); - $('select[name=filterEmd]').prop('disabled', isDisabledEMD); + // disable emd type in chart + const isDisabledEMD = res.emdType !== EMDType.BOTH; + $('select[name=filterEmd]').val(res.emdType); + $('select[name=filterEmd]').prop('disabled', isDisabledEMD); - // show graphs - showRidgeLine(res, eleIdPrefix); - isGraphShown = true; + // show graphs + showRidgeLine(res, eleIdPrefix); + isGraphShown = true; - // show info table - showInfoTable(res); + // show info table + showInfoTable(res); - if (!autoUpdate) { - $('html, body').animate({ - scrollTop: $('#RLPCard').offset().top, - }, 1000); - }; + if (!autoUpdate) { + $('html, body').animate( + { + scrollTop: getOffsetTopDisplayGraph('#CatePlotCards'), + }, + 1000, + ); + } - // render cat, category label filer modal - fillDataToFilterModal(res.filter_on_demand, () => { - showGraph(false); - }); + // render cat, category label filer modal + fillDataToFilterModal(res.filter_on_demand, () => { + showGraph(false); + }); - setPollingData(formData, showGraph, [false, true]); - }); + setPollingData(formData, showGraph, [false, true]); + }, + ); }; const sortResponseData = (res) => { @@ -908,19 +1071,23 @@ const sortResponseData = (res) => { // attach emd to each plotData let index = 0; for (let i = 0; i < res.array_plotdata.length; i += 1) { - res.array_plotdata[i].emd = [] + res.array_plotdata[i].emd = []; if (res.emdType === 'both') { - for (let j = 0; j < 2; j+=1) { + for (let j = 0; j < 2; j += 1) { res.array_plotdata[i].emd.push(res.emd[index]); - index ++; + index++; } } else { res.array_plotdata[i].emd = [res.emd[i]]; } } - res.array_plotdata = sortGraphs(res.array_plotdata, 'sensor_id', latestSortColIds); - res.emd = [] + res.array_plotdata = sortGraphs( + res.array_plotdata, + 'sensor_id', + latestSortColIds, + ); + res.emd = []; for (let i = 0; i < res.array_plotdata.length; i += 1) { res.emd.push(...res.array_plotdata[i].emd); } @@ -934,22 +1101,21 @@ const handleSortGraphPosition = () => { resData = sortResponseData(resData); showRidgeLine(resData, eleIdPrefix); loadingHide(); -} - +}; const resetGraphSetting = () => { - // reset yScaleOption value to graph setting + // reset yScaleOption value to graph setting $(formElements.yScaleOption).val(1); }; -// eslint-disable-next-line no-unused-vars const scrollRLPChart = (() => { jQuery.expr.filters.offscreen = (el) => { const rect = el.getBoundingClientRect(); return ( - (rect.x + rect.width) < 0 - || (rect.y + rect.height) < 0 - || (rect.x > window.innerWidth || rect.y > window.innerHeight) + rect.x + rect.width < 0 || + rect.y + rect.height < 0 || + rect.x > window.innerWidth || + rect.y > window.innerHeight ); }; const $window = $(window); @@ -960,12 +1126,17 @@ const scrollRLPChart = (() => { const stickiesParentCard = $stickies.closest('.card')[0].id; const currentTerm = stickiesParentCard.split('RLPCard')[0]; - const pinnedCardHeight = $($(`#${stickiesParentCard} .ridgeLineItem`)[0]).height(); + const pinnedCardHeight = $( + $(`#${stickiesParentCard} .ridgeLineItem`)[0], + ).height(); const anchorPosition = $('#showXAxis').parent().parent().offset().top; - const isScrollOverCategoryTabl = $(window).scrollTop() + pinnedCardHeight < anchorPosition; + const isScrollOverCategoryTabl = + $(window).scrollTop() + pinnedCardHeight < anchorPosition; if (isScrollOverCategoryTabl) { - if ($stickies.find('.btn-anchor').hasClass('pin') - && $stickies.hasClass('pinChart')) { + if ( + $stickies.find('.btn-anchor').hasClass('pin') && + $stickies.hasClass('pinChart') + ) { $stickies.removeClass('pinChart'); } } else if ($stickies.find('.btn-anchor').hasClass('pin')) { @@ -973,9 +1144,10 @@ const scrollRLPChart = (() => { } }; const load = (stickies) => { - if (typeof stickies === 'object' - && stickies instanceof jQuery - && stickies.length > 0 + if ( + typeof stickies === 'object' && + stickies instanceof jQuery && + stickies.length > 0 // && stickies.id !== 'cate-card' ) { let $originWH = $(document).height(); @@ -1039,24 +1211,30 @@ const pinChart = (chartDOMId) => { const showXAxisLabel = (element) => { const isShowAxis = $(element).is(':checked'); const comparetype = resData.COMMON.compareType; - $('#RLPCard .ridgeLineChart').find('.ridgeLineCard-full').each((i, card) => { - const layout = { - xaxis: { - tickvals: isShowAxis ? rlpXAxis[comparetype][i] : [], - }, - margin: { - b: isShowAxis ? 23 : 15, - }, - }; - Plotly.relayout(card.id, layout); - }); + $('#RLPCard .ridgeLineChart') + .find('.ridgeLineCard-full') + .each((i, card) => { + const layout = { + xaxis: { + tickvals: isShowAxis ? rlpXAxis[comparetype][i] : [], + }, + margin: { + b: isShowAxis ? 23 : 15, + }, + }; + Plotly.relayout(card.id, layout); + }); - $('#RLPCard .judgeChart').find('.ridgeLineCard-full').each((i, card) => { - const layout = judgeLayout[i]; - layout.xaxis.tickvals = isShowAxis ? judgeXAxis[comparetype][i] : []; - layout.margin.b = isShowAxis ? 23 : 15; - Plotly.relayout(card.id, layout); - }); + $('#RLPCard .judgeChart') + .find('.ridgeLineCard-full') + .each((i, card) => { + const layout = judgeLayout[i]; + layout.xaxis.tickvals = isShowAxis + ? judgeXAxis[comparetype][i] + : []; + layout.margin.b = isShowAxis ? 23 : 15; + Plotly.relayout(card.id, layout); + }); }; const getYSaleOption = (scaleData) => { @@ -1066,8 +1244,8 @@ const getYSaleOption = (scaleData) => { const yMax = scaleOption ? scaleOption['y-max'] : undefined; return { yMin, - yMax - } + yMax, + }; }; const changeRLPScale = () => { @@ -1075,56 +1253,64 @@ const changeRLPScale = () => { const graphScaleSelected = $(formElements.yScaleOption).val(); const isShowAxis = $(formElements.showXAxisOption).is(':checked'); const comparetype = resData.COMMON.compareType; - $('#RLPCard .ridgeLineChart').find('.ridgeLineCard-full').each((i, card) => { - const variableIDx = Number(card.id.split('-')[1]); - const layout = { - xaxis: { - tickvals: isShowAxis ? rlpXAxis[comparetype][i] : [], - }, - margin: { - b: isShowAxis ? 23 : 15, - }, - }; - const { yMin, yMax } = getYSaleOption(resData.array_plotdata[variableIDx]) - if (yMin !== undefined && yMax !== undefined) { - layout.yaxis = { - range: [yMin, yMax], + $('#RLPCard .ridgeLineChart') + .find('.ridgeLineCard-full') + .each((i, card) => { + const variableIDx = Number(card.id.split('-')[1]); + const layout = { + xaxis: { + tickvals: isShowAxis ? rlpXAxis[comparetype][i] : [], + }, + margin: { + b: isShowAxis ? 23 : 15, + }, }; - } - // for EMD - let emdArr = resData.emd[i]; - if (scaleOptionConst.COMMON === graphScaleSelected) { - let allEMDValue = []; - resData.emd.forEach(e => allEMDValue = [...allEMDValue, ...e]); - if (allEMDValue.length) { - emdArr = allEMDValue; + const { yMin, yMax } = getYSaleOption( + resData.array_plotdata[variableIDx], + ); + if (yMin !== undefined && yMax !== undefined) { + layout.yaxis = { + range: [yMin, yMax], + }; } - } - const EMDRange = [Math.min(...emdArr), Math.max(...emdArr)]; - if (EMDRange) { - // padding 10% for EMD graph - const EMDPadding = (EMDRange[1] - EMDRange[0]) * 0.1; - layout.yaxis2 = { - range: [EMDRange[0] - EMDPadding, EMDRange[1] + EMDPadding], - }; - } - Plotly.relayout(card.id, layout); - }); + // for EMD + let emdArr = resData.emd[i]; + if (scaleOptionConst.COMMON === graphScaleSelected) { + let allEMDValue = []; + resData.emd.forEach( + (e) => (allEMDValue = [...allEMDValue, ...e]), + ); + if (allEMDValue.length) { + emdArr = allEMDValue; + } + } + const EMDRange = [Math.min(...emdArr), Math.max(...emdArr)]; + if (EMDRange) { + // padding 10% for EMD graph + const EMDPadding = (EMDRange[1] - EMDRange[0]) * 0.1; + layout.yaxis2 = { + range: [EMDRange[0] - EMDPadding, EMDRange[1] + EMDPadding], + }; + } + Plotly.relayout(card.id, layout); + }); // for NG rate - $('#RLPCard .judgeChart ').find('.ridgeLineCard-full').each((i, card) => { - let {layout, color} = judgeScaleData[card.id]; - // deeply clone origin data with colorscale - let data = _.cloneDeep(judgeScaleData[card.id].data); - // set default y axis range - layout.yaxis.autorange = true; - let isCommonScale = scaleOptionConst.COMMON === graphScaleSelected; - if (isCommonScale) { - layout.yaxis.autorange = false; - layout.yaxis.range = [0, 100]; - data[0].marker.color = ngRateToColor(color, isCommonScale); - } - Plotly.react(card.id, data, layout); - }); + $('#RLPCard .judgeChart ') + .find('.ridgeLineCard-full') + .each((i, card) => { + let { layout, color } = judgeScaleData[card.id]; + // deeply clone origin data with colorscale + let data = _.cloneDeep(judgeScaleData[card.id].data); + // set default y axis range + layout.yaxis.autorange = true; + let isCommonScale = scaleOptionConst.COMMON === graphScaleSelected; + if (isCommonScale) { + layout.yaxis.autorange = false; + layout.yaxis.range = [0, 100]; + data[0].marker.color = ngRateToColor(color, isCommonScale); + } + Plotly.react(card.id, data, layout); + }); }; const dumpData = (type, exportFrom) => { diff --git a/ap/static/ridgeline_plot/js/ridgeline_plot_utils.js b/ap/static/ridgeline_plot/js/ridgeline_plot_utils.js index 5188026..992f002 100644 --- a/ap/static/ridgeline_plot/js/ridgeline_plot_utils.js +++ b/ap/static/ridgeline_plot/js/ridgeline_plot_utils.js @@ -1,12 +1,19 @@ - // generate HTML for tabs const generateTabHTML = (endProcName, sensors, showViewer = false) => { - const genNavItemHTML = (tabId, sensorMasterName, status = '') => `
    • + const genNavItemHTML = ( + tabId, + sensorMasterName, + status = '', + ) => `
    • ${sensorMasterName}
      • `; - const genTabContentHTML = (tabId, plotCardId, status = '') => `
      + const genTabContentHTML = ( + tabId, + plotCardId, + status = '', + ) => `
      `; @@ -14,7 +21,12 @@ const generateTabHTML = (endProcName, sensors, showViewer = false) => { const tabContentHTMLs = []; for (let sensorIdx = 0; sensorIdx < sensors.length; sensorIdx++) { const sensorName = sensors[sensorIdx]; - const sensorMasterName = getNode(valueInfo, [endProcName, 'value_master', sensorName], sensorName) || sensorName; + const sensorMasterName = + getNode( + valueInfo, + [endProcName, 'value_master', sensorName], + sensorName, + ) || sensorName; let status = ''; if (sensorIdx === 0) { status = 'active'; @@ -30,8 +42,14 @@ const generateTabHTML = (endProcName, sensors, showViewer = false) => { let viewerNavHTML = ''; let viewerContentHTML = ''; if (showViewer) { - viewerNavHTML = genNavItemHTML(tabId = 'scattersTab', sensorMasterName = i18n.viewerTabName); - viewerContentHTML = genTabContentHTML(tabId = 'scattersTab', plotCardId = 'varScatterPlotCards'); + viewerNavHTML = genNavItemHTML( + (tabId = 'scattersTab'), + (sensorMasterName = i18n.viewerTabName), + ); + viewerContentHTML = genTabContentHTML( + (tabId = 'scattersTab'), + (plotCardId = 'varScatterPlotCards'), + ); } const stratifiedVarTabHTML = `
        diff --git a/ap/static/ridgeline_plot/js/rlp_template.js b/ap/static/ridgeline_plot/js/rlp_template.js index 8ce6445..d29d67b 100644 --- a/ap/static/ridgeline_plot/js/rlp_template.js +++ b/ap/static/ridgeline_plot/js/rlp_template.js @@ -65,46 +65,16 @@ const rlpTemplate = (shapes, plotName = '') => ({ ticks: '', }, colorscale: [ - [ - 0.0, - '#0d0887', - ], - [ - 0.1111111111111111, - '#46039f', - ], - [ - 0.2222222222222222, - '#7201a8', - ], - [ - 0.3333333333333333, - '#9c179e', - ], - [ - 0.4444444444444444, - '#bd3786', - ], - [ - 0.5555555555555556, - '#d8576b', - ], - [ - 0.6666666666666666, - '#ed7953', - ], - [ - 0.7777777777777778, - '#fb9f3a', - ], - [ - 0.8888888888888888, - '#fdca26', - ], - [ - 1.0, - '#f0f921', - ], + [0.0, '#0d0887'], + [0.1111111111111111, '#46039f'], + [0.2222222222222222, '#7201a8'], + [0.3333333333333333, '#9c179e'], + [0.4444444444444444, '#bd3786'], + [0.5555555555555556, '#d8576b'], + [0.6666666666666666, '#ed7953'], + [0.7777777777777778, '#fb9f3a'], + [0.8888888888888888, '#fdca26'], + [1.0, '#f0f921'], ], type: 'contour', }, @@ -125,46 +95,16 @@ const rlpTemplate = (shapes, plotName = '') => ({ ticks: '', }, colorscale: [ - [ - 0.0, - '#0d0887', - ], - [ - 0.1111111111111111, - '#46039f', - ], - [ - 0.2222222222222222, - '#7201a8', - ], - [ - 0.3333333333333333, - '#9c179e', - ], - [ - 0.4444444444444444, - '#bd3786', - ], - [ - 0.5555555555555556, - '#d8576b', - ], - [ - 0.6666666666666666, - '#ed7953', - ], - [ - 0.7777777777777778, - '#fb9f3a', - ], - [ - 0.8888888888888888, - '#fdca26', - ], - [ - 1.0, - '#f0f921', - ], + [0.0, '#0d0887'], + [0.1111111111111111, '#46039f'], + [0.2222222222222222, '#7201a8'], + [0.3333333333333333, '#9c179e'], + [0.4444444444444444, '#bd3786'], + [0.5555555555555556, '#d8576b'], + [0.6666666666666666, '#ed7953'], + [0.7777777777777778, '#fb9f3a'], + [0.8888888888888888, '#fdca26'], + [1.0, '#f0f921'], ], type: 'heatmap', }, @@ -176,46 +116,16 @@ const rlpTemplate = (shapes, plotName = '') => ({ ticks: '', }, colorscale: [ - [ - 0.0, - '#0d0887', - ], - [ - 0.1111111111111111, - '#46039f', - ], - [ - 0.2222222222222222, - '#7201a8', - ], - [ - 0.3333333333333333, - '#9c179e', - ], - [ - 0.4444444444444444, - '#bd3786', - ], - [ - 0.5555555555555556, - '#d8576b', - ], - [ - 0.6666666666666666, - '#ed7953', - ], - [ - 0.7777777777777778, - '#fb9f3a', - ], - [ - 0.8888888888888888, - '#fdca26', - ], - [ - 1.0, - '#f0f921', - ], + [0.0, '#0d0887'], + [0.1111111111111111, '#46039f'], + [0.2222222222222222, '#7201a8'], + [0.3333333333333333, '#9c179e'], + [0.4444444444444444, '#bd3786'], + [0.5555555555555556, '#d8576b'], + [0.6666666666666666, '#ed7953'], + [0.7777777777777778, '#fb9f3a'], + [0.8888888888888888, '#fdca26'], + [1.0, '#f0f921'], ], type: 'heatmapgl', }, @@ -238,46 +148,16 @@ const rlpTemplate = (shapes, plotName = '') => ({ ticks: '', }, colorscale: [ - [ - 0.0, - '#0d0887', - ], - [ - 0.1111111111111111, - '#46039f', - ], - [ - 0.2222222222222222, - '#7201a8', - ], - [ - 0.3333333333333333, - '#9c179e', - ], - [ - 0.4444444444444444, - '#bd3786', - ], - [ - 0.5555555555555556, - '#d8576b', - ], - [ - 0.6666666666666666, - '#ed7953', - ], - [ - 0.7777777777777778, - '#fb9f3a', - ], - [ - 0.8888888888888888, - '#fdca26', - ], - [ - 1.0, - '#f0f921', - ], + [0.0, '#0d0887'], + [0.1111111111111111, '#46039f'], + [0.2222222222222222, '#7201a8'], + [0.3333333333333333, '#9c179e'], + [0.4444444444444444, '#bd3786'], + [0.5555555555555556, '#d8576b'], + [0.6666666666666666, '#ed7953'], + [0.7777777777777778, '#fb9f3a'], + [0.8888888888888888, '#fdca26'], + [1.0, '#f0f921'], ], type: 'histogram2d', }, @@ -289,46 +169,16 @@ const rlpTemplate = (shapes, plotName = '') => ({ ticks: '', }, colorscale: [ - [ - 0.0, - '#0d0887', - ], - [ - 0.1111111111111111, - '#46039f', - ], - [ - 0.2222222222222222, - '#7201a8', - ], - [ - 0.3333333333333333, - '#9c179e', - ], - [ - 0.4444444444444444, - '#bd3786', - ], - [ - 0.5555555555555556, - '#d8576b', - ], - [ - 0.6666666666666666, - '#ed7953', - ], - [ - 0.7777777777777778, - '#fb9f3a', - ], - [ - 0.8888888888888888, - '#fdca26', - ], - [ - 1.0, - '#f0f921', - ], + [0.0, '#0d0887'], + [0.1111111111111111, '#46039f'], + [0.2222222222222222, '#7201a8'], + [0.3333333333333333, '#9c179e'], + [0.4444444444444444, '#bd3786'], + [0.5555555555555556, '#d8576b'], + [0.6666666666666666, '#ed7953'], + [0.7777777777777778, '#fb9f3a'], + [0.8888888888888888, '#fdca26'], + [1.0, '#f0f921'], ], type: 'histogram2dcontour', }, @@ -471,46 +321,16 @@ const rlpTemplate = (shapes, plotName = '') => ({ ticks: '', }, colorscale: [ - [ - 0.0, - '#0d0887', - ], - [ - 0.1111111111111111, - '#46039f', - ], - [ - 0.2222222222222222, - '#7201a8', - ], - [ - 0.3333333333333333, - '#9c179e', - ], - [ - 0.4444444444444444, - '#bd3786', - ], - [ - 0.5555555555555556, - '#d8576b', - ], - [ - 0.6666666666666666, - '#ed7953', - ], - [ - 0.7777777777777778, - '#fb9f3a', - ], - [ - 0.8888888888888888, - '#fdca26', - ], - [ - 1.0, - '#f0f921', - ], + [0.0, '#0d0887'], + [0.1111111111111111, '#46039f'], + [0.2222222222222222, '#7201a8'], + [0.3333333333333333, '#9c179e'], + [0.4444444444444444, '#bd3786'], + [0.5555555555555556, '#d8576b'], + [0.6666666666666666, '#ed7953'], + [0.7777777777777778, '#fb9f3a'], + [0.8888888888888888, '#fdca26'], + [1.0, '#f0f921'], ], type: 'surface', }, @@ -551,134 +371,41 @@ const rlpTemplate = (shapes, plotName = '') => ({ }, colorscale: { diverging: [ - [ - 0, - '#8e0152', - ], - [ - 0.1, - '#c51b7d', - ], - [ - 0.2, - '#de77ae', - ], - [ - 0.3, - '#f1b6da', - ], - [ - 0.4, - '#fde0ef', - ], - [ - 0.5, - '#f7f7f7', - ], - [ - 0.6, - '#e6f5d0', - ], - [ - 0.7, - '#b8e186', - ], - [ - 0.8, - '#7fbc41', - ], - [ - 0.9, - '#4d9221', - ], - [ - 1, - '#276419', - ], + [0, '#8e0152'], + [0.1, '#c51b7d'], + [0.2, '#de77ae'], + [0.3, '#f1b6da'], + [0.4, '#fde0ef'], + [0.5, '#f7f7f7'], + [0.6, '#e6f5d0'], + [0.7, '#b8e186'], + [0.8, '#7fbc41'], + [0.9, '#4d9221'], + [1, '#276419'], ], sequential: [ - [ - 0.0, - '#0d0887', - ], - [ - 0.1111111111111111, - '#46039f', - ], - [ - 0.2222222222222222, - '#7201a8', - ], - [ - 0.3333333333333333, - '#9c179e', - ], - [ - 0.4444444444444444, - '#bd3786', - ], - [ - 0.5555555555555556, - '#d8576b', - ], - [ - 0.6666666666666666, - '#ed7953', - ], - [ - 0.7777777777777778, - '#fb9f3a', - ], - [ - 0.8888888888888888, - '#fdca26', - ], - [ - 1.0, - '#f0f921', - ], + [0.0, '#0d0887'], + [0.1111111111111111, '#46039f'], + [0.2222222222222222, '#7201a8'], + [0.3333333333333333, '#9c179e'], + [0.4444444444444444, '#bd3786'], + [0.5555555555555556, '#d8576b'], + [0.6666666666666666, '#ed7953'], + [0.7777777777777778, '#fb9f3a'], + [0.8888888888888888, '#fdca26'], + [1.0, '#f0f921'], ], sequentialminus: [ - [ - 0.0, - '#0d0887', - ], - [ - 0.1111111111111111, - '#46039f', - ], - [ - 0.2222222222222222, - '#7201a8', - ], - [ - 0.3333333333333333, - '#9c179e', - ], - [ - 0.4444444444444444, - '#bd3786', - ], - [ - 0.5555555555555556, - '#d8576b', - ], - [ - 0.6666666666666666, - '#ed7953', - ], - [ - 0.7777777777777778, - '#fb9f3a', - ], - [ - 0.8888888888888888, - '#fdca26', - ], - [ - 1.0, - '#f0f921', - ], + [0.0, '#0d0887'], + [0.1111111111111111, '#46039f'], + [0.2222222222222222, '#7201a8'], + [0.3333333333333333, '#9c179e'], + [0.4444444444444444, '#bd3786'], + [0.5555555555555556, '#d8576b'], + [0.6666666666666666, '#ed7953'], + [0.7777777777777778, '#fb9f3a'], + [0.8888888888888888, '#fdca26'], + [1.0, '#f0f921'], ], }, colorway: [ @@ -812,21 +539,23 @@ const rlpTemplate = (shapes, plotName = '') => ({ anchor: 'x', zeroline: false, }, - shapes: [{ - type: 'line', - xref: 'x', - yref: 'y', - x0: shapes[0], - y0: 0, - x1: shapes[shapes.length - 1], - y1: 0, - line: { - color: 'green', - width: 2, - dash: 'dot', + shapes: [ + { + type: 'line', + xref: 'x', + yref: 'y', + x0: shapes[0], + y0: 0, + x1: shapes[shapes.length - 1], + y1: 0, + line: { + color: 'green', + width: 2, + dash: 'dot', + }, + name: 'zeroline', }, - name: 'zeroline', - }], + ], }, }, title: plotName, @@ -846,11 +575,24 @@ const generateTickAsDatetime = (tickText) => { if (!isNaN(Number(tickText[0])) || !moment(tickText[0]).isValid()) { return tickText; } - const format = getDateTimeFormat(tickText[0], tickText[tickText.length - 1], tickText.length); - return tickText.map(tick => moment(tick).format(format)); + const format = getDateTimeFormat( + tickText[0], + tickText[tickText.length - 1], + tickText.length, + ); + return tickText.map((tick) => moment(tick).format(format)); }; -const rlpByLineTemplate = (title, groupName, xaxisValue, yaxisValue, compareType, showXAxis= false, props, tickFmt = '') => { +const rlpByLineTemplate = ( + title, + groupName, + xaxisValue, + yaxisValue, + compareType, + showXAxis = false, + props, + tickFmt = '', +) => { // re-scale groups in x-axes let textTicks = groupName; let valTicks = xaxisValue; @@ -935,7 +677,7 @@ const rlpByLineTemplate = (title, groupName, xaxisValue, yaxisValue, compareType showline: true, // show lines and border here linecolor: '#757575', linewidth: 1, - mirror: true + mirror: true, }, autosize: true, margin: { diff --git a/ap/static/sankey_plot/css/sankey_plot.css b/ap/static/sankey_plot/css/sankey_plot.css index d43bfc8..5f80121 100644 --- a/ap/static/sankey_plot/css/sankey_plot.css +++ b/ap/static/sankey_plot/css/sankey_plot.css @@ -2,7 +2,7 @@ margin-top: 20px; display: table; border-collapse: collapse; - width: inherit + width: inherit; } #plot-card .main-chart { @@ -65,7 +65,7 @@ canvas { /* Clear floats after the columns */ .chart-row:after { - content: ""; + content: ''; display: table; clear: both; } @@ -87,7 +87,7 @@ canvas { } .plot-container.plotly .main-svg { - background: unset!important; + background: unset !important; } .skd-scp { @@ -120,4 +120,4 @@ canvas { #actual-fitted-scp .legend .traces:first-child { display: none; -} \ No newline at end of file +} diff --git a/ap/static/sankey_plot/js/sankey_plot.js b/ap/static/sankey_plot/js/sankey_plot.js index 6022b20..f2693a3 100644 --- a/ap/static/sankey_plot/js/sankey_plot.js +++ b/ap/static/sankey_plot/js/sankey_plot.js @@ -1,8 +1,3 @@ -/* eslint-disable no-restricted-syntax */ -/* eslint-disable guard-for-in */ -/* eslint-disable no-unused-vars */ -/* eslint-disable no-undef */ -/* eslint-disable no-use-before-define */ const REQUEST_TIMEOUT = setRequestTimeOut(); const MAX_NUMBER_OF_SENSOR = 512; const MIN_NUMBER_OF_SENSOR = 0; @@ -36,19 +31,29 @@ const formElements = { }; const i18n = { - total: $('#i18nTotal').text(), - average: $('#i18nAverage').text(), - frequence: $('#i18nFrequence').text(), - gaUnable: $('#i18nGAUnable').text(), - gaCheckConnect: $('#i18nGACheckConnect').text(), - traceResulLimited: $('#i18nTraceResultLimited').text() || '', - SQLLimit: $('#i18nSQLLimit').text(), - allSelection: $('#i18nAllSelection').text(), - noFilter: $('#i18nNoFilter').text(), - machineNo: $('#i18nMachineNo').text(), - partNo: $('#i18nPartNo').text(), + total: $('#i18nTotal').text(), + average: $('#i18nAverage').text(), + frequence: $('#i18nFrequence').text(), + gaUnable: $('#i18nGAUnable').text(), + gaCheckConnect: $('#i18nGACheckConnect').text(), + traceResulLimited: $('#i18nTraceResultLimited').text() || '', + SQLLimit: $('#i18nSQLLimit').text(), + allSelection: $('#i18nAllSelection').text(), + noFilter: $('#i18nNoFilter').text(), + machineNo: $('#i18nMachineNo').text(), + partNo: $('#i18nPartNo').text(), selectOver100SensorMsg: $('#i18nSelectOver100SensorMsg').text(), objectiveHoverMsg: $('#i18nSkDObjectiveHoverMsg').text(), + SkDPlotHoverRelationship: $('#i18nSkDPlotHoverRelationship').text(), + SkDPlotHoverRelationshipPositive: $( + '#i18nSkDPlotHoverRelationshipPositive', + ).text(), + SkDPlotHoverRelationshipNegative: $( + '#i18nSkDPlotHoverRelationshipNegative', + ).text(), + SkDPlotHoverCoefficient: $('#i18nSkDPlotHoverCoefficient').text(), + SkDPlotHoverVariable: $('#i18nSkDPlotHoverVariable').text(), + SkDPlotHoverProcess: $('#i18nSkDPlotHoverProcess').text(), }; const MSG_MAPPING = { @@ -79,14 +84,19 @@ $(() => { objectiveHoverMsg: i18n.objectiveHoverMsg, hideStrVariable: false, showFilter: true, - hideCTCol: true, allowObjectiveForRealOnly: true, disableSerialAsObjective: true, }); endProcItem(); // add first condition process - const condProcItem = addCondProc(endProcs.ids, endProcs.names, '', formElements.formID, 'btn-add-cond-proc'); + const condProcItem = addCondProc( + endProcs.ids, + endProcs.names, + '', + formElements.formID, + 'btn-add-cond-proc', + ); condProcItem(); // click even of condition proc add button @@ -120,7 +130,6 @@ const sankeyTraceData = () => { } }; - const showSankeyPlot = (plotlyJson) => { formElements.plotCard.css('display', 'none'); $(`#${formElements.graphContainerId}`).html(''); @@ -130,9 +139,12 @@ const showSankeyPlot = (plotlyJson) => { showBarGraph(plotlyJson.bar_trace); formElements.plotCard.css('display', ''); - $('html, body').animate({ - scrollTop: formElements.plotCard.offset().top, - }, 500); + $('html, body').animate( + { + scrollTop: getOffsetTopDisplayGraph('#plot-card'), + }, + 500, + ); window.dispatchEvent(new Event('resize')); }; @@ -187,11 +199,56 @@ const showBarGraph = (barJson) => { }, }, colorscale: { - diverging: [[0, '#8e0152'], [0.1, '#c51b7d'], [0.2, '#de77ae'], [0.3, '#f1b6da'], [0.4, '#fde0ef'], [0.5, '#f7f7f7'], [0.6, '#e6f5d0'], [0.7, '#b8e186'], [0.8, '#7fbc41'], [0.9, '#4d9221'], [1, '#276419']], - sequential: [[0.0, '#0d0887'], [0.1111111111111111, '#46039f'], [0.2222222222222222, '#7201a8'], [0.3333333333333333, '#9c179e'], [0.4444444444444444, '#bd3786'], [0.5555555555555556, '#d8576b'], [0.6666666666666666, '#ed7953'], [0.7777777777777778, '#fb9f3a'], [0.8888888888888888, '#fdca26'], [1.0, '#f0f921']], - sequentialminus: [[0.0, '#0d0887'], [0.1111111111111111, '#46039f'], [0.2222222222222222, '#7201a8'], [0.3333333333333333, '#9c179e'], [0.4444444444444444, '#bd3786'], [0.5555555555555556, '#d8576b'], [0.6666666666666666, '#ed7953'], [0.7777777777777778, '#fb9f3a'], [0.8888888888888888, '#fdca26'], [1.0, '#f0f921']], - }, - colorway: ['#636efa', '#EF553B', '#00cc96', '#ab63fa', '#FFA15A', '#19d3f3', '#FF6692', '#B6E880', '#FF97FF', '#FECB52'], + diverging: [ + [0, '#8e0152'], + [0.1, '#c51b7d'], + [0.2, '#de77ae'], + [0.3, '#f1b6da'], + [0.4, '#fde0ef'], + [0.5, '#f7f7f7'], + [0.6, '#e6f5d0'], + [0.7, '#b8e186'], + [0.8, '#7fbc41'], + [0.9, '#4d9221'], + [1, '#276419'], + ], + sequential: [ + [0.0, '#0d0887'], + [0.1111111111111111, '#46039f'], + [0.2222222222222222, '#7201a8'], + [0.3333333333333333, '#9c179e'], + [0.4444444444444444, '#bd3786'], + [0.5555555555555556, '#d8576b'], + [0.6666666666666666, '#ed7953'], + [0.7777777777777778, '#fb9f3a'], + [0.8888888888888888, '#fdca26'], + [1.0, '#f0f921'], + ], + sequentialminus: [ + [0.0, '#0d0887'], + [0.1111111111111111, '#46039f'], + [0.2222222222222222, '#7201a8'], + [0.3333333333333333, '#9c179e'], + [0.4444444444444444, '#bd3786'], + [0.5555555555555556, '#d8576b'], + [0.6666666666666666, '#ed7953'], + [0.7777777777777778, '#fb9f3a'], + [0.8888888888888888, '#fdca26'], + [1.0, '#f0f921'], + ], + }, + colorway: [ + '#636efa', + '#EF553B', + '#00cc96', + '#ab63fa', + '#FFA15A', + '#19d3f3', + '#FF6692', + '#B6E880', + '#FF97FF', + '#FECB52', + ], geo: { bgcolor: 'rgb(17,17,17)', lakecolor: 'rgb(17,17,17)', @@ -329,30 +386,50 @@ const showGroupLasso = (sankeyJson) => { return; } - const data = [{ - arrangement: sankeyJson.arrangement || 'snap', - link: { - color: linkJson.color || [], - source: linkJson.source || [], - target: linkJson.target || [], - value: linkJson.value || [], - label: linkJson.source.map(() => 'Connection strength:') || [], - }, - node: { - color: nodeJson.color || [], - label: nodeJson.label || [], - line: { - width: 0.2, - color: '#222', + const getRelationshipLabel = (relationship) => { + if (relationship === 'negative') { + return i18n.SkDPlotHoverRelationshipNegative; + } else if (relationship === 'positive') { + return i18n.SkDPlotHoverRelationshipPositive; + } else { + return ''; + } + }; + + const data = [ + { + arrangement: sankeyJson.arrangement || 'snap', + link: { + color: linkJson.color || [], + source: linkJson.source || [], + target: linkJson.target || [], + value: linkJson.value || [], + relationship: linkJson.relationship || [], + label: linkJson.source.map(() => 'Connection strength:') || [], + hovertemplate: + `${i18n.SkDPlotHoverRelationship}: %{customdata}
        ` + + `${i18n.SkDPlotHoverCoefficient}: %{value:.2f}
        ` + + `${i18n.SkDPlotHoverVariable}: %{source.label}
        ` + + `${i18n.SkDPlotHoverProcess}: %{target.label}
        ` + + '', + customdata: linkJson?.relationship?.map(getRelationshipLabel), }, - pad: 10, - thickness: 20, - x: nodeJson.x || [], - y: nodeJson.y || [], + node: { + color: nodeJson.color || [], + label: nodeJson.label || [], + line: { + width: 0.2, + color: '#222', + }, + pad: 10, + thickness: 20, + x: nodeJson.x || [], + y: nodeJson.y || [], + }, + type: 'sankey', + valueformat: '.2f', }, - type: 'sankey', - valueformat: '.2f', - }]; + ]; const layout = { title: '', @@ -382,11 +459,56 @@ const showGroupLasso = (sankeyJson) => { }, }, colorscale: { - diverging: [[0, '#8e0152'], [0.1, '#c51b7d'], [0.2, '#de77ae'], [0.3, '#f1b6da'], [0.4, '#fde0ef'], [0.5, '#f7f7f7'], [0.6, '#e6f5d0'], [0.7, '#b8e186'], [0.8, '#7fbc41'], [0.9, '#4d9221'], [1, '#276419']], - sequential: [[0.0, '#0d0887'], [0.1111111111111111, '#46039f'], [0.2222222222222222, '#7201a8'], [0.3333333333333333, '#9c179e'], [0.4444444444444444, '#bd3786'], [0.5555555555555556, '#d8576b'], [0.6666666666666666, '#ed7953'], [0.7777777777777778, '#fb9f3a'], [0.8888888888888888, '#fdca26'], [1.0, '#f0f921']], - sequentialminus: [[0.0, '#0d0887'], [0.1111111111111111, '#46039f'], [0.2222222222222222, '#7201a8'], [0.3333333333333333, '#9c179e'], [0.4444444444444444, '#bd3786'], [0.5555555555555556, '#d8576b'], [0.6666666666666666, '#ed7953'], [0.7777777777777778, '#fb9f3a'], [0.8888888888888888, '#fdca26'], [1.0, '#f0f921']], - }, - colorway: ['#636efa', '#EF553B', '#00cc96', '#ab63fa', '#FFA15A', '#19d3f3', '#FF6692', '#B6E880', '#FF97FF', '#FECB52'], + diverging: [ + [0, '#8e0152'], + [0.1, '#c51b7d'], + [0.2, '#de77ae'], + [0.3, '#f1b6da'], + [0.4, '#fde0ef'], + [0.5, '#f7f7f7'], + [0.6, '#e6f5d0'], + [0.7, '#b8e186'], + [0.8, '#7fbc41'], + [0.9, '#4d9221'], + [1, '#276419'], + ], + sequential: [ + [0.0, '#0d0887'], + [0.1111111111111111, '#46039f'], + [0.2222222222222222, '#7201a8'], + [0.3333333333333333, '#9c179e'], + [0.4444444444444444, '#bd3786'], + [0.5555555555555556, '#d8576b'], + [0.6666666666666666, '#ed7953'], + [0.7777777777777778, '#fb9f3a'], + [0.8888888888888888, '#fdca26'], + [1.0, '#f0f921'], + ], + sequentialminus: [ + [0.0, '#0d0887'], + [0.1111111111111111, '#46039f'], + [0.2222222222222222, '#7201a8'], + [0.3333333333333333, '#9c179e'], + [0.4444444444444444, '#bd3786'], + [0.5555555555555556, '#d8576b'], + [0.6666666666666666, '#ed7953'], + [0.7777777777777778, '#fb9f3a'], + [0.8888888888888888, '#fdca26'], + [1.0, '#f0f921'], + ], + }, + colorway: [ + '#636efa', + '#EF553B', + '#00cc96', + '#ab63fa', + '#FFA15A', + '#19d3f3', + '#FF6692', + '#B6E880', + '#FF97FF', + '#FECB52', + ], geo: { bgcolor: 'rgb(17,17,17)', lakecolor: 'rgb(17,17,17)', @@ -501,11 +623,15 @@ const showGroupLasso = (sankeyJson) => { }, }; - Plotly.newPlot(formElements.graphContainerId, data, layout, { // TODO container id - modeBarButtonsToRemove: [ // sankey icon setting is different from others + Plotly.newPlot(formElements.graphContainerId, data, layout, { + // TODO container id + modeBarButtonsToRemove: [ + // sankey icon setting is different from others 'lasso2d', - 'hoverClosestCartesian', 'hoverCompareCartesian', - 'toggleSpikelines', 'sendDataToCloud', + 'hoverClosestCartesian', + 'hoverCompareCartesian', + 'toggleSpikelines', + 'sendDataToCloud', ], displaylogo: false, responsive: true, @@ -530,17 +656,17 @@ const collectFormDataSkD = (clearOnFlyFilter = false) => { const checkNumberOfSelectedSensor = (fromData) => { // show msg when select over 100 sensor - const sensors = [] + const sensors = []; for (const item of fromData.entries()) { const key = item[0]; const value = item[1]; if (/GET02_VALS_SELECT/.test(key)) { - sensors.push(value) + sensors.push(value); } } if (sensors.length > MAX_SENSORS_LIM) { - showToastrMsg(i18n.selectOver100SensorMsg) + showToastrMsg(i18n.selectOver100SensorMsg); } }; @@ -549,45 +675,49 @@ const callToBackEndAPI = (clearOnFlyFilter = false, reselectVars = false) => { checkNumberOfSelectedSensor(formData); - - showGraphCallApi('/ap/api/skd/index', formData, REQUEST_TIMEOUT, async (res) => { - if (!res.actual_record_number) { - showToastrAnomalGraph(); - return; - } - if (res.errors && res.errors.length) { - showErrorToastr(res.errors); - loadingHide(); - - if (clearOnFlyFilter) { - // click show graph - problematicData = { - null_percent: res.null_percent || {}, - zero_variance: res.err_cols || [], - selected_vars: res.selected_vars || [] - }; - reselectCallback = callToBackEndAPI; + showGraphCallApi( + '/ap/api/skd/index', + formData, + REQUEST_TIMEOUT, + async (res) => { + if (!res.actual_record_number) { + showToastrAnomalGraph(); + return; } - const errors = res.errors || [] - if (problematicData && errors.length) { - showRemoveProblematicColsMdl(problematicData); + if (res.errors && res.errors.length) { + showErrorToastr(res.errors); + loadingHide(); + + if (clearOnFlyFilter) { + // click show graph + problematicData = { + null_percent: res.null_percent || {}, + zero_variance: res.err_cols || [], + selected_vars: res.selected_vars || [], + }; + reselectCallback = callToBackEndAPI; + } + const errors = res.errors || []; + if (problematicData && errors.length) { + showRemoveProblematicColsMdl(problematicData); + } + return; } - return; - } - // render cat, category label filer modal - fillDataToFilterModal(res.filter_on_demand, () => { - callToBackEndAPI(false); - }); + // render cat, category label filer modal + fillDataToFilterModal(res.filter_on_demand, () => { + callToBackEndAPI(false); + }); - graphStore.setTraceData(_.cloneDeep(res)); - showSankeyPlot(res.plotly_data); + graphStore.setTraceData(_.cloneDeep(res)); + showSankeyPlot(res.plotly_data); - showScatterPlot(res.dic_scp, {}); + showScatterPlot(res.dic_scp, {}); - // show info table - showInfoTable(res); - }); + // show info table + showInfoTable(res); + }, + ); }; const showErrorToastr = (errors) => { diff --git a/ap/static/sankey_plot/js/sankey_scp.js b/ap/static/sankey_plot/js/sankey_scp.js index 988604a..8c4a575 100644 --- a/ap/static/sankey_plot/js/sankey_scp.js +++ b/ap/static/sankey_plot/js/sankey_scp.js @@ -1,4 +1,3 @@ -/* eslint-disable no-restricted-syntax,guard-for-in */ const COLOR = { RED: 'rgba(255,0,0,1)', GREEN: '#89b368', @@ -18,24 +17,26 @@ const i18nText = { i18DataCount: $('#i18DataCount').text(), }; -const INDEX_AXIS_LABEL = "Index" +const INDEX_AXIS_LABEL = 'Index'; const drawScatterPlot = (canvasID, props, showLine = false) => { - const data = [{ - x: props.x, - y: props.y, - mode: 'markers', - type: 'scatter', - marker: { - color: COLOR.GREEN, - size: 6, + const data = [ + { + x: props.x, + y: props.y, + mode: 'markers', + type: 'scatter', + marker: { + color: COLOR.GREEN, + size: 6, + }, + hoverinfo: 'none', + customdata: { + datetime: props.datetime, + serials: props.serials, + }, }, - hoverinfo: 'none', - customdata: { - datetime: props.datetime, - serials: props.serials, - } - }]; + ]; if (showLine) { data.push({ @@ -75,7 +76,10 @@ const drawScatterPlot = (canvasID, props, showLine = false) => { color: COLOR.WHITE, }, gridcolor: COLOR.GRID, - tickformat: props.xFmt !== undefined && props.xFmt.includes('e') ? '.1e' : '', + tickformat: + props.xFmt !== undefined && props.xFmt.includes('e') + ? '.1e' + : '', }, yaxis: { range: props.rangeY || 'auto', @@ -92,7 +96,10 @@ const drawScatterPlot = (canvasID, props, showLine = false) => { size: 12, color: COLOR.WHITE, }, - tickformat: props.yFmt !== undefined && props.yFmt.includes('e') ? '.1e' : '', + tickformat: + props.yFmt !== undefined && props.yFmt.includes('e') + ? '.1e' + : '', }, autosize: true, margin: 55, @@ -111,50 +118,59 @@ const drawScatterPlot = (canvasID, props, showLine = false) => { plot_bgcolor: '#222222', paper_bgcolor: '#222222', }; - + const config = { displayModeBar: false, responsive: true, // responsive histogram useResizeHandler: true, // responsive histogram - style: {width: '100%', height: '100%'}, + style: { width: '100%', height: '100%' }, }; const scpPLot = document.getElementById(canvasID); - + Plotly.react(canvasID, data, layout, config); scpPLot.on('plotly_hover', (data) => { const dpIndex = getDataPointIndex(data); const dataPoint = data.points[0]; const xValue = applySignificantDigit(dataPoint.data.x[dpIndex]); const yValue = applySignificantDigit(dataPoint.data.y[dpIndex]); - const datetime = dataPoint.data.customdata ? formatDateTime(dataPoint.data.customdata.datetime[dpIndex]) : ''; - const serials = getSerialsText(dpIndex, dataPoint.data.customdata.serials); + const datetime = dataPoint.data.customdata + ? formatDateTime(dataPoint.data.customdata.datetime[dpIndex]) + : ''; + const serials = getSerialsText( + dpIndex, + dataPoint.data.customdata.serials, + ); const isHideX = props.hideX; - const hoverData = [] + const hoverData = []; if (!isHideX) { - hoverData.push([props.titleX, applySignificantDigit(xValue, props.xFmt)]) + hoverData.push([ + props.titleX, + applySignificantDigit(xValue, props.xFmt), + ]); } - hoverData.push([props.hoverTitleY, applySignificantDigit(yValue, props.yFmt)]) + hoverData.push([ + props.hoverTitleY, + applySignificantDigit(yValue, props.yFmt), + ]); hoverData.push(['Datetime', datetime]); hoverData.push(...serials); const tableData = genHoverDataTable(hoverData); const offset = { - x: data.event.pageX - 120, - y: data.event.pageY, - }; + x: data.event.pageX - 120, + y: data.event.pageY, + }; genDataPointHoverTable(tableData, offset, null, true, canvasID); }); unHoverHandler(scpPLot); - - - const getSerialsText = (idx, serials) => { + const getSerialsText = (idx, serials) => { const hasSerial = serials && Object.keys(serials).length > 0; let serialText = []; if (hasSerial) { for (const key of Object.keys(serials)) { - serialText.push([key, serials[key][idx]]) + serialText.push([key, serials[key][idx]]); } } return serialText; @@ -281,10 +297,7 @@ const drawConfusionMatrix = (canvasID, classifProps) => { }, xaxis: { anchor: 'y', - domain: [ - 0.0, - 1.0, - ], + domain: [0.0, 1.0], scaleanchor: 'y', constrain: 'domain', title: { @@ -295,10 +308,7 @@ const drawConfusionMatrix = (canvasID, classifProps) => { }, yaxis: { anchor: 'x', - domain: [ - 0.0, - 1.0, - ], + domain: [0.0, 1.0], autorange: 'reversed', constrain: 'domain', title: { @@ -312,7 +322,7 @@ const drawConfusionMatrix = (canvasID, classifProps) => { text: classifProps.countTitle, }, }, - // eslint-disable-next-line no-undef + colorscale: chmColorPalettes, }, title: { @@ -323,20 +333,28 @@ const drawConfusionMatrix = (canvasID, classifProps) => { displayModeBar: false, responsive: true, // responsive histogram useResizeHandler: true, // responsive histogram - style: {width: '100%', height: '100%'}, + style: { width: '100%', height: '100%' }, }; - // eslint-disable-next-line no-undef + Plotly.newPlot(canvasID, data, layout, config); }; const showScatterPlot = (dicScp) => { if (!dicScp || Object.keys.length === 0) return; const { - actual, fitted, residuals, serials, index, times, actual_fmt, fitted_fmt, residuals_fmt + actual, + fitted, + residuals, + serials, + index, + times, + actual_fmt, + fitted_fmt, + residuals_fmt, } = dicScp; const [minX, maxX] = findMinMax(actual); const [minY, maxY] = findMinMax(fitted); - + const commonRange = [Math.min(minX, minY), Math.max(maxX, maxY)]; const actualFittedProps = { @@ -353,7 +371,7 @@ const showScatterPlot = (dicScp) => { serials: serials, hoverTitleY: i18nText.i18nFitted, }; - + const indexResidualsProps = { x: index, y: residuals, @@ -367,7 +385,7 @@ const showScatterPlot = (dicScp) => { hideX: true, hoverTitleY: i18nText.i18nResiduals, }; - + updateInformationTable(dicScp); if (!dicScp.is_classif) { drawScatterPlot('actual-fitted-scp', actualFittedProps, true); diff --git a/ap/static/scatter_plot/css/scatter_plot.css b/ap/static/scatter_plot/css/scatter_plot.css index ce66300..bd949a0 100644 --- a/ap/static/scatter_plot/css/scatter_plot.css +++ b/ap/static/scatter_plot/css/scatter_plot.css @@ -46,7 +46,7 @@ canvas { /* Clear floats after the columns */ .chart-row:after { - content: ""; + content: ''; display: table; clear: both; } @@ -144,11 +144,11 @@ canvas { } .colorbar .js-plotly-plot .plotly .main-svg { - background-color: transparent!important; + background-color: transparent !important; } .colorbar .legend .bg { - fill: transparent!important; + fill: transparent !important; z-index: 9999; } @@ -262,7 +262,7 @@ canvas { right: 50%; } #navigation-bar [data-title]::before { - content: ""; + content: ''; position: absolute; background: transparent; border-width: 6px; @@ -291,4 +291,4 @@ canvas { #sctr-card-parent:hover #navigation-bar { display: block; -} \ No newline at end of file +} diff --git a/ap/static/scatter_plot/js/scatter_chart.js b/ap/static/scatter_plot/js/scatter_chart.js index d208407..616ec1b 100644 --- a/ap/static/scatter_plot/js/scatter_chart.js +++ b/ap/static/scatter_plot/js/scatter_chart.js @@ -1,4 +1,3 @@ -// eslint-disable-next-line no-unused-vars const i18nColorBar = { time_numberings: '#i18nColorBarTime', elapsed_time: '#i18nColorBarElapsedTime', @@ -17,7 +16,6 @@ const SCATTER_MARGIN = { // unique filters const onlyUniqueFilter = (value, index, self) => self.indexOf(value) === index; - const buildCategoryColors = (colorData) => { const uniqueColorData = colorData.filter(onlyUniqueFilter); const isString = _.isString(uniqueColorData[0]); @@ -33,16 +31,16 @@ const buildCategoryColors = (colorData) => { return [null, null]; }; -const narrowText = (text = '', n= 17) => { - +const narrowText = (text = '', n = 17) => { if (!text || text.length <= n) return text; - return text.substr(0,n); + return text.substr(0, n); }; -// eslint-disable-next-line no-unused-vars const genScatterLayout = (chartOptions) => { - const [tickVals, tickText] = buildCategoryColors(chartOptions.colorsValSets); + const [tickVals, tickText] = buildCategoryColors( + chartOptions.colorsValSets, + ); let colorbarTitle = narrowText(chartOptions.colorVarName); if (chartOptions.colorOrderVar !== 'colors') { colorbarTitle = $(i18nColorBar[chartOptions.colorOrderVar]).text(); @@ -265,12 +263,18 @@ const genScatterLayout = (chartOptions) => { // todo: draw annotation for thresholds const calcTickSteps = (rows, cols) => { - const rowSteps = (1 / rows); - const colSteps = (1 / cols); + const rowSteps = 1 / rows; + const colSteps = 1 / cols; return [rowSteps, colSteps]; }; -const calcTicksDomain = (idx, ticksStep, isCol = 0, defaultMargin = 0.015, totalColRow) => { +const calcTicksDomain = ( + idx, + ticksStep, + isCol = 0, + defaultMargin = 0.015, + totalColRow, +) => { // 0.035 is space between charts const margin = totalColRow > 1 ? defaultMargin : 0; const start = idx * ticksStep[isCol]; @@ -278,21 +282,36 @@ const calcTicksDomain = (idx, ticksStep, isCol = 0, defaultMargin = 0.015, total return [start, end]; }; -// eslint-disable-next-line no-unused-vars const genLayoutAxis = (layoutAttrs, isNotEmptyPlot) => { - const itemIdx = layoutAttrs.rowIdx * layoutAttrs.colsTotal + layoutAttrs.colIdx; - const itemId = itemIdx !== 0 ? (itemIdx + 1) : ''; + const itemIdx = + layoutAttrs.rowIdx * layoutAttrs.colsTotal + layoutAttrs.colIdx; + const itemId = itemIdx !== 0 ? itemIdx + 1 : ''; const yAxisName = `yaxis${itemId}`; const xAxisName = `xaxis${itemId}`; const yAxisId = `y${itemId}`; const xAxisId = `x${itemId}`; - const ticksStep = calcTickSteps(layoutAttrs.rowsTotal, layoutAttrs.colsTotal); - const isBreakLine = layoutAttrs.hLabel.includes('
        ') + const ticksStep = calcTickSteps( + layoutAttrs.rowsTotal, + layoutAttrs.colsTotal, + ); + const isBreakLine = layoutAttrs.hLabel.includes('
        '); // const verticalMargin = (layoutAttrs.hLabel && isBreakLine && layoutAttrs.colsTotal > 1) // ? SCATTER_MARGIN.H_TITLE_MULTI_LINES : SCATTER_MARGIN.Y_NORMAL; - const yDomain = calcTicksDomain(layoutAttrs.rowIdx, ticksStep, 0, SCATTER_MARGIN.Y_NORMAL, layoutAttrs.rowsTotal); - const xDomain = calcTicksDomain(layoutAttrs.colIdx, ticksStep, 1, SCATTER_MARGIN.X_NORMAL, layoutAttrs.colsTotal); + const yDomain = calcTicksDomain( + layoutAttrs.rowIdx, + ticksStep, + 0, + SCATTER_MARGIN.Y_NORMAL, + layoutAttrs.rowsTotal, + ); + const xDomain = calcTicksDomain( + layoutAttrs.colIdx, + ticksStep, + 1, + SCATTER_MARGIN.X_NORMAL, + layoutAttrs.colsTotal, + ); const isShowXTicks = layoutAttrs.rowIdx === 0; const isShowYTicks = layoutAttrs.colIdx === 0; @@ -324,12 +343,12 @@ const genLayoutAxis = (layoutAttrs, isNotEmptyPlot) => { }; // annotation for top axis labels if (layoutAttrs.hLabel) { - const centerOfXTicks = xDomain[0] + ((xDomain[1] - xDomain[0]) / 2); + const centerOfXTicks = xDomain[0] + (xDomain[1] - xDomain[0]) / 2; // show title on top of plot with 2.5% margin const labelYPosition = yDomain[1] + SCATTER_MARGIN.Y_NORMAL; layoutAttrs.layout.annotations.push({ font: { - size: isBreakLine ? 9 : 11 + size: isBreakLine ? 9 : 11, }, showarrow: false, text: layoutAttrs.hLabel, @@ -353,13 +372,23 @@ const genLayoutAxis = (layoutAttrs, isNotEmptyPlot) => { }; }; -const removeInvalidDataPoints = (scpMatrix, xRange, yRange, colorVar='colors') => { - scpMatrix.forEach(row => { - row.forEach(col => { +const removeInvalidDataPoints = ( + scpMatrix, + xRange, + yRange, + colorVar = 'colors', +) => { + scpMatrix.forEach((row) => { + row.forEach((col) => { if (col) { - const pointObjs= []; + const pointObjs = []; col.array_x.forEach((v, i) => { - if (v >= xRange[0] && v <= xRange[1] && col.array_y[i] >= yRange[0] && col.array_y[i] <= yRange[1]) { + if ( + v >= xRange[0] && + v <= xRange[1] && + col.array_y[i] >= yRange[0] && + col.array_y[i] <= yRange[1] + ) { pointObjs.push({ x: v, y: col.array_y[i], @@ -367,13 +396,19 @@ const removeInvalidDataPoints = (scpMatrix, xRange, yRange, colorVar='colors') = cycle_ids: col.cycle_ids[i], elapsed_time: col.elapsed_time[i], times: col.times[i], - x_serial: col.x_serial ? col.x_serial.map(xSerial => xSerial.data[i]) : null, - y_serial: col.y_serial ? col.y_serial.map(ySerial => ySerial.data[i]) : null, - time_numberings: col.time_numberings ? col.time_numberings[i] : null, + x_serial: col.x_serial + ? col.x_serial.map((xSerial) => xSerial.data[i]) + : null, + y_serial: col.y_serial + ? col.y_serial.map((ySerial) => ySerial.data[i]) + : null, + time_numberings: col.time_numberings + ? col.time_numberings[i] + : null, }); } }); - const comparator = keys => (a, b) => { + const comparator = (keys) => (a, b) => { if (a[keys[0]] == b[keys[0]]) { return a[keys[1]] - b[keys[1]]; } @@ -382,28 +417,38 @@ const removeInvalidDataPoints = (scpMatrix, xRange, yRange, colorVar='colors') = pointObjs.sort(comparator([colorVar, 'cycle_ids'])); // console.log(); col.n_total = pointObjs.length; - col.array_x = pointObjs.map(pointData => pointData.x); - col.array_y = pointObjs.map(pointData => pointData.y); - col.colors = pointObjs.map(pointData => pointData.colors); - col.cycle_ids = pointObjs.map(pointData => pointData.cycle_ids); - col.elapsed_time = pointObjs.map(pointData => pointData.elapsed_time); - col.times = pointObjs.map(pointData => pointData.times); + col.array_x = pointObjs.map((pointData) => pointData.x); + col.array_y = pointObjs.map((pointData) => pointData.y); + col.colors = pointObjs.map((pointData) => pointData.colors); + col.cycle_ids = pointObjs.map( + (pointData) => pointData.cycle_ids, + ); + col.elapsed_time = pointObjs.map( + (pointData) => pointData.elapsed_time, + ); + col.times = pointObjs.map((pointData) => pointData.times); if (col.time_numberings) { - col.time_numberings = pointObjs.map(pointData => pointData.time_numberings); + col.time_numberings = pointObjs.map( + (pointData) => pointData.time_numberings, + ); } if (col.x_serial) { col.x_serial.forEach((xSerial, i) => { - xSerial.data = pointObjs.map(pointData => pointData.x_serial[i]); - }) + xSerial.data = pointObjs.map( + (pointData) => pointData.x_serial[i], + ); + }); } if (col.y_serial) { col.y_serial.forEach((ySerial, i) => { - ySerial.data = pointObjs.map(pointData => pointData.y_serial[i]); - }) + ySerial.data = pointObjs.map( + (pointData) => pointData.y_serial[i], + ); + }); } } - }); + }); }); return scpMatrix; -}; \ No newline at end of file +}; diff --git a/ap/static/scatter_plot/js/scatter_plot.js b/ap/static/scatter_plot/js/scatter_plot.js index 53c5ed4..101bcba 100644 --- a/ap/static/scatter_plot/js/scatter_plot.js +++ b/ap/static/scatter_plot/js/scatter_plot.js @@ -1,8 +1,3 @@ -/* eslint-disable no-restricted-syntax */ -/* eslint-disable guard-for-in */ -/* eslint-disable no-unused-vars */ -/* eslint-disable no-undef */ -/* eslint-disable no-use-before-define */ const REQUEST_TIMEOUT = setRequestTimeOut(); const MAX_NUMBER_OF_SENSOR = 2; const MIN_NUMBER_OF_SENSOR = 2; @@ -10,11 +5,11 @@ let tabID = null; const graphStore = new GraphStore(); let response = null; let heatmapData = {}; - +let currentXY = []; const MAX_PLOT = 49; const MAX_MATRIX = 7; let currentMatrix = MAX_MATRIX; -const STR_PREFIX = '*_/&＠*_$%#' +const STR_PREFIX = '*_/&＠*_$%#'; const formElements = { formID: '#traceDataForm', @@ -35,7 +30,7 @@ const scpChartType = { SCATTER: 'scatter', HEATMAP: 'heatmap', VIOLIN: 'violin', - HEATMAP_BY_INT: 'heatmap_by_int' + HEATMAP_BY_INT: 'heatmap_by_int', }; const chartScales = { @@ -81,8 +76,8 @@ const plotTypeConst = { MAP_XY_N: { name: 'MAP_XY_N', mode: 'markers', - } -} + }, +}; const els = { category: 'category', @@ -100,38 +95,22 @@ const els = { }; const i18n = { - total: $('#i18nTotal') - .text(), - average: $('#i18nAverage') - .text(), - frequence: $('#i18nFrequence') - .text(), - gaUnable: $('#i18nGAUnable') - .text(), - gaCheckConnect: $('#i18nGACheckConnect') - .text(), - traceResulLimited: $('#i18nTraceResultLimited') - .text() || '', - SQLLimit: $('#i18nSQLLimit') - .text(), - allSelection: $('#i18nAllSelection') - .text(), - noFilter: $('#i18nNoFilter') - .text(), - machineNo: $('#i18nMachineNo') - .text(), - partNo: $('#i18nPartNo') - .text(), - changeDivConfirmText: $('#i18nChangeDivConfirmText') - .text(), - colorWarningMessage: $('#i18nColorWarningMessage') - .text(), - changedToMaxValue: $('#i18nChangedDivisionNumberToMax') - .text(), - reduceViolinNumberMessage: $('#i18nReduceViolinNumberMessage') - .text(), - limitPerGraphMessage: $('#i18nLimitPerGraphMessage') - .text(), + total: $('#i18nTotal').text(), + average: $('#i18nAverage').text(), + frequence: $('#i18nFrequence').text(), + gaUnable: $('#i18nGAUnable').text(), + gaCheckConnect: $('#i18nGACheckConnect').text(), + traceResulLimited: $('#i18nTraceResultLimited').text() || '', + SQLLimit: $('#i18nSQLLimit').text(), + allSelection: $('#i18nAllSelection').text(), + noFilter: $('#i18nNoFilter').text(), + machineNo: $('#i18nMachineNo').text(), + partNo: $('#i18nPartNo').text(), + changeDivConfirmText: $('#i18nChangeDivConfirmText').text(), + colorWarningMessage: $('#i18nColorWarningMessage').text(), + changedToMaxValue: $('#i18nChangedDivisionNumberToMax').text(), + reduceViolinNumberMessage: $('#i18nReduceViolinNumberMessage').text(), + limitPerGraphMessage: $('#i18nLimitPerGraphMessage').text(), traceTimeLatestWarning: $('#i18nDivByNumberAndLatest').text(), isResampleMsg: $('#i18nViolinResampleMsg').text(), i18nGotoHMpMsg: $('#i18nGotoHMpMsg').text(), @@ -158,10 +137,11 @@ const sortMatrixFunc = (a, b, asc = false, key = 'sort_key') => { return output2; }; - const genGraph1DMatrix = (inputGraphs, asc = false) => { const rowCount = Math.ceil(MAX_PLOT / currentMatrix); - const matrix = Array(rowCount).fill().map(() => Array(currentMatrix).fill(null)); + const matrix = Array(rowCount) + .fill() + .map(() => Array(currentMatrix).fill(null)); const graphs = inputGraphs.sort((a, b) => sortMatrixFunc(a, b, asc)); for (let i = 0; i < graphs.length; i++) { matrix[Math.floor(i / currentMatrix)][i % currentMatrix] = graphs[i]; @@ -186,7 +166,9 @@ const gen2DMatrixTitle = (graphs) => { const genGraph2DMatrix = (inputGraphs, asc = false) => { const rowCount = Math.ceil(MAX_PLOT / currentMatrix); - const matrix = Array(rowCount).fill().map(() => Array(currentMatrix).fill(null)); + const matrix = Array(rowCount) + .fill() + .map(() => Array(currentMatrix).fill(null)); const graphs = inputGraphs.sort((a, b) => sortMatrixFunc(a, b, true)); const [rows, cols] = gen2DMatrixTitle(graphs); for (const graph of graphs) { @@ -228,30 +210,28 @@ const onChangeDivisionNumber = () => { const MAX_F = 7; const MAX_WF = 49; const MIN_VALUE = 1; - $(`input[name=${CYCLIC_TERM.DIV_NUM}]`) - .on('change', (e) => { - // uncheck if disable - if (e.target.disabled) return; - - const value = Number(e.currentTarget.value); - const formdata = collectFormData(formElements.formID); - const facets = formdata.getAll(els.catExpBoxName) - .filter(e => e); - const hasFacet = facets.length > 0; - - if (hasFacet && value > MAX_F) { - e.currentTarget.value = MAX_F; - showToastrMsg(i18n.changedToMaxValue); - } else if (!hasFacet && value > MAX_WF) { - e.currentTarget.value = MAX_WF; - showToastrMsg(i18n.changedToMaxValue); - } + $(`input[name=${CYCLIC_TERM.DIV_NUM}]`).on('change', (e) => { + // uncheck if disable + if (e.target.disabled) return; + + const value = Number(e.currentTarget.value); + const formdata = collectFormData(formElements.formID); + const facets = formdata.getAll(els.catExpBoxName).filter((e) => e); + const hasFacet = facets.length > 0; + + if (hasFacet && value > MAX_F) { + e.currentTarget.value = MAX_F; + showToastrMsg(i18n.changedToMaxValue); + } else if (!hasFacet && value > MAX_WF) { + e.currentTarget.value = MAX_WF; + showToastrMsg(i18n.changedToMaxValue); + } - if (!value || value < MIN_VALUE) { - e.currentTarget.value = MIN_VALUE; - showToastrMsg(i18n.changedToMaxValue); - } - }); + if (!value || value < MIN_VALUE) { + e.currentTarget.value = MIN_VALUE; + showToastrMsg(i18n.changedToMaxValue); + } + }); }; const onChangeTraceTimeDivisionByNumber = () => { @@ -278,49 +258,47 @@ $(() => { const endProcs = genProcessDropdownData(procConfigs); // add first end process - const endProcItem = addEndProcMultiSelect( - endProcs.ids, - endProcs.names, { - showDataType: true, - showStrColumn: true, - showCatExp: true, - isRequired: true, - showColor: true, - hasDiv: true - } - ); + const endProcItem = addEndProcMultiSelect(endProcs.ids, endProcs.names, { + showDataType: true, + showStrColumn: true, + showCatExp: true, + isRequired: true, + showColor: true, + hasDiv: true, + }); endProcItem(() => { // show confirm when select Div onChangeDivInFacet(); }); - // add first condition process - const condProcItem = addCondProc(endProcs.ids, endProcs.names, '', formElements.formID, 'btn-add-cond-proc'); + const condProcItem = addCondProc( + endProcs.ids, + endProcs.names, + '', + formElements.formID, + 'btn-add-cond-proc', + ); condProcItem(); // click even of condition proc add button - $(formElements.btnAddCondProc) - .click(() => { - condProcItem(); - }); - + $(formElements.btnAddCondProc).click(() => { + condProcItem(); + }); // check number of sensors in [2,4] // setTimeout(addCheckNumberOfSensor, 3000); // click even of end proc add button - $('#btn-add-end-proc') - .click(() => { - endProcItem(() => { - onChangeDivInFacet(); - }); - addAttributeToElement(); + $('#btn-add-end-proc').click(() => { + endProcItem(() => { + onChangeDivInFacet(); }); + addAttributeToElement(); + }); // Load userBookmarkBar - $('#userBookmarkBar') - .show(); + $('#userBookmarkBar').show(); // checkDisableScatterBtn(); @@ -352,7 +330,10 @@ const loading = $('.loading'); const scpTracing = () => { requestStartedAt = performance.now(); - const isValid = checkValidations({ min: MAX_NUMBER_OF_SENSOR, max: MAX_NUMBER_OF_SENSOR }); + const isValid = checkValidations({ + min: MAX_NUMBER_OF_SENSOR, + max: MAX_NUMBER_OF_SENSOR, + }); updateStyleOfInvalidElements(); if (!isValid) return; @@ -367,17 +348,24 @@ const scpTracing = () => { // Reset Graph setting resetGraphSetting(); + // save select xy to currentXY + currentXY = latestSortColIds.slice(-2); scatterTraceData(true); // todo destroy old chart instances // mockup SCP result - $('#sctr-card') - .html(''); + $('#sctr-card').html(''); }; const showErrorMsgHeatMapChart = () => { - const categoryTypes = [DataTypes.SERIAL.short, DataTypes.INTEGER_CAT.short, DataTypes.TEXT.short]; - const checkedVariablesType = [...$('input[name^=GET02_VALS_SELECT]:checked')].map(el => categoryTypes.includes($(el).attr('data-type-shown-name'))); + const categoryTypes = [ + DataTypes.SERIAL.short, + DataTypes.INTEGER_CAT.short, + DataTypes.TEXT.short, + ]; + const checkedVariablesType = [ + ...$('input[name^=GET02_VALS_SELECT]:checked'), + ].map((el) => categoryTypes.includes($(el).attr('data-type-shown-name'))); if (!checkedVariablesType.includes(false)) { // show error msg showToastrMsg(i18n.i18nGotoHMpMsg, MESSAGE_LEVEL.ERROR); @@ -389,17 +377,21 @@ const showErrorMsgHeatMapChart = () => { const colorTransform = (colorValSets, colorRange, dummyColorSet = false) => { // min value -> // hsv 100°, 100%, 100% // max value -> // hsv 0°, 100%, 100% - const rangeVal = (colorRange.maxVal - colorRange.minVal); + const rangeVal = colorRange.maxVal - colorRange.minVal; if (dummyColorSet) { - return [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100].map(value => hsv2rgb({ - h: value, - s: 1, - v: 1, - })); + return [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100].map((value) => + hsv2rgb({ + h: value, + s: 1, + v: 1, + }), + ); } return colorValSets.map((colorItem) => { - const value = _.isString(colorItem) ? colorRange.codes.indexOf(colorItem) : colorItem; - const newVal = (value - colorRange.minVal) * 100 / rangeVal; + const value = _.isString(colorItem) + ? colorRange.codes.indexOf(colorItem) + : colorItem; + const newVal = ((value - colorRange.minVal) * 100) / rangeVal; const hValue = Math.round(100 - newVal); return hsv2rgb({ h: hValue, @@ -451,22 +443,27 @@ const defaultScaleSets = [ ['0.85', 'rgb(255, 64, 0)'], ['0.9', 'rgb(255, 42, 0)'], ['0.95', 'rgb(255, 21, 0)'], - ['1.0', 'rgb(255, 0, 0)']]; + ['1.0', 'rgb(255, 0, 0)'], +]; const overDataScaleSets = [ ['0.0', 'rgb(0,0,0)'], ['0.5', 'rgb(0, 0, 0)'], - ['1.0', 'rgb(0, 0, 0)']]; + ['1.0', 'rgb(0, 0, 0)'], +]; const violinDefaultColorSets = (numOfColors) => { const colorStep = Math.floor(360 / numOfColors); const defaultColors = []; for (let i = 0; i <= numOfColors; i++) { - let color = hsv2rgb({ - h: i * colorStep, - s: 0.5, - v: 1, - }, true); + let color = hsv2rgb( + { + h: i * colorStep, + s: 0.5, + v: 1, + }, + true, + ); defaultColors.push(color); } return defaultColors; @@ -475,19 +472,23 @@ const violinDefaultColorSets = (numOfColors) => { const genColorScaleBar = (colorData, title, customScaleSets = null) => { const uniqueColorData = colorData.filter(onlyUniqueFilter); const isString = _.isString(uniqueColorData[0]); - const data = [{ - colorscale: customScaleSets || defaultScaleSets, - type: 'heatmap', - z: [uniqueColorData], - colorbar: { - title: { - text: title, - size: CONST.COLORBAR.fontsize, + const data = [ + { + colorscale: customScaleSets || defaultScaleSets, + type: 'heatmap', + z: [uniqueColorData], + colorbar: { + title: { + text: title, + size: CONST.COLORBAR.fontsize, + }, }, }, - }]; + ]; if (isString) { - const tempVals = uniqueColorData.map((val, i) => i / uniqueColorData.length); + const tempVals = uniqueColorData.map( + (val, i) => i / uniqueColorData.length, + ); data[0].z = [tempVals]; data[0].colorbar.title.size = 8; data[0].colorbar.tickangle = -45; @@ -537,7 +538,15 @@ const genTicksColor = (ticksList) => { return ticks; }; -const getHtitle = (showVTitle, showHTitle, isFirstCol, isFirstRow, hTitle, colDat, divType) => { +const getHtitle = ( + showVTitle, + showHTitle, + isFirstCol, + isFirstRow, + hTitle, + colDat, + divType, +) => { if (!colDat) return ''; let hLabel = ''; @@ -561,16 +570,33 @@ const getHtitle = (showVTitle, showHTitle, isFirstCol, isFirstRow, hTitle, colDa return hLabel; }; -const genScatterPlots = (scpDataMatrix, vLabels, hLabels, res, colorScaleOption = undefined, - colorOrdering = undefined, chartScale = undefined, plotType=plotTypeConst.POINT.name) => { +const genScatterPlots = ( + scpDataMatrix, + vLabels, + hLabels, + res, + colorScaleOption = undefined, + colorOrdering = undefined, + chartScale = undefined, + plotType = plotTypeConst.POINT.name, +) => { let scatterDat = []; const unique_color = res.filter_on_demand.color; - const colorOrderVar = (colorOrdering === colorOrders[1] ? colorOrders[0] : colorOrdering) || colorOrders[0]; + const colorOrderVar = + (colorOrdering === colorOrders[1] ? colorOrders[0] : colorOrdering) || + colorOrders[0]; // console.log(allColorValSets); let allColorValSets = []; - if (!res.is_filtered && [DataTypes.STRING.name, DataTypes.INTEGER.name].includes(res.color_type)) { - allColorValSets = (unique_color && unique_color.length && colorOrderVar === colorOrders[0]) - ? unique_color[0].unique_categories : []; + if ( + !res.is_filtered && + [DataTypes.STRING.name, DataTypes.INTEGER.name].includes(res.color_type) + ) { + allColorValSets = + unique_color && + unique_color.length && + colorOrderVar === colorOrders[0] + ? unique_color[0].unique_categories + : []; } if (!allColorValSets.length || colorOrderVar !== colorOrders[0]) { res.array_plotdata.forEach((item) => { @@ -579,8 +605,9 @@ const genScatterPlots = (scpDataMatrix, vLabels, hLabels, res, colorScaleOption } if (unique_color.length && colorOrderVar === colorOrders[0]) { const allSetValue = new Set(allColorValSets); - allColorValSets = unique_color[0].unique_categories - .filter(color => Array.from(allSetValue).includes(color)); + allColorValSets = unique_color[0].unique_categories.filter((color) => + Array.from(allSetValue).includes(color), + ); } let [minColorVal, maxColorVal] = findMinMax(allColorValSets); // category color, reassign by key instead of value @@ -596,7 +623,9 @@ const genScatterPlots = (scpDataMatrix, vLabels, hLabels, res, colorScaleOption colorScaleOption = colorScales.AUTO; } if (colorScaleOption) { - const scaleColorSettings = res.scale_color ? res.scale_color[colorScaleOption] : {}; + const scaleColorSettings = res.scale_color + ? res.scale_color[colorScaleOption] + : {}; const minSettingColorVal = scaleColorSettings['y-min']; const maxSettingColorVal = scaleColorSettings['y-max']; if (minSettingColorVal) { @@ -623,11 +652,18 @@ const genScatterPlots = (scpDataMatrix, vLabels, hLabels, res, colorScaleOption // const isShowOnlyFirstCol = res.is_show_first_h_label; if (!chartScale) { - // eslint-disable-next-line no-param-reassign chartScale = colorScales.SETTING; } - const xRange = calMinMaxYScale(res.scale_x[chartScale]['y-min'], res.scale_x[chartScale]['y-max'], chartScale); - const yRange = calMinMaxYScale(res.scale_y[chartScale]['y-min'], res.scale_y[chartScale]['y-max'], chartScale); + const xRange = calMinMaxYScale( + res.scale_x[chartScale]['y-min'], + res.scale_x[chartScale]['y-max'], + chartScale, + ); + const yRange = calMinMaxYScale( + res.scale_y[chartScale]['y-min'], + res.scale_y[chartScale]['y-max'], + chartScale, + ); const scaleRatio = (xRange[1] - xRange[0]) / (yRange[1] - yRange[0]); const layoutAttributes = { rowsTotal: scpDataMatrix.length, @@ -647,7 +683,12 @@ const genScatterPlots = (scpDataMatrix, vLabels, hLabels, res, colorScaleOption } if (plotType !== plotTypeConst.POINT.name) { - reversedMatrix = removeInvalidDataPoints(reversedMatrix, xRange, yRange, colorOrderVar); + reversedMatrix = removeInvalidDataPoints( + reversedMatrix, + xRange, + yRange, + colorOrderVar, + ); } reversedMatrix.forEach((row, r) => { row.forEach((col, c) => { @@ -661,20 +702,26 @@ const genScatterPlots = (scpDataMatrix, vLabels, hLabels, res, colorScaleOption const isFirstCol = c === 0; // const isFirstRow = r === 0; const isFirstRow = r === reversedMatrix.length - 1; - layoutAttributes.vLabel = (isShowRow && isFirstCol) ? vTitle : ''; + layoutAttributes.vLabel = isShowRow && isFirstCol ? vTitle : ''; layoutAttributes.hLabel = getHtitle( - isShowRow, isShowCol, isFirstCol, isFirstRow, hTitle, col, res.div_data_type, + isShowRow, + isShowCol, + isFirstCol, + isFirstRow, + hTitle, + col, + res.div_data_type, ); layoutAttributes.rowIdx = r; layoutAttributes.colIdx = c; const axisItem = genLayoutAxis(layoutAttributes, !!col); - let colors = col ? (col[colorOrderVar] || col.array_x) : []; - colors = colors.filter(i => i); + let colors = col ? col[colorOrderVar] || col.array_x : []; + colors = colors.filter((i) => i); if (layout.coloraxis.colorbar.tickvals) { // category colors const tickVals = layout.coloraxis.colorbar.tickvals; const tickText = layout.coloraxis.colorbar.ticktext; - colors = colors.map(clr => tickVals[tickText.indexOf(clr)]); + colors = colors.map((clr) => tickVals[tickText.indexOf(clr)]); } const traceDataInsideColorRange = { @@ -700,7 +747,10 @@ const genScatterPlots = (scpDataMatrix, vLabels, hLabels, res, colorScaleOption time_numberings: [], }; if (col) { - if (minColorRange !== minColorVal || maxColorRange !== maxColorVal) { + if ( + minColorRange !== minColorVal || + maxColorRange !== maxColorVal + ) { // get keys of color in range const colorKeysInsideOfRange = []; const colorKeysOutsideOfRange = []; @@ -734,32 +784,49 @@ const genScatterPlots = (scpDataMatrix, vLabels, hLabels, res, colorScaleOption } else { colorKeysOutsideOfRange.push(k); traceDataOutsideColorRange.color_val.push(v); - traceDataOutsideColorRange.org_color_val.push(col.colors[k]); - traceDataOutsideColorRange.array_x.push(col.array_x[k]); - traceDataOutsideColorRange.array_y.push(col.array_y[k]); - traceDataOutsideColorRange.elapsed_time.push(col.elapsed_time[k]); + traceDataOutsideColorRange.org_color_val.push( + col.colors[k], + ); + traceDataOutsideColorRange.array_x.push( + col.array_x[k], + ); + traceDataOutsideColorRange.array_y.push( + col.array_y[k], + ); + traceDataOutsideColorRange.elapsed_time.push( + col.elapsed_time[k], + ); traceDataOutsideColorRange.times.push(col.times[k]); if (col.x_serial && col.x_serial[k]) { - traceDataOutsideColorRange.x_serial.push(col.x_serial[k]); + traceDataOutsideColorRange.x_serial.push( + col.x_serial[k], + ); } if (col.y_serial && col.y_serial[k]) { - traceDataOutsideColorRange.y_serial.push(col.y_serial[k]); + traceDataOutsideColorRange.y_serial.push( + col.y_serial[k], + ); } if (col.time_numberings) { - traceDataOutsideColorRange.time_numberings.push(col.time_numberings[k]); + traceDataOutsideColorRange.time_numberings.push( + col.time_numberings[k], + ); } } }); if (insideArrayX) { traceDataInsideColorRange.array_x = insideArrayX; traceDataInsideColorRange.array_y = insideArrayY; - traceDataInsideColorRange.elapsed_time = insideElapsedTime; + traceDataInsideColorRange.elapsed_time = + insideElapsedTime; traceDataInsideColorRange.times = insideTimes; traceDataInsideColorRange.color_val = insideColorVal; traceDataInsideColorRange.x_serial = insideXSerial; traceDataInsideColorRange.y_serial = insideYSerial; - traceDataInsideColorRange.org_color_val = insideOrgColor; - traceDataInsideColorRange.time_numberings = insideTimeSort; + traceDataInsideColorRange.org_color_val = + insideOrgColor; + traceDataInsideColorRange.time_numberings = + insideTimeSort; } } } @@ -770,7 +837,8 @@ const genScatterPlots = (scpDataMatrix, vLabels, hLabels, res, colorScaleOption legendgroup: '', marker: { color: traceDataOutsideColorRange.color_val.length - ? traceDataOutsideColorRange.color_val : CONST.COLOR_NORMAL, + ? traceDataOutsideColorRange.color_val + : CONST.COLOR_NORMAL, symbol: 'circle', // coloraxis: 'coloraxis2', colorscale: overDataScaleSets, @@ -790,7 +858,8 @@ const genScatterPlots = (scpDataMatrix, vLabels, hLabels, res, colorScaleOption array_y: traceDataOutsideColorRange.array_y, elapsed_time: traceDataOutsideColorRange.elapsed_time, times: traceDataOutsideColorRange.times, - time_numberings: traceDataOutsideColorRange.time_numberings, + time_numberings: + traceDataOutsideColorRange.time_numberings, colors: traceDataOutsideColorRange.color_val, org_colors: traceDataOutsideColorRange.org_color_val, x_serial: traceDataOutsideColorRange.x_serial, @@ -806,7 +875,9 @@ const genScatterPlots = (scpDataMatrix, vLabels, hLabels, res, colorScaleOption }; scatterDat.push(scatterItemOutsideColorRange); } - const colorRange = res.scale_color ? traceDataInsideColorRange.color_val : colors; + const colorRange = res.scale_color + ? traceDataInsideColorRange.color_val + : colors; const scatterItemInsideColorRange = { legendgroup: '', marker: { @@ -845,20 +916,33 @@ const genScatterPlots = (scpDataMatrix, vLabels, hLabels, res, colorScaleOption }, }; if (colorScaleOption === colorScales.AUTO) { - scatterItemInsideColorRange.marker.colorscale = chartOptions.colorScaleSets; + scatterItemInsideColorRange.marker.colorscale = + chartOptions.colorScaleSets; } scatterDat.push(scatterItemInsideColorRange); if (col && (col.x_threshold || col.y_threshold)) { - layout.shapes.push(...genThresholds(col.x_threshold, col.y_threshold, axisItem, xRange, yRange)); + layout.shapes.push( + ...genThresholds( + col.x_threshold, + col.y_threshold, + axisItem, + xRange, + yRange, + ), + ); } }); }); layout.coloraxis.cmin = minColorRange; layout.coloraxis.cmax = maxColorRange; - if ([DataTypes.STRING.name, DataTypes.INTEGER.name].includes(res.color_type) - && layout.coloraxis.colorbar.tickvals) { + if ( + [DataTypes.STRING.name, DataTypes.INTEGER.name].includes( + res.color_type, + ) && + layout.coloraxis.colorbar.tickvals + ) { let tickVals = layout.coloraxis.colorbar.tickvals; if (!tickVals) { tickVals = unique_color[0].unique_categories; @@ -869,7 +953,11 @@ const genScatterPlots = (scpDataMatrix, vLabels, hLabels, res, colorScaleOption [layout.coloraxis.cmin, layout.coloraxis.cmax] = findMinMax(ticksColor); } else { const isIntColor = res.color_type === DataTypes.INTEGER.name; - const customTicks = genLinearColorBar([minColorRange, maxColorRange], isIntColor, chartOptions.colorFmt); + const customTicks = genLinearColorBar( + [minColorRange, maxColorRange], + isIntColor, + chartOptions.colorFmt, + ); layout.coloraxis.colorbar.tickvals = customTicks; layout.coloraxis.colorbar.ticktext = customTicks; // reassign colorbar range to show first tick and last tick @@ -888,7 +976,12 @@ const genScatterPlots = (scpDataMatrix, vLabels, hLabels, res, colorScaleOption } if (plotType !== plotTypeConst.POINT.name) { // update plot-type: points and/or lines with color - scatterDat = updatePlotType(scatterDat, plotType, [layout.coloraxis.cmin, layout.coloraxis.cmax], layout); + scatterDat = updatePlotType( + scatterDat, + plotType, + [layout.coloraxis.cmin, layout.coloraxis.cmax], + layout, + ); } // console.log(scatterDat); @@ -909,17 +1002,18 @@ const genScatterPlots = (scpDataMatrix, vLabels, hLabels, res, colorScaleOption graphDiv.on('plotly_hover', (data) => { let serials = res.serials; let datetime = res.datetime; - // eslint-disable-next-line no-shadow - const dataScp = data.points.length - ? data.points[0] : null; + + const dataScp = data.points.length ? data.points[0] : null; if (!dataScp) return; - const { - pageX, - pageY, - } = data.event; + const { pageX, pageY } = data.event; if ('customdata' in dataScp.data) { - if (dataScp.data.customdata.x_serial && dataScp.data.customdata.x_serial.length) { - serials = dataScp.data.customdata.x_serial.map(xserials => xserials.data); + if ( + dataScp.data.customdata.x_serial && + dataScp.data.customdata.x_serial.length + ) { + serials = dataScp.data.customdata.x_serial.map( + (xserials) => xserials.data, + ); } if (dataScp.data.customdata.times) { datetime = dataScp.data.customdata.times; @@ -938,14 +1032,15 @@ const genScatterPlots = (scpDataMatrix, vLabels, hLabels, res, colorScaleOption datetime: datetime, start_proc: res.start_proc, }; - const key = dataScp.data.customdata.first_point_idx || dataScp.pointIndex; + const key = + dataScp.data.customdata.first_point_idx || dataScp.pointIndex; setTimeout(() => { makeScatterHoverInfoBox(dataScp, option, key, pageX, pageY); }, 100); }); unHoverHandler(graphDiv); - + // const chartDOM = document.getElementById(canvasID); // window.removeEventListener('click', () => { // }); @@ -954,23 +1049,24 @@ const genScatterPlots = (scpDataMatrix, vLabels, hLabels, res, colorScaleOption // }); }; -const genLinearColorBar = (colorRange, isIntColor=false, fmt) => { +const genLinearColorBar = (colorRange, isIntColor = false, fmt) => { const tickValues = [0, 0.25, 0.5, 0.75, 1]; const stepValues = colorRange[1] - colorRange[0]; const newFmt = fmt.includes('e') ? '.1e' : fmt; const ticks = tickValues.map((tick) => { - const tickValue = applySignificantDigit(colorRange[0] + tick * stepValues, 4, newFmt); + let tickVal = colorRange[0] + tick * stepValues; if (isIntColor) { - return Math.round(tickValue); + tickVal = Math.round(tickVal); } - return tickValue; + return applySignificantDigit(tickVal, 4, newFmt); }); return ticks; }; // generate scatter hover information const makeScatterHoverInfoBox = (prop, option, key, pageX, pageY) => { - if (!prop || !prop.data.customdata || !prop.data.customdata.columndata) return; + if (!prop || !prop.data.customdata || !prop.data.customdata.columndata) + return; const col = prop.data.customdata.columndata; const vTitle = prop.data.customdata.vtitle; const hTitle = prop.data.customdata.htitle; @@ -981,25 +1077,26 @@ const makeScatterHoverInfoBox = (prop, option, key, pageX, pageY) => { const timeSort = prop.data.customdata.time_numberings || []; const orgColorValue = prop.data.customdata.org_colors; const xSerial = prop.data.customdata.x_serial; - const [lv1Label, lv2Label] = vTitle ? vTitle.toString() - .split('|') : [null, null]; + const [lv1Label, lv2Label] = vTitle + ? vTitle.toString().split('|') + : [null, null]; const level1 = lv1Label ? `Lv1 = ${lv1Label}` : ''; const level2 = lv2Label ? `Lv2 = ${lv2Label}` : ''; - const seperator = (level1 && level2) ? ', ' : ''; - const dataNo = (option.compare_type === els.dataNumberTerm - && hTitle) ? hTitle : null; + const seperator = level1 && level2 ? ', ' : ''; + const dataNo = + option.compare_type === els.dataNumberTerm && hTitle ? hTitle : null; const category = option.div_name ? hTitle : null; - const facet = (level1 || level2) ? `${level1}${seperator}${level2}` : null; + const facet = level1 || level2 ? `${level1}${seperator}${level2}` : null; const timeStart = col.time_min - ? moment.utc(col.time_min) - .local() - .format(DATE_FORMAT_WITHOUT_TZ) : ''; - const timeEnd = col.time_max ? moment.utc(col.time_max) - .local() - .format(DATE_FORMAT_WITHOUT_TZ) : ''; - const getPointTime = pointer => (pointer ? moment.utc(pointer) - .local() - .format(DATE_FORMAT_WITHOUT_TZ) : ''); + ? moment.utc(col.time_min).local().format(DATE_FORMAT_WITHOUT_TZ) + : ''; + const timeEnd = col.time_max + ? moment.utc(col.time_max).local().format(DATE_FORMAT_WITHOUT_TZ) + : ''; + const getPointTime = (pointer) => + pointer + ? moment.utc(pointer).local().format(DATE_FORMAT_WITHOUT_TZ) + : ''; const getPointValue = (i) => { const xValue = applySignificantDigit(arxValue[i]); const yValue = applySignificantDigit(aryValue[i]); @@ -1010,14 +1107,18 @@ const makeScatterHoverInfoBox = (prop, option, key, pageX, pageY) => { }; const getDatetime = (key) => { let datetime = getPointTime(option.datetime[key]); - const fromDiffStartProc = ![option.x_proc, option.y_proc].includes(option.start_proc); + const fromDiffStartProc = ![option.x_proc, option.y_proc].includes( + option.start_proc, + ); const xProcName = fromDiffStartProc ? ` @${option.start_proc}` : ''; datetime += xProcName; return datetime; }; const getSerial = (xSerials, itemIdx) => { let serialInfo = []; - const fromDiffStartProc = ![option.x_proc, option.y_proc].includes(option.start_proc); + const fromDiffStartProc = ![option.x_proc, option.y_proc].includes( + option.start_proc, + ); const xProcName = fromDiffStartProc ? ` @${option.start_proc}` : ''; if (xSerials) { serialInfo = xSerials.map((serial) => { @@ -1026,7 +1127,9 @@ const makeScatterHoverInfoBox = (prop, option, key, pageX, pageY) => { } return serialInfo; }; - const colorVal = orgColorValue[key] ? applySignificantDigit(orgColorValue[key]) : ''; + const colorVal = orgColorValue[key] + ? applySignificantDigit(orgColorValue[key]) + : ''; const pointValue = getPointValue(key); const datetime = getDatetime(key); const serialValue = getSerial(option.serials, key); @@ -1039,10 +1142,14 @@ const makeScatterHoverInfoBox = (prop, option, key, pageX, pageY) => { color: option.color_name ? colorVal : '', datetime, serial: serialValue, - elapsed_time: (elapsedTimeValue[key] || elapsedTimeValue[key] == 0) - ? applySignificantDigit(elapsedTimeValue[key]) : '', - time_numberings: (timeSort[key] || timeSort[key] == 0) - ? applySignificantDigit(timeSort[key]) : '', + elapsed_time: + elapsedTimeValue[key] || elapsedTimeValue[key] == 0 + ? applySignificantDigit(elapsedTimeValue[key]) + : '', + time_numberings: + timeSort[key] || timeSort[key] == 0 + ? applySignificantDigit(timeSort[key]) + : '', from: timeStart, to: timeEnd, n_total: col.n_total, @@ -1051,7 +1158,8 @@ const makeScatterHoverInfoBox = (prop, option, key, pageX, pageY) => { facet, xthreshold, ythreshold, - }, { + }, + { x: pageX - 160, y: pageY, }, @@ -1061,26 +1169,36 @@ const makeScatterHoverInfoBox = (prop, option, key, pageX, pageY) => { }; const removeEmptyFromMatrix = (matrix) => { - const validRows = matrix.filter(row => row.filter(col => col !== null).length > 0); + const validRows = matrix.filter( + (row) => row.filter((col) => col !== null).length > 0, + ); const invalidCols = []; // loop cols for (let i = 0; i < validRows[0].length; i++) { - const colValues = validRows.map(row => row[i]) - .filter(col => col !== null); + const colValues = validRows + .map((row) => row[i]) + .filter((col) => col !== null); if (!colValues.length) { invalidCols.push(i); } } for (let i = validRows[0].length; i >= 0; i--) { if (invalidCols.includes(i)) { - validRows.map(row => row.splice(i, 1)); + validRows.map((row) => row.splice(i, 1)); } } return validRows; }; -const genVLabels = (vLabels, parentId = 'sctr-card', chartHeight, figSize, xName, yName) => { +const genVLabels = ( + vLabels, + parentId = 'sctr-card', + chartHeight, + figSize, + xName, + yName, +) => { // remove all rendered html $('.scp-html-tag').remove(); @@ -1095,9 +1213,7 @@ const genVLabels = (vLabels, parentId = 'sctr-card', chartHeight, figSize, xName
      `; - $(`#${parentId}`) - .append(XYHtml); - + $(`#${parentId}`).append(XYHtml); if (!vLabels || vLabels.length === 0) { return; @@ -1107,22 +1223,26 @@ const genVLabels = (vLabels, parentId = 'sctr-card', chartHeight, figSize, xName const t = figSize / 2 + 50; const spaceY = (chartHeight - 200) * SCATTER_MARGIN.Y_NORMAL; vLabels.forEach((vLabel, i) => { - const top = i === 0 ? t : (i * (figSize + spaceY) + t); - vLabelHtml += `
      ${vLabel}
      `; + const top = i === 0 ? t : i * (figSize + spaceY) + t; + vLabelHtml += `
      ${vLabel}
      `; }); - $(`#${parentId}`) - .append(vLabelHtml); + $(`#${parentId}`).append(vLabelHtml); // set width of label <= fig size vLabels.forEach((vla, i) => { - const s = $(`#scp-vlabel-${i} span`); - s.width(figSize); - s.parent().width(figSize); + const s = $(`#scp-vlabel-${i} span`); + s.width(figSize); + s.parent().width(figSize); }); }; -const setChartSize = (scpMatrix, chartHeight, hasColorbar, hTileISBreakLine) => { +const setChartSize = ( + scpMatrix, + chartHeight, + hasColorbar, + hTileISBreakLine, +) => { SCATTER_MARGIN.X_NORMAL = X_NORMAL; SCATTER_MARGIN.Y_NORMAL = Y_NORMAL; @@ -1141,7 +1261,10 @@ const setChartSize = (scpMatrix, chartHeight, hasColorbar, hTileISBreakLine) => const hOffset = 90; const chartH = yPage - hOffset; - const yM2 = chartH * SCATTER_MARGIN.Y_NORMAL > MIN_Y_MARGIN ? MIN_Y_MARGIN : chartH * SCATTER_MARGIN.Y_NORMAL; + const yM2 = + chartH * SCATTER_MARGIN.Y_NORMAL > MIN_Y_MARGIN + ? MIN_Y_MARGIN + : chartH * SCATTER_MARGIN.Y_NORMAL; let yFig = (chartH - yM2 * (nRow - 1)) / nRow; // Aspect ratio 1:1 @@ -1152,29 +1275,32 @@ const setChartSize = (scpMatrix, chartHeight, hasColorbar, hTileISBreakLine) => let actualXPage = xFig * nCol + xM1 + xM3 + xM2 * (nCol - 1); let actualYPage = yFig * nRow + hOffset + yM2 * (nRow - 1); - if (actualXPage * SCATTER_MARGIN.X_NORMAL < MIN_X_MARGIN) { - const addMargin = (MIN_X_MARGIN - (actualYPage * SCATTER_MARGIN.X_NORMAL)) * (nCol - 1); - if (actualXPage + addMargin < xPage) { - actualXPage += addMargin; - SCATTER_MARGIN.X_NORMAL = MIN_X_MARGIN / actualXPage; - } - + if (actualXPage * SCATTER_MARGIN.X_NORMAL < MIN_X_MARGIN) { + const addMargin = + (MIN_X_MARGIN - actualYPage * SCATTER_MARGIN.X_NORMAL) * (nCol - 1); + if (actualXPage + addMargin < xPage) { + actualXPage += addMargin; + SCATTER_MARGIN.X_NORMAL = MIN_X_MARGIN / actualXPage; + } } - - if ( hTileISBreakLine && actualYPage * SCATTER_MARGIN.Y_NORMAL < MIN_Y_MARGIN) { - const addMargin = (MIN_Y_MARGIN - (actualYPage * SCATTER_MARGIN.Y_NORMAL)) * (nRow - 1); + if ( + hTileISBreakLine && + actualYPage * SCATTER_MARGIN.Y_NORMAL < MIN_Y_MARGIN + ) { + const addMargin = + (MIN_Y_MARGIN - actualYPage * SCATTER_MARGIN.Y_NORMAL) * (nRow - 1); actualYPage += addMargin; SCATTER_MARGIN.Y_NORMAL = MIN_Y_MARGIN / actualYPage; } if (actualYPage * SCATTER_MARGIN.Y_NORMAL > MIN_Y_MARGIN) { - SCATTER_MARGIN.Y_NORMAL = MIN_Y_MARGIN / actualYPage; + SCATTER_MARGIN.Y_NORMAL = MIN_Y_MARGIN / actualYPage; } $('#sctr-card').height(actualYPage); $('#sctr-card').width(actualXPage); - $('#sctr-card').css({maxWidth: `calc(100vw - 100px)`}); + $('#sctr-card').css({ maxWidth: `calc(100vw - 100px)` }); return [actualYPage, xFig]; }; @@ -1183,7 +1309,12 @@ const resetChartSize = () => { $('#sctr-card').removeAttr('style'); }; -const showSCP = async (res, settings = undefined, clearOnFlyFilter = false, autoUpdate = false) => { +const showSCP = async ( + res, + settings = undefined, + clearOnFlyFilter = false, + autoUpdate = false, +) => { if (!res.array_plotdata) { loadingHide(); return; @@ -1198,8 +1329,7 @@ const showSCP = async (res, settings = undefined, clearOnFlyFilter = false, auto response = res; // remove old hover infor violin and heatmap removeHoverInfo(); - $('#colorSettingGrp') - .show(); + $('#colorSettingGrp').show(); $('#sctr-card-parent').show(); resetChartSize(); @@ -1216,10 +1346,16 @@ const showSCP = async (res, settings = undefined, clearOnFlyFilter = false, auto // $(`select[name=${els.scpColorOrder}]`).val('1'); // reverse array to show latest first let zoomRange = null; - const isShowDate = res.COMMON.compareType === els.cyclicTerm || res.COMMON.compareType === els.directTerm; + const isShowDate = + res.COMMON.compareType === els.cyclicTerm || + res.COMMON.compareType === els.directTerm; const showGraph = (settings = { isShowForward: false }) => { const scpCloneData = JSON.parse(JSON.stringify(scpData)); - const [matrix, vLabels, hLabels] = genGraphMatrix(scpCloneData, res.is_show_v_label, !!settings.isShowForward); + const [matrix, vLabels, hLabels] = genGraphMatrix( + scpCloneData, + res.is_show_v_label, + !!settings.isShowForward, + ); // todo: reverse v + hlabel + matrix const scpMatrix = removeEmptyFromMatrix(matrix); // scatter for category and real color @@ -1237,32 +1373,91 @@ const showSCP = async (res, settings = undefined, clearOnFlyFilter = false, auto $('#sctr-card').height(chartHeight); let actualHeight; let figSize; - const hasColorBar = res.color_name || (settings.colorOrdering && settings.colorOrdering !== colorOrders[1]); - const isShowDateTime = [els.cyclicTerm, els.directTerm].includes(res.COMMON.compareType) ; - [actualHeight, figSize] = setChartSize(scpMatrix, chartHeight, hasColorBar, isShowDateTime); - genScatterPlots(scpMatrix, vLabels, hLabels, res, settings.colorScale, - settings.colorOrdering, settings.chartScale, settings.plotType || plotTypeConst.POINT.name); - genVLabels(vLabels, 'sctr-card', actualHeight, figSize, res.x_name, res.y_name); + const hasColorBar = + res.color_name || + (settings.colorOrdering && + settings.colorOrdering !== colorOrders[1]); + const isShowDateTime = [ + els.cyclicTerm, + els.directTerm, + ].includes(res.COMMON.compareType); + [actualHeight, figSize] = setChartSize( + scpMatrix, + chartHeight, + hasColorBar, + isShowDateTime, + ); + genScatterPlots( + scpMatrix, + vLabels, + hLabels, + res, + settings.colorScale, + settings.colorOrdering, + settings.chartScale, + settings.plotType || plotTypeConst.POINT.name, + ); + genVLabels( + vLabels, + 'sctr-card', + actualHeight, + figSize, + res.x_name, + res.y_name, + ); let timerVar = null; $(window).on('resize', () => { clearTimeout(timerVar); timerVar = setTimeout(() => { - [actualHeight, figSize] = setChartSize(scpMatrix, chartHeight, hasColorBar, isShowDateTime); - genScatterPlots(scpMatrix, vLabels, hLabels, res, settings.colorScale, - settings.colorOrdering, settings.chartScale, settings.plotType); - genVLabels(vLabels, 'sctr-card', actualHeight, figSize, res.x_name, res.y_name); - initFilterModal(res, false); - }, - 500) + [actualHeight, figSize] = setChartSize( + scpMatrix, + chartHeight, + hasColorBar, + isShowDateTime, + ); + genScatterPlots( + scpMatrix, + vLabels, + hLabels, + res, + settings.colorScale, + settings.colorOrdering, + settings.chartScale, + settings.plotType, + ); + genVLabels( + vLabels, + 'sctr-card', + actualHeight, + figSize, + res.x_name, + res.y_name, + ); + initFilterModal(res, false); + }, 500); }); } - const divNumber = res.div_name && res.div_data_type === DataTypes.INTEGER.name; - if ([scpChartType.HEATMAP, scpChartType.HEATMAP_BY_INT].includes(chartType)) { - genHTMLContentMatrix(scpMatrix, 'sctr-card', xName, yName, isShowFirstLabelH, isShowDate, divNumber); + const divNumber = + res.div_name && res.div_data_type === DataTypes.INTEGER.name; + if ( + [scpChartType.HEATMAP, scpChartType.HEATMAP_BY_INT].includes( + chartType, + ) + ) { + genHTMLContentMatrix( + scpMatrix, + 'sctr-card', + xName, + yName, + isShowFirstLabelH, + isShowDate, + divNumber, + ); const option = { - isShowNumberOfData: res.COMMON.compareType === els.dataNumberTerm, + isShowNumberOfData: + res.COMMON.compareType === els.dataNumberTerm, isShowFacet: res.is_show_v_label, isShowDiv: res.div_name !== null, hasLv2: res.level_names && res.level_names.length >= 2, @@ -1270,9 +1465,9 @@ const showSCP = async (res, settings = undefined, clearOnFlyFilter = false, auto yDataType: res.y_data_type, chartType, colorName: res.color_name, - use_map_xy: false + use_map_xy: false, }; - heatmapData = {scpMatrix, option, zoomRange}; + heatmapData = { scpMatrix, option, zoomRange }; genHeatMapPlots(scpMatrix, option, zoomRange, (event) => { zoomRange = event; const sets = getCurrentSettings(); @@ -1282,9 +1477,19 @@ const showSCP = async (res, settings = undefined, clearOnFlyFilter = false, auto if (chartType === scpChartType.VIOLIN) { const stringCol = res.string_axis || null; - genHTMLContentMatrix(scpMatrix, 'sctr-card', xName, yName, isShowFirstLabelH, isShowDate, divNumber, stringCol); + genHTMLContentMatrix( + scpMatrix, + 'sctr-card', + xName, + yName, + isShowFirstLabelH, + isShowDate, + divNumber, + stringCol, + ); const option = { - isShowNumberOfData: res.COMMON.compareType === els.dataNumberTerm, + isShowNumberOfData: + res.COMMON.compareType === els.dataNumberTerm, isShowFacet: res.is_show_v_label, hasLv2: res.level_names && res.level_names.length >= 2, isShowDiv: res.div_name !== null, @@ -1297,11 +1502,19 @@ const showSCP = async (res, settings = undefined, clearOnFlyFilter = false, auto xDataType: res.x_data_type, yDataType: res.y_data_type, }; - genViolinPlots(scpMatrix, option, res.scale_x, res.scale_y, settings.chartScale || chartScales[1], zoomRange, (event) => { - zoomRange = event; - const sets = getCurrentSettings(); - showGraph(sets); - }); + genViolinPlots( + scpMatrix, + option, + res.scale_x, + res.scale_y, + settings.chartScale || chartScales[1], + zoomRange, + (event) => { + zoomRange = event; + const sets = getCurrentSettings(); + showGraph(sets); + }, + ); } // remove map_xy and map_xy_n if there is not heatmap by int @@ -1314,11 +1527,10 @@ const showSCP = async (res, settings = undefined, clearOnFlyFilter = false, auto loadingHide(); if (!autoUpdate) { - // scroll to chart - const scpCardPosition = $('#colorSettingGrp') - .offset().top; - $('html,body') - .animate({ scrollTop: scpCardPosition }, 1000); + // scroll to chart + const scpCardPosition = + getOffsetTopDisplayGraph('#colorSettingGrp'); + $('html,body').animate({ scrollTop: scpCardPosition }, 1000); } initFilterModal(res, clearOnFlyFilter); }; @@ -1330,57 +1542,49 @@ const showSCP = async (res, settings = undefined, clearOnFlyFilter = false, auto } const onChangeChartScale = () => { - $(`select[name=${els.scpChartScale}]`) - .off('change'); - $(`select[name=${els.scpChartScale}]`) - .on('change', (e) => { - if (chartType === scpChartType.HEATMAP) return; - loadingShow(); - setTimeout(() => { - const graphsettings = getCurrentSettings(); - showGraph(graphsettings); - }, 1000); - }); + $(`select[name=${els.scpChartScale}]`).off('change'); + $(`select[name=${els.scpChartScale}]`).on('change', (e) => { + if (chartType === scpChartType.HEATMAP) return; + loadingShow(); + setTimeout(() => { + const graphsettings = getCurrentSettings(); + showGraph(graphsettings); + }, 1000); + }); }; const onChangeColorOrder = () => { - $(`select[name=${els.scpColorOrder}]`) - .off('change'); - $(`select[name=${els.scpColorOrder}]`) - .on('change', (e) => { - if (chartType !== scpChartType.SCATTER) return; - loadingShow(); - setTimeout(() => { - $(`select[name=${els.scpColorScale}]`).val('AUTO'); - const graphsettings = getCurrentSettings(); - callToBackEndAPI(graphsettings); - }, 1000); - }); + $(`select[name=${els.scpColorOrder}]`).off('change'); + $(`select[name=${els.scpColorOrder}]`).on('change', (e) => { + if (chartType !== scpChartType.SCATTER) return; + loadingShow(); + setTimeout(() => { + $(`select[name=${els.scpColorScale}]`).val('AUTO'); + const graphsettings = getCurrentSettings(); + callToBackEndAPI(graphsettings); + }, 1000); + }); }; const onChangeColorScale = () => { - $(`select[name=${els.scpColorScale}]`) - .off('change'); - $(`select[name=${els.scpColorScale}]`) - .on('change', (e) => { - if (chartType !== scpChartType.SCATTER) return; - loadingShow(); - setTimeout(() => { - const graphsettings = getCurrentSettings(); - showGraph(graphsettings); - }, 500); - }); + $(`select[name=${els.scpColorScale}]`).off('change'); + $(`select[name=${els.scpColorScale}]`).on('change', (e) => { + if (chartType !== scpChartType.SCATTER) return; + loadingShow(); + setTimeout(() => { + const graphsettings = getCurrentSettings(); + showGraph(graphsettings); + }, 500); + }); }; const onShowBackward = () => { - $(`select[name=${els.showBackward}]`) - .off('change'); - $(`select[name=${els.showBackward}]`) - .on('change', () => { - loadingShow(); - setTimeout(() => { - const graphsettings = getCurrentSettings(); - showGraph(graphsettings); - }, 1000); - }); + $(`select[name=${els.showBackward}]`).off('change'); + $(`select[name=${els.showBackward}]`).on('change', () => { + loadingShow(); + setTimeout(() => { + const graphsettings = getCurrentSettings(); + showGraph(graphsettings); + }, 1000); + }); }; const onChangeColNumber = () => { $(`select[name=${els.colNumber}]`) @@ -1437,7 +1641,16 @@ const resetGraphSetting = () => { currentMatrix = MAX_MATRIX; }; -const genHTMLContentMatrix = (scpMatrix, cardID, xName, yName, isShowFirstLabelH, isShowDate, isDivNumber, stringCol = null) => { +const genHTMLContentMatrix = ( + scpMatrix, + cardID, + xName, + yName, + isShowFirstLabelH, + isShowDate, + isDivNumber, + stringCol = null, +) => { let contentDOM = ''; const totalRow = scpMatrix.length; const totalCol = scpMatrix[0].length; @@ -1465,7 +1678,10 @@ const genHTMLContentMatrix = (scpMatrix, cardID, xName, yName, isShowFirstLabelH } if (totalCol > 1) { - width = j === 0 ? `calc(100% / ${totalCol} + 24px)` : `calc(100% / ${totalCol} - 6px - ${30 / (totalCol - 1)}px)`; + width = + j === 0 + ? `calc(100% / ${totalCol} + 24px)` + : `calc(100% / ${totalCol} - 6px - ${30 / (totalCol - 1)}px)`; } else { width = '100%'; } @@ -1473,20 +1689,30 @@ const genHTMLContentMatrix = (scpMatrix, cardID, xName, yName, isShowFirstLabelH if (isShowFirstLabelH) { labelH = i === 0 ? firstLabelH[j] : ''; } else { - labelH = item ? item.h_label === null ? '' : item.h_label : ''; + labelH = item + ? item.h_label === null + ? '' + : item.h_label + : ''; } - if (isShowDate) { - labelH = labelH && labelH.split(COMMON_CONSTANT.EN_DASH) - .map(vl => formatDateTime(vl.trim())) - .join(` ${COMMON_CONSTANT.EN_DASH} `); + labelH = + labelH && + labelH + .split(COMMON_CONSTANT.EN_DASH) + .map((vl) => + formatDateTime(vl.trim(), DATE_FORMAT_WITHOUT_TZ, { + withMillisecs: false, + }), + ) + .join(` ${COMMON_CONSTANT.EN_DASH} `); } else if (labelH && isDivNumber) { labelH = `Cat${labelH}`; } const h = `${labelH}`; - const hHtml = isShowFirstLabelH ? labelH ? h : '' : h; + const hHtml = isShowFirstLabelH ? (labelH ? h : '') : h; column += `
      @@ -1495,8 +1721,10 @@ const genHTMLContentMatrix = (scpMatrix, cardID, xName, yName, isShowFirstLabelH
      `; } - - const height = i === (totalRow - 1) ? `calc(100% / ${totalRow} + 20px)` : `calc(100% / ${totalRow} - 10px)`; + const height = + i === totalRow - 1 + ? `calc(100% / ${totalRow} + 20px)` + : `calc(100% / ${totalRow} - 10px)`; contentDOM += `
      @@ -1538,11 +1766,15 @@ const genHTMLContentMatrix = (scpMatrix, cardID, xName, yName, isShowFirstLabelH
      `; - $(`#${cardID}`) - .html(chartDom).css({ height: 'auto' }); + $(`#${cardID}`).html(chartDom).css({ height: 'auto' }); }; -const genHeatMapPlots = (scpData, option, zoomRange = null, callback = null) => { +const genHeatMapPlots = ( + scpData, + option, + zoomRange = null, + callback = null, +) => { let allColorValSets = []; const allYValues = []; const allXValues = []; @@ -1551,11 +1783,14 @@ const genHeatMapPlots = (scpData, option, zoomRange = null, callback = null) => let allYValue = []; row.forEach((item) => { if (item) { - item.array_y = item.array_y.map(val => val.toString()); + item.array_y = item.array_y.map((val) => val.toString()); allYValue = [...allYValue, ...item.array_y]; if (item.array_z) { item.array_z.forEach((z) => { - allColorValSets = [...allColorValSets, ...z.map(y => y)]; + allColorValSets = [ + ...allColorValSets, + ...z.map((y) => y), + ]; }); } else { allColorValSets = item.colors; @@ -1573,7 +1808,7 @@ const genHeatMapPlots = (scpData, option, zoomRange = null, callback = null) => for (let j = 0; j < totalRow; j++) { const item = scpData[j][i]; if (item) { - item.array_x = item.array_x.map(val => val.toString()); + item.array_x = item.array_x.map((val) => val.toString()); allXValue = [...allXValue, ...item.array_x]; } } @@ -1585,8 +1820,8 @@ const genHeatMapPlots = (scpData, option, zoomRange = null, callback = null) => const canvasID = `scp-${i}-${j}`; const graphDiv = document.getElementById(canvasID); if (item) { - item.array_y = item.array_y.map(val => val.toString()); - item.array_x = item.array_x.map(val => val.toString()); + item.array_y = item.array_y.map((val) => val.toString()); + item.array_x = item.array_x.map((val) => val.toString()); item.zmax = zmax; item.zmin = zmin; item.isShowY = j === 0; @@ -1602,39 +1837,37 @@ const genHeatMapPlots = (scpData, option, zoomRange = null, callback = null) => fakeItem.isShowX = i === scpData.length - 1; fakeItem.array_x = allXValues[j]; fakeItem.array_y = allYValues[i]; - fakeItem.array_z = Array(allYValues[i].length) - .fill(Array(allXValues[j].length) - .fill(-1)); + fakeItem.array_z = Array(allYValues[i].length).fill( + Array(allXValues[j].length).fill(-1), + ); generateHeatmapPlot(fakeItem, option, zoomRange); } - graphDiv.on('plotly_relayout', - (eventdata) => { - callback(eventdata); - }); + graphDiv.on('plotly_relayout', (eventdata) => { + callback(eventdata); + }); option.canvas_id = canvasID; graphDiv.on('plotly_hover', (data) => { setTimeout(() => { - $('.scp-hover-info') - .remove(); + $('.scp-hover-info').remove(); const dataScp = scpData[i][j]; if (!dataScp) return; - const { + const { x, y } = data.points[0]; + const { pageX, pageY } = data.event; + makeHeatmapHoverInfoBox( + dataScp, x, y, - } = data.points[0]; - const { + option, pageX, pageY, - } = data.event; - makeHeatmapHoverInfoBox(dataScp, x, y, option, pageX, pageY); + ); }, 200); }); unHoverHandler(graphDiv); graphDiv.addEventListener('mouseleave', () => { - $('.scp-hover-info') - .remove(); + $('.scp-hover-info').remove(); }); }); }); @@ -1643,14 +1876,34 @@ const genHeatMapPlots = (scpData, option, zoomRange = null, callback = null) => genColorScaleBar(allColorValSets, colorBarTitle, colorPalettes); }; -const genViolinPlots = (scpData, option, scaleX, scaleY, scaleOption = chartScales[1], zoomRange = null, callback) => { +const genViolinPlots = ( + scpData, + option, + scaleX, + scaleY, + scaleOption = chartScales[1], + zoomRange = null, + callback, +) => { let rangeScaleX = [null, null]; let rangeScaleY = [null, null]; let yThreshold = null; let xThreshold = null; if (scaleOption) { - rangeScaleX = scaleX && calMinMaxYScale(scaleX[scaleOption]['y-min'], scaleX[scaleOption]['y-max'], scaleOption) - rangeScaleY = scaleY && calMinMaxYScale(scaleY[scaleOption]['y-min'], scaleY[scaleOption]['y-max'], scaleOption) + rangeScaleX = + scaleX && + calMinMaxYScale( + scaleX[scaleOption]['y-min'], + scaleX[scaleOption]['y-max'], + scaleOption, + ); + rangeScaleY = + scaleY && + calMinMaxYScale( + scaleY[scaleOption]['y-min'], + scaleY[scaleOption]['y-max'], + scaleOption, + ); } let allColors = []; @@ -1666,17 +1919,20 @@ const genViolinPlots = (scpData, option, scaleX, scaleY, scaleOption = chartScal } }); }); - const uniqueColors = allColors.map(el => el.toString()).filter(onlyUniqueFilter); + const uniqueColors = allColors + .map((el) => el.toString()) + .filter(onlyUniqueFilter); const violinColors = violinDefaultColorSets(uniqueColors.length); const styles = uniqueColors.map((color, k) => ({ target: color, value: { // line: { color: `#${Math.floor((1 << 24) * k | 0).toString(16)}` }, - line: { color: `#${uniqueColors.length > 1 ? violinColors[k] : 0}`}, + line: { + color: `#${uniqueColors.length > 1 ? violinColors[k] : 0}`, + }, }, })); - scpData.map((row, i) => { row.map((item, j) => { const canvasID = `scp-${i}-${j}`; @@ -1697,7 +1953,7 @@ const genViolinPlots = (scpData, option, scaleX, scaleY, scaleOption = chartScal item.array_y.push([0]); } }); - item.array_x = item.array_x.map(val => val.toString()) + item.array_x = item.array_x.map((val) => val.toString()); } else { uniqueColors.forEach((value) => { if (item.array_y.indexOf(value) === -1) { @@ -1705,19 +1961,17 @@ const genViolinPlots = (scpData, option, scaleX, scaleY, scaleOption = chartScal item.array_x.push([0]); } }); - item.array_y = item.array_y.map(val => val.toString()) + item.array_y = item.array_y.map((val) => val.toString()); } generateViolinPlot(item, zoomRange, option); } else if (!item) { const fakeItem = {}; if (isHorizontalViolin) { fakeItem.array_y = uniqueColors; - fakeItem.array_x = Array(uniqueColors.length) - .fill([0]); + fakeItem.array_x = Array(uniqueColors.length).fill([0]); } else { fakeItem.array_x = uniqueColors; - fakeItem.array_y = Array(uniqueColors.length) - .fill([0]); + fakeItem.array_y = Array(uniqueColors.length).fill([0]); } fakeItem.isHorizontal = isHorizontalViolin; fakeItem.styles = styles; @@ -1732,23 +1986,19 @@ const genViolinPlots = (scpData, option, scaleX, scaleY, scaleOption = chartScal fakeItem.x_threshold = xThreshold; generateViolinPlot(fakeItem, zoomRange, option); } - graphDiv.on('plotly_relayout', - (eventdata) => { - callback(eventdata); - }); + graphDiv.on('plotly_relayout', (eventdata) => { + callback(eventdata); + }); option.canvas_id = canvasID; graphDiv.on('plotly_hover', (data) => { - // eslint-disable-next-line no-shadow setTimeout(() => { - $('.scp-hover-info') - .remove(); + $('.scp-hover-info').remove(); const dataScp = scpData[i][j]; if (!dataScp) return; - const { - pageX, - pageY, - } = data.event; - const key = dataScp.isHorizontal ? data.points[0].y : data.points[0].x; + const { pageX, pageY } = data.event; + const key = dataScp.isHorizontal + ? data.points[0].y + : data.points[0].x; makeHoverInfoBox(dataScp, key, option, pageX, pageY); }, 10); }); @@ -1756,8 +2006,7 @@ const genViolinPlots = (scpData, option, scaleX, scaleY, scaleOption = chartScal unHoverHandler(graphDiv); graphDiv.addEventListener('mouseleave', () => { - $('.scp-hover-info') - .remove(); + $('.scp-hover-info').remove(); }); }); }); @@ -1776,22 +2025,25 @@ const getColors = (data, xCategory) => { }; const genColorBarForViolin = (allColors, styles) => { - const data = [{ - type: 'violin', - x: allColors, - box: { - visible: false, + const data = [ + { + type: 'violin', + x: allColors, + box: { + visible: false, + }, + opacity: 1, + // fillcolor: 'transparent', + transforms: [ + { + type: 'groupby', + groups: allColors, + styles, + }, + ], + showlegend: true, }, - opacity: 1, - // fillcolor: 'transparent', - transforms: [{ - type: 'groupby', - groups: allColors, - styles, - }], - showlegend: true, - - }]; + ]; const layout = { font: { @@ -1826,7 +2078,6 @@ const genColorBarForViolin = (allColors, styles) => { plot_bgcolor: '#222222', }; - const config = { displayModeBar: false, }; @@ -1834,31 +2085,39 @@ const genColorBarForViolin = (allColors, styles) => { Plotly.newPlot('coloScaleBar', data, layout, config); }; -const callToBackEndAPI = (settings = undefined, clearOnFlyFilter = false, autoUpdate = false) => { +const callToBackEndAPI = ( + settings = undefined, + clearOnFlyFilter = false, + autoUpdate = false, +) => { const formData = transformFormdata(clearOnFlyFilter, autoUpdate); if (settings) { formData.set('colNumber', settings.colNumber); formData.set('scpColorOrder', settings.colorOrderVal); } // clear old html elements - $('.scp-hover-info') - .remove(); - - showGraphCallApi('/ap/api/scp/plot', formData, REQUEST_TIMEOUT, async (res) => { - if (res.is_send_ga_off) { - showGAToastr(true); - } + $('.scp-hover-info').remove(); + + showGraphCallApi( + '/ap/api/scp/plot', + formData, + REQUEST_TIMEOUT, + async (res) => { + if (res.is_send_ga_off) { + showGAToastr(true); + } - await showSCP(res, settings, clearOnFlyFilter, autoUpdate); + await showSCP(res, settings, clearOnFlyFilter, autoUpdate); - setPollingData(formData, handleSetPollingData, []); - }); + setPollingData(formData, handleSetPollingData, []); + }, + ); }; const handleSetPollingData = () => { const settings = getCurrentSettings(); callToBackEndAPI(settings, false, true); -} +}; const validateXYColorType = (formData) => { const sensors = []; @@ -1872,12 +2131,9 @@ const validateXYColorType = (formData) => { color = Number(value); } } - const xType = sensors[0] && $(`#dataType-${sensors[0]}`) - .val(); - const yType = sensors[1] && $(`#dataType-${sensors[1]}`) - .val(); - const colorType = color && $(`#dataType-${color}`) - .val(); + const xType = sensors[0] && $(`#dataType-${sensors[0]}`).val(); + const yType = sensors[1] && $(`#dataType-${sensors[1]}`).val(); + const colorType = color && $(`#dataType-${color}`).val(); if (xType === DataTypes.STRING.short && yType !== DataTypes.STRING.short) { if (colorType !== DataTypes.STRING.short) { @@ -1894,7 +2150,8 @@ const validateXYColorType = (formData) => { } if (xType === DataTypes.STRING.short && yType === DataTypes.STRING.short) { - if (sensors[0] !== color || colorType !== DataTypes.STRING.short) return false; + if (sensors[0] !== color || colorType !== DataTypes.STRING.short) + return false; } return true; @@ -1916,8 +2173,39 @@ const handleSubmit = (clearOnFlyFilter = false, setting = {}) => { }); }; -const transformFormdata = (clearOnFlyFilter = null, autoUpdate = false) => { +// This function to check currentXY and 2 latest items in latestSortColIds +// In case: change or delete variable without click "Display graph" +const checkIsUpdateXY = (newXY, currentXY) => { + if (newXY.length !== currentXY.length) return false; + const sortedNewXY = [...newXY].sort(); + const sortedCurrentXY = [...currentXY].sort(); + return sortedNewXY.every((val, idx) => val === sortedCurrentXY[idx]); +}; + +const transformXY = (formData) => { + const XYDataTemp = latestSortColIds.slice(-2); + const isUpdateXY = checkIsUpdateXY(XYDataTemp, currentXY); + let XYData = ''; + // update XY when latest Sort is change order with CurrentXY else => using currentXY + if (isUpdateXY) { + XYData = [...XYDataTemp]; + currentXY = [...XYDataTemp]; + } else { + XYData = [...currentXY]; + } + + // delete XY_AXIS_KEY: + formData.delete(CONST.SCP_HMP_X_AXIS); + formData.delete(CONST.SCP_HMP_Y_AXIS); + // append XY_AXIS_KEY + formData.append(CONST.SCP_HMP_X_AXIS, XYData[0] || ''); + formData.append(CONST.SCP_HMP_Y_AXIS, XYData[1] || ''); + + return formData; +}; + +const transformFormdata = (clearOnFlyFilter = null, autoUpdate = false) => { if (autoUpdate) { return genDatetimeRange(lastUsedFormData); } @@ -1938,52 +2226,64 @@ const transformFormdata = (clearOnFlyFilter = null, autoUpdate = false) => { // transform cat label filter formData = transformCatFilterParams(formData); } + + // transfer for switch XY + formData = transformXY(formData); return formData; }; - const scatterTraceData = (clearOnFlyFilter, setting = {}) => { const formData = transformFormdata(clearOnFlyFilter); - showGraphCallApi('/ap/api/scp/plot', formData, REQUEST_TIMEOUT, async (res) => { - if (res.is_send_ga_off) { - showGAToastr(true); - } + showGraphCallApi( + '/ap/api/scp/plot', + formData, + REQUEST_TIMEOUT, + async (res) => { + if (res.is_send_ga_off) { + showGAToastr(true); + } - $('#sctr-card').empty(); + $('#sctr-card').empty(); - // check result and show toastr msg - if (isEmpty(res.array_plotdata) || isEmpty(res.array_plotdata[0].array_y)) { - showToastrAnomalGraph(); - } + // check result and show toastr msg + if ( + isEmpty(res.array_plotdata) || + isEmpty(res.array_plotdata[0].array_y) + ) { + showToastrAnomalGraph(); + } - await showSCP(res, setting, clearOnFlyFilter); + await showSCP(res, setting, clearOnFlyFilter); - // show toastr to inform result was truncated upto 5000 - if (res.is_res_limited) { - showToastrMsg(i18n.traceResulLimited.split('BREAK_LINE').join('
      ')); - } + // show toastr to inform result was truncated upto 5000 + if (res.is_res_limited) { + showToastrMsg( + i18n.traceResulLimited.split('BREAK_LINE').join('
      '), + ); + } - // show reduced violin message - if (res.is_reduce_violin_number) { - showToastrMsg(i18n.reduceViolinNumberMessage); - } + // show reduced violin message + if (res.is_reduce_violin_number) { + showToastrMsg(i18n.reduceViolinNumberMessage); + } - // show reduced data per graph - // only for scatter plot - if (res.isDataLimited && res.chartType === scpChartType.SCATTER) { - showToastrMsg(i18n.limitPerGraphMessage); - } + // show reduced data per graph + // only for scatter plot + if (res.isDataLimited && res.chartType === scpChartType.SCATTER) { + showToastrMsg(i18n.limitPerGraphMessage); + } - // show violin resampling msg - if (res.is_resampling) { - showToastrMsg(i18n.isResampleMsg); - } + // show violin resampling msg + if (res.is_resampling) { + showToastrMsg(i18n.isResampleMsg); + } - // show info table - showInfoTable(res); + // show info table + showInfoTable(res); - setPollingData(formData, handleSetPollingData, []); - }); + setPollingData(formData, handleSetPollingData, []); + }, + ); $('#plot-cards').empty(); }; @@ -1998,22 +2298,18 @@ const initFilterModal = (res) => { const getCurrentSettings = () => { // get chart axis scale - const chartScaleVal = $(`select[name=${els.scpChartScale}]`) - .val(); + const chartScaleVal = $(`select[name=${els.scpChartScale}]`).val(); const chartScale = chartScales[Number(chartScaleVal)]; // get colors scale - const colorScaleVal = $(`select[name=${els.scpColorScale}]`) - .val(); + const colorScaleVal = $(`select[name=${els.scpColorScale}]`).val(); const colorScale = colorScales[colorScaleVal]; // get color ordering - const colorOrderVal = $(`select[name=${els.scpColorOrder}]`) - .val(); + const colorOrderVal = $(`select[name=${els.scpColorOrder}]`).val(); const colorOrdering = colorOrders[Number(colorOrderVal)]; // get backward showing const isShowBackward = $(`select[name=${els.showBackward}]`).val(); - const colNumber = $(`select[name=${els.colNumber}]`) - .val(); + const colNumber = $(`select[name=${els.colNumber}]`).val(); const isShowForward = !isShowBackward; currentMatrix = Number(colNumber); @@ -2030,8 +2326,7 @@ const getCurrentSettings = () => { }; }; -const isValidDate = value => (isNaN(value) ? moment(value) - .isValid() : false); +const isValidDate = (value) => (isNaN(value) ? moment(value).isValid() : false); const convertDateToLocal = (hlabel) => { if (!hlabel.toString().includes(COMMON_CONSTANT.EN_DASH)) return hlabel; @@ -2042,9 +2337,7 @@ const convertDateToLocal = (hlabel) => { const hlabels = items.map((item) => { if (isValidDate(item)) { isTermGroup = true; - return moment.utc(item) - .local() - .format(DATE_FORMAT_WITHOUT_TZ); + return moment.utc(item).local().format(DATE_FORMAT_WITHOUT_TZ); } return item; }); @@ -2062,13 +2355,17 @@ const downloadPlot = () => { clearOldScreenShot(); loadingShow(); html2canvas(document.getElementById('sctr-card'), { - scale: 1, logging: true, backgroundColor: '#222222', + scale: 1, + logging: true, + backgroundColor: '#222222', }).then((canvas) => { canvas.id = 'tsCanvas'; document.getElementById('screenshot').appendChild(canvas); // generate filename const filename = 'screenshot.png'; - const screenshot = document.getElementById('screenshot').querySelectorAll('canvas')[0]; + const screenshot = document + .getElementById('screenshot') + .querySelectorAll('canvas')[0]; const targetLink = document.createElement('a'); if (screenshot) { targetLink.setAttribute('download', filename); @@ -2121,15 +2418,15 @@ const handleExportData = (type) => { const updatePlotType = (scatterDat, plotType, [cmin, cmax], layout) => { const linesDat = []; - scatterDat.forEach(scpDat => { + scatterDat.forEach((scpDat) => { if (Array.isArray(scpDat.marker.color)) { scpDat.marker.color.forEach((colorVal, i) => { - const nextColor = scpDat.marker.color[i+1]; + const nextColor = scpDat.marker.color[i + 1]; if (nextColor !== undefined) { const x1 = scpDat.x[i]; - const x2 = scpDat.x[i+1]; + const x2 = scpDat.x[i + 1]; const y1 = scpDat.y[i]; - const y2 = scpDat.y[i+1]; + const y2 = scpDat.y[i + 1]; const lineTrace = { x: [x1, x2], y: [y1, y2], @@ -2151,24 +2448,25 @@ const updatePlotType = (scatterDat, plotType, [cmin, cmax], layout) => { } linesDat.push(lineTrace); } - }) + }); } - }); if (plotType == plotTypeConst.LINE.name) { // hide scatter points in line chart - layout.template.data.scatter.forEach(sct => sct.marker.opacity = 0); - layout.template.data.scattergl.forEach(sct => sct.marker.opacity = 0); + layout.template.data.scatter.forEach((sct) => (sct.marker.opacity = 0)); + layout.template.data.scattergl.forEach( + (sct) => (sct.marker.opacity = 0), + ); if (!linesDat.length) { - scatterDat.forEach(scpDat => scpDat.mode = 'lines'); + scatterDat.forEach((scpDat) => (scpDat.mode = 'lines')); return scatterDat; } return [...linesDat, ...scatterDat]; } if (plotType == plotTypeConst.ALL.name) { if (!linesDat.length) { - scatterDat.forEach(scpDat => scpDat.mode = 'lines+markers'); + scatterDat.forEach((scpDat) => (scpDat.mode = 'lines+markers')); } return [...linesDat, ...scatterDat]; } @@ -2178,15 +2476,15 @@ const genLineColor = (color, cmin, cmax) => { const colorRange = cmax - cmin; if (!colorRange) { return hsv2rgb({ - h:50, // 50% as default in case of one value of color range - s:1, - v:1 + h: 50, // 50% as default in case of one value of color range + s: 1, + v: 1, }); } - const hValue = 100 * (1 - ((color - cmin) / colorRange)); + const hValue = 100 * (1 - (color - cmin) / colorRange); return hsv2rgb({ - h:hValue, - s:1, - v:1 + h: hValue, + s: 1, + v: 1, }); -}; \ No newline at end of file +}; diff --git a/ap/static/scatter_plot/js/scp_heatmap_plot.js b/ap/static/scatter_plot/js/scp_heatmap_plot.js index c88e90b..a1e4334 100644 --- a/ap/static/scatter_plot/js/scp_heatmap_plot.js +++ b/ap/static/scatter_plot/js/scp_heatmap_plot.js @@ -1,4 +1,3 @@ -/* eslint-disable no-unused-vars */ const colorPalettes = [ ['0', '#222222'], ['0.000001', '#18324c'], @@ -6,7 +5,8 @@ const colorPalettes = [ ['0.4', '#2d5e88'], ['0.6', '#3b7aae'], ['0.8', '#56b0f4'], - ['1', '#6dc3fd']]; + ['1', '#6dc3fd'], +]; const generateHeatmapPlot = (prop, option, zoomRange) => { prop.org_array_x = [...prop.array_x]; @@ -15,14 +15,24 @@ const generateHeatmapPlot = (prop, option, zoomRange) => { let yRange = null; if (zoomRange) { if (!zoomRange['xaxis.autorange']) { - xRange = zoomRange['xaxis.range[0]'] && zoomRange['xaxis.range[1]'] ? [zoomRange['xaxis.range[0]'], zoomRange['xaxis.range[1]']] : null; - yRange = zoomRange['yaxis.range[0]'] && zoomRange['yaxis.range[1]'] ? [zoomRange['yaxis.range[0]'], zoomRange['yaxis.range[1]']] : null; + xRange = + zoomRange['xaxis.range[0]'] && zoomRange['xaxis.range[1]'] + ? [zoomRange['xaxis.range[0]'], zoomRange['xaxis.range[1]']] + : null; + yRange = + zoomRange['yaxis.range[0]'] && zoomRange['yaxis.range[1]'] + ? [zoomRange['yaxis.range[0]'], zoomRange['yaxis.range[1]']] + : null; } } // add prefix to change int to str type - const isXIntType = option.xDataType === DataTypes.INTEGER.name || Number(prop.array_x[0]) !== NaN; - const isYIntType = option.yDataType === DataTypes.INTEGER.name || Number(prop.array_y[0]) !== NaN; + const isXIntType = + option.xDataType === DataTypes.INTEGER.name || + !isNaN(Number(prop.array_x[0])); + const isYIntType = + option.yDataType === DataTypes.INTEGER.name || + !isNaN(Number(prop.array_y[0])); option.isXIntType = isXIntType; option.isYIntType = isYIntType; @@ -34,30 +44,32 @@ const generateHeatmapPlot = (prop, option, zoomRange) => { } else { if (isXIntType) { const orgArrayX = [...prop.array_x]; - prop.array_x = orgArrayX.map(val => `${STR_PREFIX}${val}`); + prop.array_x = orgArrayX.map((val) => `${STR_PREFIX}${val}`); prop.org_array_x = orgArrayX; } if (isYIntType) { const orgArrayY = [...prop.array_y]; - prop.array_y = orgArrayY.map(val => `${STR_PREFIX}${val}`); + prop.array_y = orgArrayY.map((val) => `${STR_PREFIX}${val}`); prop.org_array_y = orgArrayY; } } - const data = [{ - x: prop.array_x, - y: prop.array_y, - z: prop.array_z, - type: 'heatmap', - showscale: false, - hoverongaps: true, - uirevision: true, - hoverinfo: 'none', - colorscale: colorPalettes, - zmax: prop.zmax, - zmin: prop.zmin - 1, - }]; + const data = [ + { + x: prop.array_x, + y: prop.array_y, + z: prop.array_z, + type: 'heatmap', + showscale: false, + hoverongaps: true, + uirevision: true, + hoverinfo: 'none', + colorscale: colorPalettes, + zmax: prop.zmax, + zmin: prop.zmin - 1, + }, + ]; if (option.use_map_xy) { data[0].xgap = 2; @@ -136,21 +148,25 @@ const generateHeatmapPlot = (prop, option, zoomRange) => { const makeHeatmapHoverInfoBox = (prop, xVal, yVal, option, x, y) => { if (!prop) return; - const j = prop.array_x.map(x => x.toString()).indexOf(xVal.toString()); - const i = prop.array_y.map(x => x.toString()).indexOf(yVal.toString()); + const j = prop.array_x.map((x) => x.toString()).indexOf(xVal.toString()); + const i = prop.array_y.map((x) => x.toString()).indexOf(yVal.toString()); const numberOfData = option.isShowNumberOfData ? prop.h_label : null; - const facet = option.isShowFacet ? `Lv1 = ${prop.v_label.toString().split('|')[0]} ${option.hasLv2 ? `, Lv2 = ${prop.v_label.toString().split('|')[1] || prop.h_label}` : ''}` : null; + const facet = option.isShowFacet + ? `Lv1 = ${prop.v_label.toString().split('|')[0]} ${option.hasLv2 ? `, Lv2 = ${prop.v_label.toString().split('|')[1] || prop.h_label}` : ''}` + : null; const div = option.isShowDiv ? prop.h_label : null; - let hoverData = !(option.use_map_xy) ? { - data_no: numberOfData, - facet, - category: div, - ratio: `${prop.array_z[i][j] || COMMON_CONSTANT.NA}%`, - n_total: prop.n_total, - from: formatDateTime(prop.time_min), - to: formatDateTime(prop.time_max), - n: prop.orig_array_z[i][j] || COMMON_CONSTANT.NA, - } : null; + let hoverData = !option.use_map_xy + ? { + data_no: numberOfData, + facet, + category: div, + ratio: `${prop.array_z[i][j] || COMMON_CONSTANT.NA}%`, + n_total: prop.n_total, + from: formatDateTime(prop.time_min), + to: formatDateTime(prop.time_max), + n: prop.orig_array_z[i][j] || COMMON_CONSTANT.NA, + } + : null; if (!hoverData) { // hover data for int heatmap hoverData = { @@ -166,11 +182,11 @@ const makeHeatmapHoverInfoBox = (prop, xVal, yVal, option, x, y) => { n_total: prop.n_total, from: formatDateTime(prop.time_min), to: formatDateTime(prop.time_max), - } + }; } showSCPDataTable( - hoverData - , { + hoverData, + { x: x - 55, y: y, }, diff --git a/ap/static/scatter_plot/js/scp_violin_plot.js b/ap/static/scatter_plot/js/scp_violin_plot.js index 1f025c1..64e5f8c 100644 --- a/ap/static/scatter_plot/js/scp_violin_plot.js +++ b/ap/static/scatter_plot/js/scp_violin_plot.js @@ -4,28 +4,42 @@ const generateViolinPlot = (prop, zoomRange, option) => { let yRange = null; if (zoomRange) { if (!zoomRange['xaxis.autorange']) { - xRange = zoomRange['xaxis.range[0]'] && zoomRange['xaxis.range[1]'] ? [zoomRange['xaxis.range[0]'], zoomRange['xaxis.range[1]']] : null; - yRange = zoomRange['yaxis.range[0]'] && zoomRange['yaxis.range[1]'] ? [zoomRange['yaxis.range[0]'], zoomRange['yaxis.range[1]']] : null; + xRange = + zoomRange['xaxis.range[0]'] && zoomRange['xaxis.range[1]'] + ? [zoomRange['xaxis.range[0]'], zoomRange['xaxis.range[1]']] + : null; + yRange = + zoomRange['yaxis.range[0]'] && zoomRange['yaxis.range[1]'] + ? [zoomRange['yaxis.range[0]'], zoomRange['yaxis.range[1]']] + : null; } } prop.org_array_x = [...prop.array_x]; prop.org_array_y = [...prop.array_y]; // add prefix to change int to str type - const isXIntType = option.xDataType === DataTypes.INTEGER.name || option.xDataType === DataTypes.STRING.name && Number(prop.array_x[0]) !== NaN; - const isYIntType = option.yDataType === DataTypes.INTEGER.name || option.yDataType === DataTypes.STRING.name && Number(prop.array_y[0]) !== NaN; + const isXIntType = + option.xDataType === DataTypes.INTEGER.name || + (option.xDataType === DataTypes.STRING.name && + !isNaN(Number(prop.array_x[0]))); + const isYIntType = + option.yDataType === DataTypes.INTEGER.name || + (option.yDataType === DataTypes.STRING.name && + !isNaN(Number(prop.array_y[0]))); option.isXIntType = isXIntType; option.isYIntType = isYIntType; if (isXIntType) { - const orgArrayX = [...prop.array_x]; - prop.array_x = orgArrayX.map(val => `${STR_PREFIX}${val}`); - prop.org_array_x = orgArrayX; + // const orgArrayX = [...prop.array_x]; + // prop.array_x = orgArrayX.map((val) => `${STR_PREFIX}${val}`); + // prop.org_array_x = orgArrayX; + prop.org_array_x = prop.array_x; } if (isYIntType) { - const orgArrayY = [...prop.array_y]; - prop.array_y = orgArrayY.map(val => `${STR_PREFIX}${val}`); - prop.org_array_y = orgArrayY; + // const orgArrayY = [...prop.array_y]; + // prop.array_y = orgArrayY.map((val) => `${STR_PREFIX}${val}`); + // prop.org_array_y = orgArrayY; + prop.org_array_y = prop.array_y; } const dataCommon = { @@ -58,7 +72,7 @@ const generateViolinPlot = (prop, zoomRange, option) => { showlegend: false, spanmode: 'manual', }; - + let kdeLineWidth = 0.5; // let boxFillColor = ''; if (prop.is_resampling) { @@ -71,10 +85,14 @@ const generateViolinPlot = (prop, zoomRange, option) => { if (prop.isHorizontal) { data = prop.uniqueColors.map((key) => { const index = prop.org_array_y.indexOf(key); - let orgLineColor = prop.isHideHover ? 'transparent' - : prop.styles.filter(style => style.target === key)[0].value.line.color; - const lineColor = prop.is_resampling ? resamplingColor : orgLineColor; - key = isYIntType ? `${STR_PREFIX}${key}` : key; + let orgLineColor = prop.isHideHover + ? 'transparent' + : prop.styles.filter((style) => style.target === key)[0].value + .line.color; + const lineColor = prop.is_resampling + ? resamplingColor + : orgLineColor; + // key = isYIntType ? `${STR_PREFIX}${key}` : key; return { ...dataCommon, x: prop.array_x[index], @@ -90,10 +108,14 @@ const generateViolinPlot = (prop, zoomRange, option) => { } else { data = prop.uniqueColors.map((key) => { const index = prop.org_array_x.indexOf(key); - let orgLineColor = prop.isHideHover ? 'transparent' - : prop.styles.filter(style => style.target === key)[0].value.line.color; - const lineColor = prop.is_resampling ? resamplingColor : orgLineColor; - key = isXIntType ? `${STR_PREFIX}${key}` : key; + let orgLineColor = prop.isHideHover + ? 'transparent' + : prop.styles.filter((style) => style.target === key)[0].value + .line.color; + const lineColor = prop.is_resampling + ? resamplingColor + : orgLineColor; + // key = isXIntType ? `${STR_PREFIX}${key}` : key; return { ...dataCommon, x0: key, @@ -111,8 +133,14 @@ const generateViolinPlot = (prop, zoomRange, option) => { const xChartRange = xRange || [-0.5, prop.uniqueColors.length - 0.5]; const yChartRange = yRange || [-0.5, prop.uniqueColors.length - 0.5]; - // eslint-disable-next-line no-undef - const lines = !prop.isHideHover ? genThresholds(prop.x_threshold, prop.y_threshold, { xaxis: 'x', yaxis: 'y' }, xChartRange, yChartRange) + const lines = !prop.isHideHover + ? genThresholds( + prop.x_threshold, + prop.y_threshold, + { xaxis: 'x', yaxis: 'y' }, + xChartRange, + yChartRange, + ) : []; const layout = { @@ -121,7 +149,10 @@ const generateViolinPlot = (prop, zoomRange, option) => { paper_bgcolor: '#222222', autosize: true, margin: { - r: 0, l: prop.isShowY ? 33 : 0, t: 0, b: prop.isShowX ? 25 : 0, + r: 0, + l: prop.isShowY ? 33 : 0, + t: 0, + b: prop.isShowX ? 25 : 0, }, yaxis: { ticklen: 0, @@ -144,7 +175,8 @@ const generateViolinPlot = (prop, zoomRange, option) => { zeroline: true, ticklen: 0, tickfont: { - size: 8, color: 'white', + size: 8, + color: 'white', }, tickformat: option.xFmt.includes('e') ? '.1e' : '', range: xRange || prop.rangeScaleX, @@ -153,11 +185,11 @@ const generateViolinPlot = (prop, zoomRange, option) => { }; if (prop.isHorizontal) { - layout.yaxis.ticktext = prop.org_array_y - layout.yaxis.tickvals = prop.array_y + layout.yaxis.ticktext = prop.org_array_y; + layout.yaxis.tickvals = prop.array_y; } else { - layout.xaxis.ticktext = prop.org_array_x - layout.xaxis.tickvals = prop.array_x + layout.xaxis.ticktext = prop.org_array_x; + layout.xaxis.tickvals = prop.array_x; } const config = { @@ -168,28 +200,30 @@ const generateViolinPlot = (prop, zoomRange, option) => { }; // set default range axes - $(`#${prop.canvasId}`).attr('data-default-axes', JSON.stringify(prop.scale)); + $(`#${prop.canvasId}`).attr( + 'data-default-axes', + JSON.stringify(prop.scale), + ); $(`#${prop.canvasId}`).attr('data-is-horizontal', prop.isHorizontal); Plotly.react(prop.canvasId, data, layout, config); }; const makeHoverInfoBox = (prop, key, option, x, y) => { - if (option.isXIntType || option.isYIntType) { - key = key.replace(STR_PREFIX, '') - } + // if (option.isXIntType || option.isYIntType) { + // key = key.replace(STR_PREFIX, ''); + // } if (!prop || !prop.summaries[key]) return; const sumaries = prop.summaries[key][0]; const numberOfData = option.isShowNumberOfData ? prop.h_label : null; const facet = option.isShowFacet - ? `Lv1 = ${ - prop.v_label.toString().split('|')[0] - } ${ - option.hasLv2 - ? `, Lv2 = ${ - prop.v_label.toString().split('|')[1] || prop.h_label}` - : '' - }` + ? `Lv1 = ${prop.v_label.toString().split('|')[0]} ${ + option.hasLv2 + ? `, Lv2 = ${ + prop.v_label.toString().split('|')[1] || prop.h_label + }` + : '' + }` : null; const div = option.isShowDiv ? prop.h_label : ''; showSCPDataTable( @@ -214,7 +248,8 @@ const makeHoverInfoBox = (prop, key, option, x, y) => { from: formatDateTime(prop.time_min), to: formatDateTime(prop.time_max), n_total: prop.n_total, - }, { + }, + { x: x - 55, y: y, }, diff --git a/ap/static/setting_module/css/background_process.css b/ap/static/setting_module/css/background_process.css index 2eda918..7cfb748 100644 --- a/ap/static/setting_module/css/background_process.css +++ b/ap/static/setting_module/css/background_process.css @@ -16,15 +16,19 @@ table.dataTable .odd { background-color: #303030 !important; } -table.dataTable .odd:hover, table.dataTable .even:hover { - background-color: rgba(0,0,0,0.075) !important; +table.dataTable .odd:hover, +table.dataTable .even:hover { + background-color: rgba(0, 0, 0, 0.075) !important; } -table.dataTable tbody th, table.dataTable tbody td { +table.dataTable tbody th, +table.dataTable tbody td { vertical-align: middle !important; } -table.dataTable thead th, table.dataTable thead td, table.dataTable.no-footer { +table.dataTable thead th, +table.dataTable thead td, +table.dataTable.no-footer { border-bottom: none !important; /* padding-left: 10px !important; */ } @@ -56,8 +60,8 @@ table#jobErrorDetailTable thead tr th { .job-id, .job-detail, .job-status, -.job-duration{ - text-align: center!important; +.job-duration { + text-align: center !important; } #jobDataTable { @@ -97,7 +101,7 @@ table#jobErrorDetailTable thead tr th { width: 22% !important; } -button.dropdown-toggle{ +button.dropdown-toggle { /*width: 70px;*/ text-align: left; } @@ -116,4 +120,4 @@ span.btn-group.dropdown { .fixed-table-loading.table.table-bordered.table-hover { background-color: #303030 !important; -} \ No newline at end of file +} diff --git a/ap/static/setting_module/css/backup_restore_modal.css b/ap/static/setting_module/css/backup_restore_modal.css new file mode 100644 index 0000000..7c36e74 --- /dev/null +++ b/ap/static/setting_module/css/backup_restore_modal.css @@ -0,0 +1,95 @@ +/* Start - Backup & Restore Modal */ +#backupAndRestoreModal > div.modal-dialog { + width: 60%; +} + +#backupAndRestoreModal #data-finder-modal { + flex-direction: column !important; + width: auto; +} + +#backupAndRestoreModal #tabContent > div.card { + margin-top: 0; + margin-bottom: 0; +} + +#backupAndRestoreModal #btnBackupData, +#backupAndRestoreModal #btnRestoreData { + margin: 0; +} + +#backupAndRestoreModal #target-period-wrapper > div:nth-child(2), +#backupAndRestoreModal #data-finder-card > div > div:first-child, +#backupAndRestoreModal #backupAndRestoreProcessSelection > span { + position: relative !important; + width: 100% !important; + padding-right: 15px !important; + padding-left: 15px !important; + -webkit-box-flex: 0 !important; + -ms-flex: 0 0 16.6666666667% !important; + flex: 0 0 16.6666666667% !important; + max-width: 16.6666666667% !important; + margin: 0 !important; +} + +#backupAndRestoreModal #target-period-wrapper > div:nth-child(3), +#backupAndRestoreModal #data-finder-card > div > div:nth-child(2), +#backupAndRestoreModal #backupAndRestoreProcessSelection > div { + position: relative !important; + width: 100% !important; + padding-right: 15px !important; + padding-left: 15px !important; + -webkit-box-flex: 0 !important; + -ms-flex: 0 0 83.3333333333% !important; + flex: 0 0 83.3333333333% !important; + max-width: 83.3333333333% !important; + margin: 0 !important; +} + +#backupAndRestoreModal #backupAndRestoreProcessSelection > span { + padding-left: 20px !important; +} + +#backupAndRestoreModal #data-finder-card > div > div:nth-child(2) { + padding-left: 12px !important; + padding-right: 10px !important; +} + +#backupAndRestoreModal #target-period-wrapper > div:nth-child(3) { + padding: 0 14px !important; +} + +#data-finder-card.card-body.table-bordered { + border: none !important; +} + +@media (min-width: 1400px) and (max-width: 1620px) { + #backupAndRestoreModal > div { + width: 70% !important; + } +} + +@media (min-width: 1331px) and (max-width: 1400px) { + #backupAndRestoreModal > div { + width: 75% !important; + } +} + +@media (min-width: 1115px) and (max-width: 1331px) { + #backupAndRestoreModal > div { + width: 80% !important; + } +} + +@media (min-width: 750px) and (max-width: 1115px) { + #backupAndRestoreModal > div { + width: 90% !important; + } +} + +@media (max-width: 750px) { + #backupAndRestoreModal > div { + width: 100% !important; + } +} +/* End - Backup & Restore Modal */ diff --git a/ap/static/setting_module/css/config_view.css b/ap/static/setting_module/css/config_view.css index aca9f85..c2f1b33 100644 --- a/ap/static/setting_module/css/config_view.css +++ b/ap/static/setting_module/css/config_view.css @@ -58,7 +58,7 @@ span.text-editable { .modal-label { height: fit-content; - margin-right: .75rem; + margin-right: 0.75rem; } .modal-file-label { @@ -68,7 +68,7 @@ span.text-editable { white-space: nowrap; text-overflow: ellipsis; line-height: 15px; - padding: .375rem .75rem; + padding: 0.375rem 0.75rem; height: 36px; max-width: 100%; border: 1px solid gray; @@ -96,7 +96,7 @@ span.text-editable { } .icon-secondary { - color: #444444 + color: #444444; } div.vis-network div.vis-edit-mode { @@ -107,7 +107,7 @@ div.vis-network div.vis-edit-mode div.vis-button.vis-edit.vis-edit-mode { border: none !important; } -input[type=checkbox] { +input[type='checkbox'] { /* Increase size checkboxes */ -ms-transform: scale(1.5); /* IE */ -moz-transform: scale(1.5); /* FF */ @@ -118,7 +118,7 @@ input[type=checkbox] { } .error-msg { - color: #E74C3C; + color: #e74c3c; margin: 0 20px; } @@ -167,12 +167,16 @@ input[type=checkbox] { padding-left: 15px; } -.select2-container--default .select2-selection--single .select2-selection__rendered { +.select2-container--default + .select2-selection--single + .select2-selection__rendered { color: #ffffff; line-height: 30px; } -.select2-container--default .select2-selection--single .select2-selection__arrow { +.select2-container--default + .select2-selection--single + .select2-selection__arrow { height: 30px; } @@ -181,19 +185,26 @@ input[type=checkbox] { border: 1px solid #222; } -.select2-container--default .select2-results__option[aria-selected=true] { +.select2-container--default .select2-results__option[aria-selected='true'] { background-color: #5897fb; color: #ffffff; } -.select2-container--default .select2-selection--single .select2-selection__arrow b, -.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { +.select2-container--default + .select2-selection--single + .select2-selection__arrow + b, +.select2-container--default.select2-container--open + .select2-selection--single + .select2-selection__arrow + b { border-width: 6px 3px 0 3px; margin-left: -1px; border-color: #ffffff transparent transparent transparent; } -.select2-container--default.select2-container--disabled .select2-selection--single { +.select2-container--default.select2-container--disabled + .select2-selection--single { background-color: #3b3b3b; border: 1px solid #3b3b3b; } @@ -252,7 +263,8 @@ th.pr-head { text-align: center; } -th.pr-head-sm, td.pr-row-sm { +th.pr-head-sm, +td.pr-row-sm { max-width: 150px; width: 120px; } @@ -350,7 +362,7 @@ td.pr-row { border-bottom: 1px solid #444 !important; } -.jexcel > tbody > tr > td:nth-child(n+3):nth-child(-n+5) { +.jexcel > tbody > tr > td:nth-child(n + 3):nth-child(-n + 5) { text-align: center !important; } @@ -362,7 +374,8 @@ td.pr-row { padding: 0 !important; } -.dummy_datetime_col, .dupl_col { +.dummy_datetime_col, +.dupl_col { color: orange; } @@ -371,7 +384,9 @@ td.pr-row { color: #3f3f3f; } -.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before { +.custom-checkbox + .custom-control-input:disabled:checked + ~ .custom-control-label::before { background-color: rgb(57 74 93); } .select2-search__field { @@ -450,8 +465,9 @@ td.pr-row { top: -0.5rem; } -input.csvNRows { - width: 75px; +input.csvNRows, +input#skipHead.form-control { + width: 55px; } .line-skip-group { @@ -478,3 +494,13 @@ input.csvNRows { .transpose-div { margin-left: 1.5rem; } + +input.csvNRows.form-control, +input#skipHead.form-control { + min-width: 55px; + padding: 0.375rem; +} + +.import-config-file-row .custom-control { + padding-left: 1.1rem; +} diff --git a/ap/static/setting_module/css/data_type_dropdown.css b/ap/static/setting_module/css/data_type_dropdown.css new file mode 100644 index 0000000..ee966f4 --- /dev/null +++ b/ap/static/setting_module/css/data_type_dropdown.css @@ -0,0 +1,76 @@ +.config-data-type-dropdown button { + width: 100%; + padding: 0 15px 0 4px; + text-align: left; + position: relative; + height: 25px; +} + +.gray .config-data-type-dropdown button, +.gray .config-data-type-dropdown button span { + color: gray; +} + +.config-data-type-dropdown { + height: 25px; +} + +.data-type-selection { + background-color: #222222; + flex-direction: row; + width: fit-content; + border-radius: 3px; + display: none; + border: 1px solid #444444; +} + +.data-type-selection.dropdown-menu.show { + display: flex !important; +} + +.data-type-selection-content { + display: flex; + flex-direction: column; +} + +.data-type-selection-title { + text-align: left; + padding: 4px 4px 0; + font-weight: bold; + color: grey; + display: inline-block; + border-bottom: 2px solid grey; + width: 100%; +} + +.data-type-selection-box ul { + list-style: none; + padding: 0; + margin-bottom: 4px; +} + +.data-type-selection-box ul li { + padding: 0 8px; + cursor: pointer; +} + +.data-type-selection-box ul li:is([disabled='disabled']) { + color: grey !important; + cursor: default; +} + +.data-type-selection-box ul li.active { + background-color: dodgerblue; +} + +.gray .data-type-selection-content li { + color: white !important; +} + +.data-type-selection-box ul li:not([disabled='disabled']):hover { + background-color: dodgerblue; +} + +.copy-item { + padding: 0 8px; +} diff --git a/ap/static/setting_module/css/filter_visualization.css b/ap/static/setting_module/css/filter_visualization.css index 1ab464e..884503f 100644 --- a/ap/static/setting_module/css/filter_visualization.css +++ b/ap/static/setting_module/css/filter_visualization.css @@ -26,7 +26,7 @@ .modal-label { height: fit-content; - margin-right: .75rem; + margin-right: 0.75rem; } .modal-file-label { @@ -36,7 +36,7 @@ white-space: nowrap; text-overflow: ellipsis; line-height: 25px; - padding: .375rem .75rem; + padding: 0.375rem 0.75rem; height: 38px; max-width: 100%; border: 1px solid gray; @@ -64,7 +64,8 @@ width: 3.5% !important; } -#tblVisualConfig th, #tblVisualConfig td { +#tblVisualConfig th, +#tblVisualConfig td { padding: 0.1rem 0.25rem; } @@ -98,7 +99,7 @@ color: #fff; } -.select2-container--default .select2-results__option[aria-selected=true] { +.select2-container--default .select2-results__option[aria-selected='true'] { color: white !important; background-color: #222 !important; } @@ -108,7 +109,9 @@ background-color: #222 !important; } -.select2-container--default .select2-selection--single .select2-selection__rendered { +.select2-container--default + .select2-selection--single + .select2-selection__rendered { color: #fff !important; } @@ -117,11 +120,14 @@ border: 1px solid #222 !important; } -.select2-container--default.select2-container--focus .select2-selection--multiple { +.select2-container--default.select2-container--focus + .select2-selection--multiple { border: 1px solid #222 !important; } -.select2-container--default .select2-selection--multiple .select2-selection__choice { +.select2-container--default + .select2-selection--multiple + .select2-selection__choice { background-color: #222 !important; } @@ -135,7 +141,8 @@ textarea { } /* highlight*/ -.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { +.select2-container--default + .select2-results__option--highlighted.select2-results__option--selectable { background-color: #5897fb !important; color: white !important; } @@ -215,7 +222,8 @@ thead.resizable { display: none; } -.configRegister, #visualConfigRegister { +.configRegister, +#visualConfigRegister { margin-left: 10px; } @@ -246,9 +254,11 @@ thead.resizable { .collapse-box { margin: 10px 10px; } -#mainContent h3, h5, table { +#mainContent h3, +h5, +table { color: white !important; } #sidebar { z-index: 9999; -} \ No newline at end of file +} diff --git a/ap/static/setting_module/css/index.css b/ap/static/setting_module/css/index.css index 6cb31be..f8af047 100644 --- a/ap/static/setting_module/css/index.css +++ b/ap/static/setting_module/css/index.css @@ -1,3 +1,3 @@ .select-graph { - margin-top: 10px -} \ No newline at end of file + margin-top: 10px; +} diff --git a/ap/static/setting_module/css/master_cfg.css b/ap/static/setting_module/css/master_cfg.css index 01b19f8..3a03253 100644 --- a/ap/static/setting_module/css/master_cfg.css +++ b/ap/static/setting_module/css/master_cfg.css @@ -61,7 +61,7 @@ /*width: 100%;*/ z-index: 1051; } -.mcs-container--default .mcs-results>.mcs-results__options { +.mcs-container--default .mcs-results > .mcs-results__options { max-height: 200px; overflow-y: auto; } @@ -111,13 +111,15 @@ border: 1px solid #222; } -.mcs-container--default.mcs-container--open.mcs-container--below .mcs-selection--single, -.mcs-container--default.mcs-container--open.mcs-container--below .mcs-selection--multiple { +.mcs-container--default.mcs-container--open.mcs-container--below + .mcs-selection--single, +.mcs-container--default.mcs-container--open.mcs-container--below + .mcs-selection--multiple { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } -.mcs-container--default .mcs-results__option[aria-selected=true], -.select2-container--default .select2-results__option[aria-selected=true] { +.mcs-container--default .mcs-results__option[aria-selected='true'], +.select2-container--default .select2-results__option[aria-selected='true'] { background-color: #5897fb; } @@ -128,21 +130,34 @@ } .mcs-container--default .mcs-selection--single .mcs-selection__rendered, -.select2-container--default .select2-selection--single .select2-selection__rendered { +.select2-container--default + .select2-selection--single + .select2-selection__rendered { color: #ffffff; line-height: 34px; height: 34px; } .mcs-container--default .mcs-selection--single .mcs-selection__arrow, -.select2-container--default .select2-selection--single .select2-selection__arrow { +.select2-container--default + .select2-selection--single + .select2-selection__arrow { height: 32px; } .mcs-container--default .mcs-selection--single .mcs-selection__arrow b, -.select2-container--default .select2-selection--single .select2-selection__arrow b, -.mcs-container--default.mcs-container--open .mcs-selection--single .mcs-selection__arrow b, -.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { +.select2-container--default + .select2-selection--single + .select2-selection__arrow + b, +.mcs-container--default.mcs-container--open + .mcs-selection--single + .mcs-selection__arrow + b, +.select2-container--default.select2-container--open + .select2-selection--single + .select2-selection__arrow + b { border-width: 6px 3px 0 3px; margin-left: -1px; border-color: #ffffff transparent transparent transparent; @@ -176,7 +191,7 @@ .msc-input { display: none; } -.msc-input.show{ +.msc-input.show { display: inline; } @@ -214,23 +229,25 @@ margin-bottom: 0 !important; } -#tblVisualConfig th, #tblVisualConfig td { +#tblVisualConfig th, +#tblVisualConfig td { vertical-align: middle; padding: 2px !important; } .table-view { - margin-bottom: 10px; + margin-bottom: 10px; width: 100%; } .table-wrapper { - overflow-x: auto !important; - /*border: 1px solid #444444;*/ - white-space: nowrap; + overflow-x: auto !important; + /*border: 1px solid #444444;*/ + white-space: nowrap; } -.sticky-col, .sticky-rcol { +.sticky-col, +.sticky-rcol { background-color: #303030; z-index: 99; } @@ -319,8 +336,8 @@ z-index: 9999; } .red { - color: rgb(255,4,4); + color: rgb(255, 4, 4); } .blue { - color: rgb(109,205,250); -} \ No newline at end of file + color: rgb(109, 205, 250); +} diff --git a/ap/static/setting_module/css/master_config.css b/ap/static/setting_module/css/master_config.css index 2c889c8..95cefe5 100644 --- a/ap/static/setting_module/css/master_config.css +++ b/ap/static/setting_module/css/master_config.css @@ -61,7 +61,7 @@ /*width: 100%;*/ z-index: 1051; } -.mcs-container--default .mcs-results>.mcs-results__options { +.mcs-container--default .mcs-results > .mcs-results__options { max-height: 200px; overflow-y: auto; } @@ -111,13 +111,15 @@ border: 1px solid #222; } -.mcs-container--default.mcs-container--open.mcs-container--below .mcs-selection--single, -.mcs-container--default.mcs-container--open.mcs-container--below .mcs-selection--multiple { +.mcs-container--default.mcs-container--open.mcs-container--below + .mcs-selection--single, +.mcs-container--default.mcs-container--open.mcs-container--below + .mcs-selection--multiple { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } -.mcs-container--default .mcs-results__option[aria-selected=true], -.select2-container--default .select2-results__option[aria-selected=true] { +.mcs-container--default .mcs-results__option[aria-selected='true'], +.select2-container--default .select2-results__option[aria-selected='true'] { background-color: #5897fb; } @@ -128,20 +130,33 @@ } .mcs-container--default .mcs-selection--single .mcs-selection__rendered, -.select2-container--default .select2-selection--single .select2-selection__rendered { +.select2-container--default + .select2-selection--single + .select2-selection__rendered { color: #ffffff; line-height: 30px; } .mcs-container--default .mcs-selection--single .mcs-selection__arrow, -.select2-container--default .select2-selection--single .select2-selection__arrow { +.select2-container--default + .select2-selection--single + .select2-selection__arrow { height: 30px; } .mcs-container--default .mcs-selection--single .mcs-selection__arrow b, -.select2-container--default .select2-selection--single .select2-selection__arrow b, -.mcs-container--default.mcs-container--open .mcs-selection--single .mcs-selection__arrow b, -.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { +.select2-container--default + .select2-selection--single + .select2-selection__arrow + b, +.mcs-container--default.mcs-container--open + .mcs-selection--single + .mcs-selection__arrow + b, +.select2-container--default.select2-container--open + .select2-selection--single + .select2-selection__arrow + b { border-width: 6px 3px 0 3px; margin-left: -1px; border-color: #ffffff transparent transparent transparent; @@ -175,7 +190,7 @@ .msc-input { display: none; } -.msc-input.show{ +.msc-input.show { display: inline; } @@ -189,4 +204,4 @@ .btn-grp { margin: 5px; -} \ No newline at end of file +} diff --git a/ap/static/setting_module/css/proc_config_modal.css b/ap/static/setting_module/css/proc_config_modal.css index 22ee0b1..a1f1c25 100644 --- a/ap/static/setting_module/css/proc_config_modal.css +++ b/ap/static/setting_module/css/proc_config_modal.css @@ -7,13 +7,19 @@ display: flex; } -#processColumnsTable { +#functionModal { + display: inline-block; + overflow: auto; + max-height: 219px; +} + +[id^='processColumnsTable'] { position: sticky; left: 0; z-index: 999; } -#processColumnsTableSampleData { +[id^='processColumnsTableSampleData'] { position: relative; z-index: 0; } @@ -54,7 +60,7 @@ } .function-type-content input { - height: 35px!important; + height: 35px !important; } .proc-config-content table th.system, @@ -63,7 +69,18 @@ /*min-width: 200px;*/ } -.proc-config-content table tbody td input:not([name=coef], [name=a_n_s], [name=b_k], [name=c_t], [name=note]) { +.proc-config-content + table + tbody + td + input:not( + [name='coef'], + [name='a_n_s'], + [name='b_k'], + [name='c_t'], + [name='note'], + [name='unit'] + ) { width: fit-content; } @@ -75,6 +92,16 @@ min-width: 30px; } +.proc-config-content table th.column-unit { + min-width: 75px; + max-width: 75px; +} + +.proc-config-content table td.column-unit { + min-width: 75px; + max-width: 75px; +} + .proc-config-content table th { padding: 4px 0px; overflow: hidden; @@ -98,81 +125,7 @@ outline: thin solid white !important; } -.data-type-selection { - background-color: #222222; - flex-direction: row; - width: fit-content; - border-radius: 3px; - display: none; - border: 1px solid #444444; -} - -.data-type-selection.dropdown-menu.show { - display: flex!important; -} - -.data-type-selection-content { - display: flex; - flex-direction: column; -} - -.data-type-selection-title { - text-align: left; - padding: 4px 4px 0px; - font-weight: bold; - color: grey; - display: inline-block; - border-bottom: 2px solid grey; - width: 100%; -} - -.data-type-selection-box ul { - list-style: none; - padding: 0; - margin-bottom: 4px; -} - -.data-type-selection-box ul li { - padding: 0px 8px; - cursor: pointer; -} - -.data-type-selection-box ul li:is([disabled="disabled"]) { - color: grey!important; -} - -.data-type-selection-box ul li.active { - background-color: dodgerblue; -} - -.gray .data-type-selection-content li { - color: white!important; -} - -.data-type-selection-box ul li:not([disabled="disabled"]):hover { - background-color: dodgerblue; -} - -.config-data-type-dropdown { - height: 25px; -} - - -.multi-level-dropdown > button { - width: 100% !important; - text-align: inherit; - position: sticky; -} - -.config-data-type-dropdown button { - width: 100%; - padding: 0 15px 0 4px; - text-align: left; - position: relative; - height: 25px; -} - -.row-item:not([checked="checked"]) { +.row-item:not([checked='checked']) { color: gray !important; } @@ -180,11 +133,6 @@ border-bottom: 1px solid white; } -.gray .config-data-type-dropdown button, -.gray .config-data-type-dropdown button span { - color: gray; -} - .scroll-content { position: absolute; width: 111px; @@ -198,7 +146,7 @@ .scroll-content span:hover { color: #999999; - transition: all .2s; + transition: all 0.2s; } .scroll-content span { @@ -207,13 +155,14 @@ } /*editmode css*/ -.editor input, .jdropdown-default .jdropdown-content { +.editor input, +.jdropdown-default .jdropdown-content { background-color: #303030; } .jdropdown-item { color: #ffffff; } -.jexcel > tbody > tr > td:nth-child(n+3):nth-child(-n+5) { +.jexcel > tbody > tr > td:nth-child(n + 3):nth-child(-n + 5) { text-align: left !important; } @@ -227,15 +176,20 @@ } #functionSettingModal span.select2-container--disabled { - background-color: #444444; !important; + background-color: #444444 !important; } -#functionSettingModal span.select2-container--disabled .select2-selection--single { - background-color: unset!important; - border: none!important; +#functionSettingModal + span.select2-container--disabled + .select2-selection--single { + background-color: unset !important; + border: none !important; } -#functionSettingModal .select2-container .select2-selection--single .select2-selection__rendered { +#functionSettingModal + .select2-container + .select2-selection--single + .select2-selection__rendered { padding-left: 0.5em; } @@ -268,11 +222,11 @@ /*padding-right: 4em;*/ } -#functionSettingModal .form-group{ +#functionSettingModal .form-group { margin-bottom: 2px !important; } -#functionSettingModal .param-label{ +#functionSettingModal .param-label { /*margin-bottom: 0.1rem !important;*/ } @@ -288,13 +242,14 @@ flex: 1; } -#functionSettingModal .function-config-value span:not(.select2-selection__arrow), +#functionSettingModal + .function-config-value + span:not(.select2-selection__arrow), #functionSettingModal .param-value-x span:not(.select2-selection__arrow), #functionSettingModal .param-value-y span:not(.select2-selection__arrow) { min-width: 75px; } - #functionSettingModal .function-config-value span.select2-selection__rendered, #functionSettingModal .param-value-x span.select2-selection__rendered, #functionSettingModal .param-value-y span.select2-selection__rendered { @@ -317,6 +272,7 @@ #functionSettingModal .param-value-y { padding-left: 1px; flex: 1; + width: calc(100% - 50px); } #functionSettingModal input { @@ -446,17 +402,20 @@ } /* No longer support for change color when unselect/select */ -#functionTable tr[checked="checked"] label.row-item, -#functionTable tr[checked="checked"] td.row-item, -#functionTable tr[checked="checked"] input.row-item, -#functionTable tr[checked="checked"] span.row-item, -#functionTable tr[checked="checked"] select.row-item, -#functionTable tr:not([checked="checked"]) label.row-item, -#functionTable tr:not([checked="checked"]) td.row-item, -#functionTable tr:not([checked="checked"]) input.row-item, -#functionTable tr:not([checked="checked"]) span.row-item, -#functionTable tr:not([checked="checked"]) select.row-item, -#functionTable tr:not([checked="checked"]) td.row-item .config-data-type-dropdown { +#functionTable tr[checked='checked'] label.row-item, +#functionTable tr[checked='checked'] td.row-item, +#functionTable tr[checked='checked'] input.row-item, +#functionTable tr[checked='checked'] span.row-item, +#functionTable tr[checked='checked'] select.row-item, +#functionTable tr:not([checked='checked']) label.row-item, +#functionTable tr:not([checked='checked']) td.row-item, +#functionTable tr:not([checked='checked']) input.row-item, +#functionTable tr:not([checked='checked']) span.row-item, +#functionTable tr:not([checked='checked']) select.row-item, +#functionTable + tr:not([checked='checked']) + td.row-item + .config-data-type-dropdown { color: white !important; } @@ -475,8 +434,13 @@ background-color: steelblue !important; } -#functionTable tr.selected td div.config-data-type-dropdown span { - background-color: unset !important; +#deleteFunctionColumnTable .show-raw-text, +#functionUserSettingTable .show-raw-text, +#functionTable .show-raw-text { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + padding-right: 0; } #functionSettingChangeMark { @@ -505,31 +469,42 @@ overflow: auto; } +#collapseFunctionConfig .copyFunctionDataSample { + margin-top: -25px; +} + +/*Delete function column modal*/ + +#deleteFunctionColumn .column-system-name, +#deleteFunctionColumn .column-japanese-name, +#deleteFunctionColumn .column-local-name, +#deleteFunctionColumn .column-var-x, +#deleteFunctionColumn .column-var-y { + min-width: 160px; + max-width: 160px; + overflow: hidden; +} + @media screen and (min-width: 1001px) and (max-width: 1700px) { #functionSettingModal .config-function-name-area { - min-width: calc(100% / 3); - max-width: calc(100% / 3); + min-width: 25%; + max-width: 25%; } #functionSettingModal .config-params-area { - min-width: calc(100% / 3); - max-width: calc(100% / 3); - + min-width: 40%; + max-width: 40%; } #functionSettingModal .proc-config-content { - min-width: calc(100% / 3); - max-width: calc(100% / 3); + min-width: 35%; + max-width: 35%; } - #functionSettingModal .config-params-area-col { - min-width: calc(100% - 100% / 3); - max-width: calc(100% - 100% / 3); - } - - #functionMessageHelper { - min-width: calc(100% / 3); - max-width: calc(100% / 3); + #functionSettingModal .config-params-area-col, + #functionSettingModal .function-description { + min-width: 50%; + max-width: 50%; } } @@ -563,27 +538,71 @@ #functionSettingModal .param-value-y { flex: 1; } + + #functionSettingModal .config-params-area-col, + #functionSettingModal .function-description { + flex: unset; + max-width: unset; + } + + #functionSettingModal .function-description { + margin-left: 115px; + padding-left: 0 !important; + } + + #functionMessageHelper { + float: left; + width: calc((100% - 10px) / 2); + height: 103px; + } + + #functionSettingModal .form-group #functionNote { + float: right; + width: calc((100% - 10px) / 2); + padding-top: 0 !important; + margin-bottom: 0 !important; + } + + #functionSettingModal .form-group #functionNote textarea { + height: 80px; + resize: none; + } + + #functionSettingModal .form-group #functionNote label { + margin-bottom: 0; + } + + #collapseFunctionConfig .copyFunctionDataSample { + margin-top: unset; + position: absolute; + top: 583px; + right: 15px; + } } #functionSettingModal .row-invalid { border: 3px solid red; } -/* Function Info Table CSS - End */ +#procDateTimeFormatInput { + height: 30px; + min-width: 200px; +} +/* Function Info Table CSS - End */ /* Merge mode */ #procMergeModal { /*display: none;*/ } -#parentProcessTable .parent-process-rows, .merge-mode-sample-data -{ +#parentProcessTable .parent-process-rows, +.merge-mode-sample-data { background-color: #444444; } table#childProcessSampleData tbody tr td { min-width: 30px; - border-color: #5b5959!important; + border-color: #5b5959 !important; } table#childProcessColumns thead tr th { @@ -592,19 +611,14 @@ table#childProcessColumns thead tr th { } .merge-mode-tables-left { - display: flex; + display: inline-block; position: sticky; left: 0; z-index: 999; } -/*Using for scroll table*/ -/*.merge-mode-tables-base, .merge-mode-tables-child {*/ -/* width: 25%;*/ -/*}*/ - #parentProcessTable { - width: 50% !important; + width: 100% !important; } #parentProcessTable th.system, @@ -613,9 +627,13 @@ table#childProcessColumns thead tr th { min-width: 180px; } -#parentProcessTable tbody.parent-process-rows tr td { - text-overflow: ellipsis; +#parentProcessTable tbody.parent-process-rows tr td, +#mergeModeSettingContent .column-format { + max-width: 180px; border-color: #5b5959 !important; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } #parentProcessSampleData tbody.merge-mode-sample-data tr td { @@ -623,29 +641,71 @@ table#childProcessColumns thead tr th { } #childProcessColumns { - width: 10% !important; + /*width: 10% !important;*/ } #childProcessSampleData { - width: 20% !important; + display: block; +} + +#childProcessSampleData thead { + display: block; + margin-left: -2px; } #parentProcessSampleData { - width: 20% !important; + display: block; +} + +#parentProcessSampleData thead { + display: block; + margin-left: -3px; } -.merge-mode-tables-child{ +#parentProcessSampleData thead *, +#childProcessSampleData thead * { + display: block; +} + +#parentProcessSampleData thead th { + display: block; + margin-top: -0.5px; +} + +#childProcessSampleData thead th { + display: block; + margin-top: -0.5px; +} +#parentProcessSampleData tbody { + display: block; + overflow-x: auto; + margin-left: -3px; + margin-top: -2px; +} + +#childProcessSampleData tbody { + display: block; overflow-x: auto; - overflow-y: hidden; + margin-left: -2px; + margin-top: -2px; +} + +.merge-mode-tables-child { + flex-grow: 1; height: fit-content; + width: 20% !important; } .merge-mode-tables-base { - overflow-x: auto; - overflow-y: hidden; + flex-grow: 1; height: fit-content; + width: 20% !important; } .confirmation-modal { z-index: 1070 !important; } + +#mergeModeSettingContent .proc-config-content { + overflow-x: hidden; +} diff --git a/ap/static/setting_module/css/register_from_file.css b/ap/static/setting_module/css/register_from_file.css index 87faea2..f3f991e 100644 --- a/ap/static/setting_module/css/register_from_file.css +++ b/ap/static/setting_module/css/register_from_file.css @@ -8,13 +8,13 @@ } .btn-browse { - background-color: #FFFFFF; + background-color: #ffffff; color: #000000; } .data-source-config { flex: 1; - margin-right: 50px + margin-right: 50px; } .file-folder-browser { @@ -43,7 +43,7 @@ } .directory-form { - flex: 1; + flex: 1; } .register-datasource-button { @@ -53,7 +53,7 @@ } .fa-check { - color:greenyellow; + color: greenyellow; margin-right: 5px; } @@ -74,5 +74,9 @@ } .scroll-content { - top: 4px!important; -} \ No newline at end of file + top: 4px !important; +} + +.extend-section { + margin-top: 0.2rem; +} diff --git a/ap/static/setting_module/css/setting_view.css b/ap/static/setting_module/css/setting_view.css index 95a6929..bbdffd9 100644 --- a/ap/static/setting_module/css/setting_view.css +++ b/ap/static/setting_module/css/setting_view.css @@ -19,4 +19,4 @@ #table-menu th { font-weight: 100 !important; -} \ No newline at end of file +} diff --git a/ap/static/setting_module/css/top_view.css b/ap/static/setting_module/css/top_view.css index f48fdd7..5c2c6c2 100644 --- a/ap/static/setting_module/css/top_view.css +++ b/ap/static/setting_module/css/top_view.css @@ -6,19 +6,21 @@ padding-right: 50px; } /* http://unicus.jp/wp/archives/143 */ -.ui-datepicker { z-index: 10000 !important; } +.ui-datepicker { + z-index: 10000 !important; +} .left-space { margin-left: 20px; } .table-main { - table-layout:fixed; - word-wrap:break-word; + table-layout: fixed; + word-wrap: break-word; /* For centering */ /* https://www.granneman.com/webdev/coding/css/centertables */ - margin-left:auto; - margin-right:auto; + margin-left: auto; + margin-right: auto; } /* .th-title-left { @@ -27,6 +29,6 @@ /* http://hensa40.cutegirl.jp/archives/657 */ .td-hide-leftright { - border-right-style:hidden; - border-left-style:hidden; + border-right-style: hidden; + border-left-style: hidden; } diff --git a/ap/static/setting_module/css/trace_config.css b/ap/static/setting_module/css/trace_config.css index 5137bef..21724d4 100644 --- a/ap/static/setting_module/css/trace_config.css +++ b/ap/static/setting_module/css/trace_config.css @@ -1,4 +1,5 @@ -#trace-network, .trace_body { +#trace-network, +.trace_body { position: relative; height: 100%; flex: 1; @@ -14,7 +15,8 @@ table.legend_table { border-style: solid; } -table.legend_table, td { +table.legend_table, +td { border-width: 1px; border-color: #d3d3d3; border-style: solid; @@ -166,43 +168,42 @@ div.table_description { /*Tree checkboxs CSS*/ .tree { - list-style: none; + list-style: none; margin-top: 8px; max-height: calc(100% - 96px); overflow: auto; } .tree ul { - border-left: 1px dashed #444444; - list-style: none; + border-left: 1px dashed #444444; + list-style: none; padding-left: 24px; } - .tree li { - padding: 4px 8px; - cursor: pointer; - vertical-align: middle; + padding: 4px 8px; + cursor: pointer; + vertical-align: middle; } .tree li:first-child { - border-radius: 3px 3px 0 0; + border-radius: 3px 3px 0 0; } .tree li:last-child { - border-radius: 0 0 3px 3px; + border-radius: 0 0 3px 3px; } .tree label { - cursor: pointer; + cursor: pointer; } -.has ul { +.has ul { margin-top: -5px; } .tree .total { - color: #e13300; + color: #e13300; } .tree .has { position: relative; @@ -220,7 +221,7 @@ div.table_description { } .tree .tree-plus:before { - position: absolute; + position: absolute; content: '\002B'; top: 50%; left: 50%; diff --git a/ap/static/setting_module/js/auto_link.js b/ap/static/setting_module/js/auto_link.js index a988b9f..13ba4dc 100644 --- a/ap/static/setting_module/js/auto_link.js +++ b/ap/static/setting_module/js/auto_link.js @@ -1,16 +1,15 @@ - const TRACE_PROCESS_STATE = 'trace_process_state'; let processesTree = null; const orderProcessInTreeCheckBox = (orderedList) => { const flattenProcesses = orderedList.flat(); - // tag treeOrder to list process + // tag treeOrder to list process let index = 0; // resetOrder for (const proc of Object.values(processes)) { proc.treeOrder = flattenProcesses.length + 1; - }; + } for (const id of flattenProcesses) { processes[id].treeOrder = index; @@ -18,12 +17,13 @@ const orderProcessInTreeCheckBox = (orderedList) => { } const sortProcessList = Object.values(processes); - sortProcessList.sort((a,b) => {return a.treeOrder - b.treeOrder}); + sortProcessList.sort((a, b) => { + return a.treeOrder - b.treeOrder; + }); processesTree = groupProcessesByPath(Object.values(sortProcessList)); generateTreeCheckBoxs(processesTree); }; - const collectCheckedProcessesForAutoLink = () => { const selectedV2Processes = {}; const selectedProcesses = []; @@ -44,8 +44,10 @@ const collectCheckedProcessesForAutoLink = () => { selectedV2Processes[path] = [proc]; } } else { - const datetimeCols = proc.columns.filter(col => col.is_get_date && !col.is_dummy_datetime); - const serialCols = proc.columns.filter(col => col.is_serial_no); + const datetimeCols = proc.columns.filter( + (col) => col.is_get_date && !col.is_dummy_datetime, + ); + const serialCols = proc.columns.filter((col) => col.is_serial_no); if (datetimeCols.length && serialCols.length) { if (dbsType === DB_CONFIGS.CSV.configs.type) { // CSV @@ -57,7 +59,7 @@ const collectCheckedProcessesForAutoLink = () => { serial_col: serialCols[0].column_name, dbtype: dbsType, delimiter: proc.data_source.csv_detail.delimiter, - }) + }); } else { // Factory DB selectedProcesses.push({ @@ -68,34 +70,34 @@ const collectCheckedProcessesForAutoLink = () => { dbtype: dbsType, date_col: datetimeCols[0].column_name, serial_col: serialCols[0].column_name, - }) + }); } } - } } for (const path of Object.keys(selectedV2Processes)) { - const v2ProcNames = selectedV2Processes[path].map(proc => proc.data_source.csv_detail.process_name); - const v2ProcIds = selectedV2Processes[path].map(proc => proc.id); + const v2ProcNames = selectedV2Processes[path].map( + (proc) => proc.data_source.csv_detail.process_name, + ); + const v2ProcIds = selectedV2Processes[path].map((proc) => proc.id); selectedProcesses.push({ path, processes: v2ProcNames, ids: v2ProcIds, dbtype: 'V2', date_col: null, - serial_col: null - }) + serial_col: null, + }); hasV2 = true; } if (!hasV2 && selectedV2Processes.length <= 1) { - return [] + return []; } return selectedProcesses; }; - /*** * * @param processList: list id of process [1, 2, 3, 4, 5] @@ -105,7 +107,7 @@ const linkProcesses = (processList) => { const trace = { from: 0, to: 0, - arrows: "to", + arrows: 'to', target_proc: 0, target_col: [], target_orig_col: [], @@ -114,16 +116,16 @@ const linkProcesses = (processList) => { self_col: [], back_orig_col: [], self_substr: [[]], - id: "", - } + id: '', + }; // filter serial and remove edge of this proc for (const id of processList) { const proc = processes[id]; - const serialCols = proc.columns.filter(col => col.is_serial_no); + const serialCols = proc.columns.filter((col) => col.is_serial_no); if (!serialCols.length) continue; - removeLinkedEdge(proc.id) + removeLinkedEdge(proc.id); linkProcs.push(proc); } @@ -132,8 +134,12 @@ const linkProcesses = (processList) => { for (let i = 0; i < linkProcs.length - 1; i += 1) { const fromProc = linkProcs[i]; const toProc = linkProcs[i + 1]; - const selfSerial = fromProc.columns.filter(col => col.is_serial_no).map(col => col.id); - const targetSerial = toProc.columns.filter(col => col.is_serial_no).map(col => col.id); + const selfSerial = fromProc.columns + .filter((col) => col.is_serial_no) + .map((col) => col.id); + const targetSerial = toProc.columns + .filter((col) => col.is_serial_no) + .map((col) => col.id); const edgeData = { ...trace, @@ -146,7 +152,7 @@ const linkProcesses = (processList) => { target_col: targetSerial, target_orig_col: targetSerial, id: create_UUID(), - } + }; mapIdFromIdTo2Edge[`${edgeData.from}-${edgeData.to}`] = edgeData; edges.update(edgeData); } @@ -166,14 +172,17 @@ const handleAutoLinkV2Process = async () => { if (!selectedProcesses.length) return; loading.show(); - const groupsOrderedProcesses = await getV2OrderedProcesses(selectedProcesses); + const groupsOrderedProcesses = + await getV2OrderedProcesses(selectedProcesses); loading.hide(); // update order of process on tree list orderProcessInTreeCheckBox(groupsOrderedProcesses); // link process - const goodGroups = groupsOrderedProcesses.filter(group => group.length >= 1); + const goodGroups = groupsOrderedProcesses.filter( + (group) => group.length >= 1, + ); for (const group of goodGroups) { linkProcesses(group); } @@ -190,11 +199,19 @@ const handleOpenTraceConfigMenu = (e) => { }; const treeCheckboxJs = () => { - $(document).off('click', '.tree-plus', handleToggleTreeCheckbox) + $(document).off('click', '.tree-plus', handleToggleTreeCheckbox); $(document).on('click', '.tree-plus', handleToggleTreeCheckbox); - $(document).off('change', '.tree input[type=checkbox]', handleCheckTreeCheckbox); - $(document).on('change', '.tree input[type=checkbox]', handleCheckTreeCheckbox); + $(document).off( + 'change', + '.tree input[type=checkbox]', + handleCheckTreeCheckbox, + ); + $(document).on( + 'change', + '.tree input[type=checkbox]', + handleCheckTreeCheckbox, + ); processesTree = groupProcessesByPath(Object.values(processes)); generateTreeCheckBoxs(processesTree); @@ -203,15 +220,21 @@ const treeCheckboxJs = () => { const handleToggleTreeCheckbox = (e) => { const _this = $(e.currentTarget); _this.siblings('ul').fadeToggle(); - _this.toggleClass('expanded') + _this.toggleClass('expanded'); e.stopPropagation(); }; const handleCheckTreeCheckbox = (e) => { const _this = $(e.currentTarget); const checked = _this.prop('checked'); - _this.siblings('ul').find("input[type='checkbox']").prop('checked', checked); - _this.parentsUntil('.tree').children("input[type='checkbox']").prop('checked', checked); + _this + .siblings('ul') + .find("input[type='checkbox']") + .prop('checked', checked); + _this + .parentsUntil('.tree') + .children("input[type='checkbox']") + .prop('checked', checked); e.stopPropagation(); }; @@ -268,29 +291,34 @@ const generateTreeCheckBoxs = (processObj) => { `; } - $('#tree-checkbox-list').html(groupHtml); + $('#tree-checkbox-list').html(groupHtml); // bind uncheck and checked node to show and hide nodes - $('#tree-checkbox-list input[type=checkbox]').off('change', handleOnChangeProcess) - $('#tree-checkbox-list input[type=checkbox]').on('change', handleOnChangeProcess) + $('#tree-checkbox-list input[type=checkbox]').off( + 'change', + handleOnChangeProcess, + ); + $('#tree-checkbox-list input[type=checkbox]').on( + 'change', + handleOnChangeProcess, + ); $('#tree-checkbox-list input[name=process]').change(); $('#tree-checkbox-list').sortable({ - containment: "parent", - handle: ".move", - items: "> li", - tolerance: "pointer", + containment: 'parent', + handle: '.move', + items: '> li', + tolerance: 'pointer', connectWith: '#tree-checkbox-list', }); $(`.tree-ui-sortable`).sortable({ - containment: "document", - items: "> li", + containment: 'document', + items: '> li', connectWith: '.tree-ui-sortable', }); - }; const handleOnChangeProcess = (e) => { - setTimeout(()=> { + setTimeout(() => { handleHideNodes(); }, 200); @@ -301,13 +329,13 @@ const handleOnChangeProcess = (e) => { const processState = getProcessState(); if (_this.attr('id') === 'checkAll') { - const isChecked = _this.prop('checked'); - for (const path of Object.keys(processesTree)) { - for (const proc of processesTree[path]) { - processState[proc.name] =isChecked; + const isChecked = _this.prop('checked'); + for (const path of Object.keys(processesTree)) { + for (const proc of processesTree[path]) { + processState[proc.name] = isChecked; proc.isChecked = isChecked; - } - } + } + } } if (path) { @@ -316,15 +344,14 @@ const handleOnChangeProcess = (e) => { const isChecked = _this.prop('checked'); if (!_.isNaN(id)) { if (proc.id === id) { - processState[proc.name] =isChecked; + processState[proc.name] = isChecked; proc.isChecked = isChecked; break; } } else { - processState[proc.name] =isChecked; + processState[proc.name] = isChecked; proc.isChecked = isChecked; } - } } @@ -355,7 +382,10 @@ const groupProcessesByPath = (processes) => { key = proc.data_source.id; } const processName = proc.name; - proc.isChecked = processState[processName] !== undefined ? processState[processName] : true; + proc.isChecked = + processState[processName] !== undefined + ? processState[processName] + : true; proc.treeOder = 0; if (key in processObj) { processObj[key].push(proc); @@ -369,7 +399,7 @@ const groupProcessesByPath = (processes) => { const handleHideNodes = () => { const hiddenIds = []; - const checkEls = [...$('.tree input[name=process]')] + const checkEls = [...$('.tree input[name=process]')]; // hide uncheck nodes and show checked nodes for (const el of checkEls) { @@ -379,7 +409,7 @@ const handleHideNodes = () => { nodes.update({ ...node, hidden: isHiddenNode, - }) + }); if (isHiddenNode) { hiddenIds.push(id); } @@ -387,11 +417,11 @@ const handleHideNodes = () => { // show all edges for (const edgeId of edges.getIds()) { - const edgeData = edges.get(edgeId); - edges.update({ - ...edgeData, - hidden: false, - }) + const edgeData = edges.get(edgeId); + edges.update({ + ...edgeData, + hidden: false, + }); } // hide edge of hidden nodes @@ -399,19 +429,21 @@ const handleHideNodes = () => { for (const edgeId of edges.getIds()) { const edgeData = edges.get(edgeId); const { from, to } = edgeData; - if ((Number(from) === id || Number(to) === id)) { + if (Number(from) === id || Number(to) === id) { edges.update({ ...edgeData, hidden: true, - }) + }); } } } }; const collectCheckedProcess = () => { - return [...$('.tree input[name=process]:checked')].map(el => Number($(el).val())); -} + return [...$('.tree input[name=process]:checked')].map((el) => + Number($(el).val()), + ); +}; const handleResetCheckedEdge = () => { const checkedProcess = collectCheckedProcess(); @@ -420,28 +452,35 @@ const handleResetCheckedEdge = () => { } }; - const handleAddCheckedEdge = () => { const checkedProcess = collectCheckedProcess(); linkProcesses(checkedProcess); }; const handleSelectAllNodes = (checkAllInput) => { - const allNodes = $('#tree-checkbox-list').find('input[type=checkbox]').not('#checkAll'); + const allNodes = $('#tree-checkbox-list') + .find('input[type=checkbox]') + .not('#checkAll'); const currentStatus = $(checkAllInput).is(':checked'); allNodes.prop('checked', currentStatus); }; const handleAllCheckInput = (input) => { - const allNodes = $('#tree-checkbox-list').find('input[type=checkbox]').not('#checkAll').not('.group-input'); + const allNodes = $('#tree-checkbox-list') + .find('input[type=checkbox]') + .not('#checkAll') + .not('.group-input'); const checkAllInput = $('#tree-checkbox-list input#checkAll'); const currentStatus = input.is(':checked'); if (!currentStatus) { checkAllInput.prop('checked', currentStatus); } else { - const checkedNodes = $('#tree-checkbox-list').find('input[type=checkbox]:checked').not('#checkAll').not('.group-input'); + const checkedNodes = $('#tree-checkbox-list') + .find('input[type=checkbox]:checked') + .not('#checkAll') + .not('.group-input'); if (checkedNodes.length == allNodes.length) { checkAllInput.prop('checked', currentStatus); } } -}; \ No newline at end of file +}; diff --git a/ap/static/setting_module/js/background_process.js b/ap/static/setting_module/js/background_process.js index 8ba2c6f..5b5d8b0 100644 --- a/ap/static/setting_module/js/background_process.js +++ b/ap/static/setting_module/js/background_process.js @@ -1,7 +1,3 @@ -/* eslint-disable no-cond-assign */ -/* eslint-disable func-names */ -/* eslint-disable no-extend-native */ -/* eslint-disable no-undef */ let isFirstTimeRunPaging = true; let pagingParams = null; const RELOAD_INTERVAL = 3 * 60 * 1000; // reload job page after 3 minutes @@ -32,11 +28,11 @@ const ids = { selectLanguage: '#select-language', }; -const pageTitleElement = $('.page-title h2') +const pageTitleElement = $('.page-title h2'); const isFailedJobPage = () => { return pageTitleElement.text() === i18n.failedJobPageTitle; -} +}; const JOB_STATUS = { DONE: { @@ -44,42 +40,42 @@ const JOB_STATUS = { class: 'check green', 'class-progress-bar': 'bg-success', text: 'Done', - db_text: 'DONE' + db_text: 'DONE', }, FAILED: { title: i18n.statusFailed, class: 'exclamation-triangle yellow', 'class-progress-bar': 'bg-warning', text: 'Error', - db_text: 'ERROR' + db_text: 'ERROR', }, KILLED: { title: i18n.statusFailed, class: 'exclamation-triangle yellow', 'class-progress-bar': 'bg-warning', text: 'Killed', - db_text: 'KILLED' + db_text: 'KILLED', }, PROCESSING: { title: i18n.statusImporting, class: 'spinner fa-spin', 'class-progress-bar': 'progress-bar-animated', text: 'Processing', - db_text: 'PROCESSING' + db_text: 'PROCESSING', }, PENDING: { title: i18n.statusPending, class: 'spinner fa-spin', 'class-progress-bar': 'progress-bar-animated', text: 'Pending', - db_text: 'PENDING' + db_text: 'PENDING', }, FATAL: { title: i18n.statusFailed, class: 'exclamation-triangle yellow', 'class-progress-bar': 'bg-warning', text: 'Fatal', - db_text: 'FATAL' + db_text: 'FATAL', }, }; @@ -88,7 +84,7 @@ const NON_FAILED_JOB_STATUS = [ JOB_STATUS.DONE.db_text, JOB_STATUS.PENDING.db_text, JOB_STATUS.KILLED.db_text, -] +]; const convertJobName = (jobName) => { const defaultJobNames = [ @@ -97,7 +93,8 @@ const convertJobName = (jobName) => { 'FACTORY_IMPORT', 'GEN_GLOBAL', 'CLEAN_DATA', - 'FACTORY_PAST_IMPORT']; + 'FACTORY_PAST_IMPORT', + ]; if (defaultJobNames.includes(jobName)) { return i18n[jobName]; } @@ -106,11 +103,11 @@ const convertJobName = (jobName) => { const genDicTrJobs = () => { const dicTableRows = {}; - const rows = $('#jobDataTable table tbody tr') + const rows = $('#jobDataTable table tbody tr'); for (let i = 0; i < rows.length; i++) { const tr = rows[i]; - const jobId = $(tr).find('td.job-id').text() - dicTableRows[jobId] = tr + const jobId = $(tr).find('td.job-id').text(); + dicTableRows[jobId] = tr; } return dicTableRows; }; @@ -124,21 +121,25 @@ const updateBackgroundJobs = (json, isFirstTime = false) => { const pageOptions = getPageOptionsFromGUI(); const ignoreJobs = []; - const ignoreStatus = [] + const ignoreStatus = []; if (!pageOptions.showProcLinkJob) { - ignoreJobs.push('GEN_GLOBAL') + ignoreJobs.push('GEN_GLOBAL'); } if (!pageOptions.showPastImportJob) { - ignoreJobs.push('FACTORY_PAST_IMPORT') + ignoreJobs.push('FACTORY_PAST_IMPORT'); } if (pageOptions.errorPage) { - ignoreStatus.push(...NON_FAILED_JOB_STATUS) + ignoreStatus.push(...NON_FAILED_JOB_STATUS); } rows.forEach((row) => { - const statusClass = JOB_STATUS[row.status].class || JOB_STATUS.FAILED.class; - const statusTooltip = JOB_STATUS[row.status].title || JOB_STATUS.FAILED.title; - // eslint-disable-next-line max-len - const statusProgressBar = JOB_STATUS[row.status]['class-progress-bar'] || JOB_STATUS.FAILED['class-progress-bar']; + const statusClass = + JOB_STATUS[row.status].class || JOB_STATUS.FAILED.class; + const statusTooltip = + JOB_STATUS[row.status].title || JOB_STATUS.FAILED.title; + + const statusProgressBar = + JOB_STATUS[row.status]['class-progress-bar'] || + JOB_STATUS.FAILED['class-progress-bar']; // const rowHtml = tableBody.find(`#job-${row.job_id}`); let rowHtml = dicTableRows[row.job_id]; const updatedStatus = JOB_STATUS[row.status].text; @@ -161,19 +162,29 @@ const updateBackgroundJobs = (json, isFirstTime = false) => { if (rowHtml) { rowHtml = $(rowHtml); if (isFirstTime) { - rowHtml.find('.job-name').text(convertJobName(row.job_name) || ' '); - rowHtml.find('.job-start-time').text(moment(row.start_tm).format(DATE_FORMAT_WITHOUT_TZ)); + rowHtml + .find('.job-name') + .text(convertJobName(row.job_name) || ' '); + rowHtml + .find('.job-start-time') + .text(moment(row.start_tm).format(DATE_FORMAT_WITHOUT_TZ)); } rowHtml.find('.job-duration').text(row.duration); rowHtml.find('.job-progress').html(progress); - if (rowHtml.find('.job-status').attr('data-status') !== row.status) { + if ( + rowHtml.find('.job-status').attr('data-status') !== row.status + ) { rowHtml.find('.job-status').html(updatedStatus); } rowHtml.find('.job-detail').html(jobDetailHTML); rowHtml.find('.job-status').attr('data-status', row.status); } else { - if (pageOptions && pageOptions.pageNumber === 1 && !ignoreJobs.includes(row.job_name) - && !ignoreStatus.includes(row.status)) { + if ( + pageOptions && + pageOptions.pageNumber === 1 && + !ignoreJobs.includes(row.job_name) && + !ignoreStatus.includes(row.status) + ) { tableBody.prepend(` ${row.job_id} @@ -192,7 +203,6 @@ const updateBackgroundJobs = (json, isFirstTime = false) => { $('.loading').hide(); }; - function copyToClipboard() { const table = $('#jobErrorDetailTable'); let tobeCopiedText = '{'; @@ -217,7 +227,10 @@ function copyToClipboard() { const getJobDetail = async (jobId) => { if (jobId === null || jobId === undefined) return; - const url = new URL(`/ap/api/setting/job_detail/${jobId}`, window.location.href).href; + const url = new URL( + `/ap/api/setting/job_detail/${jobId}`, + window.location.href, + ).href; const json = await fetch(url, { method: 'GET', headers: { @@ -225,7 +238,7 @@ const getJobDetail = async (jobId) => { 'Content-Type': 'application/json', }, }) - .then(response => response.clone().json()) + .then((response) => response.clone().json()) .catch(() => { // }); @@ -259,11 +272,13 @@ const showJobErrorDetail = async (jobId) => { $('#modalJobDetail').modal('show'); }; -// eslint-disable-next-line no-unused-vars const updateFilterJobs = () => { const showPastImportJob = $('#factoryPassImport').is(':checked'); const showProcLinkJob = $('#genGlobalID').is(':checked'); - const dicFilterJobs = {factoryPassImport: showPastImportJob, genGlobalID: showProcLinkJob} + const dicFilterJobs = { + factoryPassImport: showPastImportJob, + genGlobalID: showProcLinkJob, + }; localStorage.setItem('filterBackgroundJobs', JSON.stringify(dicFilterJobs)); }; @@ -297,14 +312,13 @@ const updateFilterJobs = () => { // updateBackgroundJobs(showJobs); // }; - const getPageOptionsFromGUI = () => { let showPastImportJob = $('#factoryPassImport').is(':checked'); let showProcLinkJob = $('#genGlobalID').is(':checked'); const jobDataTbl = $(ids.jobTable); const pageOptions = jobDataTbl.bootstrapTable('getOptions'); - const errorPage = isFailedJobPage() - if(isFailedJobPage()){ + const errorPage = isFailedJobPage(); + if (isFailedJobPage()) { showPastImportJob = true; showProcLinkJob = true; } @@ -314,7 +328,7 @@ const getPageOptionsFromGUI = () => { showProcLinkJob: showProcLinkJob, showPastImportJob: showPastImportJob, errorPage: errorPage, - } + }; return jobPageOptions; }; @@ -323,7 +337,7 @@ const setJobPageConfig = (jobPageOptions) => { if (jobPageOptions) { localStorage.setItem('jobPageOptions', JSON.stringify(jobPageOptions)); } -} +}; const isFirstPage = () => { const jobDataTbl = $(ids.jobTable); @@ -337,7 +351,7 @@ const loadPage = () => { if (pagingParams) { ajaxRequest(pagingParams); } -} +}; const reloadPageAfterInterval = () => { setInterval(function () { if (isFirstPage() && pagingParams) { @@ -355,7 +369,7 @@ const reloadPageAfterInterval = () => { formatShowingRows(pageFrom, pageTo, totalRows) { return `全${totalRows}件のうち、${pageFrom}から${pageTo}件まで表示しています。`; }, - } + }, }; $.fn.bootstrapTable.locales['en-US'] = { ...$.fn.bootstrapTable.locales['en-US'], @@ -363,11 +377,13 @@ const reloadPageAfterInterval = () => { formatShowingRows(pageFrom, pageTo, totalRows) { return `Showing ${pageFrom} to ${pageTo} of all ${totalRows} rows.`; }, - } + }, }; - $.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales['en-US']); -}(jQuery)); - + $.extend( + $.fn.bootstrapTable.defaults, + $.fn.bootstrapTable.locales['en-US'], + ); +})(jQuery); $(() => { // init job table with bootstrap @@ -380,7 +396,9 @@ $(() => { pagination: true, paginationVAlign: 'both', pageSize: pageOptions ? pageOptions.pageSize : 50, - locale: $('option:selected', $(ids.selectLanguage)).attr('bootstrap-locale'), + locale: $('option:selected', $(ids.selectLanguage)).attr( + 'bootstrap-locale', + ), errorPage: isFailedJobPage(), // formatShowingRows() { // return sprintf(''); @@ -391,7 +409,6 @@ $(() => { $('#factoryPassImport').on('change', () => loadPage()); $('#genGlobalID').on('change', () => loadPage()); - // Search content of table onSearchTableContent('searchJobList', 'jobTable'); sortableTable('jobTable', [0, 1, 2, 3, 4, 5, 6, 7, 8], null, false, false); @@ -425,7 +442,7 @@ const getPageOptionsFromLocalStorage = () => { pageOptions = JSON.parse(pageOptions); } - return pageOptions + return pageOptions; }; function ajaxRequest(params) { @@ -454,8 +471,9 @@ function ajaxRequest(params) { Accept: 'application/json', 'Content-Type': 'application/json', }, - }).then(response => response.json()) - .then(res => { + }) + .then((response) => response.json()) + .then((res) => { params.success(res); updateBackgroundJobs(res.rows, true); $('.loading').hide(); @@ -466,4 +484,3 @@ function ajaxRequest(params) { }); return json; } - diff --git a/ap/static/setting_module/js/cfg_filter_funcs.js b/ap/static/setting_module/js/cfg_filter_funcs.js index f3368a0..92c7ad6 100644 --- a/ap/static/setting_module/js/cfg_filter_funcs.js +++ b/ap/static/setting_module/js/cfg_filter_funcs.js @@ -1,6 +1,4 @@ -/* eslint-disable no-use-before-define */ -/* eslint-disable no-restricted-syntax */ -const filterCfgGenerator = ((cardId, filterType = filterTypes.OTHER) => { +const filterCfgGenerator = (cardId, filterType = filterTypes.OTHER) => { const conditionFormula = { matches: 'MATCHES', endswith: 'ENDSWITH', @@ -11,11 +9,17 @@ const filterCfgGenerator = ((cardId, filterType = filterTypes.OTHER) => { orSearch: 'OR_SEARCH', andSearch: 'AND_SEARCH', }; - const applySearchFormulas = [conditionFormula.matches, conditionFormula.andSearch, conditionFormula.orSearch]; - const multipleSelect2Formulas = [conditionFormula.andSearch, conditionFormula.orSearch]; + const applySearchFormulas = [ + conditionFormula.matches, + conditionFormula.andSearch, + conditionFormula.orSearch, + ]; + const multipleSelect2Formulas = [ + conditionFormula.andSearch, + conditionFormula.orSearch, + ]; const singleSelect2Formulas = [conditionFormula.matches]; - /* eslint-disable no-undef */ const eles = { addConfigBtn: `.card#${cardId} [name=addConfig]`, name: 'filterName', @@ -75,12 +79,18 @@ const filterCfgGenerator = ((cardId, filterType = filterTypes.OTHER) => { noColumn: $('#i18nNAColumn').text(), settingMode: $('#filterSettingMode').text(), editMode: $('#filterEditMode').text(), + requireShownName: $('#filterRequireShownName'), }; - const startDigitOptionsHTML = ''; + const startDigitOptionsHTML = + ''; const findFilterCondType = (formula) => { - if ([conditionFormula.andSearch, conditionFormula.orSearch].includes(formula)) { + if ( + [conditionFormula.andSearch, conditionFormula.orSearch].includes( + formula, + ) + ) { return 2; } if ([conditionFormula.matches].includes(formula)) { @@ -89,39 +99,60 @@ const filterCfgGenerator = ((cardId, filterType = filterTypes.OTHER) => { return 0; }; - const genSelectValueOptions = (filterCondition, select2Type, filterColumnData) => { - const selectedValues = select2Type === 2 ? `${filterCondition}`.split(/[ ]+/) : [filterCondition]; // TODO split into 2 cases + const genSelectValueOptions = ( + filterCondition, + select2Type, + filterColumnData, + ) => { + const selectedValues = + select2Type === 2 + ? `${filterCondition}`.split(/[ ]+/) + : [filterCondition]; // TODO split into 2 cases const selectedValueOptions = []; for (const val of selectedValues) { if (!isEmpty(val)) { - selectedValueOptions.push(``); + selectedValueOptions.push( + ``, + ); } } const filterValueOptions = []; for (const val of filterColumnData) { if (!selectedValues.includes(`${val}`)) { - filterValueOptions.push(``); + filterValueOptions.push( + ``, + ); } } return [selectedValues, selectedValueOptions, filterValueOptions]; }; - const bindEventsAfterAddRow = (startFromSelectPrefix, filterStartPosition, select2Type, selectedValues) => { + const bindEventsAfterAddRow = ( + startFromSelectPrefix, + filterStartPosition, + select2Type, + selectedValues, + ) => { // show startDigit select for partial match only // TODO add to function - $(`#${startFromSelectPrefix}Select`).on('change', function changeFormulaHandler() { - const startDigitElement = $(`#${startFromSelectPrefix}StartDigit`); - const formulaElement = $(this); - if (formulaElement.val() === `${conditionFormula.substring}`) { - startDigitElement.css('display', 'block'); - } else { - startDigitElement.css('display', 'none'); - } - const condSelect2 = $(`#${startFromSelectPrefix}CondSelect2`); - const condInput = $(`#${startFromSelectPrefix}CondInput`); + $(`#${startFromSelectPrefix}Select`).on( + 'change', + function changeFormulaHandler() { + const startDigitElement = $( + `#${startFromSelectPrefix}StartDigit`, + ); + const formulaElement = $(this); + if (formulaElement.val() === `${conditionFormula.substring}`) { + startDigitElement.css('display', 'block'); + } else { + startDigitElement.css('display', 'none'); + } + const condSelect2 = $(`#${startFromSelectPrefix}CondSelect2`); + const condInput = $(`#${startFromSelectPrefix}CondInput`); - exchangeSelectedValues(formulaElement, condSelect2, condInput); - }); + exchangeSelectedValues(formulaElement, condSelect2, condInput); + }, + ); if (select2Type) { const condSelect2 = $(`#${startFromSelectPrefix}CondSelect2`); @@ -134,7 +165,11 @@ const filterCfgGenerator = ((cardId, filterType = filterTypes.OTHER) => { }; const exchangeSelectedValues = (formulaElement, condSelect2, condInput) => { - const [changeAction, newValue] = decideChangeAction(formulaElement, condSelect2, condInput); + const [changeAction, newValue] = decideChangeAction( + formulaElement, + condSelect2, + condInput, + ); if (changeAction === 'x->2') { condSelect2.select2(genSelect2Param(2)); condSelect2.val(null).trigger('change'); @@ -147,7 +182,7 @@ const filterCfgGenerator = ((cardId, filterType = filterTypes.OTHER) => { assignValueToSelect2(condSelect2, newValue); } else if (changeAction === 'x->0') { let val = newValue || []; - if (typeof (val) === 'string') { + if (typeof val === 'string') { val = [val]; } condInput.val(val.join(' ')); @@ -161,25 +196,44 @@ const filterCfgGenerator = ((cardId, filterType = filterTypes.OTHER) => { const decideChangeAction = (formulaElement, condSelect2, condInput) => { const newFormula = formulaElement.val(); const oldFormula = formulaElement.attr('previousValue'); - if (singleSelect2Formulas.includes(newFormula) && multipleSelect2Formulas.includes(oldFormula)) { + if ( + singleSelect2Formulas.includes(newFormula) && + multipleSelect2Formulas.includes(oldFormula) + ) { return ['x->1', condSelect2.val()]; } - if (singleSelect2Formulas.includes(newFormula) && !applySearchFormulas.includes(oldFormula)) { + if ( + singleSelect2Formulas.includes(newFormula) && + !applySearchFormulas.includes(oldFormula) + ) { return ['x->1', condInput.val()]; } - if (multipleSelect2Formulas.includes(newFormula) && singleSelect2Formulas.includes(oldFormula)) { + if ( + multipleSelect2Formulas.includes(newFormula) && + singleSelect2Formulas.includes(oldFormula) + ) { return ['x->2', condSelect2.val()]; } - if (multipleSelect2Formulas.includes(newFormula) && !applySearchFormulas.includes(oldFormula)) { + if ( + multipleSelect2Formulas.includes(newFormula) && + !applySearchFormulas.includes(oldFormula) + ) { return ['x->2', condInput.val()]; } - if (!applySearchFormulas.includes(newFormula) && applySearchFormulas.includes(oldFormula)) { + if ( + !applySearchFormulas.includes(newFormula) && + applySearchFormulas.includes(oldFormula) + ) { return ['x->0', condSelect2.val()]; } return ['DO_NOTHING', null]; }; - const generateLineOptionsHTML = (lineValues, lineMasters, selectedLine = '') => { + const generateLineOptionsHTML = ( + lineValues, + lineMasters, + selectedLine = '', + ) => { // build line select options let linesHTML = ''; [].concat(lineValues).forEach((lineValue, i) => { @@ -195,38 +249,71 @@ const filterCfgGenerator = ((cardId, filterType = filterTypes.OTHER) => { return linesHTML; }; - - const addConfigRow = (filterId = '', filterName = '', filterCondition = '', - filterFunction = conditionFormula.matches, filterStartPosition = '', - parentId = '', lineIds = [''], lineNames = ['---'], isMachineRow = false) => { - const options = [i18n.matches, i18n.endsWith, i18n.startsWith, i18n.contains, i18n.regex, i18n.substring, - i18n.orSearch, i18n.andSearch].map(e => e[0].innerText); + const addConfigRow = ( + filterId = '', + filterName = '', + filterCondition = '', + filterFunction = conditionFormula.matches, + filterStartPosition = '', + parentId = '', + lineIds = [''], + lineNames = ['---'], + isMachineRow = false, + ) => { + const options = [ + i18n.matches, + i18n.endsWith, + i18n.startsWith, + i18n.contains, + i18n.regex, + i18n.substring, + i18n.orSearch, + i18n.andSearch, + ].map((e) => e[0].innerText); const formula = filterFunction; - const defaultSelected = conditionFormula.matches === formula ? eles.selectedOptStr : ''; - const endsSelected = conditionFormula.endswith === formula ? eles.selectedOptStr : ''; - const startsSelected = conditionFormula.startswith === formula ? eles.selectedOptStr : ''; - const regexSelected = conditionFormula.regex === formula ? eles.selectedOptStr : ''; - const substringSelected = conditionFormula.substring === formula ? eles.selectedOptStr : ''; - const orSearchSelected = conditionFormula.orSearch === formula ? eles.selectedOptStr : ''; - const andSearchSelected = conditionFormula.andSearch === formula ? eles.selectedOptStr : ''; - const showStartFrom = conditionFormula.substring === formula ? 'display:block' : 'display:none'; + const defaultSelected = + conditionFormula.matches === formula ? eles.selectedOptStr : ''; + const endsSelected = + conditionFormula.endswith === formula ? eles.selectedOptStr : ''; + const startsSelected = + conditionFormula.startswith === formula ? eles.selectedOptStr : ''; + const regexSelected = + conditionFormula.regex === formula ? eles.selectedOptStr : ''; + const substringSelected = + conditionFormula.substring === formula ? eles.selectedOptStr : ''; + const orSearchSelected = + conditionFormula.orSearch === formula ? eles.selectedOptStr : ''; + const andSearchSelected = + conditionFormula.andSearch === formula ? eles.selectedOptStr : ''; + const showStartFrom = + conditionFormula.substring === formula + ? 'display:block' + : 'display:none'; const startFromSelectPrefix = generateRandomString(6); // use for startFromSelect const select2Type = findFilterCondType(formula); const hideCondInput = select2Type ? 'hidden' : ''; const hideCondSelect2 = select2Type ? '' : 'hidden'; const selectedColumn = $(eles.columnName).val(); - const filterColumnData = filterStore.getSelectedProcessConfig().getColumnData(selectedColumn); + const filterColumnData = filterStore + .getSelectedProcessConfig() + .getColumnData(selectedColumn); filterCondition = stringNormalization(filterCondition); filterName = stringNormalization(filterName); - const [selectedValues, selectedValueOptions, filterValueOptions] = genSelectValueOptions(filterCondition, select2Type, filterColumnData); + const [selectedValues, selectedValueOptions, filterValueOptions] = + genSelectValueOptions( + filterCondition, + select2Type, + filterColumnData, + ); // build line select options let lineHTML = ''; if (isMachineRow) { const lineOptionsHTML = generateLineOptionsHTML( [].concat(lineIds), - [].concat(lineNames), parentId, + [].concat(lineNames), + parentId, ); lineHTML = ` @@ -1048,8 +1098,7 @@ const addDBConfigRow = () => { `; - $(`#${dbElements.tblDbConfig} > tbody:last-child`) - .append(row); + $(`#${dbElements.tblDbConfig} > tbody:last-child`).append(row); setTimeout(() => { scrollToBottom(`${dbElements.tblDbConfig}_wrap`); }, 200); @@ -1059,20 +1108,15 @@ const addDBConfigRow = () => { // updateTableRowNumber(dbElements.tblDbConfig); }; - const deleteRow = (self) => { - $('#deleteDSModal') - .modal('show'); - currentDSTR = $(self) - .closest('tr'); + $('#deleteDSModal').modal('show'); + currentDSTR = $(self).closest('tr'); }; - const confirmDeleteDS = async () => { // save current data source tr element const dsCode = currentDSTR.attr(csvResourceElements.dataSrcId); - $(currentDSTR) - .remove(); + $(currentDSTR).remove(); // update row number // updateTableRowNumber(dbElements.tblDbConfig); @@ -1096,13 +1140,15 @@ const confirmDeleteDS = async () => { result = getNode(res, ['result', 'deleted_procs']); // Delete record from DataSource - - $(`#tblDbConfig tr[data-ds-id=${dsCode}]`) - .remove(); + $(`#tblDbConfig tr[data-ds-id=${dsCode}]`).remove(); // Delete all Process in DataSource parent - $(`#tblProcConfig tr[data-ds-id=${dsCode}]`) - .remove(); + $(`#tblProcConfig tr[data-ds-id=${dsCode}]`).remove(); + + // Delete datasource option in select tag + $( + `select[name="databaseName"] option[value="${dsCode}"]`, + ).remove(); // refresh Vis network reloadTraceConfigFromDB(); @@ -1121,65 +1167,30 @@ const confirmDeleteDS = async () => { // delete from UI on success if (deletedProcs) { - $(`#${dsCode}`) - .remove(); + $(`#${dsCode}`).remove(); // remove the deleted DS config in global variable DB.delete(dsCode); // remove relevant processes in UI deletedProcs.forEach((procCode) => { - $(`#tblProcConfig tr[id=${procCode}]`) - .remove(); + $(`#tblProcConfig tr[id=${procCode}]`).remove(); }); } }; const showToastrToProceedProcessConfig = () => { - const msgContent = `

      ${$('#i18nProceedToProcessConfig') - .text()}

      `; + const msgContent = `

      ${$('#i18nProceedToProcessConfig').text()}

      `; showToastrMsg(msgContent, MESSAGE_LEVEL.INFO); }; -const parseIntData = (v) => { - let val = trimBoth(String(v)); - if (isEmpty(val)) { - val = ''; - } else { - val = parseInt(Number(val)); - if (isNaN(val)) { - val = ''; - } - } - return val; -}; - -const parseFloatData = (v) => { - let val = trimBoth(String(v)); - if (isEmpty(val)) { - val = ''; - } else if (val.toLowerCase() === COMMON_CONSTANT.INF.toLowerCase()) { - val = COMMON_CONSTANT.INF.toLowerCase(); - } else if (val.toLowerCase() === COMMON_CONSTANT.MINF.toLowerCase()) { - val = COMMON_CONSTANT.MINF.toLowerCase(); - } else { - // TODO why do we need to re-parse? - val = parseFloat(Number(val)); - if (isNaN(val)) { - val = ''; - } - } - return val; -}; - const getDataTypeFromID = (dataTypeID) => { let currentDatType = ''; - Object.keys(DataTypes) - .forEach((key) => { - if (DataTypes[key].value === Number(dataTypeID)) { - currentDatType = DataTypes[key].name; - } - }); + Object.keys(DataTypes).forEach((key) => { + if (DataTypes[key].value === Number(dataTypeID)) { + currentDatType = DataTypes[key].name; + } + }); return currentDatType; }; @@ -1210,29 +1221,34 @@ const changeSelectedColumnRaw = (ele, idx) => { }, }; // find column in setting table - const columnName = $(`table[name="latestDataTable"] thead th:eq(${idx})`) - .find('input')[0]; - const columnInSelectedTable = columnName ? $('#processColumnsTable') - .find(`tr[uid="${columnName.value}"]`)[0] : null; + const columnName = $( + `table[name="latestDataTable"] thead th:eq(${idx})`, + ).find('input')[0]; + const columnInSelectedTable = columnName + ? $('#processColumnsTable').find(`tr[uid="${columnName.value}"]`)[0] + : null; if (columnInSelectedTable) { - Object.keys(defaultOptions) - .forEach((key) => { - const activeDOM = $(columnInSelectedTable) - .find(`input[name="${key}"]`); - activeDOM.prop('checked', defaultOptions[key].checked); - - if (Number(ele.value) === DataTypes.DATETIME.value) { - activeDOM.prop('disabled', false); - } else { - activeDOM.prop('disabled', defaultOptions[key].disabled); - } - }); + Object.keys(defaultOptions).forEach((key) => { + const activeDOM = $(columnInSelectedTable).find( + `input[name="${key}"]`, + ); + activeDOM.prop('checked', defaultOptions[key].checked); + + if (Number(ele.value) === DataTypes.DATETIME.value) { + activeDOM.prop('disabled', false); + } else { + activeDOM.prop('disabled', defaultOptions[key].disabled); + } + }); let operatorOpt = ''; - if (Number(ele.value) === DataTypes.REAL.value || Number(ele.value) === DataTypes.INTEGER.value) { + if ( + Number(ele.value) === DataTypes.REAL.value || + Number(ele.value) === DataTypes.INTEGER.value + ) { operatorOpt = operators[DataTypes.REAL.name]; - const coefNumber = $(columnInSelectedTable) - .find('input[name="coef"]')[0] || ''; + const coefNumber = + $(columnInSelectedTable).find('input[name="coef"]')[0] || ''; if (!Number(coefNumber.value)) { console.log('operator with string'); } @@ -1240,11 +1256,9 @@ const changeSelectedColumnRaw = (ele, idx) => { operatorOpt = operators.DEFAULT; } const operatorEle = Object.keys(operatorOpt) - .map(opt => ``) + .map((opt) => ``) .join(''); - $(columnInSelectedTable) - .find('select[name="operator"]') - .html(''); + $(columnInSelectedTable).find('select[name="operator"]').html(''); $(columnInSelectedTable) .find('select[name="operator"]') .append(''); @@ -1275,90 +1289,116 @@ const parseDataType = (ele, idx) => { // change background color changeBackgroundColor(ele); - const vals = [...procModalElements.processColumnsSampleDataTableBody.find(`tr:eq(${idx}) .sample-data`)].map(el => $(el)); + const value = ele.getAttribute('raw-data-type'); + const dataColumn = $(ele).closest('tr').find('input[type=checkbox]'); + // do not parse `datetime`, `date`, and `time` here. + if ( + value === DataTypes.DATETIME.name || + value === DataTypes.DATE.name || + value === DataTypes.TIME.name + ) { + const dataType = Object.entries(DataTypes).find( + ([dtype, definition]) => definition.name === value, + ); + if (dataType !== null) { + const dataTypeName = dataType[1].name; + showProcDatetimeFormatSampleData({ + colIdx: idx, + dataType: dataTypeName, + }); + dataColumn.attr('raw-data-type', dataTypeName); + } + return; + } + + const vals = [ + ...procModalElements.processColumnsSampleDataTableBody.find( + `tr:eq(${idx}) .sample-data`, + ), + ].map((el) => $(el)); const attrName = 'data-original'; switch (ele.getAttribute('value')) { - case DataTypes.INTEGER.name: - for (const e of vals) { - let val = e.attr(attrName); - const isBigInt = Boolean(e.attr('is-big-int')); - if (!isBigInt) { + case DataTypes.INTEGER.name: + for (const e of vals) { + let val = e.attr(attrName); + const isBigInt = Boolean(e.attr('is-big-int')); + if (!isBigInt) { + val = parseIntData(val); + } + e.html(val); + } + break; + case DataTypes.REAL.name: + for (const e of vals) { + let val = e.attr(attrName); + val = parseFloatData(val); + e.html(val); + } + break; + case DataTypes.DATETIME.name: + for (const e of vals) { + let val = e.attr(attrName); + val = parseDatetimeStr(val); + e.html(val); + } + break; + case DataTypes.DATE.name: + for (const e of vals) { + let val = e.attr(attrName); + val = parseDatetimeStr(val, true); + e.html(val); + } + break; + case DataTypes.TIME.name: + for (const e of vals) { + let val = e.attr(attrName); + val = parseTimeStr(val); + e.html(val); + } + break; + case DataTypes.REAL_SEP.name: + for (const e of vals) { + let val = e.attr(attrName); + val = val.replaceAll(',', ''); + val = parseFloatData(val); + e.html(val); + } + break; + case DataTypes.INTEGER_SEP.name: + for (const e of vals) { + let val = e.attr(attrName); + val = val.replaceAll(',', ''); val = parseIntData(val); + e.html(val); } - e.html(val); - } - break; - case DataTypes.REAL.name: - for (const e of vals) { - let val = e.attr(attrName); - val = parseFloatData(val); - e.html(val); - } - break; - case DataTypes.DATETIME.name: - for (const e of vals) { - let val = e.attr(attrName); - val = parseDatetimeStr(val); - e.html(val); - } - break; - case DataTypes.DATE.name: - for (const e of vals) { - let val = e.attr(attrName); - val = parseDatetimeStr(val, true); - e.html(val); - } - break; - case DataTypes.TIME.name: - for (const e of vals) { - let val = e.attr(attrName); - val = parseTimeStr(val); - e.html(val); - } - break; - case DataTypes.REAL_SEP.name: - for (const e of vals) { - let val = e.attr(attrName); - val = val.replaceAll(',', ''); - val = parseFloatData(val); - e.html(val); - } - break; - case DataTypes.INTEGER_SEP.name: - for (const e of vals) { - let val = e.attr(attrName); - val = val.replaceAll(',', ''); - val = parseIntData(val); - e.html(val); - } - break; - case DataTypes.EU_REAL_SEP.name: - for (const e of vals) { - let val = e.attr(attrName); - val = val.replaceAll('.', ''); - val = val.replaceAll(',', '.'); - val = parseFloatData(val); - e.html(val); - } - break; - case DataTypes.EU_INTEGER_SEP.name: - for (const e of vals) { - let val = e.attr(attrName); - val = val.replaceAll('.', ''); - val = val.replaceAll(',', '.'); - val = parseIntData(val); - e.html(val); - } - break; - default: - for (const e of vals) { - let val = e.attr(attrName); - val = trimBoth(String(val)); - e.html(val); - } - break; + break; + case DataTypes.EU_REAL_SEP.name: + for (const e of vals) { + let val = e.attr(attrName); + val = val.replaceAll('.', ''); + val = val.replaceAll(',', '.'); + val = parseFloatData(val); + e.html(val); + } + break; + case DataTypes.EU_INTEGER_SEP.name: + for (const e of vals) { + let val = e.attr(attrName); + val = val.replaceAll('.', ''); + val = val.replaceAll(',', '.'); + val = parseIntData(val); + e.html(val); + } + break; + default: + for (const e of vals) { + let val = e.attr(attrName); + val = trimBoth(String(val)); + e.html(val); + } + break; } // changeSelectedColumnRaw(ele, idx); updateSubmitBtn(); @@ -1372,180 +1412,198 @@ const bindDBItemToModal = (selectedDatabaseType, dictDataSrc) => { // show upon db types switch (selectedDatabaseType) { - case DB_CONFIGS.SQLITE.configs.type: { - if (!dictDataSrc.db_detail) { - $(`#${domModalPrefix}_dbname`) - .val(''); - $(`#${domModalPrefix}_dbsourcename`) - .val(''); - $(`#${domModalPrefix}_comment`) - .val(''); - } else { - // load to modal - $(`#${domModalPrefix}_dbname`) - .val(dictDataSrc.db_detail.dbname); - $(`#${domModalPrefix}_dbsourcename`) - .val(dictDataSrc.name); - $(`#${domModalPrefix}_comment`) - .val(dictDataSrc.comment); + case DB_CONFIGS.SQLITE.configs.type: { + if (!dictDataSrc.db_detail) { + $(`#${domModalPrefix}_dbname`).val(''); + $(`#${domModalPrefix}_dbsourcename`).val(''); + $(`#${domModalPrefix}_comment`).val(''); + } else { + // load to modal + $(`#${domModalPrefix}_dbname`).val( + dictDataSrc.db_detail.dbname, + ); + $(`#${domModalPrefix}_dbsourcename`).val(dictDataSrc.name); + $(`#${domModalPrefix}_comment`).val(dictDataSrc.comment); + } + break; } - break; - } - case DB_CONFIGS.V2.configs.type: - case DB_CONFIGS.CSV.configs.type: { - // Default selected - $(csvResourceElements.alertMsgCheckFolder) - .hide(); - $(csvResourceElements.dataTbl) - .hide(); - - $(`${dbConfigElements.csvModal} #okBtn`) - .data('itemId', dictDataSrc.id); - $(`${dbConfigElements.csvModal} #showResources`) - .data('itemId', dictDataSrc.id); - - // Clear old input data - $(csvResourceElements.folderUrlInput) - .val(''); - - $(csvResourceElements.fileName) - .text(''); - - if (dictDataSrc.csv_detail) { - if (dictDataSrc.csv_detail.directory) { - $(csvResourceElements.folderUrlInput) - .val(dictDataSrc.csv_detail.directory); + case DB_CONFIGS.V2.configs.type: + case DB_CONFIGS.CSV.configs.type: { + // Default selected + $(csvResourceElements.alertMsgCheckFolder).hide(); + $(csvResourceElements.dataTbl).hide(); + + $(`${dbConfigElements.csvModal} #okBtn`).data( + 'itemId', + dictDataSrc.id, + ); + $(`${dbConfigElements.csvModal} #showResources`).data( + 'itemId', + dictDataSrc.id, + ); + + // Clear old input data + $(csvResourceElements.isFilePathHidden).val(''); + $(csvResourceElements.folderUrlInput).val(''); + $(csvResourceElements.folderUrlInput).data('originValue', ''); + + $(csvResourceElements.fileName).text(''); + + if (dictDataSrc.csv_detail) { + if (dictDataSrc.csv_detail.directory) { + $(csvResourceElements.folderUrlInput).val( + dictDataSrc.csv_detail.directory, + ); + $(csvResourceElements.folderUrlInput).data( + 'originValue', + dictDataSrc.csv_detail.directory, + ); + } + $(csvResourceElements.isFilePathHidden).val( + dictDataSrc.csv_detail.is_file_path, + ); + + // Update default delimiter radio button by DB_CONFIGS + if (dictDataSrc.csv_detail.delimiter === 'CSV') { + $(csvResourceElements.csv)[0].checked = true; + } else if (dictDataSrc.csv_detail.delimiter === 'TSV') { + $(csvResourceElements.tsv)[0].checked = true; + } else if (dictDataSrc.csv_detail.delimiter === 'SMC') { + $(csvResourceElements.smc)[0].checked = true; + } else { + $(csvResourceElements.fileTypeAuto)[0].checked = true; + } + // line skipping + const skipHead = dictDataSrc.csv_detail.skip_head; + const isDummyHeader = dictDataSrc.csv_detail.dummy_header; + const lineSkip = + skipHead == 0 && !isDummyHeader ? '' : skipHead; + $(csvResourceElements.skipHead).val(lineSkip); + $(csvResourceElements.csvNRows).val( + dictDataSrc.csv_detail.n_rows, + ); + $(csvResourceElements.csvIsTranspose).prop( + 'checked', + !!dictDataSrc.csv_detail.is_transpose, + ); + + // load optional function + if (dictDataSrc.csv_detail.etl_func) { + $(csvResourceElements.optionalFunction) + .select2() + .val(dictDataSrc.csv_detail.etl_func) + .trigger('change'); + } } - // Update default delimiter radio button by DB_CONFIGS - if (dictDataSrc.csv_detail.delimiter === 'CSV') { - $(csvResourceElements.csv)[0].checked = true; - } else if (dictDataSrc.csv_detail.delimiter === 'TSV') { - $(csvResourceElements.tsv)[0].checked = true; - } else if (dictDataSrc.csv_detail.delimiter === 'SMC') { - $(csvResourceElements.smc)[0].checked = true; + // load master name + comment + $('#csvDBSourceName').val(dictDataSrc.name); + $('#csvComment').val(dictDataSrc.comment); + + // for V2 datasource + $(dbElements.v2ProcessDiv).hide(); + if (DB_CONFIGS.V2.configs.type === selectedDatabaseType) { + domModalPrefix = 'csv'; + $(dbElements.v2ProcessDiv).show(); + // change title to V2 CSV + dbElements.CSVTitle.text( + dbElements.CSVTitle.text().replace('CSV/TSV', 'V2 CSV'), + ); + // hide skip line + $(csvResourceElements.skipHead).parent().hide(); + // hide csv nrows + $(csvResourceElements.csvNRows).parent().hide(); + // hide transpose + $(csvResourceElements.csvIsTranspose).parent().hide(); + + let processList = []; + if (dictDataSrc.csv_detail.process_name) { + processList.push(dictDataSrc.csv_detail.process_name); + } + // add empty process + addProcessList(processList, processList, processList); + $(`#modal-db-${domModalPrefix} .saveDBInfoBtn`).attr( + 'data-isV2', + true, + ); + $(`.saveDBInfoBtn`).attr('data-isV2', true); + $(csvResourceElements.showResourcesBtnId).attr( + 'data-isV2', + true, + ); } else { - $(csvResourceElements.fileTypeAuto)[0].checked = true; - } - // line skipping - const skipHead = dictDataSrc.csv_detail.skip_head; - const isDummyHeader = dictDataSrc.csv_detail.dummy_header; - const lineSkip = skipHead == 0 && !isDummyHeader ? '' : skipHead; - $(csvResourceElements.skipHead).val(lineSkip); - $(csvResourceElements.csvNRows).val(dictDataSrc.csv_detail.n_rows); - $(csvResourceElements.csvIsTranspose).prop('checked', !!dictDataSrc.csv_detail.is_transpose); - - // load optional function - if (dictDataSrc.csv_detail.etl_func) { - $(csvResourceElements.optionalFunction) - .select2() - .val(dictDataSrc.csv_detail.etl_func) - .trigger('change'); + // change title to csv / tsv + dbElements.CSVTitle.text( + dbElements.CSVTitle.text().replace('V2 CSV', 'CSV/TSV'), + ); + // show skip line + $(csvResourceElements.skipHead).parent().show(); + // show csv nrows + $(csvResourceElements.csvNRows).parent().show(); + // show transpose + $(csvResourceElements.csvIsTranspose).parent().show(); } + break; } - - // load master name + comment - $('#csvDBSourceName') - .val(dictDataSrc.name); - $('#csvComment') - .val(dictDataSrc.comment); - - // for V2 datasource - $(dbElements.v2ProcessDiv).hide(); - if (DB_CONFIGS.V2.configs.type === selectedDatabaseType) { - domModalPrefix = 'csv'; - $(dbElements.v2ProcessDiv).show(); - // change title to V2 CSV - dbElements.CSVTitle.text(dbElements.CSVTitle.text().replace('CSV/TSV', 'V2 CSV')); - // hide skip line - $(csvResourceElements.skipHead).parent().hide(); - // hide csv nrows - $(csvResourceElements.csvNRows).parent().hide(); - // hide transpose - $(csvResourceElements.csvIsTranspose).parent().hide(); - - let processList = [] - if (dictDataSrc.csv_detail.process_name) { - processList.push(dictDataSrc.csv_detail.process_name) + default: { + if (!dictDataSrc.db_detail) { + break; } - // add empty process - addProcessList(processList, processList, processList); - $(`#modal-db-${domModalPrefix} .saveDBInfoBtn`).attr('data-isV2', true); - $(`.saveDBInfoBtn`).attr('data-isV2', true); - $(csvResourceElements.showResourcesBtnId).attr('data-isV2', true); - } else { - // change title to csv / tsv - dbElements.CSVTitle.text(dbElements.CSVTitle.text().replace('V2 CSV', 'CSV/TSV')); - // show skip line - $(csvResourceElements.skipHead).parent().show(); - // show csv nrows - $(csvResourceElements.csvNRows).parent().show(); - // show transpose - $(csvResourceElements.csvIsTranspose).parent().show(); - } - break; - } - default: { - if (!dictDataSrc.db_detail) { + + // Todo: Refactor Modal's inputs ID + $(`#${domModalPrefix}_dbsourcename`).val(dictDataSrc.name); + $(`#${domModalPrefix}_comment`).val(dictDataSrc.comment); + $(`#${domModalPrefix}_host`).val(dictDataSrc.db_detail.host); + $(`#${domModalPrefix}_port`).val(dictDataSrc.db_detail.port); + $(`#${domModalPrefix}_dbname`).val(dictDataSrc.db_detail.dbname); + $(`#${domModalPrefix}_schema`).val(dictDataSrc.db_detail.schema); + $(`#${domModalPrefix}_username`).val( + dictDataSrc.db_detail.username, + ); + $(`#${domModalPrefix}_password`).val( + dictDataSrc.db_detail.password, + ); + $(`#${domModalPrefix}_use_os_timezone`).val( + dictDataSrc.db_detail.use_os_timezone, + ); + $(eles.useOSTZOption).prop( + 'checked', + dictDataSrc.db_detail.use_os_timezone, + ); + $(eles.useOSTZOption).data( + 'previous-value', + dictDataSrc.db_detail.use_os_timezone, + ); + + const dbTypeLower = dictDataSrc.type + ? dictDataSrc.type.toLowerCase() + : ''; + $(eles.useOSTZConfirmBtn).data('dbType', dbTypeLower); break; } - - // Todo: Refactor Modal's inputs ID - $(`#${domModalPrefix}_dbsourcename`) - .val(dictDataSrc.name); - $(`#${domModalPrefix}_comment`) - .val(dictDataSrc.comment); - $(`#${domModalPrefix}_host`) - .val(dictDataSrc.db_detail.host); - $(`#${domModalPrefix}_port`) - .val(dictDataSrc.db_detail.port); - $(`#${domModalPrefix}_dbname`) - .val(dictDataSrc.db_detail.dbname); - $(`#${domModalPrefix}_schema`) - .val(dictDataSrc.db_detail.schema); - $(`#${domModalPrefix}_username`) - .val(dictDataSrc.db_detail.username); - $(`#${domModalPrefix}_password`) - .val(dictDataSrc.db_detail.password); - $(`#${domModalPrefix}_use_os_timezone`) - .val(dictDataSrc.db_detail.use_os_timezone); - $(eles.useOSTZOption) - .prop('checked', dictDataSrc.db_detail.use_os_timezone); - $(eles.useOSTZOption) - .data('previous-value', dictDataSrc.db_detail.use_os_timezone); - - const dbTypeLower = dictDataSrc.type ? dictDataSrc.type.toLowerCase() : ''; - $(eles.useOSTZConfirmBtn) - .data('dbType', dbTypeLower); - break; } - } - // TODO: refactor modal ID - $(`#modal-db-${domModalPrefix} input`) - .data('itemId', dictDataSrc.id); - $(`#modal-db-${domModalPrefix} select`) - .data('itemId', dictDataSrc.id); - $(`#modal-db-${domModalPrefix} .saveDBInfoBtn`) - .data('itemId', dictDataSrc.id); - $(`#modal-db-${domModalPrefix} .saveDBInfoBtn`) - .data('dbType', dictDataSrc.type); - $(`#modal-db-${domModalPrefix}`) - .modal('show'); + $(`#modal-db-${domModalPrefix} input`).data('itemId', dictDataSrc.id); + $(`#modal-db-${domModalPrefix} select`).data('itemId', dictDataSrc.id); + $(`#modal-db-${domModalPrefix} .saveDBInfoBtn`).data( + 'itemId', + dictDataSrc.id, + ); + $(`#modal-db-${domModalPrefix} .saveDBInfoBtn`).data( + 'dbType', + dictDataSrc.type, + ); + $(`#modal-db-${domModalPrefix}`).modal('show'); addAttributeToElement(); }; const checkDBConnection = (dbType, html, msgID) => { // reset connection status text - $(`#${msgID}`) - .html(''); - $(`#${msgID}`) - .addClass('spinner-grow'); - $(`#${msgID}`) - .removeClass('text-danger'); - $(`#${msgID}`) - .removeClass('text-success'); + $(`#${msgID}`).html(''); + $(`#${msgID}`).addClass('spinner-grow'); + $(`#${msgID}`).removeClass('text-danger'); + $(`#${msgID}`).removeClass('text-success'); // get form data const data = { @@ -1554,24 +1612,21 @@ const checkDBConnection = (dbType, html, msgID) => { let dbName = ''; if (dbType === DB_CONFIGS.SQLITE.configs.type) { - const filePath = $(`#${dbType}_dbname`) - .val(); + const filePath = $(`#${dbType}_dbname`).val(); dbName = filePath; } else { - dbName = $(`#modal-db-${dbType} input[name="${dbType}_dbname"]`) - .val(); + dbName = $(`#modal-db-${dbType} input[name="${dbType}_dbname"]`).val(); } Object.assign(data.db, { - host: $(`#modal-db-${dbType} input[name="${dbType}_host"]`) - .val(), - port: $(`#modal-db-${dbType} input[name="${dbType}_port"]`) - .val(), - schema: $(`#modal-db-${dbType} input[name="${dbType}_schema"]`) - .val(), - username: $(`#modal-db-${dbType} input[name="${dbType}_username"]`) - .val(), - password: $(`#modal-db-${dbType} input[name="${dbType}_password"]`) - .val(), + host: $(`#modal-db-${dbType} input[name="${dbType}_host"]`).val(), + port: $(`#modal-db-${dbType} input[name="${dbType}_port"]`).val(), + schema: $(`#modal-db-${dbType} input[name="${dbType}_schema"]`).val(), + username: $( + `#modal-db-${dbType} input[name="${dbType}_username"]`, + ).val(), + password: $( + `#modal-db-${dbType} input[name="${dbType}_password"]`, + ).val(), dbname: dbName, db_type: dbType, }); @@ -1584,8 +1639,7 @@ const checkDBConnection = (dbType, html, msgID) => { }, body: JSON.stringify(data), }) - .then(response => response.clone() - .json()) + .then((response) => response.clone().json()) .then((json) => { displayTestDBConnectionMessage(msgID, json.flask_message); }); @@ -1593,74 +1647,85 @@ const checkDBConnection = (dbType, html, msgID) => { const loadDetail = (self) => { // save current data source tr element - currentDSTR = $(self) - .closest('tr'); + currentDSTR = $(self).closest('tr'); const dataSrcId = currentDSTR.attr(csvResourceElements.dataSrcId); - const dsType = currentDSTR.find('select[name="type"]') - .val(); + const dsType = currentDSTR.find('select[name="type"]').val(); // When click (+) to create blank item if (dataSrcId === null || dataSrcId === undefined) { let jsonDictDataSrc = {}; switch (dsType) { - case DB_CONFIGS.SQLITE.configs.type: { - jsonDictDataSrc = { - id: null, - comment: '', - db_detail: DB_CONFIGS.SQLITE.configs, - }; - break; - } - case DB_CONFIGS.POSTGRESQL.configs.type: { - jsonDictDataSrc = { - id: null, - comment: '', - db_detail: DB_CONFIGS.POSTGRESQL.configs, - }; - break; - } - case DB_CONFIGS.MSSQL.configs.type: { - jsonDictDataSrc = { - id: null, - comment: '', - db_detail: DB_CONFIGS.MSSQL.configs, - }; - break; - } - case DB_CONFIGS.ORACLE.configs.type: { - jsonDictDataSrc = { - id: null, - comment: '', - db_detail: DB_CONFIGS.ORACLE.configs, - }; - break; - } - case DB_CONFIGS.MYSQL.configs.type: { - jsonDictDataSrc = { - id: null, - comment: '', - db_detail: DB_CONFIGS.MYSQL.configs, - }; - break; - } - case DB_CONFIGS.CSV.configs.type: { - jsonDictDataSrc = { - id: null, - comment: '', - csv_detail: DB_CONFIGS.CSV.configs, - }; - break; - } - case DB_CONFIGS.V2.configs.type: { - jsonDictDataSrc = { - id: null, comment: '', csv_detail: DB_CONFIGS.CSV.configs, - }; - break; - } + case DB_CONFIGS.SQLITE.configs.type: { + jsonDictDataSrc = { + id: null, + comment: '', + db_detail: DB_CONFIGS.SQLITE.configs, + }; + break; + } + case DB_CONFIGS.POSTGRESQL.configs.type: { + jsonDictDataSrc = { + id: null, + comment: '', + db_detail: DB_CONFIGS.POSTGRESQL.configs, + }; + break; + } + case DB_CONFIGS.MSSQL.configs.type: { + jsonDictDataSrc = { + id: null, + comment: '', + db_detail: DB_CONFIGS.MSSQL.configs, + }; + break; + } + case DB_CONFIGS.ORACLE.configs.type: { + jsonDictDataSrc = { + id: null, + comment: '', + db_detail: DB_CONFIGS.ORACLE.configs, + }; + break; + } + case DB_CONFIGS.MYSQL.configs.type: { + jsonDictDataSrc = { + id: null, + comment: '', + db_detail: DB_CONFIGS.MYSQL.configs, + }; + break; + } + case DB_CONFIGS.CSV.configs.type: { + jsonDictDataSrc = { + id: null, + comment: '', + csv_detail: DB_CONFIGS.CSV.configs, + }; + break; + } + case DB_CONFIGS.V2.configs.type: { + jsonDictDataSrc = { + id: null, + comment: '', + csv_detail: DB_CONFIGS.CSV.configs, + }; + break; + } + case DB_CONFIGS.SOFTWARE_WORKSHOP.configs.type: { + jsonDictDataSrc = { + id: null, + comment: '', + db_detail: DB_CONFIGS.SOFTWARE_WORKSHOP.configs, + }; + break; + } } bindDBItemToModal(dsType, jsonDictDataSrc); } else { - const url = new URL(`${csvResourceElements.apiLoadDetail}/${dataSrcId}`, window.location.href).href; + const url = new URL( + `${csvResourceElements.apiLoadDetail}/${dataSrcId}`, + window.location.href, + ).href; fetch(url, { method: 'GET', headers: { @@ -1668,8 +1733,7 @@ const loadDetail = (self) => { 'Content-Type': 'application/json', }, }) - .then(response => response.clone() - .json()) + .then((response) => response.clone().json()) .then((json) => { if (json) { bindDBItemToModal(dsType, json); @@ -1684,34 +1748,37 @@ const searchDataSourceName = (element) => { // when input nothing or only white space characters, show all data source in list if (inputDataSourceName.length === 0) { - $('input[name="name"]') - .each(function () { - $(this.closest('tr[name="db-info"]')) - .show(); - }); + $('input[name="name"]').each(function () { + $(this.closest('tr[name="db-info"]')).show(); + }); return; } // find and show data source who's name is same with user input - $('input[name="name"]') - .each(function () { - const currentRow = $(this.closest('tr[name="db-info"]')); - if (this.value.match(inputDataSourceName)) currentRow.show(); else currentRow.hide(); - }); + $('input[name="name"]').each(function () { + const currentRow = $(this.closest('tr[name="db-info"]')); + if (this.value.match(inputDataSourceName)) currentRow.show(); + else currentRow.hide(); + }); }; const getCheckedV2Processes = (name = 'v2Process') => { - return [...$(`input[name=${name}]:checked`).map((i, el) => $(el).val())].filter(val => val !== 'All'); + return [ + ...$(`input[name=${name}]:checked`).map((i, el) => $(el).val()), + ].filter((val) => val !== 'All'); }; const getV2ProcessData = (dictDataSrc) => { const v2Datasources = []; const v2SelectedProcess = getCheckedV2Processes(); if (v2SelectedProcess.length) { - v2SelectedProcess.forEach(processName => { - const subDatasourceByProcess = JSON.parse(JSON.stringify(dictDataSrc)); - const suffix = processName === DUMMY_V2_PROCESS_NAME ? '' : `_${processName}`; + v2SelectedProcess.forEach((processName) => { + const subDatasourceByProcess = JSON.parse( + JSON.stringify(dictDataSrc), + ); + const suffix = + processName === DUMMY_V2_PROCESS_NAME ? '' : `_${processName}`; subDatasourceByProcess.name = `${subDatasourceByProcess.name}${suffix}`; subDatasourceByProcess.csv_detail.process_name = processName; subDatasourceByProcess.csv_detail.auto_link = false; @@ -1723,94 +1790,88 @@ const getV2ProcessData = (dictDataSrc) => { $(() => { // drag & drop for tables - $(`#${dbElements.tblDbConfig} tbody`) - .sortable({ - helper: dragDropRowInTable.fixHelper, - update: dragDropRowInTable.updateOrder, - }); + $(`#${dbElements.tblDbConfig} tbody`).sortable({ + helper: dragDropRowInTable.fixHelper, + update: dragDropRowInTable.updateOrder, + }); // resort table dragDropRowInTable.sortRowInTable(dbElements.tblDbConfig); - $(csvResourceElements.connectResourceBtn) - .on('click', () => { - $(csvResourceElements.alertInternalError).hide(); - const folderUrl = $(csvResourceElements.folderUrlInput) - .val(); - checkFolderResources(folderUrl); - }); - $(csvResourceElements.showResourcesBtnId) - .on('click', () => { - $('#resourceLoading') - .show(); - showResources(); - }); + $(csvResourceElements.connectResourceBtn).on('click', () => { + $(csvResourceElements.alertInternalError).hide(); + const folderUrl = $(csvResourceElements.folderUrlInput).val(); + const originFolderUrl = $(csvResourceElements.folderUrlInput).data( + 'originValue', + ); + checkFolderResources(folderUrl, originFolderUrl).then(() => {}); + }); + $(csvResourceElements.showResourcesBtnId).on('click', () => { + $('#resourceLoading').show(); + showResources(); + }); - $(csvResourceElements.csvConfirmRegister) - .on('click', (e) => { - saveCSVDataSource(); - }); + $(csvResourceElements.csvConfirmRegister).on('click', (e) => { + saveCSVDataSource().then(() => {}); + }); // Multiple modal - $(document) - .on('show.bs.modal', '.modal', (e) => { - const zIndex = 1040 + (10 * $('.modal:visible').length); - $(e.currentTarget) - .css('z-index', zIndex); - setTimeout(() => { - $('.modal-backdrop') - .not('.modal-stack') - .css('z-index', zIndex - 1) - .addClass('modal-stack'); - }, 0); - }); + $(document).on('show.bs.modal', '.modal', (e) => { + const zIndex = 1040 + 10 * $('.modal:visible').length; + $(e.currentTarget).css('z-index', zIndex); + setTimeout(() => { + $('.modal-backdrop') + .not('.modal-stack') + .css('z-index', zIndex - 1) + .addClass('modal-stack'); + }, 0); + }); // add an empty db row if there is no db config setTimeout(() => { - const countDataSource = $(`${dbElements.tblDbConfigID} tbody tr[name=db-info]`).length; + const countDataSource = $( + `${dbElements.tblDbConfigID} tbody tr[name=db-info]`, + ).length; if (!countDataSource) { addDBConfigRow(); } }, 500); - $(dbElements.divDbConfig)[0].addEventListener('mouseup', handleMouseUp, false); - - $(dbConfigElements.csvDBSourceName) - .on('mouseup', () => { - userEditedDSName = true; - }); - $(csvResourceElements.folderUrlId) - .on('change', (e) => { - const fileName = $(e.currentTarget) - .val() - .replace(/"/g, ''); - e.target.value = fileName; - const dbsName = $(dbConfigElements.csvDBSourceName).val(); - if (!userEditedDSName || !dbsName) { - const fullPath = fileName.replace(/\\/g, '//'); - const lastFolderName = fullPath.match(/([^\/]*)\/*$/)[1]; - // autogen datasource name by latest folder name - $(dbConfigElements.csvDBSourceName) - .val(lastFolderName); - } - }); + $(dbElements.divDbConfig)[0].addEventListener( + 'mouseup', + handleMouseUp, + false, + ); + + $(dbConfigElements.csvDBSourceName).on('mouseup', () => { + userEditedDSName = true; + }); + $(csvResourceElements.folderUrlId).on('change', (e) => { + const fileName = $(e.currentTarget).val().replace(/"/g, ''); + e.target.value = fileName; + const dbsName = $(dbConfigElements.csvDBSourceName).val(); + const existingDSID = $(dbConfigElements.csvDBSourceName).data('itemId'); + if (!existingDSID && (!userEditedDSName || !dbsName)) { + const fullPath = fileName.replace(/\\/g, '//'); + const lastFolderName = fullPath.match(/([^/]*)\/*$/)[1]; + // autogen datasource name by latest folder name + $(dbConfigElements.csvDBSourceName).val(lastFolderName); + } + }); // add event to dbElements.txbSearchDataSourceName - $(dbElements.txbSearchDataSourceName) - .keyup(searchDataSourceName); + $(dbElements.txbSearchDataSourceName).keyup(searchDataSourceName); // convert skipHead to blank if value is out of range - $(csvResourceElements.skipHead) - .on('change', (ele) => { - const skipHead = $(ele.currentTarget); - if (skipHead.is(':out-of-range')) { - skipHead.val(''); - } - }); + $(csvResourceElements.skipHead).on('change', (ele) => { + const skipHead = $(ele.currentTarget); + if (skipHead.is(':out-of-range')) { + skipHead.val(''); + } + }); // searchDataSource onSearchTableContent('searchDataSource', 'tblDbConfig'); onSearchTableContent('searchProcConfig', 'tblProcConfig'); sortableTable('tblDbConfig', [0, 1, 2, 4], 510, true); sortableTable('tblProcConfig', [0, 1, 2, 3, 5], 510, true); - }); diff --git a/ap/static/setting_module/js/failed_cast_data_modal.js b/ap/static/setting_module/js/failed_cast_data_modal.js index 7e54cde..8ad2b3c 100644 --- a/ap/static/setting_module/js/failed_cast_data_modal.js +++ b/ap/static/setting_module/js/failed_cast_data_modal.js @@ -27,23 +27,23 @@ class FailedCastDataModal { constructor() { this.Elements = {}; - for (const [key, id] of Object.entries(FailedCastDataModal.ElementIds)) { - Object.defineProperty( - this.Elements, - key, - { - get: function () { - return document.getElementById(id); - } - } - ); + for (const [key, id] of Object.entries( + FailedCastDataModal.ElementIds, + )) { + Object.defineProperty(this.Elements, key, { + get: function () { + return document.getElementById(id); + }, + }); } this.#Events = { btnOk: function (event) { - $(event.currentTarget).closest(`#${FailedCastDataModal.ElementIds.modal}`).modal('hide'); - } - } + $(event.currentTarget) + .closest(`#${FailedCastDataModal.ElementIds.modal}`) + .modal('hide'); + }, + }; } /** @@ -53,7 +53,9 @@ class FailedCastDataModal { */ init(data, errorMessage = '') { this.Elements.alertFailedCaseDataErrorMsg.textContent = errorMessage; - this.Elements.alertFailedCaseDataErrorDiv.style.display = (errorMessage) ? 'block' : 'none'; + this.Elements.alertFailedCaseDataErrorDiv.style.display = errorMessage + ? 'block' + : 'none'; this.Elements.columnsBox.innerHTML = this.#generateHTML(data); this.#injectEvents(); @@ -83,11 +85,13 @@ class FailedCastDataModal { \t
      `; let valuesHTML = ''; - dataList.forEach(value => valuesHTML += this.#generateValueHTML(value)); + dataList.forEach( + (value) => (valuesHTML += this.#generateValueHTML(value)), + ); html += valuesHTML; html += `\t
      -
      ` +
      `; } return html; @@ -108,7 +112,11 @@ class FailedCastDataModal { * Add event to related elements on modal */ #injectEvents() { - this.Elements.btnOk.removeEventListener('click', this.#Events.btnOk, false); + this.Elements.btnOk.removeEventListener( + 'click', + this.#Events.btnOk, + false, + ); this.Elements.btnOk.addEventListener('click', this.#Events.btnOk); } } diff --git a/ap/static/setting_module/js/function_config_modals.js b/ap/static/setting_module/js/function_config_modals.js index 0294dbb..023956c 100644 --- a/ap/static/setting_module/js/function_config_modals.js +++ b/ap/static/setting_module/js/function_config_modals.js @@ -1,4 +1,3 @@ -/* eslint-disable no-unused-vars */ /** * @file Contain all common functions to serve handling functions that relate to page. * @author Nguyen Huu Tuan @@ -13,6 +12,7 @@ const TAB_CHAR = '\t'; const NEW_LINE_CHAR = '\n'; const BORDER_RED_CLASS = 'column-name-invalid'; +const CLASSES_FUNCTION = 'sample-data show-raw-text'; const ARRAY_ANS = ['a', 'n', 's']; const ARRAY_BK = ['b', 'k']; const ARRAY_CT = ['c', 't']; @@ -23,12 +23,18 @@ const functionConfigElements = { functionSettingModal: document.getElementById('functionSettingModal'), /** @type HTMLSelectElement */ functionNameElement: document.getElementById('functionName'), + /** @type HTMLTableElement */ + functionDetailsElement: document.getElementById('functionDetails'), /** @type HTMLSpanElement */ outputElement: document.querySelector('#functionOutput span'), /** @type HTMLInputElement */ - systemNameElement: document.querySelector('#functionColumnSystemName input'), + systemNameElement: document.querySelector( + '#functionColumnSystemName input', + ), /** @type HTMLInputElement */ - japaneseNameElement: document.querySelector('#functionColumnJapaneseName input'), + japaneseNameElement: document.querySelector( + '#functionColumnJapaneseName input', + ), /** @type HTMLInputElement */ localNameElement: document.querySelector('#functionColumnLocalName input'), /** @type HTMLSelectElement */ @@ -40,46 +46,69 @@ const functionConfigElements = { /** @type HTMLInputElement */ varYLabelElement: document.querySelector('#functionVarY label'), /** @type HTMLInputElement */ - coeANSElement: document.querySelector('#functionCoeANS input[name="functionCoeANS"]'), + coeANSElement: document.querySelector( + '#functionCoeANS input[name="functionCoeANS"]', + ), /** @type HTMLLabelElement */ coeANSLabelElement: document.querySelector('#functionCoeANS label'), /** @type HTMLInputElement */ - coeBKElement: document.querySelector('#functionCoeBK input[name="functionCoeBK"]'), + coeBKElement: document.querySelector( + '#functionCoeBK input[name="functionCoeBK"]', + ), /** @type HTMLLabelElement */ coeBKLabelElement: document.querySelector('#functionCoeBK label'), /** @type HTMLInputElement */ - coeCTElement: document.querySelector('#functionCoeCT input[name="functionCoeCT"]'), + coeCTElement: document.querySelector( + '#functionCoeCT input[name="functionCoeCT"]', + ), /** @type HTMLLabelElement */ coeCTLabelElement: document.querySelector('#functionCoeCT label'), /** @type HTMLTextAreaElement */ noteElement: document.querySelector('#functionNote textarea'), /** @type HTMLInputElement */ - xSampleDataLabel: document.querySelector('#functionSampleData th[name="xSampleData"]'), + xSampleDataLabel: document.querySelector( + '#functionSampleData th[name="xSampleData"]', + ), /** @type HTMLInputElement */ helperMessageElement: document.getElementById('functionMessageHelper'), - /** @type HTMLTableElement */ + /** @type {HTMLTableElement & {result: string[]}} */ sampleDataElement: document.getElementById('functionSampleData'), /** @type HTMLTableElement */ functionTableElement: document.getElementById('functionTable'), /** @type HTMLSpanElement */ - totalCheckedFunctionColumnsElement: document.getElementById('totalCheckedFunctionColumns'), + totalCheckedFunctionColumnsElement: document.getElementById( + 'totalCheckedFunctionColumns', + ), /** @type HTMLSpanElement */ - totalFunctionColumnsElement: document.getElementById('totalFunctionColumns'), + totalFunctionColumnsElement: document.getElementById( + 'totalFunctionColumns', + ), /** @type HTMLSpanElement */ - functionUserSettingTableModal: document.getElementById('functionUserSettingModal'), + functionUserSettingTableModal: document.getElementById( + 'functionUserSettingModal', + ), /** @type HTMLSpanElement */ - functionUserSettingTableBody: document.querySelector('#functionUserSettingModal table[id=functionUserSettingTable] tbody'), + functionUserSettingTableBody: document.querySelector( + '#functionUserSettingModal table[id=functionUserSettingTable] tbody', + ), /** @type HTMLInputElement */ - selectAllFunctionColumns: document.getElementById('selectAllFunctionColumns'), + selectAllFunctionColumns: document.getElementById( + 'selectAllFunctionColumns', + ), /** @type HTMLInputElement */ - selectErrorFunctionColumns: document.getElementById('selectErrorFunctionColumns'), + selectErrorFunctionColumns: document.getElementById( + 'selectErrorFunctionColumns', + ), /** @type HTMLDivElement */ - functionConfigConfirmSwitchEditingRowModal: document.getElementById('functionConfigConfirmSwitchEditingRowModal'), + functionConfigConfirmSwitchEditingRowModal: document.getElementById( + 'functionConfigConfirmSwitchEditingRowModal', + ), /** * In first load, i element will be changed to svg element * @type {function(): HTMLOrSVGElement} * */ - settingChangeMark: () => document.getElementById('functionSettingChangeMark'), + settingChangeMark: () => + document.getElementById('functionSettingChangeMark'), /** @type HTMLDivElement */ collapseFunctionConfig: document.getElementById('collapseFunctionConfig'), @@ -98,23 +127,43 @@ const functionConfigElements = { /** @type HTMLButtonElement */ deleteBtn: document.getElementById('functionConfigModalDeleteBtn'), /** @type HTMLButtonElement */ + downloadAllBtn: document.getElementById( + 'functionConfigModalDownloadAllBtn', + ), + /** @type HTMLButtonElement */ copyAllBtn: document.getElementById('functionConfigModalCopyAllBtn'), /** @type HTMLButtonElement */ pasteAllBtn: document.getElementById('functionConfigModalPasteAllBtn'), /** @type HTMLButtonElement */ + downloadSampleDataBtn: document.getElementById( + 'downloadFunctionDataSampleBtn', + ), + /** @type HTMLButtonElement */ + copySampleDataBtn: document.getElementById('copyFunctionDataSampleBtn'), + /** @type HTMLButtonElement */ registerBtn: document.getElementById('functionConfigModalRegisterBtn'), /** @type HTMLButtonElement */ reloadBtn: document.getElementById('reloadFunctionBtn'), /** @type HTMLAnchorElement */ confirmSwitchEditingRow: document.getElementById('confirmSwitchEditingRow'), /** @type HTMLInputElement */ - searchFunctionNameInput: document.getElementById('functionSearchFunctionNameInput'), + searchFunctionNameInput: document.getElementById( + 'functionSearchFunctionNameInput', + ), functionNameTableElement: document.getElementById('functionNameDetails'), - existFunctionSearchInput: document.getElementById('existFunctionSearchInput'), - functionUserSettingTableElement: document.getElementById('functionUserSettingTable'), + existFunctionSearchInput: document.getElementById( + 'existFunctionSearchInput', + ), + functionUserSettingTableElement: document.getElementById( + 'functionUserSettingTable', + ), /** @type HTMLInputElement */ - deleteFunctionColumnTableBody: document.getElementById('deleteFunctionColumn'), - deleteFunctionColumnTableElement: document.getElementById('deleteFunctionColumnTable'), + deleteFunctionColumnTableBody: document.getElementById( + 'deleteFunctionColumn', + ), + deleteFunctionColumnTableElement: document.getElementById( + 'deleteFunctionColumnTable', + ), }; /** @@ -219,6 +268,7 @@ class FunctionInfo { varX = null, varY = null, index = null, + shownName = '', } = functionInfo; this.functionName = functionName; @@ -232,20 +282,31 @@ class FunctionInfo { this.coeBK = coeBK; this.coeCT = coeCT; this.note = note; - // format function sample data - this.sampleDatas = sampleDatas.map(val => applySignificantDigit(val)); + this.sampleDatas = sampleDatas; this.isChecked = isChecked; this.isMeFunction = functionName.startsWith('me.'); /** @type ?number */ - this.processColumnId = !(isNaN(processColumnId) || processColumnId == null || processColumnId === '') + this.processColumnId = !( + isNaN(processColumnId) || + processColumnId == null || + processColumnId === '' + ) ? parseInt(processColumnId, 10) : null; /** @type ?number */ - this.functionColumnId = !(isNaN(functionColumnId) || functionColumnId == null || functionColumnId === '') + this.functionColumnId = !( + isNaN(functionColumnId) || + functionColumnId == null || + functionColumnId === '' + ) ? parseInt(functionColumnId, 10) : null; /** @type ?number */ - this.functionId = !(isNaN(functionId) || functionId == null || functionId === '') + this.functionId = !( + isNaN(functionId) || + functionId == null || + functionId === '' + ) ? parseInt(functionId, 10) : null; /** @type ?number */ @@ -260,6 +321,61 @@ class FunctionInfo { this.index = !(isNaN(index) || index == null || index === '') ? parseInt(index, 10) : null; + + this.shownName = isJPLocale + ? this.japaneseName + : this.localName || this.systemName; + } + + /** + * Format sample data + * @return {(float|string|undefined)[]} - a list contains formated data + */ + formatedSampleDatas() { + return this.sampleDatas.map((val) => { + let formatedValue; + try { + if (!/^-?\d*\.?\d*$/.test(val) || val == null || val === '') { + return ''; + } + + const numberStr = val.includes('.') + ? parseFloat(val) + : parseInt(val); + formatedValue = applySignificantDigit(numberStr); + } catch (e) { + formatedValue = val; + } + return formatedValue ?? ''; + }); + } + + /** + * Check if current function is empty + * @return {boolean} + */ + isEmpty() { + const functionIsEmpty = + this.functionId == null || isNaN(this.functionId); + const outputIsEmpty = this.output === ''; + const nameIsEmpty = + this.systemName == '' && + this.japaneseName === '' && + this.localName === ''; + const varXIsEmpty = this.varX == null || isNaN(this.varX); + const varYIsEmpty = this.varY == null || isNaN(this.varY); + const coeIsEmpty = + this.coeANS === '' && this.coeBK === '' && this.coeCT == ''; + const noteIsEmpty = this.note === ''; + return ( + functionIsEmpty && + outputIsEmpty && + nameIsEmpty && + varXIsEmpty && + varYIsEmpty && + coeIsEmpty && + noteIsEmpty + ); } /** @@ -269,21 +385,22 @@ class FunctionInfo { */ isEqual(functionInfo) { return ( - this.functionName === functionInfo.functionName - && this.output === functionInfo.output - && this.systemName === functionInfo.systemName - && this.japaneseName === functionInfo.japaneseName - && this.localName === functionInfo.localName - && this.coeANS === functionInfo.coeANS - && this.coeBK === functionInfo.coeBK - && this.coeCT === functionInfo.coeCT - && this.note === functionInfo.note - && this.isMeFunction === functionInfo.isMeFunction - && this.processColumnId === functionInfo.processColumnId - && this.functionColumnId === functionInfo.functionColumnId - && this.functionId === functionInfo.functionId - && this.varX === functionInfo.varX - && this.varY === functionInfo.varY + this.functionName === functionInfo.functionName && + // we don't check output because this is not something user can modify + // this.output === functionInfo.output && + this.systemName === functionInfo.systemName && + this.japaneseName === functionInfo.japaneseName && + this.localName === functionInfo.localName && + this.coeANS === functionInfo.coeANS && + this.coeBK === functionInfo.coeBK && + this.coeCT === functionInfo.coeCT && + this.note === functionInfo.note && + this.isMeFunction === functionInfo.isMeFunction && + this.processColumnId === functionInfo.processColumnId && + this.functionColumnId === functionInfo.functionColumnId && + this.functionId === functionInfo.functionId && + this.varX === functionInfo.varX && + this.varY === functionInfo.varY ); } @@ -292,11 +409,20 @@ class FunctionInfo { * @return {FunctionInfo} - a dictionary that contain function information */ static collectInputFunctionInfo() { - const index = functionConfigElements.functionNameElement.dataset.index ?? ''; - let processColumnId = functionConfigElements.functionNameElement.dataset.processColumnId ?? ''; - const functionColumnId = functionConfigElements.functionNameElement.dataset.functionColumnId ?? ''; - const dataType = functionConfigElements.functionNameElement.dataset.dataType ?? ''; - const selectedFunctionElement = functionConfigElements.functionNameElement.querySelector('option:checked'); + const index = + functionConfigElements.functionNameElement.dataset.index ?? ''; + let processColumnId = + functionConfigElements.functionNameElement.dataset + .processColumnId ?? ''; + const functionColumnId = + functionConfigElements.functionNameElement.dataset + .functionColumnId ?? ''; + const dataType = + functionConfigElements.functionNameElement.dataset.dataType ?? ''; + const selectedFunctionElement = + functionConfigElements.functionNameElement.querySelector( + 'option:checked', + ); let [functionId, functionName] = ['', '']; if (selectedFunctionElement != null) { functionId = selectedFunctionElement.value.trim(); @@ -304,11 +430,14 @@ class FunctionInfo { } const [, output] = FunctionInfo.getOutputDataType(); - const systemName = functionConfigElements.systemNameElement.value.trim(); - const japaneseName = functionConfigElements.japaneseNameElement.value.trim(); + const systemName = + functionConfigElements.systemNameElement.value.trim(); + const japaneseName = + functionConfigElements.japaneseNameElement.value.trim(); const localName = functionConfigElements.localNameElement.value.trim(); - const selectedVarXElement = functionConfigElements.varXElement.querySelector('option:checked'); + const selectedVarXElement = + functionConfigElements.varXElement.querySelector('option:checked'); let varX; let varXName; if (selectedVarXElement == null) { @@ -317,12 +446,14 @@ class FunctionInfo { } else { varX = selectedVarXElement.value.trim(); varXName = selectedVarXElement.textContent.trim(); - if (functionName.startsWith('me.')) { // In case of function me, process id will be id of varX + if (functionName.startsWith('me.')) { + // In case of function me, process id will be id of varX processColumnId = varX; } } - const selectedVarYElement = functionConfigElements.varYElement.querySelector('option:checked'); + const selectedVarYElement = + functionConfigElements.varYElement.querySelector('option:checked'); let varY; let varYName; if (selectedVarYElement == null) { @@ -338,9 +469,9 @@ class FunctionInfo { const coeCT = functionConfigElements.coeCTElement.value.trim(); const note = functionConfigElements.noteElement.value.trim(); - const resultColumns = functionConfigElements - .sampleDataElement.lastElementChild.querySelectorAll('td:first-child'); - const sampleDatas = [...resultColumns].map(element => element.textContent.trim()); + const sampleDatas = ( + functionConfigElements.sampleDataElement.result ?? [] + ).map((element) => String(element ?? '').trim()); return new FunctionInfo({ functionName, @@ -372,27 +503,48 @@ class FunctionInfo { */ static collectFunctionInfoByRow(rowElement) { const index = rowElement.dataset.index; - const columnFunctionName = rowElement.querySelector(`td.column-function-name`); + const columnFunctionName = rowElement.querySelector( + `td.column-function-name`, + ); const processColumnId = columnFunctionName.dataset.processColumnId; const functionColumnId = columnFunctionName.dataset.functionColumnId; const functionId = columnFunctionName.dataset.functionId; - const functionName = columnFunctionName.querySelector('label').textContent.trim(); + const functionName = columnFunctionName + .querySelector('label') + .textContent.trim(); const isChecked = columnFunctionName.querySelector('input').checked; - const systemName = rowElement.querySelector(`td.column-system-name input`).value.trim(); - const japaneseName = rowElement.querySelector(`td.column-japanese-name input`).value.trim(); - const localName = rowElement.querySelector(`td.column-local-name input`).value.trim(); + const systemName = rowElement + .querySelector(`td.column-system-name input`) + .value.trim(); + const japaneseName = rowElement + .querySelector(`td.column-japanese-name input`) + .value.trim(); + const localName = rowElement + .querySelector(`td.column-local-name input`) + .value.trim(); const columnVarX = rowElement.querySelector(`td.column-var-x`); const varXName = columnVarX.textContent.trim(); const varX = columnVarX.dataset.varX; const columnVarY = rowElement.querySelector(`td.column-var-y`); const varYName = columnVarY.textContent.trim(); const varY = columnVarY.dataset.varY; - const coeANS = rowElement.querySelector('td.column-coe-ans input').value.trim(); - const coeBK = rowElement.querySelector('td.column-coe-bk input').value.trim(); - const coeCT = rowElement.querySelector('td.column-coe-ct input').value.trim(); - const note = rowElement.querySelector('td.column-note input').value.trim(); - const output = rowElement.querySelector(`td.column-output`).dataset.rawDataType; - const sampleDatas = [...rowElement.querySelectorAll('td.column-sample-data')].map(cell => cell.textContent.trim()); + const coeANS = rowElement + .querySelector('td.column-coe-ans input') + .value.trim(); + const coeBK = rowElement + .querySelector('td.column-coe-bk input') + .value.trim(); + const coeCT = rowElement + .querySelector('td.column-coe-ct input') + .value.trim(); + const note = rowElement + .querySelector('td.column-note input') + .value.trim(); + const output = + rowElement.querySelector(`td.column-output`).dataset.rawDataType; + const sampleDatas = [ + ...rowElement.querySelectorAll('td.column-sample-data'), + ].map((cell) => cell.textContent.trim()); return new FunctionInfo({ functionName, @@ -421,11 +573,17 @@ class FunctionInfo { * Fill inputs of function info */ fillInputFunctionInfo() { - functionConfigElements.functionNameElement.dataset.index = this.index ?? ''; - functionConfigElements.functionNameElement.dataset.processColumnId = this.processColumnId ?? ''; - functionConfigElements.functionNameElement.dataset.functionColumnId = this.functionColumnId ?? ''; - functionConfigElements.functionNameElement.dataset.dataType = this.dataType ?? ''; - functionConfigElements.functionNameElement.value = String(this.functionId); + functionConfigElements.functionNameElement.dataset.index = + this.index ?? ''; + functionConfigElements.functionNameElement.dataset.processColumnId = + this.processColumnId ?? ''; + functionConfigElements.functionNameElement.dataset.functionColumnId = + this.functionColumnId ?? ''; + functionConfigElements.functionNameElement.dataset.dataType = + this.dataType ?? ''; + functionConfigElements.functionNameElement.value = String( + this.functionId, + ); $(functionConfigElements.functionNameElement).change(); FunctionInfo.setOutputDataType(this.output); functionConfigElements.systemNameElement.value = this.systemName; @@ -439,21 +597,65 @@ class FunctionInfo { functionConfigElements.coeBKElement.value = String(this.coeBK); functionConfigElements.coeCTElement.value = String(this.coeCT); functionConfigElements.noteElement.value = String(this.note); - this.sampleDatas.forEach((sampleData, index) => { - const cell = functionConfigElements.sampleDataElement.lastElementChild - .querySelector(`tr:nth-child(${index + 1}) td:first-child`); - cell.textContent = sampleData; - }); } /** - * Reset invalid status of all inputs + * Reset invalid status, use the whole functionConfigs if no element is specified + * @param {HTMLElement | null } element */ - static resetInvalidStatus() { - functionConfigElements - .functionSettingModal - .querySelectorAll('.column-name-invalid') - .forEach(el => el.classList.remove(BORDER_RED_CLASS)); + static resetInvalidStatus(element = null) { + const ele = element ?? functionConfigElements.functionSettingModal; + ele.querySelectorAll(`.${BORDER_RED_CLASS}`).forEach( + FunctionInfo.removeInvalidStatus, + ); + } + + /** + * Remove invalid status for single element + * @param {HTMLElement} element + */ + static removeInvalidStatus(element) { + // TODO: remove invalid status for both jquery and html element + element.classList.remove(BORDER_RED_CLASS); + } + + /** + * Set invalid status for single element + * @param {HTMLElement} element + */ + static setInvalidStatus(element) { + // TODO: set invalid status for both jquery and html element + element.classList.add(BORDER_RED_CLASS); + } + + /** + * Check invalid status for single element + * @param {HTMLElement} element + * @return boolean + */ + static isInvalidStatus(element) { + // TODO: check invalid status for both jquery and html element + return element.classList.contains(BORDER_RED_CLASS); + } + + static clearFunctionOutput() { + FunctionInfo.clearOutputDatatype(); + FunctionInfo.clearSampleData(); + } + + static clearOutputDatatype() { + const defaultOutputDatatype = $( + functionConfigElements.functionNameElement, + ) + .find(':selected') + .attr('output-data-type'); + FunctionInfo.setOutputDataType(defaultOutputDatatype); + } + + static clearSampleData() { + functionConfigElements.sampleDataElement.lastElementChild + .querySelectorAll('td:first-child') + .forEach((td) => (td.textContent = '')); } /** @@ -462,6 +664,8 @@ class FunctionInfo { * @param {?HTMLTableRowElement=} previousRowElement - a previous selected row HTML */ static selectRowHandler(rowElement, previousRowElement = null) { + showResultFunction.disabled = true; // add flag to not call api to calculate sample data + removeAllSyncEvents(); if (previousRowElement != null) { previousRowElement.classList.remove('selected'); @@ -472,25 +676,32 @@ class FunctionInfo { functionInfo.fillInputFunctionInfo(); FunctionInfo.resetInvalidStatus(); FunctionInfo.hideChangeMark(); + + // reset flag to allow call api to calculate sample data + setTimeout(() => { + showResultFunction.disabled = false; + }, 50); } /** - * Sync sample data from config to table + * Fill sample data to selected function row + * @param {string[]} sampleData - a list of data */ - static syncSampleDataToTable() { - const selectedRow = functionConfigElements.functionTableElement.lastElementChild - .querySelector('tr.selected'); + static fillSampleDataToSelectedFunctionRow(sampleData) { + const selectedRow = + functionConfigElements.functionTableElement.lastElementChild.querySelector( + 'tr.selected', + ); if (!selectedRow) { return; } - const configSampleDataNodes = functionConfigElements.sampleDataElement.querySelectorAll('tbody>tr'); - const configSampleData = Array.from(configSampleDataNodes).map(node => node.firstElementChild.innerHTML); - const tableSampleDataNodes = selectedRow.querySelectorAll('td.column-sample-data '); - tableSampleDataNodes.forEach( - (node, index) => { - node.innerHTML = configSampleData[index]; - } + + const tableSampleDataNodes = selectedRow.querySelectorAll( + 'td.column-sample-data ', ); + tableSampleDataNodes.forEach((node, index) => { + node.innerHTML = sampleData[index] ?? ''; + }); } /** @@ -504,13 +715,15 @@ class FunctionInfo { /** @type HTMLTableRowElement */ const rowElement = event.currentTarget; /** @type HTMLTableRowElement */ - const selectedRowElement = rowElement.parentElement.querySelector('tr.selected'); + const selectedRowElement = + rowElement.parentElement.querySelector('tr.selected'); if (selectedRowElement === rowElement) { // in case re-select row, do nothing } else if (selectedRowElement != null) { // in case exist selected row const inputFunctionInfo = FunctionInfo.collectInputFunctionInfo(); - const selectedFunctionInfo = FunctionInfo.collectFunctionInfoByRow(selectedRowElement); + const selectedFunctionInfo = + FunctionInfo.collectFunctionInfoByRow(selectedRowElement); if (inputFunctionInfo.isEqual(selectedFunctionInfo)) { // in case of nothing change FunctionInfo.selectRowHandler(rowElement, selectedRowElement); @@ -518,15 +731,41 @@ class FunctionInfo { } // show confirmation dialog to change editing other row - functionConfigElements.confirmSwitchEditingRow.dataset.index = rowElement.dataset.index; - functionConfigElements.confirmSwitchEditingRow.dataset.previousIndex = selectedRowElement.dataset.index; - $(functionConfigElements.functionConfigConfirmSwitchEditingRowModal).modal('show'); + functionConfigElements.confirmSwitchEditingRow.dataset.index = + rowElement.dataset.index; + functionConfigElements.confirmSwitchEditingRow.dataset.previousIndex = + selectedRowElement.dataset.index; + $( + functionConfigElements.functionConfigConfirmSwitchEditingRowModal, + ).modal('show'); } else { // in case non-exist select row FunctionInfo.selectRowHandler(rowElement); } } + /** + * Handle hover cell to show title + * @param {Event} event + */ + static hoverTableCellEvent(event) { + /** @type HTMLTableCellElement */ + const cellElement = event.currentTarget; + const labelElement = cellElement.querySelector('label'); + if (labelElement) { + cellElement.setAttribute('title', labelElement.textContent.trim()); + return; + } + + const inputElement = cellElement.querySelector('input'); + if (inputElement) { + cellElement.setAttribute('title', inputElement.value.trim()); + return; + } + + cellElement.setAttribute('title', cellElement.innerText.trim()); + } + /** * Handle changing selection status of checkbox * @param {Event} event @@ -535,17 +774,31 @@ class FunctionInfo { /** @type HTMLInputElement */ const checkBoxElement = event.currentTarget; const targetRow = checkBoxElement.closest('tr'); - targetRow.setAttribute('checked', checkBoxElement.checked ? 'checked' : ''); + targetRow.setAttribute( + 'checked', + checkBoxElement.checked ? 'checked' : '', + ); // Set number of checked records - let totalCheckedColumns = parseInt(functionConfigElements.totalCheckedFunctionColumnsElement.textContent, 10); - totalCheckedColumns = checkBoxElement.checked ? totalCheckedColumns + 1 : totalCheckedColumns - 1 - functionConfigElements.totalCheckedFunctionColumnsElement.textContent = String(totalCheckedColumns); - - const totalColumns = parseInt(functionConfigElements.totalFunctionColumnsElement.textContent, 10); + let totalCheckedColumns = parseInt( + functionConfigElements.totalCheckedFunctionColumnsElement + .textContent, + 10, + ); + totalCheckedColumns = checkBoxElement.checked + ? totalCheckedColumns + 1 + : totalCheckedColumns - 1; + functionConfigElements.totalCheckedFunctionColumnsElement.textContent = + String(totalCheckedColumns); + + const totalColumns = parseInt( + functionConfigElements.totalFunctionColumnsElement.textContent, + 10, + ); // Set status of all selected checkbox - functionConfigElements.selectAllFunctionColumns.checked = totalColumns === totalCheckedColumns; + functionConfigElements.selectAllFunctionColumns.checked = + totalColumns === totalCheckedColumns; FunctionInfo.updateStatusErrorCheckbox(); } @@ -554,15 +807,19 @@ class FunctionInfo { * @return {HTMLTableRowElement[]} - a list of rows */ static getInvalidRows() { - return [...new Set( - [...functionConfigElements - .functionTableElement - .lastElementChild - .querySelectorAll('.row-invalid, .column-name-invalid') - ].map(invalidTarget => invalidTarget instanceof HTMLTableRowElement - ? invalidTarget - : invalidTarget.closest('tr')) - )]; + return [ + ...new Set( + [ + ...functionConfigElements.functionTableElement.lastElementChild.querySelectorAll( + '.row-invalid, .column-name-invalid', + ), + ].map((invalidTarget) => + invalidTarget instanceof HTMLTableRowElement + ? invalidTarget + : invalidTarget.closest('tr'), + ), + ), + ]; } /** @@ -572,84 +829,107 @@ class FunctionInfo { */ static updateStatusErrorCheckbox() { const invalidRows = FunctionInfo.getInvalidRows(); - const invalidCheckedRows = - invalidRows.filter(r => r.querySelector('input[name="columnName"]').checked); - const allCheckedRows = functionConfigElements - .functionTableElement - .lastElementChild - .querySelectorAll('input[name="columnName"]:checked'); - functionConfigElements.selectErrorFunctionColumns.checked = ( - invalidRows.length === invalidCheckedRows.length - && invalidRows.length !== 0 - && allCheckedRows.length === invalidCheckedRows.length + const invalidCheckedRows = invalidRows.filter( + (r) => r.querySelector('input[name="columnName"]').checked, ); + const allCheckedRows = + functionConfigElements.functionTableElement.lastElementChild.querySelectorAll( + 'input[name="columnName"]:checked', + ); + functionConfigElements.selectErrorFunctionColumns.checked = + invalidRows.length === invalidCheckedRows.length && + invalidRows.length !== 0 && + allCheckedRows.length === invalidCheckedRows.length; } /** * Add a new row into Function table */ addNewFunctionRow() { - const {hasANS, hasBK, hasCT} = FunctionInfo.hasParams(this.functionId); - const index = this.index; - - const newRowHtml = ( - `` - + `${index}` - + '` - + '
      ' - + '` - + `` - + '
      ' - + '' - + `` - + `` - + '' - + '' - + `` - + '' - + '' - + `` - + '' - + `${this.varXName ?? ''}` - + `${this.varYName ?? ''}` - + `` - + `` - + '' - + `` - + `` - + '' - + `` - + `` - + '' - + `` - + `` - + '' - + `${FunctionInfo.getLabelRawDataType(this.output ?? '')}` - + `${(this.sampleDatas[0] ?? '')}` - + `${(this.sampleDatas[1] ?? '')}` - + `${(this.sampleDatas[2] ?? '')}` - + `${(this.sampleDatas[3] ?? '')}` - + `${(this.sampleDatas[4] ?? '')}` - + '' + const { hasANS, hasBK, hasCT } = FunctionInfo.hasParams( + this.functionId, ); + const index = this.index; + const newSampleData = this.sampleDatas; + + const newRowHtml = + `` + + `${index}` + + '` + + '
      ' + + '` + + `` + + '
      ' + + '' + + `` + + `` + + '' + + '' + + `` + + '' + + '' + + `` + + '' + + `${this.varXName ?? ''}` + + `${this.varYName ?? ''}` + + `` + + `` + + '' + + `` + + `` + + '' + + `` + + `` + + '' + + `` + + `` + + '' + + `${FunctionInfo.getLabelRawDataType(this.output ?? '')}` + + `${newSampleData[0] ?? ''}` + + `${newSampleData[1] ?? ''}` + + `${newSampleData[2] ?? ''}` + + `${newSampleData[3] ?? ''}` + + `${newSampleData[4] ?? ''}` + + ''; /** @type HTMLTableRowElement */ const rowElement = htmlToElement(newRowHtml); rowElement.addEventListener('click', FunctionInfo.rowClickEvent); rowElement .querySelector('input[name="columnName"]') - .addEventListener('change', FunctionInfo.changeSelectionStatusEvent); + .addEventListener( + 'change', + FunctionInfo.changeSelectionStatusEvent, + ); + rowElement + .querySelectorAll('td') + .forEach((cell) => + cell.addEventListener( + 'mouseover', + FunctionInfo.hoverTableCellEvent, + ), + ); - functionConfigElements.functionTableElement.lastElementChild.append(rowElement); + functionConfigElements.functionTableElement.lastElementChild.append( + rowElement, + ); // Set number of total records - const totalColumns = parseInt(functionConfigElements.totalFunctionColumnsElement.textContent, 10); - functionConfigElements.totalFunctionColumnsElement.textContent = String(totalColumns + 1); + const totalColumns = parseInt( + functionConfigElements.totalFunctionColumnsElement.textContent, + 10, + ); + functionConfigElements.totalFunctionColumnsElement.textContent = String( + totalColumns + 1, + ); + + //Update prc PreviewDataOfFunctionColumn + prcPreviewDataOfFunctionColumn[this.processColumnId] = this.sampleDatas; // Trigger change event if (this.isChecked) { @@ -665,18 +945,28 @@ class FunctionInfo { * Update a function row into Function table */ updateFunctionRow() { - const {hasANS, hasBK, hasCT} = FunctionInfo.hasParams(this.functionId); - const rowElement = functionConfigElements.functionTableElement.lastElementChild - .querySelector(`tr[data-index="${this.index}"]`); - const columnFunctionName = rowElement.querySelector(`td.column-function-name`); + const { hasANS, hasBK, hasCT } = FunctionInfo.hasParams( + this.functionId, + ); + const rowElement = + functionConfigElements.functionTableElement.lastElementChild.querySelector( + `tr[data-index="${this.index}"]`, + ); + const columnFunctionName = rowElement.querySelector( + `td.column-function-name`, + ); columnFunctionName.dataset.processColumnId = this.processColumnId; columnFunctionName.dataset.functionColumnId = this.functionColumnId; columnFunctionName.dataset.functionId = this.functionId; - columnFunctionName.querySelector('label').textContent = this.functionName; + columnFunctionName.querySelector('label').textContent = + this.functionName; - rowElement.querySelector('td.column-system-name input').value = this.systemName; - rowElement.querySelector('td.column-japanese-name input').value = this.japaneseName; - rowElement.querySelector('td.column-local-name input').value = this.localName; + rowElement.querySelector('td.column-system-name input').value = + this.systemName; + rowElement.querySelector('td.column-japanese-name input').value = + this.japaneseName; + rowElement.querySelector('td.column-local-name input').value = + this.localName; const columnVarX = rowElement.querySelector(`td.column-var-x`); columnVarX.dataset.varX = this.varX; @@ -698,15 +988,34 @@ class FunctionInfo { inputCT.value = this.coeCT; rowElement.querySelector(`td.column-note input`).value = this.note; - const columnOutput = rowElement.querySelector(`td.column-output`) + const columnOutput = rowElement.querySelector(`td.column-output`); columnOutput.dataset.rawDataType = this.output; - columnOutput.textContent = FunctionInfo.getLabelRawDataType(this.output); + columnOutput.textContent = FunctionInfo.getLabelRawDataType( + this.output, + ); /** @type {NodeListOf} */ - const sampleCells = rowElement.querySelectorAll(`td.column-sample-data`); - this.sampleDatas.forEach((data, index) => { - sampleCells[index].textContent = data; + const sampleCells = rowElement.querySelectorAll( + `td.column-sample-data`, + ); + + sampleCells.forEach((cell, index) => { + console.log('this.sampleDatas[index]', this.sampleDatas[index]); + if (this.sampleDatas[index]) { + cell.textContent = this.sampleDatas[index]; + } else { + cell.textContent = ''; + } }); + + // this.sampleDatas.forEach((data, index) => { + // if(sampleCells[index]) { + // sampleCells[index].textContent = data + // } + // }); + + // update prc PreviewDataOfFunctionColumn + prcPreviewDataOfFunctionColumn[this.processColumnId] = this.sampleDatas; } /** @@ -716,27 +1025,46 @@ class FunctionInfo { static deleteFunctionRow(rowElement) { // Remove all events rowElement.removeEventListener('click', FunctionInfo.rowClickEvent); - const checkboxElement = rowElement.querySelector('input[name="columnName"]'); - checkboxElement.removeEventListener('change', FunctionInfo.changeSelectionStatusEvent); - const processColumnId = rowElement.querySelector(`td.column-function-name`).dataset.processColumnId; + const checkboxElement = rowElement.querySelector( + 'input[name="columnName"]', + ); + checkboxElement.removeEventListener( + 'change', + FunctionInfo.changeSelectionStatusEvent, + ); + const processColumnId = rowElement.querySelector( + `td.column-function-name`, + ).dataset.processColumnId; // Update number of checked records and total records - const totalColumns = parseInt(functionConfigElements.totalFunctionColumnsElement.textContent, 10) - 1; + const totalColumns = + parseInt( + functionConfigElements.totalFunctionColumnsElement.textContent, + 10, + ) - 1; functionConfigElements.totalFunctionColumnsElement.textContent = String( - totalColumns < 0 ? 0 : totalColumns + totalColumns < 0 ? 0 : totalColumns, ); if (checkboxElement.checked) { - const selectedColumns = parseInt(functionConfigElements.totalCheckedFunctionColumnsElement.textContent, 10) - 1; - functionConfigElements.totalCheckedFunctionColumnsElement.textContent = String( - selectedColumns < 0 ? 0 : selectedColumns - ); + const selectedColumns = + parseInt( + functionConfigElements.totalCheckedFunctionColumnsElement + .textContent, + 10, + ) - 1; + functionConfigElements.totalCheckedFunctionColumnsElement.textContent = + String(selectedColumns < 0 ? 0 : selectedColumns); } // Update status of checkbox if ( - functionConfigElements.selectAllFunctionColumns.checked - && functionConfigElements.totalCheckedFunctionColumnsElement.textContent !== functionConfigElements.totalFunctionColumnsElement.textContent - || functionConfigElements.totalFunctionColumnsElement.textContent.trim() === '0' + (functionConfigElements.selectAllFunctionColumns.checked && + functionConfigElements.totalCheckedFunctionColumnsElement + .textContent !== + functionConfigElements.totalFunctionColumnsElement + .textContent) || + functionConfigElements.totalFunctionColumnsElement.textContent.trim() === + '0' ) { functionConfigElements.selectAllFunctionColumns.checked = false; } @@ -746,9 +1074,15 @@ class FunctionInfo { } // Remove in X & Y select boxes - [functionConfigElements.varXElement, functionConfigElements.varYElement].forEach(selectElement => { - const isTargetOption = String(selectElement.value) === String(processColumnId); - $(selectElement).find(`option[value="${processColumnId}"]`).remove(); + [ + functionConfigElements.varXElement, + functionConfigElements.varYElement, + ].forEach((selectElement) => { + const isTargetOption = + String(selectElement.value) === String(processColumnId); + $(selectElement) + .find(`option[value="${processColumnId}"]`) + .remove(); if (isTargetOption) { $(selectElement).val('').change(); } @@ -764,11 +1098,13 @@ class FunctionInfo { * @return {{hasANS: boolean, hasBK: boolean, hasCT: boolean}} */ static hasParams(functionId) { - const funcDef = allMasterFunction.find(func => func.id === functionId); - const hasANS = ARRAY_ANS.some(c => funcDef.coefs.includes(c)); - const hasBK = ARRAY_BK.some(c => funcDef.coefs.includes(c)); - const hasCT = ARRAY_CT.some(c => funcDef.coefs.includes(c)); - return {hasANS, hasBK, hasCT}; + const funcDef = allMasterFunction.find( + (func) => func.id === functionId, + ); + const hasANS = ARRAY_ANS.some((c) => funcDef.coefs.includes(c)); + const hasBK = ARRAY_BK.some((c) => funcDef.coefs.includes(c)); + const hasCT = ARRAY_CT.some((c) => funcDef.coefs.includes(c)); + return { hasANS, hasBK, hasCT }; } /** @@ -778,7 +1114,10 @@ class FunctionInfo { */ static collectAllFunctionRows(isCollectOnlyCheckedRows = false) { const result = []; - [...functionConfigElements.functionTableElement.lastElementChild.children].forEach((row) => { + [ + ...functionConfigElements.functionTableElement.lastElementChild + .children, + ].forEach((row) => { const functionInfo = FunctionInfo.collectFunctionInfoByRow(row); if (!isCollectOnlyCheckedRows || functionInfo.isChecked) { result.push(functionInfo); @@ -825,7 +1164,9 @@ class FunctionInfo { static getAllFunctionInfosApi(processId, colIds) { const dictSampleData = {}; for (const colId of colIds) { - dictSampleData[colId] = collectSampleData(colId); + dictSampleData[colId] = + prcPreviewDataOfFunctionColumn[colId] || + prcPreviewWith1000Data[colId]; } return fetch('/ap/api/setting/function_config/get_function_infos', { method: 'POST', @@ -835,19 +1176,24 @@ class FunctionInfo { }, body: JSON.stringify({ process_id: parseInt(processId, 10), - dic_sample_data: dictSampleData + dic_sample_data: dictSampleData, }), }) - .then(response => response.clone().json()) - .then((/** @type {{functionData: {}}} */responseData) => - responseData - .functionData - .map(funcData => ({ + .then((response) => response.clone().json()) + .then((/** @type {{functionData: {}}} */ responseData) => + responseData.functionData?.map((funcData) => { + // add functionInfo data to prc-PreviewDataOfFunctionColumn with a key is functionColumnId + const { processColumnId, sampleDatas } = funcData; + prcPreviewDataOfFunctionColumn[processColumnId] = + sampleDatas; + + return { ...funcData, coeANS: funcData.a || funcData.n || funcData.s, coeBK: funcData.b || funcData.k, coeCT: funcData.c || funcData.t, - })) + }; + }), ); } @@ -857,8 +1203,8 @@ class FunctionInfo { */ static loadFunctionListTableAndInitDropDown(functionData) { functionData - .map(data => new FunctionInfo(data)) - .forEach(functionInfo => functionInfo.addNewFunctionRow()); + ?.map((data) => new FunctionInfo(data)) + ?.forEach((functionInfo) => functionInfo.addNewFunctionRow()); FunctionInfo.initDropdownFunctionName(); } @@ -866,12 +1212,15 @@ class FunctionInfo { * Remove all rows of Function table */ static removeAllFunctionRows() { - [...functionConfigElements.functionTableElement.lastElementChild.children].forEach( + [ + ...functionConfigElements.functionTableElement.lastElementChild + .children, + ].forEach( /** * Remove event listener and row * @param {HTMLTableRowElement} row - a function row HTML */ - row => FunctionInfo.deleteFunctionRow(row) + (row) => FunctionInfo.deleteFunctionRow(row), ); } @@ -879,8 +1228,14 @@ class FunctionInfo { * Show icon function changes */ static showChangeMark() { - if (functionConfigElements.settingChangeMark().classList.contains('d-none')) { - functionConfigElements.settingChangeMark().classList.remove('d-none'); + if ( + functionConfigElements + .settingChangeMark() + .classList.contains('d-none') + ) { + functionConfigElements + .settingChangeMark() + .classList.remove('d-none'); } } @@ -888,7 +1243,11 @@ class FunctionInfo { * Hide icon function changes */ static hideChangeMark() { - if (!functionConfigElements.settingChangeMark().classList.contains('d-none')) { + if ( + !functionConfigElements + .settingChangeMark() + .classList.contains('d-none') + ) { functionConfigElements.settingChangeMark().classList.add('d-none'); } } @@ -898,49 +1257,63 @@ class FunctionInfo { * @param {boolean} isResetFuncName - is Reset Function Name or not * @param {boolean} isResetRowCount - is Reset Row Count or not */ - static resetInputFunctionInfo(isResetFuncName = true, isResetRowCount = true) { + static resetInputFunctionInfo( + isResetFuncName = true, + isResetRowCount = true, + ) { if (isResetRowCount) { functionConfigElements.selectAllFunctionColumns.checked = false; functionConfigElements.selectErrorFunctionColumns.checked = false; - functionConfigElements.totalCheckedFunctionColumnsElement.textContent = String(0); - functionConfigElements.totalFunctionColumnsElement.textContent = String(0); + functionConfigElements.totalCheckedFunctionColumnsElement.textContent = + String(0); + functionConfigElements.totalFunctionColumnsElement.textContent = + String(0); } $(functionConfigElements.functionNameElement).val('').change(); + + // reset previous all invalid status + FunctionInfo.resetInvalidStatus(); + if (isResetFuncName) { - [...functionConfigElements.functionNameElement.children].forEach(option => option.remove()); + [...functionConfigElements.functionNameElement.children].forEach( + (option) => option.remove(), + ); $(functionConfigElements.functionNameElement).empty(); } functionConfigElements.functionNameElement.dataset.index = ''; functionConfigElements.functionNameElement.dataset.processColumnId = ''; - functionConfigElements.functionNameElement.dataset.functionColumnId = ''; + functionConfigElements.functionNameElement.dataset.functionColumnId = + ''; functionConfigElements.functionNameElement.dataset.dataType = ''; FunctionInfo.setOutputDataType(''); functionConfigElements.systemNameElement.value = ''; - functionConfigElements.systemNameElement.dataset.originGeneratedName = ''; - $(functionConfigElements.systemNameElement).removeClass(BORDER_RED_CLASS); + functionConfigElements.systemNameElement.dataset.originGeneratedName = + ''; functionConfigElements.japaneseNameElement.value = ''; - functionConfigElements.japaneseNameElement.dataset.originGeneratedName = ''; - $(functionConfigElements.japaneseNameElement).removeClass(BORDER_RED_CLASS); + functionConfigElements.japaneseNameElement.dataset.originGeneratedName = + ''; functionConfigElements.localNameElement.value = ''; - functionConfigElements.localNameElement.dataset.originGeneratedName = ''; - $(functionConfigElements.localNameElement).removeClass(BORDER_RED_CLASS); + functionConfigElements.localNameElement.dataset.originGeneratedName = + ''; $(functionConfigElements.varXElement).val('').change(); $(functionConfigElements.varYElement).val('').change(); - [...functionConfigElements.varXElement.children].forEach(option => option.remove()); - [...functionConfigElements.varYElement.children].forEach(option => option.remove()); + [...functionConfigElements.varXElement.children].forEach((option) => + option.remove(), + ); + [...functionConfigElements.varYElement.children].forEach((option) => + option.remove(), + ); functionConfigElements.coeANSElement.value = ''; functionConfigElements.coeANSElement.required = false; - $(functionConfigElements.coeANSElement).removeClass(BORDER_RED_CLASS); functionConfigElements.coeBKElement.value = ''; functionConfigElements.coeBKElement.required = false; - $(functionConfigElements.coeBKElement).removeClass(BORDER_RED_CLASS); functionConfigElements.coeCTElement.value = ''; functionConfigElements.coeCTElement.required = false; - $(functionConfigElements.coeCTElement).removeClass(BORDER_RED_CLASS); functionConfigElements.noteElement.value = ''; - functionConfigElements.sampleDataElement.lastElementChild.querySelectorAll('td') - .forEach(td => td.textContent = ''); + functionConfigElements.sampleDataElement.lastElementChild + .querySelectorAll('td') + .forEach((td) => (td.textContent = '')); $(functionConfigElements.varXElement).empty(); $(functionConfigElements.varYElement).empty(); @@ -955,7 +1328,10 @@ class FunctionInfo { removeAllSyncEvents(); FunctionInfo.resetInputFunctionInfo(false, false); if (selectedRow == null) { - selectedRow = functionConfigElements.functionTableElement.lastElementChild.querySelector('tr.selected'); + selectedRow = + functionConfigElements.functionTableElement.lastElementChild.querySelector( + 'tr.selected', + ); } if (selectedRow != null) { @@ -968,13 +1344,14 @@ class FunctionInfo { * @param {HTMLOptionElement} selectedFunction - a selected option of Function */ static initDropdownVarXY(selectedFunction) { - const showSerial = selectedFunction.getAttribute('show-serial') === 'true'; + const showSerial = + selectedFunction.getAttribute('show-serial') === 'true'; const getTypes = (attributeName) => { let types = selectedFunction.getAttribute(attributeName).trim(); types = types.split(SEPARATOR_CHAR); return types; - } + }; const xTypes = getTypes('x-types'); const yTypes = getTypes('y-types'); @@ -993,43 +1370,55 @@ class FunctionInfo { newOption, keySelectedValue, ) => { - const $existOption = $varElement.find(`option[value="${columnId}"]`); - if (supportTypes.includes(columnRawDataType) && $existOption.length === 0) { + const $existOption = $varElement.find( + `option[value="${columnId}"]`, + ); + if ( + supportTypes.includes(columnRawDataType) && + $existOption.length === 0 + ) { $varElement.append($('
      +
      + + +
      +
      + + +
      + +
      +
    + + +
    +
    +
    + +
    +
    +
    +
    +
    + + + + + + + + + + + + +
    + +
    + +
    + + + + + + + + + + + + + +
    * + ${i18n.columnRawName} + ${i18n.dataType} + System + * + + ${i18n.japaneseName} + + ${i18n.localName} + + ${i18n.unit} +
    + + + + + + + +
    + ${i18n.sampleData} +
    +
    +
    +
    +
    +`; + } + + /** + * Find all columns and determine what column is main::Serial or Serial + * @description ONLY EDGE SERVER DO THIS LOGIC + * @param {ProcessColumnConfig[]} processColumnConfigs - a list of process column config + */ + static #determineSerialColumns(processColumnConfigs) { + let hasMainSerialCol = false; + processColumnConfigs.forEach((processColumnConfig) => { + // if v2 col_name is シリアルNo -> auto check + const isSerial = + /^.*シリアル|serial.*$/.test( + processColumnConfig.column_name.toString().toLowerCase(), + ) && + [DataTypes.STRING.name, DataTypes.INTEGER.name].includes( + processColumnConfig.data_type, + ); + if (isSerial) { + if (hasMainSerialCol) { + processColumnConfig.is_serial_no = true; + } else { + processColumnConfig.is_main_serial_no = true; + hasMainSerialCol = true; + } + } + }); + } + + /** + * Generate Process Config Body HTML string + * @param {ProcessColumnConfig[]} processColumnConfigs - a list of process column config + * @param {{}[]} sampleDataRows - a list of sample data + * @return {[string[], string[]]} - a tuple of rowSampleDataHTMLs & rowProcessColumnConfigHTMLs + */ + static generateProcessConfigBodyHTML(processColumnConfigs, sampleDataRows) { + const rowSampleDataHTMLs = []; + const rowProcessColumnConfigHTMLs = []; + processColumnConfigs.forEach((processColumnConfig, index) => { + if (processColumnConfig.id == null) { + // Temporary set id if it is null to can generate HTML completely + processColumnConfig.id = index; + } + + rowSampleDataHTMLs.push( + this.#generateOneRowOfSampleDataHTML( + sampleDataRows, + processColumnConfig, + ), + ); + rowProcessColumnConfigHTMLs.push( + this.#generateOneRowOfProcessColumnConfigHTML( + processColumnConfig, + index, + ), + ); + }); + + return [rowProcessColumnConfigHTMLs, rowSampleDataHTMLs]; + } + + /** + * Generate One Row Of Sample Data HTML string + * @public + * @param {{}[]} sampleDataRows - a list of sample data + * @param {ProcessColumnConfig} processColumnConfig + * @param {?string} extendClass + * @return {string} - an HTML string + */ + static generateOneRowOfSampleDataHTML( + sampleDataRows, + processColumnConfig, + extendClass = '', + ) { + return this.#generateOneRowOfSampleDataHTML( + sampleDataRows, + processColumnConfig, + extendClass, + ); + } + + /** + * Generate One Row Of Sample Data HTML string + * @private + * @param {{}[]} sampleDataRows - a list of sample data + * @param {ProcessColumnConfig} processColumnConfig + * @param {?string} extendClass + * @return {string} - an HTML string + */ + static #generateOneRowOfSampleDataHTML( + sampleDataRows, + processColumnConfig, + extendClass = '', + ) { + const tdHTMLs = []; + const $checkboxDatetimeFormat = + procModalElements.procDateTimeFormatCheckbox; + const formatIsChecked = + $checkboxDatetimeFormat.length > 0 + ? // In case of Process config modal in Config page, base on status of checkbox + $checkboxDatetimeFormat.is(':checked') + : // In case of Register by file page, always do format + true; + sampleDataRows.forEach((row) => { + const key = processColumnConfig.column_name; //col.column_name || + const originValue = row[key]; + let value; + if (formatIsChecked) { + switch (processColumnConfig.data_type) { + case DataTypes.DATETIME.name: + value = parseDatetimeStr(row[key]); + break; + case DataTypes.DATE.name: + value = parseDatetimeStr(row[key], true); + break; + case DataTypes.TIME.name: + value = parseTimeStr(row[key]); + break; + case DataTypes.INTEGER.name: + value = row[key]; + value = parseIntData(value); + break; + case DataTypes.REAL.name: + value = row[key]; + value = parseFloatData(value); + break; + default: + value = row[key]; + } + } else { + value = row[key]; + } + + tdHTMLs.push( + this.#generateOneColumnOfSampleDataHTML( + processColumnConfig, + value, + originValue, + extendClass, + ), + ); + }); + + return ( + `` + + tdHTMLs.join('') + + '' + ); + } + + /** + * Generate Row Of Sample Data HTML + * @public + * @param {ProcessColumnConfig} processColumnConfig + * @param {string} value + * @param {string} originValue + * @param {?string} extendClass + * @return {string} - an HTML string of row + */ + static #generateOneColumnOfSampleDataHTML( + processColumnConfig, + value, + originValue, + extendClass = '', + ) { + const isKSep = [ + DataTypes.REAL_SEP.name, + DataTypes.EU_REAL_SEP.name, + ].includes(processColumnConfig.data_type); + const checkedAtr = processColumnConfig.is_checked + ? 'checked=checked' + : ''; + return ( + '' + + `${!isEmpty(value) ? value : ''}` + + '' + ); + } + + /** + * Generate One Row Of Process Column Config HTML string + * @private + * @param {ProcessColumnConfig} processColumnConfig + * @param {number} index - a number index of row + * @return {string} - an HTML string + */ + static #generateOneRowOfProcessColumnConfigHTML( + processColumnConfig, + index, + ) { + // convert column_type to attr key + const col = { + ...processColumnConfig, + ...DataTypeDropdown_Controller.convertColumnTypeToAttrKey( + processColumnConfig.column_type, + ), + }; + col.is_show = true; + const checkedAttr = col.is_checked ? 'checked=checked' : ''; + const isRegisterProc = false; + + const dataTypeObject = /** @type DataTypeObject */ { + ...col, + value: col.data_type, + checked: checkedAttr, + isRegisteredCol: false, + isRegisterProc: isRegisterProc, + }; + let getKey = ''; + for (const attr of DataTypeAttrs) { + if (dataTypeObject[attr]) { + getKey = attr; + break; + } + } + const idSuffix = `_processId_${processColumnConfig.id}`; + const isDummyDatetime = col.dummyDatetimeIdx === index; + + return this.generateOneRowOfProcessColumnConfigHTML( + index, + col, + getKey, + dataTypeObject, + isRegisterProc, + isDummyDatetime, + idSuffix, + ); + } + + /** + * Generate Row Of Process Column HTML + * @public + * @param {number} index + * @param {ProcessColumnConfig} col + * @param {boolean} isChecked + * @param {string} getKey + * @param {DataTypeObject} dataTypeObject + * @param {boolean} isRegisteredProcess + * @param {boolean} isDummyDatetime + * @param {string} idSuffix + * @return {string} - an HTML string of row + */ + static generateOneRowOfProcessColumnConfigHTML( + index, + col, + getKey, + dataTypeObject, + isRegisteredProcess, + isDummyDatetime = false, + idSuffix = '', + ) { + const checkedAttr = col.is_checked ? 'checked=checked' : ''; + const isFixedName = fixedNameAttrs.includes(getKey); + const isRegisteredMainDatetimeColumn = + // ONLY FOR EDGE SERVER + (col.column_type === + DataTypeDropdown_Controller.DataGroupType.MAIN_DATE || + col.column_type === + DataTypeDropdown_Controller.DataGroupType.MAIN_TIME || + col.is_get_date) && + isRegisteredProcess; + return ` + + + ${index + 1} + + +
    + + + + +
    + + + ${DataTypeDropdown_Controller.generateHtml(index, dataTypeObject, getKey, isRegisteredMainDatetimeColumn)} + + + + + + + + + + + + + + +`; + } + + /** + * Get sample data based on column ids + * @param {number} columnId + * @param {?jQuery} $processColumnsTableBody + * @param {?jQuery} $processColumnsSampleDataTableBody + * @return {string[]} - a list that contains sample data + */ + static collectSampleData( + columnId, + $processColumnsTableBody = null, + $processColumnsSampleDataTableBody = null, + ) { + const colIdx = ( + $processColumnsTableBody ?? + procModalElements.processColumnsTableBody + ) + .find(`td[title="index"][data-column-id="${columnId}"]`) + .attr('data-col-idx'); + return this.#collectSampleData( + colIdx, + $processColumnsSampleDataTableBody, + ); + } + + /** + * Get sample data based on column ids + * @param {number | string} colIdx + * @param {?jQuery} $processColumnsSampleDataTableBody + * @param {?boolean} isGetOriginal - true: get value from attribute data-original, otherwise. + * @return {string[]} - a list that contains sample data + * @private + */ + static #collectSampleData( + colIdx, + $processColumnsSampleDataTableBody = null, + isGetOriginal = false, + ) { + return ( + $processColumnsSampleDataTableBody ?? + procModalElements.processColumnsSampleDataTableBody + ) + .find(`tr:eq(${colIdx}) .sample-data`) + .toArray() + .map((el) => + isGetOriginal + ? el.dataset.original.trim() + : el.textContent.trim(), + ); + } + + /** + * Collect Generated Datetime Sample Data + * @param {jQuery} $processColumnsTableBody + * @param {jQuery} $processColumnsSampleDataTableBody + * @param {string} columnName + * @return {{}[]} - a list of sample data + */ + static collectGeneratedDatetimeSampleData( + $processColumnsTableBody, + $processColumnsSampleDataTableBody, + columnName, + ) { + const mainDateColId = $processColumnsTableBody + .find('span[name=dataType][checked][is_main_date=true]') + .closest('tr') + .index(); + const mainDateSampleDatas = this.#collectSampleData( + mainDateColId, + $processColumnsSampleDataTableBody, + true, + ); + + const mainTimeColId = $processColumnsTableBody + .find('span[name=dataType][checked][is_main_time=true]') + .closest('tr') + .index(); + const mainTimeSampleDatas = this.#collectSampleData( + mainTimeColId, + $processColumnsSampleDataTableBody, + true, + ); + + const result = []; + mainDateSampleDatas.forEach((dateData, index) => { + const temp = {}; + temp[columnName] = dateData + ' ' + mainTimeSampleDatas[index]; + result.push(temp); + }); + + return result; + } + + /** + * Generate a new Datetime Column + * @param {jQuery} $processColumnsTableBody + * @param {jQuery} $processColumnsSampleDataTableBody + * @param {ProcessColumnConfig} col + * @param {string} getKey + * @param {DataTypeObject} dataTypeObject + * @param {boolean} isRegisterProc + */ + static generateDatetimeColumn( + $processColumnsTableBody, + $processColumnsSampleDataTableBody, + col, + getKey, + dataTypeObject, + isRegisterProc, + ) { + // Generate a new row in process config table + const index = $processColumnsTableBody.find('tr').length; + const rowHtml = this.generateOneRowOfProcessColumnConfigHTML( + index, + col, + getKey, + dataTypeObject, + isRegisterProc, + true, + undefined, + ); + const $rowHtmlObject = $(rowHtml); + $processColumnsTableBody.append(rowHtml); + // Add event for data type dropdown control + $rowHtmlObject + .find('div.config-data-type-dropdown') + .each((idx, dataTypeDropdownElement) => + DataTypeDropdown_Controller.addEvents(dataTypeDropdownElement), + ); + + // Generate a new row in sample data table + const sampleDatas = this.collectGeneratedDatetimeSampleData( + $processColumnsTableBody, + $processColumnsSampleDataTableBody, + col.column_name, + ); + const columnColorClass = 'dummy_datetime_col'; + const sampleRowHTML = this.generateOneRowOfSampleDataHTML( + sampleDatas, + col, + columnColorClass, + ); + $processColumnsSampleDataTableBody.append(sampleRowHTML); + } + + /** + * Remove generated main::Datetime column + * @param {jQuery} $processColumnsTableBody + * @param {jQuery} $processColumnsSampleDataTableBody + * @private + */ + static #removeGeneratedMainDatetimeColumn( + $processColumnsTableBody, + $processColumnsSampleDataTableBody, + ) { + // remove generated datetime column + const dummyDatetimeColRow = + $processColumnsTableBody.find('.dummyDatetimeCol'); + if (dummyDatetimeColRow.length === 0) return; + + const dummyDatetimeColIndex = dummyDatetimeColRow.index(); + dummyDatetimeColRow.remove(); + $processColumnsSampleDataTableBody + .find(`tr:eq(${dummyDatetimeColIndex})`) + .remove(); + reCalculateCheckedColumn(-1); + } + + /** + * Handle main::Date column and main::Time column are select/unselect + * @param {HTMLDivElement} dataTypeDropdownElement + * @param {string} attrKey + * @param {string} beforeAttrKey + */ + static handleMainDateAndMainTime( + dataTypeDropdownElement, + attrKey, + beforeAttrKey = '', + ) { + if (this.handleMainDateAndMainTime.disable) return; + + const $processColumnsTableBody = $( + dataTypeDropdownElement.closest('tbody'), + ); + const $processColumnsSampleDataTableBody = $processColumnsTableBody + .closest('div.proc-config-content') + .find('table[name="processColumnsTableSampleData"] tbody'); + const isMainDateTimeDummyColumnExist = + $processColumnsTableBody.find('.dummyDatetimeCol').length > 0; + + const $spanMainTime = $processColumnsTableBody.find( + 'span[name=dataType][checked][is_main_time=true]', + ); + const isMainTimeColumnChecked = $spanMainTime.length > 0; + const $spanMainDate = $processColumnsTableBody.find( + 'span[name=dataType][checked][is_main_date=true]', + ); + const isMainDateColumnChecked = $spanMainDate.length > 0; + + if ( + ['is_get_date'].includes(attrKey) && + isMainTimeColumnChecked && + isMainDateColumnChecked && + isMainDateTimeDummyColumnExist + ) { + // In case there are generated main::Datetime, main::Date, main::Time columns and another column is + // selected as main::Datetime -> change main::Date, main::Time column to normal type and remove generated + // main::Datetime column + this.#removeGeneratedMainDatetimeColumn( + $processColumnsTableBody, + $processColumnsSampleDataTableBody, + ); + + try { + this.handleMainDateAndMainTime.disable = true; // lock to avoid running this function + [$spanMainTime, $spanMainDate].forEach((el) => + DataTypeDropdown_Controller.changeToNormalDataType(el[0]), + ); + } finally { + this.handleMainDateAndMainTime.disable = undefined; // release lock + } + } else if ( + (isMainTimeColumnChecked && !isMainDateColumnChecked) || + (!isMainTimeColumnChecked && isMainDateColumnChecked) + ) { + // In case there is only main::Date or main::Time column + // when there is datetime column already generated, remove it + if (isMainDateTimeDummyColumnExist) { + this.#removeGeneratedMainDatetimeColumn( + $processColumnsTableBody, + $processColumnsSampleDataTableBody, + ); + } + if ( + beforeAttrKey.length || + ['is_main_date', 'is_main_time'].includes(attrKey) + ) { + $(procModalElements.msgContent).text( + $(procModalElements.msgSelectDateAndTime).text(), + ); + $(procModalElements.msgModal).modal('show'); + } + + // Change main::Datetime to normal Datetime data type + const mainDatetimeCol = + /** @type HTMLSpanElement */ $processColumnsTableBody.find( + 'span[name=dataType][checked][is_get_date=true]', + ); + if (mainDatetimeCol.length > 0) { + DataTypeDropdown_Controller.changeToNormalDataType( + mainDatetimeCol[0], + ); + } + } else if (isMainTimeColumnChecked && isMainDateColumnChecked) { + if (!isMainDateTimeDummyColumnExist) { + $(procModalElements.msgContent).text( + $(procModalElements.msgGenDateTime).text(), + ); + $(procModalElements.msgModal).modal('show'); + } else { + this.#removeGeneratedMainDatetimeColumn( + $processColumnsTableBody, + $processColumnsSampleDataTableBody, + ); + } + + const generatedDateTimeColName = 'DatetimeGenerated'; + const generatedDateTimeCol = { + is_linking_column: false, + coef: null, + is_int_category: false, + data_type: DataTypes.DATETIME.name, + name_local: null, + is_auto_increment: null, + order: 0, + format: null, + process_id: currentProcessId, + column_raw_name: generatedDateTimeColName, + shown_name: generatedDateTimeColName, + column_name: generatedDateTimeColName, + function_details: [], + column_type: masterDataGroup.GENERATED, + is_get_date: true, + is_category: false, + is_dummy_datetime: true, + operator: null, + is_serial_no: false, + raw_data_type: DataTypes.DATETIME.name, + name_jp: generatedDateTimeColName, + name_en: generatedDateTimeColName, + is_show: true, + is_master_col: false, + bridge_column_name: null, + master_type: null, + is_checked: true, + is_big_int: false, + id: '-1', + }; + const dataTypeObject = { + ...generatedDateTimeCol, + value: generatedDateTimeCol.data_type, + checked: 'checked=checked', + isRegisteredCol: true, + isRegisterProc: false, + }; + this.generateDatetimeColumn( + $processColumnsTableBody, + $processColumnsSampleDataTableBody, + generatedDateTimeCol, + 'is_get_date', + dataTypeObject, + false, + ); + reCalculateCheckedColumn(1); + showProcDatetimeFormatSampleData(); + } + } + + /** + * Sort columns in Process Config + * + * Order of columns: + * 1. main::Date + * 2. main::Time + * 3. main::Datetime + * 4. another columns + * + * @param {jQuery} $processConfigTableBody + * @param {jQuery} $processColumnsSampleDataTableBody + */ + static sortProcessColumns( + $processConfigTableBody, + $processColumnsSampleDataTableBody, + ) { + const ColumnTypeAttribute = { + MainDatetime: 'is_get_date', + MainDate: 'is_main_date', + MainTime: 'is_main_time', + }; + const inner = function (columnTypeAttribute) { + const targetRow = $processConfigTableBody + .find( + `td.column-date-type div.config-data-type-dropdown button span[${columnTypeAttribute}="true"]`, + ) + .closest('tr'); + if (targetRow.length > 0) { + const targetSampleDataRow = + $processColumnsSampleDataTableBody.find( + `tr:eq(${targetRow.index()})`, + ); + + // Move row to top of table + $processConfigTableBody.prepend(targetRow); + $processColumnsSampleDataTableBody.prepend(targetSampleDataRow); + + // Re-index order number + $processConfigTableBody + .find('td.column-number') + .toArray() + .forEach((ele, index) => { + ele.textContent = index + 1; + }); + } + }; + + inner(ColumnTypeAttribute.MainDatetime); + inner(ColumnTypeAttribute.MainTime); + inner(ColumnTypeAttribute.MainDate); + } +} diff --git a/ap/static/setting_module/js/register_from_file.js b/ap/static/setting_module/js/register_from_file.js index 1dc5f59..73d03b0 100644 --- a/ap/static/setting_module/js/register_from_file.js +++ b/ap/static/setting_module/js/register_from_file.js @@ -1,13 +1,20 @@ +/** + * @file Contains all constant that serve for data type dropdown. + * @author Tran Thi Kim Tuyen + * @author Tran Nguyen Duc Huy + * @author Tran Ngoc Tinh + * @author Pham Minh Hoang + */ + const registerFromFileEles = { folderBrowser: '#folderBrowser', fileBrowser: '#fileBrowser', directoryRadios: 'input[name=directorySelector]', - checkedDirectoryRadio: 'input[name=directorySelector]:checked', - folderRadio: '#directoryTypeFolder', - fileRadio: '#directoryTypeFile', fileBrowseButton: '#browseFileBtn', - folderBrowseButton: '#browseFolderBtn', - fileUrl: $('input[name=fileUrl]'), + containerReferenceFile: '#containerReferenceFile', + confirmRegisterByFile: '#confirmRegisterByFile', + registerAllFilesButton: '#register-all-file', + registerOneFileButton: '#register-one-file', folderUrl: $('input[name=folderUrl]'), refFileUrl: $('input[name=fileName]'), progressDisplay: '#progressDisplay', @@ -16,20 +23,11 @@ const registerFromFileEles = { processEnName: $('input[name=processName]'), processJapaneseName: $('input[name=processJapaneseName]'), processLocalName: $('input[name=processLocalName]'), + processOriginName: $('input[name=processOriginName]'), }; -const inputDOMByPath = { - directory: registerFromFileEles.folderUrl, - file: registerFromFileEles.fileUrl, - reference_file: registerFromFileEles.refFileUrl, -} - -let processInfo = null; -let registeredProcessId = null; - // override from db_config.js to use generateProcessList function from proc_config_modal.js todo move to common js file let dicProcessCols = {}; -let dicOriginDataType = {}; const i18n = { statusDone: $('#i18nStatusDone').text(), @@ -40,591 +38,1126 @@ const i18n = { reachFailLimit: $('#i18nReachFailLimit').text(), noCTCol: $('#i18nNoCTCol').text(), noCTColProc: $('#i18nNoCTColPrc').text(), -} + processName: document.getElementById('i18nProcessName_').textContent, + dataType: document.getElementById('i18ni18nDataType').textContent, + systemNameHoverMsg: document.getElementById('i18nSystemNameHoverMsg') + .textContent, + japaneseName: document.getElementById('i18nJapaneseName').textContent, + localName: document.getElementById('i18nLocalName').textContent, + unit: $('#i18nUnit').text(), + alreadyRegistered: document.getElementById('i18nAlreadyRegistered') + .textContent, + columnRawName: document.getElementById('i18nColumnRawName').textContent, + format: document.getElementById('i18nFormat').textContent, + sampleData: document.getElementById('i18nSampleData').textContent, + operatorHover: document.getElementById('i18nOperatorHover').textContent, + operator: document.getElementById('i18nOperator').textContent, + coefHover: document.getElementById('i18nCoefHover').textContent, + coef: document.getElementById('i18nCoef').textContent, +}; const registerI18n = { i18nFileIsSelected: $('#i18nFileIsSelected').text(), i18nProgressSourceSelected: $('#i18nProgressSourceSelected').text(), i18nDbSourceExist: $('#i18nDbSourceExist').text(), - i18nProcessNameIsAlreadyRegistered: $('#i18nProcessNameIsAlreadyRegistered').text(), - i18nDataSourceNameIsAlreadyRegistered: $('#i18nDataSourceNameIsAlreadyRegistered').text(), + i18nProcessNameIsAlreadyRegistered: $( + '#i18nProcessNameIsAlreadyRegistered', + ).text(), + i18nDataSourceNameIsAlreadyRegistered: $( + '#i18nDataSourceNameIsAlreadyRegistered', + ).text(), i18nProcessRegisterStart: $('#i18nProcessRegisterStart').text(), i18nProgressFolderCheck: $('#i18nProgressFolderCheck').text(), i18nProgressImportingData: $('#i18nProgressImportingData').text(), i18nProgressFinished: $('#i18nProgressFinished').text(), + i18nDataSourceNameIsEmpty: $('#i18nDataSourceNameIsEmpty').text(), + i18nProcessNameIsEmpty: $('#i18nProcessNameIsEmpty').text(), + i18nProgressGenDataTable: 'Generate Data Table', + i18nProgressScanFile: 'Scan File', + i18nProgressScanMaster: 'Scan Master', + i18nProgressScanDataType: 'Scan Data Type', + i18nProgressPullData: 'Pull CSV Data', + i18nErrorNoGetdate: $('#i18nErrorNoGetdate').text(), + i18nScanning: 'Scanning', }; const registerSteps = { - IMPORTING: "importing" -} - -const ICON_STATUS = { - SUCCESS: "success", - PROCESSING: "processing", - WARNING: "warning", -} - -const REGISTER_JOB_STATUS = { - DONE: "DONE", - FAILED: "FAILED", - PROCESSING: "PROCESSING", -} - -const parseIntData = (v) => { - let val = trimBoth(String(v)); - if (isEmpty(val)) { - val = ''; - } else { - val = parseInt(Number(val)); - if (isNaN(val)) { - val = ''; - } - } - return val; + IMPORTING: 'importing', + SCANNING: 'SCANNING', }; -const changeBackgroundColor = (ele) => { - if ([DataTypes.STRING.name, DataTypes.REAL_SEP.name, DataTypes.EU_REAL_SEP.name].includes(ele.getAttribute('value'))) { - $(ele).closest('.config-data-type-dropdown').find('[name=dataType]') - .css('color', 'orange'); - } else { - $(ele).closest('.config-data-type-dropdown').find('[name=dataType]') - .css('color', 'white'); - } -}; - -const parseDataType = (ele, idx) => { - // change background color - changeBackgroundColor(ele); - - const vals = [...procModalElements.processColumnsSampleDataTableBody.find(`tr:eq(${idx}) .sample-data`)].map(el => $(el)); - - const attrName = 'data-original'; - - switch (ele.getAttribute('value')) { - case DataTypes.INTEGER.name: - for (const e of vals) { - let val = e.attr(attrName); - const isBigInt = Boolean(e.attr('is-big-int')); - if (!isBigInt) { - val = parseIntData(val); - } - e.html(val); - } - break; - case DataTypes.REAL.name: - for (const e of vals) { - let val = e.attr(attrName); - val = parseFloatData(val); - e.html(val); - } - break; - case DataTypes.DATETIME.name: - for (const e of vals) { - let val = e.attr(attrName); - val = parseDatetimeStr(val); - e.html(val); - } - break; - case DataTypes.REAL_SEP.name: - for (const e of vals) { - let val = e.attr(attrName); - val = val.replaceAll(',', ''); - val = parseFloatData(val); - e.html(val); - } - break; - case DataTypes.INTEGER_SEP.name: - for (const e of vals) { - let val = e.attr(attrName); - val = val.replaceAll(',', ''); - val = parseIntData(val); - e.html(val); - } - break; - case DataTypes.EU_REAL_SEP.name: - for (const e of vals) { - let val = e.attr(attrName); - val = val.replaceAll('.', ''); - val = val.replaceAll(',', '.'); - val = parseFloatData(val); - e.html(val); - } - break; - case DataTypes.EU_INTEGER_SEP.name: - for (const e of vals) { - let val = e.attr(attrName); - val = val.replaceAll('.', ''); - val = val.replaceAll(',', '.'); - val = parseIntData(val); - e.html(val); - } - break; - default: - for (const e of vals) { - let val = e.attr(attrName); - val = trimBoth(String(val)); - e.html(val); - } - break; - } +const ICON_STATUS = { + SUCCESS: 'success', + PROCESSING: 'processing', + WARNING: 'warning', }; - -const parseFloatData = (v) => { - let val = trimBoth(String(v)); - if (isEmpty(val)) { - val = ''; - } else if (val.toLowerCase() === COMMON_CONSTANT.INF.toLowerCase()) { - val = COMMON_CONSTANT.INF.toLowerCase(); - } else if (val.toLowerCase() === COMMON_CONSTANT.MINF.toLowerCase()) { - val = COMMON_CONSTANT.MINF.toLowerCase(); - } else { - // TODO why do we need to re-parse? - val = parseFloat(Number(val)); - if (isNaN(val)) { - val = ''; - } - } - return val; +const REGISTER_JOB_STATUS = { + DONE: 'DONE', + FAILED: 'FAILED', + PROCESSING: 'PROCESSING', }; const isAddNewMode = () => true; // override end -$(registerFromFileEles.directoryRadios).on("change", (e) => { - const self = $(e.currentTarget) - const value = self[0].value - if(value === "folder"){ - $(registerFromFileEles.fileBrowser).hide() - $(registerFromFileEles.folderBrowser).show() - } else if (value === "file"){ - $(registerFromFileEles.folderBrowser).hide() - $(registerFromFileEles.fileBrowser).show() +$(registerFromFileEles.directoryRadios).on('change', (e) => { + const self = $(e.currentTarget); + const value = self[0].value; + if (value === 'folder') { + $(registerFromFileEles.fileBrowser).hide(); + $(registerFromFileEles.folderBrowser).show(); + } else if (value === 'file') { + $(registerFromFileEles.folderBrowser).hide(); + $(registerFromFileEles.fileBrowser).show(); } -}) - -const resourceSelection = (resource_type) => { - fetch(`/ap/api/setting/browser/${resource_type}`, {cache: 'no-store'}) - .then(res => res.json()) - .then(res => { - if (res.path) { - $(inputDOMByPath[res.kind]).val(res.path).change(); - } - }); -} - -// fileHandle is a FileSystemFileHandle -// withWrite is a boolean set to true if write - -async function verifyPermission(fileHandle, withWrite) { - const opts = {}; - if (withWrite) { - opts.mode = "readwrite"; - } - - const opfsRoot = await navigator.storage.getDirectory(); - // A FileSystemDirectoryHandle whose type is "directory" - // and whose name is "". - console.log(opfsRoot); - - // Check if we already have permission, if so, return true. - if ((await fileHandle.queryPermission(opts)) === "granted") { - return true; - } - - // Request permission to the file, if the user grants permission, return true. - if ((await fileHandle.requestPermission(opts)) === "granted") { - return true; - } +}); - // The user did not grant permission, return false. - return false; -} - -const handleOnChangeFolderAndFileUrl = async () => { +/** + * Validate input data source URL and file + * @return {Promise} - true: valid, false: invalid + */ +async function validateInputUrlAndFile() { // remove add red border - [registerFromFileEles.fileUrl, registerFromFileEles.folderUrl, registerFromFileEles.refFileUrl].forEach(el => { - removeBorderFromInvalidInput($(el)); - removeQuotesfromInputAndUpdate($(el)); - }) - const isFile = $(registerFromFileEles.checkedDirectoryRadio).val() !== 'folder'; - let url = ''; - let fileUrl = ''; - if (isFile) { - url = $(registerFromFileEles.fileUrl).val().trim(); - // clear folder input - $(registerFromFileEles.folderUrl).val(''); - $(registerFromFileEles.refFileUrl).val(''); - } else { - url = $(registerFromFileEles.folderUrl).val().trim(); - fileUrl = $(registerFromFileEles.refFileUrl).val().trim(); - // clear file input - $(registerFromFileEles.fileUrl).val(''); - hiddenPreviewContentData(); - } + [registerFromFileEles.folderUrl, registerFromFileEles.refFileUrl].forEach( + (el) => { + removeBorderFromInvalidInput(el); + }, + ); + + const urlInfo = await getUrlInfo(); resetProgressBar(); - if (!url) { + if (!urlInfo.url) { disableRegisterDataFileBtn(); resetPreviewTableContent(); - return; - }; - enableRegisterDataFileBtn(); - displayPreviewContentData(); + clearCacheDatasourceConfig(); + showHideRefFile(false); + return false; + } - const checkResult = await checkFolder(url, isFile) + const checkResult = await checkFolder( + urlInfo.isFile ? urlInfo.fileUrl : urlInfo.url, + urlInfo.isFile, + ); if (!checkResult.is_valid || !checkResult.is_valid_file) { // show error msg to the right side addMessengerToProgressBar(checkResult.err_msg, ICON_STATUS.WARNING); - if (isFile) { - addBorderToInvalidInput($(registerFromFileEles.fileUrl)); - disableRegisterDataFileBtn(); - } else { - addBorderToInvalidInput($(registerFromFileEles.folderUrl)); - disableRegisterDataFileBtn(); - } + addBorderToInvalidInput($(registerFromFileEles.folderUrl)); + disableRegisterDataFileBtn(); resetPreviewTableContent(); - return; + return false; } - if (!isFile && fileUrl) { + if (!urlInfo.isFile && urlInfo.fileUrl) { // check selected filename - const checkFileName = await checkFolder(fileUrl, true) + const checkFileName = await checkFolder(urlInfo.fileUrl, true); if (!checkFileName.is_valid || !checkFileName.is_valid_file) { // show error msg to the right side - addMessengerToProgressBar(checkFileName.err_msg, ICON_STATUS.WARNING); + addMessengerToProgressBar( + checkFileName.err_msg, + ICON_STATUS.WARNING, + ); addBorderToInvalidInput($(registerFromFileEles.refFileUrl)); disableRegisterDataFileBtn(); resetPreviewTableContent(); + return false; + } + } + + return true; +} + +/** + * Handle Url | File Url changes + * @param {boolean} isVerifyUrl - true: will do check url is file or not, false: do not check + * @return {Promise} + */ +const handleOnChangeFolderAndFileUrl = async (isVerifyUrl) => { + // remove add red border + [registerFromFileEles.folderUrl, registerFromFileEles.refFileUrl].forEach( + (el) => { + removeQuotesfromInputAndUpdate(el); + removeLastBackslashFromInputAndUpdate(el); + }, + ); + hiddenPreviewContentData(); + removeExtendSections(); + + if (isVerifyUrl) { + const url = $(registerFromFileEles.folderUrl).val().trim(); + const folderOrFileInfo = await checkFolderOrFile(url); + // Show modal confirm import one data file of all files in the same folder + if (folderOrFileInfo.isFile) { + $(registerFromFileEles.registerAllFilesButton).data('url', url); + $(registerFromFileEles.confirmRegisterByFile).modal('show'); return; + } else { + showHideRefFile(true); } } + const isValid = await validateInputUrlAndFile(); + if (!isValid) return; + // show ✔ ファイルが選択されました msg addMessengerToProgressBar(registerI18n.i18nProgressSourceSelected); - fillDsNameAndProcessName(url, isFile); - - // show latest record - const formData = new FormData(); - if (isFile) { - formData.set('fileName', url); - } else { - formData.set('folder', url); - formData.set('fileName', fileUrl); - } + // call api to collect latest records' + const urlInfo = await getUrlInfo(); + const formData = new FormData(); + if (urlInfo.isFile) { + formData.set('fileName', urlInfo.fileUrl); + } else { + formData.set('folder', urlInfo.url); + formData.set('fileName', urlInfo.fileUrl); + } + const request = getLatestRecord(formData); - await getLatestRecord(formData); + await handleResponseData(request); + enableRegisterDataFileBtn(); }; - -const fillDsNameAndProcessName = (url, isFile) => { +const fillDatasourceName = (url, isFile) => { checkOnFocus = false; const folderName = getDbSourceAndProcessNameFromUrl(url, isFile); // loading from external api const params = getRequestParams(); if (params.loadGUIFromUrl) { // fill datasource and proc name fields if not provided - if(!params.dataSourceName) { - const folderName = getDbSourceAndProcessNameFromUrl(url, isFile); + if (!params.dataSourceName) { registerFromFileEles.databaseName.val(folderName); + registerFromFileEles.databaseName[0].dataset.originalValue = + folderName; } + return; + } + + registerFromFileEles.databaseName.val(folderName); + registerFromFileEles.databaseName[0].dataset.originalValue = folderName; +}; + +const fillProcessName = (url, isFile) => { + checkOnFocus = false; + const folderName = getDbSourceAndProcessNameFromUrl(url, isFile); + registerFromFileEles.processOriginName.val(folderName); + registerFromFileEles.processEnName[0].dataset.originalValue = folderName; + registerFromFileEles.processEnName.val(folderName).trigger('change'); + + // loading from external api + const params = getRequestParams(); + if (params.loadGUIFromUrl) { + // fill proc name fields if not provided if (isJPLocale && !params.procesNameJp) { - registerFromFileEles.processJapaneseName.val(folderName).trigger('change'); + registerFromFileEles.processJapaneseName[0].dataset.originalValue = + folderName; + registerFromFileEles.processJapaneseName + .val(folderName) + .trigger('change'); } else if (!isJPLocale && !params.processNameLocal) { - registerFromFileEles.processLocalName.val(folderName).trigger('change'); + registerFromFileEles.processLocalName[0].dataset.originalValue = + folderName; + registerFromFileEles.processLocalName + .val(folderName) + .trigger('change'); } return; } + // fill data source name - registerFromFileEles.databaseName.val(folderName); if (isJPLocale) { - registerFromFileEles.processJapaneseName.val(folderName).trigger('change'); + registerFromFileEles.processJapaneseName[0].dataset.originalValue = + folderName; + registerFromFileEles.processJapaneseName + .val(folderName) + .trigger('change'); } else { + registerFromFileEles.processLocalName[0].dataset.originalValue = + folderName; registerFromFileEles.processLocalName.val(folderName).trigger('change'); } }; -const checkEmptyDataSourceAndProcessName = () => { - const dbsName = registerFromFileEles.databaseName.val(); - const procNameEn = registerFromFileEles.processEnName.val(); +/** + * Check data source name is empty or not + * @return {boolean} - true: datasource name is empty, otherwise. + */ +function isDataSourceNameEmpty() { + removeBorderFromInvalidInput(registerFromFileEles.databaseName); + const isEmpty = registerFromFileEles.databaseName.val().trim() === ''; + if (isEmpty) { + addMessengerToProgressBar( + registerI18n.i18nDataSourceNameIsEmpty, + ICON_STATUS.WARNING, + ); + addBorderToInvalidInput(registerFromFileEles.databaseName); + } - if (!dbsName && !procNameEn) return false; + return isEmpty; +} - return true; -}; +/** + * Check all process names are empty or not + * @return {boolean} - true: at least one process name is empty, false: all process names are not empty + */ +function isProcessNameEmpty() { + let isEmpty = false; + document + .querySelectorAll( + 'div[id^="procSettingModal"] form[id^="procCfgForm"] input[name="processName"]', + ) + .forEach((processNameElement) => { + const $processNameElement = $(processNameElement); + removeBorderFromInvalidInput($processNameElement); + if (processNameElement.value.trim() === '') { + isEmpty = true; + addBorderToInvalidInput($processNameElement); + } + }); -const checkDuplicatedDbsAndProcessName = async () => { - [registerFromFileEles.databaseName, registerFromFileEles.processEnName, registerFromFileEles.processJapaneseName, registerFromFileEles.processLocalName].forEach(el => { - removeBorderFromInvalidInput(el); - }) + if (isEmpty) { + addMessengerToProgressBar( + registerI18n.i18nProcessNameIsEmpty, + ICON_STATUS.WARNING, + ); + } + + return isEmpty; +} + +/** + * Check Data Source Name is duplicated with exist ones in DB or not + * @return {Promise} - true: duplicate with exist data source name in DB, false: unique (not duplicate) + */ +async function isDataSourceNameDuplicate() { + removeBorderFromInvalidInput(registerFromFileEles.databaseName); const dbsName = registerFromFileEles.databaseName.val(); - const procNameEn = registerFromFileEles.processEnName.val(); - const procNameJp = registerFromFileEles.processJapaneseName.val(); - const procNameLocal = registerFromFileEles.processLocalName.val(); - let isValid = true; + let isDuplicate = false; const isDuplicatedDbsName = await checkDuplicatedDataSourceName(dbsName); - const [isDuplicatedProcNameEn, isDuplicatedProcNameJp, isDuplicatedProcNameLocal] = await checkDuplicatedProcessName(procNameEn, procNameJp, procNameLocal); if (isDuplicatedDbsName) { - isValid = false; + isDuplicate = true; // show duplicated dbs msg - addMessengerToProgressBar(registerI18n.i18nDataSourceNameIsAlreadyRegistered, ICON_STATUS.WARNING); + addMessengerToProgressBar( + registerI18n.i18nDataSourceNameIsAlreadyRegistered, + ICON_STATUS.WARNING, + ); addBorderToInvalidInput(registerFromFileEles.databaseName); } - if (isDuplicatedProcNameEn || isDuplicatedProcNameJp || isDuplicatedProcNameLocal) { - isValid = false; - // show duplicated process msg - addMessengerToProgressBar(registerI18n.i18nProcessNameIsAlreadyRegistered, ICON_STATUS.WARNING); + return isDuplicate; +} - if (isDuplicatedProcNameEn) { - addBorderToInvalidInput(registerFromFileEles.processEnName); - } - if (isDuplicatedProcNameJp) { - addBorderToInvalidInput(registerFromFileEles.processJapaneseName); - } - if (isDuplicatedProcNameLocal) { - addBorderToInvalidInput(registerFromFileEles.processLocalName); +/** + * Check Process Names is duplicated with exist ones in DB and each others or not + * @return {Promise} - true: duplicate, false: not duplicate + */ +async function isProcessNameDuplicate() { + const processSystemNameElements = document.querySelectorAll( + 'input[name="processName"]', + ); + const processJapaneseNameElements = document.querySelectorAll( + 'input[name="processJapaneseName"]', + ); + const processLocalNameElements = document.querySelectorAll( + 'input[name="processLocalName"]', + ); + + [ + ...processSystemNameElements, + ...processJapaneseNameElements, + ...processLocalNameElements, + ].forEach((el) => { + removeBorderFromInvalidInput($(el)); + }); + + let isDuplicate = false; + // Check duplicate with exist processes in Database + for (let i = 0; i < processSystemNameElements.length; i++) { + const processSystemNameElement = processSystemNameElements[i]; + const processJapaneseNameElement = processJapaneseNameElements[i]; + const processLocalNameElement = processLocalNameElements[i]; + const [ + isDuplicatedNameSystem, + isDuplicatedNameJapanese, + isDuplicatedNameLocal, + ] = await checkDuplicatedProcessName( + processSystemNameElement.value, + processJapaneseNameElement.value, + processLocalNameElement.value, + ); + if ( + isDuplicatedNameSystem || + isDuplicatedNameJapanese || + isDuplicatedNameLocal + ) { + isDuplicate = true; + if (isDuplicatedNameSystem) { + addBorderToInvalidInput($(processSystemNameElement)); + } + if (isDuplicatedNameJapanese) { + addBorderToInvalidInput($(processJapaneseNameElement)); + } + if (isDuplicatedNameLocal) { + addBorderToInvalidInput($(processLocalNameElement)); + } } } - return isValid; -}; + // Check duplicate each others + [ + processSystemNameElements, + processJapaneseNameElements, + processLocalNameElements, + ].forEach((nameElements) => { + const existNames = []; + nameElements.forEach((nameElement) => { + if (nameElement.value === '' || nameElement.value == null) { + // No check for empty name + return true; + } + + if (existNames.includes(nameElement.value)) { + isDuplicate = true; + addBorderToInvalidInput($(nameElement)); + } else { + existNames.push(nameElement.value); + } + return true; + }); + }); + + if (isDuplicate) { + // show duplicated process msg + addMessengerToProgressBar( + registerI18n.i18nProcessNameIsAlreadyRegistered, + ICON_STATUS.WARNING, + ); + } + + return isDuplicate; +} + +/** + * Add Red Border To Target Input + * @param {jQuery} inputEl - an input jQuery object + */ const addBorderToInvalidInput = (inputEl) => { inputEl.addClass('column-name-invalid'); }; +/** + * Remove Red Border To Target Input + * @param {jQuery} inputEl - an input jQuery object + */ const removeBorderFromInvalidInput = (inputEl) => { inputEl.removeClass('column-name-invalid'); }; +/** + * Check folder Url Info + * @param {string} folderUrl - a folder path + * @param {boolean} isFile - is file or not + * @return {Promise<{ + * status: number, + * url: string, + * is_exists: boolean, + * dir: string, + * not_empty_dir: boolean, + * is_valid: boolean, + * err_msg: string, + * is_valid_file: boolean, + * }>} + */ const checkFolder = async (folderUrl, isFile) => { const data = { url: folderUrl, - isFile: isFile + isFile: isFile, }; - const response = await fetchData('/ap/api/setting/check_folder', JSON.stringify(data), 'POST'); - return response; + return await fetchData( + '/ap/api/setting/check_folder', + JSON.stringify(data), + 'POST', + ); }; -const getLatestRecord = async (data) => { - // '/ap/api/setting/show_latest_records' - try { - const option = { - url: '/ap/api/setting/show_latest_records', - data: data, - dataType: 'json', - type: 'POST', - contentType: false, - processData: false, - cache: false, +/** + * Get latest record + * @param data + * @return {Promise} - an object that contains all information of data source and process config + */ +const getLatestRecord = (data) => + new Promise((resolve, reject) => { + try { + const option = { + url: '/ap/api/setting/show_latest_records_for_register_by_file', + data: data, + dataType: 'json', + type: 'POST', + contentType: false, + processData: false, + cache: false, + }; + + $.ajax({ + ...option, + success: (json) => { + resolve(json); + }, + error: (jqXHR, textStatus, errorThrown) => { + reject(jqXHR, textStatus, errorThrown); + }, + }).then(() => {}); + } catch (e) { + console.log(e); + } + }); + +/** + * Render Datasource Config Base on response data + * @param {LatestRecordOfProcess} data - a response data that contains all process config & data source information + * @return {Promise} + */ +async function renderDatasourceConfig(data) { + const urlInfo = await getUrlInfo(); + fillDatasourceName( + urlInfo.isFile ? urlInfo.fileUrl : urlInfo.url, + urlInfo.isFile, + ); + if (data.datasourceConfig?.master_type === 'V2') { + // In case of V2 data + } else { + // TODO: check this code necessary ??? + // In case of OTHER csv + fillProcessName( + urlInfo.isFile ? urlInfo.fileUrl : urlInfo.url, + urlInfo.isFile, + ); + } + + const datasourceNameElement = document.getElementById('databaseName'); + data.datasourceConfig.name = datasourceNameElement.value.trim(); + data.datasourceConfig.csv_detail.is_file_path = urlInfo.isFile; + datasourceNameElement.__cache__ = data.datasourceConfig; +} + +/** + * Clear cache of data source config + */ +function clearCacheDatasourceConfig() { + const datasourceNameElement = document.getElementById('databaseName'); + delete datasourceNameElement.__cache__; +} + +/** + * Handle response data -> render process config UI + * @param {Promise} request + * @return {Promise} + */ +async function handleResponseData(request) { + addMessengerToProgressBar( + registerI18n.i18nScanning, + ICON_STATUS.PROCESSING, + registerSteps.SCANNING, + ); + + const data = await request; + + // render data source config before render process config + await renderDatasourceConfig(data); + + const processConfigs = + /** @type {ProcessData[]} */ + data.datasourceConfig.master_type !== 'V2' + ? await convertStructureData(data) + : convertStructureDataV2(data); + displayPreviewContentData(); + renderProcessConfig(processConfigs); + + addMessengerToProgressBar( + registerI18n.i18nScanning, + ICON_STATUS.SUCCESS, + registerSteps.SCANNING, + true, + ); +} + +/** + * Convert Structure Data from other to V2 + * @param {LatestRecordOfProcess} data - a response data that contains all process config & data source information + * @return {Promise<[{data: {name_local: null, columns: {}[], name: *, name_jp: *, is_csv: boolean, name_en: *, shown_name: *}, rows: {}[]}]>} + */ +async function convertStructureData(data) { + const urlInfo = await getUrlInfo(); + const dataSourceAndProcessName = getDbSourceAndProcessNameFromUrl( + urlInfo.isFile ? urlInfo.fileUrl : urlInfo.url, + urlInfo.isFile, + ); + const otherData = /** @type OtherProcessData */ data.processConfigs[0]; + return [ + { + data: { + columns: otherData.cols, + is_csv: true, + name: dataSourceAndProcessName, + name_en: dataSourceAndProcessName, + name_jp: dataSourceAndProcessName, + name_local: null, + shown_name: dataSourceAndProcessName, + origin_name: dataSourceAndProcessName, + dummy_datetime_idx: otherData.dummy_datetime_idx, + }, + rows: otherData.rows, + }, + ]; +} + +/** + * Convert Structure Data from other to V2 + * @param {LatestRecordOfProcess} data - a response data that contains all process config & data source information + * @description THIS METHOD ONLY USED FOR EDGE SERVER (NOT BRIDGE STATION) + * @return {[{data: {name_local: null, columns: {}[], name: *, name_jp: *, is_csv: boolean, name_en: *, shown_name: *}, rows: {}[]}]} + */ +function convertStructureDataV2(data) { + const isShowJapaneseName = docCookies.getItem('locale') === 'ja'; + return data.processConfigs.map((processConfig) => { + return { + data: { + columns: processConfig.cols, + is_csv: true, + name: processConfig.name, + name_en: processConfig.name_en, + name_jp: processConfig.name_jp, + name_local: processConfig.name_local, + shown_name: isShowJapaneseName + ? processConfig.name_jp + : processConfig.name_en, + origin_name: processConfig.origin_name, + dummy_datetime_idx: processConfig.dummy_datetime_idx, + }, + rows: processConfig.rows, }; + }); +} - $.ajax({ - ...option, - success: async (json) => { - prcPreviewData = json; - dataGroupType = json.data_group_type; - const dummyDatetimeIdx = json.dummy_datetime_idx; - json.cols = json.cols.map(col => { - return { - ...col, - is_checked: true, - } - }) - generateProcessList(json.cols, json.rows, dummyDatetimeIdx, true, true, true); - } - }); +/** + * Render (1-n) Process Config(s) for response data + * @param {ProcessData[]} data - a response data that contains all process config(s) information + */ +function renderProcessConfig(data) { + data.forEach((processData, index) => { + // TODO: is_checked attribute must be include in response data. + processData.data.columns.forEach( + (processColumnConfig) => (processColumnConfig.is_checked = true), + ); + + // This set id logic ONLY APPLY for EDGE SERVER + processData.data.id = + processData.data.id == null ? index : processData.data.id; + + /** @type ProcessConfigSection */ + let processConfigSectionObj; + if (index === 0) { + // In case of main section, no need to render + processConfigSectionObj = + ProcessConfigSection.createProcessConfigSectionForMain( + processData.data, + processData.rows, + ); + } else { + // In case of extend section, need to render + processConfigSectionObj = + ProcessConfigSection.createProcessConfigSectionForExtend( + processData.data, + processData.rows, + ); + + processConfigSectionObj.render(); + } - } catch (e) { - console.log(e); - } -}; + processConfigSectionObj.injectEvents(); + }); +} -const addMessengerToProgressBar = (msg = '', - status= ICON_STATUS.SUCCESS, - step = '', - modify= false, - addJobLink = false, - ) => { +const addMessengerToProgressBar = ( + msg = '', + status = ICON_STATUS.SUCCESS, + step = '', + modify = false, + addJobLink = false, +) => { const progressContent = $(registerFromFileEles.progressDisplay); - let iconClass = '' - let stepClass = '' - if(step){ - stepClass = `progress-msg-${step}` + let iconClass = ''; + let stepClass = ''; + if (step) { + stepClass = `progress-msg-${step}`; } - switch(status) { + switch (status) { case ICON_STATUS.SUCCESS: - iconClass = 'fa-check' + iconClass = 'fa-check'; break; case ICON_STATUS.WARNING: - iconClass = 'fa-triangle-exclamation' + iconClass = 'fa-triangle-exclamation'; break; case ICON_STATUS.PROCESSING: - iconClass = 'fa-solid fa-spinner' + iconClass = 'fa-solid fa-spinner fa-spin'; break; default: break; } - const msgContent = status === ICON_STATUS.WARNING && addJobLink ? `${msg}` : msg; + const msgContent = + status === ICON_STATUS.WARNING && addJobLink + ? `${msg}` + : msg; const msgDiv = `
    ${msgContent}
    `; - if(!modify){ + if (!modify) { progressContent.prepend(msgDiv); - } - else { + } else { $(`.${stepClass}`).remove(); - progressContent.prepend(msgDiv) + progressContent.prepend(msgDiv); } }; const resetProgressBar = () => { $(registerFromFileEles.progressDisplay).empty(); - [registerFromFileEles.databaseName, registerFromFileEles.processEnName, registerFromFileEles.processJapaneseName, registerFromFileEles.processLocalName].forEach(el => { + [ + registerFromFileEles.databaseName, + registerFromFileEles.processEnName, + registerFromFileEles.processJapaneseName, + registerFromFileEles.processLocalName, + ].forEach((el) => { el.val(''); removeBorderFromInvalidInput(el); - }) + }); }; - const resetPreviewTableContent = () => { procModalElements.processColumnsTableBody.empty(); procModalElements.processColumnsSampleDataTableBody.empty(); }; -const checkDuplicatedDataSourceName = async (dbsName = '') => { - // /ap/api/setting/check_duplicated_db_source +/** + * Check Duplicated Data Source Name + * @param {string} datasourceName + * @return {Promise} - true: is duplicate, false: not duplicate + */ +const checkDuplicatedDataSourceName = async (datasourceName = '') => { const data = { - name: dbsName - } - const response = await fetchData('/ap/api/setting/check_duplicated_db_source', JSON.stringify(data), 'POST'); + name: datasourceName, + }; + const response = await fetchData( + '/ap/api/setting/check_duplicated_db_source', + JSON.stringify(data), + 'POST', + ); return response.is_duplicated; }; -const checkDuplicatedProcessName = async (nameEn = '', nameJp = '', nameLocal = '') => { - // /ap/api/setting/check_duplicated_db_source +/** + * Check Duplicated Process Name + * @param {string} nameEn - Name English + * @param {string} nameJp - Name Japanese + * @param {string} nameLocal - Name Local + * @return {Promise} - a list of boolean + * - true: is duplicate | false: not duplicate, <--English--> + * - true: is duplicate | false: not duplicate, <--Japanese--> + * - true: is duplicate | false: not duplicate, <--Local--> + */ +const checkDuplicatedProcessName = async ( + nameEn = '', + nameJp = '', + nameLocal = '', +) => { const data = { name_en: nameEn, name_jp: nameJp, - name_local: nameLocal - } - const response = await fetchData('/ap/api/setting/check_duplicated_process_name', JSON.stringify(data), 'POST'); + name_local: nameLocal, + }; + /** @type {{is_duplicated: boolean[3]}} */ + const response = await fetchData( + '/ap/api/setting/check_duplicated_process_name', + JSON.stringify(data), + 'POST', + ); return response.is_duplicated; }; const getDbSourceAndProcessNameFromUrl = (url, isFile) => { const fullPath = url.replace(/\\/g, '/').split('/'); - const folderName = isFile ? fullPath[fullPath.length - 2] : fullPath[fullPath.length - 1]; - return folderName; + return isFile + ? fullPath[fullPath.length - 2] + : fullPath[fullPath.length - 1]; }; -const saveDataSourceAndProc = async () => { - processInfo = null; - // clear old status - // to do: clear all #progressDisplay +/** + * Get Url info + * @return {Promise<{isFile: boolean, url: string, fileUrl: string}>} + */ +function getUrlInfo() { + return new Promise(function (resolve) { + let url = $(registerFromFileEles.folderUrl).val().trim(); + let fileUrl = $(registerFromFileEles.refFileUrl).val().trim(); + checkFolderOrFile(url).then((urlInfo) => { + let isFile; + if (urlInfo.isFile) { + isFile = true; + fileUrl = url; + url = getFolderPathFromFilePath(url); + } else { + isFile = + fileUrl !== '' && + $(registerFromFileEles.containerReferenceFile)[0].style + .display !== 'none'; + } - // check duplicated dbs and process name - const isValid = await checkDuplicatedDbsAndProcessName(); - if (!isValid) return; + resolve({ + url: url, + isFile: isFile, + fileUrl: fileUrl, + }); + }); + }); +} - const isFillDbs = checkEmptyDataSourceAndProcessName(); - if (!isFillDbs) return; - - addMessengerToProgressBar(registerI18n.i18nProcessRegisterStart) - addMessengerToProgressBar(registerI18n.i18nProgressFolderCheck) - let dataSourcePath = ''; - const dataSourceName = $(registerFromFileEles.databaseName).val() - const registerMode = $(registerFromFileEles.checkedDirectoryRadio).val() - const selectJson = getSelectedColumnsAsJson(); - const [procCfgData, unusedColumns] = collectProcCfgData(selectJson); - if(registerMode === "folder") { - dataSourcePath = $(inputDOMByPath.directory).val() - } - else if(registerMode === "file") { - dataSourcePath = $(inputDOMByPath.file).val() - } - const dictCsvInfo = { - name: dataSourceName, - type: "CSV", - csv_detail: { - directory: dataSourcePath, - delimiter: "Auto", - csv_columns: procCfgData.columns, +/** + * Check there must be a main::Datetime column for each process + * @return {boolean} - true: main::Datetime is already selected, false: not have main::Datetime in process config + */ +const isMainDatetimeColumnSelected = () => { + let isSelected = true; + const tableBodyElements = document.querySelectorAll( + 'table[name=processColumnsTable] tbody', + ); + tableBodyElements.forEach((tableBodyElement) => { + const $mainDatetime = $(tableBodyElement).find( + 'td.column-date-type button>span[data-attr-key="is_get_date"]', + ); + + const isExistMainDatetimeColumn = $mainDatetime.length > 0; + const isMainDatetimeColumnChecked = $mainDatetime + .closest('tr') + .find('td.column-raw-name input[type="checkbox"]') + .is(':checked'); + if (!(isExistMainDatetimeColumn && isMainDatetimeColumnChecked)) { + isSelected = false; } - }; + }); - const data = { - proc_config: procCfgData, - import_data: true, - unused_columns: unusedColumns, - csv_info: dictCsvInfo, + if (!isSelected) { + addMessengerToProgressBar( + registerI18n.i18nErrorNoGetdate, + ICON_STATUS.WARNING, + ); } + + return isSelected; +}; + +/** + * Collect Process Data + * @return {RequestProcessData[]} - a list of process data + */ +function collectProcessConfigInfos() { + const processConfigs = []; + const sectionHTMLObjects = document.querySelectorAll( + '[id^="procSettingModal"]', + ); + sectionHTMLObjects.forEach((sectionHTMLObject) => { + const processConfigSection = + sectionHTMLObject.__object__ != null + ? sectionHTMLObject.__object__ + : new ProcessConfigSection(sectionHTMLObject); + const requestProcessConfig = + processConfigSection.collectProcessConfig(); + const processConfig = + ProcessConfigSection.splitUsedColumnAndUnusedColumn( + requestProcessConfig, + ); + processConfigs.push(processConfig); + }); + + return processConfigs; +} + +/** + * Collect data source config + * @return {DatasourceConfig} - an object of data source config + */ +function collectDatasourceInfo() { + const datasourceNameElement = document.getElementById('databaseName'); + datasourceNameElement.__cache__.name = datasourceNameElement.value.trim(); + return datasourceNameElement.__cache__; +} + +/** + * Collect all information of data source and process config + * @return {{ + * import_data: boolean, + * proc_configs: RequestProcessData[], + * request_id: string, + * csv_info: DatasourceConfig, + * }} + */ +function collectAllDataInfo() { + const processConfigs = collectProcessConfigInfos(); + const datasourceConfig = collectDatasourceInfo(); + window.RegisterByFileRequestID = create_UUID(); + window.newProcessIds = undefined; + window.sseProcessIds = []; + + return { + csv_info: datasourceConfig, + proc_configs: processConfigs, + import_data: true, + request_id: window.RegisterByFileRequestID, + }; +} + +/** + * Save DataSource And Processes + * @return {Promise} + */ +const saveDataSourceAndProc = async () => { + const isDSNameEmpty = isDataSourceNameEmpty(); + const isProcNameEmpty = isProcessNameEmpty(); + if (isDSNameEmpty || isProcNameEmpty) return; + + // check duplicated dbs and process name + const isDSNameDuplicate = await isDataSourceNameDuplicate(); + const isProcNameDuplicate = await isProcessNameDuplicate(); + if (isDSNameDuplicate || isProcNameDuplicate) return; + + // check is_get_date column is already defined + const isDatetimeColumnSelected = isMainDatetimeColumnSelected(); + if (!isDatetimeColumnSelected) return; + + addMessengerToProgressBar(registerI18n.i18nProcessRegisterStart); + addMessengerToProgressBar(registerI18n.i18nProgressFolderCheck); + + const data = collectAllDataInfo(); try { - $(registerFromFileEles.registerButton).prop('disabled', true).removeClass("btn-primary").addClass("btn-secondary"); - const response = await fetchData('/ap/api/setting/register_source_and_proc', JSON.stringify(data), 'POST'); - processInfo = response.process_info; - registeredProcessId = processInfo.id; + $(registerFromFileEles.registerButton) + .prop('disabled', true) + .removeClass('btn-primary') + .addClass('btn-secondary'); + /** + * @type {{ + * message: string, + * is_error: boolean, + * processIds: number[], + * }} + */ + const response = await fetchData( + '/ap/api/setting/register_source_and_proc', + JSON.stringify(data), + 'POST', + ).catch((err) => { + addMessengerToProgressBar( + err.responseJSON.message, + ICON_STATUS.WARNING, + ); + console.error(`[Backend Error] ${err.responseJSON.detail}`); + }); + + if (response) { + addMessengerToProgressBar(response.message, ICON_STATUS.SUCCESS); + window.newProcessIds = response.processIds; + console.log(response.processIds); + } } catch (e) { - console.log(e) + console.log(e); } }; +/** + * Redirect To CHM Page + * @param processId + * @return {Promise} + */ const redirectToCHMPage = async (processId) => { // go to chm after import data // const processId = processInfo.id; - const res = await fetchData(`/ap/api/setting/redirect_to_chm_page/${processId}`, '', 'GET'); + const res = await fetchData( + `/ap/api/setting/redirect_to_chm_page/${processId}`, + '', + 'GET', + ); + goToOtherPage(res.url, true); +}; + +const redirectToPage = async (processIds, page) => { + const data = { + page: page, + processIds: processIds, + }; + const res = await fetchData( + `/ap/api/setting/redirect_to_page`, + JSON.stringify(data), + 'POST', + ); goToOtherPage(res.url, true); }; +/** + * Update Data Register Status + * @param {{ + * data: { + * RegisterByFileRequestID: string, + * step: string, + * status: string, + * is_first_imported: boolean, + * process_id: number, + * use_dummy_datetime: boolean, + * }, + * }} postDat - a dictionary contains SSE message from Backend + */ const updateDataRegisterStatus = (postDat) => { - if (postDat.data.process_id !== registeredProcessId) return; + if (postDat.data.RegisterByFileRequestID !== window.RegisterByFileRequestID) + return; + + // switch (postDat.data.step) { + // case registerSteps.GEN_DATA_TABLE: + // addMessengerToProgressBar( + // registerI18n.i18nProgressGenDataTable, + // ICON_STATUS.PROCESSING, + // registerSteps.GEN_DATA_TABLE, + // ); + // break; + // + // case registerSteps.SCAN_FILE: + // addMessengerToProgressBar( + // registerI18n.i18nProgressGenDataTable, + // ICON_STATUS.SUCCESS, + // registerSteps.GEN_DATA_TABLE, + // true, + // ); + // addMessengerToProgressBar( + // registerI18n.i18nProgressScanFile, + // ICON_STATUS.PROCESSING, + // registerSteps.SCAN_FILE, + // ); + // break; + // + // case registerSteps.SCAN_MASTER: + // addMessengerToProgressBar( + // registerI18n.i18nProgressScanFile, + // ICON_STATUS.SUCCESS, + // registerSteps.SCAN_FILE, + // true, + // ); + // addMessengerToProgressBar( + // registerI18n.i18nProgressScanMaster, + // ICON_STATUS.PROCESSING, + // registerSteps.SCAN_MASTER, + // ); + // break; + // + // case registerSteps.SCAN_DATA_TYPE: + // addMessengerToProgressBar( + // registerI18n.i18nProgressScanMaster, + // ICON_STATUS.SUCCESS, + // registerSteps.SCAN_MASTER, + // true, + // ); + // addMessengerToProgressBar( + // registerI18n.i18nProgressScanDataType, + // ICON_STATUS.PROCESSING, + // registerSteps.SCAN_DATA_TYPE, + // ); + // break; + // + // case registerSteps.PULL_CSV_DATA: + // addMessengerToProgressBar( + // registerI18n.i18nProgressScanDataType, + // ICON_STATUS.SUCCESS, + // registerSteps.SCAN_DATA_TYPE, + // true, + // ); + // addMessengerToProgressBar( + // registerI18n.i18nProgressPullData, + // ICON_STATUS.PROCESSING, + // registerSteps.PULL_CSV_DATA, + // ); + // break; + // } + // processing - if (postDat.data.status === REGISTER_JOB_STATUS.PROCESSING) { - addMessengerToProgressBar( - registerI18n.i18nProgressImportingData, - ICON_STATUS.PROCESSING, - registerSteps.IMPORTING - ) - } - // failed importing - if (postDat.data.status === REGISTER_JOB_STATUS.FAILED) { - addMessengerToProgressBar( - registerI18n.i18nProgressImportingData, - ICON_STATUS.WARNING, - registerSteps.IMPORTING, - true, - true - ) - } - if (postDat.data.status === REGISTER_JOB_STATUS.DONE) { - // modify processing to check icon - addMessengerToProgressBar( - registerI18n.i18nProgressImportingData, - ICON_STATUS.SUCCESS, - registerSteps.IMPORTING, - true - ) - // add finish item - addMessengerToProgressBar( - registerI18n.i18nProgressFinished, - ICON_STATUS.SUCCESS, - registerSteps.IMPORTING - ) + switch (postDat.data.status) { + case REGISTER_JOB_STATUS.PROCESSING: + // addMessengerToProgressBar( + // registerI18n.i18nProgressPullData, + // ICON_STATUS.SUCCESS, + // registerSteps.PULL_CSV_DATA, + // true, + // ); + addMessengerToProgressBar( + registerI18n.i18nProgressImportingData, + ICON_STATUS.PROCESSING, + registerSteps.IMPORTING, + true, + ); + break; + + case postDat.data.status === REGISTER_JOB_STATUS.FAILED: + addMessengerToProgressBar( + registerI18n.i18nProgressImportingData, + ICON_STATUS.WARNING, + registerSteps.IMPORTING, + true, + true, + ); + break; + + case postDat.data.status === REGISTER_JOB_STATUS.DONE: + // modify processing to check icon + addMessengerToProgressBar( + registerI18n.i18nProgressImportingData, + ICON_STATUS.SUCCESS, + registerSteps.IMPORTING, + true, + ); + // add finish item + addMessengerToProgressBar( + registerI18n.i18nProgressFinished, + ICON_STATUS.SUCCESS, + registerSteps.IMPORTING, + true, + ); + break; } + // redirect if first chunk of data be imported if (postDat.data.is_first_imported) { + console.log(postDat.data.process_id); + if (!window.sseProcessIds.includes(postDat.data.process_id)) { + // Add process id into ready list that contains processes have already imported data + window.sseProcessIds.push(postDat.data.process_id); + } + + if ( + window.newProcessIds && + window.newProcessIds.length !== window.sseProcessIds.length + ) { + // in case there are some process that not have data yet, wait to import data + return; + } + + console.log('Ready to show graph...'); + // in case all processes have data, redirect to show graph page setTimeout(async () => { - await redirectToCHMPage(postDat.data.process_id); + const pageRedirect = postDat.data.use_dummy_datetime + ? 'ap/fpp' + : 'ap/chm'; + await redirectToPage(window.newProcessIds, pageRedirect); }, 3000); } }; @@ -644,8 +1177,8 @@ const getRequestParams = () => { estimationFile, dataSourceName, procesNameJp, - processNameLocal - } + processNameLocal, + }; }; const handleLoadGUiFromExternalAPIRequest = () => { @@ -656,7 +1189,7 @@ const handleLoadGUiFromExternalAPIRequest = () => { estimationFile, dataSourceName, procesNameJp, - processNameLocal + processNameLocal, } = getRequestParams(); if (!loadGUIFromUrl) return; @@ -667,7 +1200,6 @@ const handleLoadGUiFromExternalAPIRequest = () => { if (isFile) { $(registerFromFileEles.directoryRadios).val('file').trigger('change'); - registerFromFileEles.fileUrl.val(sourceFile).trigger('change'); } else { if (sourceFolder) { registerFromFileEles.folderUrl.val(sourceFolder).trigger('change'); @@ -678,13 +1210,15 @@ const handleLoadGUiFromExternalAPIRequest = () => { } } - setTimeout(()=> { + setTimeout(() => { // set data source name if (dataSourceName) { registerFromFileEles.databaseName.val(dataSourceName); } if (procesNameJp) { - registerFromFileEles.processJapaneseName.val(procesNameJp).trigger('change'); + registerFromFileEles.processJapaneseName + .val(procesNameJp) + .trigger('change'); } if (processNameLocal) { registerFromFileEles.processLocalName.val(processNameLocal); @@ -695,49 +1229,125 @@ const handleLoadGUiFromExternalAPIRequest = () => { } }, 500); - clickRegisterButtonWhenEnabled() + clickRegisterButtonWhenEnabled(); }; function clickRegisterButtonWhenEnabled() { // poll until all values are filled and button is enabled - if($(registerFromFileEles.registerButton).hasOwnProperty('disabled') || - !($(registerFromFileEles.processEnName).val())){ + if ( + Object.prototype.hasOwnProperty.call( + $(registerFromFileEles.registerButton), + 'disabled', + ) || + !$(registerFromFileEles.processEnName).val() + ) { setTimeout(clickRegisterButtonWhenEnabled, 500); } else { // click register data - $(registerFromFileEles.registerButton).click(); + $(registerFromFileEles.registerButton).trigger('click'); } } const disableRegisterDataFileBtn = () => { - $(registerFromFileEles.registerButton).prop('disabled', true).removeClass('btn-primary').addClass('btn-secondary'); + $(registerFromFileEles.registerButton) + .prop('disabled', true) + .removeClass('btn-primary') + .addClass('btn-secondary'); }; const enableRegisterDataFileBtn = () => { - $(registerFromFileEles.registerButton).prop('disabled', false).removeClass('btn-secondary').addClass('btn-primary'); + $(registerFromFileEles.registerButton) + .prop('disabled', false) + .removeClass('btn-secondary') + .addClass('btn-primary'); }; const removeQuotesfromInputAndUpdate = (inputEl) => { - const url = $(inputEl).val().replace(/"/g, ""); + const url = $(inputEl).val().replace(/"/g, ''); $(inputEl).val(url); -} +}; + +const removeLastBackslashFromInputAndUpdate = (inputEl) => { + const url = $(inputEl).val().replace(/\\$/g, ''); + $(inputEl).val(url); +}; const displayPreviewContentData = () => { $(procModalElements.procPreviewSection).show(); -} +}; const hiddenPreviewContentData = () => { $(procModalElements.procPreviewSection).hide(); +}; + +const showHideRefFile = (isShow) => { + const display = isShow ? '' : 'none'; + $(registerFromFileEles.containerReferenceFile)[0].style.setProperty( + 'display', + display, + 'important', + ); + if (!isShow) { + $(registerFromFileEles.refFileUrl).val(''); + } +}; + +/** + * Get Folder Path From File Path + * @param {string} filePath - a file path + * @return {string} - a folder path + */ +function getFolderPathFromFilePath(filePath) { + const lastSlashIndex = filePath.lastIndexOf('\\'); + const lastForwardSlash = filePath.lastIndexOf('/'); + const lastIndex = Math.max(lastSlashIndex, lastForwardSlash); + return filePath.substring(0, lastIndex).replace(/^\/+|\/+$/g, ''); +} + +const switchToRegisterByFolder = (event) => { + showHideRefFile(true); + + // Change file path to folder path + const filePath = $(event.currentTarget).data('url'); + const folderPath = getFolderPathFromFilePath(filePath); + $(registerFromFileEles.folderUrl).val(folderPath); + + handleOnChangeFolderAndFileUrl(false).then(() => {}); +}; + +/** + * Remove all process configs in extend section html + */ +function removeExtendSections() { + document + .querySelectorAll('div.section.extend-section') + .forEach((extendSection) => $(extendSection).remove()); } -$(document).ready(() => { - checkOnFocus = false; +jQuery(function () { + checkOnFocus = false; // hide folder/file picker button if there is not server admin if (!isAdmin) { $('.btn-browse').css('display', 'none'); } + $(registerFromFileEles.registerAllFilesButton).on( + 'click', + switchToRegisterByFolder, + ); + $(registerFromFileEles.registerOneFileButton).on('click', () => { + showHideRefFile(false); + handleOnChangeFolderAndFileUrl(false).then(() => {}); + }); + disableRegisterDataFileBtn(); handleLoadGUiFromExternalAPIRequest(); -}); \ No newline at end of file + + // This logic is ONLY for EDGE SERVER to avoid bug relate to merge mode + setTimeout(() => { + procModalElements.proc.off('focusout').on('focusout', () => { + checkDuplicateProcessName('data-name-en'); + }); + }, 200); +}); diff --git a/ap/static/setting_module/js/system.js b/ap/static/setting_module/js/system.js new file mode 100644 index 0000000..6d91878 --- /dev/null +++ b/ap/static/setting_module/js/system.js @@ -0,0 +1,188 @@ +const systemElements = { + divSystemConfig: '#cfgSystem', + backupAndRestoreModal: '#backupAndRestoreModal', +}; + +let defaultTimeRange = ''; + +const openBackupAndRestoreModal = () => { + // TODO: this processId assignment is wrong + if (!_.isEmpty(processes)) { + processId = Object.keys(processes)[0]; + } + generateHTMLBackupAndRestoreModal(); + hideRadioDefaultInterval(); + switchBackupRestoreTab(); // Switch to 'Backup' tab at default + $(systemElements.backupAndRestoreModal).modal('show'); + defaultTimeRange = $('#datetimeRangePicker').val(); + // get process id +}; + +const closeBackupAndRestoreModal = () => { + // TODO cleanup + $(systemElements.backupAndRestoreModal).modal('hide'); + // reset default datetime + handleSetValueToDateRangePicker(defaultTimeRange, false); + closeCalenderModal(); + processId = undefined; + + // Release cache function after closing this modal + $('#backupAndRestoreModal')[0].cacheFunction = undefined; +}; + +const generateHTMLBackupAndRestoreModal = () => { + const processSelection = $('#backupAndRestoreProcessSelection'); + + const processLists = Object.values(processes).map((process) => { + return ``; + }); + + // const uuid = create_UUID(); + const uuid = 1; + // must set to end_proc because datetime picker use this ... + const processSelectionId = `end_proc_${uuid}`; + processSelection.html( + ` +${i18nCommon.process} +
    + +
    +`, + ); + + addAttributeToElement(processSelection); + processSelection.addClass('d-flex align-items-center'); + $(`#${processSelectionId}`).on('change', (e) => { + processId = e.currentTarget.value; + setProcessID(); + }); + initializeDateTimeRangePicker(); + showDataFinderButton(processId); +}; + +const getBackupAndRestoreInfo = () => { + const selectDateTimeRange = $('#datetimeRangePicker').val(); + const [starting, ending] = selectDateTimeRange.split( + DATETIME_PICKER_SEPARATOR, + ); + if (starting && ending) { + const startTime = moment.utc(moment(starting)).format(DATETIME_FORMAT); + const endTime = moment.utc(moment(ending)).format(DATETIME_FORMAT); + return { + processId: processId, + startTime: startTime, + endTime: endTime, + }; + } +}; + +const doBackupData = async () => { + const data = getBackupAndRestoreInfo(); + if (data.processId) { + await fetch('/ap/api/setting/backup_data', { + method: 'POST', + body: JSON.stringify({ + process_id: data.processId, + start_time: data.startTime, + end_time: data.endTime, + }), + }); + showBackupDataToastr(); + } + $(systemElements.backupAndRestoreModal).modal('hide'); + closeCalenderModal(); +}; + +const doRestoreData = async () => { + const data = getBackupAndRestoreInfo(); + if (data.processId) { + await fetch('/ap/api/setting/restore_data', { + method: 'POST', + body: JSON.stringify({ + process_id: data.processId, + start_time: data.startTime, + end_time: data.endTime, + }), + }); + showRestoreDataToastr(); + } + $(systemElements.backupAndRestoreModal).modal('hide'); + closeCalenderModal(); +}; + +const hideRadioDefaultInterval = () => { + $('#radioDefaultInterval').parent().addClass('d-none'); +}; + +/** + * Get Data Count For Calendar (Call api to re-get total records of backup or restore) + */ +function getDataCountForCalendar() { + /** @type{function(): void | { + * tableFrom: function(): void, + * tableTo: function(): void, + * }} + * */ + const cacheFunction = document.getElementById( + 'backupAndRestoreModal', + ).cacheFunction; + if (cacheFunction) { + if (_.isFunction(cacheFunction)) { + cacheFunction(); + } else { + for (const func of Object.values(cacheFunction)) { + func(); + } + } + } +} + +/** + * Switch Backup Restore Tab + * @param {HTMLLIElement} liElement - a Li html element + */ +const switchBackupRestoreTab = ( + liElement = document.getElementById('liBackupTab'), +) => { + // Set tab active + liElement.classList.add('active'); + liElement.firstElementChild.classList.add('active'); + liElement.firstElementChild.setAttribute('aria-selected', String(true)); + + // Set another tab deactivate + const anotherLiElement = + liElement.nextElementSibling ?? liElement.previousElementSibling; + anotherLiElement.classList.remove('active'); + anotherLiElement.firstElementChild.classList.remove('active'); + anotherLiElement.firstElementChild.setAttribute( + 'aria-selected', + String(false), + ); + + const aElement = + /** @type{HTMLAnchorElement} */ liElement.firstElementChild; + const currentTab = aElement.getAttribute('href').replace('#', ''); + $('#idFlagBKRT').val(currentTab); + $(`#${aElement.dataset.showButtonId}`).show(); + $(`#${aElement.dataset.hideButtonId}`).hide(); + getDataCountForCalendar(); +}; + +$(() => { + $(systemElements.divSystemConfig)[0].addEventListener( + 'contextmenu', + baseRightClickHandler, + false, + ); + $(systemElements.divSystemConfig)[0].addEventListener( + 'mouseup', + handleMouseUp, + false, + ); +}); diff --git a/ap/static/setting_module/js/trace_config.js b/ap/static/setting_module/js/trace_config.js index 3308952..26e75a5 100644 --- a/ap/static/setting_module/js/trace_config.js +++ b/ap/static/setting_module/js/trace_config.js @@ -1,16 +1,9 @@ -/* eslint-disable consistent-return,prefer-destructuring */ -/* eslint-disable array-callback-return */ -/* eslint-disable no-use-before-define */ -/* eslint-disable guard-for-in */ -/* eslint-disable no-restricted-syntax */ -/* eslint-disable no-unused-vars */ -/* eslint-disable no-undef */ - // TODO use class // global variable to store data of processes let processes = {}; -const getConfigOption = () => JSON.parse(localStorage.getItem('network-config')) || {}; +const getConfigOption = () => + JSON.parse(localStorage.getItem('network-config')) || {}; const configOption = getConfigOption(); let hierarchicalDirection = configOption.direction || 'LR'; @@ -51,6 +44,9 @@ const SEP_LABEL = '\n'; const SEP_PROC = '-'; const SEP_TITLE = '
    '; +const DEFAULT_DELTA_TIME_DATA_LINK = 0; // minute +const DEFAULT_CUTOFF_DATA_LINK = 60; // minute + // define custom locales const i18nNames = { allDigits: $('#i18nAllDigits').text(), @@ -67,7 +63,8 @@ const i18nNames = { linkWithTime: $('#i18nLinkWithTime').text(), i18nCutOff: $('#i18nCutOff').text(), }; -const locale = docCookies.getItem('locale') === 'ja' ? 'jp' : docCookies.getItem('locale'); +const locale = + docCookies.getItem('locale') === 'ja' ? 'jp' : docCookies.getItem('locale'); const locales = {}; locales[locale] = { edit: $('#i18nEdit').text(), @@ -104,6 +101,7 @@ const tracingElements = { deltaDatetimeVisible: '#delta-datetime:visible', inputDeltaDatetime: '.deltaDatetime', inputCutOff: '.cutOff', + datetimeReprClassName: 'datetimeRepr', }; const destroy = () => { @@ -120,15 +118,20 @@ const cancelEdgeEdit = (callback) => { const isStarType = () => hierarchicalDirection === 'Star'; const getMatchingDigits = (item) => { - const result = $(item).find(`input[name*="${tracingElements.subStrOpt}"]:checked`) + const result = $(item) + .find(`input[name*="${tracingElements.subStrOpt}"]:checked`) .map((i, e) => { const itemId = $(e).attr('id').split('-')[1]; // if ($(`#checkbox-${itemId}`).prop('checked')) { if ($(e).val() === '0') { return []; } - const fromDigit = $(`select[name="${tracingElements.fromDigits}-${itemId}"]`).val(); - const toDigits = $(`select[name="${tracingElements.toDigits}-${itemId}"]`).val(); + const fromDigit = $( + `select[name="${tracingElements.fromDigits}-${itemId}"]`, + ).val(); + const toDigits = $( + `select[name="${tracingElements.toDigits}-${itemId}"]`, + ).val(); return [Number(fromDigit), Number(toDigits)]; // } }) @@ -139,11 +142,13 @@ const getMatchingDigits = (item) => { // TODO refactor i18n const validateSubStr = (selfSubstr, targetSubstr) => { // selfSubstr, targetSubstr [[1,3], [2,4]] - const invalidOpts = self => self.filter(([s, e]) => s > e); + const invalidOpts = (self) => self.filter(([s, e]) => s > e); // Check valid options - if (invalidOpts(selfSubstr).length > 0 - || invalidOpts(targetSubstr).length > 0 - || selfSubstr.length !== targetSubstr.length) { + if ( + invalidOpts(selfSubstr).length > 0 || + invalidOpts(targetSubstr).length > 0 || + selfSubstr.length !== targetSubstr.length + ) { return { is_valid: false, message: $('#i18nInvalidDigit').text(), @@ -152,7 +157,11 @@ const validateSubStr = (selfSubstr, targetSubstr) => { // Check self digits same as target digits const invalidDigits = targetSubstr.filter((e, i) => { - if (selfSubstr[i] !== undefined && selfSubstr[i].length > 0 && e.length > 0) { + if ( + selfSubstr[i] !== undefined && + selfSubstr[i].length > 0 && + e.length > 0 + ) { return e[1] - e[0] !== selfSubstr[i][1] - selfSubstr[i][0]; } }, selfSubstr); @@ -168,107 +177,6 @@ const validateSubStr = (selfSubstr, targetSubstr) => { }; }; -const saveEdgeDataToGlobal = (edgeData, callback) => { - if (typeof edgeData.to === 'object') edgeData.to = edgeData.to.id; - if (typeof edgeData.from === 'object') edgeData.from = edgeData.from.id; - edgeData.arrows = 'to'; - - // get Trace Target Data from modal - const targetProcId = $('select[name="edgeForwardProc"]').val(); - edgeData.target_proc = targetProcId; - const targetCols = []; - const targetOrgCols = []; - const targetSubStrs = []; - $('div[id^="edgeForwardCol-"]').find('.form-group').each(function f(idx) { - const colElement = $(this).find('select[name=forwardCol]'); - targetSubStrs.push(getMatchingDigits($(this))); - const colAlias = $('option:selected', colElement).attr('alias'); - const colOrg = $('option:selected', colElement).attr('original'); - if (!isEmpty(colAlias)) targetCols.push(colAlias); - if (!isEmpty(colOrg)) targetOrgCols.push(colOrg); - }); - edgeData.target_col = targetCols; - edgeData.target_orig_col = targetOrgCols; - edgeData.target_substr = targetSubStrs; - - - // get Trace Self Data from modal - const selfProcId = $('select[name="edgeBackProc"]').val(); - edgeData.self_proc = selfProcId; - const selfCols = []; - const selfOrgCols = []; - const selfSubStrs = []; - $('div[id^="edgeBackCol-"]').find('.form-group').each(function f(idx) { - const colElement = $(this).find('select[name=backCol]'); - selfSubStrs.push(getMatchingDigits($(this))); - const colAlias = $('option:selected', colElement).attr('alias'); - const colOrg = $('option:selected', colElement).attr('original'); - if (!isEmpty(colAlias)) selfCols.push(colAlias); - if (!isEmpty(colOrg)) selfOrgCols.push(colOrg); - }); - edgeData.self_col = selfCols; - edgeData.back_orig_col = selfOrgCols; - edgeData.self_substr = selfSubStrs; - - // validate: choose at least 1 column to trace - if (selfCols.length === 0 || targetCols.length === 0) { - displayRegisterMessage( - '#alertMsgCheckSubStr', { - message: i18nNames.i18nNoColumn, - is_error: true, - }, - ); - return; - } - - validEdge = validateSubStr(edgeData.self_substr, edgeData.target_substr); - if (!validEdge.is_valid) { - displayRegisterMessage( - '#alertMsgCheckSubStr', { - message: validEdge.message, - is_error: true, - }, - ); - return; - } - - // save data to external/global dict - mapIdFromIdTo2Edge[`${edgeData.from}-${edgeData.to}`] = edgeData; - - callback(edgeData); - $('#modal-edge-popup').modal('hide'); - return edgeData; -}; - -const objectToArray = obj => Object.keys(obj).map((key) => { - obj[key].id = key; - return obj[key]; -}); - -const resizeExportArea = () => { - exportArea.style.height = `${1 + exportArea.scrollHeight}px`; -}; - -// get alias of a column -const getAliasFromField = (col) => { - const splits = col.split(' as '); - if (splits.length > 0) { - const lastEl = splits[splits.length - 1]; - return lastEl.replace(/"| |'/g, ''); - } - return col; -}; - -// get original column name of a column -const getOrigColumnFromField = (col) => { - const splits = col.split(' as '); - if (splits.length > 0) { - const lastEl = splits[0]; - return lastEl.replace(/"| |'/g, ''); - } - return col; -}; - let targetProc = null; let targetColCandidates = []; let targetColCandidateMasters = []; @@ -284,8 +192,8 @@ let selfColCandidates = []; let selfColCandidateMasters = []; let selfColNames = []; let selfDataTypes = []; -let deltaTimes = ''; -let cutOffs = ''; +let deltaTimes = []; +let cutOffs = []; const layoutOption = () => { if (hierarchicalDirection !== NORMAL_TYPE) { @@ -372,7 +280,6 @@ const drawVisNetwork = (layout = layoutOption()) => { const selfProcId = edge.fromId; const targetProcId = edge.toId; - // delete from graph callback(edgeData); @@ -394,28 +301,37 @@ const drawVisNetwork = (layout = layoutOption()) => { if (hierarchicalDirection) { $('#traceNetworkLayout').val(hierarchicalDirection); - $(`#traceNetworkLayout option[value=${hierarchicalDirection}]`).prop('disabled', true); + $(`#traceNetworkLayout option[value=${hierarchicalDirection}]`).prop( + 'disabled', + true, + ); } - $('#traceNetworkLayout').off('change').on('change', (e) => { - if (e.currentTarget.value) { - hierarchicalDirection = e.currentTarget.value; - } - drawVisNetwork(); - setTimeout(() => { - getNodePositionAndSaveLocal(); - // disable current layout to avoid to re-select from dropdown menu - if (hierarchicalDirection) { - $('#traceNetworkLayout option').prop('disabled', false); - $(`#traceNetworkLayout option[value=${hierarchicalDirection}]`).prop('disabled', true); + $('#traceNetworkLayout') + .off('change') + .on('change', (e) => { + if (e.currentTarget.value) { + hierarchicalDirection = e.currentTarget.value; } - }, 500); - }); + drawVisNetwork(); + setTimeout(() => { + getNodePositionAndSaveLocal(); + // disable current layout to avoid to re-select from dropdown menu + if (hierarchicalDirection) { + $('#traceNetworkLayout option').prop('disabled', false); + $( + `#traceNetworkLayout option[value=${hierarchicalDirection}]`, + ).prop('disabled', true); + } + }, 500); + }); // add reset layout button events - $('#resetLayout').off('click').on('click', (e) => { - const layoutSelected = $('#traceNetworkLayout').val(); - $('#traceNetworkLayout').val(layoutSelected).change(); - }); + $('#resetLayout') + .off('click') + .on('click', (e) => { + const layoutSelected = $('#traceNetworkLayout').val(); + $('#traceNetworkLayout').val(layoutSelected).change(); + }); container.addEventListener('mouseleave', () => { moveToOptions.scale = network.getScale(); moveToOptions.position = network.getViewPosition(); @@ -436,11 +352,14 @@ const getNodePositionAndSaveLocal = () => { }; const saveLocalStorage = () => { - localStorage.setItem('network-config', JSON.stringify({ - moveto: moveToOptions, - direction: hierarchicalDirection, - nodesPosition, - })); + localStorage.setItem( + 'network-config', + JSON.stringify({ + moveto: moveToOptions, + direction: hierarchicalDirection, + nodesPosition, + }), + ); }; const handleEditEdge = (edgeData, callback) => { @@ -448,7 +367,8 @@ const handleEditEdge = (edgeData, callback) => { $('#alertMsgCheckSubStr').hide(); // get data from external dict currentEditEdge = edgeData; - const edgeDataFull = mapIdFromIdTo2Edge[`${edgeData.from.id}-${edgeData.to.id}`]; + const edgeDataFull = + mapIdFromIdTo2Edge[`${edgeData.from.id}-${edgeData.to.id}`]; if (edgeDataFull) { edgeData.target_proc = edgeDataFull.target_proc; edgeData.target_col = edgeDataFull.target_col; @@ -456,6 +376,8 @@ const handleEditEdge = (edgeData, callback) => { edgeData.self_col = edgeDataFull.self_col; edgeData.self_substr = edgeDataFull.self_substr; edgeData.target_substr = edgeDataFull.target_substr; + edgeData.delta_time = edgeDataFull.delta_time; + edgeData.cut_off = edgeDataFull.cut_off; } // save edited edge @@ -503,8 +425,10 @@ const onChangeProcs = (edgeData) => { setTimeout(() => { let from = ''; let to = ''; - if (typeof edgeData.to === 'object') edgeData.to = edgeData.to.id; - if (typeof edgeData.from === 'object') edgeData.from = edgeData.from.id; + if (typeof edgeData.to === 'object') + edgeData.to = edgeData.to.id; + if (typeof edgeData.from === 'object') + edgeData.from = edgeData.from.id; edgeData.from = e.currentTarget.value; from = edgeData.from.toString(); to = edgeData.to.toString(); @@ -534,8 +458,10 @@ const onChangeProcs = (edgeData) => { setTimeout(() => { let from = ''; let to = ''; - if (typeof edgeData.to === 'object') edgeData.to = edgeData.to.id; - if (typeof edgeData.from === 'object') edgeData.from = edgeData.from.id; + if (typeof edgeData.to === 'object') + edgeData.to = edgeData.to.id; + if (typeof edgeData.from === 'object') + edgeData.from = edgeData.from.id; edgeData.to = e.currentTarget.value; from = edgeData.from.toString(); to = edgeData.to.toString(); @@ -565,7 +491,7 @@ const masterInnerOrder = [ masterDataGroup.EQ_NO, masterDataGroup.PART_NAME, masterDataGroup.PART_NO, - masterDataGroup.ST_NO + masterDataGroup.ST_NO, ]; const reOrderLinkCols = (linkingCols) => { @@ -582,23 +508,26 @@ const reOrderLinkCols = (linkingCols) => { let intCols = []; for (const linkingCol of linkingCols) { if (linkingCol.is_serial_no) { - serialCols.push(linkingCol) + serialCols.push(linkingCol); } else if (linkingCol.is_get_date) { - getDateCols.push(linkingCol) + getDateCols.push(linkingCol); } else if (linkingCol.data_type === DataTypes.DATETIME.name) { - dateTimeCols.push(linkingCol) + dateTimeCols.push(linkingCol); } else if (linkingCol.data_type === DataTypes.DATE.name) { - mainDateCols.push(linkingCol) + mainDateCols.push(linkingCol); } else if (linkingCol.data_type === DataTypes.TIME.name) { - mainTimeCols.push(linkingCol) + mainTimeCols.push(linkingCol); } else if (masterInnerOrder.includes(linkingCol.column_type)) { - masterCols.push(linkingCol) - } else if (linkingCol.is_int_category && linkingCol.data_type === DataTypes.INTEGER.name) { - catCols.push(linkingCol) + masterCols.push(linkingCol); + } else if ( + linkingCol.is_int_category && + linkingCol.data_type === DataTypes.INTEGER.name + ) { + catCols.push(linkingCol); } else if (linkingCol.data_type === DataTypes.STRING.name) { - stringCols.push(linkingCol) - } else if (linkingCol.data_type === DataTypes.INTEGER.name){ - intCols.push(linkingCol) + stringCols.push(linkingCol); + } else if (linkingCol.data_type === DataTypes.INTEGER.name) { + intCols.push(linkingCol); } } getDateCols.sort((a, b) => a.order - b.order); @@ -612,7 +541,8 @@ const reOrderLinkCols = (linkingCols) => { stringCols.sort((a, b) => a.order - b.order); intCols.sort((a, b) => a.order - b.order); // push serial at top of dropdown in linking modal - return [...serialCols, + return [ + ...serialCols, ...getDateCols, ...dateTimeCols, ...mainDateCols, @@ -622,7 +552,8 @@ const reOrderLinkCols = (linkingCols) => { ...masterCols, ...catCols, ...stringCols, - ...intCols]; + ...intCols, + ]; }; const getInforToGenerateColumns = (selfProcId, targetProcId, edgeData) => { @@ -632,11 +563,13 @@ const getInforToGenerateColumns = (selfProcId, targetProcId, edgeData) => { selectedSelfCols = [...edgeData.self_col]; } - const selfSerialColumns = reOrderLinkCols(processes[selfProcId].columns.filter(e => e.is_linking_column)); - selfColCandidates = selfSerialColumns.map(e => e.id); - selfColCandidateMasters = selfSerialColumns.map(e => e.shown_name); - selfColNames = selfSerialColumns.map(e => e.name_en); - selfDataTypes = selfSerialColumns.map(e => e.data_type); + const selfSerialColumns = reOrderLinkCols( + processes[selfProcId].columns.filter((e) => e.is_linking_column), + ); + selfColCandidates = selfSerialColumns.map((e) => e.id); + selfColCandidateMasters = selfSerialColumns.map((e) => e.shown_name); + selfColNames = selfSerialColumns.map((e) => e.name_en); + selfDataTypes = selfSerialColumns.map((e) => e.data_type); if (typeof edgeData.target_col !== 'object') { selectedTargetCols = [edgeData.target_col]; @@ -644,11 +577,13 @@ const getInforToGenerateColumns = (selfProcId, targetProcId, edgeData) => { selectedTargetCols = [...edgeData.target_col]; } - const targetSerialColumns = reOrderLinkCols(processes[targetProcId].columns.filter(e => e.is_linking_column)); - targetColCandidates = targetSerialColumns.map(e => e.id); - targetColCandidateMasters = targetSerialColumns.map(e => e.shown_name); - targetColNames = targetSerialColumns.map(e => e.name_en); - targetDataTypes = targetSerialColumns.map(e => e.data_type); + const targetSerialColumns = reOrderLinkCols( + processes[targetProcId].columns.filter((e) => e.is_linking_column), + ); + targetColCandidates = targetSerialColumns.map((e) => e.id); + targetColCandidateMasters = targetSerialColumns.map((e) => e.shown_name); + targetColNames = targetSerialColumns.map((e) => e.name_en); + targetDataTypes = targetSerialColumns.map((e) => e.data_type); targetChosenTraceKeys = []; selfChosenTraceKeys = []; @@ -659,7 +594,6 @@ const getInforToGenerateColumns = (selfProcId, targetProcId, edgeData) => { cutOffs = edgeData.cut_off; }; - const initVisData = (processesArray) => { // clear vis data edges.clear(); @@ -669,7 +603,7 @@ const initVisData = (processesArray) => { // update processes from global const // create Vis nodes from processes data let procTraces = []; - processes = {} + processes = {}; for (const key in processesArray) { const procCopy = { ...processesArray[key] }; procCopy.master = procCopy.shown_name; @@ -684,7 +618,6 @@ const initVisData = (processesArray) => { processes[procCopy.id] = procCopy; } - // create Vis edge from processes trace data // use trace forward to create edges procTraces.forEach((trace) => { @@ -692,15 +625,25 @@ const initVisData = (processesArray) => { from: trace.self_process_id, to: trace.target_process_id, arrows: 'to', - font: { multi: 'html', strokeColor: COLOR.background, align: 'top' }, + font: { + multi: 'html', + strokeColor: COLOR.background, + align: 'top', + }, self_proc: trace.self_process_id, target_proc: trace.target_process_id, - self_col: trace.trace_keys.map(key => key.self_column_id), - target_col: trace.trace_keys.map(key => key.target_column_id), - self_substr: trace.trace_keys.map(key => [key.self_column_substr_from, key.self_column_substr_to]), - target_substr: trace.trace_keys.map(key => [key.target_column_substr_from, key.target_column_substr_to]), - delta_time: trace.trace_keys.map(key => key.delta_time), - cut_off: trace.trace_keys.map(key => key.cut_off), + self_col: trace.trace_keys.map((key) => key.self_column_id), + target_col: trace.trace_keys.map((key) => key.target_column_id), + self_substr: trace.trace_keys.map((key) => [ + key.self_column_substr_from, + key.self_column_substr_to, + ]), + target_substr: trace.trace_keys.map((key) => [ + key.target_column_substr_from, + key.target_column_substr_to, + ]), + delta_time: trace.trace_keys.map((key) => key.delta_time), + cut_off: trace.trace_keys.map((key) => key.cut_off), }; const edgeKey = `${trace.self_process_id}-${trace.target_process_id}`; mapIdFromIdTo2Edge[edgeKey] = edge; @@ -715,31 +658,45 @@ const init = () => { reloadTraceConfigFromDB(); }; - // Generate Sub string options -const digitOptions = position => [...Array(100).keys()].map((x) => { - let digitChecked = ''; - if (position === x + 1) { - digitChecked = 'selected="selected"'; - } else { - digitChecked = ''; - } - return ``; -}, position); - +const digitOptions = (position) => + [...Array(100).keys()].map((x) => { + let digitChecked = ''; + if (position === x + 1) { + digitChecked = 'selected="selected"'; + } else { + digitChecked = ''; + } + return ``; + }, position); const addAutoCheckPartialMatch = () => { // auto select partial-radio $('.partial-digit').each(function f() { $(this).on('change', function autoSelectSubstr() { - $($(this).closest('.partial-option').find('.partial-radio')[0]).prop('checked', 1); + $( + $(this).closest('.partial-option').find('.partial-radio')[0], + ).prop('checked', 1); }); }); }; -const addGroupListSelection = (parentId, id, itemName, itemVals, itemOrgCols = null, itemAliases = null, - checkedVals = null, itemDisplayNames = [], subStrOpt = [], forwardCol = null, clearOption = true, - columnNames = [], dataTypes = [], chosenOption = []) => { +const addGroupListSelection = ( + parentId, + id, + itemName, + itemVals, + itemOrgCols = null, + itemAliases = null, + checkedVals = null, + itemDisplayNames = [], + subStrOpt = [], + forwardCol = null, + clearOption = true, + columnNames = [], + dataTypes = [], + chosenOption = [], +) => { if (clearOption) $(`#${parentId}`).empty(); if (checkedVals.length == 0) { @@ -759,7 +716,8 @@ const addGroupListSelection = (parentId, id, itemName, itemVals, itemOrgCols = n let endDigit = 1; if (subStrOpt.length > 0 && subStrOpt[i] !== undefined) { // Update Edge - if (!subStrOpt[i].length || subStrOpt[i].some(digit => !digit)) { // all substring digits >= 1 + if (!subStrOpt[i].length || subStrOpt[i].some((digit) => !digit)) { + // all substring digits >= 1 defaultSelected = 'checked="checked"'; } else { subSelected = 'checked="checked"'; @@ -772,13 +730,18 @@ const addGroupListSelection = (parentId, id, itemName, itemVals, itemOrgCols = n const fromOptions = digitOptions(starDigit).join(''); const toOptions = digitOptions(endDigit).join(''); - let options = itemAliases.map((v, k) => { - const selected = `${v}` === `${selector}` ? ' selected="selected"' : ''; - return ``; - }, - selector, - itemDisplayNames).join(''); + }, + selector, + itemDisplayNames, + ) + .join(''); if (isNullOption) { options = ''; @@ -846,7 +809,10 @@ const getSelectedColumns = (allSelectedColElements) => { if (allSelectedColElements.length > 0) { Array.prototype.forEach.call(allSelectedColElements, (element) => { - if (element.value && selectedCols.includes(element.value) === false) { + if ( + element.value && + selectedCols.includes(element.value) === false + ) { selectedCols.push(element.value); } }); @@ -860,7 +826,9 @@ let selfChosenTraceKeys = []; // TODO check validation const updateSelectedColumns = (isForce = false) => { const allSelectedTargetColElements = $('select[name=forwardCol]'); - const allChosenTargetCols = getSelectedColumns(allSelectedTargetColElements); + const allChosenTargetCols = getSelectedColumns( + allSelectedTargetColElements, + ); const allSelectedTargetCols = allSelectedTargetColElements.get(); targetChosenTraceKeys = allChosenTargetCols; let targetColIndex = 0; @@ -868,7 +836,10 @@ const updateSelectedColumns = (isForce = false) => { const currentCardSelector = $(selected).val(); $.each($(selected).find('option'), (key, option) => { const optionVal = $(option).val(); - if (allChosenTargetCols.includes(optionVal) && currentCardSelector !== optionVal) { + if ( + allChosenTargetCols.includes(optionVal) && + currentCardSelector !== optionVal + ) { $(option).attr('disabled', 'disabled'); } else if (!allChosenTargetCols.includes(optionVal)) { $(option).removeAttr('disabled'); @@ -878,7 +849,6 @@ const updateSelectedColumns = (isForce = false) => { targetColIndex++; }); - const allSelectedSelfColElements = $('select[name=backCol]'); const allChosenSelfCols = getSelectedColumns(allSelectedSelfColElements); const allSelectedSelfCols = allSelectedSelfColElements.get(); @@ -888,7 +858,10 @@ const updateSelectedColumns = (isForce = false) => { const currentCardSelector = $(selected).val(); $.each($(selected).find('option'), (key, option) => { const optionVal = $(option).val(); - if (allChosenSelfCols.includes(optionVal) && currentCardSelector !== optionVal) { + if ( + allChosenSelfCols.includes(optionVal) && + currentCardSelector !== optionVal + ) { $(option).attr('disabled', 'disabled'); } else if (!allChosenSelfCols.includes(optionVal)) { $(option).removeAttr('disabled'); @@ -911,46 +884,59 @@ const updateSelectedColumns = (isForce = false) => { // } }; - const addTraceKey = (isNew = false) => { let unusedTargetCols = []; let unusedSelfCols = []; if (isNew) { unusedTargetCols = targetColCandidates.filter( - chosen => !targetChosenTraceKeys.find(remain => `${remain}` === `${chosen}`), + (chosen) => + !targetChosenTraceKeys.find( + (remain) => `${remain}` === `${chosen}`, + ), ); unusedSelfCols = selfColCandidates.filter( - chosen => !selfChosenTraceKeys.find(remain => `${remain}` === `${chosen}`), + (chosen) => + !selfChosenTraceKeys.find( + (remain) => `${remain}` === `${chosen}`, + ), ); } const selectedColumns = []; const idPostfix = `-${generateRandomString(5)}`; - const fwdColumns = addGroupListSelection('edgeForwardColParent', `edgeForwardCol${idPostfix}`, 'forwardCol', + const fwdColumns = addGroupListSelection( + 'edgeForwardColParent', + `edgeForwardCol${idPostfix}`, + 'forwardCol', targetColCandidates, - itemOrgCols = targetColCandidates, - itemAliases = targetColCandidates, - checkedVals = isNew ? [unusedTargetCols[0]] : selectedTargetCols, - itemDisplayNames = targetColCandidateMasters, - subStrOpt = isNew ? [] : targetSubStrOpt, - forwardCol = true, - clearOption = !isNew, - columnNames = targetColNames, - columnDataTypes = targetDataTypes, - targetChosenTraceKeys); - - const bwdColumns = addGroupListSelection('edgeBackColParent', `edgeBackCol${idPostfix}`, 'backCol', + (itemOrgCols = targetColCandidates), + (itemAliases = targetColCandidates), + (checkedVals = isNew ? [unusedTargetCols[0]] : selectedTargetCols), + (itemDisplayNames = targetColCandidateMasters), + (subStrOpt = isNew ? [] : targetSubStrOpt), + (forwardCol = true), + (clearOption = !isNew), + (columnNames = targetColNames), + (columnDataTypes = targetDataTypes), + targetChosenTraceKeys, + ); + + const bwdColumns = addGroupListSelection( + 'edgeBackColParent', + `edgeBackCol${idPostfix}`, + 'backCol', selfColCandidates, - itemOrgs = selfColCandidates, - itemAliases = selfColCandidates, - checkedVals = isNew ? [unusedSelfCols[0]] : selectedSelfCols, - itemDisplayNames = selfColCandidateMasters, - subStrOpt = isNew ? [] : selfSubStrOpt, - forwardCol = false, - clearOption = !isNew, - columnNames = selfColNames, - columnDataTypes = selfDataTypes, - selfChosenTraceKeys); + (itemOrgs = selfColCandidates), + (itemAliases = selfColCandidates), + (checkedVals = isNew ? [unusedSelfCols[0]] : selectedSelfCols), + (itemDisplayNames = selfColCandidateMasters), + (subStrOpt = isNew ? [] : selfSubStrOpt), + (forwardCol = false), + (clearOption = !isNew), + (columnNames = selfColNames), + (columnDataTypes = selfDataTypes), + selfChosenTraceKeys, + ); for (let i = 0; i < fwdColumns.length; i++) { if (bwdColumns[i] && fwdColumns[i]) { @@ -977,7 +963,7 @@ const addTraceKey = (isNew = false) => { // update selected columns to disable selected columns updateSelectedColumns(); - if (!isNew) { + if (!isNew && deltaTimes !== undefined) { updateDeltaTime(); } @@ -1003,11 +989,9 @@ const saveTraceConfigs = (edgesCfg) => { }, body: JSON.stringify(edgesCfg), }) - .then(response => response.clone().json()) - .then((json) => { - }) - .catch((json) => { - }); + .then((response) => response.clone().json()) + .then((json) => {}) + .catch((json) => {}); }; const saveTraceConfigToDB = () => { @@ -1019,16 +1003,18 @@ const saveTraceConfigToDB = () => { displayRegisterMessage(tracingElements.alertProcLink); - // show msg informLinkingJobStarted(); }; - const getV2OrderedProcesses = async (data) => { - const res = await fetchData('api/setting/get_v2_ordered_processes', JSON.stringify(data), 'POST'); + const res = await fetchData( + 'api/setting/get_v2_ordered_processes', + JSON.stringify(data), + 'POST', + ); return res.ordered_processes; -} +}; const syncVisData = (procs = []) => { initVisData(procs); @@ -1063,7 +1049,7 @@ const reloadTraceConfigFromDB = (isUpdatePosition = true) => { 'Content-Type': 'application/json', }, }) - .then(response => response.clone().json()) + .then((response) => response.clone().json()) .then((json) => { // update new data const { procs } = JSON.parse(json.trace_config); @@ -1114,7 +1100,6 @@ $(() => { // show register modal $('#btn-trace-config-register').click(() => { $('#regenerate-confirm-modal').modal('show'); - }); // show reload confirm modal @@ -1143,14 +1128,23 @@ $(() => { }); }); -const updatePredictionNetwork = (networkContent, predictive, isUpdatePosition) => { +const updatePredictionNetwork = ( + networkContent, + predictive, + isUpdatePosition, +) => { // update prediction to network updateNodeInfo(networkContent.nodes, predictive, isUpdatePosition); updateEdgeInfo(networkContent.edges, predictive); }; // call backend API to save -const calcProcLink = async (url, currentEdges, isPredictive = false, isUpdatePosition = true) => { +const calcProcLink = async ( + url, + currentEdges, + isPredictive = false, + isUpdatePosition = true, +) => { let bodyData = null; if (currentEdges) { bodyData = JSON.stringify(currentEdges); @@ -1161,12 +1155,22 @@ const calcProcLink = async (url, currentEdges, isPredictive = false, isUpdatePos // simulate proc link const simulateProcLink = (currentEdges) => { - calcProcLink('api/setting/simulate_proc_link', currentEdges, true, false).then(); + calcProcLink( + 'api/setting/simulate_proc_link', + currentEdges, + true, + false, + ).then(); }; // calc real proc link' const realProcLink = (isUpdatePosition) => { - calcProcLink('api/setting/count_proc_link', false, false, isUpdatePosition).then(); + calcProcLink( + 'api/setting/count_proc_link', + false, + false, + isUpdatePosition, + ).then(); }; const getProcNameFromLabel = (procId) => { @@ -1178,20 +1182,35 @@ const getProcNameFromLabel = (procId) => { } }; -const updateNodeInfo = (predictionNodes, isPredictive = false, isUpdatePosition = true) => { +const updateNodeInfo = ( + predictionNodes, + isPredictive = false, + isUpdatePosition = true, +) => { const nodesPos = getConfigOption().nodesPosition; for (const procId in predictionNodes) { const totalCount = applySignificantDigit(predictionNodes[procId]); const currentProcName = getProcNameFromLabel(procId); const color = isPredictive ? COLOR.prediction : COLOR.real; - const totalTitle = isPredictive ? i18nNames.nodeLinkTitlePred : i18nNames.nodeLinkTitleReal; + const totalTitle = isPredictive + ? i18nNames.nodeLinkTitlePred + : i18nNames.nodeLinkTitleReal; const title = `${totalCount} : ${totalTitle}`; - const xPostion = nodesPos && nodesPos[procId] ? nodesPos[procId].x : null; - const yPostion = nodesPos && nodesPos[procId] ? nodesPos[procId].y : null; - const nodePosition = xPostion !== null && yPostion !== null ? { x: xPostion, y: yPostion } : {}; - const position = nodesPos && Object.keys(nodesPos).length > 0 - && hierarchicalDirection !== NORMAL_TYPE - && isUpdatePosition ? nodePosition : {}; + const xPostion = + nodesPos && nodesPos[procId] ? nodesPos[procId].x : null; + const yPostion = + nodesPos && nodesPos[procId] ? nodesPos[procId].y : null; + const nodePosition = + xPostion !== null && yPostion !== null + ? { x: xPostion, y: yPostion } + : {}; + const position = + nodesPos && + Object.keys(nodesPos).length > 0 && + hierarchicalDirection !== NORMAL_TYPE && + isUpdatePosition + ? nodePosition + : {}; nodes.update({ id: procId, @@ -1220,7 +1239,9 @@ const updateEdgeInfo = (predictionEdges, isPredictive = false) => { continue; } const color = isPredictive ? COLOR.prediction : COLOR.real; - const linkTitle = isPredictive ? i18nNames.edgeLinkTitlePred : i18nNames.edgeLinkTitleReal; + const linkTitle = isPredictive + ? i18nNames.edgeLinkTitlePred + : i18nNames.edgeLinkTitleReal; const title = `${linkCount} : ${linkTitle}`; for (const edgeId of edges.getIds()) { const edgeData = edges.get(edgeId); @@ -1250,39 +1271,45 @@ function networkRightClickHandler(e) { // trigger nodes network.off('oncontext'); - network.on('oncontext', (params) => { - const nodeID = network.getNodeAt(params.pointer.DOM); - const edgeId = network.getEdgeAt(params.pointer.DOM); - const selectedNode = nodeID || params.nodes[0]; - const selectedEdge = edgeId || params.edges[0]; - if (!selectedEdge && !selectedNode) return; - - const menu = $('#contextMenuTraceCfg'); - if (selectedNode) { - // hide edge items - $('.edge-item').hide(); - $(menu).find('li').attr('data-node-id', selectedNode); - network.selectNodes([selectedNode]); - } + network.on( + 'oncontext', + (params) => { + const nodeID = network.getNodeAt(params.pointer.DOM); + const edgeId = network.getEdgeAt(params.pointer.DOM); + const selectedNode = nodeID || params.nodes[0]; + const selectedEdge = edgeId || params.edges[0]; + if (!selectedEdge && !selectedNode) return; + + const menu = $('#contextMenuTraceCfg'); + if (selectedNode) { + // hide edge items + $('.edge-item').hide(); + $(menu).find('li').attr('data-node-id', selectedNode); + network.selectNodes([selectedNode]); + } - if (selectedEdge) { - $('.edge-item').show(); - $(menu).find('li').attr('data-edge-id', selectedEdge); - network.selectEdges([selectedEdge]); - } + if (selectedEdge) { + $('.edge-item').show(); + $(menu).find('li').attr('data-edge-id', selectedEdge); + network.selectEdges([selectedEdge]); + } - // show context menu when right click timeseries - const menuHeight = menu.height(); - const windowHeight = $(window).height(); - const left = params.event.clientX; - let top = params.event.clientY; - if (windowHeight - top < menuHeight) { - top -= menuHeight; - } - menu.css({ - left: `${left}px`, top: `${top}px`, display: 'block', - }); - }, false); + // show context menu when right click timeseries + const menuHeight = menu.height(); + const windowHeight = $(window).height(); + const left = params.event.clientX; + let top = params.event.clientY; + if (windowHeight - top < menuHeight) { + top -= menuHeight; + } + menu.css({ + left: `${left}px`, + top: `${top}px`, + display: 'block', + }); + }, + false, + ); return false; } @@ -1331,14 +1358,14 @@ const addEdgesFromNode = (e) => { const nodeId = $('#contextMenuTraceCfg li').attr('data-node-id'); const nodeList = Object.keys(processes); const indexFromNode = nodeList.indexOf(nodeId); - const indexToNode = indexFromNode === (nodeList.length - 1) ? 0 : indexFromNode + 1; + const indexToNode = + indexFromNode === nodeList.length - 1 ? 0 : indexFromNode + 1; const toNodeId = nodeList[indexToNode]; // trigger to add edge to self node if (nodeId) { // add self trace as default - handleAddEdge({ from: nodeId, to: processes[toNodeId].id }, () => { - }); + handleAddEdge({ from: nodeId, to: processes[toNodeId].id }, () => {}); } }; @@ -1346,8 +1373,7 @@ const editSelectedEdge = (e) => { $('#contextMenuTraceCfg').hide(); const edgeId = $('#contextMenuTraceCfg li').attr('data-edge-id'); const edgeData = edges.get(edgeId); - handleEditEdge(edgeData, () => { - }); + handleEditEdge(edgeData, () => {}); }; const removeSelectedEdge = (e) => { @@ -1372,25 +1398,28 @@ const getEdgeFromUI = () => { const targetCols = []; const targetOrgCols = []; const targetSubStrs = []; - $('div[id^="edgeForwardCol-"]').find('.form-group').each(function f(idx) { - const isOptionDateTime = $(this).find(tracingElements.edgeConfigDatetime).length; - const colElement = $(this).find('select[name=forwardCol]'); - const colAlias = $('option:selected', colElement).attr('alias'); - const colOrg = $('option:selected', colElement).attr('original'); - if (!isEmpty(colAlias)) targetCols.push(colAlias); - if (!isEmpty(colOrg)) targetOrgCols.push(colOrg); - - if (isOptionDateTime === 0) { - targetSubStrs.push(getMatchingDigits($(this))); - return; - } - targetSubStrs.push([]); - }); + $('div[id^="edgeForwardCol-"]') + .find('.form-group') + .each(function f(idx) { + const isOptionDateTime = $(this).find( + tracingElements.edgeConfigDatetime, + ).length; + const colElement = $(this).find('select[name=forwardCol]'); + const colAlias = $('option:selected', colElement).attr('alias'); + const colOrg = $('option:selected', colElement).attr('original'); + if (!isEmpty(colAlias)) targetCols.push(colAlias); + if (!isEmpty(colOrg)) targetOrgCols.push(colOrg); + + if (isOptionDateTime === 0) { + targetSubStrs.push(getMatchingDigits($(this))); + return; + } + targetSubStrs.push([]); + }); edgeData.target_col = targetCols; edgeData.target_orig_col = targetOrgCols; edgeData.target_substr = targetSubStrs; - // get Trace Self Data from modal const selfProcId = $('select[name="edgeBackProc"]').val(); edgeData.self_proc = selfProcId; @@ -1417,8 +1446,8 @@ const getEdgeFromUI = () => { if (isOptionDateTime === 0) { selfSubStrs.push(getMatchingDigits($(this))); - deltaTimes.push(0); - cutOffs.push(0); + deltaTimes.push(null); + cutOffs.push(null); } else { selfSubStrs.push([]); const deltaTime = $(this) @@ -1462,7 +1491,10 @@ const saveEditEdge = () => { return; } - validEdge = validateSubStr(edgeData.self_substr, edgeData.target_substr); + const validEdge = validateSubStr( + edgeData.self_substr, + edgeData.target_substr, + ); if (!validEdge.is_valid) { displayRegisterMessage('#alertMsgCheckSubStr', { message: validEdge.message, @@ -1470,17 +1502,14 @@ const saveEditEdge = () => { }); return; } - // validate delta time - const isValidDeltaTimes = deltaDatetimes.every((element) => { - if (element === '') return true; - const number = Number(element); - return Number.isInteger(number); - }); - const isValidCutOffs = cutOffs.every((element) => { - if (element === '') return true; - const number = Number(element); - return Number.isInteger(number); - }); + + // validate delta time and cut off + const isValidDeltaTimes = deltaDatetimes + .filter((v) => v !== null) + .every(isValidDatetimeInputValue); + const isValidCutOffs = cutOffs + .filter((v) => v !== null) + .every(isValidDatetimeInputValue); if (!isValidDeltaTimes || !isValidCutOffs) { displayRegisterMessage('#alertMsgCheckSubStr', { message: $('#i18nInvalidDeltaTime').text(), @@ -1489,7 +1518,7 @@ const saveEditEdge = () => { return; } - // save data to external/global dict + // save data to external/global dict drawEdgeToGUI(edgeData); $('#modal-edge-popup').modal('hide'); @@ -1505,7 +1534,7 @@ const drawEdgeToGUI = (edgeData) => { edges.update(edgeData); } currentEditEdge = {}; -} +}; const cancelEditEdge = () => false; @@ -1513,7 +1542,7 @@ const handleSwitchTraceConfig = (e) => { const edgeData = getEdgeFromUI(); const keys = Object.keys(edgeData); const values = Object.values(edgeData); - const replacedKeys = keys.map(k => { + const replacedKeys = keys.map((k) => { let key = k; if (key === 'from') { key = 'to'; @@ -1547,8 +1576,7 @@ const handleSwitchTraceConfig = (e) => { replacedKeys.forEach((item, index) => { newEdgeData[item] = values[index]; }); - handleEditEdge(newEdgeData, () => { - }); + handleEditEdge(newEdgeData, () => {}); }; const updateTraceConfig = (element, index) => { @@ -1563,9 +1591,12 @@ const updateTraceConfig = (element, index) => { if (dataType === DataTypes.DATETIME.name) { const inputElement = `
    x -
    ` +
    `; - if (targetColParent.find(tracingElements.edgeConfigDatetime).length === 0) { + if ( + targetColParent.find(tracingElements.edgeConfigDatetime).length === + 0 + ) { targetColParent.append(inputElement); } @@ -1581,41 +1612,121 @@ const updateTraceConfig = (element, index) => { const innerHTML = `
    -
    - ${i18nNames.linkWithTime} +
    + ${i18nNames.linkWithTime} + + 00:00:00
    -
    - ${i18nNames.i18nCutOff} +
    + ${i18nNames.i18nCutOff} + + 00:00:00
    `; $(elementParent).append(innerHTML); + updateDeltaTimeElement( + index, + DEFAULT_DELTA_TIME_DATA_LINK, + DEFAULT_CUTOFF_DATA_LINK, + ); } return; } if (dataType !== DataTypes.DATETIME.name) { targetColParent.find(tracingElements.edgeConfigDatetime).remove(); - targetColParent.parents().eq(1).find(tracingElements.deltaDatetime).remove(); + targetColParent + .parents() + .eq(1) + .find(tracingElements.deltaDatetime) + .remove(); targetColParent.find(tracingElements.edgeConfigSerial).show(); } -} +}; const updateDeltaTime = () => { - deltaTimes.forEach(function (deltaTime, index) { - const traceDeltaTimeEle = $('#traceInfoModal').find( - `div[name="trace-config-delta-time-${index + 1}"]`, - ); - if (traceDeltaTimeEle.length) { - traceDeltaTimeEle - .find('input[name="deltaDatetime"]') - .first() - .val(deltaTime); - traceDeltaTimeEle - .find('input[name="cutOff"]') - .first() - .val(cutOffs[index]); - } + deltaTimes?.forEach(function (deltaTime, index) { + updateDeltaTimeElement(index + 1, deltaTime, cutOffs[index]); }); }; + +/** + * + * @param {number} index + * @param {number} deltaTime + * @param {number} cutOff + */ +const updateDeltaTimeElement = (index, deltaTime, cutOff) => { + const traceDeltaTimeEle = $('#traceInfoModal').find( + `div[name="trace-config-delta-time-${index}"]`, + ); + if (traceDeltaTimeEle.length) { + traceDeltaTimeEle + .find('input[name="deltaDatetime"]') + .first() + .val(deltaTime) + .trigger('change'); + traceDeltaTimeEle + .find('input[name="cutOff"]') + .first() + .val(cutOff) + .trigger('change'); + } +}; + +/** + * + * @param {object} e + */ +const updateDatetimeReprValue = (e) => { + const elem = $(e); + + const reprElem = elem + .siblings(`span[name="${tracingElements.datetimeReprClassName}"]`) + .first(); + + const { valid, value } = parseDateTimeByMinute(e.value); + if (!valid) { + elem.addClass(BORDER_RED_CLASS); + } else { + elem.removeClass(BORDER_RED_CLASS); + } + + reprElem.text(value); +}; + +/** + * + * @param {string} s + * @return {boolean} + */ +const isValidDatetimeInputValue = (s) => { + return s.trim().length !== 0 && !Number.isNaN(Number(s)); +}; + +/** + * + * @param {string} minuteString + * @return {{valid: boolean, value: string}} + */ +const parseDateTimeByMinute = (minuteString) => { + const isValid = isValidDatetimeInputValue(minuteString); + + const minuteNumber = Number(minuteString); + const hours = Math.floor(minuteNumber / 60); + const minutes = Math.floor(minuteNumber - hours * 60); + const seconds = Math.floor(minuteNumber * 60 - minutes * 60 - hours * 3600); + + const padNumber = (e) => String(e).padStart(2, '0'); + + const parsedValue = isValid + ? `${padNumber(hours)}:${padNumber(minutes)}:${padNumber(seconds)}` + : '--:--:--'; + + return { + valid: isValid, + value: parsedValue, + }; +}; diff --git a/ap/static/table_viewer/css/table_viewer.css b/ap/static/table_viewer/css/table_viewer.css index 633543f..fd87d84 100644 --- a/ap/static/table_viewer/css/table_viewer.css +++ b/ap/static/table_viewer/css/table_viewer.css @@ -16,11 +16,13 @@ table.dataTable .odd { background-color: #303030 !important; } -table.dataTable .odd:hover, table.dataTable .even:hover { - background-color: rgba(0,0,0,0.075) !important; +table.dataTable .odd:hover, +table.dataTable .even:hover { + background-color: rgba(0, 0, 0, 0.075) !important; } -table.dataTable thead th, table.dataTable thead td { +table.dataTable thead th, +table.dataTable thead td { border-bottom: none !important; } @@ -69,10 +71,19 @@ table.dataTable thead th, table.dataTable thead td { background-clip: padding-box; border: 1px solid transparent; border-radius: 0.25rem; - -webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; - transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; - transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; - transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; + -webkit-transition: + border-color 0.15s ease-in-out, + -webkit-box-shadow 0.15s ease-in-out; + transition: + border-color 0.15s ease-in-out, + -webkit-box-shadow 0.15s ease-in-out; + transition: + border-color 0.15s ease-in-out, + box-shadow 0.15s ease-in-out; + transition: + border-color 0.15s ease-in-out, + box-shadow 0.15s ease-in-out, + -webkit-box-shadow 0.15s ease-in-out; } .dataTables_length option:hover { @@ -97,10 +108,19 @@ table.dataTable thead th, table.dataTable thead td { background-clip: padding-box; border: 1px solid transparent; border-radius: 0.25rem; - -webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; - transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; - transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; - transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; + -webkit-transition: + border-color 0.15s ease-in-out, + -webkit-box-shadow 0.15s ease-in-out; + transition: + border-color 0.15s ease-in-out, + -webkit-box-shadow 0.15s ease-in-out; + transition: + border-color 0.15s ease-in-out, + box-shadow 0.15s ease-in-out; + transition: + border-color 0.15s ease-in-out, + box-shadow 0.15s ease-in-out, + -webkit-box-shadow 0.15s ease-in-out; } .dataTables_wrapper .dataTables_paginate .ellipsis { @@ -121,7 +141,7 @@ table.dataTable thead th, table.dataTable thead td { border: 1px solid #222; } -.select2-container--default .select2-results__option[aria-selected=true] { +.select2-container--default .select2-results__option[aria-selected='true'] { background-color: #5897fb; } @@ -130,17 +150,27 @@ table.dataTable thead th, table.dataTable thead td { border: 1px solid #222222; } -.select2-container--default .select2-selection--single .select2-selection__rendered { +.select2-container--default + .select2-selection--single + .select2-selection__rendered { color: #ffffff; line-height: 30px; } -.select2-container--default .select2-selection--single .select2-selection__arrow { +.select2-container--default + .select2-selection--single + .select2-selection__arrow { height: 30px; } -.select2-container--default .select2-selection--single .select2-selection__arrow b, -.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { +.select2-container--default + .select2-selection--single + .select2-selection__arrow + b, +.select2-container--default.select2-container--open + .select2-selection--single + .select2-selection__arrow + b { border-width: 6px 3px 0 3px; margin-left: -1px; border-color: #ffffff transparent transparent transparent; @@ -156,11 +186,11 @@ table.dataTable thead th, table.dataTable thead td { color: #ffffff; } -.select2-selection__rendered{ +.select2-selection__rendered { padding-left: 1rem !important; } select.col-md-5, span.select2.select2-container.select2-container--default { max-width: 40vw; min-width: 40vw; -} \ No newline at end of file +} diff --git a/ap/static/table_viewer/js/table_viewer.js b/ap/static/table_viewer/js/table_viewer.js index 7ec5a76..eca067a 100644 --- a/ap/static/table_viewer/js/table_viewer.js +++ b/ap/static/table_viewer/js/table_viewer.js @@ -1,5 +1,3 @@ -/* eslint-disable no-unused-vars */ -/* eslint-disable no-undef */ const tableSpecialCharRegex = /\/|\*|"| /g; const cachedColumns = {}; let dataTableInstance = null; @@ -36,13 +34,12 @@ const getAllDatabaseConfigTbView = async () => { 'Content-Type': 'application/json', }, }) - .then(response => response.clone().json()) + .then((response) => response.clone().json()) .catch(); return json; }; -// eslint-disable-next-line no-unused-vars const getColumnNames = async (database, tableName) => { if (!database || !tableName) return {}; @@ -55,14 +52,18 @@ const getColumnNames = async (database, tableName) => { } // get columns from db - const url = new URL('/ap/api/table_viewer/column_names', window.location.href).href; + const url = new URL( + '/ap/api/table_viewer/column_names', + window.location.href, + ).href; const params = { database, table: replacedTableName, }; const paramString = new URLSearchParams(params); - const json = await fetch(`${url}?${paramString.toString()}`) - .then(response => response.clone().json()); + const json = await fetch(`${url}?${paramString.toString()}`).then( + (response) => response.clone().json(), + ); // add columns to cache if (cachedColumns[database]) { @@ -81,15 +82,19 @@ const showSortColumnOptions = async (procId) => { ele.sortSelection.empty(); ele.sortSelection.append(sortSelectionHTML); return; - }; + } - const res = await fetchData(`/ap/api/setting/proc_filter_config/${procId}`, {}, 'GET'); + const res = await fetchData( + `/ap/api/setting/proc_table_viewer_columns/${procId}`, + {}, + 'GET', + ); const procCfg = res.data; const procColumns = res.data.columns; const tableName = procCfg.data_source.db_detail ? procCfg.table_name : ''; - setDbsAndTableInfo(procCfg.data_source.id, tableName) + setDbsAndTableInfo(procCfg.data_source.id, tableName); // show loading icon $(ele.tblViewerSpinner).toggleClass('spinner-grow'); @@ -98,7 +103,11 @@ const showSortColumnOptions = async (procId) => { if (procColumns.length) { procColumns.forEach((col) => { const columnName = col.column_raw_name || col.column_name; - sortSelectionHTML += buildOptionHTML(col.column_name, col.shown_name, columnName); + sortSelectionHTML += buildOptionHTML( + col.column_name, + col.shown_name, + columnName, + ); }); } @@ -107,9 +116,14 @@ const showSortColumnOptions = async (procId) => { addAttributeToElement(); }; -const queryRecordsFromDB = ((databaseCode, tableName, - sortColumn = null, sortOrder = 'DESC', limit = null, - callbackFunc = null) => { +const queryRecordsFromDB = ( + databaseCode, + tableName, + sortColumn = null, + sortOrder = 'DESC', + limit = null, + callbackFunc = null, +) => { const data = { database_code: databaseCode, table_name: tableName, @@ -125,7 +139,7 @@ const queryRecordsFromDB = ((databaseCode, tableName, }, body: JSON.stringify(data), }) - .then(response => response.clone().json()) + .then((response) => response.clone().json()) .then((json) => { loadingShow(true); if (callbackFunc) { @@ -137,7 +151,7 @@ const queryRecordsFromDB = ((databaseCode, tableName, loadingHide(); setTimeout(loadingHide, 0); }); -}); +}; const setDbsAndTableInfo = (dbsCode, tableName) => { ele.dbsCodeInput.val(dbsCode); @@ -170,7 +184,10 @@ const getLanguage = () => { ja: 'Japanese', }; const locale = docCookies.getItem('locale'); - const url = new URL(`/ap/static/table_viewer/lang/${langMap[locale]}.json`, window.location.href).href; + const url = new URL( + `/ap/static/table_viewer/lang/${langMap[locale]}.json`, + window.location.href, + ).href; return url; }; @@ -268,28 +285,28 @@ $(() => { cleanViewTable(); loadingShow(); - const { - databaseCode, - tableName, - sortColumn, - sortOrder, - limit, - } = getFormInput(); + const { databaseCode, tableName, sortColumn, sortOrder, limit } = + getFormInput(); if (!databaseCode) { setTimeout(loadingHide, 0); return; } - queryRecordsFromDB(databaseCode, tableName, - sortColumn, sortOrder, limit, - showRecordsToViewTable); + queryRecordsFromDB( + databaseCode, + tableName, + sortColumn, + sortOrder, + limit, + showRecordsToViewTable, + ); }); ele.tableSelection.select2(); ele.sortSelection.select2(); // Load userBookmarkBar $('#userBookmarkBar').show(); - + // show load settings menu handleLoadSettingBtns(); }); diff --git a/ap/static/table_viewer/lang/English.json b/ap/static/table_viewer/lang/English.json index 8977af7..259f9ea 100644 --- a/ap/static/table_viewer/lang/English.json +++ b/ap/static/table_viewer/lang/English.json @@ -1,23 +1,23 @@ -{ - "sEmptyTable": "No data available in table", - "sInfo": "Showing _START_ to _END_ of _TOTAL_ entries", - "sInfoEmpty": "Showing 0 to 0 of 0 entries", - "sInfoFiltered": "(filtered from _MAX_ total entries)", - "sInfoPostFix": "", - "sInfoThousands": ",", - "sLengthMenu": "Show _MENU_ entries", - "sLoadingRecords": "Loading...", - "sProcessing": "Processing...", - "sSearch": "Search:", - "sZeroRecords": "No matching records found", - "oPaginate": { - "sFirst": "First", - "sLast": "Last", - "sNext": "Next", - "sPrevious": "Previous" - }, - "oAria": { - "sSortAscending": ": activate to sort column ascending", - "sSortDescending": ": activate to sort column descending" - } -} \ No newline at end of file +{ + "sEmptyTable": "No data available in table", + "sInfo": "Showing _START_ to _END_ of _TOTAL_ entries", + "sInfoEmpty": "Showing 0 to 0 of 0 entries", + "sInfoFiltered": "(filtered from _MAX_ total entries)", + "sInfoPostFix": "", + "sInfoThousands": ",", + "sLengthMenu": "Show _MENU_ entries", + "sLoadingRecords": "Loading...", + "sProcessing": "Processing...", + "sSearch": "Search:", + "sZeroRecords": "No matching records found", + "oPaginate": { + "sFirst": "First", + "sLast": "Last", + "sNext": "Next", + "sPrevious": "Previous" + }, + "oAria": { + "sSortAscending": ": activate to sort column ascending", + "sSortDescending": ": activate to sort column descending" + } +} diff --git a/ap/static/table_viewer/lang/Japanese.json b/ap/static/table_viewer/lang/Japanese.json index 7ceb778..9774cb3 100644 --- a/ap/static/table_viewer/lang/Japanese.json +++ b/ap/static/table_viewer/lang/Japanese.json @@ -1,23 +1,23 @@ -{ - "sEmptyTable": "テーブルにデータがありません", - "sInfo": " _TOTAL_ 件中 _START_ から _END_ まで表示", - "sInfoEmpty": " 0 件中 0 から 0 まで表示", - "sInfoFiltered": "（全 _MAX_ 件より抽出）", - "sInfoPostFix": "", - "sInfoThousands": ",", - "sLengthMenu": "_MENU_ 件表示", - "sLoadingRecords": "読み込み中...", - "sProcessing": "処理中...", - "sSearch": "検索:", - "sZeroRecords": "一致するレコードがありません", - "oPaginate": { - "sFirst": "先頭", - "sLast": "最終", - "sNext": "次", - "sPrevious": "前" - }, - "oAria": { - "sSortAscending": ": 列を昇順に並べ替えるにはアクティブにする", - "sSortDescending": ": 列を降順に並べ替えるにはアクティブにする" - } -} +{ + "sEmptyTable": "テーブルにデータがありません", + "sInfo": " _TOTAL_ 件中 _START_ から _END_ まで表示", + "sInfoEmpty": " 0 件中 0 から 0 まで表示", + "sInfoFiltered": "（全 _MAX_ 件より抽出）", + "sInfoPostFix": "", + "sInfoThousands": ",", + "sLengthMenu": "_MENU_ 件表示", + "sLoadingRecords": "読み込み中...", + "sProcessing": "処理中...", + "sSearch": "検索:", + "sZeroRecords": "一致するレコードがありません", + "oPaginate": { + "sFirst": "先頭", + "sLast": "最終", + "sNext": "次", + "sPrevious": "前" + }, + "oAria": { + "sSortAscending": ": 列を昇順に並べ替えるにはアクティブにする", + "sSortDescending": ": 列を降順に並べ替えるにはアクティブにする" + } +} diff --git a/ap/static/tile_interface/css/tile_interface.css b/ap/static/tile_interface/css/tile_interface.css index d1a5b85..ce5f7e7 100644 --- a/ap/static/tile_interface/css/tile_interface.css +++ b/ap/static/tile_interface/css/tile_interface.css @@ -74,11 +74,11 @@ a.link-address { text-align: center; text-decoration: none; outline: none; - transition: all .3s; + transition: all 0.3s; } .ghost-button:hover { - box-shadow: 0 0 45px rgba(255, 255, 255, .6); + box-shadow: 0 0 45px rgba(255, 255, 255, 0.6); } /* tile search by use */ @@ -115,16 +115,16 @@ a.link-address { border-right: 12px solid transparent; border-top: 12px solid #444444; float: left; - -webkit-transition: -webkit-transform .8s ease-in-out; - -moz-transition: -moz-transform .8s ease-in-out; - -o-transition: -o-transform .8s ease-in-out; - transition: transform .8s ease-in-out; + -webkit-transition: -webkit-transform 0.8s ease-in-out; + -moz-transition: -moz-transform 0.8s ease-in-out; + -o-transition: -o-transform 0.8s ease-in-out; + transition: transform 0.8s ease-in-out; } .btn-collapse.collapsed { - transform:rotate(-90deg); - -ms-transform:rotate(-90deg); - -webkit-transform:rotate(-90deg); - -o-transform:rotate(-90deg); + transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + -webkit-transform: rotate(-90deg); + -o-transform: rotate(-90deg); } .section-name { min-width: 60%; @@ -133,7 +133,8 @@ a.link-address { width: 25px; margin-top: -5px; } -.section-name, .icon-col { +.section-name, +.icon-col { display: flex; } .section-name h3 { @@ -160,4 +161,3 @@ a.link-address { .collapsed-btn svg { margin-right: 4px; } - diff --git a/ap/static/tile_interface/js/tile_interface.js b/ap/static/tile_interface/js/tile_interface.js index 4cef678..22455a5 100644 --- a/ap/static/tile_interface/js/tile_interface.js +++ b/ap/static/tile_interface/js/tile_interface.js @@ -1,7 +1,8 @@ -// eslint-disable-next-line no-unused-vars let isOpenNewTab = false; -document.getElementById('content').addEventListener('contextmenu', event => event.preventDefault()); -const setOpenTab = () => isOpenNewTab = true; +document + .getElementById('content') + .addEventListener('contextmenu', (event) => event.preventDefault()); +const setOpenTab = () => (isOpenNewTab = true); const redirectPage = (tile) => { // mark as call page from tile interface, do not apply user setting useTileInterface().set(); diff --git a/ap/static/trace_data/css/trace_data.css b/ap/static/trace_data/css/trace_data.css index 38c1606..c8aa85e 100644 --- a/ap/static/trace_data/css/trace_data.css +++ b/ap/static/trace_data/css/trace_data.css @@ -36,7 +36,7 @@ #plot-cards table thead:after { line-height: 0px; - content: "\200C"; + content: '\200C'; display: block; } @@ -111,12 +111,12 @@ right: 0; bottom: 0; left: 0; - background: rgba(0, 0, 0, .5); + background: rgba(0, 0, 0, 0.5); z-index: 999; } .loading::before { - content: ""; + content: ''; display: block; position: fixed; left: 50%; @@ -130,7 +130,7 @@ } .loading::after { - content: ""; + content: ''; display: block; position: fixed; left: 50%; @@ -140,7 +140,7 @@ border-radius: 40px; margin-top: -10px; margin-left: -10px; - border: 4px solid #60ABB9; + border: 4px solid #60abb9; border-right: 4px solid white; animation: rotate 1s infinite linear; } @@ -149,7 +149,8 @@ min-width: 130px; } -.item-name, .prc-name { +.item-name, +.prc-name { color: #65c5f1; text-align: center; vertical-align: middle; @@ -206,27 +207,26 @@ right: 0; bottom: 0; background-color: #434343; - -webkit-transition: .4s; - transition: .4s; + -webkit-transition: 0.4s; + transition: 0.4s; } .slider:before { position: absolute; - content: ""; + content: ''; height: 28px; width: 28px; left: 0px; bottom: 0px; background-color: white; - -webkit-transition: .4s; - transition: .4s; + -webkit-transition: 0.4s; + transition: 0.4s; } input.primary:checked + .slider { background-color: #375a7f; } - input:focus + .slider { box-shadow: 0 0 1px #375a7f; } @@ -308,7 +308,8 @@ input:checked + .slider:before { text-decoration: underline; } -.hist-summary, .hist-summary-detail { +.hist-summary, +.hist-summary-detail { font-size: 0.8vw; display: none; } @@ -400,7 +401,7 @@ input:checked + .slider:before { .cate-value .cate-tooltip { visibility: hidden; width: 400px; - background-color: rgba(8, 8, 8, .6); + background-color: rgba(8, 8, 8, 0.6); color: #fff; text-align: left; font-size: 11px; @@ -472,10 +473,10 @@ input:checked + .slider:before { .cross.h.left, .cross.v.right, .cross.h.right, -.cross[id$="left-v"], -.cross[id$="left-h"], -.cross[id$="right-v"], -.cross[id$="right-h"], +.cross[id$='left-v'], +.cross[id$='left-h'], +.cross[id$='right-v'], +.cross[id$='right-h'], .cross.cross-anchor { height: fit-content; } @@ -578,7 +579,8 @@ span.btn-anchor { z-index: 100; } -span.btn-anchor.pin, span.btn-anchor:hover { +span.btn-anchor.pin, +span.btn-anchor:hover { color: white; } @@ -608,7 +610,8 @@ span.btn-anchor.pin, span.btn-anchor:hover { text-align: center; } -#serialTable th, #serialTable td { +#serialTable th, +#serialTable td { padding: 0.5rem; } @@ -633,7 +636,7 @@ span.btn-anchor.pin, span.btn-anchor:hover { .whisker { max-width: 4vw; min-width: 3vw; - height: calc(15vw - 1rem) !important + height: calc(15vw - 1rem) !important; } .time-series { @@ -676,12 +679,12 @@ span.btn-anchor.pin, span.btn-anchor:hover { .show-more-btn { cursor: pointer; display: inline-block; - padding: 0 .5em; + padding: 0 0.5em; margin-top: 5px; color: #666; line-height: 2; border: 1px solid #ddd; - border-radius: .25em; + border-radius: 0.25em; } .show-more-div { @@ -692,9 +695,9 @@ span.btn-anchor.pin, span.btn-anchor:hover { position: relative; } -.histogram-tab-content.tab-content>.tab-pane:not(:first-child) { +.histogram-tab-content.tab-content > .tab-pane:not(:first-child) { position: absolute; - display: block!important; + display: block !important; width: 100%; height: 100%; visibility: hidden; @@ -704,11 +707,11 @@ span.btn-anchor.pin, span.btn-anchor:hover { z-index: -1; } -.histogram-tab-content.tab-content>.active { - position: static!important; +.histogram-tab-content.tab-content > .active { + position: static !important; display: block; - visibility: visible!important; - opacity: 1!important; + visibility: visible !important; + opacity: 1 !important; z-index: unset; } @@ -726,4 +729,4 @@ span.btn-anchor.pin, span.btn-anchor:hover { height: 100%; font-size: 10px; padding: 0 5px 0 24px; -} \ No newline at end of file +} diff --git a/ap/static/trace_data/js/trace_data.js b/ap/static/trace_data/js/trace_data.js index 2f0393b..f207122 100644 --- a/ap/static/trace_data/js/trace_data.js +++ b/ap/static/trace_data/js/trace_data.js @@ -1,9 +1,3 @@ -/* eslint-disable no-loop-func */ -/* eslint-disable no-restricted-syntax */ -/* eslint-disable guard-for-in */ -/* eslint-disable no-unused-vars */ -/* eslint-disable no-undef */ -/* eslint-disable no-use-before-define */ const REQUEST_TIMEOUT = setRequestTimeOut(); const MAX_NUMBER_OF_GRAPH = 20; @@ -109,7 +103,8 @@ const i18n = { default: $('#partNoDefaultName').text() || 'Default', timestamp: $('#i18nTimestamp').text() || 'Default', index: $('#i18nIndex').text() || 'Default', - cannotBeDisplayed: $('#i18nCannotBeDisplayed').text() || 'Cannot be displayed', + cannotBeDisplayed: + $('#i18nCannotBeDisplayed').text() || 'Cannot be displayed', thinDataShown: $('#i18nThinDataShown').text(), catLimitMsg: $('#i18nCatLimitedMsg').text().split('BREAK_LINE'), overUniqueLimitLabel: $('#i18nOverUniqueLimitLabel').text(), @@ -136,17 +131,18 @@ const updateIndexInforTable = () => { $('#index-infor-table tbody').append(indexTbodyDOM); }; const triggerSerialTableEvents = () => { - $('.index-inform').unbind('mouseenter').on('mouseenter', () => { - $('.index-inform-content').show(); - updateIndexInforTable(); - }); + $('.index-inform') + .unbind('mouseenter') + .on('mouseenter', () => { + $('.index-inform-content').show(); + updateIndexInforTable(); + }); $('.index-inform-content').on('mouseleave', () => { $('.index-inform-content').hide(); }); }; - $(() => { // generate tab ID while (tabID === null || sessionStorage.getItem(tabID)) { @@ -179,8 +175,13 @@ $(() => { }); // add first condition process - const condProcItem = addCondProc(endProcs.ids, endProcs.names, '', formElements.formID.replace('#', ''), - 'btn-add-cond-proc'); + const condProcItem = addCondProc( + endProcs.ids, + endProcs.names, + '', + formElements.formID.replace('#', ''), + 'btn-add-cond-proc', + ); condProcItem(); // click even of condition proc add button @@ -221,7 +222,12 @@ $(() => { setGraphSetting(); const currentTraceData = graphStore.getTraceData(); // TODO: should update than re-draw - drawHistogramsTab(currentTraceData, fppScaleOption.yAxis, false, fppScaleOption.xAxis); + drawHistogramsTab( + currentTraceData, + fppScaleOption.yAxis, + false, + fppScaleOption.xAxis, + ); }); // set copy clipboard for setting information @@ -245,33 +251,52 @@ $(() => { const autoScrollToChart = (milisec = 100) => { // Move screen to graph after pushing グラフ表示 button loadingHide(); - $('html, body').animate({ - scrollTop: $(formElements.traceDataTabs).offset().top + 15, - }, milisec); + $('html, body').animate( + { + scrollTop: getOffsetTopDisplayGraph(formElements.traceDataTabs), + }, + milisec, + ); }; const buildTimeSeriesCardHTML = (chartOption, cssName) => { - const {index} = chartOption; - const {endProcName} = chartOption; - const {sensorId} = chartOption; - const {getProc} = chartOption; - const {getVal} = chartOption; - const {catExpBox} = chartOption; + const { index } = chartOption; + const { endProcName } = chartOption; + const { sensorId } = chartOption; + const { getProc } = chartOption; + const { getVal } = chartOption; + const { catExpBox } = chartOption; const graphCanvasHTML = buildGraphContainerHTML(chartOption); - const {allSummaryData} = chartOption; - const {latestChartInfoIdx} = chartOption; - const {startProc} = chartOption; - const {beforeRankValues} = chartOption; - const {stepChartSummary} = chartOption; - const {isCTCol} = chartOption; + const { allSummaryData } = chartOption; + const { latestChartInfoIdx } = chartOption; + const { startProc } = chartOption; + const { beforeRankValues } = chartOption; + const { stepChartSummary } = chartOption; + const { isCTCol } = chartOption; + const { unit } = chartOption; const generalInfo = { - getProc, getVal, startProc, endProcName, catExpBox, + getProc, + getVal, + startProc, + endProcName, + catExpBox, }; const summaryResultsHTMLs = []; allSummaryData.forEach((summaryOption, idx) => { - const summaryResultsHTML = buildTimeSeriesSummaryResultsHTML(summaryOption, idx, generalInfo, beforeRankValues, stepChartSummary, isCTCol); - const display = `${latestChartInfoIdx}` === `${idx}` ? 'display:block;' : 'display:none;'; + const summaryResultsHTML = buildTimeSeriesSummaryResultsHTML( + summaryOption, + idx, + generalInfo, + beforeRankValues, + stepChartSummary, + isCTCol, + unit, + ); + const display = + `${latestChartInfoIdx}` === `${idx}` + ? 'display:block;' + : 'display:none;'; summaryResultsHTMLs.push(`
    ${summaryResultsHTML}
    `); @@ -335,20 +360,26 @@ const calcContainerWidth = (showScatterPlot = false) => { }; const buildGraphContainerHTML = (chartOption) => { - const {endProcName} = chartOption; - const {index} = chartOption; - const {tsCanvasId} = chartOption; - const {histCanvasId} = chartOption; - const {whiskerCanvasId} = chartOption; - const {sctrCanvasId} = chartOption; - const {showScatterPlot} = chartOption; - const {chartCols} = chartOption; - const {getVal} = chartOption; - const {catExpBox} = chartOption; - const {dicScatterXY} = chartOption; - const {isCTCol} = chartOption; + const { endProcName } = chartOption; + const { index } = chartOption; + const { tsCanvasId } = chartOption; + const { histCanvasId } = chartOption; + const { whiskerCanvasId } = chartOption; + const { sctrCanvasId } = chartOption; + const { showScatterPlot } = chartOption; + const { chartCols } = chartOption; + const { getVal } = chartOption; + const { catExpBox } = chartOption; + const { dicScatterXY } = chartOption; + const { isCTCol } = chartOption; + let { unit } = chartOption; let graphCanvasHTML = ''; let catExpBoxHTML = ''; + if (unit && unit !== '' && unit !== 'Null') { + unit = ` [${unit}]`; + } else { + unit = ''; + } let CTLabel = ''; if (isCTCol) { @@ -363,7 +394,7 @@ const buildGraphContainerHTML = (chartOption) => {
    ${endProcName} - ${getVal} ${CTLabel} + ${getVal}${unit} ${CTLabel} ${catExpBoxHTML}
    @@ -452,7 +483,6 @@ const buildGraphContainerHTML = (chartOption) => {
    `; - const colSize = chartCols.histogram; graphCanvasHTML += ` @@ -462,6 +492,9 @@ const buildGraphContainerHTML = (chartOption) => {
    +
    + ${unit.trim()} +
    `; if (showScatterPlot && dicScatterXY[index - 1]) { @@ -478,7 +511,18 @@ const buildGraphContainerHTML = (chartOption) => { return graphCanvasHTML; }; -const produceExceptionArrayY = (plotdata, yMin, yMax, unlinkedIdxs, noneIdxs, infIdxs, negInfIdxs, negOutlierIdxs, outlierIdxs) => { +const produceExceptionArrayY = ( + plotdata, + yMin, + yMax, + unlinkedIdxs, + noneIdxs, + infIdxs, + negInfIdxs, + negOutlierIdxs, + outlierIdxs, + beforeRankValues, +) => { const arrayYEx = new Array(plotdata.length).fill(null); const plotDataExColor = new Array(plotdata.length).fill(null); @@ -492,7 +536,9 @@ const produceExceptionArrayY = (plotdata, yMin, yMax, unlinkedIdxs, noneIdxs, in plotDataExColor[idx] = CONST.COLOR_INF; } for (const idx of noneIdxs || []) { - arrayYEx[idx] = yMax; + arrayYEx[idx] = beforeRankValues + ? yMax + CONST.RESIZE_RANGE_CHART + : yMax; // Bar chart show NA at yMax plotDataExColor[idx] = CONST.COLOR_NONE; } for (const idx of outlierIdxs || []) { @@ -507,30 +553,41 @@ const produceExceptionArrayY = (plotdata, yMin, yMax, unlinkedIdxs, noneIdxs, in arrayYEx[idx] = yMin; plotDataExColor[idx] = CONST.COLOR_UNLINKED; } - return {arrayYEx, plotDataExColor}; + return { arrayYEx, plotDataExColor }; }; -const getStartEndPoint = (xAxisOption = 'TIME', timesLength = 20, data = {}) => { +const getStartEndPoint = ( + xAxisOption = 'TIME', + timesLength = 20, + data = {}, +) => { if (xAxisOption === 'INDEX') { return [0, Math.max(20, timesLength)]; } - const startDateTime = moment.utc(`${data.COMMON.START_DATE} ${data.COMMON.START_TIME}`).local().format(moment.HTML5_FMT.DATETIME_LOCAL_SECONDS); - const endDateTime = moment.utc(`${data.COMMON.END_DATE} ${data.COMMON.END_TIME}`).local().format(moment.HTML5_FMT.DATETIME_LOCAL_SECONDS); + const startDateTime = moment + .utc(`${data.COMMON.START_DATE} ${data.COMMON.START_TIME}`) + .local() + .format(moment.HTML5_FMT.DATETIME_LOCAL_SECONDS); + const endDateTime = moment + .utc(`${data.COMMON.END_DATE} ${data.COMMON.END_TIME}`) + .local() + .format(moment.HTML5_FMT.DATETIME_LOCAL_SECONDS); return [startDateTime, endDateTime]; }; - const convertToIndex = (times, chartInfo, startPoint, endPoint) => { const actFrom = chartInfo['act-from']; const actTo = chartInfo['act-to']; let fromIndex = startPoint; if (!isEmpty(actFrom)) { - fromIndex = binarySearch(times, createDatetime(actFrom), (x, y) => (x - y)) + 1; + fromIndex = + binarySearch(times, createDatetime(actFrom), (x, y) => x - y) + 1; } let toIndex = endPoint; if (!isEmpty(actTo)) { - toIndex = binarySearch(times, createDatetime(actTo), (x, y) => (x - y)) + 1; + toIndex = + binarySearch(times, createDatetime(actTo), (x, y) => x - y) + 1; } const chartInfoCI = _.cloneDeep(chartInfo); chartInfoCI['act-from'] = fromIndex; @@ -542,7 +599,7 @@ const convertChartInfoToIndex = (data) => { let times = getNode(data, ['times'], []) || []; const [startPoint, endPoint] = getStartEndPoint('INDEX', times.length); const len = data.array_plotdata.length; - times = times.map(x => new Date(x)); + times = times.map((x) => new Date(x)); if (!data.array_plotdata) return; for (let i = 0; i < len; i++) { const chartInfos = data.array_plotdata[i].chart_infos || []; @@ -551,11 +608,21 @@ const convertChartInfoToIndex = (data) => { data.array_plotdata[i].chart_infos_org_ci = []; for (const cIdx in chartInfos) { const chartInfo = chartInfos[cIdx]; - const chartInfoCI = convertToIndex(times, chartInfo, startPoint, endPoint); + const chartInfoCI = convertToIndex( + times, + chartInfo, + startPoint, + endPoint, + ); data.array_plotdata[i].chart_infos_ci.push(chartInfoCI); const chartInfoOrg = chartInfosOrg[cIdx]; - const chartInfoOrgCI = convertToIndex(times, chartInfoOrg, startPoint, endPoint); + const chartInfoOrgCI = convertToIndex( + times, + chartInfoOrg, + startPoint, + endPoint, + ); data.array_plotdata[i].chart_infos_org_ci.push(chartInfoOrgCI); } } @@ -577,7 +644,6 @@ const selectScatterXY = (plots) => { return dicIdxs; }; - const traceDataChart = (data, clearOnFlyFilter) => { if (isEmpty(data)) return; @@ -608,7 +674,7 @@ const traceDataChart = (data, clearOnFlyFilter) => { // convert time data to local time, local time is applied to all functions const times = getNode(data, ['times'], []) || []; // data.times = times.map(x => new Date(x)); // array of Date objects, not strings - data.times = times.map(x => moment.utc(x).toDate()); // convert to localtime + data.times = times.map((x) => moment.utc(x).toDate()); // convert to localtime const xAxisOption = data.COMMON.xOption; let [startPoint, endPoint] = getStartEndPoint('TIME', 20, data); @@ -627,7 +693,11 @@ const traceDataChart = (data, clearOnFlyFilter) => { // マスタが存在するならマスタ情報を適用 const endProcId = plotData.end_proc_id; const sensorId = plotData.end_col_id; - const isHideNonePoint = isHideNoneDataPoint(endProcId, sensorId, data.COMMON.remove_outlier); + const isHideNonePoint = isHideNoneDataPoint( + endProcId, + sensorId, + data.COMMON.remove_outlier, + ); const formCommon = data.COMMON; const arrayY = data.array_plotdata[i].array_y; @@ -638,7 +708,9 @@ const traceDataChart = (data, clearOnFlyFilter) => { const slotCount = data.array_plotdata[i].slot_count; const scaleInfo = getScaleInfo(data.array_plotdata[i], scaleOption); const unlinkedIdxs = data.array_plotdata[i].unlinked_idxs; - const noneIdxs = isHideNonePoint ? [] : data.array_plotdata[i].none_idxs; + const noneIdxs = isHideNonePoint + ? [] + : data.array_plotdata[i].none_idxs; const infIdxs = data.array_plotdata[i].inf_idxs; const negInfIdxs = data.array_plotdata[i].neg_inf_idxs; const isCatLimited = data.array_plotdata[i].is_cat_limited || false; @@ -648,17 +720,30 @@ const traceDataChart = (data, clearOnFlyFilter) => { beforeRankValues = makeDictFrom2Arrays(...beforeRankValues); } - const [dictIdx2YValue, arrayYTS] = buildMapIndex2OutlierYValue(data.array_plotdata[i], scaleInfo); - const categoryDistributed = beforeRankValues ? data.array_plotdata[i].category_distributed : null; + const [dictIdx2YValue, arrayYTS] = buildMapIndex2OutlierYValue( + data.array_plotdata[i], + scaleInfo, + ); + const categoryDistributed = beforeRankValues + ? data.array_plotdata[i].category_distributed + : null; // get latest thresholds -> show thresholds in scatter, histogram, summary const filterCond = data.array_plotdata[i].catExpBox - ? (Array.isArray(data.array_plotdata[i].catExpBox) - ? data.array_plotdata[i].catExpBox : [data.array_plotdata[i].catExpBox]) + ? Array.isArray(data.array_plotdata[i].catExpBox) + ? data.array_plotdata[i].catExpBox + : [data.array_plotdata[i].catExpBox] : null; - const [chartInfos, chartInfosOrg] = getChartInfo(data.array_plotdata[i], xAxisOption, filterCond); + const [chartInfos, chartInfosOrg] = getChartInfo( + data.array_plotdata[i], + xAxisOption, + filterCond, + ); const [latestChartInfo, latestChartInfoIdx] = chooseLatestThresholds( - chartInfos, chartInfosOrg, null, convertFunc, + chartInfos, + chartInfosOrg, + null, + convertFunc, ); const threshHigh = latestChartInfo['thresh-high']; const threshLow = latestChartInfo['thresh-low']; @@ -667,27 +752,40 @@ const traceDataChart = (data, clearOnFlyFilter) => { // y_min/max are defined in backend -> get only const kdeData = scaleInfo.kde_data; - const yMax = scaleOption === scaleOptionConst.THRESHOLD ? scaleInfo['y-max'] + (scaleInfo['y-max'] * 0.1) : scaleInfo['y-max']; - const yMin = scaleOption === scaleOptionConst.THRESHOLD ? scaleInfo['y-min'] - (scaleInfo['y-min'] * 0.1) : scaleInfo['y-min']; + const yMax = + scaleOption === scaleOptionConst.THRESHOLD + ? scaleInfo['y-max'] + scaleInfo['y-max'] * 0.1 + : scaleInfo['y-max']; + const yMin = + scaleOption === scaleOptionConst.THRESHOLD + ? scaleInfo['y-min'] - scaleInfo['y-min'] * 0.1 + : scaleInfo['y-min']; const outlierIdxs = scaleInfo.upper_outlier_idxs; const negOutlierIdxs = scaleInfo.lower_outlier_idxs; // produce exception y-array and color array from y type - const { - arrayYEx, - plotDataExColor, - } = produceExceptionArrayY(arrayY, yMin, yMax, unlinkedIdxs, noneIdxs, infIdxs, negInfIdxs, negOutlierIdxs, outlierIdxs); - + const { arrayYEx, plotDataExColor } = produceExceptionArrayY( + arrayY, + yMin, + yMax, + unlinkedIdxs, + noneIdxs, + infIdxs, + negInfIdxs, + negOutlierIdxs, + outlierIdxs, + beforeRankValues, + ); // カラム名を取得する。 const columnName = plotData.end_col_show_name; - let {catExpBox} = data.array_plotdata[i]; + let { catExpBox } = data.array_plotdata[i]; if (catExpBox === null) { catExpBox = COMMON_CONSTANT.NA; } - if (typeof (catExpBox) === 'object') { - catExpBox.map(val => (val === null ? COMMON_CONSTANT.NA : val)); + if (typeof catExpBox === 'object') { + catExpBox.map((val) => (val === null ? COMMON_CONSTANT.NA : val)); catExpBox = catExpBox.join(' | '); } const isCTCol = isCycleTimeCol(endProcId, sensorId); @@ -695,11 +793,14 @@ const traceDataChart = (data, clearOnFlyFilter) => { const stepChartSummary = data.array_plotdata[i].cat_summary || null; const allSummaryData = []; for (const summaryIdx in data.array_plotdata[i].summaries) { - const summaryData = calculateSummaryData(data.array_plotdata[i].summaries, summaryIdx, isHideNonePoint); + const summaryData = calculateSummaryData( + data.array_plotdata[i].summaries, + summaryIdx, + isHideNonePoint, + ); allSummaryData.push(summaryData); } - // get serial for every datapoint const chartOption = { numCards: data.TBLS, @@ -748,13 +849,17 @@ const traceDataChart = (data, clearOnFlyFilter) => { dicScatterXY, stepChartSummary, isCTCol, + unit: plotData.unit, }; // 起点とターゲット変数工程を比較する。 // make sure process id is integer number before compare together let cardHtml = ''; if (String(endProcId) === String(startProc)) { - cardHtml = buildTimeSeriesCardHTML(chartOption, 'card-border-active'); + cardHtml = buildTimeSeriesCardHTML( + chartOption, + 'card-border-active', + ); } else { cardHtml = buildTimeSeriesCardHTML(chartOption, 'card'); } @@ -817,12 +922,21 @@ const traceDataChart = (data, clearOnFlyFilter) => { // 今回はAjaxでupdateが必要が無いのでオブジェクトを返さない const chartLabels = data.ARRAY_FORMVAL.map( - fv => `${procConfigs[fv.end_proc].name} ${columnName}`, + (fv) => `${procConfigs[fv.end_proc].name} ${columnName}`, ); - const tsChartObject = YasuTsChart($, chartParamObj, chartLabels, tabID, xaxis = xAxisOption, isStepChart = beforeRankValues); + const tsChartObject = YasuTsChart( + $, + chartParamObj, + chartLabels, + tabID, + (xaxis = xAxisOption), + (isStepChart = beforeRankValues), + ); - const hist = beforeRankValues ? StepBarChart($, histParamObj) : YasuHistogram($, histParamObj); + const hist = beforeRankValues + ? StepBarChart($, histParamObj) + : YasuHistogram($, histParamObj); histObjs.push(hist.histObj); // TODO need to add comment // store just been created graph objects to graph storage @@ -833,7 +947,10 @@ const traceDataChart = (data, clearOnFlyFilter) => { // produce scatter plots if (showScatterPlot) { - const dictCanvas2Scatter = produceScatterPlotCharts(data, scaleOption); + const dictCanvas2Scatter = produceScatterPlotCharts( + data, + scaleOption, + ); graphStore.setDctCanvas2Scatter(dictCanvas2Scatter); } @@ -842,11 +959,14 @@ const traceDataChart = (data, clearOnFlyFilter) => { updateThresholdsOnClick(chartOption.tsCanvasId, lastDataPointIndex); // report progress. TODO apply for other pages - loadingUpdate(loadingProgressBackend + i * ((100 - loadingProgressBackend) / (data.TBLS || 1))); + loadingUpdate( + loadingProgressBackend + + i * ((100 - loadingProgressBackend) / (data.TBLS || 1)), + ); } // produce categorical table - produceCategoricalTable(data, options = {chartCols}, clearOnFlyFilter); + produceCategoricalTable(data, (options = { chartCols }), clearOnFlyFilter); // drag and drop timeseries card to save order + redraw scatter plot addTimeSeriesCardSortableEventHandler(); @@ -892,7 +1012,7 @@ const getRowAndSensors = (data) => { sensors.push(plotdata.end_col_id); } - const facet = plotdata.catExpBox ? plotdata.catExpBox.join(' | ') : '' + const facet = plotdata.catExpBox ? plotdata.catExpBox.join(' | ') : ''; if (facet && !unitFacet.includes(facet)) { unitFacet.push(facet); @@ -909,9 +1029,13 @@ const getRowAndSensors = (data) => { return data; }; - // build histogram tab -const drawHistogramsTab = (data, scaleOption = fppScaleOption.yAxis, isReset = true, frequencyOption = fppScaleOption.xAxis) => { +const drawHistogramsTab = ( + data, + scaleOption = fppScaleOption.yAxis, + isReset = true, + frequencyOption = fppScaleOption.xAxis, +) => { $(formElements.histogramTab).empty(); $(formElements.histogramTab).css('display', 'block'); @@ -923,7 +1047,9 @@ const drawHistogramsTab = (data, scaleOption = fppScaleOption.yAxis, isReset = t for (let rowIdx = 0; rowIdx < data.row; rowIdx++) { // add row const rowID = `hist-cards-${rowIdx}`; - $(formElements.histogramTab).append(`
    `); + $(formElements.histogramTab).append( + `
    `, + ); for (let i = 0; i < numChart; i++) { const formVal = data.ARRAY_FORMVAL[i]; const beforeRankValues = data.array_plotdata[i].before_rank_values; @@ -934,27 +1060,45 @@ const drawHistogramsTab = (data, scaleOption = fppScaleOption.yAxis, isReset = t } const filterCond = data.array_plotdata[i].catExpBox - ? (Array.isArray(data.array_plotdata[i].catExpBox) - ? data.array_plotdata[i].catExpBox : [data.array_plotdata[i].catExpBox]) + ? Array.isArray(data.array_plotdata[i].catExpBox) + ? data.array_plotdata[i].catExpBox + : [data.array_plotdata[i].catExpBox] : null; - const [chartInfos, chartInfosOrg] = getChartInfo(data.array_plotdata[i], 'TIME', filterCond); - const [latestChartInfo, latestChartInfoIdx] = chooseLatestThresholds(chartInfos, chartInfosOrg); + const [chartInfos, chartInfosOrg] = getChartInfo( + data.array_plotdata[i], + 'TIME', + filterCond, + ); + const [latestChartInfo, latestChartInfoIdx] = + chooseLatestThresholds(chartInfos, chartInfosOrg); const scaleInfo = getScaleInfo(data.array_plotdata[i], scaleOption); // y_min/max are defined in backend -> get only const kdeData = scaleInfo.kde_data; - const [minY, maxY] = calMinMaxYScale(scaleInfo['y-min'], scaleInfo['y-max'], scaleOption) - const minX = frequencyOption === frequencyOptions.COMMON ? scaleInfo['x-min'] : null; - const maxX = frequencyOption === frequencyOptions.COMMON ? scaleInfo['x-max'] : null; + const [minY, maxY] = calMinMaxYScale( + scaleInfo['y-min'], + scaleInfo['y-max'], + scaleOption, + ); + const minX = + frequencyOption === frequencyOptions.COMMON + ? scaleInfo['x-min'] + : null; + const maxX = + frequencyOption === frequencyOptions.COMMON + ? scaleInfo['x-max'] + : null; const endProcId = data.array_plotdata[i].end_proc_id; const getVal = data.array_plotdata[i].end_col_id; - let {catExpBox} = plotdata; + let { catExpBox } = plotdata; if (catExpBox === null) { catExpBox = COMMON_CONSTANT.NA; } - if (typeof (catExpBox) === 'object') { - catExpBox.map(val => (val === null ? COMMON_CONSTANT.NA : val)); + if (typeof catExpBox === 'object') { + catExpBox.map((val) => + val === null ? COMMON_CONSTANT.NA : val, + ); catExpBox = catExpBox.join(' | '); } @@ -964,28 +1108,60 @@ const drawHistogramsTab = (data, scaleOption = fppScaleOption.yAxis, isReset = t const stepChartSummary = data.array_plotdata[i].cat_summary || null; // create summaries HTMLs - const {end_col_id, end_proc_id, summaries, data_type} = plotdata; - const isHideNonePoint = isHideNoneDataPoint(end_proc_id, end_col_id, data.COMMON.remove_outlier); - const summaryData = calculateSummaryData(summaries, latestChartInfoIdx, isHideNonePoint); + const { end_col_id, end_proc_id, summaries, data_type } = plotdata; + const isHideNonePoint = isHideNoneDataPoint( + end_proc_id, + end_col_id, + data.COMMON.remove_outlier, + ); + const summaryData = calculateSummaryData( + summaries, + latestChartInfoIdx, + isHideNonePoint, + ); const isCategory = plotdata.is_category; const allGroupNames = isCategory - ? getAllGroupOfSensor(data.array_plotdata.filter( - plot => plot.end_col_id === plotdata.end_col_id - )) : []; - - const isLimitCat = plotdata.is_cat_limited || (isCategory && allGroupNames.id.length >= 29); + ? getAllGroupOfSensor( + data.array_plotdata.filter( + (plot) => plot.end_col_id === plotdata.end_col_id, + ), + ) + : []; + + const isLimitCat = + plotdata.is_cat_limited || + (isCategory && allGroupNames.id.length >= 29); const generalInfo = { - getVal, startProc, endProcId, + getVal, + startProc, + endProcId, }; - const summariesHTML = buildSummaryResultsHTML(summaryData, `${rowIdx}-${i + 1}`, generalInfo, beforeRankValues, stepChartSummary); - - const catExpBoxCols = [data.COMMON['catExpBox1'], data.COMMON['catExpBox2']].filter(c => c); - - const chartTitle = buildSummaryChartTitle(catExpBox, catExpBoxCols, plotdata.catExpBoxName, false, {}, true); + const summariesHTML = buildSummaryResultsHTML( + summaryData, + `${rowIdx}-${i + 1}`, + generalInfo, + beforeRankValues, + stepChartSummary, + ); + + const catExpBoxCols = [ + data.COMMON['catExpBox1'], + data.COMMON['catExpBox2'], + ].filter((c) => c); + + const chartTitle = buildSummaryChartTitle( + catExpBox, + catExpBoxCols, + plotdata.catExpBoxName, + false, + {}, + true, + ); // create histogram HTMLs - const hisCardBorder = (String(endProcId) === String(startProc)) ? 'his-active' : ''; - const canvasId = `${formElements.histograms}-${rowIdx}-${i + 1}` + const hisCardBorder = + String(endProcId) === String(startProc) ? 'his-active' : ''; + const canvasId = `${formElements.histograms}-${rowIdx}-${i + 1}`; const cardHtml = `
    ${chartTitle} @@ -1038,7 +1214,10 @@ const loading = $('.loading'); const resetGraphSetting = () => { $(`select[name=${formElements.frequencyScale}]`).val(frequencyOptions.AUTO); - $(`input[name=${formElements.summaryOption}][value=none]`).prop('checked', true); + $(`input[name=${formElements.summaryOption}][value=none]`).prop( + 'checked', + true, + ); $(formElements.yScaleOption).val(1); }; @@ -1050,7 +1229,7 @@ const traceDataWithDBChecking = (action) => { // continue to trace data or export CSV/TSV if (action === 'TRACE-DATA') { - isValid = checkValidations({max: MAX_NUMBER_OF_SENSOR}); + isValid = checkValidations({ max: MAX_NUMBER_OF_SENSOR }); updateStyleOfInvalidElements(); if (!isValid) return; // close sidebar @@ -1062,6 +1241,9 @@ const traceDataWithDBChecking = (action) => { loadingUpdate(5); handleSubmit(true); + + // reset options in dropdown of serialTableModal2 when re-open + lastSelectedOrder = []; } }; const clearTraceResultCards = () => { @@ -1096,7 +1278,7 @@ const updateCategoryOrder = (formData) => { formData.delete(name.order); formData.set(name.xOption, xOption); - updateOrderCols.forEach(orderCol => { + updateOrderCols.forEach((orderCol) => { formData.append(name.process, orderCol.serialProcess); formData.append(name.serial, orderCol.serialColumn); formData.append(name.order, orderCol.serialOrder); @@ -1139,83 +1321,127 @@ const traceData = (clearOnFlyFilter, autoUpdate) => { let formData = collectFormDataTrace(clearOnFlyFilter, autoUpdate); formData = handleXSettingOnGUI(formData); + showGraphCallApi( + '/ap/api/fpp/index', + formData, + REQUEST_TIMEOUT, + async (res) => { + $(formElements.traceDataTabs).css('display', 'block'); + + // sort graphs + if (latestSortColIds && latestSortColIds.length) { + res.ARRAY_FORMVAL = sortGraphs( + res.ARRAY_FORMVAL, + 'GET02_VALS_SELECT', + latestSortColIds, + ); + res.array_plotdata = sortGraphs( + res.array_plotdata, + 'end_col_id', + latestSortColIds, + ); + } + convertChartInfoToIndex(res); + // store trace result + graphStore.setTraceData(_.cloneDeep(res)); - showGraphCallApi('/ap/api/fpp/index', formData, REQUEST_TIMEOUT, async (res) => { - $(formElements.traceDataTabs).css('display', 'block'); - - // sort graphs - if (latestSortColIds && latestSortColIds.length) { - res.ARRAY_FORMVAL = sortGraphs(res.ARRAY_FORMVAL, 'GET02_VALS_SELECT', latestSortColIds); - res.array_plotdata = sortGraphs(res.array_plotdata, 'end_col_id', latestSortColIds); - } - convertChartInfoToIndex(res); + availableOrderingSettings = res.COMMON.available_ordering_columns; + // add datetime and serial columnId to availableOrderingSettings - // store trace result - graphStore.setTraceData(_.cloneDeep(res)); - - availableOrderingSettings = res.COMMON.available_ordering_columns; + for (const procId in availableOrderingSettings) { + const procInfo = procConfigs[procId]; + if (!procInfo) { + // in case of process has been deleted at that time -> 'undefined' process be found + continue; + } + const serialDateTimeColId = procInfo?.columns + .filter((col) => col.is_serial_no || col.is_get_date) + .map((col) => col.id); + + serialDateTimeColId.forEach((columnId) => { + if ( + availableOrderingSettings[procId].indexOf(columnId) < 0 + ) { + availableOrderingSettings[procId].push(columnId); + } + }); + availableOrderingSettings[procId].sort((a, b) => a - b); + } + // add datetime and serial columnId to availableOrderingSettings - end - // TODO: lay nhung column va process o res de disable chinh xac hon. - if (clearOnFlyFilter) { - initTableValue(); - } + // TODO: lay nhung column va process o res de disable chinh xac hon. + if (clearOnFlyFilter) { + initTableValue(); + } - res.filter_on_demand.category = orderCategoryWithOrderSeries(res, clearOnFlyFilter); - const { category } = res.filter_on_demand; + res.filter_on_demand.category = orderCategoryWithOrderSeries( + res, + clearOnFlyFilter, + ); + const { category } = res.filter_on_demand; - setGraphSetting(); - // draw + show data to graphs - traceDataChart(res, clearOnFlyFilter); + setGraphSetting(); + // draw + show data to graphs + traceDataChart(res, clearOnFlyFilter); - showInfoTable(res); + showInfoTable(res); - // render cat, category label filer modal - fillDataToFilterModal(res.filter_on_demand, () => { - bindCategorySort(); - handleSubmit(false, false); - }); + // render cat, category label filer modal + fillDataToFilterModal(res.filter_on_demand, () => { + bindCategorySort(); + handleSubmit(false, false); + }); - // Move screen to graph after pushing グラフ表示 button - if (!autoUpdate) { - autoScrollToChart(500); - } + // Move screen to graph after pushing グラフ表示 button + if (!autoUpdate) { + autoScrollToChart(500); + } - // show toastr to inform result was truncated upto 5000 - if (res.is_res_limited) { - showToastrMsg(i18n.traceResulLimited.split('BREAK_LINE').join('
    ')); - } + // show toastr to inform result was truncated upto 5000 + if (res.is_res_limited) { + showToastrMsg( + i18n.traceResulLimited.split('BREAK_LINE').join('
    '), + ); + } - // show toastr to inform result was truncated upto 5000 - if (res.is_thin_data) { - showToastrMsg(i18n.thinDataShown); - } + // show toastr to inform result was truncated upto 5000 + if (res.is_thin_data) { + showToastrMsg(i18n.thinDataShown); + } - // show limit graphs displayed message - if (res.isGraphLimited) { - showToastrMsg(i18nCommon.limitDisplayedGraphs.replace('NUMBER', MAX_NUMBER_OF_GRAPH)); - } + // show limit graphs displayed message + if (res.isGraphLimited) { + showToastrMsg( + i18nCommon.limitDisplayedGraphs.replace( + 'NUMBER', + MAX_NUMBER_OF_GRAPH, + ), + ); + } - setPollingData(formData, handleSubmit, [false, true]); + setPollingData(formData, handleSubmit, [false, true]); - if ((isEmpty(res.array_plotdata) - || isEmpty(res.array_plotdata[0].array_y)) - && (isEmpty(category) - || isEmpty(category[0]))) { - showToastrAnomalGraph(); - } - isShowIndexInGraphArea = false; - }); + if ( + (isEmpty(res.array_plotdata) || + isEmpty(res.array_plotdata[0].array_y)) && + (isEmpty(category) || isEmpty(category[0])) + ) { + showToastrAnomalGraph(); + } + isShowIndexInGraphArea = false; + }, + ); }; - const setGraphSetting = () => { // frequencyScale, yScaleOption - fppScaleOption.xAxis = $(`select[name=${formElements.frequencyScale}]`).val(); + fppScaleOption.xAxis = $( + `select[name=${formElements.frequencyScale}]`, + ).val(); fppScaleOption.yAxis = $(formElements.yScaleOption).val(); }; - const csvExport = async (type) => { const formData = lastUsedFormData || collectFormDataTrace(true); const queryString = genQueryStringFromFormData(formData); @@ -1232,7 +1458,10 @@ const csvExport = async (type) => { const buildMapIndex2OutlierYValue = (plotdata, scaleInfo) => { const dictIdx2YValue = {}; const arrayYTS = [...plotdata.array_y]; - const idxs = [...scaleInfo.lower_outlier_idxs, ...scaleInfo.upper_outlier_idxs]; + const idxs = [ + ...scaleInfo.lower_outlier_idxs, + ...scaleInfo.upper_outlier_idxs, + ]; for (const idx of idxs) { arrayYTS[idx] = null; // it's outlier value -> clear, not shown as normal data dictIdx2YValue[idx] = plotdata.array_y[idx]; @@ -1240,36 +1469,40 @@ const buildMapIndex2OutlierYValue = (plotdata, scaleInfo) => { return [dictIdx2YValue, arrayYTS]; }; -// eslint-disable-next-line no-unused-vars const scrollTSChart = (() => { jQuery.expr.filters.offscreen = (el) => { const rect = el.getBoundingClientRect(); return ( - (rect.x + rect.width) < 0 - || (rect.y + rect.height) < 0 - || (rect.x > window.innerWidth || rect.y > window.innerHeight) + rect.x + rect.width < 0 || + rect.y + rect.height < 0 || + rect.x > window.innerWidth || + rect.y > window.innerHeight ); }; const $window = $(window); let $stickies; const whenScrolling = () => { - const isScrollOverCategoryTabl = $(window).scrollTop() + 385 < $('#cateArea').offset().top; + const isScrollOverCategoryTabl = + $(window).scrollTop() + 385 < $('#cateArea').offset().top; if (isScrollOverCategoryTabl) { - if ($stickies.find('.btn-anchor').hasClass('pin') - && $stickies.hasClass('pinChart')) { + if ( + $stickies.find('.btn-anchor').hasClass('pin') && + $stickies.hasClass('pinChart') + ) { $stickies.removeClass('pinChart'); - $stickies.css({position: ''}); + $stickies.css({ position: '' }); } } else if ($stickies.find('.btn-anchor').hasClass('pin')) { $stickies.addClass('pinChart'); } }; const load = (stickies) => { - if (typeof stickies === 'object' - && stickies instanceof jQuery - && stickies.length > 0 - && stickies.id !== 'cate-card' + if ( + typeof stickies === 'object' && + stickies instanceof jQuery && + stickies.length > 0 && + stickies.id !== 'cate-card' ) { let $originWH = $(document).height(); $stickies = stickies.each((_, e) => { @@ -1343,7 +1576,9 @@ const pinTSChart = (chartDOMId) => { scrollTSChart.load(cardEle); } else { // check if category table was pinned, return origin situation - const isCateTablePinned = $(formElements.cateCard).find('.btn-anchor').hasClass('pin'); + const isCateTablePinned = $(formElements.cateCard) + .find('.btn-anchor') + .hasClass('pin'); if (isCateTablePinned) { scrollCategoryTable.load($(formElements.cateCard)); } @@ -1351,7 +1586,7 @@ const pinTSChart = (chartDOMId) => { // remove width + position to make more responsive when unpin if (!cardEle.hasClass('pinChart')) { - cardEle.css({width: '', position: ''}); + cardEle.css({ width: '', position: '' }); } }; @@ -1379,12 +1614,16 @@ const handleXSettingOnGUI = (formData = null, xAxisSettings = null) => { }; const bindXAxisSettings = (procId, columns) => { - const hasDummyDatetime = columns.filter(column => column.is_dummy_datetime); + const hasDummyDatetime = columns.filter( + (column) => column.is_dummy_datetime, + ); let xAxisSettings = { xOption: CONST.XOPT_TIME, }; if (hasDummyDatetime.length) { - const serialCols = columns.filter(column => column.is_serial_no || column.order); + const serialCols = columns.filter( + (column) => column.is_serial_no || column.order, + ); if (serialCols.length) { xAxisSettings.xOption = CONST.XOPT_INDEX; // get first serial or order column as default @@ -1393,7 +1632,7 @@ const bindXAxisSettings = (procId, columns) => { serialColumn: serialCols[0].id, serialOrder: 1, }; - xAxisSettings = {...xAxisSettings, ...serialSettings}; + xAxisSettings = { ...xAxisSettings, ...serialSettings }; handleXSettingOnGUI(null, serialSettings); } } @@ -1431,7 +1670,12 @@ const onChangeYScale = () => { const currentTraceData = graphStore.getTraceData(); - drawHistogramsTab(currentTraceData, fppScaleOption.yAxis, false, fppScaleOption.xAxis); + drawHistogramsTab( + currentTraceData, + fppScaleOption.yAxis, + false, + fppScaleOption.xAxis, + ); }); }; @@ -1446,8 +1690,12 @@ const handleExportData = (type) => { const bindScatterPlotEvents = () => { $(formElements.showScatterPlotSelect).on('change', (e) => { // check facets - const facetLv1 = $('select[name=catExpBox] option:selected[value="1"]').length; - const facetLv2 = $('select[name=catExpBox] option:selected[value="2"]').length; + const facetLv1 = $( + 'select[name=catExpBox] option:selected[value="1"]', + ).length; + const facetLv2 = $( + 'select[name=catExpBox] option:selected[value="2"]', + ).length; if (facetLv1 || facetLv2) { // uncheck facets $('select[name=catExpBox] option[value=""]').prop('selected', true); @@ -1464,4 +1712,4 @@ const goToGraphConfigPageFPP = (url) => { const procId = graphStore.getArrayPlotData(selectedCanvasId).end_proc_id; goToOtherPage(`${url}?proc_id=${procId}`, false); -} \ No newline at end of file +}; diff --git a/ap/static/trace_data/js/trace_data_categorical_table.js b/ap/static/trace_data/js/trace_data_categorical_table.js index a748a1a..dd31713 100644 --- a/ap/static/trace_data/js/trace_data_categorical_table.js +++ b/ap/static/trace_data/js/trace_data_categorical_table.js @@ -1,33 +1,37 @@ /* eslint-disable */ -/* eslint-disable no-restricted-syntax */ // add border for boxes on hover const showBorderWhenHoverCateBox = () => { $('.box-has-data').hover( function hoverIn() { $(this).addClass('cate-box-border'); - }, function hoverOut() { + }, + function hoverOut() { $(this).removeClass('cate-box-border'); }, ); }; - -const buildCategoryBoxes = (cateCol, timeCol = null, uiStartTime = null, uiEndTime = null) => { +const buildCategoryBoxes = ( + cateCol, + timeCol = null, + uiStartTime = null, + uiEndTime = null, +) => { let isIndex = false; if (timeCol === null) { isIndex = true; - timeCol = Array.from(Array(cateCol.length), (_, i) => i + 1) + timeCol = Array.from(Array(cateCol.length), (_, i) => i + 1); } const strDtMin = uiStartTime || timeCol[0]; const strDtMax = uiEndTime || timeCol[timeCol.length - 1]; const firstTimeVal = timeCol[0]; - const firstTimeDt = isIndex ? firstTimeVal : new Date(firstTimeVal) + const firstTimeDt = isIndex ? firstTimeVal : new Date(firstTimeVal); const lastTimeVal = timeCol[timeCol.length - 1]; - const lastTimeDt = isIndex ? lastTimeVal : new Date(lastTimeVal) + const lastTimeDt = isIndex ? lastTimeVal : new Date(lastTimeVal); const maxDt = isIndex ? strDtMax : new Date(strDtMax); const minDt = isIndex ? strDtMin : new Date(strDtMin); - const totalLen = (maxDt - minDt); + const totalLen = maxDt - minDt; const len = cateCol.length; const boxes = []; @@ -55,42 +59,43 @@ const buildCategoryBoxes = (cateCol, timeCol = null, uiStartTime = null, uiEndTi if (boxes.length) { // update boxEndPos const prevBoxEndTime = boxes[boxes.length - 1].endTime; - const endTimeObj = isIndex ? prevBoxEndTime : new Date(prevBoxEndTime); + const endTimeObj = isIndex + ? prevBoxEndTime + : new Date(prevBoxEndTime); const prevBoxEndPos = (endTimeObj - minDt) / totalLen; boxes[boxes.length - 1].boxEndPos = prevBoxEndPos; // add empty/gap box - if (boxes.length > 1) { // don't need to add gap box after firstbox - boxes.push( - { - cateName: '', - count: 0, - startTime: prevBoxEndTime, - endTime: timeCol[i], - boxStartPos: prevBoxEndPos, // min = min time of time column. - boxEndPos: (dtVal - minDt) / totalLen, // or just leave it empty - endIndex: i, - }, - ); + if (boxes.length > 1) { + // don't need to add gap box after firstbox + boxes.push({ + cateName: '', + count: 0, + startTime: prevBoxEndTime, + endTime: timeCol[i], + boxStartPos: prevBoxEndPos, // min = min time of time column. + boxEndPos: (dtVal - minDt) / totalLen, // or just leave it empty + endIndex: i, + }); } } // add new box: counting, fix start time, update end time, fix catename, fix boxStartPos - boxes.push( - { - cateName: currentCateVal, - count: 1, - startTime: timeCol[i], - endTime: timeCol[i], - boxStartPos: (dtVal - minDt) / totalLen, // min = min time of time column. - boxEndPos: (dtVal - minDt) / totalLen, // or just leave it empty - startIndex: i, - endIndex: i, - }, - ); + boxes.push({ + cateName: currentCateVal, + count: 1, + startTime: timeCol[i], + endTime: timeCol[i], + boxStartPos: (dtVal - minDt) / totalLen, // min = min time of time column. + boxEndPos: (dtVal - minDt) / totalLen, // or just leave it empty + startIndex: i, + endIndex: i, + }); } else { const prevBoxEndTime = boxes[boxes.length - 1].endTime; - const endTimeObj = isIndex ? prevBoxEndTime : new Date(prevBoxEndTime); + const endTimeObj = isIndex + ? prevBoxEndTime + : new Date(prevBoxEndTime); const prevBoxEndPos = (endTimeObj - minDt) / totalLen; boxes[boxes.length - 1].boxEndPos = prevBoxEndPos; const currentRangePercent = (timeCol[i] - endTimeObj) / totalLen; @@ -133,7 +138,9 @@ const buildCategoryBoxes = (cateCol, timeCol = null, uiStartTime = null, uiEndTi prevCateVal = currentCateVal; } // update boxEndPos of the last box - const endTimeObj = isIndex ? boxes[boxes.length - 1].endTime : new Date(boxes[boxes.length - 1].endTime); + const endTimeObj = isIndex + ? boxes[boxes.length - 1].endTime + : new Date(boxes[boxes.length - 1].endTime); boxes[boxes.length - 1].boxEndPos = (endTimeObj - minDt) / totalLen; // last box @@ -152,7 +159,6 @@ const buildCategoryBoxes = (cateCol, timeCol = null, uiStartTime = null, uiEndTi return boxes; }; - // // combine consecutive small boxes together const combineEmptyBoxes = (boxes) => { let isNarrowBoxCombined = false; @@ -166,25 +172,29 @@ const combineEmptyBoxes = (boxes) => { boxes[i].cateName = ''; } - if (boxes[i].count > 0) { // a box has data (count > 0) + if (boxes[i].count > 0) { + // a box has data (count > 0) combinedBoxes.push(boxes[i]); // mark this box as previous non-empty box previousIsEmpty = false; - } else { // an empty box - if (previousIsEmpty) { // append to previous box + } else { + // an empty box + if (previousIsEmpty) { + // append to previous box const lastIdx = combinedBoxes.length - 1; combinedBoxes[lastIdx].boxEndPos = boxes[i].boxEndPos; combinedBoxes[lastIdx].endTime = boxes[i].endTime; isNarrowBoxCombined = true; - } else { // add new empty box + } else { + // add new empty box combinedBoxes.push(boxes[i]); } // mark this box as previous empty box previousIsEmpty = true; } } - return {combinedBoxes, isNarrowBoxCombined}; + return { combinedBoxes, isNarrowBoxCombined }; }; const combineSmallBoxes = (boxes) => { @@ -195,22 +205,27 @@ const combineSmallBoxes = (boxes) => { for (let i = 0; i < numBox; i++) { const count = parseInt(boxes[i].count || 0); - if (boxes[i].boxEndPos - boxes[i].boxStartPos > 0.002 && count > 0) { // a big box has data + if (boxes[i].boxEndPos - boxes[i].boxStartPos > 0.002 && count > 0) { + // a big box has data combinedBoxes.push(boxes[i]); // mark this box as previous non-empty box previousIsSmall = false; - } else { // an empty box or small box - if (previousIsSmall && i < numBox - 1) { // previous is small + current is small -> merge + } else { + // an empty box or small box + if (previousIsSmall && i < numBox - 1) { + // previous is small + current is small -> merge const lastIdx = combinedBoxes.length - 1; combinedBoxes[lastIdx].boxEndPos = boxes[i].boxEndPos; combinedBoxes[lastIdx].endTime = boxes[i].endTime; combinedBoxes[lastIdx].endIndex = boxes[i].endIndex; - combinedBoxes[lastIdx].count = parseInt(combinedBoxes[lastIdx].count || 0) + count; + combinedBoxes[lastIdx].count = + parseInt(combinedBoxes[lastIdx].count || 0) + count; // combinedBoxes[lastIdx].cateName += `.${boxes[i].cateName}`; // TODO display name combinedBoxes[lastIdx].isGroup = true; isNarrowBoxCombined = true; - } else { // add new small box + } else { + // add new small box combinedBoxes.push(boxes[i]); } // mark this box as previous small box @@ -219,11 +234,17 @@ const combineSmallBoxes = (boxes) => { } } } - return {combinedBoxes, isNarrowBoxCombined}; + return { combinedBoxes, isNarrowBoxCombined }; }; - -const createCateTableHTML = (cateBoxes, cateId, thinDataGroupCounts, indexOrderColumns, isThinData, xAxisOption) => { +const createCateTableHTML = ( + cateBoxes, + cateId, + thinDataGroupCounts, + indexOrderColumns, + isThinData, + xAxisOption, +) => { let tds = ''; if (cateBoxes === null) { tds = ` @@ -238,7 +259,7 @@ const createCateTableHTML = (cateBoxes, cateId, thinDataGroupCounts, indexOrderC `; } for (const idx in cateBoxes || []) { - const cateBoxIdx = `cate-edge-${cateId}-${idx}` + const cateBoxIdx = `cate-edge-${cateId}-${idx}`; const box = cateBoxes[idx]; let widthPercent = box.boxEndPos - box.boxStartPos; if (idx === '0') { @@ -267,7 +288,10 @@ const createCateTableHTML = (cateBoxes, cateId, thinDataGroupCounts, indexOrderC // } // NA case (have data but it is unknown/undefined data) - if ((box.cateName === '' || box.cateName === null) && box.count > 0) { + if ( + (box.cateName === '' || box.cateName === null) && + box.count > 0 + ) { colorClass = 'box-is-na'; showLabelTooltip = COMMON_CONSTANT.NA; showLabelBox = COMMON_CONSTANT.NA; @@ -278,14 +302,16 @@ const createCateTableHTML = (cateBoxes, cateId, thinDataGroupCounts, indexOrderC colorClass = 'box-is-group'; showLabelTooltip = i18n.cannotBeDisplayed; showLabelBox = ''; - widthPercent = widthPercent > 0.01 ? widthPercent : widthPercent * 0.85; + widthPercent = + widthPercent > 0.01 ? widthPercent : widthPercent * 0.85; } - let hoverStr = `${i18n.value}: ${showLabelTooltip}
    `; let dataCount = 0; if (isThinData) { - dataCount = thinDataGroupCounts.slice(box.startIndex, box.endIndex + 1).reduce((a, b) => a + b, 0); + dataCount = thinDataGroupCounts + .slice(box.startIndex, box.endIndex + 1) + .reduce((a, b) => a + b, 0); } else { dataCount = box.count; } @@ -297,7 +323,13 @@ const createCateTableHTML = (cateBoxes, cateId, thinDataGroupCounts, indexOrderC for (const aggKey of ['min', 'max', 'value']) { if (dicOrder[aggKey]) { // val.concat(dicOrder[aggKey].slice(box.startIndex, box.endIndex + 1)); - val = [...val, ...dicOrder[aggKey].slice(box.startIndex, box.endIndex + 1)]; + val = [ + ...val, + ...dicOrder[aggKey].slice( + box.startIndex, + box.endIndex + 1, + ), + ]; } } // console.log(val); @@ -306,15 +338,15 @@ const createCateTableHTML = (cateBoxes, cateId, thinDataGroupCounts, indexOrderC hoverStr += `${i18n.minVal}: ${checkTrue(minVal) ? minVal : COMMON_CONSTANT.NA}
    `; hoverStr += `${i18n.maxVal}: ${checkTrue(maxVal) ? maxVal : COMMON_CONSTANT.NA}
    `; } - } else { hoverStr += `${i18n.startTime}: ${new Date(box.startTime).toLocaleString()}
    ${i18n.endTime}: ${new Date(box.endTime).toLocaleString()}
    `; } - const boxInfo = box.count > 0 - ? `${showLabelBox} ${hoverStr} ` - : ''; + const boxInfo = + box.count > 0 + ? `${showLabelBox} ${hoverStr} ` + : ''; td = `
    ${leftEdge} @@ -342,13 +374,19 @@ const pinCategoryTable = () => { scrollCategoryTable.load($(formElements.cateCard)); }; - -const createCateCard = (cateNameHTMLs, tableHTMLs, width, cols = {}, traceDat = {}) => { +const createCateCard = ( + cateNameHTMLs, + tableHTMLs, + width, + cols = {}, + traceDat = {}, +) => { const tblWidthCSS = width ? `width: ${width}px;` : ''; // tableHTMLs.length = 1; const cardHtml = `
    - ${tableHTMLs.length > 0 ? - `
    + ${ + tableHTMLs.length > 0 + ? `
    ${createAnchorHTML()}
    @@ -370,7 +408,9 @@ const createCateCard = (cateNameHTMLs, tableHTMLs, width, cols = {}, traceDat =
    -
    ` : '' } +
    ` + : '' + }
    `; return cardHtml; }; @@ -382,7 +422,7 @@ const createAnchorHTML = () => { onclick="pinCategoryTable();"> `; -} +}; const resetCateogryTablePosition = () => { $(formElements.cateCard).removeClass('cate-fixed'); @@ -394,14 +434,22 @@ let isDivResizing = false; // adjust category table to be aligned with TS chart const getFirstTSChartId = () => { - const firstChartId = $('#plot-cards').find('canvas[chart-type="timeSeries"]').first().attr('id') || 'chart01'; + const firstChartId = + $('#plot-cards') + .find('canvas[chart-type="timeSeries"]') + .first() + .attr('id') || 'chart01'; return `#${firstChartId}`; -} +}; const getFirstHistChartId = () => { - const firstChartId = $('#plot-cards').find('canvas[chart-type="histogram"]').first().attr('id') || 'hist01'; + const firstChartId = + $('#plot-cards') + .find('canvas[chart-type="histogram"]') + .first() + .attr('id') || 'hist01'; return `#${firstChartId}`; -} +}; const getChartErea = (canvasId) => { for (const idx in Chart.instances) { @@ -432,11 +480,14 @@ const adjustCatetoryTableLength = () => { // set catetable position const chartArea = getChartErea(firstTSChartId); const tableWidth1 = chartArea.right - chartArea.left + 2; // 2 is border width of two sides - const zoomRate = Math.min(1, Math.round(window.devicePixelRatio * 100) / 100); + const zoomRate = Math.min( + 1, + Math.round(window.devicePixelRatio * 100) / 100, + ); const adjust = Math.abs((1 - zoomRate) * 12); const chartOffsetLeft = firstTSChart.offset().left; const cateTblOffsetLeft = chartOffsetLeft + chartArea.left - 1 - adjust; // -1 to reserve left border - cateTableContainer.offset({left: cateTblOffsetLeft}); + cateTableContainer.offset({ left: cateTblOffsetLeft }); const canvasOffsetLeft = firstTSChart.offset().left; const canvasOffsetRight = canvasOffsetLeft + firstTSChart.width(); @@ -448,7 +499,6 @@ const adjustCatetoryTableLength = () => { $(`${formElements.cateTable} table`).each(function f() { $(this).css('width', tableWidth - adjust); }); - } catch (error) { // console.log(error); } @@ -468,19 +518,17 @@ const contentResizeHandler = () => { } } - new ResizeObserver(onResize) - .observe(document.getElementById('content')); + new ResizeObserver(onResize).observe(document.getElementById('content')); }; - -// eslint-disable-next-line no-unused-vars const scrollCategoryTable = (() => { jQuery.expr.filters.offscreen = (el) => { const rect = el.getBoundingClientRect(); return ( - (rect.x + rect.width) < 0 - || (rect.y + rect.height) < 0 - || (rect.x > window.innerWidth || rect.y > window.innerHeight) + rect.x + rect.width < 0 || + rect.y + rect.height < 0 || + rect.x > window.innerWidth || + rect.y > window.innerHeight ); }; const $window = $(window); @@ -488,24 +536,33 @@ const scrollCategoryTable = (() => { const whenScrolling = () => { $stickies.each((i, e) => { - const $cardParent = $(e).parents().filter('form') - .parent() - .parent(); + const $cardParent = $(e).parents().filter('form').parent().parent(); const $thisSticky = $(e); const $stickyPosition = $thisSticky.data('originalPosition'); - if ($stickyPosition <= $window.scrollTop() && !$cardParent.is(':offscreen')) { + if ( + $stickyPosition <= $window.scrollTop() && + !$cardParent.is(':offscreen') + ) { const $nextSticky = $stickies.eq(i + 1); - const $nextStickyPosition = $nextSticky.data('originalPosition') - $thisSticky.data('originalHeight'); + const $nextStickyPosition = + $nextSticky.data('originalPosition') - + $thisSticky.data('originalHeight'); $thisSticky.addClass('cate-fixed'); - if ($nextSticky.length > 0 && $thisSticky.offset().top >= $nextStickyPosition) { - $thisSticky.addClass('absolute').css('top', $nextStickyPosition); + if ( + $nextSticky.length > 0 && + $thisSticky.offset().top >= $nextStickyPosition + ) { + $thisSticky + .addClass('absolute') + .css('top', $nextStickyPosition); } // align scrolled category table with plot-cards - const tableLeftOffset = $(formElements.tsPlotCards).offset().left; + const tableLeftOffset = $(formElements.tsPlotCards).offset() + .left; const plotCardWidth = $(formElements.tsPlotCards).outerWidth(); $thisSticky.css('left', tableLeftOffset); $thisSticky.css('width', plotCardWidth); @@ -514,8 +571,11 @@ const scrollCategoryTable = (() => { $thisSticky.removeClass('cate-fixed'); - if ($prevSticky.length > 0 - && $window.scrollTop() <= $thisSticky.data('originalPosition') - $thisSticky.data('originalHeight') + if ( + $prevSticky.length > 0 && + $window.scrollTop() <= + $thisSticky.data('originalPosition') - + $thisSticky.data('originalHeight') ) { $prevSticky.removeClass('absolute').removeAttr('style'); } @@ -523,9 +583,10 @@ const scrollCategoryTable = (() => { }); }; const load = (stickies) => { - if (typeof stickies === 'object' - && stickies instanceof jQuery - && stickies.length > 0 + if ( + typeof stickies === 'object' && + stickies instanceof jQuery && + stickies.length > 0 ) { let $originWH = $(document).height(); $stickies = stickies.each((_, e) => { @@ -562,36 +623,42 @@ const nonNACalcuation = (cates) => { return [0, 0]; } const total = cates.length; - const nonNACount = cates.filter(c => c !== null).length; - return [Number(100 * nonNACount / (total || 1)).toFixed(2), nonNACount, total]; + const nonNACount = cates.filter((c) => c !== null).length; + return [ + Number((100 * nonNACount) / (total || 1)).toFixed(2), + nonNACount, + total, + ]; }; - const orderCategoryWithOrderSeries = (traceData, clearOnFlyFilter) => { const shouldOrderByIndexList = isShowIndexInGraphArea || clearOnFlyFilter; if (!shouldOrderByIndexList) return traceData.filter_on_demand.category; const { category } = traceData.filter_on_demand; + const { indexOrderColumns } = traceData; - const indexOrderColID = indexOrderColumns.map(col => col.id); + const indexOrderColID = indexOrderColumns.map((col) => col.id); let categoryDataAfterOrdering = []; const notMatchedCat = []; - category && category.forEach((cat) => { - const idx = indexOrderColID.indexOf(cat.column_id); - if (idx !== -1) { - // matched - categoryDataAfterOrdering[idx] = cat; - } else { - notMatchedCat.push(cat); - } - }); + category && + category.forEach((cat) => { + const idx = indexOrderColID.indexOf(cat.column_id); + if (idx !== -1) { + // matched + categoryDataAfterOrdering[idx] = cat; + } else { + notMatchedCat.push(cat); + } + }); // remove empty category data - categoryDataAfterOrdering = categoryDataAfterOrdering.filter(cat => cat !== null); + categoryDataAfterOrdering = categoryDataAfterOrdering.filter( + (cat) => cat !== null, + ); // cat which not match in serial ordering: shoow at below of category box categoryDataAfterOrdering = categoryDataAfterOrdering.concat(notMatchedCat); return categoryDataAfterOrdering; -} - +}; const produceCategoricalTable = (traceData, options = {}) => { const { category } = traceData.filter_on_demand; @@ -601,9 +668,13 @@ const produceCategoricalTable = (traceData, options = {}) => { const endDt = traceData.COMMON[CONST.ENDDATE]; const endTm = traceData.COMMON[CONST.ENDTIME]; const fmt = 'YYYY/MM/DD HH:mm'; - const uiStartTime = new Date(formatDateTime(`${startDt} ${startTm}`, fmt)).toISOString(); - const uiEndTime = new Date(formatDateTime(`${endDt} ${endTm}`, fmt)).toISOString(); - const {thinDataGroupCounts, indexOrderColumns, is_thin_data} = traceData; + const uiStartTime = new Date( + formatDateTime(`${startDt} ${startTm}`, fmt), + ).toISOString(); + const uiEndTime = new Date( + formatDateTime(`${endDt} ${endTm}`, fmt), + ).toISOString(); + const { thinDataGroupCounts, indexOrderColumns, is_thin_data } = traceData; // calculate categorical boxes: start/end position, count, etc const dicAllCateBoxes = {}; @@ -629,12 +700,18 @@ const produceCategoricalTable = (traceData, options = {}) => { if (xAxisOption === 'INDEX') { boxes = buildCategoryBoxes(dicCate.data); } else { - boxes = buildCategoryBoxes(dicCate.data, traceData.times, uiStartTime, uiEndTime); + boxes = buildCategoryBoxes( + dicCate.data, + traceData.times, + uiStartTime, + uiEndTime, + ); } // pre-process boxes code // const { combinedBoxes, isNarrowBoxCombined } = combineEmptyBoxes(boxes); - const {combinedBoxes, isNarrowBoxCombined} = combineSmallBoxes(boxes); + const { combinedBoxes, isNarrowBoxCombined } = + combineSmallBoxes(boxes); boxes = combinedBoxes; isBoxCombined = isNarrowBoxCombined; } @@ -651,7 +728,6 @@ const produceCategoricalTable = (traceData, options = {}) => { [nonNAPercent, nonNACount, total] = nonNACalcuation(dicCate.data); } - const boxName = `${dicCate.proc_master_name} ${dicCate.column_master_name}`; dicAllCateBoxes[boxName] = boxes; @@ -666,10 +742,10 @@ const produceCategoricalTable = (traceData, options = {}) => { ${nonNAPercent}% (${applySignificantDigit(nonNACount)}/${applySignificantDigit(total) || '0'}) - `) + `); }); - cateNameHTMLs.push(``) + cateNameHTMLs.push(``); // show msg to warn about combining narrow boxes if (isBoxCombined) { @@ -682,7 +758,14 @@ const produceCategoricalTable = (traceData, options = {}) => { // generate a table for each categorical field const tblHTMLs = []; Object.values(dicAllCateBoxes).forEach((cateBoxes, idx) => { - const cateHTML = createCateTableHTML(cateBoxes, idx, thinDataGroupCounts, indexOrderColumns, is_thin_data, xAxisOption); + const cateHTML = createCateTableHTML( + cateBoxes, + idx, + thinDataGroupCounts, + indexOrderColumns, + is_thin_data, + xAxisOption, + ); tblHTMLs.push(cateHTML); }); @@ -701,7 +784,13 @@ const produceCategoricalTable = (traceData, options = {}) => { histogram: 3, scatterPlot: 0, }; - const cateCardHTML = createCateCard(cateNameHTMLs, tblHTMLs, tableWidth, cols, traceData); + const cateCardHTML = createCateCard( + cateNameHTMLs, + tblHTMLs, + tableWidth, + cols, + traceData, + ); // clear old result $(formElements.cateCard).empty(); @@ -721,9 +810,10 @@ const produceCategoricalTable = (traceData, options = {}) => { contentResizeHandler(); // 116 13 save focused box for keyboard movement - $('#cateTable table td').on('click', (e) => { // TODO 116 + $('#cateTable table td').on('click', (e) => { + // TODO 116 savedBox = e.currentTarget; - }) + }); initIndexModal(); @@ -735,10 +825,11 @@ const name = { serial: 'TermSerialColumn', order: 'TermSerialOrder', xOption: 'TermXOption', -} +}; let xOption = ''; let selectedSerials = null; let selectedProcess = null; +let selectedProcessSerial = null; // using to check xAxisModal2 let currentTable = null; let currentXOption = ''; let lastSelectedOrder = []; @@ -751,7 +842,7 @@ const initIndexModal = () => { oldXOption = currentXOption; xOptionSwitch.attr(CONST.DEFAULT_VALUE, currentXOption); resetCustomSelect(xOptionSwitch); - } + }; // set default checked switch setDefault(); @@ -763,15 +854,30 @@ const initIndexModal = () => { } if (option === CONST.XOPT_INDEX) { showSerialModal(formElements.serialTableModal2); - setSelect2Selection(formElements.serialTable2) - bindDragNDrop($(`${formElements.serialTable2} tbody`), formElements.serialTable2, name.serial); + setSelect2Selection(formElements.serialTable2); + bindDragNDrop( + $(`${formElements.serialTable2} tbody`), + formElements.serialTable2, + name.serial, + ); disableUnselectedOption(selectedSerials, name.serial); disableUnselectedOption(selectedProcess, name.process); $(formElements.btnAddSerial2).unbind('click'); $(formElements.btnAddSerial2).on('click', () => { - addSerialOrderRow(formElements.serialTable2, name.process, name.serial, name.order, null, null, null, null, true).then(() => { + addSerialOrderRow( + formElements.serialTable2, + name.process, + name.serial, + name.order, + null, + null, + null, + null, + true, + ).then(() => { initSelect(); + updateCurrentSelectedProcessSerial(name.serial); disableUnselectedOption(selectedSerials, name.serial); disableUnselectedOption(selectedProcess, name.process); }); @@ -784,7 +890,7 @@ const initIndexModal = () => { oldXOption = xOption; handleSubmit(false); } - }) + }); $(formElements.cancelOrderIndexModal).unbind('click'); $(formElements.cancelOrderIndexModal).on('click', function () { @@ -792,13 +898,18 @@ const initIndexModal = () => { renderTableContent(); if (currentXOption === CONST.XOPT_TIME) { $(formElements.tsXScale).val(currentXOption); - resetCustomSelect($(formElements.tsXScale)) + resetCustomSelect($(formElements.tsXScale)); } - }) + }); $(formElements.okOrderIndexModal).unbind('click'); $(formElements.okOrderIndexModal).on('click', () => { - getLastedSelectedValue(formElements.serialTable2, name.process, name.serial, name.order) + getLastedSelectedValue( + formElements.serialTable2, + name.process, + name.serial, + name.order, + ); xOption = CONST.XOPT_INDEX; currentXOption = xOption; // reset xAxisShowSettings @@ -806,45 +917,73 @@ const initIndexModal = () => { isShowIndexInGraphArea = true; oldXOption = xOption; handleSubmit(false); - }) -} + }); +}; function disableUnselectedOption(selectedSerials, serialName) { if (!selectedSerials) return; const serialSelects = $(`select[name=${serialName}]`); + const procData = getProcessColSelected(); serialSelects.each(function () { const selectElement = $(this); - const selectedVal = selectElement.val(); const options = [...selectElement.find('option')]; + const optionSelected = selectElement.val(); for (const opt of options) { const option = $(opt); const val = option.val(); + const isGetDate = option.attr('data-is-get-date') === 'true'; + const isSerialNo = option.attr('data-is-serial-no') === 'true'; + const procColId = option.attr('data-selected-proc-id'); + const serialColDataId = option.val(); + const currentOption = `${procColId}-${serialColDataId}`; + if (!selectedSerials.has(val)) { - option.attr('disabled', true); - } - if (!selectedSerials.has(selectedVal)) { - selectElement.val('').change(); + if ((isGetDate || isSerialNo) && procData.includes(procColId)) { + option.attr( + 'disabled', + selectedProcessSerial && + selectedProcessSerial.has(currentOption), + ); + } else { + option.attr('disabled', true); + } + } else if (procData.includes(procColId) && optionSelected !== val) { + option.attr( + 'disabled', + selectedProcessSerial && + selectedProcessSerial.has(currentOption), + ); + } else { + option.attr('disabled', false); } } }); } function initSelect() { - bindChangeProcessEvent(formElements.serialTable2, name.process, name.serial, () => { - disableUnselectedOption(selectedSerials, name.serial); - disableUnselectedOption(selectedProcess, name.process); - }); + bindChangeProcessEvent( + formElements.serialTable2, + name.process, + name.serial, + () => { + disableUnselectedOption(selectedSerials, name.serial); + disableUnselectedOption(selectedProcess, name.process); + }, + ); updatePriorityAndDisableSelected(formElements.serialTable2, name.serial); - setTimeout(() => { // wait select2 to be shown - bindChangeOrderColEvent(formElements.serialTable2, name.serial, () => { - }); + setTimeout(() => { + // wait select2 to be shown + bindChangeOrderColEvent( + formElements.serialTable2, + name.serial, + () => {}, + ); }, 200); } - function getLastedSelectedValue(tableID, procName, columnName, orderName) { lastSelectedOrder = []; const mainTableBody = $(`${tableID} tbody tr`); @@ -857,48 +996,90 @@ function getLastedSelectedValue(tableID, procName, columnName, orderName) { serialProcess: proc, serialColumn: column, serialOrder: order, - }) - }) + }); + }); - latestIndexOrder = [...lastSelectedOrder] + latestIndexOrder = [...lastSelectedOrder]; } function renderTableContent() { $(`${formElements.serialTable2} tbody`).html(''); // get start proc const startProc = getFirstSelectedProc(); - const hasAvailableOrderColumn = availableOrderingSettings[startProc] && availableOrderingSettings[startProc].length > 0; + // get serial + const procInfo = procConfigs[startProc]; + + const hasAvailableOrderColumn = + availableOrderingSettings[startProc] && + availableOrderingSettings[startProc].length > 0; + const noTableRow = lastSelectedOrder.length <= 0; const isShowDefaultRow = hasAvailableOrderColumn && noTableRow; if (isShowDefaultRow) { - addSerialOrderRow(formElements.serialTable2, name.process, name.serial, name.order, startProc, availableOrderingSettings[startProc][0], null, null, true); + addSerialOrderRow( + formElements.serialTable2, + name.process, + name.serial, + name.order, + startProc, + // sort availableOrderingSettings from min to max + availableOrderingSettings[startProc][0], + null, + null, + true, + ); } else { lastSelectedOrder.forEach((row, i) => { - addSerialOrderRow(formElements.serialTable2, name.process, name.serial, name.order, row.serialProcess, row.serialColumn, row.serialOrder, null, true); - }) + addSerialOrderRow( + formElements.serialTable2, + name.process, + name.serial, + name.order, + row.serialProcess, + row.serialColumn, + row.serialOrder, + null, + true, + ); + }); } setTimeout(() => { selectedSerials = getSelectedOrderCols(); - selectedProcess = getSelectedOrderCols(formElements.serialTable, 'serialProcess'); - const availableProcess = new Set(Object.keys(availableOrderingSettings)); + selectedProcess = getSelectedOrderCols( + formElements.serialTable, + 'serialProcess', + ); + const availableProcess = new Set( + Object.keys(availableOrderingSettings), + ); let availableSerials = []; - Object.values(availableOrderingSettings).forEach(cols => availableSerials.push(...cols)); - availableSerials = availableSerials.map(colID => String(colID)); + Object.values(availableOrderingSettings).forEach((cols) => + availableSerials.push(...cols), + ); + availableSerials = availableSerials.map((colID) => String(colID)); selectedSerials = new Set([...selectedSerials, ...availableSerials]); selectedProcess = new Set([...selectedProcess, ...availableProcess]); // disableUnselectedOption(selectedSerials, name.serial); // disableUnselectedOption(selectedProcess, name.process); initSelect(); - }, 2000) + }, 2000); } function initTableValue() { currentXOption = lastUsedFormData.get('xOption'); if (currentXOption === CONST.XOPT_INDEX) { - getLastedSelectedValue(formElements.serialTable, 'serialProcess', 'serialColumn', 'serialOrder') + getLastedSelectedValue( + formElements.serialTable, + 'serialProcess', + 'serialColumn', + 'serialOrder', + ); } - if (isSaveGraphSetting() && hasIndexOrderInGraphSetting(getGraphSettings())) { + if ( + isSaveGraphSetting() && + hasIndexOrderInGraphSetting(getGraphSettings()) + ) { const indexOrder = getIndexOrder(); if (indexOrder.length > 0) { lastSelectedOrder = indexOrder; @@ -916,13 +1097,13 @@ function transformIndexOrderParams(formData) { const key = item[0]; const value = item[1]; if (key === name.process) { - formData.append(name.process, value) + formData.append(name.process, value); } if (key === name.serial) { - formData.append(name.serial, value) + formData.append(name.serial, value); } if (key === name.order) { - formData.append(name.order, value) + formData.append(name.order, value); } } } else { @@ -934,15 +1115,15 @@ function transformIndexOrderParams(formData) { } function removeUnusedFormParams(formData, clearOnFlyFilter = false) { - formData.delete(name.process) - formData.delete(name.serial) - formData.delete(name.order) + formData.delete(name.process); + formData.delete(name.serial); + formData.delete(name.order); if (clearOnFlyFilter) { - if (formData.get('xOption') === CONST.XOPT_TIME) { - formData.delete('serialProcess') - formData.delete('serialColumn') - formData.delete('serialOrder') + if (formData.get('xOption') === CONST.XOPT_TIME) { + formData.delete('serialProcess'); + formData.delete('serialColumn'); + formData.delete('serialOrder'); } } @@ -954,7 +1135,7 @@ const bindGraphScaleEvent = () => { const scaleOption = $(this).children('option:selected').val() || '1'; updateGraphScale(scaleOption); }); -} +}; const initDuplicatedSerial = () => { const key = 'duplicated_serial'; @@ -967,4 +1148,4 @@ const initDuplicatedSerial = () => { lastUsedFormData.set(key, val); handleSubmit(false); }); -} +}; diff --git a/ap/static/trace_data/js/trace_data_cross_hair.js b/ap/static/trace_data/js/trace_data_cross_hair.js index deae83e..0f8856d 100644 --- a/ap/static/trace_data/js/trace_data_cross_hair.js +++ b/ap/static/trace_data/js/trace_data_cross_hair.js @@ -9,35 +9,65 @@ const celes = { cateTable: '#cateTable', }; -const colors = ['#91e2ff', '#9d9a53', '#ae6e54', '#603567', '#00af91', '#d7cece', '#470f0f', '#0f1451', - '#a4b790', '#4eb55d', '#bf4db4', '#ba8534']; +const colors = [ + '#91e2ff', + '#9d9a53', + '#ae6e54', + '#603567', + '#00af91', + '#d7cece', + '#470f0f', + '#0f1451', + '#a4b790', + '#4eb55d', + '#bf4db4', + '#ba8534', +]; /* -* VERTICAL LINE AT CATEGORY TABLE -* */ + * VERTICAL LINE AT CATEGORY TABLE + * */ function removeVerticalLine() { if (isRemoveCrosshair) { - $(celes.crossV).css({display: 'none'}); - $(celes.crossH).css({display: 'none'}); + $(celes.crossV).css({ display: 'none' }); + $(celes.crossH).css({ display: 'none' }); } isRemoveCrosshair = true; } -function showVerticalLine(offsetTop, offsetLeft, lineHeight, isLeft = true, index = 0) { - const color = colors[index] +function showVerticalLine( + offsetTop, + offsetLeft, + lineHeight, + isLeft = true, + index = 0, +) { + const color = colors[index]; const showLine = (crossV, crossH, offsetTop, offsetLeft, lineHeight) => { - crossV.css({display: 'block'}); - crossH.css({display: 'block'}); - crossH.css({'border-left': `1px solid ${color}`}); - crossV.css({top: offsetTop}); - crossH.css({left: offsetLeft}); - crossH.css({height: lineHeight}); + crossV.css({ display: 'block' }); + crossH.css({ display: 'block' }); + crossH.css({ 'border-left': `1px solid ${color}` }); + crossV.css({ top: offsetTop }); + crossH.css({ left: offsetLeft }); + crossH.css({ height: lineHeight }); }; if (isLeft) { - showLine($(celes.crossVLeft), $(celes.crossHLeft), offsetTop, offsetLeft, lineHeight); + showLine( + $(celes.crossVLeft), + $(celes.crossHLeft), + offsetTop, + offsetLeft, + lineHeight, + ); } else { - showLine($(celes.crossVRight), $(celes.crossHRight), offsetTop, offsetLeft, lineHeight); + showLine( + $(celes.crossVRight), + $(celes.crossHRight), + offsetTop, + offsetLeft, + lineHeight, + ); } } @@ -76,23 +106,25 @@ const genVerticalCrossLineHtml = (edgeLeft, edgeRight, id) => {
    `; - }; + } if (idRight) { const offsetTopRight = edgeRight.offset().top; - const offsetLeftRight = edgeRight.offset().left + edgeRight.outerWidth(); + const offsetLeftRight = + edgeRight.offset().left + edgeRight.outerWidth(); const lineHeighRight = $('#baseFooter').offset().top - offsetTopRight; crossRight = `
    `; - }; + } return [crossLeft, crossRight]; }; const genAllCrossInLine = (lineId = null) => { - const cateBoxEl = lineId !== null ? `.cate-box[line=${lineId}]` : '.cate-box'; + const cateBoxEl = + lineId !== null ? `.cate-box[line=${lineId}]` : '.cate-box'; $(`${formElements.cateTable} ${cateBoxEl}`).parent().attr('gen-all', 1); $(`${formElements.cateTable} ${cateBoxEl}`).each(function () { genSingleCross(this); @@ -105,7 +137,11 @@ const genSingleCross = (e) => { const edgeLeft = $(e).find('.cate-edge-left'); const edgeRight = $(e).find('.cate-edge-right'); - const [crossLeft, crossRight] = genVerticalCrossLineHtml(edgeLeft, edgeRight, id); + const [crossLeft, crossRight] = genVerticalCrossLineHtml( + edgeLeft, + edgeRight, + id, + ); $('body').append(crossLeft); $('body').append(crossRight); @@ -113,7 +149,9 @@ const genSingleCross = (e) => { const hideAllCrossAnchorInline = (lineId) => { if (lineId) { - $(`${formElements.cateTable} .cate-box[line=${lineId}]`).parent().removeAttr('gen-all'); + $(`${formElements.cateTable} .cate-box[line=${lineId}]`) + .parent() + .removeAttr('gen-all'); $(`.cross[line=${lineId}]`).remove(); } else { $(`${formElements.cateTable} .cate-box`).parent().removeAttr('gen-all'); @@ -122,11 +160,13 @@ const hideAllCrossAnchorInline = (lineId) => { }; const resetPositionOfCrossLine = () => { - const anchorLabels = [...$('.cross-line[data-parent-id]')].map(el => $(el).attr('data-parent-id')); - hideAllCrossAnchorInline(); - for (const parentId of anchorLabels) { - handleShowAnchor($(`[data-id=${parentId}]`)); - } + const anchorLabels = [...$('.cross-line[data-parent-id]')].map((el) => + $(el).attr('data-parent-id'), + ); + hideAllCrossAnchorInline(); + for (const parentId of anchorLabels) { + handleShowAnchor($(`[data-id=${parentId}]`)); + } }; const hideOneCross = (line, col) => { @@ -141,12 +181,12 @@ const showOneCrossAnchor = (e) => { }; const addDrawVerticalLineEvent = () => { - $('.cate-box').on('click', (e) => { const target = e.target.closest('.cate-box'); const [line, col] = $(target).attr('id').split('-'); const id = `cate-edge-${line}-${col}`; - const hasCross = $(`#${id}-right-v`).length || $(`#${id}-left-v`).length; + const hasCross = + $(`#${id}-right-v`).length || $(`#${id}-left-v`).length; if (hasCross) { hideOneCross(line, col); } else { @@ -157,7 +197,11 @@ const addDrawVerticalLineEvent = () => { $('.cate-box').on('dblclick', (e) => { const target = e.target.closest('.cate-box'); const [line, _] = $(target).attr('id').split('-'); - const hasAllCross = $(`${formElements.cateTable} .cate-box[line=${line}]`).parent().attr('gen-all'); + const hasAllCross = $( + `${formElements.cateTable} .cate-box[line=${line}]`, + ) + .parent() + .attr('gen-all'); if (hasAllCross) { hideAllCrossAnchorInline(line); } else { @@ -190,7 +234,13 @@ const addDrawVerticalLineEvent = () => { isLeft = false; } const lineHeight = $('#baseFooter').offset().top - offsetTop; - showVerticalLine(offsetTop, offsetLeft, lineHeight, isLeft, index); + showVerticalLine( + offsetTop, + offsetLeft, + lineHeight, + isLeft, + index, + ); } }); }); @@ -199,7 +249,8 @@ const addDrawVerticalLineEvent = () => { function showVerticalLineOnClick(clickEvent) { // show red vertical line on category table when user click in graph const offsetTop = $(celes.cateTable)[0] - ? $(celes.cateTable).offset().top : $('#plot-cards').offset().top; + ? $(celes.cateTable).offset().top + : $('#plot-cards').offset().top; const offsetLeft = clickEvent.native.clientX; const lineHeight = $(celes.cateTable).height() || 0; showVerticalLine(offsetTop, offsetLeft, lineHeight); @@ -208,11 +259,17 @@ function showVerticalLineOnClick(clickEvent) { function removeCrossHairOfChart(graphObj, update = true) { if (!graphObj) return; try { - if (graphObj.options.plugins.annotation.annotations['crosshair-x'] - || graphObj.options.plugins.annotation.annotations['crosshair-y']) { - delete graphObj.options.plugins.annotation.annotations['crosshair-x']; - delete graphObj.options.plugins.annotation.annotations['crosshair-y']; - if (update) graphObj.update(mode = 'none'); + if ( + graphObj.options.plugins.annotation.annotations['crosshair-x'] || + graphObj.options.plugins.annotation.annotations['crosshair-y'] + ) { + delete graphObj.options.plugins.annotation.annotations[ + 'crosshair-x' + ]; + delete graphObj.options.plugins.annotation.annotations[ + 'crosshair-y' + ]; + if (update) graphObj.update((mode = 'none')); } } catch (e) { console.log(e); @@ -221,27 +278,27 @@ function removeCrossHairOfChart(graphObj, update = true) { function removeThresholdsOfChart(graphObj, type = CONST.ALL) { if (!graphObj) return; -// try { -// const verticalIds = [CONST.vUCL, CONST.vLCL, CONST.vUPCL, CONST.vLPCL]; -// const horizonalIds = [CONST.UCL, CONST.LCL, CONST.UPCL, CONST.LPCL]; -// let toBeRemovedIds = horizonalIds + verticalIds; -// if (type === CONST.VERTICAL) { -// toBeRemovedIds = verticalIds; -// } else if (type === CONST.HORIZONTAL) { -// toBeRemovedIds = horizonalIds; -// } -// const lines = graphObj.options.plugins.annotation.annotations; -// const newLines = []; -// for (let i = 0; i < lines.length; i++) { -// if (!toBeRemovedIds.includes(lines[i].id)) { -// newLines.push(lines[i]); -// } -// } -// graphObj.options.plugins.annotation.annotations = newLines; -// graphObj.update(mode='none'); -// } catch (e) { -// console.log(e); -// } + // try { + // const verticalIds = [CONST.vUCL, CONST.vLCL, CONST.vUPCL, CONST.vLPCL]; + // const horizonalIds = [CONST.UCL, CONST.LCL, CONST.UPCL, CONST.LPCL]; + // let toBeRemovedIds = horizonalIds + verticalIds; + // if (type === CONST.VERTICAL) { + // toBeRemovedIds = verticalIds; + // } else if (type === CONST.HORIZONTAL) { + // toBeRemovedIds = horizonalIds; + // } + // const lines = graphObj.options.plugins.annotation.annotations; + // const newLines = []; + // for (let i = 0; i < lines.length; i++) { + // if (!toBeRemovedIds.includes(lines[i].id)) { + // newLines.push(lines[i]); + // } + // } + // graphObj.options.plugins.annotation.annotations = newLines; + // graphObj.update(mode='none'); + // } catch (e) { + // console.log(e); + // } } // remove all cross hair when click outside of graph canvas @@ -272,14 +329,18 @@ $(document).on('click', (e) => { // hide index-inform-content when click const indexInfo = target.closest('.index-inform-content'); if (!indexInfo.length) { - $('.index-inform-content').css({display: 'none'}); + $('.index-inform-content').css({ display: 'none' }); } // hide all tooltips of cate box - $('.cate-tooltip').css({visibility: 'hidden'}); + $('.cate-tooltip').css({ visibility: 'hidden' }); }); -function removeAllCrossHair(updateTS = true, updateHist = true, updateSct = true) { +function removeAllCrossHair( + updateTS = true, + updateHist = true, + updateSct = true, +) { graphStore.getAllTimeSeries().forEach((graphObj) => { removeCrossHairOfChart(graphObj, updateTS); }); @@ -293,7 +354,6 @@ function removeAllCrossHair(updateTS = true, updateHist = true, updateSct = true }); } - const scatterHorizontalline = (yValue, color = CONST.CH_OTHER) => ({ type: 'line', id: 'crosshair-y', @@ -326,7 +386,11 @@ const scatterVertialLine = (xValue, color = CONST.CH_OTHER) => ({ }, }); -const histHorizontalLine = (yValue, props=undefined, color = CONST.CH_OTHER) => { +const histHorizontalLine = ( + yValue, + props = undefined, + color = CONST.CH_OTHER, +) => { // histogram is drawing as reverse mode // need to get item in chart from yValue let values = yValue; @@ -402,14 +466,19 @@ const drawCrossHairOnDoubleClick = (clickPosition, selectedCanvasId) => { return; } // draw vertical from corresponding xValue - const scatterDataPoint = scatterChartObject.data.datasets[0].data[clickPosition - 1]; + const scatterDataPoint = + scatterChartObject.data.datasets[0].data[clickPosition - 1]; if (scatterDataPoint) { const cXValue = scatterDataPoint.x; const cYValue = scatterDataPoint.y; if (!isEmpty(cXValue) && !isEmpty(cYValue)) { - scatterChartObject.options.plugins.annotation.annotations['crosshair-x'] = scatterVertialLine(cXValue, color); - scatterChartObject.options.plugins.annotation.annotations['crosshair-y'] = scatterHorizontalline(cYValue, color); - scatterChartObject.update(mode = 'none'); + scatterChartObject.options.plugins.annotation.annotations[ + 'crosshair-x' + ] = scatterVertialLine(cXValue, color); + scatterChartObject.options.plugins.annotation.annotations[ + 'crosshair-y' + ] = scatterHorizontalline(cYValue, color); + scatterChartObject.update((mode = 'none')); } } } @@ -418,20 +487,29 @@ const drawCrossHairOnDoubleClick = (clickPosition, selectedCanvasId) => { // draw horizontal from yValue const histChartObject = graphStore.getHistById(canvasId); // get time series chart of the row of histogram to get corresponding yValue - const coTimeSeriesGraph = graphStore.getTimeSeriesFromHist(canvasId); + const coTimeSeriesGraph = + graphStore.getTimeSeriesFromHist(canvasId); if (coTimeSeriesGraph) { // get coYValue from clickPosition - const coYValue = coTimeSeriesGraph.data.datasets[0].data[clickPosition]; + const coYValue = + coTimeSeriesGraph.data.datasets[0].data[clickPosition]; if (!isEmpty(coYValue) && histChartObject) { props = undefined; - if (histChartObject.data.rank_values && histChartObject.data.cat_labels) { + if ( + histChartObject.data.rank_values && + histChartObject.data.cat_labels + ) { props = { - rank_values: histChartObject.data.rank_values || undefined, - cat_labels: histChartObject.data.cat_labels || undefined, + rank_values: + histChartObject.data.rank_values || undefined, + cat_labels: + histChartObject.data.cat_labels || undefined, }; } - histChartObject.options.plugins.annotation.annotations['crosshair-y'] = histHorizontalLine(coYValue, props); - histChartObject.update(mode = 'none'); + histChartObject.options.plugins.annotation.annotations[ + 'crosshair-y' + ] = histHorizontalLine(coYValue, props); + histChartObject.update((mode = 'none')); } } } @@ -441,26 +519,38 @@ const drawCrossHairOnDoubleClick = (clickPosition, selectedCanvasId) => { // draw horizontal from yValue // corresponding data point may be normal/irregular data point - const coClickedData = tsChartObject.data.datasets[0].data[clickPosition] - || tsChartObject.data.datasets[1].data[clickPosition]; + const coClickedData = + tsChartObject.data.datasets[0].data[clickPosition] || + tsChartObject.data.datasets[1].data[clickPosition]; const xValue = tsChartObject.data.labels[clickPosition]; // dont draw horizontal line if that data point is null if (!isEmpty(coClickedData)) { - tsChartObject.options.plugins.annotation.annotations['crosshair-y'] = tsHorizonalLine(coClickedData, color); + tsChartObject.options.plugins.annotation.annotations[ + 'crosshair-y' + ] = tsHorizonalLine(coClickedData, color); } // draw vertical from xValue - tsChartObject.options.plugins.annotation.annotations['crosshair-x'] = tsVerticalLine(xValue, color); - tsChartObject.update(mode = 'none'); + tsChartObject.options.plugins.annotation.annotations[ + 'crosshair-x' + ] = tsVerticalLine(xValue, color); + tsChartObject.update((mode = 'none')); } }); }; -const drawCrosshairSingleClick = (clickPosition, xValue, yValue, selectedCanvasId) => { +const drawCrosshairSingleClick = ( + clickPosition, + xValue, + yValue, + selectedCanvasId, +) => { removeAllCrossHair(false, true, true); // find histogram and scatter plot at the same row - const sameRowCanvases = $(`#${selectedCanvasId}`).closest('div .chart-row').find('canvas'); + const sameRowCanvases = $(`#${selectedCanvasId}`) + .closest('div .chart-row') + .find('canvas'); sameRowCanvases.each(function f() { const canvasId = $(this).attr('id'); const chartType = $(this).attr('chart-type'); @@ -472,8 +562,10 @@ const drawCrosshairSingleClick = (clickPosition, xValue, yValue, selectedCanvasI if (chartType === 'scatter') { const scatterChartObject = graphStore.getScatterById(canvasId); if (scatterChartObject) { - scatterChartObject.options.plugins.annotation.annotations['crosshair-y'] = scatterHorizontalline(yValue, color); - scatterChartObject.update(mode = 'none'); + scatterChartObject.options.plugins.annotation.annotations[ + 'crosshair-y' + ] = scatterHorizontalline(yValue, color); + scatterChartObject.update((mode = 'none')); } } @@ -481,14 +573,21 @@ const drawCrosshairSingleClick = (clickPosition, xValue, yValue, selectedCanvasI const histChartObject = graphStore.getHistById(canvasId); if (histChartObject) { props = undefined; - if (histChartObject.data.rank_values && histChartObject.data.cat_labels) { + if ( + histChartObject.data.rank_values && + histChartObject.data.cat_labels + ) { props = { - rank_values: histChartObject.data.rank_values || undefined, - cat_labels: histChartObject.data.cat_labels || undefined, + rank_values: + histChartObject.data.rank_values || undefined, + cat_labels: + histChartObject.data.cat_labels || undefined, }; } - histChartObject.options.plugins.annotation.annotations['crosshair-y'] = histHorizontalLine(yValue, props, color); - histChartObject.update(mode = 'none'); + histChartObject.options.plugins.annotation.annotations[ + 'crosshair-y' + ] = histHorizontalLine(yValue, props, color); + histChartObject.update((mode = 'none')); } } @@ -496,8 +595,10 @@ const drawCrosshairSingleClick = (clickPosition, xValue, yValue, selectedCanvasI // draw vertical from xValue const tsChartObject = graphStore.getTimeSeriesById(canvasId); // draw horizontal from yValue - tsChartObject.options.plugins.annotation.annotations['crosshair-y'] = tsHorizonalLine(yValue, color); - tsChartObject.update(mode = 'none'); + tsChartObject.options.plugins.annotation.annotations[ + 'crosshair-y' + ] = tsHorizonalLine(yValue, color); + tsChartObject.update((mode = 'none')); } }); @@ -507,7 +608,8 @@ const drawCrosshairSingleClick = (clickPosition, xValue, yValue, selectedCanvasI if (canvasId === selectedCanvasId) { color = CONST.CH_SELF; } - graphObj.options.plugins.annotation.annotations['crosshair-x'] = tsVerticalLine(xValue, color); - graphObj.update(mode = 'none'); + graphObj.options.plugins.annotation.annotations['crosshair-x'] = + tsVerticalLine(xValue, color); + graphObj.update((mode = 'none')); }); }; diff --git a/ap/static/trace_data/js/trace_data_histogram.js b/ap/static/trace_data/js/trace_data_histogram.js index 6a31cd5..5cfe294 100644 --- a/ap/static/trace_data/js/trace_data_histogram.js +++ b/ap/static/trace_data/js/trace_data_histogram.js @@ -1,9 +1,3 @@ -/* eslint-disable prefer-destructuring */ -/* eslint-disable no-undef */ -/* eslint-disable no-use-before-define */ - -/* eslint-disable no-unused-vars */ - function YasuHistogram($, paramObj) { // 内部変数の初期化 const canvasId = setParam('canvasId', 'hist01'); @@ -24,7 +18,6 @@ function YasuHistogram($, paramObj) { valMax += 0.5; } - // ////////////// プライベート関数の定義 //////////////////// function setParam(key, defaultValue) { if (key in paramObj && !isEmpty(paramObj[key])) { @@ -41,7 +34,7 @@ function YasuHistogram($, paramObj) { const maxKDE = Math.max(...kdes); const maxHist = Math.max(...kdeData.hist_counts); - const transKDE = kdes.map(i => maxHist * i / maxKDE); + const transKDE = kdes.map((i) => (maxHist * i) / maxKDE); const data = { labels, @@ -70,7 +63,7 @@ function YasuHistogram($, paramObj) { borderWidth: 1, }); } - + const genDataTable = (yValue, nTotal) => { const valueLabel = $('#i18nValue').text(); let tblContent = ''; @@ -80,9 +73,9 @@ function YasuHistogram($, paramObj) { return tblContent; }; const externalTooltipHandler = (context) => { - const {chart, tooltip} = context; + const { chart, tooltip } = context; if (!tooltip.dataPoints) return; - const {offsetLeft: positionX, offsetTop: positionY} = chart.canvas; + const { offsetLeft: positionX, offsetTop: positionY } = chart.canvas; const dpIndex = tooltip.dataPoints[0].dataIndex; const histVal = tooltip.dataPoints[1].dataset.data[dpIndex]; let yValue = tooltip.title[0]; @@ -93,7 +86,7 @@ function YasuHistogram($, paramObj) { const topPosition = canvasOffset.top + positionY + tooltip.caretY; genDataPointHoverTable( genDataTable(yValue, histVal), - {x: leftPosition - 192, y: topPosition}, + { x: leftPosition - 192, y: topPosition }, 125, true, chart.canvas.id, @@ -146,7 +139,8 @@ function YasuHistogram($, paramObj) { beginAtZero: true, align: 'end', font: { - family: 'Calibri Light', size: 12, + family: 'Calibri Light', + size: 12, }, }, grid: { @@ -184,7 +178,9 @@ function YasuHistogram($, paramObj) { ticks: { // minRotation: 0, // maxRotation: 0, - sampleSize: beforeRankValues ? Object.keys(beforeRankValues).length : 8, + sampleSize: beforeRankValues + ? Object.keys(beforeRankValues).length + : 8, color: CONST.TICK, // show text before ranked instead of ranked value // callback(value, index, values) { @@ -226,16 +222,20 @@ function YasuHistogram($, paramObj) { } if (!isEmpty(threshHigh)) { - config.options.plugins.annotation.annotations.ucl = createHistHorizonalThreshold(threshHigh, CONST.RED, CONST.UCL); + config.options.plugins.annotation.annotations.ucl = + createHistHorizonalThreshold(threshHigh, CONST.RED, CONST.UCL); } if (!isEmpty(threshLow)) { - config.options.plugins.annotation.annotations.lcl = createHistHorizonalThreshold(threshLow, CONST.RED, CONST.LCL); + config.options.plugins.annotation.annotations.lcl = + createHistHorizonalThreshold(threshLow, CONST.RED, CONST.LCL); } if (!isEmpty(prcMin)) { - config.options.plugins.annotation.annotations.lpcl = createHistHorizonalThreshold(prcMin, CONST.BLUE, CONST.LPCL); + config.options.plugins.annotation.annotations.lpcl = + createHistHorizonalThreshold(prcMin, CONST.BLUE, CONST.LPCL); } if (!isEmpty(prcMax)) { - config.options.plugins.annotation.annotations.upcl = createHistHorizonalThreshold(prcMax, CONST.BLUE, CONST.UPCL); + config.options.plugins.annotation.annotations.upcl = + createHistHorizonalThreshold(prcMax, CONST.BLUE, CONST.UPCL); } const chart = new Chart(ctx, config); @@ -259,7 +259,12 @@ function YasuHistogram($, paramObj) { }; } -const createHistHorizonalThreshold = (threshHold, color = CONST.RED, id = CONST.UCL, borderDash = []) => ({ +const createHistHorizonalThreshold = ( + threshHold, + color = CONST.RED, + id = CONST.UCL, + borderDash = [], +) => ({ type: 'line', id, mode: 'horizontal', diff --git a/ap/static/trace_data/js/trace_data_histogram_with_kde.js b/ap/static/trace_data/js/trace_data_histogram_with_kde.js index bb2ca3c..fca84cd 100644 --- a/ap/static/trace_data/js/trace_data_histogram_with_kde.js +++ b/ap/static/trace_data/js/trace_data_histogram_with_kde.js @@ -1,6 +1,3 @@ -/* eslint-disable guard-for-in */ -/* eslint-disable no-restricted-syntax */ -// eslint-disable-next-line no-unused-vars const HistogramWithDensityCurve = ($, paramObj) => { // ////////////// プライベート関数の定義 //////////////////// const setParam = (key, defaultValue) => { @@ -32,7 +29,7 @@ const HistogramWithDensityCurve = ($, paramObj) => { const maxKDE = Math.max(...kdeData.kde); const maxHist = Math.max(...kdeData.hist_counts); - const transKDE = kdeData.kde.map(i => maxHist * i / maxKDE); + const transKDE = kdeData.kde.map((i) => (maxHist * i) / maxKDE); const kdeDensity = { y: kdeData.hist_labels, x: transKDE, @@ -94,7 +91,8 @@ const HistogramWithDensityCurve = ($, paramObj) => { categoryLabels.reverse(); categoryIds.sort().reverse(); // 4321 categoryLabels.forEach((catName) => { - const categoryCount = plotdata.category_distributed[catName].counts_org; + const categoryCount = + plotdata.category_distributed[catName].counts_org; stepChartDat.push(categoryCount); }); } @@ -103,8 +101,10 @@ const HistogramWithDensityCurve = ($, paramObj) => { const sortedGroups = { id: sortedCat, value: categoryLabels, - } - const xData = !isCatLimited ? genFullCategoryData(sortedCat, stepChartDat, sortedGroups) : []; + }; + const xData = !isCatLimited + ? genFullCategoryData(sortedCat, stepChartDat, sortedGroups) + : []; const barChart = { y: !isCatLimited ? sortedCat : [], x: xData, @@ -126,7 +126,7 @@ const HistogramWithDensityCurve = ($, paramObj) => { isbarchart: true, groupname: { value: sortedGroups.value || [], - } + }, }, }; const data = !beforeRankValues ? [histogram, kdeDensity] : [barChart]; @@ -205,7 +205,7 @@ const HistogramWithDensityCurve = ($, paramObj) => { // layout.yaxis.tickangle = 45; // layout.yaxis.tickmode = 'array'; layout.yaxis.tickvals = allGroupNames.id; - layout.yaxis.ticktext = allGroupNames.id.map(cat => ''); + layout.yaxis.ticktext = allGroupNames.id.map((cat) => ''); // layout.yaxis.range = [valMin - 1, valMax + 1]; const minYVal = Math.min(...allGroupNames.id); const maxYVal = Math.max(...allGroupNames.id); @@ -284,17 +284,17 @@ const HistogramWithDensityCurve = ($, paramObj) => { }); } - const hdPlot = document.getElementById(canvasId); - hdPlot.on('plotly_hover', (data) => { - if (data.points) { - drawShapes(data.points[0].x, data.points[0].y, true); - } - showInforTbl(data, true, canvasId); - }) + hdPlot + .on('plotly_hover', (data) => { + if (data.points) { + drawShapes(data.points[0].x, data.points[0].y, true); + } + showInforTbl(data, true, canvasId); + }) .on('plotly_unhover', (data) => { drawShapes(null, null, false); // $('#dp-info-content').hide(); clearHoverTimeOut(); }); -}; \ No newline at end of file +}; diff --git a/ap/static/trace_data/js/trace_data_scatter_plot.js b/ap/static/trace_data/js/trace_data_scatter_plot.js index 8dedd61..b9b860f 100644 --- a/ap/static/trace_data/js/trace_data_scatter_plot.js +++ b/ap/static/trace_data/js/trace_data_scatter_plot.js @@ -1,6 +1,6 @@ let avoidMultiClickCnt = 0; let currentScaleOption; -// eslint-disable-next-line no-unused-vars + const scatterChart = (ctx, data, prop) => { const contextMenu = { scatter: 'contextMenuScatter', @@ -14,7 +14,7 @@ const scatterChart = (ctx, data, prop) => { }; const externalScatterTooltipHandler = (context) => { - const {chart, tooltip} = context; + const { chart, tooltip } = context; if (!tooltip.dataPoints) return; const xValue = applySignificantDigit(tooltip.dataPoints[0].raw.x); const yValue = applySignificantDigit(tooltip.dataPoints[0].raw.y); @@ -26,17 +26,20 @@ const scatterChart = (ctx, data, prop) => { yName = `${prop.yColumnName}@${prop.yProcName}`; } else { xName = `${prop.xColumnName}`; - yName = `${prop.yColumnName}` + yName = `${prop.yColumnName}`; } - const {offsetLeft: positionX, offsetTop: positionY} = chart.canvas; + const { offsetLeft: positionX, offsetTop: positionY } = chart.canvas; // hover information table position const canvasOffset = $(`#${chart.canvas.id}`).offset(); const leftPosition = canvasOffset.left + positionX + tooltip.caretX; const topPosition = canvasOffset.top + positionY + tooltip.caretY; genDataPointHoverTable( - genHoverDataTable([[xName, xValue], [yName, yValue]]), - {x: leftPosition - 192, y: topPosition}, + genHoverDataTable([ + [xName, xValue], + [yName, yValue], + ]), + { x: leftPosition - 192, y: topPosition }, 125, true, chart.canvas.id, @@ -71,7 +74,8 @@ const scatterChart = (ctx, data, prop) => { align: 'end', color: CONST.TICK, font: { - family: 'Calibri Light', size: 12, + family: 'Calibri Light', + size: 12, }, callback(value, index, values) { let showVal = applySignificantDigit(value); @@ -126,7 +130,8 @@ const scatterChart = (ctx, data, prop) => { afterTickToLabelConversion: function adjust(context) { const { ticks } = context; context.ticks[0].label = ''; - if (ticks.length) context.ticks[ticks.length - 1].label = ''; + if (ticks.length) + context.ticks[ticks.length - 1].label = ''; }, afterFit(scaleInstance) { scaleInstance.width = 60; // sets the width to 100px @@ -158,7 +163,7 @@ const scatterChart = (ctx, data, prop) => { tooltip: { displayColors: false, enabled: false, - external: externalScatterTooltipHandler, + external: externalScatterTooltipHandler, }, }, events: ['click', 'mousemove'], @@ -188,7 +193,12 @@ const scatterChart = (ctx, data, prop) => { } }, onHover(e) { - const point = this.getElementsAtEventForMode(e, 'nearest', { intersect: true }, false); + const point = this.getElementsAtEventForMode( + e, + 'nearest', + { intersect: true }, + false, + ); // if (point.length) e.target.style.cursor = 'pointer'; // else e.target.style.cursor = 'default'; @@ -227,39 +237,63 @@ const scatterChart = (ctx, data, prop) => { // procThresholds.xLow if (!isEmpty(procThresholds.xLow)) { - chartOptions.plugins.annotation.annotations.vlpcl = createVerticalThreshold(procThresholds.xLow, CONST.BLUE, CONST.vLPCL); + chartOptions.plugins.annotation.annotations.vlpcl = + createVerticalThreshold( + procThresholds.xLow, + CONST.BLUE, + CONST.vLPCL, + ); } // procThresholds.xHigh if (!isEmpty(procThresholds.xHigh)) { - chartOptions.plugins.annotation.annotations.vupcl = createVerticalThreshold(procThresholds.xHigh, CONST.BLUE, CONST.vUPCL); + chartOptions.plugins.annotation.annotations.vupcl = + createVerticalThreshold( + procThresholds.xHigh, + CONST.BLUE, + CONST.vUPCL, + ); } // procThresholds.yLow if (!isEmpty(procThresholds.yLow)) { - chartOptions.plugins.annotation.annotations.lpcl = createHorizonalThreshold(procThresholds.yLow, CONST.BLUE, CONST.LPCL); + chartOptions.plugins.annotation.annotations.lpcl = + createHorizonalThreshold( + procThresholds.yLow, + CONST.BLUE, + CONST.LPCL, + ); } // procThresholds.yHigh if (!isEmpty(procThresholds.yHigh)) { - chartOptions.plugins.annotation.annotations.upcl = createHorizonalThreshold(procThresholds.yHigh, CONST.BLUE, CONST.UPCL); + chartOptions.plugins.annotation.annotations.upcl = + createHorizonalThreshold( + procThresholds.yHigh, + CONST.BLUE, + CONST.UPCL, + ); } // draw line annotation if (!isEmpty(uclThresholds.xLow)) { - chartOptions.plugins.annotation.annotations.vlcl = createVerticalThreshold(uclThresholds.xLow, CONST.RED, CONST.vLCL); + chartOptions.plugins.annotation.annotations.vlcl = + createVerticalThreshold(uclThresholds.xLow, CONST.RED, CONST.vLCL); } if (!isEmpty(uclThresholds.xHigh)) { - chartOptions.plugins.annotation.annotations.vucl = createVerticalThreshold(uclThresholds.xHigh, CONST.RED, CONST.vUCL); + chartOptions.plugins.annotation.annotations.vucl = + createVerticalThreshold(uclThresholds.xHigh, CONST.RED, CONST.vUCL); } if (!isEmpty(uclThresholds.yLow)) { - chartOptions.plugins.annotation.annotations.lcl = createHorizonalThreshold(uclThresholds.yLow, CONST.RED, CONST.LCL); + chartOptions.plugins.annotation.annotations.lcl = + createHorizonalThreshold(uclThresholds.yLow, CONST.RED, CONST.LCL); } if (!isEmpty(uclThresholds.yHigh)) { - chartOptions.plugins.annotation.annotations.ucl = createHorizonalThreshold(uclThresholds.yHigh, CONST.RED, CONST.UCL); + chartOptions.plugins.annotation.annotations.ucl = + createHorizonalThreshold(uclThresholds.yHigh, CONST.RED, CONST.UCL); } // destroy instance @@ -298,7 +332,8 @@ const scatterChart = (ctx, data, prop) => { canvas.addEventListener('contextmenu', showContextMenu, false); canvas.addEventListener('mousedown', handleMouseDown, false); - function handleMouseDown(e) { // later, not just mouse down, + mouseout of menu + function handleMouseDown(e) { + // later, not just mouse down, + mouseout of menu menu.style.display = 'none'; } @@ -319,7 +354,12 @@ function scatterPlotOnDbClick(chart, event) { // removeAllCrossHair(false); // get clicked x,y values to draw cross hair lines - const eventElement = chart.getElementsAtEventForMode(event, 'nearest', { intersect: true }, false); + const eventElement = chart.getElementsAtEventForMode( + event, + 'nearest', + { intersect: true }, + false, + ); if (!eventElement || eventElement.length < 1) return; const clickedIdx = eventElement[0].index + 1; @@ -335,7 +375,12 @@ function scatterPlotOnDbClick(chart, event) { function scatterPlotOnClick(chart, event) { // get clicked x,y values to draw cross hair lines - const eventElement = chart.getElementsAtEventForMode(event, 'nearest', { intersect: true }, false); + const eventElement = chart.getElementsAtEventForMode( + event, + 'nearest', + { intersect: true }, + false, + ); if (!eventElement || eventElement.length < 1) { removeAllCrossHair(true, true, true); return; @@ -350,12 +395,16 @@ function scatterPlotOnClick(chart, event) { const xValue = clickedDataPoint.x; const yValue = clickedDataPoint.y; // console.log('xValue=', xValue, ', yValue=', yValue); - chart.options.plugins.annotation.annotations['crosshair-x'] = scatterVertialLine(xValue, CONST.CH_SELF); - chart.options.plugins.annotation.annotations['crosshair-y'] = scatterHorizontalline(yValue, CONST.CH_SELF); - chart.update(mode = 'none'); + chart.options.plugins.annotation.annotations['crosshair-x'] = + scatterVertialLine(xValue, CONST.CH_SELF); + chart.options.plugins.annotation.annotations['crosshair-y'] = + scatterHorizontalline(yValue, CONST.CH_SELF); + chart.update((mode = 'none')); // same row TODO use class to get - const sameRowCanvases = $(event.chart.canvas).closest('div .chart-row').find('canvas'); + const sameRowCanvases = $(event.chart.canvas) + .closest('div .chart-row') + .find('canvas'); sameRowCanvases.each(function f() { const canvasId = $(this).attr('id'); const chartType = $(this).attr('chart-type'); @@ -363,16 +412,20 @@ function scatterPlotOnClick(chart, event) { if (chartType === 'histogram') { const histChartObject = graphStore.getHistById(canvasId); if (histChartObject) { - histChartObject.options.plugins.annotation.annotations['crosshair-y'] = scatterHorizontalline(yValue); - histChartObject.update(mode = 'none'); + histChartObject.options.plugins.annotation.annotations[ + 'crosshair-y' + ] = scatterHorizontalline(yValue); + histChartObject.update((mode = 'none')); } } if (chartType === 'timeSeries') { // draw horizontal from yValue const tsChartObject = graphStore.getTimeSeriesById(canvasId); - tsChartObject.options.plugins.annotation.annotations['crosshair-y'] = tsHorizonalLine(yValue); - tsChartObject.update(mode = 'none'); + tsChartObject.options.plugins.annotation.annotations[ + 'crosshair-y' + ] = tsHorizonalLine(yValue); + tsChartObject.update((mode = 'none')); } }); @@ -412,14 +465,17 @@ const drawNextChartCrosshair = (currentCanvasId, clickedIdx) => { const tsChartObject = graphStore.getTimeSeriesById(nextTsCanvasId); const coYValue = tsChartObject.data.datasets[0].data[clickedIdx + 1]; if (!isEmpty(coYValue)) { - tsChartObject.options.plugins.annotation.annotations['crosshair-y'] = tsHorizonalLine(coYValue, CONST.CH_OTHER); - tsChartObject.update(mode = 'none'); + tsChartObject.options.plugins.annotation.annotations['crosshair-y'] = + tsHorizonalLine(coYValue, CONST.CH_OTHER); + tsChartObject.update((mode = 'none')); } }; const getPlotData = (data, xSensorIdx, ySensorIdx) => { - if (xSensorIdx > data.array_plotdata.length - 1 - || ySensorIdx > data.array_plotdata.length - 1) { + if ( + xSensorIdx > data.array_plotdata.length - 1 || + ySensorIdx > data.array_plotdata.length - 1 + ) { return null; } const xData = data.array_plotdata[xSensorIdx]; @@ -458,16 +514,29 @@ const generateScatterData = (xArr, yArr) => { return data; }; - const getThresholdData = (data, xSensorIdx, ySensorIdx) => { const chartInfosX = data.array_plotdata[xSensorIdx].chart_infos || []; - const chartInfosXOrg = data.array_plotdata[xSensorIdx].chart_infos_org || []; + const chartInfosXOrg = + data.array_plotdata[xSensorIdx].chart_infos_org || []; const chartInfosY = data.array_plotdata[ySensorIdx].chart_infos || []; - const chartInfosYOrg = data.array_plotdata[ySensorIdx].chart_infos_org || []; - const [latestChartInfoX, _x] = chooseLatestThresholds(chartInfosX, chartInfosXOrg); - const [latestChartInfoY, _y] = chooseLatestThresholds(chartInfosY, chartInfosYOrg); - const xScaleOption = getScaleInfo(data.array_plotdata[xSensorIdx], currentScaleOption); - const yScaleOption = getScaleInfo(data.array_plotdata[ySensorIdx], currentScaleOption); + const chartInfosYOrg = + data.array_plotdata[ySensorIdx].chart_infos_org || []; + const [latestChartInfoX, _x] = chooseLatestThresholds( + chartInfosX, + chartInfosXOrg, + ); + const [latestChartInfoY, _y] = chooseLatestThresholds( + chartInfosY, + chartInfosYOrg, + ); + const xScaleOption = getScaleInfo( + data.array_plotdata[xSensorIdx], + currentScaleOption, + ); + const yScaleOption = getScaleInfo( + data.array_plotdata[ySensorIdx], + currentScaleOption, + ); return { procThresholds: { @@ -520,7 +589,8 @@ const produceScatterPlotCharts = (data, scaleOption = null) => { const scatterData = generateScatterData(pdt.xArr, pdt.yArr); // get threshold data - const { uclThresholds, procThresholds, scaleMinMaxTicks } = getThresholdData(data, xSensorIdx, ySensorIdx); + const { uclThresholds, procThresholds, scaleMinMaxTicks } = + getThresholdData(data, xSensorIdx, ySensorIdx); // chart properties const prop = { @@ -550,8 +620,10 @@ const produceScatterPlotCharts = (data, scaleOption = null) => { const redrawScatterAfterMoveCart = () => { // destroy all scatter plots + reset dict for (const graphIdx in Chart.instances) { - if (Chart.instances[graphIdx].canvas - && $(Chart.instances[graphIdx].canvas).attr('chart-type') === 'scatter') { + if ( + Chart.instances[graphIdx].canvas && + $(Chart.instances[graphIdx].canvas).attr('chart-type') === 'scatter' + ) { try { Chart.instances[graphIdx].destroy(); // destroy scatter plot instances } catch (e) { @@ -581,7 +653,8 @@ const redrawScatterAfterMoveCart = () => { // re-new scatter axies $('.sctr-plot-ts').each((k, scatterContainter) => { // x is vertical axis -> sensor data of the next card - const newXSensorIdx = latestSensorOrders[(k + 1) % latestSensorOrders.length]; + const newXSensorIdx = + latestSensorOrders[(k + 1) % latestSensorOrders.length]; $(scatterContainter).attr('x-sensor-idx', newXSensorIdx); }); @@ -590,13 +663,12 @@ const redrawScatterAfterMoveCart = () => { graphStore.setDctCanvas2Scatter(scatterPlots); }; - const addTimeSeriesCardSortableEventHandler = () => { /* - * When user change order of timeseries card: - * + we store order/position of those column/sensor to db. - * + and re-draw scatter plots. - * */ + * When user change order of timeseries card: + * + we store order/position of those column/sensor to db. + * + and re-draw scatter plots. + * */ $('.ui-sortable').sortable({ update(event, ui) { // redraw scatter plots @@ -630,71 +702,84 @@ const addTimeSeriesCardSortableEventHandler = () => { orders: procSensorOrders, }), }) - .then(response => response.clone().json()) - .then(() => { - }) - .catch(() => { - }); + .then((response) => response.clone().json()) + .then(() => {}) + .catch(() => {}); }, }); }; - const handleSelectSCPMenuItem = (selectedItem = 'click') => { const selectedCanvasId = graphStore.getSelectedCanvas(); if (!selectedCanvasId) return; const scpChartObj = graphStore.getScatterById(selectedCanvasId); if (!scpChartObj) return; - const lastHoveredDataPoint = graphStore.getLastHoveredDataPoint(selectedCanvasId); + const lastHoveredDataPoint = + graphStore.getLastHoveredDataPoint(selectedCanvasId); if (!lastHoveredDataPoint) return; const { index, datasetIndex } = lastHoveredDataPoint; - const clickedDataPoint = scpChartObj.data.datasets[datasetIndex].data[index]; + const clickedDataPoint = + scpChartObj.data.datasets[datasetIndex].data[index]; const yValue = clickedDataPoint.y; const xValue = clickedDataPoint.x; switch (selectedItem) { - case 'click': { - removeAllCrossHair(true, true, true); - scpChartObj.options.plugins.annotation.annotations['crosshair-x'] = scatterVertialLine(xValue, CONST.CH_SELF); - scpChartObj.options.plugins.annotation.annotations['crosshair-y'] = scatterHorizontalline(yValue, CONST.CH_SELF); - scpChartObj.update(mode = 'none'); - - // same row TODO use class to get - const sameRowCanvases = $(`#${selectedCanvasId}`).closest('div .chart-row').find('canvas'); - sameRowCanvases.each(function f() { - const canvasId = $(this).attr('id'); - const chartType = $(this).attr('chart-type'); - - if (chartType === 'histogram') { - const histChartObject = graphStore.getHistById(canvasId); - if (histChartObject) { - histChartObject.options.plugins.annotation.annotations['crosshair-y'] = scatterHorizontalline(yValue); - histChartObject.update(mode = 'none'); + case 'click': { + removeAllCrossHair(true, true, true); + scpChartObj.options.plugins.annotation.annotations['crosshair-x'] = + scatterVertialLine(xValue, CONST.CH_SELF); + scpChartObj.options.plugins.annotation.annotations['crosshair-y'] = + scatterHorizontalline(yValue, CONST.CH_SELF); + scpChartObj.update((mode = 'none')); + + // same row TODO use class to get + const sameRowCanvases = $(`#${selectedCanvasId}`) + .closest('div .chart-row') + .find('canvas'); + sameRowCanvases.each(function f() { + const canvasId = $(this).attr('id'); + const chartType = $(this).attr('chart-type'); + + if (chartType === 'histogram') { + const histChartObject = graphStore.getHistById(canvasId); + if (histChartObject) { + histChartObject.options.plugins.annotation.annotations[ + 'crosshair-y' + ] = scatterHorizontalline(yValue); + histChartObject.update((mode = 'none')); + } } - } - if (chartType === 'timeSeries') { - // draw horizontal from yValue - const tsChartObject = graphStore.getTimeSeriesById(canvasId); - tsChartObject.options.plugins.annotation.annotations['crosshair-y'] = tsHorizonalLine(yValue); - tsChartObject.update(mode = 'none'); - } - }); + if (chartType === 'timeSeries') { + // draw horizontal from yValue + const tsChartObject = + graphStore.getTimeSeriesById(canvasId); + tsChartObject.options.plugins.annotation.annotations[ + 'crosshair-y' + ] = tsHorizonalLine(yValue); + tsChartObject.update((mode = 'none')); + } + }); - // draw horizontal crosshair for the next timeseries - drawNextChartCrosshair(selectedCanvasId, index); + // draw horizontal crosshair for the next timeseries + drawNextChartCrosshair(selectedCanvasId, index); - break; - } - case 'doubleClick': { - drawCrossHairOnDoubleClick(index + 1, selectedCanvasId); - break; - } - default: + break; + } + case 'doubleClick': { + drawCrossHairOnDoubleClick(index + 1, selectedCanvasId); + break; + } + default: } }; -const createHorizonalThreshold = (threshHold, color = CONST.RED, id = CONST.UCL, borderDash = []) => ({ +const createHorizonalThreshold = ( + threshHold, + color = CONST.RED, + id = CONST.UCL, + borderDash = [], +) => ({ type: 'line', id, mode: 'horizontal', @@ -705,7 +790,12 @@ const createHorizonalThreshold = (threshHold, color = CONST.RED, id = CONST.UCL, borderDash, }); -const createVerticalThreshold = (threshHold, color = CONST.RED, id = CONST.vUCL, borderDash = []) => ({ +const createVerticalThreshold = ( + threshHold, + color = CONST.RED, + id = CONST.vUCL, + borderDash = [], +) => ({ type: 'line', id, mode: 'vertical', diff --git a/ap/static/trace_data/js/trace_data_step_bar_chart.js b/ap/static/trace_data/js/trace_data_step_bar_chart.js index e54970c..844b9eb 100644 --- a/ap/static/trace_data/js/trace_data_step_bar_chart.js +++ b/ap/static/trace_data/js/trace_data_step_bar_chart.js @@ -26,7 +26,6 @@ const StepBarChart = ($, paramObj) => { }; } - // ////////////// プライベート関数の定義 //////////////////// function setParam(key, defaultValue) { if (key in paramObj && !isEmpty(paramObj[key])) { @@ -49,8 +48,12 @@ const StepBarChart = ($, paramObj) => { categoryLabels.reverse(); // get origin step bar chart data - const stepChartDat = categoryLabels.map(label => categoryDistributed[label].pctg); - const shortCatLabels = categoryLabels.map(label => categoryDistributed[label].short_name); + const stepChartDat = categoryLabels.map( + (label) => categoryDistributed[label].pctg, + ); + const shortCatLabels = categoryLabels.map( + (label) => categoryDistributed[label].short_name, + ); const data = { labels: isCatLimited ? [] : shortCatLabels, datasets: [ @@ -78,25 +81,29 @@ const StepBarChart = ($, paramObj) => { return tblContent; }; - const externalTooltipHandler = (context) => { - const {chart, tooltip} = context; + const externalTooltipHandler = (context) => { + const { chart, tooltip } = context; if (!tooltip.dataPoints) return; - const {offsetLeft: positionX, offsetTop: positionY} = chart.canvas; + const { offsetLeft: positionX, offsetTop: positionY } = chart.canvas; const canvasOffset = $(`#${chart.canvas.id}`).offset(); const leftPosition = canvasOffset.left + positionX + tooltip.caretX; const topPosition = canvasOffset.top + positionY + tooltip.caretY; const dataIndex = tooltip.dataPoints[0].dataIndex; const plotData = graphStore.getArrayPlotData(chart.canvas.id); const categoryName = categoryLabels ? categoryLabels[dataIndex] : null; - const [cateName, count, ratio] = getStepChartHoverInfo(dataIndex, categoryName, plotData) + const [cateName, count, ratio] = getStepChartHoverInfo( + dataIndex, + categoryName, + plotData, + ); genDataPointHoverTable( genDataTable(cateName, count, ratio), - {x: leftPosition - 192, y: topPosition}, + { x: leftPosition - 192, y: topPosition }, 125, true, chart.canvas.id, ); - } + }; const config = { type: 'bar', @@ -146,7 +153,8 @@ const StepBarChart = ($, paramObj) => { maxTicksLimit: 8, align: 'end', font: { - family: 'Calibri Light', size: 12, + family: 'Calibri Light', + size: 12, }, }, grid: { @@ -190,21 +198,28 @@ const StepBarChart = ($, paramObj) => { }; if (!isEmpty(threshHigh)) { - config.options.plugins.annotation.annotations.ucl = createHistHorizonalThreshold(threshHigh, CONST.RED, CONST.UCL); + config.options.plugins.annotation.annotations.ucl = + createHistHorizonalThreshold(threshHigh, CONST.RED, CONST.UCL); } if (!isEmpty(threshLow)) { - config.options.plugins.annotation.annotations.lcl = createHistHorizonalThreshold(threshLow, CONST.RED, CONST.LCL); + config.options.plugins.annotation.annotations.lcl = + createHistHorizonalThreshold(threshLow, CONST.RED, CONST.LCL); } if (!isEmpty(prcMin)) { - config.options.plugins.annotation.annotations.lpcl = createHistHorizonalThreshold(prcMin, CONST.BLUE, CONST.LPCL); + config.options.plugins.annotation.annotations.lpcl = + createHistHorizonalThreshold(prcMin, CONST.BLUE, CONST.LPCL); } if (!isEmpty(prcMax)) { - config.options.plugins.annotation.annotations.upcl = createHistHorizonalThreshold(prcMax, CONST.BLUE, CONST.UPCL); + config.options.plugins.annotation.annotations.upcl = + createHistHorizonalThreshold(prcMax, CONST.BLUE, CONST.UPCL); } if (isCatLimited) { config.options.plugins.annotation.annotations['catLimited'] = { - type: 'label', content: [...i18n.catLimitMsg], color: '#65c5f1', font: { size: 9 }, + type: 'label', + content: [...i18n.catLimitMsg], + color: '#65c5f1', + font: { size: 9 }, }; } @@ -230,7 +245,8 @@ const StepBarChart = ($, paramObj) => { }; const getStepChartHoverInfo = (categoryIndex, categoryName, plotDat) => { - let count, ratio = ''; + let count, + ratio = ''; if (!categoryName && plotDat.before_rank_values) { const beforeRankVals = [...plotDat.before_rank_values[0]]; // because current we draw items from bot -> top, diff --git a/ap/static/trace_data/js/trace_data_summary_table.js b/ap/static/trace_data/js/trace_data_summary_table.js index 7b360fe..f71bec7 100644 --- a/ap/static/trace_data/js/trace_data_summary_table.js +++ b/ap/static/trace_data/js/trace_data_summary_table.js @@ -1,9 +1,23 @@ -const buildTimeSeriesSummaryResultsHTML = (summaryOption, tableIndex, generalInfo, beforeRankValues = null, stepChartSummary = null, isCTCol = false) => { +const buildTimeSeriesSummaryResultsHTML = ( + summaryOption, + tableIndex, + generalInfo, + beforeRankValues = null, + stepChartSummary = null, + isCTCol = false, + unit = null, +) => { const { getProc } = generalInfo; const { getVal } = generalInfo; const { catExpBox } = generalInfo; let catExpBoxHtml = ''; + if (unit && unit !== '' && unit !== 'Null') { + unit = ` [${unit}]`; + } else { + unit = ''; + } + let CTLabel = ''; if (isCTCol) { CTLabel = `(${DataTypes.DATETIME.short}) [sec]`; @@ -29,7 +43,7 @@ const buildTimeSeriesSummaryResultsHTML = (summaryOption, tableIndex, generalInf - ${getVal} ${CTLabel} + ${getVal}${unit} ${CTLabel} ${catExpBoxHtml} @@ -37,7 +51,13 @@ const buildTimeSeriesSummaryResultsHTML = (summaryOption, tableIndex, generalInf `; - const summaryHtml = buildSummaryResultsHTML(summaryOption, tableIndex, generalInfo, beforeRankValues, stepChartSummary); + const summaryHtml = buildSummaryResultsHTML( + summaryOption, + tableIndex, + generalInfo, + beforeRankValues, + stepChartSummary, + ); return `
    @@ -45,11 +65,13 @@ const buildTimeSeriesSummaryResultsHTML = (summaryOption, tableIndex, generalInf ${summaryHtml}
    `; - }; const removeClass = (element) => { - const colClasses = element.prop('className').split(' ').filter(x => x.startsWith('col-sm')); + const colClasses = element + .prop('className') + .split(' ') + .filter((x) => x.startsWith('col-sm')); for (const cls of colClasses) { element.removeClass(cls); } @@ -116,7 +138,6 @@ const onChangeSummaryEventHandler = (showScatterPlot) => { }); }; - const onChangeHistSummaryEventHandler = (e) => { let summaryHeight = null; const summaryClass = $(e).val(); @@ -160,9 +181,8 @@ const onChangeHistSummaryEventHandler = (e) => { Plotly.relayout(histogramId, {}); }); - // mark this option as checked and remove others $(e).attr('data-checked', 'true'); $('input[name=summaryOption]:not(:checked)').removeAttr('data-checked'); } -}; \ No newline at end of file +}; diff --git a/ap/static/trace_data/js/trace_data_time_series.js b/ap/static/trace_data/js/trace_data_time_series.js index b505180..01f28d3 100644 --- a/ap/static/trace_data/js/trace_data_time_series.js +++ b/ap/static/trace_data/js/trace_data_time_series.js @@ -1,18 +1,16 @@ -/* eslint-disable */ -/* eslint-disable no-underscore-dangle */ -/* eslint-disable no-undef */ -/* eslint-disable no-use-before-define */ -/* eslint-disable no-unused-vars */ -/* eslint-disable prefer-destructuring */ - let avoidMultiClickCntTS = 0; const THIN_DATA_COUNT = 4000; // limit category label to show as substring // and three dots ('JP0123...') const CAT_LABEL_LIMIT = 12; - -function YasuTsChart($, paramObj, chartLabels = null, tabID = null, xaxis = 'TIME') { +function YasuTsChart( + $, + paramObj, + chartLabels = null, + tabID = null, + xaxis = 'TIME', +) { const canvasId = setParam('canvasId', 'chart01'); const procId = setParam('procId', null); let tsData = setParam('tsData', []); @@ -52,8 +50,8 @@ function YasuTsChart($, paramObj, chartLabels = null, tabID = null, xaxis = 'TIM const isThinData = setParam('isThinData', false); if (beforeRankValues) { - minY -= 0.5; - maxY += 0.5; + minY -= CONST.RESIZE_RANGE_CHART; + maxY += CONST.RESIZE_RANGE_CHART; } // NOTE: append start_datetime and end_datetime in GUI to data. @@ -79,7 +77,8 @@ function YasuTsChart($, paramObj, chartLabels = null, tabID = null, xaxis = 'TIM } const decimation = { - enabled: true, algorithm: 'min-max', + enabled: true, + algorithm: 'min-max', }; let tickConfig = { @@ -105,7 +104,7 @@ function YasuTsChart($, paramObj, chartLabels = null, tabID = null, xaxis = 'TIM let step = (maxTick / tickCount).toFixed(0); const zeroPad = step.length - 1; - const zeroPadStr = ''.padEnd(zeroPad, '0') + const zeroPadStr = ''.padEnd(zeroPad, '0'); let checkAllEndZero = true; for (let i = 1; i < step.length; i++) { if (step[i] !== '0') { @@ -124,7 +123,7 @@ function YasuTsChart($, paramObj, chartLabels = null, tabID = null, xaxis = 'TIM for (let i = 1; i <= tickCount; i++) { const label = i * step; if (label < maxTick && label > lastTick) { - ticks.push(label) + ticks.push(label); lastTick = label; } } @@ -173,7 +172,7 @@ function YasuTsChart($, paramObj, chartLabels = null, tabID = null, xaxis = 'TIM // external handler of tooltip const externalTooltipHandler = (context) => { // Tooltip Element - const {chart, tooltip} = context; + const { chart, tooltip } = context; const tooltipEl = getOrCreateTooltip(chart); if (!tooltip.dataPoints) return; // Hide if no tooltip @@ -211,7 +210,9 @@ function YasuTsChart($, paramObj, chartLabels = null, tabID = null, xaxis = 'TIM const y = dataPoint.parsed.y; if (dicRankLabels) { const rankLabel = dicRankLabels[y]; - return rankLabel ? `Cat${(`0${Number(y)}`).slice(-2)}: ${rankLabel}` : COMMON_CONSTANT.NA; + return rankLabel + ? `Cat${`0${Number(y)}`.slice(-2)}: ${rankLabel}` + : COMMON_CONSTANT.NA; } return `${applySignificantDigit(y)}`; @@ -221,8 +222,8 @@ function YasuTsChart($, paramObj, chartLabels = null, tabID = null, xaxis = 'TIM const datasetIndex = dataPoint.datasetIndex; const dataIndex = dataPoint.dataIndex; let medVal = dataPoint.parsed.y; - let minVal = '' - let maxVal = '' + let minVal = ''; + let maxVal = ''; const inf = CONST.INF; const negInf = CONST.NEG_INF; const noLinked = CONST.NO_LINKED; @@ -238,7 +239,7 @@ function YasuTsChart($, paramObj, chartLabels = null, tabID = null, xaxis = 'TIM medVal = COMMON_CONSTANT.NA; } if (unlinkedIdxs.includes(dataIndex)) { - medVal = noLinked; // TODO which label for unlinked data? + medVal = noLinked; // TODO which label for unlinked data? } if (isOutlierValue(dataIndex, outlierDict)) { // Sprint 79 #12: Display actual value if type is OUTLIER @@ -263,7 +264,12 @@ function YasuTsChart($, paramObj, chartLabels = null, tabID = null, xaxis = 'TIM medVal = ''; } - if ((COMMON_CONSTANT.NA === medVal && COMMON_CONSTANT.NA === minVal && COMMON_CONSTANT.NA === maxVal) || medVal === noLinked) { + if ( + (COMMON_CONSTANT.NA === medVal && + COMMON_CONSTANT.NA === minVal && + COMMON_CONSTANT.NA === maxVal) || + medVal === noLinked + ) { minVal = ''; maxVal = ''; } @@ -277,7 +283,9 @@ function YasuTsChart($, paramObj, chartLabels = null, tabID = null, xaxis = 'TIM if (!threholdInfo['type']) { return i18n.default; } - return (currentLocale === localeConst.JP) ? threholdInfo['type'] : threholdInfo['eng_name']; + return currentLocale === localeConst.JP + ? threholdInfo['type'] + : threholdInfo['eng_name']; }; // get threshold of timerange const getThresholdInfor = (dataPoint) => { @@ -287,44 +295,77 @@ function YasuTsChart($, paramObj, chartLabels = null, tabID = null, xaxis = 'TIM // not time value in TSP, this time is time of end proc, not time of start proc const plotData = currentTraceData.array_plotdata[dataIndex]; const filterCond = plotData.catExpBox - ? (Array.isArray(plotData.catExpBox) ? plotData.catExpBox : [plotData.catExpBox]) + ? Array.isArray(plotData.catExpBox) + ? plotData.catExpBox + : [plotData.catExpBox] : null; - const [chartInfos, chartInfosOrg] = getChartInfo(plotData, 'TIME', filterCond); - const clickedVal = currentTraceData.array_plotdata[dataIndex].array_x[dataPoint.dataIndex]; - const [latestChartInfo,] = chooseLatestThresholds(chartInfos, chartInfosOrg, clickedVal); + const [chartInfos, chartInfosOrg] = getChartInfo( + plotData, + 'TIME', + filterCond, + ); + const clickedVal = + currentTraceData.array_plotdata[dataIndex].array_x[ + dataPoint.dataIndex + ]; + const [latestChartInfo] = chooseLatestThresholds( + chartInfos, + chartInfosOrg, + clickedVal, + ); const threshHigh = latestChartInfo['thresh-high'] || ''; const threshLow = latestChartInfo['thresh-low'] || ''; const prcMax = latestChartInfo['prc-max'] || ''; const prcMin = latestChartInfo['prc-min'] || ''; - const validFrom = latestChartInfo['act-from'] ? moment(latestChartInfo['act-from']).format('YYYY-MM-DD HH:mm:ss') : ''; - const validTo = latestChartInfo['act-to'] ? moment(latestChartInfo['act-to']).format('YYYY-MM-DD HH:mm:ss') : ''; + const validFrom = latestChartInfo['act-from'] + ? moment(latestChartInfo['act-from']).format( + 'YYYY-MM-DD HH:mm:ss', + ) + : ''; + const validTo = latestChartInfo['act-to'] + ? moment(latestChartInfo['act-to']).format( + 'YYYY-MM-DD HH:mm:ss', + ) + : ''; const filterCol = filterNameByLocale(latestChartInfo); const filterDetail = latestChartInfo['name'] || i18n.default; return { - threshHigh, threshLow, prcMax, prcMin, validFrom, validTo, filterCol, filterDetail - } + threshHigh, + threshLow, + prcMax, + prcMin, + validFrom, + validTo, + filterCol, + filterDetail, + }; }; const currentThreshold = getThresholdInfor(dataPoint, canvasId); const getDatTimeObj = (dataPoint) => { const currentTraceData = graphStore.getTraceData(); - const datetimeCol = currentTraceData.common_info[procId].datetime_col; + const datetimeCol = + currentTraceData.common_info[procId].datetime_col; const canvasId = dataPoint.chart.canvas.id; const dataIndex = $(`#${canvasId}`).attr('plotdata-index') || 0; - const x = currentTraceData.array_plotdata[dataIndex].array_x[dataPoint.dataIndex] + const x = + currentTraceData.array_plotdata[dataIndex].array_x[ + dataPoint.dataIndex + ]; if (isEmpty(x)) { - return {name: '', value: ''}; + return { name: '', value: '' }; } const xLabel = formatDateTime(x); // convert to localtime - return {name: datetimeCol, value: xLabel}; + return { name: datetimeCol, value: xLabel }; }; const getSerialObj = (dataPoint) => { const currentTraceData = graphStore.getTraceData(); - const serialColsName = currentTraceData.common_info[procId].serial_columns || []; + const serialColsName = + currentTraceData.common_info[procId].serial_columns || []; if (isEmpty(serialColsName)) { - return [{name: '', value: ''}]; + return [{ name: '', value: '' }]; } const dataIndex = dataPoint.dataIndex; @@ -332,18 +373,19 @@ function YasuTsChart($, paramObj, chartLabels = null, tabID = null, xaxis = 'TIM const canvasId = graphStore.getSelectedCanvas(); const canvasIdx = parseInt(canvasId.substring(5, 8)) - 1; // canvasId = 'chart03' -> canvasIdx = 2 if (currentTraceData.is_thin_data) { - serials = currentTraceData.array_plotdata[canvasIdx].serial_data; + serials = + currentTraceData.array_plotdata[canvasIdx].serial_data; } else { serials = currentTraceData.serial_data[procId]; } if (isEmpty(serials)) { - return [{name: '', value: ''}]; + return [{ name: '', value: '' }]; } let pointSerials = serials[dataIndex]; if (isEmpty(pointSerials)) { - return [{name: '', value: ''}]; + return [{ name: '', value: '' }]; } - if (typeof (pointSerials) !== 'object') { + if (typeof pointSerials !== 'object') { pointSerials = [pointSerials]; } const serialVal = pointSerials.map((v, i) => { @@ -352,7 +394,7 @@ function YasuTsChart($, paramObj, chartLabels = null, tabID = null, xaxis = 'TIM value: v || '', }; }); - serialVal.push({name: '', value: ''}) + serialVal.push({ name: '', value: '' }); return serialVal; }; @@ -362,7 +404,12 @@ function YasuTsChart($, paramObj, chartLabels = null, tabID = null, xaxis = 'TIM const genDataTable = (dataPoint, outlierDict, currentThreshold) => { let thresholdTr = ''; if (plotDataMin.length || plotDataMax.length) { - const [minVal, medVal, maxVal] = getDatYMinMaxVal(dataPoint, plotDataMin, plotDataMax, outlierDict); + const [minVal, medVal, maxVal] = getDatYMinMaxVal( + dataPoint, + plotDataMin, + plotDataMax, + outlierDict, + ); if (isOutlierValue(dataPoint.dataIndex, outlierDict)) { thresholdTr += genTRItems(i18n.outlierVal, medVal); } else { @@ -373,17 +420,29 @@ function YasuTsChart($, paramObj, chartLabels = null, tabID = null, xaxis = 'TIM // show from, to N of slot if (slotFrom && slotFrom[dataPoint.dataIndex]) { - thresholdTr += genTRItems('From', formatDateTime(slotFrom[dataPoint.dataIndex])) + thresholdTr += genTRItems( + 'From', + formatDateTime(slotFrom[dataPoint.dataIndex]), + ); } if (slotTo && slotTo[dataPoint.dataIndex]) { - thresholdTr += genTRItems('To', formatDateTime(slotTo[dataPoint.dataIndex])) + thresholdTr += genTRItems( + 'To', + formatDateTime(slotTo[dataPoint.dataIndex]), + ); } if (slotCount && slotCount[dataPoint.dataIndex]) { - thresholdTr += genTRItems('N', applySignificantDigit(slotCount[dataPoint.dataIndex])) + thresholdTr += genTRItems( + 'N', + applySignificantDigit(slotCount[dataPoint.dataIndex]), + ); } - } else { - const yVal = getDatYVal(dataPoint, beforeRankValues, outlierDict); + const yVal = getDatYVal( + dataPoint, + beforeRankValues, + outlierDict, + ); if (isOutlierValue(dataPoint.dataIndex, outlierDict)) { thresholdTr += genTRItems(i18n.outlierVal, yVal); } else { @@ -393,32 +452,45 @@ function YasuTsChart($, paramObj, chartLabels = null, tabID = null, xaxis = 'TIM const datetimeVals = getDatTimeObj(dataPoint); const serialVals = getSerialObj(dataPoint); thresholdTr += genTRItems(i18n.dateTime, datetimeVals.value); - serialVals.forEach(serialVal => { + serialVals.forEach((serialVal) => { if (serialVal.value) { thresholdTr += genTRItems(i18n.serial, serialVal.value); } }); } - thresholdTr += genTRItems('', ''); // br // filter - thresholdTr += genTRItems(i18n.attribute, - currentThreshold.filterCol, currentThreshold.filterDetail); + thresholdTr += genTRItems( + i18n.attribute, + currentThreshold.filterCol, + currentThreshold.filterDetail, + ); thresholdTr += genTRItems('', ''); // br // threshold table thresholdTr += genTRItems('', i18n.limit, i18n.procLimit); - thresholdTr += genTRItems(i18n.threshHigh, currentThreshold.threshHigh, currentThreshold.prcMax); - thresholdTr += genTRItems(i18n.threshLow, currentThreshold.threshLow, currentThreshold.prcMin); + thresholdTr += genTRItems( + i18n.threshHigh, + currentThreshold.threshHigh, + currentThreshold.prcMax, + ); + thresholdTr += genTRItems( + i18n.threshLow, + currentThreshold.threshLow, + currentThreshold.prcMin, + ); thresholdTr += genTRItems('', ''); // apply time - thresholdTr += genTRItems(i18n.validFrom, currentThreshold.validFrom); + thresholdTr += genTRItems( + i18n.validFrom, + currentThreshold.validFrom, + ); thresholdTr += genTRItems(i18n.validTo, currentThreshold.validTo); return thresholdTr; - } + }; - const {offsetLeft: positionX, offsetTop: positionY} = chart.canvas; + const { offsetLeft: positionX, offsetTop: positionY } = chart.canvas; // Display, position, and set styles for font tooltipEl.style.opacity = 0; @@ -428,29 +500,45 @@ function YasuTsChart($, paramObj, chartLabels = null, tabID = null, xaxis = 'TIM const topPosition = canvasOffset.top + positionY + tooltip.caretY; genDataPointHoverTable( genDataTable(dataPoint, outlierDict, currentThreshold), - {x: leftPosition - 192, y: topPosition}, + { x: leftPosition - 192, y: topPosition }, 0, true, chart.canvas.id, ); }; - let y_fmt = '' + let y_fmt = ''; const ctx = $(`#${canvasId}`).get(0).getContext('2d'); const fixTick = 8; const config = { - type: 'line', data: {}, options: { - responsive: true, maintainAspectRatio: false, animation: false, spanGaps: true, normalized: true, plugins: { - decimation, annotation: { + type: 'line', + data: {}, + options: { + responsive: true, + maintainAspectRatio: false, + animation: false, + spanGaps: true, + normalized: true, + plugins: { + decimation, + annotation: { annotations: {}, - }, legend: { + }, + legend: { display: false, - }, tooltip: { - enabled: false, position: 'nearest', external: externalTooltipHandler - }, chartAreaBorder: { - borderColor: CONST.COLOR_FRAME_BORDER, borderWidth: 2, borderDash: false, }, - }, scales: { + tooltip: { + enabled: false, + position: 'nearest', + external: externalTooltipHandler, + }, + chartAreaBorder: { + borderColor: CONST.COLOR_FRAME_BORDER, + borderWidth: 2, + borderDash: false, + }, + }, + scales: { x: { parsing: false, afterBuildTicks: function (scale) { @@ -465,17 +553,17 @@ function YasuTsChart($, paramObj, chartLabels = null, tabID = null, xaxis = 'TIM let step = Math.floor(xLabels.length / fixTick); - const idxs = [] + const idxs = []; let lastTick; for (let i = 0; i <= fixTick; i++) { - lastTick = i * step - idxs.push(lastTick) + lastTick = i * step; + idxs.push(lastTick); } if (lastTick < xLabels.length - 1) { if (lastTick > xLabels.length - step) { idxs[idxs.length - 1] = xLabels.length - 1; } else { - idxs.push(xLabels.length - 1) + idxs.push(xLabels.length - 1); } } @@ -487,11 +575,15 @@ function YasuTsChart($, paramObj, chartLabels = null, tabID = null, xaxis = 'TIM }); scale.ticks = ticks; }, - beforeTickToLabelConversion: function(scale) { + beforeTickToLabelConversion: function (scale) { if (xaxis === 'INDEX') { return; } - scale._unit = getUnitDateTimeFormat(scale.min, scale.max, scale.ticks.length); + scale._unit = getUnitDateTimeFormat( + scale.min, + scale.max, + scale.ticks.length, + ); }, ticks: { callback: function (value) { @@ -521,32 +613,59 @@ function YasuTsChart($, paramObj, chartLabels = null, tabID = null, xaxis = 'TIM // return '#555'; // }, font: { - family: 'Calibri Light', size: 12, - }, maxRotation: tickConfig.rotation, minRotation: tickConfig.rotation, // sampleSize: 8, - color: CONST.TICK, align: 'center', //autoSkip: false, + family: 'Calibri Light', + size: 12, + }, + maxRotation: tickConfig.rotation, + minRotation: tickConfig.rotation, // sampleSize: 8, + color: CONST.TICK, + align: 'center', //autoSkip: false, // maxtickslimit: 10, - }, grid: { - color: CONST.GRID, drawTicks: false, drawBorder: false, + }, + grid: { + color: CONST.GRID, + drawTicks: false, + drawBorder: false, }, // afterTickToLabelConversion: function adjust(context) { // for (const idx in context.ticks) { // context.ticks[idx].label = (context.ticks[idx].label || '').padStart(tickConfig.pad, ' '); // } // }, - }, y: { - display: true, min: minY, max: maxY, font: { - family: 'Calibri Light', size: 12, - }, afterBuildTicks: function (axis) { + }, + y: { + display: true, + min: minY, + max: maxY, + font: { + family: 'Calibri Light', + size: 12, + }, + afterBuildTicks: function (axis) { if (beforeRankValues) { let ticks = []; for (const key of Object.keys(beforeRankValues)) { - ticks.push({value: key}); + ticks.push({ value: key }); } axis.ticks = []; if (ticks) { - ticks = [{value: String(Number(ticks[0].value) - 0.5)}].concat(ticks); - ticks = ticks.concat([{value: String(Number(ticks[ticks.length - 1].value) + 0.5)}]) - axis.ticks = ticks + ticks = [ + { + value: String( + Number(ticks[0].value) - 0.5, + ), + }, + ].concat(ticks); + ticks = ticks.concat([ + { + value: String( + Number( + ticks[ticks.length - 1].value, + ) + 0.5, + ), + }, + ]); + axis.ticks = ticks; } // limit 8 ticks @@ -556,19 +675,19 @@ function YasuTsChart($, paramObj, chartLabels = null, tabID = null, xaxis = 'TIM } let step = Math.floor(yabels.length / fixTick); - step = Math.max(2, step) + step = Math.max(2, step); - const idxs = [] + const idxs = []; let lastTick; for (let i = 0; i <= fixTick; i++) { - lastTick = i * step - idxs.push(lastTick) + lastTick = i * step; + idxs.push(lastTick); } if (lastTick < yabels.length - 1) { if (lastTick > yabels.length - step) { idxs[idxs.length - 1] = yabels.length - 1; } else { - idxs.push(yabels.length - 1) + idxs.push(yabels.length - 1); } } @@ -581,24 +700,30 @@ function YasuTsChart($, paramObj, chartLabels = null, tabID = null, xaxis = 'TIM axis.ticks = yticks; // end limit 8 ticks } else { - const ticks = axis.ticks.map(tick => tick.value); + const ticks = axis.ticks.map((tick) => tick.value); y_fmt = getFmtValueOfArray(ticks); } return; - }, afterTickToLabelConversion: function adjust(context) { + }, + afterTickToLabelConversion: function adjust(context) { const ticks = context.ticks; context.ticks[0].label = ''; - if (ticks.length) context.ticks[ticks.length - 1].label = ''; + if (ticks.length) + context.ticks[ticks.length - 1].label = ''; alignLengthTickLabels(context.ticks); - }, afterFit: function (scaleInstance) { + }, + afterFit: function (scaleInstance) { scaleInstance.width = 60; // sets the width to 100px - }, ticks: { + }, + ticks: { labelOffset: beforeRankValues ? -10 : 0, mirror: !!beforeRankValues, padding: beforeRankValues ? -37 : 5, maxRotation: 0, minRotation: 0, - sampleSize: beforeRankValues ? Object.keys(beforeRankValues).length : 8, + sampleSize: beforeRankValues + ? Object.keys(beforeRankValues).length + : 8, color: CONST.TICK, maxTicksLimit: 9, // count: 9, // show max 8 tick labels @@ -607,15 +732,23 @@ function YasuTsChart($, paramObj, chartLabels = null, tabID = null, xaxis = 'TIM if (isCatLimited) return ''; // String Ranked label - let showVal = applySignificantDigit(value, undefined, y_fmt); + let showVal = applySignificantDigit( + value, + undefined, + y_fmt, + ); if (beforeRankValues) { - showVal = (`0${Number(showVal)}`).slice(-2); + showVal = `0${Number(showVal)}`.slice(-2); showVal = showVal.padEnd(5); const onlyVal = beforeRankValues[value]; - const isNeedToAddDotSymbol = String(onlyVal).length > CAT_LABEL_LIMIT; + const isNeedToAddDotSymbol = + String(onlyVal).length > CAT_LABEL_LIMIT; if (onlyVal !== undefined) { showVal = `Cat${showVal}`; - showVal += String(onlyVal).substring(0, CAT_LABEL_LIMIT); + showVal += String(onlyVal).substring( + 0, + CAT_LABEL_LIMIT, + ); if (isNeedToAddDotSymbol) { showVal += '...'; } @@ -627,13 +760,22 @@ function YasuTsChart($, paramObj, chartLabels = null, tabID = null, xaxis = 'TIM } } return showVal; - } - }, grid: { - color: CONST.GRID, drawTicks: false, drawBorder: false, - } + }, + }, + grid: { + color: CONST.GRID, + drawTicks: false, + drawBorder: false, + }, }, - }, onHover(evt, a, chart) { - const item = chart.getElementsAtEventForMode(evt, 'nearest', {intersect: true}, false); // const lastItem = chart.getActiveElements(); + }, + onHover(evt, a, chart) { + const item = chart.getElementsAtEventForMode( + evt, + 'nearest', + { intersect: true }, + false, + ); // const lastItem = chart.getActiveElements(); if (item.length) { // save hovered data index @@ -641,12 +783,13 @@ function YasuTsChart($, paramObj, chartLabels = null, tabID = null, xaxis = 'TIM const hoveredIndex = item[0].index; const datasetId = item[0].datasetIndex; graphStore.saveHoveredDataPoint(chartCanvasId, { - index: hoveredIndex, datasetIndex: datasetId, + index: hoveredIndex, + datasetIndex: datasetId, }); graphStore.setSelectedCanvas(chartCanvasId); - } - }, elements: { + }, + elements: { point: { pointStyle(ctx) { if (ctx.datasetIndex === CONST.NORMAL_DATASET) { @@ -656,7 +799,8 @@ function YasuTsChart($, paramObj, chartLabels = null, tabID = null, xaxis = 'TIM }, }, }, - }, plugins: [chartAreaBorder], + }, + plugins: [chartAreaBorder], }; let xTicks = null; @@ -683,28 +827,41 @@ function YasuTsChart($, paramObj, chartLabels = null, tabID = null, xaxis = 'TIM const yLabels = isCatLimited ? [] : xLabels; const chartData = isCatLimited ? [] : plotData; - const pointSize = plotData.length <= CONST.SMALL_DATA_SIZE ? 2.5 : plotData.length < 1000 ? 1.5 : 1; + const pointSize = + plotData.length <= CONST.SMALL_DATA_SIZE + ? 2.5 + : plotData.length < 1000 + ? 1.5 + : 1; config.data = { - labels: yLabels, datasets: [{ - label: 'Dataset 1', - data: chartData, - backgroundColor: pointColor, // ts chart dot color - borderColor: pointColor, // link between dot color - borderWidth: 0.5, - showLine: beforeRankValues ? false : !(isThinData || plotData.length >= 1000), - pointRadius: pointSize, - order: 0, - pointBackgroundColor: new Array(plotData.length).fill(pointColor), // stepped: !!beforeRankValues, - dictIdx2YValue, - }, { - label: 'Dataset 2', - data: plotDataEx, - pointBackgroundColor: plotDataExColor, - type: 'line', - order: 1, - showLine: false, - },], + labels: yLabels, + datasets: [ + { + label: 'Dataset 1', + data: chartData, + backgroundColor: pointColor, // ts chart dot color + borderColor: pointColor, // link between dot color + borderWidth: 0.5, + showLine: beforeRankValues + ? false + : !(isThinData || plotData.length >= 1000), + pointRadius: pointSize, + order: 0, + pointBackgroundColor: new Array(plotData.length).fill( + pointColor, + ), // stepped: !!beforeRankValues, + dictIdx2YValue, + }, + { + label: 'Dataset 2', + data: plotDataEx, + pointBackgroundColor: plotDataExColor, + type: 'line', + order: 1, + showLine: false, + }, + ], }; if (!isEmpty(minX)) { @@ -730,9 +887,14 @@ function YasuTsChart($, paramObj, chartLabels = null, tabID = null, xaxis = 'TIM const prcMin = chartInfo['prc-min']; const startDateTime = convertFunc(startPoint); const endDateTime = convertFunc(endPoint); - let actFrom = isEmpty(chartInfo['act-from']) ? startDateTime : convertFunc(chartInfo['act-from']); - let actTo = isEmpty(chartInfo['act-to']) ? endDateTime : convertFunc(chartInfo['act-to']); - if (endDateTime < actFrom || actTo < startDateTime) { // out of range + let actFrom = isEmpty(chartInfo['act-from']) + ? startDateTime + : convertFunc(chartInfo['act-from']); + let actTo = isEmpty(chartInfo['act-to']) + ? endDateTime + : convertFunc(chartInfo['act-to']); + if (endDateTime < actFrom || actTo < startDateTime) { + // out of range continue; } if (actFrom < startDateTime) { @@ -742,19 +904,23 @@ function YasuTsChart($, paramObj, chartLabels = null, tabID = null, xaxis = 'TIM actTo = endDateTime; } if (!isEmpty(threshHigh)) { - config.options.plugins.annotation.annotations[`ucl-${idx}`] = createTSThreshold(threshHigh, CONST.RED, actFrom, actTo); + config.options.plugins.annotation.annotations[`ucl-${idx}`] = + createTSThreshold(threshHigh, CONST.RED, actFrom, actTo); } if (!isEmpty(threshLow)) { - config.options.plugins.annotation.annotations[`lcl-${idx}`] = createTSThreshold(threshLow, CONST.RED, actFrom, actTo); + config.options.plugins.annotation.annotations[`lcl-${idx}`] = + createTSThreshold(threshLow, CONST.RED, actFrom, actTo); } if (!isEmpty(prcMin)) { - config.options.plugins.annotation.annotations[`lpcl-${idx}`] = createTSThreshold(prcMin, CONST.BLUE, actFrom, actTo); + config.options.plugins.annotation.annotations[`lpcl-${idx}`] = + createTSThreshold(prcMin, CONST.BLUE, actFrom, actTo); } if (!isEmpty(prcMax)) { - config.options.plugins.annotation.annotations[`upcl-${idx}`] = createTSThreshold(prcMax, CONST.BLUE, actFrom, actTo); + config.options.plugins.annotation.annotations[`upcl-${idx}`] = + createTSThreshold(prcMax, CONST.BLUE, actFrom, actTo); } } @@ -782,18 +948,27 @@ function YasuTsChart($, paramObj, chartLabels = null, tabID = null, xaxis = 'TIM backgroundColor: CONST.COLOR_ERROR_BAR, borderColor: CONST.COLOR_ERROR_BAR, borderWidth: 0.2, - } + }; } } - const stepLineAnnotation = genStepLineAnnotation(plotData, xLabels, pointColor); + const stepLineAnnotation = genStepLineAnnotation( + plotData, + xLabels, + pointColor, + ); if (!isCatLimited && !_.isEmpty(stepLineAnnotation)) { - config.options.plugins.annotation.annotations = Object.assign(config.options.plugins.annotation.annotations, stepLineAnnotation); + config.options.plugins.annotation.annotations = Object.assign( + config.options.plugins.annotation.annotations, + stepLineAnnotation, + ); } if (isCatLimited) { config.options.plugins.annotation.annotations['catLimited'] = { - type: 'label', content: [...i18n.catLimitMsg], color: '#65c5f1' + type: 'label', + content: [...i18n.catLimitMsg], + color: '#65c5f1', }; } @@ -806,7 +981,8 @@ function YasuTsChart($, paramObj, chartLabels = null, tabID = null, xaxis = 'TIM canvas.addEventListener('contextmenu', rightClickHandler, false); canvas.addEventListener('mousedown', handleMouseDown, false); - function handleMouseDown() { // later, not just mouse down, + mouseout of menu + function handleMouseDown() { + // later, not just mouse down, + mouseout of menu hideFPPContextMenu(); } @@ -824,7 +1000,9 @@ function YasuTsChart($, paramObj, chartLabels = null, tabID = null, xaxis = 'TIM top -= menuHeight; } menu.css({ - left: `${left}px`, top: `${top}px`, display: 'block', + left: `${left}px`, + top: `${top}px`, + display: 'block', }); // save selected canvas @@ -836,7 +1014,13 @@ function YasuTsChart($, paramObj, chartLabels = null, tabID = null, xaxis = 'TIM return chart; } -const createTSThreshold = (thresholdVal, color = CONST.BLUE, startPoint = null, endPoint = null, borderDash = []) => ({ +const createTSThreshold = ( + thresholdVal, + color = CONST.BLUE, + startPoint = null, + endPoint = null, + borderDash = [], +) => ({ type: 'box', scaleID: 'y', xMin: startPoint, @@ -856,12 +1040,22 @@ const updateThresholdsOnClick = (canvasId, clickedIdx) => { // not time value in TSP, this time is time of end proc, not time of start proc const plotData = currentTraceData.array_plotdata[dataIndex]; const filterCond = plotData.catExpBox - ? (Array.isArray(plotData.catExpBox) - ? plotData.catExpBox : [plotData.catExpBox]) + ? Array.isArray(plotData.catExpBox) + ? plotData.catExpBox + : [plotData.catExpBox] : null; - const [chartInfos, chartInfosOrg] = getChartInfo(plotData, 'TIME', filterCond); - const clickedVal = currentTraceData.array_plotdata[dataIndex].array_x[clickedIdx]; - const [latestChartInfo, latestIndex] = chooseLatestThresholds(chartInfos, chartInfosOrg, clickedVal); + const [chartInfos, chartInfosOrg] = getChartInfo( + plotData, + 'TIME', + filterCond, + ); + const clickedVal = + currentTraceData.array_plotdata[dataIndex].array_x[clickedIdx]; + const [latestChartInfo, latestIndex] = chooseLatestThresholds( + chartInfos, + chartInfosOrg, + clickedVal, + ); // from latest chartInfo, update histogram, update scatter plot, update summary const threshHigh = latestChartInfo['thresh-high']; const threshLow = latestChartInfo['thresh-low']; @@ -873,7 +1067,9 @@ const updateThresholdsOnClick = (canvasId, clickedIdx) => { const prcMin = latestChartInfo['prc-min']; // update thresholds - const sameRowCanvases = $(`#${canvasId}`).closest('div .chart-row').find('canvas'); + const sameRowCanvases = $(`#${canvasId}`) + .closest('div .chart-row') + .find('canvas'); sameRowCanvases.each(function f() { const canvasId = $(this).attr('id'); const chartType = $(this).attr('chart-type'); @@ -884,20 +1080,40 @@ const updateThresholdsOnClick = (canvasId, clickedIdx) => { removeThresholdsOfChart(scatterChartObject, CONST.HORIZONTAL); if (threshHigh !== null) { - scatterChartObject.options.plugins.annotation.annotations.ucl = createHorizonalThreshold(threshHigh, CONST.RED, CONST.UCL); + scatterChartObject.options.plugins.annotation.annotations.ucl = + createHorizonalThreshold( + threshHigh, + CONST.RED, + CONST.UCL, + ); } if (threshLow !== null) { - scatterChartObject.options.plugins.annotation.annotations.lcl = createHorizonalThreshold(threshLow, CONST.RED, CONST.LCL); + scatterChartObject.options.plugins.annotation.annotations.lcl = + createHorizonalThreshold( + threshLow, + CONST.RED, + CONST.LCL, + ); } if (prcMax !== null) { - scatterChartObject.options.plugins.annotation.annotations.upcl = createHorizonalThreshold(prcMax, CONST.BLUE, CONST.UPCL); + scatterChartObject.options.plugins.annotation.annotations.upcl = + createHorizonalThreshold( + prcMax, + CONST.BLUE, + CONST.UPCL, + ); } if (prcMin !== null) { - scatterChartObject.options.plugins.annotation.annotations.lpcl = createHorizonalThreshold(prcMin, CONST.BLUE, CONST.LPCL); + scatterChartObject.options.plugins.annotation.annotations.lpcl = + createHorizonalThreshold( + prcMin, + CONST.BLUE, + CONST.LPCL, + ); } - scatterChartObject.update(mode = 'none'); + scatterChartObject.update((mode = 'none')); // update next scatter plot thresholds const scatterCanvasIds = []; @@ -906,9 +1122,10 @@ const updateThresholdsOnClick = (canvasId, clickedIdx) => { }); const numOfCarts = scatterCanvasIds.length; const currentRowIdx = scatterCanvasIds.indexOf(canvasId); - const prevRowPos = (currentRowIdx + 1 - 1) || numOfCarts; + const prevRowPos = currentRowIdx + 1 - 1 || numOfCarts; const prevScatterCanvasId = scatterCanvasIds[prevRowPos - 1]; - const prevScatterChartObject = graphStore.getScatterById(prevScatterCanvasId); + const prevScatterChartObject = + graphStore.getScatterById(prevScatterCanvasId); if (!prevScatterChartObject) { return; } @@ -916,23 +1133,41 @@ const updateThresholdsOnClick = (canvasId, clickedIdx) => { removeThresholdsOfChart(prevScatterChartObject, CONST.VERTICAL); if (threshHigh !== null) { - prevScatterChartObject.options.plugins.annotation.annotations.vucl = createVerticalThreshold(threshHigh, CONST.RED, CONST.vUCL); + prevScatterChartObject.options.plugins.annotation.annotations.vucl = + createVerticalThreshold( + threshHigh, + CONST.RED, + CONST.vUCL, + ); } if (threshLow !== null) { - prevScatterChartObject.options.plugins.annotation.annotations.vlcl = createVerticalThreshold(threshLow, CONST.RED, CONST.vLCL); + prevScatterChartObject.options.plugins.annotation.annotations.vlcl = + createVerticalThreshold( + threshLow, + CONST.RED, + CONST.vLCL, + ); } if (prcMax !== null) { - prevScatterChartObject.options.plugins.annotation.annotations.vupcl = createVerticalThreshold(prcMax, CONST.BLUE, CONST.vUPCL); + prevScatterChartObject.options.plugins.annotation.annotations.vupcl = + createVerticalThreshold( + prcMax, + CONST.BLUE, + CONST.vUPCL, + ); } if (prcMin !== null) { - prevScatterChartObject.options.plugins.annotation.annotations.vlpcl = createVerticalThreshold(prcMin, CONST.BLUE, CONST.vLPCL); + prevScatterChartObject.options.plugins.annotation.annotations.vlpcl = + createVerticalThreshold( + prcMin, + CONST.BLUE, + CONST.vLPCL, + ); } - prevScatterChartObject.update(mode = 'none'); + prevScatterChartObject.update((mode = 'none')); } - - } // update histogram of the same row if (chartType === 'histogram') { @@ -940,26 +1175,47 @@ const updateThresholdsOnClick = (canvasId, clickedIdx) => { if (histChartObject) { removeThresholdsOfChart(histChartObject); if (threshHigh !== null) { - histChartObject.options.plugins.annotation.annotations.ucl = createHorizonalThreshold(threshHigh, CONST.RED, CONST.UCL); + histChartObject.options.plugins.annotation.annotations.ucl = + createHorizonalThreshold( + threshHigh, + CONST.RED, + CONST.UCL, + ); } if (threshLow !== null) { - histChartObject.options.plugins.annotation.annotations.lcl = createHorizonalThreshold(threshLow, CONST.RED, CONST.LCL); + histChartObject.options.plugins.annotation.annotations.lcl = + createHorizonalThreshold( + threshLow, + CONST.RED, + CONST.LCL, + ); } if (prcMax !== null) { - histChartObject.options.plugins.annotation.annotations.upcl = createHorizonalThreshold(prcMax, CONST.BLUE, CONST.UPCL); + histChartObject.options.plugins.annotation.annotations.upcl = + createHorizonalThreshold( + prcMax, + CONST.BLUE, + CONST.UPCL, + ); } if (prcMin !== null) { - histChartObject.options.plugins.annotation.annotations.lpcl = createHorizonalThreshold(prcMin, CONST.BLUE, CONST.LPCL); + histChartObject.options.plugins.annotation.annotations.lpcl = + createHorizonalThreshold( + prcMin, + CONST.BLUE, + CONST.LPCL, + ); } - histChartObject.update(mode = 'none'); + histChartObject.update((mode = 'none')); } - } }); // update to show summary corresponding to the click point - const allSummaries = $(`#${canvasId}`).closest('div .chart-row').find('.summary'); + const allSummaries = $(`#${canvasId}`) + .closest('div .chart-row') + .find('.summary'); allSummaries.each(function showHideSummary() { if ($(this).hasClass(`summary-${latestIndex}`)) { $(this).css('display', 'block'); @@ -972,7 +1228,6 @@ const updateThresholdsOnClick = (canvasId, clickedIdx) => { if (!plotData.before_rank_values) { drawSensorWhisker(dataIndex, plotData, clickedVal, cfgYMin, cfgYMax); } - }; function timeSeriesOnClick(chart, event) { @@ -980,8 +1235,14 @@ function timeSeriesOnClick(chart, event) { showVerticalLineOnClick(event); // get clicked position from event - const eventElement = chart.getElementsAtEventForMode(event, 'nearest', {intersect: true}, false); - if (!eventElement || eventElement.length < 1) { // click outside datapoint + const eventElement = chart.getElementsAtEventForMode( + event, + 'nearest', + { intersect: true }, + false, + ); + if (!eventElement || eventElement.length < 1) { + // click outside datapoint removeAllCrossHair(true, true, true); return; } @@ -1002,14 +1263,21 @@ function timeSeriesOnClick(chart, event) { // on DOUBLE CLICK: draw all crosshair line on double click setTimeout(() => { if (curCnt === avoidMultiClickCntTS) { - if (numDataPoints < 100000) drawCrossHairOnDoubleClick(clickPosition, canvasId); + if (numDataPoints < 100000) + drawCrossHairOnDoubleClick(clickPosition, canvasId); } }, 200); } else { setTimeout(() => { if (curCnt === avoidMultiClickCntTS) { // on SINGLE CLICK - if (numDataPoints < 100000) drawCrosshairSingleClick(clickPosition, xValue, yValue, canvasId); + if (numDataPoints < 100000) + drawCrosshairSingleClick( + clickPosition, + xValue, + yValue, + canvasId, + ); // from xValue -> find latest chartInfo updateThresholdsAllTSP(clickPosition - 1); @@ -1033,7 +1301,7 @@ const hideGraphScaleMenu = () => { const showGraphScaleMenu = (menuItem) => { const optionElement = $(menuItem); const offset = optionElement.offset(); - const menuTS = formElements.menuTS; // TODO + const menuTS = formElements.menuTS; // TODO const offsetTS = menuTS.offset(); const width = menuTS.width(); const menuGraphScale = formElements.menuScale; @@ -1045,14 +1313,16 @@ const showGraphScaleMenu = (menuItem) => { top -= menuHeight - optionElement.outerHeight(); } menuGraphScale.css({ - left: `${offset.left + width}px`, top: `${top}px`, display: 'block', - }) -} + left: `${offset.left + width}px`, + top: `${top}px`, + display: 'block', + }); +}; let menuItemOffset = {}; const saveOffset = (menuItem = null) => { menuItemOffset = $(menuItem).offset(); -} +}; const handleSelectTSMenuItem = (selectedItem = 'click', menuItem = null) => { if (selectedItem === 'graphScale') { @@ -1066,9 +1336,9 @@ const handleSelectTSMenuItem = (selectedItem = 'click', menuItem = null) => { display: 'block', }); filterInfoTable.offset({ - top: menuItemOffset.top, // TODO fix case clicking at bottom + top: menuItemOffset.top, // TODO fix case clicking at bottom left: menuItemOffset.left, - }) + }); } const selectedCanvasId = graphStore.getSelectedCanvas(); @@ -1078,19 +1348,26 @@ const handleSelectTSMenuItem = (selectedItem = 'click', menuItem = null) => { } const tsChartObject = graphStore.getTimeSeriesById(selectedCanvasId); - const lastHoveredDataPoint = graphStore.getLastHoveredDataPoint(selectedCanvasId); + const lastHoveredDataPoint = + graphStore.getLastHoveredDataPoint(selectedCanvasId); if (!lastHoveredDataPoint) { hideFPPContextMenu(); return; } - const {index: clickPosition, datasetIndex} = lastHoveredDataPoint; - const yValue = tsChartObject.data.datasets[datasetIndex].data[clickPosition]; + const { index: clickPosition, datasetIndex } = lastHoveredDataPoint; + const yValue = + tsChartObject.data.datasets[datasetIndex].data[clickPosition]; const xValue = tsChartObject.data.labels[clickPosition]; switch (selectedItem) { case 'click': { - drawCrosshairSingleClick(clickPosition, xValue, yValue, selectedCanvasId); + drawCrosshairSingleClick( + clickPosition, + xValue, + yValue, + selectedCanvasId, + ); break; } case 'doubleClick': { @@ -1102,12 +1379,15 @@ const handleSelectTSMenuItem = (selectedItem = 'click', menuItem = null) => { const isThinData = currentTraceData.is_thin_data; let cycleId; if (isThinData) { - cycleId = graphStore.getArrayPlotData(selectedCanvasId).cycle_ids[clickPosition]; + cycleId = + graphStore.getArrayPlotData(selectedCanvasId).cycle_ids[ + clickPosition + ]; } else { cycleId = currentTraceData.cycle_ids[clickPosition]; } // const xTime = graphStore.getArrayPlotData(selectedCanvasId).array_x[clickPosition]; - let xTime =currentTraceData.times[clickPosition]; + let xTime = currentTraceData.times[clickPosition]; const formDat = lastUsedFormData || null; let queryString = genQueryStringFromFormData(formDat); @@ -1139,7 +1419,11 @@ const updateGraphScale = (scaleOption = '1') => { const endProcId = formVal.end_proc; const sensorId = formVal.GET02_VALS_SELECT; - const isHideNonePoint = isHideNoneDataPoint(endProcId, sensorId, currentTraceData.COMMON.remove_outlier); + const isHideNonePoint = isHideNoneDataPoint( + endProcId, + sensorId, + currentTraceData.COMMON.remove_outlier, + ); const beforeRankValues = plotData.before_rank_values; if (beforeRankValues) { continue; @@ -1154,21 +1438,55 @@ const updateGraphScale = (scaleOption = '1') => { const scaleInfo = getScaleInfo(plotData, scaleOption); - const [minY, maxY] = calMinMaxYScale(scaleInfo['y-min'], scaleInfo['y-max'], scaleOption); + const [minY, maxY] = calMinMaxYScale( + scaleInfo['y-min'], + scaleInfo['y-max'], + scaleOption, + ); const outlierIdxs = scaleInfo.upper_outlier_idxs; const negOutlierIdxs = scaleInfo.lower_outlier_idxs; const kdeDat = scaleInfo.kde_data; - const [dictIdx2YValue, arrayYTS] = buildMapIndex2OutlierYValue(plotData, scaleInfo); - const { - arrayYEx, plotDataExColor - } = produceExceptionArrayY(arrayY, minY, maxY, unlinkedIdxs, noneIdxs, infIdxs, negInfIdxs, negOutlierIdxs, outlierIdxs); + const [dictIdx2YValue, arrayYTS] = buildMapIndex2OutlierYValue( + plotData, + scaleInfo, + ); + const { arrayYEx, plotDataExColor } = produceExceptionArrayY( + arrayY, + minY, + maxY, + unlinkedIdxs, + noneIdxs, + infIdxs, + negInfIdxs, + negOutlierIdxs, + outlierIdxs, + beforeRankValues, + ); - updateScales(i + 1, minY, maxY, kdeDat, arrayYEx, plotDataExColor, arrayYTS, dictIdx2YValue); + updateScales( + i + 1, + minY, + maxY, + kdeDat, + arrayYEx, + plotDataExColor, + arrayYTS, + dictIdx2YValue, + ); } }; -const updateScales = (row, newMin, newMax, kdeDat, arrayYEx, plotDataExColor, arrayYTS, dictIdx2YValue) => { +const updateScales = ( + row, + newMin, + newMax, + kdeDat, + arrayYEx, + plotDataExColor, + arrayYTS, + dictIdx2YValue, +) => { const createCanvasId = (graphType, row) => graphType + `${row}`; const updateMinMaxY = (chartObject, minY, maxY, kdeDat = null) => { if (isEmpty(chartObject)) return; @@ -1181,11 +1499,19 @@ const updateScales = (row, newMin, newMax, kdeDat, arrayYEx, plotDataExColor, ar chartObject.data.datasets[1].data = kdeObj.transKDE; } chartObject.update(); - } - const tsChartObject = graphStore.getTimeSeriesById(createCanvasId('chart0', row)); - const histChartObject = graphStore.getHistById(createCanvasId('hist0', row)); - const whiskerChartObject = graphStore.getWhiskerById(createCanvasId('whisker0', row)); - const scatterChartObject = graphStore.getScatterById(createCanvasId('sctr0', row)); + }; + const tsChartObject = graphStore.getTimeSeriesById( + createCanvasId('chart0', row), + ); + const histChartObject = graphStore.getHistById( + createCanvasId('hist0', row), + ); + const whiskerChartObject = graphStore.getWhiskerById( + createCanvasId('whisker0', row), + ); + const scatterChartObject = graphStore.getScatterById( + createCanvasId('sctr0', row), + ); if (tsChartObject) { tsChartObject.data.datasets[0].data = arrayYTS; @@ -1195,30 +1521,32 @@ const updateScales = (row, newMin, newMax, kdeDat, arrayYEx, plotDataExColor, ar updateMinMaxY(tsChartObject, newMin, newMax); } - updateMinMaxY(histChartObject, newMin, newMax, kdeDat); // TODO update minX, maxX for histogram + updateMinMaxY(histChartObject, newMin, newMax, kdeDat); // TODO update minX, maxX for histogram updateMinMaxY(whiskerChartObject, newMin, newMax); updateMinMaxY(scatterChartObject, newMin, newMax); -} +}; const handleGraphScaleClick = (option = '1') => { hideFPPContextMenu(); updateGraphScale(option); $('select[name=tsScaleY]').val(option); -} +}; const hideFPPContextMenu = () => { // hideGraphScaleMenu(); - $('.context-menu').css({display: 'none'}); - $('.context-menu-2nd').css({display: 'none'}); + $('.context-menu').css({ display: 'none' }); + $('.context-menu-2nd').css({ display: 'none' }); }; const deleteThisRow = (self, isGraphArea) => { - const tableId = isGraphArea ? formElements.serialTable2 : formElements.serialTable; + const tableId = isGraphArea + ? formElements.serialTable2 + : formElements.serialTable; $(self).closest('tr').remove(); - + updateCurrentSelectedProcessSerial(name.serial); if (isGraphArea) { - initSelect() + initSelect(); disableUnselectedOption(selectedSerials, name.serial); disableUnselectedOption(selectedProcess, name.process); } else { @@ -1226,7 +1554,13 @@ const deleteThisRow = (self, isGraphArea) => { } }; -const htmlOrderColRowTemplate = (priority, processSelectHTML, serialSelectHTML, orderSelectHTML, isGraphArea) => ` +const htmlOrderColRowTemplate = ( + priority, + processSelectHTML, + serialSelectHTML, + orderSelectHTML, + isGraphArea, +) => ` ${priority} ${processSelectHTML} @@ -1244,11 +1578,11 @@ const htmlOrderColRowTemplate = (priority, processSelectHTML, serialSelectHTML, `; - const buildProcessColumnHTML = (selectedProcId, name = 'serialProcess') => { const procOptions = []; for (const procId in procConfigs) { - const selected = Number(procId) === Number(selectedProcId) ? 'selected' : ''; + const selected = + Number(procId) === Number(selectedProcId) ? 'selected' : ''; const option = ``; procOptions.push(option); } @@ -1259,21 +1593,27 @@ const buildProcessColumnHTML = (selectedProcId, name = 'serialProcess') => { `; }; -const buildColumnHTML = (serialCols, tableId = formElements.serialTable, name = 'serialColumn', selectedCol = null) => { +const buildColumnHTML = ( + serialCols, + tableId = formElements.serialTable, + name = 'serialColumn', + selectedCol = null, + selectedProcId, +) => { const defaultOption = ''; const optionHTMLs = [defaultOption]; const selectedOrderCols = getSelectedOrderCols(tableId, name); let alreadySet = false; for (const idx in serialCols) { const col = serialCols[idx]; - let optionHTML = ``; // TODO no need, order alphabet + let optionHTML = ``; // TODO no need, order alphabet if (selectedCol) { if (col.id === selectedCol) { - optionHTML = ``; + optionHTML = ``; alreadySet = true; } } else if (!alreadySet && !selectedOrderCols.has(`${col.id}`)) { - optionHTML = ``; + optionHTML = ``; alreadySet = true; } optionHTMLs.push(optionHTML); @@ -1293,11 +1633,20 @@ const buildOrderHTML = (orderName, selectedOrder = null) => { return `` - + `; }; -const createOrderColRowHTML = async (selectedProcId, tableId = formElements.serialTable, processName = 'serialProcess', serialName = 'serialColumn', orderName = 'serialOrder', selectedCol = null, selectedOrder = null, priority = null, isGraphArea = false) => { +const createOrderColRowHTML = async ( + selectedProcId, + tableId = formElements.serialTable, + processName = 'serialProcess', + serialName = 'serialColumn', + orderName = 'serialOrder', + selectedCol = null, + selectedOrder = null, + priority = null, + isGraphArea = false, +) => { const calcPriority = () => $(`${tableId} tbody tr`).length + 1; // get serial @@ -1308,24 +1657,48 @@ const createOrderColRowHTML = async (selectedProcId, tableId = formElements.seri // sort serial & datetime to show first const newSortedCols = orderSeriesCols(columns); for (const col of newSortedCols) { - if (col.is_serial_no || col.is_get_date || CfgProcess_CONST.CATEGORY_TYPES.includes(col.data_type)) { + if ( + col.is_serial_no || + col.is_get_date || + CfgProcess_CONST.CATEGORY_TYPES.includes(col.data_type) + ) { orderCols.push(col); } } - const processSelectHTML = buildProcessColumnHTML(selectedProcId, processName); - const columnSelectHTML = buildColumnHTML(orderCols, tableId, serialName, selectedCol); + const processSelectHTML = buildProcessColumnHTML( + selectedProcId, + processName, + ); + const columnSelectHTML = buildColumnHTML( + orderCols, + tableId, + serialName, + selectedCol, + selectedProcId, + ); const orderSelectHTML = buildOrderHTML(orderName, selectedOrder); - return htmlOrderColRowTemplate(priority || calcPriority(), processSelectHTML, columnSelectHTML, orderSelectHTML, isGraphArea); + return htmlOrderColRowTemplate( + priority || calcPriority(), + processSelectHTML, + columnSelectHTML, + orderSelectHTML, + isGraphArea, + ); }; -const getSelectedOrderCols = (tableId = formElements.serialTable, serialName = 'serialColumn') => { +const getSelectedOrderCols = ( + tableId = formElements.serialTable, + serialName = 'serialColumn', +) => { const numRows = $(`${tableId} tbody tr`).length; if (!numRows) return new Set(); const selectedCols = $(`select[name=${serialName}]`); - return new Set(selectedCols.find(':selected').map(function getVal() { - return $(this).val(); - }),); + return new Set( + selectedCols.find(':selected').map(function getVal() { + return $(this).val(); + }), + ); }; const disableSelectedSerials = (selectedSerials, name = 'serialColumn') => { @@ -1347,17 +1720,28 @@ const disableSelectedSerials = (selectedSerials, name = 'serialColumn') => { }); }; -const disableSelectedOption = (tableId = formElements.serialTable, serialName = 'serialColumn') => { +const disableSelectedOption = ( + tableId = formElements.serialTable, + serialName = 'serialColumn', +) => { const selectedSerials = getSelectedOrderCols(tableId, serialName); disableSelectedSerials(selectedSerials, serialName); }; -const updatePriorityAndDisableSelected = (tableId = formElements.serialTable, serialName = 'serialColumn') => { +const updatePriorityAndDisableSelected = ( + tableId = formElements.serialTable, + serialName = 'serialColumn', +) => { updatePriority(tableId); disableSelectedOption(tableId, serialName); }; -const bindChangeProcessEvent = (tableId = formElements.serialTable, processName = 'serialProcess', serialName = 'serialColumn', callback = null) => { +const bindChangeProcessEvent = ( + tableId = formElements.serialTable, + processName = 'serialProcess', + serialName = 'serialColumn', + callback = null, +) => { $(`select[name=${processName}]`).each(function changeProc() { const binded = $(this).data('bind-on-change'); if (!binded) { @@ -1366,16 +1750,20 @@ const bindChangeProcessEvent = (tableId = formElements.serialTable, processName $(this).data('bind-on-change', 1); const selectedProcId = $(this).val(); - const orderColElement = $(this).closest('tr').find(`select[name=${serialName}]`); + const orderColElement = $(this) + .closest('tr') + .find(`select[name=${serialName}]`); if (isEmpty(selectedProcId)) { // empty proc -> empty column orderColElement.empty().select2({ - placeholder: `${i18nCommon.search}...`, allowClear: true, width: 'auto', + placeholder: `${i18nCommon.search}...`, + allowClear: true, + width: 'auto', language: { noResults: function () { - return i18nCommon.notApplicable; - } - } + return i18nCommon.notApplicable; + }, + }, }); return; } @@ -1385,38 +1773,96 @@ const bindChangeProcessEvent = (tableId = formElements.serialTable, processName const columns = procInfo.getColumns(); const selectedVal = orderColElement.val(); - const selectedSerials = getSelectedOrderCols(tableId, serialName); + const selectedSerialCols = getSelectedOrderCols( + tableId, + serialName, + ); let alreadyPickedOrderCol = false; let defaultOrderCol = ''; - const orderCols = [{id: '', text: '---', selected: true}]; + const orderCols = [{ id: '', text: '---', selected: true }]; // sort serial & datetime to show first const newSortedCols = orderSeriesCols(columns); for (const col of newSortedCols) { - if (col.is_serial_no || col.is_get_date || CfgProcess_CONST.CATEGORY_TYPES.includes(col.data_type)) { - const orderObject = {id: col.id, text: col.shown_name, title: col.name_en}; - - const isColSelectedOnSameElement = `${selectedVal}` === `${col.id}`; - const isColSelected = selectedSerials.has(col.id) || selectedSerials.has(`${col.id}`); + if ( + col.is_serial_no || + col.is_get_date || + CfgProcess_CONST.CATEGORY_TYPES.includes(col.data_type) + ) { + const orderObject = { + id: col.id, + text: col.shown_name, + title: col.name_en, + 'data-is-get-date': col.is_get_date, + 'data-is-serial-no': col.is_serial_no, + 'data-selected-proc-id': selectedProcId, + }; + const procData = getProcessColSelected(); + const currentOption = `${selectedProcId}-${col.id}`; + const isColSelectedOnSameElement = + `${selectedVal}` === `${col.id}`; + const isColSelected = + selectedSerialCols.has(col.id) || + selectedSerialCols.has(`${col.id}`); if (!isColSelectedOnSameElement && isColSelected) { orderObject.disabled = true; - } else if (!alreadyPickedOrderCol) { - defaultOrderCol = col.id; - alreadyPickedOrderCol = true; + } else if ( + !alreadyPickedOrderCol && + !selectedSerials.has(col.id) + ) { + if ( + (col.is_get_date || col.is_serial_no) && + procData.includes(selectedProcId) + ) { + if ( + !selectedProcessSerial && + !selectedProcessSerial.has(currentOption) + ) { + defaultOrderCol = col.id; + alreadyPickedOrderCol = true; + } + } } orderCols.push(orderObject); } } orderColElement.empty().select2({ - placeholder: `${i18nCommon.search}...`, allowClear: true, width: 'auto', data: orderCols, + placeholder: `${i18nCommon.search}...`, + allowClear: true, + width: 'auto', + data: orderCols, language: { noResults: function () { - return i18nCommon.notApplicable; - } - } + return i18nCommon.notApplicable; + }, + }, }); + orderColElement + .select2() + .find('option') + .each(function () { + const selectElement = $(this); + const optionValue = selectElement.val(); + const orderCol = orderCols.find( + (col) => `${col.id}` === `${optionValue}`, + ); + selectElement + .attr( + 'data-is-get-date', + orderCol['data-is-get-date'], + ) + .attr( + 'data-is-serial-no', + orderCol['data-is-serial-no'], + ) + .attr( + 'data-selected-proc-id', + orderCol['data-selected-proc-id'], + ); + }); + setSelect2Selection(tableId); if (defaultOrderCol) { @@ -1428,27 +1874,100 @@ const bindChangeProcessEvent = (tableId = formElements.serialTable, processName }); }; -const bindChangeOrderColEvent = (tableId = formElements.serialTable, name = 'serialColumn', callback = null) => { - $(`select[name=${name}]`).on('change', () => { +const bindChangeOrderColEvent = ( + tableId = formElements.serialTable, + name = 'serialColumn', + callback = null, +) => { + const serialSelectEl = $(`select[name=${name}]`); + serialSelectEl.on('select2:change', (e) => { + // catch event select option with select2 + updateCurrentSelectedProcessSerial('TermSerialColumn'); + updateSelectedProcessSerial(true, e); + disableUnselectedOption(selectedSerials, 'TermSerialColumn'); + enableOptionSelectedValue(e); if (callback) { callback(); } else { disableSelectedOption(tableId, name); } }); + + serialSelectEl.on('select2:unselecting', (e) => { + // catch event unselect option with select2 + updateCurrentSelectedProcessSerial('TermSerialColumn'); + updateSelectedProcessSerial(false, e); + disableUnselectedOption(selectedSerials, 'TermSerialColumn'); + }); + + serialSelectEl.off('select2:opening'); + serialSelectEl.on('select2:opening', (e) => { + // catch event open drop down with select2 + updateCurrentSelectedProcessSerial('TermSerialColumn'); + disableUnselectedOption(selectedSerials, 'TermSerialColumn'); + enableOptionSelectedValue(e); + }); + const updateSelectedProcessSerial = (isSelect, e) => { + let serialColDataId; + const currentElement = $(e.currentTarget); + const parentElement = currentElement.parents().eq(1); + const serialProcId = parentElement + .find(`select[name="TermSerialProcess"] option:selected`) + .val(); + if (isSelect) { + serialColDataId = e.params.data.id; + selectedProcessSerial.add(`${serialProcId}-${serialColDataId}`); + } else { + serialColDataId = e.params.args.data.id; + selectedProcessSerial.delete(`${serialProcId}-${serialColDataId}`); + } + }; + const enableOptionSelectedValue = (e) => { + $(e.currentTarget).find('option:selected').attr('disabled', false); + }; }; -const showIndexOrderingSetting = async (tableId = formElements.serialTable, processName = 'serialProcess', serialName = 'serialColumn', orderName = 'serialOrder') => { +const updateCurrentSelectedProcessSerial = (serialName) => { + const currentProcessSerial = new Set(); + const serialSelects = $(`select[name=${serialName}]`); + serialSelects.each(function () { + const selectElement = $(this); + const parentElement = selectElement.parents().eq(1); + const serialProcId = parentElement + .find(`select[name="TermSerialProcess"] option:selected`) + .val(); + const serialColDataId = selectElement.find(':selected').val(); + if (serialColDataId) { + currentProcessSerial.add(`${serialProcId}-${serialColDataId}`); + } + }); + selectedProcessSerial = currentProcessSerial; +}; + +const showIndexOrderingSetting = async ( + tableId = formElements.serialTable, + processName = 'serialProcess', + serialName = 'serialColumn', + orderName = 'serialOrder', +) => { // get serial for start proc const startProc = getFirstSelectedProc(); // add to modal const serialTableBody = $(`${tableId} tbody`); serialTableBody.empty(); - const serialOrderRowHTML = await createOrderColRowHTML(startProc, tableId, processName, serialName, orderName); + const serialOrderRowHTML = await createOrderColRowHTML( + startProc, + tableId, + processName, + serialName, + orderName, + ); serialTableBody.html(serialOrderRowHTML); // set value of serialColumn is first value - $(`select[name=${serialName}]`).val($(`select[name=${serialName}] option:nth-child(2)`).val()) + $(`select[name=${serialName}]`).val( + $(`select[name=${serialName}] option:nth-child(2)`).val(), + ); setSelect2Selection(); bindChangeProcessEvent(tableId, processName, serialName); @@ -1458,28 +1977,52 @@ const showIndexOrderingSetting = async (tableId = formElements.serialTable, proc bindDragNDrop(serialTableBody, tableId, serialName); }; -const bindDragNDrop = (serialTableBody, tableId = formElements.serialTable, serialName = 'serialColumn') => { +const bindDragNDrop = ( + serialTableBody, + tableId = formElements.serialTable, + serialName = 'serialColumn', +) => { // drag & drop for tables serialTableBody.sortable({ - helper: dragDropRowInTable.fixHelper, update: () => { - updatePriorityAndDisableSelected(tableId, serialName) + helper: dragDropRowInTable.fixHelper, + update: () => { + updatePriorityAndDisableSelected(tableId, serialName); }, }); }; -const addSerialOrderRow = async (tableId = formElements.serialTable, processName = 'serialProcess', serialName = 'serialColumn', orderName = 'serialOrder', selectedProc = null, selectedCol = null, selectedOrder = null, priority = null, isGraphArea = false) => { +const addSerialOrderRow = async ( + tableId = formElements.serialTable, + processName = 'serialProcess', + serialName = 'serialColumn', + orderName = 'serialOrder', + selectedProc = null, + selectedCol = null, + selectedOrder = null, + priority = null, + isGraphArea = false, +) => { if (!tableId) { tableId = formElements.serialTable; } const startProc = selectedProc ? selectedProc : getFirstSelectedProc(); const serialTableBody = $(`${tableId} tbody`); - const serialOrderRowHTML = await createOrderColRowHTML(startProc, tableId, processName, serialName, orderName, selectedCol, selectedOrder, priority, isGraphArea); + const serialOrderRowHTML = await createOrderColRowHTML( + startProc, + tableId, + processName, + serialName, + orderName, + selectedCol, + selectedOrder, + priority, + isGraphArea, + ); serialTableBody.append(serialOrderRowHTML); setSelect2Selection(tableId); bindDragNDrop(serialTableBody, tableId, serialName); }; - const showSerialModal = (tableId = formElements.serialTableModal) => { $(tableId).modal('show'); }; @@ -1513,18 +2056,20 @@ const bindXAxisEvents = () => { $('#xOption').data('change-val-only', false); }); - $(formElements.btnAddSerial).off('click').on('click', () => { - addSerialOrderRow().then(() => { - bindChangeProcessEvent(); - updatePriorityAndDisableSelected(); - setTimeout(() => { // wait select2 to be shown - bindChangeOrderColEvent(); - }, 200); + $(formElements.btnAddSerial) + .off('click') + .on('click', () => { + addSerialOrderRow().then(() => { + bindChangeProcessEvent(); + updatePriorityAndDisableSelected(); + setTimeout(() => { + // wait select2 to be shown + bindChangeOrderColEvent(); + }, 200); + }); }); - }); }; - const genStepLineAnnotation = (plotData, xLabels, pointColor) => { const annotations = {}; const startPoints = []; @@ -1533,8 +2078,8 @@ const genStepLineAnnotation = (plotData, xLabels, pointColor) => { for (let i in plotData) { i = Number(i); let val = plotData[i]; - let nextVal = (i < plotData.length - 1) ? plotData[i + 1] : null; - let prevVal = (i > 0) ? plotData[i - 1] : null; + let nextVal = i < plotData.length - 1 ? plotData[i + 1] : null; + let prevVal = i > 0 ? plotData[i - 1] : null; const pointPosition = Number(xLabels[i]) ? i : xLabels[i]; // start if prev != val and next == val @@ -1568,10 +2113,27 @@ const genStepLineAnnotation = (plotData, xLabels, pointColor) => { const orderSeriesCols = (columns) => { // sort serial & datetime to show first - const serialCols = columns.filter(col => col.is_serial_no); - const datetimeCols = columns.filter(col => col.is_get_date); - const normalCols = columns.filter(col => !col.is_serial_no && !col.is_get_date); + const serialCols = columns.filter((col) => col.is_serial_no); + const datetimeCols = columns.filter((col) => col.is_get_date); + const normalCols = columns.filter( + (col) => !col.is_serial_no && !col.is_get_date, + ); return [...serialCols, ...datetimeCols, ...normalCols]; }; +const getProcessColSelected = () => { + const formData = collectFormData('#traceDataForm'); + const procData = []; + const regex = /^end_proc\d+$/; + + for (const item of formData.entries()) { + const key = item[0]; + const value = item[1]; + if (regex.test(key)) { + procData.push(value); + } + } + + return procData; +}; diff --git a/ap/static/trace_data/js/trace_data_whisker_plot.js b/ap/static/trace_data/js/trace_data_whisker_plot.js index 65b19cd..debc7b8 100644 --- a/ap/static/trace_data/js/trace_data_whisker_plot.js +++ b/ap/static/trace_data/js/trace_data_whisker_plot.js @@ -218,17 +218,28 @@ const whiskerPlot = (ctx, prop) => { return chart; }; - const getChartInforIndex = (plotData, clickedVal) => { const chartInfosY = plotData.chart_infos || []; const chartInfosYOrg = plotData.chart_infos_org || []; - const [latestChartInfoY, idx] = chooseLatestThresholds(chartInfosY, chartInfosYOrg, clickedVal); + const [latestChartInfoY, idx] = chooseLatestThresholds( + chartInfosY, + chartInfosYOrg, + clickedVal, + ); return idx; }; -const genProp = (plotData, chartInforIndex = null, cfgYMin = null, cfgYMax = null) => { - const nonParametric = getNode(plotData.summaries[chartInforIndex], ['non_parametric']) || {}; - const stats = getNode(plotData.summaries[chartInforIndex], ['basic_statistics']) || {}; +const genProp = ( + plotData, + chartInforIndex = null, + cfgYMin = null, + cfgYMax = null, +) => { + const nonParametric = + getNode(plotData.summaries[chartInforIndex], ['non_parametric']) || {}; + const stats = + getNode(plotData.summaries[chartInforIndex], ['basic_statistics']) || + {}; let yMax = cfgYMax; let yMin = cfgYMin; @@ -278,16 +289,42 @@ const showWhiskerHover = (e) => { // show hover const canvasId = e.chart.canvas.id; - const rec = $(`#${canvasId}`)[0].getBoundingClientRect(); + const pos = calWhiskerParamTblRect(canvasId); const hoverElement = $(`#${canvasId}Hover`); - hoverElement.css('left', rec.x + rec.width - 35); - hoverElement.css('top', rec.y); + hoverElement.css('left', pos.left); + hoverElement.css('top', pos.top); hoverElement.css('display', 'block'); hoverElement.css('visibility', 'visible'); hoverElement.css('opacity', '1'); // #s120b14 todo pin from mouse position to use copy button }; +const calWhiskerParamTblRect = (whiskerId) => { + const offsetTop = 0; + const whiskerHoverElem = $(`#${whiskerId}Hover`); + const whiskerRect = $(`#${whiskerId}`)[0].getBoundingClientRect(); + const tblOffsetTop = + parseInt(whiskerHoverElem.css('padding-top').slice(0, -2)) + + parseInt(whiskerHoverElem.css('margin-top').slice(0, -2)); + const tblOffsetBottom = + parseInt(whiskerHoverElem.css('padding-bottom').slice(0, -2)) + + parseInt(whiskerHoverElem.css('margin-bottom').slice(0, -2)); + const tblHeight = + whiskerHoverElem.height() + tblOffsetBottom + tblOffsetTop - 35; + const tblVisible = $(window).height() - (whiskerRect.y + tblOffsetTop); + const overTblBottom = tblHeight - tblVisible; + const posLeft = whiskerRect.x + whiskerRect.width - 35; + let posTop = whiskerRect.y > 0 ? whiskerRect.y : offsetTop; + if (overTblBottom > 0) { + if (whiskerRect.y > overTblBottom) { + posTop = whiskerRect.y - overTblBottom; + } else { + posTop = offsetTop; + } + } + return { left: posLeft, top: posTop }; +}; + const hideAllWhiskerHover = () => { $('.whisker-hover').css('display', 'none'); }; @@ -314,7 +351,13 @@ const produceWhiskerPlots = (data) => { }); }; -const drawSensorWhisker = (sensorIdx, plotData, clickedVal = null, cfgYMin = null, cfgYMax = null) => { +const drawSensorWhisker = ( + sensorIdx, + plotData, + clickedVal = null, + cfgYMin = null, + cfgYMax = null, +) => { const canvasId = `whisker0${parseInt(sensorIdx) + 1}`; const canvasElement = $(`#${canvasId}`); const chartInforIndex = getChartInforIndex(plotData, clickedVal); diff --git a/ap/table_viewer/controllers.py b/ap/table_viewer/controllers.py index 32c4ac2..3016efe 100644 --- a/ap/table_viewer/controllers.py +++ b/ap/table_viewer/controllers.py @@ -17,7 +17,7 @@ @table_viewer_blueprint.route('/table_viewer') def index(): - all_procs = get_all_process() + all_procs = get_all_process(with_parent=False) output_dict = { 'page_title': _('Table Viewer'), 'procs': all_procs, diff --git a/ap/templates/500.html b/ap/templates/500.html index cd0fa29..272069c 100644 --- a/ap/templates/500.html +++ b/ap/templates/500.html @@ -1,13 +1,16 @@ {% extends "base.html" %} {% block asset %} - + {% endblock %} {% block midbody %} -
    -

    {{ _("Sorry, something went wrong") }}

    -
    -{% endblock %} \ No newline at end of file +
    +

    + {{ _("Sorry, something went wrong") }} + +

    +
    +{% endblock %} diff --git a/ap/templates/aggregate_plot/aggregate_plot.html b/ap/templates/aggregate_plot/aggregate_plot.html index 88ca7e4..4952fbc 100644 --- a/ap/templates/aggregate_plot/aggregate_plot.html +++ b/ap/templates/aggregate_plot/aggregate_plot.html @@ -14,62 +14,85 @@
    - {{ macros.label(_("Target period")) }} - {{ macros.paste_btn() }} + {{ macros.label(_("Target period")) }} + {{ macros.paste_btn() }}
    - {{macros.multiple_target_period(DivisionNumberHover=_('Division number Hover AgP'), rlp=True, cyclicCalender=True, dataNumber=True, WindowLengthHover=_('Window length Hover AgP'), IntervalHover=_('Interval Hover AgP'))}} + {{ macros.multiple_target_period(DivisionNumberHover=_('Division number Hover AgP'), rlp=True, cyclicCalender=True, dataNumber=True, WindowLengthHover=_('Window length Hover AgP'), IntervalHover=_('Interval Hover AgP')) }}
    {{ macros.cond_proc([],'', width=2, title=_('Graph Filter: Limits data to be displayed to a subset.'), pysm=3, is_optional=true) }} -
    -
    - {{ macros.order_btn() }} +
    +
    + {{ macros.order_btn() }} {{ macros.preprocess_options(isRealOnlyMsg=_('The target is a variable whose data type is Real')) }} - - {{ macros.export_gui() }} -
    -
    - - {{ macros.cat_label_filter_modal() }} + + {{ macros.export_gui() }} +
    +
    + + {{ macros.cat_label_filter_modal() }} {{ macros.end_col_order_modal() }} {{ macros.end_col_order_modal(graphArea='1') }} {{ macros.jump_modal() }} -
    + -