[form + mri_violations] Add DatetimeElement to filter fields by date and time

[maximemulder]

Brief summary of changes

Add a DatetimeElement to input datetime information, which can be used to filter table columns with both dates times.

I originally developed this custom input last thursday, but then learned that this kind of input already exists in HTML <input type="datetime-local" step="1" />. However, the HTML input only allows to enter complete datetimes, which is not what we want as a filter should work even with incomplete information.

I wrote my input in a separate file from jsx/Form to use a more modern technology stack (Typescript / functional React) from those. However, I still follow their structure somewhat closely.

Testing instructions (if applicable)

1. Go to MRI violations, filter entries by datetime.

Links to related issues

• Resolves #9091

[driusan]

1. If this has different behaviour than an HTML datetime element i don't like calling it the same thing. I recommend something like "PartialDateTime" or "DateTimePartial" to be clear that it supports partial dates.
2. It makes sense for this to be in a different file, but I think it would be a good idea to use directories as a namespace and put it somewhere like jsx/form/datetime[partial].tsx if existing wrappers will eventually be modified or new ones added in the future.

[maximemulder]

@driusan Agree with both suggestions.

While we are on the subject of naming, do you have any opinion on FooElement vs FooInput ? I used the first one to be consistent with existing code, but the second one looks more accurate to me 🤔.

[driusan]

@MaximeMulder I'm getting out of memory errors running make on this branch that I don't get on main. I don't think it's related to your changes, but can you rebase this branch to make sure?

