Commits for angie
switch to files view, user index
v311_preview to v311_preview2 (2015-01-12 to 2015-01-20) v311
- New javascript UI framework using ReactJS and ImmutableJS libraries.Files live in three subdirectories of hg/js/:
- external/ has minified releases of MIT- or BSD-licensed, well-tested external libraries
that are not already hosted on sufficiently fast content delivery networks (CDNs).
We can use CDNs for ReactJS, JQuery and JQueryUI.
- model/ has code for the "brains" of a CGI's UI: it maintains a data structure that encodes
the state of the UI, sends ajax requests to the CGI when necessary to respond to user actions,
and updates the UI state data structure in response to user actions and ajax responses.
model has a lib/ subdirectory and will have one subdir per CGI.
model/lib/ has these modules:
- cart.js: functions for sending JSON-encoded ajax requests to CGI with hgsid
- ImModel.js: base class for UI model that uses ImmutableJS to efficiently maintain
a series of immutable data structures encoding the entire UI state. This enables
simpler reasoning about state changes, and as a bonus, easy undo/redo of user actions.
- CladeOrgDbMixin.js: this can be "mixed in" to a subclass of ImModel to handle
hgGateway-style clade, org/genome and db menus.
- PositionSearchMixin.js: this can be "mixed in" to a subclass of ImModel to handle
position search with autocomplete for genes (when a db has that info)
- react/ has code for the UI view, i.e. the elements that appear on the page and trigger
events when the user does something. The React library efficiently implements a virtual
top-down re-render of the entire UI state whenever something changes, making DOM calls
only for DOM elements that need to change. The use of ImmutableJS for the UI state
enables very efficient detection of changes.
The view modules are written in JSX, a superset of Javascript that adds HTML-like
syntax for instantiation of UI elements. Compiling JSX to JS requires the installation
of node, npm (node package manager) and the react-tools package. In order to avoid
that requirement for mirror installations, a bundle of compiled JSX files has been added
to git. Developers who change .JSX files must set the JSX environment variable to jsx
(or complete path to jsx), and should also set JSXHINT to jsxhint.
react/ has the following subdirs:
- bundle/ contains compiled and minified version of JSX code
- lib/ has UI components written in JSX, some very basic (Section.jsx, CheckboxLabel.jsx),
some more complex (PositionSearch.jsx)
- mixins/ has JS (not JSX) modules that add functionality to components; PathUpdate.js
checks for properties that must be passed down in order to work with ImModel,
ImmutableUpdate adds efficient change detection using ImmutableJS.
- each CGI will have a subdir for its JSX code
Many thanks to Brian Craft for pointing me at React and Immutable. Any flaws herein
are not Brian's fault!
- src/hg/htdocs/style/HGStyle.css - lines changed 55, context: html, text, full: html, text
- src/hg/js/external/BackboneExtend.js - lines changed 43, context: html, text, full: html, text
- src/hg/js/external/es5-sham.4.0.3.min.js - lines changed 6, context: html, text, full: html, text
- src/hg/js/external/es5-shim.4.0.3.min.js - lines changed 6, context: html, text, full: html, text
- src/hg/js/external/immutable.3.2.1.min.js - lines changed 34, context: html, text, full: html, text
- src/hg/js/external/lodash.2.4.1.compat.min.js - lines changed 61, context: html, text, full: html, text
- src/hg/js/external/makefile - lines changed 13, context: html, text, full: html, text
- src/hg/js/model/lib/CladeOrgDbMixin.js - lines changed 45, context: html, text, full: html, text
- src/hg/js/model/lib/ImModel.js - lines changed 265, context: html, text, full: html, text
- src/hg/js/model/lib/PositionSearchMixin.js - lines changed 54, context: html, text, full: html, text
- src/hg/js/model/lib/cart.js - lines changed 75, context: html, text, full: html, text
- src/hg/js/model/lib/makefile - lines changed 6, context: html, text, full: html, text
- src/hg/js/model/makefile - lines changed 6, context: html, text, full: html, text
- src/hg/js/react/bundle/reactLibBundle.js - lines changed 1, context: html, text, full: html, text
- src/hg/js/react/lib/CheckboxLabel.jsx - lines changed 38, context: html, text, full: html, text
- src/hg/js/react/lib/CladeOrgDb.jsx - lines changed 32, context: html, text, full: html, text
- src/hg/js/react/lib/Icon.jsx - lines changed 55, context: html, text, full: html, text
- src/hg/js/react/lib/LabeledSelect.jsx - lines changed 39, context: html, text, full: html, text
- src/hg/js/react/lib/LoadingImage.jsx - lines changed 30, context: html, text, full: html, text
- src/hg/js/react/lib/Modal.jsx - lines changed 55, context: html, text, full: html, text
- src/hg/js/react/lib/PositionSearch.jsx - lines changed 214, context: html, text, full: html, text
- src/hg/js/react/lib/Section.jsx - lines changed 22, context: html, text, full: html, text
- src/hg/js/react/lib/SetClearButtons.jsx - lines changed 27, context: html, text, full: html, text
- src/hg/js/react/lib/Sortable.jsx - lines changed 67, context: html, text, full: html, text
- src/hg/js/react/lib/TextInput.jsx - lines changed 59, context: html, text, full: html, text
- src/hg/js/react/lib/makefile - lines changed 13, context: html, text, full: html, text
- src/hg/js/react/makefile - lines changed 8, context: html, text, full: html, text
- src/hg/js/react/mixins/ImmutableUpdate.js - lines changed 68, context: html, text, full: html, text
- src/hg/js/react/mixins/PathUpdate.js - lines changed 16, context: html, text, full: html, text
- src/hg/js/react/mixins/PathUpdateOptional.js - lines changed 19, context: html, text, full: html, text
- src/hg/js/react/mixins/makefile - lines changed 8, context: html, text, full: html, text
- src/hg/js/react/react.mk - lines changed 38, context: html, text, full: html, text
- New toy CGI hgChooseDb based on PPT mockup and ideas from Ann and Matt: popular species icons and autocomplete search for species, as an alternative to hgGateway's menus. Uses the new ReactJS/ImmutableJS framework.
hgChooseDb.c has three modes of operation:
- HTML output for simple main page with a <div> container to be filled in by javascript
- cart-based JSON responses to ajax requests from javascript (using hg/lib/cartJson.c)
- no cart; fast JSON responses to species-search autocomplete requests
hgChooseDb.jsx is the React/JSX UI view code, compiled to bundle/reactHgChooseDb.js.
hgChooseDbModel.js is a subclass of js/model/lib/ImModel.js that gets initial state
from the server and then responds to user actions.
- src/hg/hgChooseDb/hgChooseDb.c - lines changed 287, context: html, text, full: html, text
- src/hg/hgChooseDb/makefile - lines changed 15, context: html, text, full: html, text
- src/hg/js/model/hgChooseDb/hgChooseDbModel.js - lines changed 64, context: html, text, full: html, text
- src/hg/js/model/hgChooseDb/makefile - lines changed 6, context: html, text, full: html, text
- src/hg/js/model/makefile - lines changed 1, context: html, text, full: html, text
- src/hg/js/react/bundle/reactHgChooseDb.js - lines changed 1, context: html, text, full: html, text
- src/hg/js/react/hgChooseDb/hgChooseDb.jsx - lines changed 187, context: html, text, full: html, text
- src/hg/js/react/hgChooseDb/makefile - lines changed 11, context: html, text, full: html, text
- src/hg/js/react/makefile - lines changed 1, context: html, text, full: html, text
- New CGI hgAi (Annotation Integrator) that uses new ReactJS/ImmutableJS framework.hgAi.c has three modes of operation:
- HTML output for simple main page with a <div> container to be filled in by javascript
- JSON responses to ajax requests from javascript (using hg/lib/cartJson.c)
- text output for queries on track data
hgAi.jsx is the React/JSX UI view code, compiled to bundle/reactHgAi.js.
hgAiModel.js is a subclass of js/model/lib/ImModel.js that gets initial state
from the server and then responds to user actions.
- src/hg/htdocs/goldenPath/help/hgAiHelp.html - lines changed 56, context: html, text, full: html, text
- src/hg/js/model/hgAi/hgAiModel.js - lines changed 283, context: html, text, full: html, text
- src/hg/js/model/hgAi/makefile - lines changed 6, context: html, text, full: html, text
- src/hg/js/model/makefile - lines changed 1, context: html, text, full: html, text
- src/hg/js/react/bundle/reactHgAi.js - lines changed 1, context: html, text, full: html, text
- src/hg/js/react/hgAi/hgAi.jsx - lines changed 464, context: html, text, full: html, text
- src/hg/js/react/hgAi/makefile - lines changed 11, context: html, text, full: html, text
- src/hg/js/react/makefile - lines changed 1, context: html, text, full: html, text
- jsx unfortunately writes log output to stderr. To keep top-level make > /dev/null quiet, redirect its stderr to stdout.
- src/hg/js/react/react.mk - lines changed 1, context: html, text, full: html, text
- Code review suggestions from Joe Thomas.
- src/hg/js/model/lib/CladeOrgDbMixin.js - lines changed 2, context: html, text, full: html, text
- src/hg/js/model/lib/ImModel.js - lines changed 6, context: html, text, full: html, text
- src/hg/js/model/lib/PositionSearchMixin.js - lines changed 2, context: html, text, full: html, text
- src/hg/js/model/lib/cart.js - lines changed 10, context: html, text, full: html, text
- Implementing Kate's suggestions from code review: use CSS classes instead of hardcoded styles in JSX; fix comment and proliferation of if's in annoFormatTab.refs #14649
- src/hg/htdocs/style/HGStyle.css - lines changed 68, context: html, text, full: html, text
- src/hg/js/react/bundle/reactHgAi.js - lines changed 2, context: html, text, full: html, text
- src/hg/js/react/bundle/reactHgChooseDb.js - lines changed 2, context: html, text, full: html, text
- src/hg/js/react/bundle/reactLibBundle.js - lines changed 2, context: html, text, full: html, text
- src/hg/js/react/hgAi/hgAi.jsx - lines changed 39, context: html, text, full: html, text
- src/hg/js/react/hgChooseDb/hgChooseDb.jsx - lines changed 15, context: html, text, full: html, text
- src/hg/js/react/lib/CheckboxLabel.jsx - lines changed 2, context: html, text, full: html, text
- src/hg/js/react/lib/CladeOrgDb.jsx - lines changed 3, context: html, text, full: html, text
- src/hg/js/react/lib/Icon.jsx - lines changed 3, context: html, text, full: html, text
- src/hg/js/react/lib/LabeledSelect.jsx - lines changed 6, context: html, text, full: html, text
- src/hg/js/react/lib/LoadingImage.jsx - lines changed 1, context: html, text, full: html, text
- src/hg/js/react/lib/Modal.jsx - lines changed 21, context: html, text, full: html, text
- src/hg/js/react/lib/PositionSearch.jsx - lines changed 8, context: html, text, full: html, text
- src/hg/js/react/lib/Sortable.jsx - lines changed 6, context: html, text, full: html, text
- src/hg/js/react/lib/TextInput.jsx - lines changed 3, context: html, text, full: html, text
- src/lib/annoFormatTab.c - lines changed 15, context: html, text, full: html, text
- I don't know how I missed this in 151a615e9, but jshint complains aboutthe use of this inside plain old functions as opposed to methods.
In mixins, it's actually OK because these functions will be .call'd with this (the ImModel subclass).
- src/hg/js/model/lib/CladeOrgDbMixin.js - lines changed 1, context: html, text, full: html, text
- src/hg/js/model/lib/PositionSearchMixin.js - lines changed 1, context: html, text, full: html, text
switch to files view, user index