What is Reactivity?

View slides in full screen

Previous PyData Shiny Talks

• Gordon Shotwell & Tracy Teal - Build Simple and Scalable Apps with Shiny | PyData NYC 2023
  • Slides: https://github.com/gshotwell/shiny-algorithm
• Joe Cheng - Shiny: Data-centric web applications in Python | PyData Seattle 2023
  • Demos: https://github.com/jcheng5/PyDataSeattle2023-demos

What makes shiny special?

• Reactivity!

What does that mean?

• Outputs automatically update whenever their inputs change
  • Without requiring explicit event handling or manual refreshes
  • No writing callbacks
• Interactive, intuitive, and easy to build

Initial state

flowchart TD
  D[Dates] --> Sa{{Sample}}
  S[Sample Size] --> Sa
  A[Account] --> F
  Sa --> F{{Filtered}}
  F --> P2((Model Scores))
  F --> P1((API Response))

  classDef changed fill:#f96
  linkStyle 0,1,2,3,4,5 display:none

• Rectangle: Reactive input
• Hexagon: Reactive expression
• Circle: Reactive output

Generate Model Scores

flowchart TD
  D[Dates] --> Sa{{Sample}}
  S[Sample Size] --> Sa
  A[Account] --> F
  Sa --> F{{Filtered}}
  F --> P2((Model Scores)):::changed
  F --> P1((API Response))

  classDef changed fill:#f96
  linkStyle 0,1,2,3,4,5 display:none

• Rectangle: Reactive input
• Hexagon: Reactive expression
• Circle: Reactive output

Get filtered Reactive Calc

flowchart TD
  D[Dates] --> Sa{{Sample}}
  S[Sample Size] --> Sa
  A[Account] --> F
  Sa --> F{{Filtered}}:::changed
  F --> P2((Model Scores))
  F --> P1((API Response))

  classDef changed fill:#f96
  linkStyle 0,1,2,3,5 display:none

• Rectangle: Reactive input
• Hexagon: Reactive expression
• Circle: Reactive output

Get Account input

flowchart TD
  D[Dates] --> Sa{{Sample}}
  S[Sample Size] --> Sa
  A[Account]:::changed --> F
  Sa --> F{{Filtered}}
  F --> P2((Model Scores))
  F --> P1((API Response))

  classDef changed fill:#f96
  linkStyle 0,1,3,5 display:none

• Rectangle: Reactive input
• Hexagon: Reactive expression
• Circle: Reactive output

Get Sample Reactive Calc

flowchart TD
  D[Dates] --> Sa{{Sample}}:::changed
  S[Sample Size] --> Sa
  A[Account] --> F
  Sa --> F{{Filtered}}
  F --> P2((Model Scores))
  F --> P1((API Response))

  classDef changed fill:#f96
  linkStyle 0,1,5 display:none

• Rectangle: Reactive input
• Hexagon: Reactive expression
• Circle: Reactive output

Get Other inputs

flowchart TD
  D[Dates]:::changed  --> Sa{{Sample}}
  S[Sample Size]:::changed  --> Sa
  A[Account] --> F
  Sa --> F{{Filtered}}
  F --> P2((Model Scores))
  F --> P1((API Response))

  classDef changed fill:#f96
  linkStyle 5 display:none

• Rectangle: Reactive input
• Hexagon: Reactive expression
• Circle: Reactive output

Plot API Responses

flowchart TD
  D[Dates] --> Sa{{Sample}}
  S[Sample Size] --> Sa
  A[Account] --> F
  Sa --> F{{Filtered}}
  F --> P2((Model Scores))
  F --> P1((API Response)):::changed

  classDef changed fill:#f96
  linkStyle 5 display:none

• Rectangle: Reactive input
• Hexagon: Reactive expression
• Circle: Reactive output

Get Filter reactive calc

flowchart TD
  D[Dates] --> Sa{{Sample}}
  S[Sample Size] --> Sa
  A[Account] --> F
  Sa --> F{{Filtered}}
  F --> P2((Model Scores))
  F --> P1((API Response))

  classDef changed fill:#f96

• Rectangle: Reactive input
• Hexagon: Reactive expression
• Circle: Reactive output

Account changes