(Also there's a conflict in Filter.js according to GitHub, so it needs to be re-based anyways.)

[driusan]

I managed to compile with target=mri_violations npm run compile and it's a little weird with partial dates, but I don't think it's a blocker.

The GUI is displaying it (in the filter) as if it should only be searching for a years prefix but it seems to be doing a substring search instead.

[regisoc]

Tested on my VM.

(loris-mri-python) user@machine-dev:~$ free -h
              total        used        free      shared  buff/cache   available
Mem:          2.8Gi       378Mi       2.3Gi       8.0Mi       188Mi       2.2Gi
Swap:         2.8Gi       372Mi       2.5Gi

Log:

(loris-mri-python) user@machine-dev:/var/www/Loris$ make dev
composer install
> mkdir -p project/libraries
Installing dependencies from lock file (including require-dev)
Verifying lock file contents can be installed on current platform.
Package operations: 0 installs, 48 updates, 0 removals
  - Downgrading symfony/polyfill-mbstring (v1.29.0 => v1.27.0): Extracting archive
  - Downgrading mtdowling/jmespath.php (2.7.0 => 2.6.1): Extracting archive
  - Downgrading guzzlehttp/psr7 (1.9.1 => 1.9.0): Extracting archive
  - Downgrading guzzlehttp/promises (2.0.2 => 1.5.2): Extracting archive
  - Downgrading symfony/deprecation-contracts (v3.4.0 => v3.2.0): Extracting archive
  - Downgrading psr/http-client (1.0.3 => 1.0.1): Extracting archive
  - Downgrading guzzlehttp/guzzle (7.8.1 => 7.5.0): Extracting archive
  - Downgrading aws/aws-crt-php (v1.2.4 => v1.0.2): Extracting archive
  - Downgrading aws/aws-sdk-php (3.301.3 => 3.253.0): Extracting archive
  - Downgrading composer/pcre (3.1.3 => 3.1.0): Extracting archive
  - Downgrading firebase/php-jwt (v6.10.0 => v6.9.0): Extracting archive
  - Downgrading google/recaptcha (1.3.0 => 1.2.4): Extracting archive
  - Downgrading psr/http-factory (1.0.2 => 1.0.1): Extracting archive
  - Downgrading symfony/polyfill-php80 (v1.29.0 => v1.27.0): Extracting archive
  - Downgrading symfony/polyfill-intl-normalizer (v1.29.0 => v1.27.0): Extracting archive
  - Downgrading symfony/polyfill-intl-grapheme (v1.29.0 => v1.27.0): Extracting archive
  - Downgrading symfony/polyfill-ctype (v1.29.0 => v1.27.0): Extracting archive
  - Downgrading symfony/string (v6.4.4 => v6.2.0): Extracting archive
  - Downgrading symfony/service-contracts (v3.4.1 => v3.1.1): Extracting archive
  - Downgrading symfony/console (v6.4.4 => v6.2.1): Extracting archive
  - Downgrading netresearch/jsonmapper (v4.4.1 => v4.1.0): Extracting archive
  - Downgrading microsoft/tolerant-php-parser (v0.1.2 => v0.1.1): Extracting archive
  - Downgrading composer/semver (3.4.0 => 3.3.2): Extracting archive
  - Downgrading phan/phan (5.4.3 => 5.4.1): Extracting archive
  - Downgrading php-http/promise (1.3.1 => 1.1.0): Extracting archive
  - Downgrading php-http/httplug (2.4.0 => 2.3.0): Extracting archive
  - Downgrading symfony/process (v6.4.4 => v6.2.0): Extracting archive
  - Upgrading php-webdriver/webdriver (dev-main 5d8e66f => dev-main 0fc796a): Extracting archive
  - Downgrading phpstan/phpstan (1.10.63 => 1.9.3): Extracting archive
  - Downgrading sebastian/resource-operations (3.0.4 => 3.0.3): Extracting archive
  - Downgrading sebastian/recursion-context (4.0.5 => 4.0.4): Extracting archive
  - Downgrading sebastian/global-state (5.0.7 => 5.0.5): Extracting archive
  - Downgrading sebastian/exporter (4.0.6 => 4.0.5): Extracting archive
  - Downgrading sebastian/environment (5.1.5 => 5.1.4): Extracting archive
  - Downgrading sebastian/diff (4.0.6 => 4.0.4): Extracting archive
  - Downgrading sebastian/cli-parser (1.0.2 => 1.0.1): Extracting archive
  - Downgrading theseer/tokenizer (1.2.3 => 1.2.1): Extracting archive
  - Downgrading nikic/php-parser (v5.0.2 => v4.15.2): Extracting archive
  - Downgrading sebastian/lines-of-code (1.0.4 => 1.0.3): Extracting archive
  - Downgrading sebastian/complexity (2.0.3 => 2.0.2): Extracting archive
  - Downgrading phpunit/php-code-coverage (9.2.31 => 9.2.20): Extracting archive
  - Downgrading doctrine/instantiator (1.5.0 => 1.4.1): Extracting archive
  - Downgrading phpspec/prophecy (v1.19.0 => v1.18.0): Extracting archive
  - Downgrading phar-io/manifest (2.0.4 => 2.0.3): Extracting archive
  - Downgrading myclabs/deep-copy (1.11.1 => 1.11.0): Extracting archive
  - Downgrading psr/http-server-handler (1.0.2 => 1.0.1): Extracting archive
  - Downgrading psr/http-server-middleware (1.0.2 => 1.0.1): Extracting archive
  - Downgrading squizlabs/php_codesniffer (3.9.0 => 3.7.1): Extracting archive
Generating autoload files
44 packages you are using are looking for funding.
Use the `composer fund` command to find out more!
PHP CodeSniffer Config installed_paths set to ../../slevomat/coding-standard
npm ci

> [email protected] postinstall
> node npm-postinstall.js


 ----- 
 >> Installing packages in /var/www/Loris/modules/electrophysiology_browser/jsx/react-series-data-viewer
 -----

added 88 packages, and audited 89 packages in 17s

found 0 vulnerabilities

added 1106 packages, and audited 1107 packages in 2m

328 packages are looking for funding
  run `npm fund` for details

13 high severity vulnerabilities

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.
tools/gen-version.sh
npm run compile

> [email protected] compile
> webpack --node-env=development


<--- Last few GCs --->

[22754:0x5cf4b90]   348926 ms: Mark-sweep (reduce) 2037.6 (2083.2) -> 2036.7 (2083.5) MB, 5087.1 / 0.0 ms  (average mu = 0.549, current mu = 0.140) allocation failure scavenge might not succeed
[22754:0x5cf4b90]   354824 ms: Mark-sweep (reduce) 2038.1 (2083.7) -> 2037.2 (2084.2) MB, 5830.4 / 0.0 ms  (average mu = 0.345, current mu = 0.011) allocation failure scavenge might not succeed


<--- JS stacktrace --->

FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory
 1: 0xb090e0 node::Abort() [webpack]
 2: 0xa1b70e  [webpack]
 3: 0xce19d0 v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [webpack]
 4: 0xce1d77 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [webpack]
 5: 0xe993e5  [webpack]
 6: 0xea90ad v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [webpack]
 7: 0xeabdae v8::internal::Heap::AllocateRawWithRetryOrFailSlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [webpack]
 8: 0xe6d022 v8::internal::Factory::AllocateRaw(int, v8::internal::AllocationType, v8::internal::AllocationAlignment) [webpack]
 9: 0xe6793c v8::internal::FactoryBase<v8::internal::Factory>::AllocateRawArray(int, v8::internal::AllocationType) [webpack]
10: 0xe67a15 v8::internal::FactoryBase<v8::internal::Factory>::NewFixedArrayWithFiller(v8::internal::Handle<v8::internal::Map>, int, v8::internal::Handle<v8::internal::Oddball>, v8::internal::AllocationType) [webpack]
11: 0x1015f72  [webpack]
12: 0x10164fb  [webpack]
13: 0xd43f09 v8::internal::Builtin_ArrayUnshift(int, unsigned long*, v8::internal::Isolate*) [webpack]
14: 0x15d9ef9  [webpack]
Aborted (core dumped)
make: *** [Makefile:21: fastdev] Error 134