wishlist: Angular Reports Interface

[Andrea Neiman]

This work is sponsored by King County Library System and developed by Equinox.

We will be reimplementing the main Reports interface in Angular, according to the specification here:

https://yeti.equinoxoli.org/dev/public/techspecs/angular_reports.pdf

While we took a different approach from bug 1918965 I'm marking that one as duplicate for Launchpad-housekeeping purposes.

[Jennifer Pringle (jpringle-u)]

When the interface is re-written I'd like to suggest that on the Layout tab of the Report Definition (page 10 of the specs) "Calculate grouping subtotals" check box is moved so that it doesn't fall in the middle of the output options. While it affects how the output displays it isn't actually an output option the same way Excel, CSV, and HTML are.

[Mike Rylander (mrylander)]

Huzzah! It's here! Please see the top 8 commits of the branch at

https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/miker/lp-1993823-angular-reporter

for all the fun!

[Mike Rylander (mrylander)]

I've force-pushed an updated branch to the same coordinates that does 2 things:

1) update the AngJS nav bar menu entry for the main reporter to this new implementation
2) clears template-level filter values more aggressively so they don't leak into reports

PR stands!

[Mike Rylander (mrylander)]

I've updated the branch with one additional commit. Part of the work was synchronizing the eg-tree implementation between the Custom Org Tree work and the reporter. That caused a need for one extra bit of explicit instantiation data, which is there now.

If/when this is merged, that last commit can just be squashed into the main big commit.

[Andrea Neiman (aneiman)]

Docs are here, to facilitate testing:

https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/collab/miker/Docs_Angular_Reports

[Susan Morrison (smorrison425)]

This is so exciting! The more I play around with it, the more I love the new layout. It's so much easier to use, and I love the report and output list options. Here are some comments (some are more stylistic/based on personal preference and may be due to the parameters of Angular, so please feel free to disregard those):

- I don't see the option to enable nullability.
- In the Edit Report page, I think the "Save and schedule report" language is a bit confusing. I think it may be helpful to change that to "Save as New" like in the current reporter or maybe "Save and schedule new report."
- When I clone a template but then cancel/close, the template is still created.
- In the Clone Report and Edit Report pages (which default to the "Filters tab"), if I click on the "Columns" or "Layout and Scheduling" tab names first instead of clicking the "Next"/"Previous" buttons, the buttons don’t work. If I click back on the "Filters" tab and then use the "Next"/"Previous" buttons, they do work, and then it doesn’t seem to matter whether I click on the tab name or the buttons to navigate between tabs.
- Is it possible to bold/highlight the column and filter hints in some way? This may just be me getting used to the new layout, but those hints get lost to me since they look like all the other text.
- In the field trees within a template, it’s a little confusing that there are checkboxes next to the main parent field names since clicking on those don't do anything. Can those be removed?
- Is it necessary to have both the “Clone Report” and “Edit Report” options?
- In the Output actions menu, there is an option to "Clone Report." Should that be changed to "Clone Output" or "Edit Output"?
- In the folder menus, is there a reason for both the larger expand/collapse arrows that are in addition to the arrow next to the folder name? (screenshot attached)
- When I'm selecting subfolders across the Templates, Reports, and Outputs folders, previous selections stay highlighted. For example, if I have a "Circulation" folder selected under Templates and I then select the "Circulation" folder under Reports, the Templates "Circulation" folder stays highlighted. This may be intentional and is not an issue, just something I noticed.

[Elizabeth Davis (elidavis)]

The search feature is amazing! You can now see the owner and the folder it lives it.

- When creating a new report with a template that has a filter that uses the In List operator, you have check the box of the option. The list options look clickable/linkable, but are not. Is it possible to have them selectable by clicking the name?

- When creating a new report the Operators and Transforms on the Filters tab still have the drop-down arrow displaying and make me think I can change that when setting up the report but are not editable.

- When creating a new report and you forget a filter value there is no warning message.

[Christine Burns (christine-burns)]

Overall this looks great!

I've noted a couple issues:

1. The interface doesn't reload when operator changes -
 - Log in with the admin account - create a folder, clone template etc -> Change operator -> Login as br1wrandall -> reload Reports interface but it still shows folders and info for admin account
 - If you log out and then log back in with br1wrandall it displays the folders and templates for the br1wrandall account

2. Users can create Templates in other users' Shared Folders
 - Logged in as br1wrandall I was able to create a template in the Shared Folders Testing Folder (SYS1)
 - This will be a significant issue for us if any user can purposefully or accidentally add their own templates to our shared Sitka_templates folders.