flowchart TD
  D[Dates] --> Sa{{Sample}}
  S[Sample Size] --> Sa
  A[Account]:::changed  --> F
  Sa --> F{{Filtered}}
  F --> P2((Model Scores))
  F --> P1((API Response))

  classDef changed fill:#f96

• Rectangle: Reactive input
• Hexagon: Reactive expression
• Circle: Reactive output

Invalidate Filtered

flowchart TD
  D[Dates] --> Sa{{Sample}}
  S[Sample Size] --> Sa
  A[Account]  --> F
  Sa --> F{{Filtered}}:::changed
  F --> P2((Model Scores))
  F --> P1((API Response))

  classDef changed fill:#f96
  linkStyle 2,3 display:none

• Rectangle: Reactive input
• Hexagon: Reactive expression
• Circle: Reactive output

Invalidate Plots

flowchart TD
  D[Dates] --> Sa{{Sample}}
  S[Sample Size] --> Sa
  A[Account]  --> F
  Sa --> F{{Filtered}}
  F --> P2((Model Scores)):::changed
  F --> P1((API Response)):::changed

  classDef changed fill:#f96
  linkStyle 2,3,4,5 display:none

• Rectangle: Reactive input
• Hexagon: Reactive expression
• Circle: Reactive output

Calculate model scores

flowchart TD
  D[Dates] --> Sa{{Sample}}
  S[Sample Size] --> Sa
  A[Account]  --> F
  Sa --> F{{Filtered}}
  F --> P2((Model Scores)):::changed
  F --> P1((API Response))

  classDef changed fill:#f96
  linkStyle 2,3,4,5 display:none

• Rectangle: Reactive input
• Hexagon: Reactive expression
• Circle: Reactive output

Get filtered calc

flowchart TD
  D[Dates] --> Sa{{Sample}}
  S[Sample Size] --> Sa
  A[Account]  --> F
  Sa --> F{{Filtered}}:::changed
  F --> P2((Model Scores))
  F --> P1((API Response))

  classDef changed fill:#f96
  linkStyle 2,3,5 display:none

• Rectangle: Reactive input
• Hexagon: Reactive expression
• Circle: Reactive output

Get Account and Sample

flowchart TD
  D[Dates] --> Sa{{Sample}}
  S[Sample Size] --> Sa
  A[Account]:::changed  --> F
  Sa --> F{{Filtered}}
  F --> P2((Model Scores))
  F --> P1((API Response))

  classDef changed fill:#f96
  linkStyle 5 display:none

• Rectangle: Reactive input
• Hexagon: Reactive expression
• Circle: Reactive output

Calculate API Response

flowchart TD
  D[Dates] --> Sa{{Sample}}
  S[Sample Size] --> Sa
  A[Account]  --> F
  Sa --> F{{Filtered}}
  F --> P2((Model Scores))
  F --> P1((API Response)):::changed

  classDef changed fill:#f96
  linkStyle 5 display:none

• Rectangle: Reactive input
• Hexagon: Reactive expression
• Circle: Reactive output

Get Filtered Calc

flowchart TD
  D[Dates] --> Sa{{Sample}}
  S[Sample Size] --> Sa
  A[Account]  --> F
  Sa --> F{{Filtered}}
  F --> P2((Model Scores))
  F --> P1((API Response))

  classDef changed fill:#f96

• Rectangle: Reactive input
• Hexagon: Reactive expression
• Circle: Reactive output

Sample size changes

flowchart TD
  D[Dates] --> Sa{{Sample}}
  S[Sample Size]:::changed --> Sa
  A[Account]  --> F
  Sa --> F{{Filtered}}
  F --> P2((Model Scores))
  F --> P1((API Response))

  classDef changed fill:#f96

• Rectangle: Reactive input
• Hexagon: Reactive expression
• Circle: Reactive output

Invalidate Sample

flowchart TD
  D[Dates] --> Sa{{Sample}}:::changed
  S[Sample Size] --> Sa
  A[Account]  --> F
  Sa --> F{{Filtered}}
  F --> P2((Model Scores))
  F --> P1((API Response))

  classDef changed fill:#f96
  linkStyle 0,1 display:none

• Rectangle: Reactive input
• Hexagon: Reactive expression
• Circle: Reactive output

Invalidate Filter

