Page MenuHomePhabricator

Rewrite ORES "reference" UI using React
Closed, ResolvedPublic

Description

Our demonstration API consumer should be a good example of how to use ORES and parse its output. At the moment, it's a hastily thrown together blob of ECMAScript.

Write new code using modern paradigms. @Jdlrobson and @dbarratt gave me some tips at the hackathon this weekend, we'll ask them for review when this is ready.

If it makes sense, embed the new UI in ORES and replace https://ores.wikimedia.org/ui/

Code:
https://github.com/wiki-ai/ores-reference-ui

Try it now:
https://wiki-ai.github.io/ores-reference-ui/dist/

Related Objects

StatusSubtypeAssignedTask
DeclinedNone
ResolvedNone

Event Timeline

This project got fun. Anyone have thought about how to represent classifier outputs graphically? I was thinking a bar chart, with categories on the X-axis.

Future directions:

  • graph confusion matrix (statistics.counts.predictions) TP, TN, FP, FN, heat map, legend
  • Colorize prediction bars, bold outline for the winning prediction (if any).
  • Split code into modules and decouple global state object.
  • Rewrite mobx as redux.
  • Group widgets into larger component.
  • Group score and threshold graphs visually, according to revision ID, model, etc.
  • Bug: Scoring a revid then deleting it and sending again causes revisions != [] and a bad query.
  • Map wp10 categories to correct order (on server side, if possible)
  • server handles model_info=statistics at the same time as model_info= statistics.threshold?
  • what other model_info is available?
  • Checkbox to display features; pretty print somehow.
  • feature injection
  • single/multiple threshold calculation parameters
  • simplify the interface for each task--maybe tabs switch between UIs, e.g. scoring vs thresholds.

More TODOs,

  • wp10 categories are already ordered in "labels" response, use that to order confusion matrix and prediction bar graph.
  • Configuration for consistent colors per-model and other score presentation details.
  • +1 from halfak that we need to split scoring from info probing, maybe +1 for a tabbed interface
  • X-axis labels for the confusion matrix
  • Swap graphing library, use something that provides more customizability

Latest discussion is about integration. The options that came up so far are,

  • Replace the UI embedded in the ores repo. Include directly or as a submodule.
  • Leave that minimal UI, provide this as a more complex, standalone UI in another repo.
  • Remove or further reduce the embedded UI and provide this separately, maybe with a optional "advanced" link to the React UI's demo site.

@Ladsgroup is waiting on a license for wikimedia-react-components, and we'll be able to update the CSS to new style guidelines.

I need to review this from a Product perspective. Maybe @Harej can start with this as an introductory task.

Vvjjkkii renamed this task from Rewrite ORES "reference" UI using React to 1icaaaaaaa.Jul 1 2018, 1:08 AM
Vvjjkkii removed Ladsgroup as the assignee of this task.
Vvjjkkii triaged this task as High priority.
Vvjjkkii updated the task description. (Show Details)
Vvjjkkii removed a subscriber: Aklapper.
CommunityTechBot renamed this task from 1icaaaaaaa to Rewrite ORES "reference" UI using React.Jul 2 2018, 4:00 PM
CommunityTechBot assigned this task to Ladsgroup.
CommunityTechBot raised the priority of this task from High to Needs Triage.
CommunityTechBot updated the task description. (Show Details)
CommunityTechBot added a subscriber: Aklapper.

@Ladsgroup Kicking this back to "Active" since it sounds like you're doing a round of coding?

Yup, I want to take another stab at it but first of all I need the whole components aligned with the exiting WikimediaUI components.

@Ladsgroup is there a patch you are waiting on or a component/issue in particular you'd like me to fix up? Will probably have some room to work on this library tomorrow.

@Jdlrobson That's amazing. It can be either an stab to make all of oojs ui components reusable easily in the react components repo. Or if this is too big (which is pretty big IMO) I care mostly about select widgets (mutli-select, etc.) That would be great. Thanks!

+1 to porting the select widget to the MediaWiki react components, good idea!

FYI: I moved the React bindings for jQuery.i18n into it's own library:
https://www.npmjs.com/package/@wikimedia/react.i18n

@dbarratt nice! will definitely look at that tomorrow :)

Ladsgroup changed Risk Rating from N/A to default.

Forgot to post this :-):

FYI: I moved the React bindings for jQuery.i18n into it's own library:
https://www.npmjs.com/package/@wikimedia/react.i18n

I've been keeping jQuery out of the React components library to allow others to use it.
Given all strings can be passed in as properties it should work well with this.

I have added a RadioGroup and have started tracking the DropdownWidget in https://github.com/jdlrobson/wikipedia-react-components/issues/12

I've been keeping jQuery out of the React components library to allow others to use it.
Given all strings can be passed in as properties it should work well with this.

Yeah I want to get rid of jQuery from our i18n library (or make a base library that both React & jQuery can use)

Ladsgroup triaged this task as Medium priority.Nov 28 2018, 6:40 AM
Ladsgroup raised the priority of this task from Medium to Needs Triage.
Ladsgroup moved this task from Unsorted to New development on the Machine-Learning-Team board.