[Andrea Neiman (aneiman)]

Thanks for the feedback, Susan, Elizabeth, and Christine. We will review this and update the branch.

[Beth Willis (willis-a)]

I've done a bit of testing and, overall, the new interface is great! So far, I have just one comment.

When creating a report, it is necessary to choose a report folder and an output folder. In the current reporter, if a user does not select both, a pop-up message displays.

In the angular reporter, no such message displays. If another report was already run, the previously selected folders still appear to be selected. This makes it harder to see that folders need to be selected for the current report. Note: this may be related to Susan's last comment.

[Andrea Neiman (aneiman)]

Hi all - thank you so much for your testing & feedback. Mike and I met this afternoon and we'll be addressing some of the items you mentioned.

Here's a full list of all feedback items and responses:
https://docs.google.com/document/d/1TFJkxLNM5gBPaKBCsJmO6rF2IFZNDLoqMvCF7T7lt6E/edit?usp=sharing

[Andrea Neiman (aneiman)]

Also, I will be demoing this interface tomorrow at the Reports Interest Group meeting if anyone would like to see it in action:

http://list.evergreen-ils.org/pipermail/evergreen-reports/2024-March/000524.html

[[e-mail] (tji)]

1. Re nullability, it appears when the checkbox in front of a sub-table is selected, it is inner join between the two tables. It's left join if it is not selected. But I did not figure out how to make a right join.

2. When setting up a report with an In List operator on Org Unit ID, the whole org unit tree is displayed flat (expanded). This could be a big issue to our consortium. We have over 300 org units. Can the org unit tree be collapsed to certain level, e.g. displaying the first 2 levels ?

3. Previous selected values for In List operators remain when setting up a new report on the same template.

4. I always encountered error when reporting on items with a field from linked circulation table. You may see it with admin account in Tina(Shared) folder on https://butternut.evergreencatalog.com/

[Jennifer Pringle (jpringle-u)]

Shared folders no longer include the top folder with the sharing user's username. I can see this causing issues if multiple users share folders that have the same name. (From what I've seen it's not uncommon for staff to use the same folder names like circulation, monthly statistics, etc.)

In this screenshot for example, each of the Circulation folders comes from a different user but you have no way to tell which so you'd have to go into each one to find the template you're looking for or ask the user to rename their folder to something unique.

[Mike Rylander (mrylander)]

Thank you all for your feedback!

You will find an updated branch at https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/miker/lp-1993823-angular-reporter-20240417-PR that (I believe) addresses all of the code-related issues raised. It's also rebased and squashed, with one additional commit at the top that adds a redirect from the old UI's web client wrapper to the new implementation.

[Blake GH (bmagic)]

All,

I love it! I found a bug though. When running a report that uses "In list" (like org unit) - My checkbox clicks aren't saved when clicking on next. I realized the issue has to do with using the mouse pointer to click on the actual checkbox, as opposed to clicking on the accompanied phrase like "Example Branch 2". I was confused and I'm sure others will be as well. Right now (on butternut), I needed to click the phrase instead of the checkbox in order for my selections to be saved after clicking "Next"

[Mike Rylander (mrylander)]

Thanks for attempting to look quickly, Blake, but butternut doesn't have the new branch yet, as far as I know.

[Andrea Neiman (aneiman)]

As Mike noted, butternut hasn't been updated yet but we will do so tomorrow. The issue you noted is fixed in Mike's branch from this morning.

[Andrea Neiman (aneiman)]

Butternut is now updated!

[Blake GH (bmagic)]

I just tested butternut. I'm still having the click the checkbox vs. click the phrase issue. I thought it might be browser cache, so I attempted a different browser and incognito mode. Not sure what's going on but: the box visually gets checked either way (box click or phrase click) - but only the phrase click is "real"

Maybe this isn't something we need fixed before it gets merged? Or maybe there's something wrong with my template or something I'm doing. For reference, it's the template named "circ". But it's behaving the same way for me using someone else's template "Recent circ count per month by branch"

[Mike Rylander (mrylander)]

Thanks for testing again, Blake. I'll look at that now -- it definitely should be working. :(

[Mike Rylander (mrylander)]

I've found the issue -- a 1-character rebase/squash merge conflict issue that eluded me for about 2 hours! -- and all's well now. Clicking either the label /or/ the checkbox will act as you expect for IN-LIST org selection now.

Butternut is updated, and the branch linked above has been force-updated as well.

