Javascript Library

We provide a simple roadmap of what happens within dqr.js and how the html page is actually rendered. This can be thought of in 4 steps:

  1. load in the JSON config file

  2. build the HTML structure specified by the config file

  3. fill in the HTML content based on the presence/absence of JSON reports.

  4. dynamically render the HTML based on user interactions

We present the basic components of this library below, roughly divided by the delegation scheme inherent in the workflow. This is not exact, though, and some functions are used in multiple places.

Load the JSON config file

  • load_config: loads in the JSON config file based on a hard-coded relative path (dqr.json)

Build the HTML structure

  • build_html: fill in the HTML document based on the schema specified in the JSON config. Creates new elements if needed and stores references for later lookup.

    • init_lookup: consturct the look-up structure, which is then filled out with references for later use.

    • update_title: update the page’s <title> tag to contain the GraceID.

    • update_gracedb_link: update the nav-brand link to point to the associated GraceDb event page.

    • update_banner: update the banner header to contain the GraceID.

    • populate_toggle_ul: based on config, create <li> elements for the toggles and store them in lookup.

    • populate_tier_ul: based on config, create <li> elements for the tiers navigation bar and store them in lookup.

    • populate_question_ul: based on config, create <li> elements for the questions nav-tabs and store them in lookup. Note, each question only has 1 <l1> associated with it even though it is included for all tiers.

    • *populate_task_div: based on config, create tasks <div> elements that can be shown/hidden dynamically. Note, each task only has 1 <div> associated with it even if it is included in multiple tiers.

      • init_task_div: create the <div> for a single task, setting up things like id and class consistently.

      • populate_task_panel: create elements for the <panel> contained in the <div> for this task.

        • init_task_summary: create the <div> for summary information.

        • init_task_figures: create the <div> for figures.

        • init_task_tables: create the <div> for tables.

        • init_task_links: create the <div> for links.

        • init_task_override: create the <div> for override information.

        • init_task_comments: creat the <div> for comments.

        • init_task_meta: create the <div> for meta information about the task (information about the automatic process).

Fill in the HTML content

  • refresh: a high-level function that triggers asynchronous queries for reports, overrides, and comments for all tasks.

    • refresh_task: a high-level function that triggers asynchronous queries for a report, override, and comments for a specific task.

      • refresh_task_report: a helper function that manages the XMLHttpRequest for a single task’s JSON report.

        • report_found: a helper function called if the task’s JSON report is found. Modifies HTML content accordingly by creating elements.

        • report_not_found: a helper function called if the task’s JSON report is not found. Modifies HTML content accordingly.

      • refresh_task_override: a helper function that manages the XMLHttpRequest for a single task’s JSON override packet.

        • override_found: a helper function called if a JSON override packet is found for this task.

        • override_not_found: a helper function called if a JSON override packet is not found for this task.

      • refresh_task_comment: a helper function that manages XMLHttpRequests for a single task’s comments. Note, because there may be multiple comments, this function recurses until it does not find the next comment file based on a version number suffix within GraceDb.

        • comment_found: a helper function called if a JSON comment packet with a particular version is found for this task.

        • comment_not_found: a helper function called if a JSON comment packet with a particular version is not found for this task.

Update the HTML content

  • refresh_button: iterates through tasks and questions to combine state information into higher summary bits. Also makes sure panels/buttons are colored correctly.

    • state2class: maps the state information into color scheme through html class specification using only tasks with at least one active toggle.

    • state_logic: defines how state information is combined.

  • activate_tasks: iterate through all tasks to display only those corresponding to the current selected tier and question with at least one active toggle (if toggles are specified).

  • activate_question: updates the active question and delegates to activate_tasks.

  • activate_tier: updates the active tier and delegates to activate_tasks.

  • flip_toggle: updates the toggle’s state (shown vs hidden) delegates to activate_tasks and refresh_buttons.