Column Widgets

Basic column type widgets

Overview

Column widgets are used for defining and customizing structured data. They are similar to the data types in MySQL, but are more powerful in that functions can be attached.

Labii ELN & LIMS currently provides these widgets:

Category

Widget

Type

Description

Form

Subtitle

Column

Add a form subtitle

Form

Text

Column

Edit text value

Form

MultilineText

Column

Edit text with multiline

Form

Number

Column

Edit numeric value

Form

Date

Column

Edit date value

Form

Time

Column

Pick a time

Form

DateTime

Column

Combination of Date and Time

Form

TimeStamp

Column

Automated time stamp

Form

Appointment

Column

Add DateTime to Calendar

Form

Boolean

Column

Edit boolean value

Form

Select

Column

Choose a value from a dropdown

Form

MultiSelect

Column

Choose multiple values from a dropdown

Form

ForeignKey

Column

Link to one other record

Form

ForeignKeys

Column

Link to many other records

Form

Member

Column

Choose a member

Form

Members

Column

Choose of many members

Form

Image

Column

Display image

Form

Secret

Column

Display sensitive value as *

Form

NestedFields

Column

Add multiple form items

File

File Path

Column

Store the file path of a file

File

File Size

Column

Display file size of a file

Column

Column Citation

Column

Display column data from one other record

Calculation

Formula

Column

Display output of a formula

Calculation

Numbering

Column

Generate a numbering ID

Calculation

RowCount

Column

Display count of a query

Calculation

Consumption

Column

Display remaining volume

Chemistry

Chemical Structure

Column

Display chemical structure

Chemistry

SMILES Structure

Column

Display chemical structure from SMILES

Chemistry

Molecular Formula

Column

Display molecular weight of a formula

Reference Manager

PMID

Column

Store PMID and sync other fields with PubMed

Subtitle

The Subtitle widget does not store any data. It adds a subtitle to the form.

Text

Use this widget to edit text values. There is no length limit on how much text you can provide.

MultilineText

Use this widget to edit text with multiple lines.

Number

Use this widget to edit the numeric value. The value can be positive (+), negative (-), integer, or float.

Configuration:

{
"constraints": { # (optional) - the additional constraints to the value.
"min": 0, # (optional) - the allowed minimal value
"max": 100 # (optional) - the allow maximal value
},
"warnings": { # (optional) - flag the value when all conditions are met.
"gte": 0, # (optional) - greater than or equal to
"gt": 0, # (optional) - greater than
"lte": 100, # (optional) - less than or equal to
"lt": 100, # (optional) - less than
},
"format": { # the number in the wNumb format.
"mark": '.',
"thousand": ',',
"prefix": '$'
} # Learn more at https://refreshless.com/wnumb/
}

Date

Use this widget to edit the date value. A date picker is provided to select the date.

Time

Use this widget to pick a time. Currently, Labii supports time in 30-min intervals.

DateTime

Use this widget to pick a date and time. This widget is a combination of the Date and Time widget.

Default value:

{
"date": "2018-01-01",
"time": "10:23"
}

TimeStamp

This widget will generate an automatic time stamp in the ISO format. Click the reload button to refresh the timestamp.

Configuration:

{
"should_auto_update_when_empty": true, # default to true
# If true, the widget will perform live calculation when the data is empty
# If false, the results will not be calculated on default
}

Appointment

Use this widget to set an appointment and add the appointment calendar. Currently, Google calendar is supported.

Default value:

{
"date_start": "",
"time_start": "",
"date_end": "",
"time_end": ""
}

Boolean

Use this widget to edit the boolean value.

Select

Use this widget to choose a value from the dropdown list. The items of the dropdown list are defined in the default value field of column settings. The widget can be used for controlled vocabulary.

Configuration

# Provide list of options, one item per line
Option 1
Option 2
...
# Provide list of options, separated by ','
Option 1, Option 2, ...
# Provide both label and value of options, use '__' to separate
o1__Option 1
o2__Option 2
...

Default value

{"sid": "xxx", "name": "xxx"} # Python json
Option 1 # the value of a option

MultiSelect

Use this widget to choose multiple values from the dropdown list. It is identical to the Select widget except that more than one value can be selected.

The configuration is identical to the Select widget.

Default value

[
{"sid": "xxx", "name": "xxx"},
{"sid": "xxx", "name": "xxx"},
] # Python json
Option 1, Option 2 # multiple values

ForeignKey

Use this widget to link to one other record. The linked record is clickable.

Configuration

