vector-engineering / covidcg

A COVID-19 CoV Genetics (CG) browser to inform therapeutics development
https://covidcg.org
MIT License
26 stars 5 forks source link

Home Tab Improvement #428

Open favelava opened 3 years ago

favelava commented 3 years ago

The top vega plot in the home tab breaks when entering the home tab from another page. The plot recovers on refresh.

favelava commented 3 years ago

The problem stems from needing to find the mouse position within the vega plot. Given the density of points and that hovering over the plot selects multiple lineages at once we may want to limit the lineage highlighting to when a user hovers over a lineage in the table to the left

favelava commented 3 years ago

Make six separate vega plots which have all continent data. Get relevant continent's data from title

favelava commented 2 years ago
  1. workflow_main/analyses/scripts/surveillance:
    • Output JSONs instead of CSVs
    • i.e., group_regression2.csv --> group_regression2.json
    • and group_counts2.csv --> group_counts2.json
    • For JSON output, use df.to_json(orient='records')
  2. Modify DB seeding to insert surveillance JSONs into the jsons table
    • services/server/cg_server/db_seed/seed.py
    • cur.execute( """ INSERT INTO "jsons" (key, value) VALUES (%s, %s); """, ["surveillance_group_counts", Json(...)], )
    • ... same for surveillance_group_regression
    • Drop and re-seed development database ​
  3. Access JSONs via. asyncDataStore (just verify that the data made it)
    • see: src/stores/mutationData.js for an example of accessing data from the asyncDataStore.js
    • Within mutationStore: console.log(asyncDataStore.data.surveillance_group_counts)... ​
  4. Make a new store for surveillance data (src/stores/surveillanceDataStore.js)
    • Make the store file. Follow src/stores/globalSequencingData.js as a template, except you don't even need the fetch function.
    • In the stores init() function, load the data from asyncDataStore and store it as a variable inside the surveillance store (this.surveillance_group_counts = ...)
    • Connecting the store:
      1. Add it to src/stores/connect.js
      2. Add to src/stores/rootStore.js ​
  5. Implement in Surveillance Plot wrapper (src/components/Vega/SurveillancePlot.js)
    • useStores() hook to load the new surveillanceDataStore
    • Create a data field in the state with a useState hook
    • Pass data to VegaEmbed (see other plots for reference)
    • Modify Vega spec to accept data
    • (I tried up to this point before, and it didn't work. But when we simplify the plots (one per continent), it should work...)