Form.js to support dynamic fields

Get Help
1

I’m trying to use the form.js example from here


to dynamically display form fields.

By adding form.js to my app I’m able to control the display of form fields but when I add form.js the launch button is not working. Nothing happens when I click on the launch button. I see this inside the javascript console

“An invalid form control with name=‘batch_connect_session_context[bc_num_slots]’ is not focusable.”

Any clue on where I messed it up ?

Thanks for your assistance,
–Krishna.

2

@KMuriki

Can you provide your entire form.js and form.yml that are at the root of your batch connect application?

I double-checked the deployed version that we have here at OSC and we’re using the same form.js

3

Mario, Thanks for your reply. Please find form.js and form.yml below.

'use strict'

/**
 *   Toggle the visibilty of a form group
 *  
 *   @param      {string}    form_id  The form identifier
 *   @param      {boolean}   show     Whether to show or hide
 */
function toggle_visibilty_of_form_group(form_id, show) {
  let form_element = $(form_id);
  let parent = form_element.parent();

  if(show) {
    parent.show();
  } else {
    form_element.val('');
    parent.hide();
  }
}

/**
 *  Toggle the visibilty of the SLURM queue fields
 *  
 *  interactive_mode: hidden
 *  interactive_mode_gpu: hidden
 *  batch_mode: visible
 */
function toggle_slurm_queues_field_visibility() {
  let type_ofuse = $("#batch_connect_session_context_type_ofuse");

  toggle_visibilty_of_form_group(
    '#batch_connect_session_context_job_name',
    type_ofuse.val() === 'batch'
  );
  toggle_visibilty_of_form_group(
    '#batch_connect_session_context_slurm_partition',
    type_ofuse.val() === 'batch'
  );
  toggle_visibilty_of_form_group(
    '#batch_connect_session_context_bc_account',
    type_ofuse.val() === 'batch'
  );
  toggle_visibilty_of_form_group(
    '#batch_connect_session_context_qos_name',
    type_ofuse.val() === 'batch'
  );
/*  toggle_visibilty_of_form_group(
 *   '#batch_connect_session_context_bc_num_slots',
 *   type_ofuse.val() === 'batch'
 * );
 */ 
}

/**
 * Sets the change handler for the batch type of usage select.
 */
function set_type_ofuse_change_handler() {
  let type_ofuse = $("#batch_connect_session_context_type_ofuse");
  type_ofuse.change(toggle_slurm_queues_field_visibility);
}

/**
 *  Install event handlers
 */
$(document).ready(function() {
  // Ensure that fields are shown or hidden based on what was set in the last session
  toggle_slurm_queues_field_visibility();
  
  set_type_ofuse_change_handler();
});

yaml

# Batch Connect app configuration file
#
# @note Used to define the submitted cluster, title, description, and
#   hard-coded/user-defined attributes that make up this Batch Connect app.
---

cluster: "lrc"
cacheable: false

form:
  - modules
  - extra_jupyter_args
  - type_ofuse
  - job_name
  - slurm_partition
  - bc_account
  - qos_name
  - bc_num_slots
  - bc_num_hours
  - bc_email_on_started

attributes:
  modules: "python/3.7"
  extra_jupyter_args: ""

  type_ofuse:
    widget: "select"
    label: "Type of use"
    help: "Choose the mode of running your Jupyter Server"
    cacheable: false
    options:
      - [ "interactive_mode, for exploration", "interactive" ]
      - [ "interactive_mode_gpu, for exploration", "interactive_gpu" ]
      - [ "batch_mode", "batch" ]

  bc_num_hours:
    label: "Wall Clock Time"
    help: "How many hours do you want to run this Jupyter Server for ?"

  job_name:
    label: "Name of the job"
    
  slurm_partition:
    widget: "select"
    label: "SLURM Partition"
    help: "Choose the name of the SLURM Partition in which you want to launch this Jupyter Server"
    cacheable: false
    options:
      - [ "alice", "alice" ]
      - [ "alsacc", "alsacc" ]

  bc_account:
    label: "SLURM Project/Account Name"
    help: "For non Lawrencium partitions you can leave this blank."

  qos_name:
    label: "SLURM QoS Name"
    help: "Most users can leave it black for default assignment, Lawrencium Condo users want to specify their condo QoS name"

  bc_num_slots:
    label: "Number of Nodes & Number of tasks (or cpus)"
    help: "Your job will be assigned this many number of nodes with this many cpus/tasks on each node"
4

bc_num_slots get’s generated as a ‘required’ field. Looks like when you hide it you also set it to blank and then when you try to submit, it’s complaining about the fact you’ve left a required field blank.

You should probably use a different field like num_cores and use that in your submit.yml.erb. In this file you’ll have to set -c/--cpus-per-task to the value and deal with empty values (or let Slurm choose the default and don’t pass -c/--cpus-per-task at all.

As an aside, thanks for letting us know about your use case! We eventually want to add these javascript helpers into the core distribution so folks like you can get this functionality out of the box, so it’s good to know your use case!

5

Thanks for the reply, that makes sense. I was planning to look into handling nodes/cores/tasks options next anyways and your suggestion of skipping bc_num_slots and coming up with my own variables totally makes sense.

6

Jeff,

In your bc_osc_ansys_workbench example in case you wanted to add a new filed to the form when user_license_provider is select to be ‘osc’, should it have worked if you add below inside the toggle_license_field_visibility() function ?

toggle_visibilty_of_form_group(
‘#batch_connect_session_context_SOME_NEW_FIELD’,
user_license_provider.val() === ‘osc’
);

Or it doesn’t work that way ?

Thanks,
Krishna.

7

Sure that would work, but you’d have to add that code snippet to a new handler. The current handler watches for changes to batch_connect_session_context_type_ofuse you’d need to add a new handler for changes to user_license_provider.