cns-iu / a2agc-dataset Goto Github PK

View Code? Open in Web Editor NEW

0.0 6.0 1.0 30.53 MB

Advanced Analytics for IU’s Addictions Grand Challenge (A2AGC)

Home Page: https://node.cns.iu.edu/client/a2agc/

License: MIT License

Shell 2.21% Dockerfile 0.62% Python 19.01% JavaScript 4.62% HTML 7.01% TypeScript 54.30% CSS 0.12% SCSS 12.12%

a2agc-dataset's Introduction

A2agc

This project was generated with Angular CLI version 10.1.6.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

a2agc-dataset's People

Contributors

Watchers

Forkers

jayamlani1

a2agc-dataset's Issues

General Items

The toggle area at the bottom of the page isn’t responsive.
Anomalous behavior with the toggles. Not the toggle is ended, the content continues, but there is no scroll or ability to get to the content. Again,I think this whole approach to the content needs discussion. There are links tothe CSV and YML in the text above the toggles. I didn’t specify the toggles in the spec outside of the SQL. Again, we need to discuss this area.
The content in the bottom toggle is bad. Use of the link HERE is just wrong. The client wrote the content, but it is not good.
download button is buried, add space before and after to make it more
apparent. Give the markdown code block container a top padding of 2.5rem.
The Help icon when it opens flashes interior content before collapsing to the toggles. This is visually poor. The content should be invisibleat all times. When the modal appears, the toggles should appear collapsed. This may be solvable by simply applying display:none to toggle content then removing that rule after toggles appear on stage.
I noticed that external links load into the same window. As example, on Geomap page, the Make-a-Vis link opens the software in the same window. Should open in a separate tab.
Make legend items consistent. Example: There are also color and font size differences between the visualizations. The examples below, first is Tree and second is Geomap.

Help Modal Style Change

On the Help modal, decrease the border-width on the circles from 3px to 1px

Viz 2 Improvements

Don’t abbreviate, use full MALE and FEMALE text in filter by region.

Minor fixes for public version code

