bd1ffcfe55ffbc4a280531a06b45eb75e83413d7
angie
  Fri Jan 9 14:24:57 2015 -0800
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!

diff --git src/hg/js/makefile src/hg/js/makefile
index 895dec7..adfb015 100644
--- src/hg/js/makefile
+++ src/hg/js/makefile
@@ -1,65 +1,45 @@
 include ../../inc/common.mk
+include install.mk
 
-# recursive target to do install to DEST, with extra excludes EXCL.
+SUBDIRS= external model react
+include subdirs.mk
 
 # UCSC js files must pass jshint
 UCSC_JS_FILES=ajax.js alleles.js autocomplete.js edwPersona.js \
     hgCustom.js hgGateway.js hgHubConnect.js hgTracks.js \
     hgVarAnnogrator.js hui.js jsHelper.js utils.js ddcl.js subCfg.js \
     encodeProject.js encodeDataSummary.js encodeDataMatrix.js encodeChipMatrix.js encodeMatrix.js
 
 # STATIC files must pass jshint
 STATIC_FILES=staticDoc.js
 
 # JQUERY files and other third pary files which have NOT BEEN TOUCHED by UCSC
 JQUERY_FILES_UNTOUCHED=jquery.js jquery.imgareaselect.js jquery-ui.js jquery.contextmenu.js \
     jquery.cookie.js jquery.watermarkinput.js \
     jquery.floatheader.js jquery.rotateTableCellContent.js jquery.plugins.js \
     jquery.validate.min.js jquery.history.js
 
 # JQUERY or other third pary files which HAVE BEEN MODIFIED by UCSC
 JQUERY_FILES_MODIFIED=jquery.tablednd.js ui.dropdownchecklist.js
 
 JQUERY_FILES=${JQUERY_FILES_UNTOUCHED} ${JQUERY_FILES_MODIFIED}
 
 # SYMLINKED files are include in CGIs via a version or timestamped symlink
 #           to force client side updates
 SYMLINKED_FILES=${UCSC_JS_FILES} ${JQUERY_FILES}
 
 ifdef LOWELAB
     # LOWE lab files should be forced through jshint (but currently aren't)
     SYMLINKED_FILES += lowetooltip.js loweautocomplete.js
 endif
 
-user:
-	if test -d ${DOCUMENTROOT}-${USER}; then \
-	    ${MAKE} doInstall DEST=${DOCUMENTROOT}-${USER}/js; \
-	else \
-	    ${MAKE} doInstall DEST=${DOCUMENTROOT}/js/${USER}; \
-	fi
-
-alpha:
-	${GITUP}
-	${MAKE} doInstall DEST=${DOCUMENTROOT}/js
-
-beta:
-	${GITUP} 
-	${MAKE} doInstall DEST=${DOCUMENTROOT}-beta/js extra=-forceVersionNumbers
-
-clean:
-
-compile:
-
-install:
-	${MAKE} doInstall DEST=${DOCUMENTROOT}/js
-
 jshint:
 	${JSHINT} ${UCSC_JS_FILES} ${STATIC_FILES}
 
-doInstall: jshint
+doInstall: jshint ${SUBDIRS:%=%.doInstall}
 	@mkdir -p ${DEST}/
 	../utils/cpAndLinkToResourceFiles.pl ${extra} -exclude='makefile' \
 			-versionFile=../inc/versionInfo.h -destDir=${DEST} ${SYMLINKED_FILES}
 	for file in ${STATIC_FILES}; do \
 	    rsync -a $$file ${DEST}/; \
 	done