Multiple fitrep comparison

ChaseWPDEV commented 1 year ago

Implementation of MultiFitrep compairson mode. Alongside some additional fixes with the Redux implementation.

twgardner2 commented 1 year ago

I'm getting webpack errors. Have a new laptop and just got everything re-installed and am able to npm install and build everything on main. Any ideas?:

[tom:~/Documents/navy_psr (multipleFitrepComparison)]$ npx webpack --mode development
asset ./dist/app.js 5.2 MiB [compared for emit] (name: app)
asset ./dist/style.min.css 7.28 KiB [compared for emit] (name: style)
asset ./dist/style.js 2.11 KiB [compared for emit] (name: style)
Entrypoint app 5.2 MiB = ./dist/app.js
Entrypoint style 9.39 KiB = ./dist/style.min.css 7.28 KiB ./dist/style.js 2.11 KiB
runtime modules 2.43 KiB 11 modules
orphan modules 10 KiB [orphan] 3 modules
modules by path ./node_modules/ 4.03 MiB
  javascript modules 4.02 MiB 753 modules
  json modules 3.33 KiB
    ./node_modules/pdf2json/package.json 1.38 KiB [built] [code generated]
    ./node_modules/levelup/package.json 1.96 KiB [built] [code generated]
modules by path ./src/ 84.3 KiB (javascript) 6.93 KiB (css/mini-extract)
  modules by path ./src/js/ 79.4 KiB 23 modules
  modules by path ./src/templates/ 4.82 KiB 7 modules
  modules by path ./src/scss/*.scss 50 bytes (javascript) 6.93 KiB (css/mini-extract)
    ./src/scss/styles.scss 50 bytes [built] [code generated]
    css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/scss/styles.scss 6.93 KiB [built] [code generated]
+ 9 modules

ERROR in ./src/js/data/providers/AbstractProvider.js 3:0-58
Module not found: Error: Can't resolve '@karmaniverous/serify-deserify' in '/home/tom/Documents/navy_psr/src/js/data/providers'
 @ ./src/js/data/providers/MultiDataProvider.js 3:0-54 5:39-55
 @ ./src/js/data/providers/DataProvider.js 3:0-56 15:26-43
 @ ./src/js/stores/records.js 4:0-62
 @ ./src/js/view/record-selector.js 3:0-65 10:47-55 10:89-97 12:17-25 46:8-26 47:17-25 52:34-42 56:8-26 57:17-25
 @ ./src/js/scripts.js 3:0-66 25:2-23

ERROR in ./src/js/stores/app-state.js 1:0-50
Module not found: Error: Can't resolve '@reduxjs/toolkit' in '/home/tom/Documents/navy_psr/src/js/stores'
 @ ./src/js/stores/view-settings.js 3:0-39 6:2-19 11:2-19 12:2-19 17:2-19 22:18-35 25:2-19 30:2-19 35:9-26 40:6-23 44:2-19 49:2-19 58:4-21 62:9-26
 @ ./src/js/scripts.js 5:0-57 30:4-16

ERROR in ./src/js/stores/app-state.js 2:0-71
Module not found: Error: Can't resolve '@karmaniverous/serify-deserify' in '/home/tom/Documents/navy_psr/src/js/stores'
 @ ./src/js/stores/view-settings.js 3:0-39 6:2-19 11:2-19 12:2-19 17:2-19 22:18-35 25:2-19 30:2-19 35:9-26 40:6-23 44:2-19 49:2-19 58:4-21 62:9-26
 @ ./src/js/scripts.js 5:0-57 30:4-16

ERROR in ./src/js/stores/slices/record-slice.js 1:0-47
Module not found: Error: Can't resolve '@reduxjs/toolkit' in '/home/tom/Documents/navy_psr/src/js/stores/slices'
 @ ./src/js/stores/app-state.js 3:0-50 8:13-26
 @ ./src/js/stores/view-settings.js 3:0-39 6:2-19 11:2-19 12:2-19 17:2-19 22:18-35 25:2-19 30:2-19 35:9-26 40:6-23 44:2-19 49:2-19 58:4-21 62:9-26
 @ ./src/js/scripts.js 5:0-57 30:4-16

ERROR in ./src/js/stores/slices/view-slice.js 1:0-56
Module not found: Error: Can't resolve '@karmaniverous/serify-deserify' in '/home/tom/Documents/navy_psr/src/js/stores/slices'
 @ ./src/js/stores/view-settings.js 4:0-190 6:20-35 11:20-29 12:20-31 17:20-35 25:20-31 30:20-37 44:20-35 49:20-36 57:64-83 57:88-106
 @ ./src/js/scripts.js 5:0-57 30:4-16

ERROR in ./src/js/stores/slices/view-slice.js 2:0-47
Module not found: Error: Can't resolve '@reduxjs/toolkit' in '/home/tom/Documents/navy_psr/src/js/stores/slices'
 @ ./src/js/stores/view-settings.js 4:0-190 6:20-35 11:20-29 12:20-31 17:20-35 25:20-31 30:20-37 44:20-35 49:20-36 57:64-83 57:88-106
 @ ./src/js/scripts.js 5:0-57 30:4-16

ERROR in ./src/js/stores/view-settings.js 1:0-58
Module not found: Error: Can't resolve '@karmaniverous/serify-deserify' in '/home/tom/Documents/navy_psr/src/js/stores'
 @ ./src/js/scripts.js 5:0-57 30:4-16

7 errors have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

webpack 5.76.1 compiled with 7 errors in 4394 ms

ChaseWPDEV commented 1 year ago

@twgardner2 Probably the node version. Use 16.13.2 (forgot to mention that) or 18.15 -- figured we were due to jump to one of the current LTS.

twgardner2 commented 1 year ago

[tom:~/Documents/navy_psr (multipleFitrepComparison)]$ node -v
v18.15.0

ChaseWPDEV commented 1 year ago

Looks like you're missing some node_modules Have you run npm i recently?

twgardner2 commented 1 year ago

yeah, I think that's the problem (missing modules, that is). I've run npm install, but had to use some option (--no-dependencies?) earlier just to get it to exit with status 0.

Here is without options:

[tom:~/Documents/navy_psr (multipleFitrepComparison)]$ npm i
npm WARN deprecated core-js-pure@3.20.2: core-js-pure@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js-pure.
npm ERR! code 1
npm ERR! path /home/tom/Documents/navy_psr/node_modules/node-sass
npm ERR! command failed
npm ERR! command sh -c node scripts/build.js
npm ERR! Building: /usr/bin/node /home/tom/Documents/navy_psr/node_modules/node-gyp/bin/node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp verb cli [
npm ERR! gyp verb cli   '/usr/bin/node',
npm ERR! gyp verb cli   '/home/tom/Documents/navy_psr/node_modules/node-gyp/bin/node-gyp.js',
npm ERR! gyp verb cli   'rebuild',
npm ERR! gyp verb cli   '--verbose',
npm ERR! gyp verb cli   '--libsass_ext=',
npm ERR! gyp verb cli   '--libsass_cflags=',
npm ERR! gyp verb cli   '--libsass_ldflags=',
npm ERR! gyp verb cli   '--libsass_library='
npm ERR! gyp verb cli ]
npm ERR! gyp info using node-gyp@7.1.2
npm ERR! gyp info using node@18.15.0 | linux | x64
npm ERR! gyp verb command rebuild []
npm ERR! gyp verb command clean []
npm ERR! gyp verb clean removing "build" directory
npm ERR! gyp verb command configure []
npm ERR! gyp verb find Python Python is not set from command line or npm configuration
npm ERR! gyp verb find Python Python is not set from environment variable PYTHON
npm ERR! gyp verb find Python checking if "python3" can be used
npm ERR! gyp verb find Python - executing "python3" to get executable path
npm ERR! gyp verb find Python - executable path is "/home/tom/.pyenv/versions/3.11.1/bin/python3"
npm ERR! gyp verb find Python - executing "/home/tom/.pyenv/versions/3.11.1/bin/python3" to get version
npm ERR! gyp verb find Python - version is "3.11.1"
npm ERR! gyp info find Python using Python version 3.11.1 found at "/home/tom/.pyenv/versions/3.11.1/bin/python3"
npm ERR! gyp verb get node dir no --target version specified, falling back to host node version: 18.15.0
npm ERR! gyp verb command install [ '18.15.0' ]
npm ERR! gyp verb install input version string "18.15.0"
npm ERR! gyp verb install installing version: 18.15.0
npm ERR! gyp verb install --ensure was passed, so won't reinstall if already installed
npm ERR! gyp verb install version is already installed, need to check "installVersion"
npm ERR! gyp verb got "installVersion" 9
npm ERR! gyp verb needs "installVersion" 9
npm ERR! gyp verb install version is good
npm ERR! gyp verb get node dir target node version installed: 18.15.0
npm ERR! gyp verb build dir attempting to create "build" dir: /home/tom/Documents/navy_psr/node_modules/node-sass/build
npm ERR! gyp verb build dir "build" dir needed to be created? /home/tom/Documents/navy_psr/node_modules/node-sass/build
npm ERR! gyp verb build/config.gypi creating config file
npm ERR! gyp verb build/config.gypi writing out config file: /home/tom/Documents/navy_psr/node_modules/node-sass/build/config.gypi
npm ERR! (node:155098) [DEP0150] DeprecationWarning: Setting process.config is deprecated. In the future the property will be read-only.
npm ERR! (Use `node --trace-deprecation ...` to show where the warning was created)
npm ERR! gyp verb config.gypi checking for gypi file: /home/tom/Documents/navy_psr/node_modules/node-sass/config.gypi
npm ERR! gyp verb common.gypi checking for gypi file: /home/tom/Documents/navy_psr/node_modules/node-sass/common.gypi
npm ERR! gyp verb gyp gyp format was not specified; forcing "make"
npm ERR! gyp info spawn /home/tom/.pyenv/versions/3.11.1/bin/python3
npm ERR! gyp info spawn args [
npm ERR! gyp info spawn args   '/home/tom/Documents/navy_psr/node_modules/node-gyp/gyp/gyp_main.py',
npm ERR! gyp info spawn args   'binding.gyp',
npm ERR! gyp info spawn args   '-f',
npm ERR! gyp info spawn args   'make',
npm ERR! gyp info spawn args   '-I',
npm ERR! gyp info spawn args   '/home/tom/Documents/navy_psr/node_modules/node-sass/build/config.gypi',
npm ERR! gyp info spawn args   '-I',
npm ERR! gyp info spawn args   '/home/tom/Documents/navy_psr/node_modules/node-gyp/addon.gypi',
npm ERR! gyp info spawn args   '-I',
npm ERR! gyp info spawn args   '/home/tom/.cache/node-gyp/18.15.0/include/node/common.gypi',
npm ERR! gyp info spawn args   '-Dlibrary=shared_library',
npm ERR! gyp info spawn args   '-Dvisibility=default',
npm ERR! gyp info spawn args   '-Dnode_root_dir=/home/tom/.cache/node-gyp/18.15.0',
npm ERR! gyp info spawn args   '-Dnode_gyp_dir=/home/tom/Documents/navy_psr/node_modules/node-gyp',
npm ERR! gyp info spawn args   '-Dnode_lib_file=/home/tom/.cache/node-gyp/18.15.0/<(target_arch)/node.lib',
npm ERR! gyp info spawn args   '-Dmodule_root_dir=/home/tom/Documents/navy_psr/node_modules/node-sass',
npm ERR! gyp info spawn args   '-Dnode_engine=v8',
npm ERR! gyp info spawn args   '--depth=.',
npm ERR! gyp info spawn args   '--no-parallel',
npm ERR! gyp info spawn args   '--generator-output',
npm ERR! gyp info spawn args   'build',
npm ERR! gyp info spawn args   '-Goutput_dir=.'
npm ERR! gyp info spawn args ]
npm ERR! Traceback (most recent call last):
npm ERR!   File "/home/tom/Documents/navy_psr/node_modules/node-gyp/gyp/gyp_main.py", line 51, in <module>
npm ERR!     sys.exit(gyp.script_main())
npm ERR!              ^^^^^^^^^^^^^^^^^
npm ERR!   File "/home/tom/Documents/navy_psr/node_modules/node-gyp/gyp/pylib/gyp/__init__.py", line 670, in script_main
npm ERR!     return main(sys.argv[1:])
npm ERR!            ^^^^^^^^^^^^^^^^^^
npm ERR!   File "/home/tom/Documents/navy_psr/node_modules/node-gyp/gyp/pylib/gyp/__init__.py", line 662, in main
npm ERR!     return gyp_main(args)
npm ERR!            ^^^^^^^^^^^^^^
npm ERR!   File "/home/tom/Documents/navy_psr/node_modules/node-gyp/gyp/pylib/gyp/__init__.py", line 629, in gyp_main
npm ERR!     [generator, flat_list, targets, data] = Load(
npm ERR!                                             ^^^^^
npm ERR!   File "/home/tom/Documents/navy_psr/node_modules/node-gyp/gyp/pylib/gyp/__init__.py", line 150, in Load
npm ERR!     result = gyp.input.Load(
npm ERR!              ^^^^^^^^^^^^^^^
npm ERR!   File "/home/tom/Documents/navy_psr/node_modules/node-gyp/gyp/pylib/gyp/input.py", line 3021, in Load
npm ERR!     LoadTargetBuildFile(
npm ERR!   File "/home/tom/Documents/navy_psr/node_modules/node-gyp/gyp/pylib/gyp/input.py", line 411, in LoadTargetBuildFile
npm ERR!     build_file_data = LoadOneBuildFile(
npm ERR!                       ^^^^^^^^^^^^^^^^^
npm ERR!   File "/home/tom/Documents/navy_psr/node_modules/node-gyp/gyp/pylib/gyp/input.py", line 239, in LoadOneBuildFile
npm ERR!     build_file_contents = open(build_file_path, "rU").read()
npm ERR!                           ^^^^^^^^^^^^^^^^^^^^^^^^^^^
npm ERR! ValueError: invalid mode: 'rU' while trying to load binding.gyp
npm ERR! gyp ERR! configure error 
npm ERR! gyp ERR! stack Error: `gyp` failed with exit code: 1
npm ERR! gyp ERR! stack     at ChildProcess.onCpExit (/home/tom/Documents/navy_psr/node_modules/node-gyp/lib/configure.js:351:16)
npm ERR! gyp ERR! stack     at ChildProcess.emit (node:events:513:28)
npm ERR! gyp ERR! stack     at ChildProcess._handle.onexit (node:internal/child_process:291:12)
npm ERR! gyp ERR! System Linux 5.19.0-35-generic
npm ERR! gyp ERR! command "/usr/bin/node" "/home/tom/Documents/navy_psr/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
npm ERR! gyp ERR! cwd /home/tom/Documents/navy_psr/node_modules/node-sass
npm ERR! gyp ERR! node -v v18.15.0
npm ERR! gyp ERR! node-gyp -v v7.1.2
npm ERR! gyp ERR! not ok 
npm ERR! Build failed with error code: 1

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/tom/.npm/_logs/2023-03-12T21_36_58_465Z-debug-0.log

ChaseWPDEV commented 1 year ago

What's your npm -v ?

twgardner2 commented 1 year ago

I just installed npm on this new machine this weekend. I think everything is decently up-to-date.

[tom:~/Documents/navy_psr (multipleFitrepComparison)]$ npm -v
9.5.0

ChaseWPDEV commented 1 year ago

Could be that the issue is on python 3.11. Is there an easy way for you to downgrade to 3.10?

twgardner2 commented 1 year ago

I should be able to do that. I'm using pyenv, so you may see a new config file show up, but if you're not using pyenv, it should be a no-op for you.

twgardner2 commented 1 year ago

Dude, that was it!

Ok, I have your branch up and running. I see the dashed yellow box, but what does it do?

ChaseWPDEV commented 1 year ago

OK, in parallel, and reviewing the code a bit more I went ahead and ran npm update and that should solve it for any env (removes some of the older libraries).

The dashed yellow box should be around "Sample-I-AM" the name of our sample sailor. Once you start to upload multiple Fitreps, the yellow box(es) become consequential/useful. (Sample gets clobbered on the first upload, assuming no one really cares about the sample)

ChaseWPDEV commented 1 year ago

rather than run npm update, you can just pull 1e198e1 and npm i from there to get the latest.

twgardner2 commented 1 year ago

Ah, I did upload another FITREP expecting it to do something, but I need to upload 2?

ChaseWPDEV commented 1 year ago

yup -- 2 real(ish) ones

twgardner2 commented 1 year ago

Oh wow, that's doing a lot of stuff! I gotta go eat dinner, but will check it out some more.

twgardner2 commented 1 year ago

Oh, also looks like a test is failing...

ChaseWPDEV commented 1 year ago

Yeah, that makes sense -- node 12 should probably be dropped from the test list.

ChaseWPDEV commented 1 year ago

Also, If you haven't already, I strongly recommend adding Redux DevTools to your browser. With this latest rev, it will let you monitor the state and its changes as you interact with the app.

ChaseWPDEV commented 1 year ago

@twgardner2 Heads up: found and fixed a bug on this PR -- this branch's head is now at commit 0c03df0

twgardner2 commented 1 year ago

Oh nice. Squashing bugs. I've been really bad about reviewing this, but I promise I've looked at it. I think it's really cool that you've made it work, but I keep trying to think of a way to make the actual comparison more visually clear. There's probably just a ceiling to how well you can discern multiple PSRs while looking at them simultaneously. What would you think about the multiple PSR feature just showing the normal viz but adding them vertically?

On Mon, Apr 3, 2023 at 12:33 PM ChaseWPDEV @.***> wrote:

@twgardner2 https://github.com/twgardner2 Heads up: found and fixed a bug on this PR -- this branch's head is now at commit 0c03df0 https://github.com/twgardner2/navy_psr/commit/0c03df0f0292aba17da135fc1e9d9c7b04bf73f8

— Reply to this email directly, view it on GitHub https://github.com/twgardner2/navy_psr/pull/51#issuecomment-1494637368, or unsubscribe https://github.com/notifications/unsubscribe-auth/AGJVYJ74UXVHHEXW3XIKWL3W7L3WVANCNFSM6AAAAAAVVXZI5U . You are receiving this because you were mentioned.Message ID: @.***>

ChaseWPDEV commented 1 year ago

I tinkered with that -- vertical visual comparison of vertical data doesn't seem to add much value (at least to my eye:

ChaseWPDEV commented 1 year ago

@twgardner2 What if, on the overlay comparison mode, I add the associated last name just to the right of the last fitrep bullet? I could also have it fade in/ fade out along with the rest of that individual's graph.

twgardner2 commented 1 year ago

I think that would help.

I'm basically onboard with merging, but I think I found some buggy behavior, let me know if that's what this is:

Steps to replicate: 1) Load fresh app, viewing the SAMPLE-I-AM PSR 2) Load two real PSRs (I'm doing mine and Erin's) 3) Switch to 'Multi-View'

When I hover over the second PSR's chicklet, it brings its data to the forefront, but hovering over the first one doesn't do so. Is that on purpose?

ChaseWPDEV commented 1 year ago

Bug fixed and tailing last name added.

I also realized it probably not obvious that you can toggle records on/off in the multi-comparison view by clicking on the chicklet (good for quickly moving around between 3 or more), working on a way to make that more obvious.

ChaseWPDEV commented 1 year ago

@twgardner2 Toggle indicator for Multi view added. I think this (might) bring us up to a release candidate on this one.

twgardner2 commented 1 year ago

Ok, I may have found two more things:

1) If I load my PSR, then Erin's PSR, then click over to multi-view and have my mouse hovering over nothing (just whitespace on the page, neither chicklet), most of the command/RS bars go away, except for a relic that appears to be from my PSR. It seems to always be there, even when the bars are supposed to be blank. Is that what's going on?

2) I like the checkboxes on the chicklets (those are new, right?), although they seem to be disabled, no? My first impression is that I should toggle the PSR by clicking specifically on the checkbox, but then it doesn't change. What do you think of that? I have found that if I do a lot of toggling, then the chicklets seem to get stuck and stop working. Have you seen this?

ChaseWPDEV commented 1 year ago

@twgardner2 Right you are:

The first one was a missing css rule: added.
The whole chicklet is a click space to toggle a record, but the checkbox click events weren't bubbling correctly -- fixed.

ChaseWPDEV commented 1 year ago

aaaannnnddd... a fix to the chicklets breaking after a lot of toggling (had to do with trying to recover from an empty data set)

twgardner2 commented 1 year ago

You're a machine!

twgardner2 / navy_psr

Multiple fitrep comparison #51