EP,SP # List of Unique Code separated by ','.
# Leave it empty to include all tables

Default value

{"sid": "xxx", "name": "xxx"} # Python json

ForeignKeys

Use this widget to link to many other records. The usage is the same as ForeignKey.

The configuration of ForeignKeys is identical to ForeignKey

Default value

[
{"sid": "xxx", "name": "xxx"},
{"sid": "xxx", "name": "xxx"},
] # Python json

Member

Use this widget to choose a member. Use this widget to assign a task to a member.

  • Only the active member is choosable.

  • The widget is searchable. If you did not find the member you want, type in a name at the top of the dropdown.

Configuration

{
"team__sid": "xxx", # optional team sid to limit team member to be selected
"should_notify_member": true,
# should send an email to notify user, default to false, optional
"subject": "xxx", # optional email subject
"body": "xxx", # optional email body
# both subject and body support the following variables
# {{UID}}
# {{NAME}}
# {{FROM_NAME}}
# {{ROW}}
}

Default value

{
"name": "", # name of the member
"sid": "" # sid of the personnel
}

Members

Use this widget to choose multiple members. The usage is saved to the Member widget.

The configuration is identical to Member

Default value

[
{
"name": "", # name of the member
"sid": "" # sid of the personnel
}
]

Image

Use this widget to display the image of a record. For example, display the molecular structure of a chemical.

To delete the image, click the edit icon and then click X.

Secret

Use this widget to hide sensitive data. The value will be displayed as "****". Use it for password or salary, etc.

To display the hidden value, click the "view" icon to display.

NestedFields

Use NestedFields to track more than one item. For example, you can use NestedFields to track how many books are ordered:

  • Book 1, ordered 10

  • Book 2, ordered 5

Configuration

{ # use the propterties from https://react-jsonschema-form.readthedocs.io/en/latest/
"properties": {
"book": {
"type": "string",
"title": "Book",
"description": "Select a book.",
"enum": ["Book 1", "Book 2"],
"enumNames": ["Book 1", "Book 2"],
"widget": "MaterialFormSelect",
"default": "Book 1"
},
"quantity": {
"type": "number",
"title": "Quantity",
"description": "The quantity book to order.",
"widget": "MaterialFormNumber",
"min": 1,
"default": 1
}
},
"required": [
"test",
"quantity"
]
}

File Path

Use this widget to display the path of a file. This widget is read-only and used only for file table.

File Size

Use this widget to display the size of a file. This widget is only used for file table.

Column Citation

Use this widget to display the column data from one other record. A typical use case is to display customer information when creating an invoice/quote.

Formula

Use this widget to display value calculated based on a formula. The formula shall be defined in the Default Value of the column.

Configuration

{
"rows": [
"column_sid", # The column sid of ForeignKey, ForeignKeys, NestedFields, optional
],
"counts": [
"table_sid__column_sid", # count based on table and column
"table_sid__column_sid__lte__date_created", # count includes the datetime
],
"formula": "", # the formula, see the Syntax below
# data[column_sid], value of a column of current row
# data[row_sid__column_sid], value of column of a row
# count[table_sid__column_sid], the count value
"format": {}, # the number in the wNumb format.
# Learn more at https://refreshless.com/wnumb/
"should_auto_update": false, # default to false.
# If true, the widget will perform live calculation
# If false, the user have to click reload to update the value
"should_auto_update_when_empty": true, # default to true.
# If true, the widget will perform live calculation when the data is empty
# If false, the results will not be calculated on default
}

Syntax

data[Field 1] + data[Field 2] + data[Source column sid__Target solumn sid]

Wheres, Field is the SID of a column. For example:

  • data[8adg0a40x52520ejotyDI] + data[69be0a40x52508chmrwBG]

  • data[8adg0a40x52520ejotyDI].substring(1,2)

  • data[8adg0a40x52520ejotyDI].substring(1,3) == "ATCG" ? "Good" : "Bad"

  • data[8adg0a40x52520ejotyDI__69be0a40x52508chmrwBG].substring(1,2)