flowchart TD
  D[Dates] --> Sa{{Sample}}
  S[Sample Size] --> Sa
  A[Account]  --> F
  Sa --> F{{Filtered}}:::changed
  F --> P2((Model Scores))
  F --> P1((API Response))

  classDef changed fill:#f96
  linkStyle 0,1,2,3 display:none

• Rectangle: Reactive input
• Hexagon: Reactive expression
• Circle: Reactive output

Invalidate plots

flowchart TD
  D[Dates] --> Sa{{Sample}}
  S[Sample Size] --> Sa
  A[Account]  --> F
  Sa --> F{{Filtered}}
  F --> P2((Model Scores)):::changed
  F --> P1((API Response)):::changed

  classDef changed fill:#f96
  linkStyle 0,1,2,3,4,5 display:none

• Rectangle: Reactive input
• Hexagon: Reactive expression
• Circle: Reactive output

Initial state

flowchart TD
  D[Dates] --> Sa{{Sample}}
  S[Sample Size] --> Sa
  A[Account] --> F
  Sa --> F{{Filtered}}
  F --> P2((Model Scores))
  F --> P1((API Response))

  classDef changed fill:#f96
  linkStyle 0,1,2,3,4,5 display:none

• Rectangle: Reactive input
• Hexagon: Reactive expression
• Circle: Reactive output

Generate Model Scores

flowchart TD
  D[Dates] --> Sa{{Sample}}
  S[Sample Size] --> Sa
  A[Account] --> F
  Sa --> F{{Filtered}}
  F --> P2((Model Scores)):::changed
  F --> P1((API Response))

  classDef changed fill:#f96
  linkStyle 0,1,2,3,4,5 display:none

• Rectangle: Reactive input
• Hexagon: Reactive expression
• Circle: Reactive output

Get filtered Reactive Calc

flowchart TD
  D[Dates] --> Sa{{Sample}}
  S[Sample Size] --> Sa
  A[Account] --> F
  Sa --> F{{Filtered}}:::changed
  F --> P2((Model Scores))
  F --> P1((API Response))

  classDef changed fill:#f96
  linkStyle 0,1,2,3,5 display:none

• Rectangle: Reactive input
• Hexagon: Reactive expression
• Circle: Reactive output

Get Account input

flowchart TD
  D[Dates] --> Sa{{Sample}}
  S[Sample Size] --> Sa
  A[Account]:::changed --> F
  Sa --> F{{Filtered}}
  F --> P2((Model Scores))
  F --> P1((API Response))

  classDef changed fill:#f96
  linkStyle 0,1,3,5 display:none

• Rectangle: Reactive input
• Hexagon: Reactive expression
• Circle: Reactive output

Get Sample Reactive Calc

flowchart TD
  D[Dates] --> Sa{{Sample}}:::changed
  S[Sample Size] --> Sa
  A[Account] --> F
  Sa --> F{{Filtered}}
  F --> P2((Model Scores))
  F --> P1((API Response))

  classDef changed fill:#f96
  linkStyle 0,1,5 display:none

• Rectangle: Reactive input
• Hexagon: Reactive expression
• Circle: Reactive output

Get Other inputs

flowchart TD
  D[Dates]:::changed  --> Sa{{Sample}}
  S[Sample Size]:::changed  --> Sa
  A[Account] --> F
  Sa --> F{{Filtered}}
  F --> P2((Model Scores))
  F --> P1((API Response))

  classDef changed fill:#f96
  linkStyle 5 display:none

• Rectangle: Reactive input
• Hexagon: Reactive expression
• Circle: Reactive output

Plot API Responses

flowchart TD
  D[Dates] --> Sa{{Sample}}
  S[Sample Size] --> Sa
  A[Account] --> F
  Sa --> F{{Filtered}}
  F --> P2((Model Scores))
  F --> P1((API Response)):::changed

  classDef changed fill:#f96
  linkStyle 5 display:none

• Rectangle: Reactive input
• Hexagon: Reactive expression
• Circle: Reactive output

Get Filter reactive calc

flowchart TD
  D[Dates] --> Sa{{Sample}}
  S[Sample Size] --> Sa
  A[Account] --> F
  Sa --> F{{Filtered}}
  F --> P2((Model Scores))
  F --> P1((API Response))

  classDef changed fill:#f96

• Rectangle: Reactive input
• Hexagon: Reactive expression
• Circle: Reactive output