Thanks again, Blake!

[Jessica Woolford (jwoolford)]

Bibliomation is testing this branch with a copy of our production data. So far, many of our shared templates (all created in the calendar year, but potentially clones of templates that were converted from XUL) have failed to have filters load. In one instance, the filter loaded but we received the message “Filters missing required values," even though all filters were filled in on the previous screen.

Also, I will echo Tina's concern about having the all org units fully expanded for the in list selection. In the current version of the reporter, the org unit of the workstation is automatically selected and the user only needs to click "add" to select it. We use the in list operator for most report templates to accommodate multi-branch system, but most of the time, they just want to select one library. Our libraries would definitely appreciate not having to scroll to select their branch each time they run a report.

[Blake GH (bmagic)]

All,

I am having issues installing Evergreen with this patch added on top of main. I'm using Ubuntu Jammy. The issue is during the eg2 ng build --configuration=production step.

I've attempted it in two different scenarios. Same error. Here's what I'm getting:

./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[0].use[2]!./node_modules/bootstrap-5-css-only/css/bootstrap.min.css - Warning: Module Warning (from ./node_modules/postcss-loader/dist/cjs.js):
Warning

(6:29521) autoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated.

./src/app/staff/share/patron/search.component.css?ngResource - Warning: Module Warning (from ./node_modules/postcss-loader/dist/cjs.js):
Warning

(9:3) autoprefixer: start value has mixed support, consider using flex-start instead

Error: src/app/staff/reporter/full/editor.component.html:76:7 - error NG8002: Can't bind to 'showExpandAll' since it isn't a known property of 'eg-tree'.
1. If 'eg-tree' is an Angular component and it has 'showExpandAll' input, then verify that it is part of this module.
2. If 'eg-tree' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

76 [showExpandAll]="false"
         ~~~~~~~~~~~~~~~~~~~~~~~

  src/app/staff/reporter/full/editor.component.ts:16:18
    16 templateUrl: './editor.component.html',
                        ~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component FullReporterEditorComponent.

Error: src/app/staff/reporter/full/editor.component.ts:115:42 - error TS2551: Property 'findNodePath' does not exist on type 'Tree'. Did you mean 'findNode'?

115 f.path = this.currentIdlTree.findNodePath(this.currentIdlNode);
                                             ~~~~~~~~~~~~

  src/app/share/tree/tree.ts:96:5
    96 findNode(id: any): TreeNode {
           ~~~~~~~~
    'findNode' is declared here.

Error: src/app/staff/reporter/full/reporter-field.component.ts:89:65 - error TS2554: Expected 1 arguments, but got 2.

89 && this.idl.getClassSelector(fmField.class, true)
                                                                   ~~~~

Error: src/app/staff/reporter/full/reporter-field.component.ts:191:14 - error TS2339: Property 'toggleStateFlag' does not exist on type 'TreeNode'.

191 node.toggleStateFlag();
                 ~~~~~~~~~~~~~~~

Error: src/app/staff/reporter/full/reporter-field.component.ts:196:48 - error TS2339: Property 'findStateFlagNodes' does not exist on type 'Tree'.

196 this.field.filter_value = this.orgTree.findStateFlagNodes().map(x => x.id);
                                                   ~~~~~~~~~~~~~~~~~~

Error: src/app/staff/reporter/full/reporter-field.component.ts:244:26 - error TS2339: Property 'findStateFlagNodes' does not exist on type 'Tree'.

244 this.orgTree.findStateFlagNodes().map(x => x.stateFlag = false);
      ...

[Jason Boyer (jboyer)]

Hi Blake, the top 9 commits on that branch are required for this feature, even though only one is explicitly listed for the angular reporter. I believe the rest are pulled out because they modify global components to make it easier to test their changes against the rest of the client to make sure nothing was broken when adding or changing component features. (If I'm off base on that Mike can explain it better than me.) Though it may be best to include some indication in the commit message what branch the component changes came from in future.

Try testing with main + all commits from "egtree rewrite" through "Redirect all attempts to go directly to the legacy reporting UI wrapper to the new Angular location" and you should be good to go.

[Blake GH (bmagic)]

Ah! Thank you! That's the clue I needed. I was only including the top two commits.

It's working now with the top 9 commits! To be continued at hackfest tomorrow.

[Blake GH (bmagic)]

OK, I've pushed a collab branch with the bug numbers added to each of the commits that were lacking that reference:

https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/collab/blake/LP1993823_angular_report_interface