Operator

  • + Addition, a + b

  • - Subtraction,

  • * Multiplication

  • ** Exponentiation (ES2016)

  • / Division

  • % Modulus (Remainder)

  • sum - get sum value of array

  • mean - get mean value of array

  • sd - get standard deviation of array

  • se - get standard error of array

  • Priority calculate with () is supported, (100 + 50) * a;

  • If condition: true ? a : b, if the condition is true, then return a, else, return b

  • Substring: string.substring(start, end)

  • Case:

    • Upper: str.toUpperCase()

    • Lower: str.toLowerCase()

  • Date: new Date(dateString), learn more at here.

  • Math:

    • abs(x) Returns the absolute value of x

    • acos(x) Returns the arccosine of x, in radians

    • asin(x) Returns the arcsine of x, in radians

    • atan(x) Returns the arctangent of x as a numeric value between -PI/2 and PI/2 radians

    • atan2(y, x) Returns the arctangent of the quotient of its arguments

    • ceil(x) Returns the value of x rounded up to its nearest integer

    • cos(x) Returns the cosine of x (x is in radians)

    • exp(x) Returns the value of Ex

    • floor(x) Returns the value of x rounded down to its nearest integer

    • log(x) Returns the natural logarithm (base E) of x

    • max(x, y, z, ..., n) Returns the number with the highest value

    • min(x, y, z, ..., n) Returns the number with the lowest value

    • pow(x, y) Returns the value of x to the power of y

    • random() Returns a random number between 0 and 1

    • round(x) Returns the value of x rounded to its nearest integer

    • sin(x) Returns the sine of x (x is in radians)

    • sqrt(x) Returns the square root of x

    • tan(x) Returns the tangent of an angle

Numbering

Use this widget to generate your own ID with auto-increment. The Numbering can be generated automatically and can also be manually updated.

Click the reload button to update the ID

Configuration

{
"format": "YY-ID", # required, the format of the id
# YYYY - 2020, 4 digits of year
# YY - 20, 2 digits of year
# MM - 07, 2 digits of month
# DD - 01, 2 digits of day
# ID, the serial id
# FOREIGNKEYCOLUMN - refer to the data from a foreignkey
"reset_month": 10, # optional, the month to reset the id
"reset_day": 1, # optional, the day to reset the id
"foreignkey": "xxx", # the foreignkey column to refer, required when FOREIGNKEYCOLUMN is used
"column": "xxx", # the column of foreignkey, required when FOREIGNKEYCOLUMN is used
"reset_column": "xxx", # optional, the column to reset the ID
"digits": 4, # optional, number of digits of ID to display
}

The default value will be ignored for the ID widget.

RowCount

Use this widget to display the count of a Row. For example, the number of biospecimens generated from a host.

To make it work, provide the query string into column configuration.

Configuration

{
"query": "name__icontains=test&table__name_singular=experiment",
# paste the query
# Some variables can be added to the link. The widget will replace it for you:
# {{ROW:SID}}, the sid of the current record.
"should_auto_update": false, # default to false.
# If true, the widget will perform live calculation
# If false, the user have to click reload to update the value
}

Consumption

Use this widget to display the remaining volume of a sample or reagent.

Configuration:

  • Column "Volume Value" with Number widget

  • Table "Consumption"

    • Column "Sample" or "Reagent" with ForeignKey widget

    • Column "Amount" with Number widget

{
"volume__sid": "RUX10a40x94dcTY49dins",
# required, the sid of the column "Volume Value"
"consumption_sample__sid": "KNQT0a40x94d5MRW27bgl",
# required, the sid of the column "Sample" or "Reagent" from the consumption table
"consumption_amount__sid": "MPSV0a40x94d7OTY49din",
# required, the sid of the column "Amount" from the consumption table
"threshold": 10,
# the color of the value will turn red if the remaining value lower than the threshold
"should_auto_update": true, # default to true.
# If true, the widget will perform live calculation
# If false, the user have to click reload to update the value
}

Default value:

{
"value": 10,
"is_low": false
}

Chemical Structure

Use this widget to display the chemical structure. This widget could not create/draw chemical structure, it can only display the chemical structure from a chemical drawing section.

SMILES Structure

This widget uses Smiles Drawer to draw the chemical structure from SMILES.

Molecular Formula

This widget can:

  1. Generate molecular formula from the name

  2. Generate molecular weight

  3. Generate SMILES (Simplified molecular-input line-entry system)

  4. Generate molecular structure

Before using this widget, these columns need to be created, and the corresponding name_system needs to be selected. The default chemical table will create these columns automatically.

  • molecular_weight

  • SMILES

  • molecular_structure

Some function of chemcalc is used for this widget.

ChemCalc: a building block for tomorrow’s chemical infrastructure. Patiny, Luc; Borel, Alain Journal of Chemical Information and Modeling 2013. DOI:10.1021/ci300563h

Click the Generate button to get the molecular formula directly from the name.

Click the convert icon to generate the molecular weight, SMILES, and molecular structure.

PMID

This widget will download all related metadata from Pubmed.