File Changes for angie
switch to commits view, user indexv311_preview to v311_preview2 (2015-01-12 to 2015-01-20) v311
- src/hg/hgAi/hgAi.c
- lines changed 336, 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/hgAi/makefile
- lines changed 17, 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/hgChooseDb/hgChooseDb.c
- lines changed 287, 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/makefile
- lines changed 15, 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/htdocs/goldenPath/help/hgAiHelp.html
- lines changed 56, 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/style/HGStyle.css
- lines changed 55, context: html, text, full: html, text
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!
- lines changed 68, 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/inc/hCommon.h
- lines changed 3, 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/js/external/BackboneExtend.js
- lines changed 43, context: html, text, full: html, text
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/js/external/es5-sham.4.0.3.min.js
- lines changed 6, context: html, text, full: html, text
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/js/external/es5-shim.4.0.3.min.js
- lines changed 6, context: html, text, full: html, text
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/js/external/immutable.3.2.1.min.js
- lines changed 34, context: html, text, full: html, text
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/js/external/lodash.2.4.1.compat.min.js
- lines changed 61, context: html, text, full: html, text
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/js/external/makefile
- lines changed 13, context: html, text, full: html, text
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/js/install.mk
- lines changed 23, context: html, text, full: html, text
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/js/makefile
- lines changed 26, context: html, text, full: html, text
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/js/model/hgAi/hgAiModel.js
- lines changed 283, 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/js/model/hgAi/makefile
- lines changed 6, 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/js/model/hgChooseDb/hgChooseDbModel.js
- lines changed 64, 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/js/model/hgChooseDb/makefile
- lines changed 6, 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/js/model/lib/CladeOrgDbMixin.js
- lines changed 45, context: html, text, full: html, text
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!
- lines changed 2, context: html, text, full: html, text
Code review suggestions from Joe Thomas.
- lines changed 1, 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/ImModel.js
- lines changed 265, context: html, text, full: html, text
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!
- lines changed 6, context: html, text, full: html, text
Code review suggestions from Joe Thomas.
- src/hg/js/model/lib/PositionSearchMixin.js
- lines changed 54, context: html, text, full: html, text
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!
- lines changed 2, context: html, text, full: html, text
Code review suggestions from Joe Thomas.
- lines changed 1, 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/cart.js
- lines changed 75, context: html, text, full: html, text
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!
- lines changed 10, context: html, text, full: html, text
Code review suggestions from Joe Thomas.
- src/hg/js/model/lib/makefile
- lines changed 6, context: html, text, full: html, text
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/js/model/makefile
- lines changed 6, context: html, text, full: html, text
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!
- lines changed 1, 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.
- 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/js/react/bundle/reactHgAi.js
- 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.
- lines changed 2, 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/js/react/bundle/reactHgChooseDb.js
- lines changed 1, 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.
- lines changed 2, 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/js/react/bundle/reactLibBundle.js
- lines changed 1, context: html, text, full: html, text
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!
- lines changed 2, 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/js/react/hgAi/hgAi.jsx
- lines changed 464, 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.
- lines changed 39, 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/js/react/hgAi/makefile
- lines changed 11, 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/js/react/hgChooseDb/hgChooseDb.jsx
- lines changed 187, 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.
- lines changed 15, 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/js/react/hgChooseDb/makefile
- lines changed 11, 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/js/react/lib/CheckboxLabel.jsx
- lines changed 38, context: html, text, full: html, text
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!
- lines changed 2, 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/js/react/lib/CladeOrgDb.jsx
- lines changed 32, context: html, text, full: html, text
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!
- lines changed 3, 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/js/react/lib/Icon.jsx
- lines changed 55, context: html, text, full: html, text
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!
- lines changed 3, 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/js/react/lib/LabeledSelect.jsx
- lines changed 39, context: html, text, full: html, text
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!
- lines changed 6, 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/js/react/lib/LoadingImage.jsx
- lines changed 30, context: html, text, full: html, text
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!
- lines changed 1, 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/js/react/lib/Modal.jsx
- lines changed 55, context: html, text, full: html, text
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!
- lines changed 21, 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/js/react/lib/PositionSearch.jsx
- lines changed 214, context: html, text, full: html, text
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!
- lines changed 8, 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/js/react/lib/Section.jsx
- lines changed 22, context: html, text, full: html, text
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/js/react/lib/SetClearButtons.jsx
- lines changed 27, context: html, text, full: html, text
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/js/react/lib/Sortable.jsx
- lines changed 67, context: html, text, full: html, text
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!
- lines changed 6, 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/js/react/lib/TextInput.jsx
- lines changed 59, context: html, text, full: html, text
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!
- lines changed 3, 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/js/react/lib/makefile
- lines changed 13, context: html, text, full: html, text
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/js/react/makefile
- lines changed 8, context: html, text, full: html, text
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!
- lines changed 1, 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.
- 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/js/react/mixins/ImmutableUpdate.js
- lines changed 68, context: html, text, full: html, text
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/js/react/mixins/PathUpdate.js
- lines changed 16, context: html, text, full: html, text
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/js/react/mixins/PathUpdateOptional.js
- lines changed 19, context: html, text, full: html, text
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/js/react/mixins/makefile
- lines changed 8, context: html, text, full: html, text
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/js/react/react.mk
- lines changed 38, context: html, text, full: html, text
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!
- 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/simple.mk
- lines changed 10, context: html, text, full: html, text
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/js/subdirs.mk
- lines changed 22, context: html, text, full: html, text
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/lib/hCommon.c
- lines changed 7, 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/inc/common.h
- lines changed 3, 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/lib/annoFormatTab.c
- lines changed 15, 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/lib/common.c
- lines changed 15, 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.
switch to commits view, user index