Put a comment in isPublic that says specifically what file its looking for (its ok that the code uses a config, but it is likely to never change, so a comment is appropriate for maintainers)
An error is logged to the console when aggregate-table-data.json is missing (the one that indicates it's public/private). Handle it in a way that does not produce an error (you could fetch it as text instead of JSON for instance)
Fix graphical glitch in the menu when in public mode (the line is extra thick where the menu items have been removed)

Error (chrome):

{
  "headers": {
    "normalizedNames": {},
    "lazyUpdate": null
  },
  "status": 200,
  "statusText": "OK",
  "url": "https://node.cns.iu.edu/client/a2agc/staging/assets/generated/aggregate-table-data.json",
  "ok": false,
  "name": "HttpErrorResponse",
  "message": "Http failure during parsing for https://node.cns.iu.edu/client/a2agc/staging/assets/generated/aggregate-table-data.json",
  "error": {
    "error": {},
    "text": "<!DOCTYPE html><html lang=\"en\"><head><link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin=\"\">\n  <meta charset=\"utf-8\">\n  <title>Indiana Opioid Dashboard</title>\n  <base href=\"/client/a2agc/\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n  <link rel=\"icon\" type=\"image/x-icon\" href=\"favicon.ico\">\n  <style type=\"text/css\">@font-face{font-family:'Lato';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/lato/v23/S6u9w4BMUTPHh7USSwaPGQ3q5d0N7w.woff2) format('woff2');unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;}@font-face{font-family:'Lato';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/lato/v23/S6u9w4BMUTPHh7USSwiPGQ3q5d0.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}@font-face{font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/lato/v23/S6uyw4BMUTPHjxAwXiWtFCfQ7A.woff2) format('woff2');unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;}@font-face{font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/lato/v23/S6uyw4BMUTPHjx4wXiWtFCc.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}</style>\n  <style type=\"text/css\">@font-face{font-family:'Material Icons';font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/materialicons/v135/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2');}@font-face{font-family:'Material Icons Outlined';font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/materialiconsoutlined/v107/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUcel5euIg.woff2) format('woff2');}.material-icons{font-family:'Material Icons';font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased;}.material-icons-outlined{font-family:'Material Icons Outlined';font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased;}</style>\n<style>html{box-sizing:border-box;}*,:after,:before{box-sizing:inherit;}body,html{height:100%;}body{margin:0;padding:0;background-color:#fff;}.mat-typography{font:400 14px/20px Lato,sans serif;letter-spacing:normal;}</style><link rel=\"stylesheet\" href=\"styles.3ce8e31bee839ac54e2d.css\" media=\"print\" onload=\"this.media='all'\"><noscript><link rel=\"stylesheet\" href=\"styles.3ce8e31bee839ac54e2d.css\"></noscript></head>\n<body class=\"mat-typography\">\n  <agc-root></agc-root>\n<script src=\"runtime.a3850625a85d3cf32c03.js\" defer></script><script src=\"polyfills.aee990deaf1f8bb88a0e.js\" defer></script><script src=\"scripts.0bd2c7a50924e57de165.js\" defer></script><script src=\"main.02464b205bfc88a85335.js\" defer></script>\n\n</body></html>"
  }
}

Error (firefox):

{
  "headers": {
    "normalizedNames": {},
    "lazyUpdate": null
  },
  "status": 200,
  "statusText": "OK",
  "url": "https://node.cns.iu.edu/client/a2agc/staging/assets/generated/aggregate-table-data.json",
  "ok": false,
  "name": "HttpErrorResponse",
  "message": "Http failure during parsing for https://node.cns.iu.edu/client/a2agc/staging/assets/generated/aggregate-table-data.json",
  "error": {
    "error": {},
    "text": "<!DOCTYPE html><html lang=\"en\"><head><link rel=\"preconnect\" href=\"https://fonts.gstatic.com/\" crossorigin=\"\">\n  <meta charset=\"utf-8\">\n  <title>Indiana Opioid Dashboard</title>\n  <base href=\"/client/a2agc/\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n  <link rel=\"icon\" type=\"image/x-icon\" href=\"favicon.ico\">\n  <style type=\"text/css\">@font-face{font-family:'Lato';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/lato/v23/S6u9w4BMUTPHh7USSwaPGQ3q5d0N7w.woff2) format('woff2');unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;}@font-face{font-family:'Lato';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/lato/v23/S6u9w4BMUTPHh7USSwiPGQ3q5d0.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}@font-face{font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/lato/v23/S6uyw4BMUTPHjxAwXiWtFCfQ7A.woff2) format('woff2');unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;}@font-face{font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/lato/v23/S6uyw4BMUTPHjx4wXiWtFCc.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}</style>\n  <style type=\"text/css\">@font-face{font-family:'Material Icons';font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/materialicons/v135/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2');}@font-face{font-family:'Material Icons Outlined';font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/materialiconsoutlined/v107/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUcel5euIg.woff2) format('woff2');}.material-icons{font-family:'Material Icons';font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased;}.material-icons-outlined{font-family:'Material Icons Outlined';font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased;}</style>\n<style>html{box-sizing:border-box;}*,:after,:before{box-sizing:inherit;}body,html{height:100%;}body{margin:0;padding:0;background-color:#fff;}.mat-typography{font:400 14px/20px Lato,sans serif;letter-spacing:normal;}</style><link rel=\"stylesheet\" href=\"styles.3ce8e31bee839ac54e2d.css\" media=\"print\" onload=\"this.media='all'\"><noscript><link rel=\"stylesheet\" href=\"styles.3ce8e31bee839ac54e2d.css\"></noscript></head>\n<body class=\"mat-typography\">\n  <agc-root></agc-root>\n<script src=\"runtime.a3850625a85d3cf32c03.js\" defer></script><script src=\"polyfills.aee990deaf1f8bb88a0e.js\" defer></script><script src=\"scripts.0bd2c7a50924e57de165.js\" defer></script><script src=\"main.02464b205bfc88a85335.js\" defer></script>\n\n</body></html>"
  }
}

Graphical glitch (chrome):

Graphical glitch (firefox):

Upgrade visualizations to vega-lite 5

Upgrade to Angular 11 and Vega Lite 5

Vega Lite 5 conversions will break selections. If it become difficult, bring in more folks to help with conversion.

Implement table/column selector component

As per spec

Use localStorage to store that they’ve seen to help menu (instead of instance)

Currently the help menu pops up every time you visit or refresh the page when on a visualization page. Update this behavior to store a boolean in localStorage 'HELP_POPUP_SHOWN'. If it is not set, show the popup as usual and set the boolean to 'true'. Otherwise, do not show the popup. They will still be able to get to help by clicking the ? icon.

Create mapping file for metadata/descriptions for each table/column

Some metadata will be needed for the new data distributions page. Gather that data into a JSON (or YAML) document that can be pulled in (via HttpClient) from that page for use.

https://github.com/cns-iu/a2agc-dataset/blob/main/data-processor/schemaspy.meta.xml has some metadata that we'll need and we still use this file, so perhaps using a process to extract the info will be useful.

Viz 4 Improvements

Add year to tooltip
Two things. I’m seeing this overlap behavior with the title text and tooltip. Second, if we can effectively do the tooltip, then we should have this behavior in locations where appropriate. We discussed this behavior.

Refactor visualization pages as a single component that handles multiple routes and gets data from PageLink store

Update dependencies (Angular 12 and related)

Add Spinner for Loading Content

On pages where there is a delay in loading the Vega Lite content there shouldbe spinner. Having the toggle appear with the content outside Vega, the user will move to interact, then get smacked in the head by a jump of content pushing down. Better to hide all content, have the spinner, then fade all content in. You can add text such as “Loading data” to go with the spinner.

Max Width of Visualizations / Page Contents

Currently the page is set to have content full-width. That is incorrect. The content should have a max-width of 1328px. The footer bars and main header bars extend full-width, but not the content

Generate data distributions from db

Adapt the old data distributions code to generate data for the new distributions page.

Old code is still in the data-processor/src/tables/ dir, so adapt as needed.

Vis 5: Re-add filtering by dataset

Viz 1 Improvements

I could not get the filters to pair again. Meaning, once I changed sex to either male or female I could not return to male AND female. Tried double click, SHIFT-Click, SHIFT-Double click, CTRL-Click, CTRL-Double click. In contrast I can go to a single item or SHIFT-Click to add an item back in both Color and Shape areas.
I noticed that when interacting with the line graph with a range that the Shape (Home State) items change. Selecting only a range of 2012-2013 Not Indiana would disappear and re-appear.
after toggling True False the line graph disappeared.
Add the year to the tooltip
when I click the Extracted Data (CSV) toggle it takes several seconds for the data to load. Any time we have a delay that results in the user wondering what is going on, we need to have a spinner.
When I click on the Visualization Source Code (Vega Lite Spec) toggle all content expands and what is on the stage pushes off the stage to the left. Not sure what is supposed to appear, but even if it does, it is off stage on a 2550px wide display. No scroll appears so I can’t tell what, if anything has loaded, the page becomes unusable unless the user things to close the toggle.
Link to “this script” is 404.
Unlike other pages the content is not centered the same. The reason is that it doesn’t have the same max-width.

Maps of Health: Gap between death and time zero

In all three Maps of Health, there is a visible but variable gap in many of the rows between the time of death and the zero axis. The gap changes from one map to another and depending on how you sort the data. Screenshot below:

Re-add data distributions (table columns)

Spec is here: design-spec-agc2-v1.5.1.pdf
Original Data Distributions: https://node.cns.iu.edu/client/a2agc/old/dataset/tables/table-deaths.html
Code (old): https://github.com/cns-iu/a2agc-dataset/blob/Sprint-3/src/tables/data.py

Switch authentication mechanism

Most likely Google's authentication system

New Text Content

The content in the bottom toggle is bad. Use of the link HERE is just wrong. The client wrote the content, but it is not good.

GeoVis time slider broken

Upgrade this spec to vega-lite 5 while you're at it.

Geographic visualization, time slider was broken. You even looked at the error log with me. Selections produced weird results. This should be comprehensively tested.

Data Distributions bugginess

On Firefox, selecting deaths/DOD (or other DATE variable) crashes (large blank canvas with what appears to be resize errors)
ALL DATE variables should be aggregated up to year
All variables with four or less unique values should use Pie chart
Hide time slider on variables with no period information (ie all periods are blank)
Hide time slider on variables with no visualization (summary type)
When showing all the time slider should always be visible at the bottom (alternative at the top with no pinning, but only if out of time)
Need some sort of busy / loading indicator while loading when show all data variables is selected

Header style fixes

Use a 2.25rem font size with a 300 weight. Currently 1.25rem, which is incorrect. I see where the confusion originated, sorry for not being clearer.

Viz 3 Improvements

No way to add #Death groups. I can only select a single range. If I SHIFT-Click, a behavior we introduce elsewhere, the Data Variable items go from the default 3 active to ALL active.
If I have two Data Variables selected. Then toggle say Had PreviousOverdose off, then back on, the Data Variables change. Which redraws the stage. The variables should remain constants, not impacted by changes in the filter by. If I select Heroin and Cocaine, then want to see No Previous Overdose for 40-49 #Deaths, the stage should show me both opioids.
There needs to be space between the outer header area and the vis. There is no space on these. The vis basically starts on the next line. Add 3rem of space between header and vis.

Viz 5: Selection is wonky

Privacy Policy / Contact Us changes

The Contact Us and Privacy Policy areas are questionable. I don’t agree with the linking out. Was this requested by the client? There should be some text beside two links for Contact Us. The Privacy Policy text could be pulled in or at the least have an intro paragraph and a formal button. They should also betarget=”_blank”. There is no need for the Privacy modal if there is only a link to the Regen... site. Just go directly.

Maps of Health R&D

During this sprint we'll try a couple different visualizations to explore maps of health.

Fix Resize Sensor for Visualizations

New help/tooltip: make it clear you can click to ‘reset’ visualizations

One thing about the vega visualizations is the feature where you can click somewhere near/around the legends to reset the visualization settings. This is a learned behavior, but needs to be called out.

We need:

Graphics/text to add to the existing help popups (@lecross)
Add new graphics/text to the software

Viz 5 Improvements

Saw this label issue on the legend.
After moving to the above state then adding all Filters back I see the following content: Nothing on the stage. Clicking through the filters one at a time does not change the nothing on the stage. SHIFT-Clicking to add all items back functions correctly, but does not add results to the stage.
The line graph selection isn’t as responsive as it is on the Mixed page. There is serious lag. Where on Mixed the feeling is that the selection of a range is tied to mouse movement, on Mixed the selection area is delayed.
I noticed a strange behavior in clicking Filters. I can click off the items and they will all activate. Try clicking in the in-between space. All filters will activate; however, only certain results will appear on stage.