DM-7535 script that shows the API functions that should be documented first

tgoldina · tgoldina · commit 94fc67b91f55 · 2016-09-06T17:18:49.000-07:00
diff --git a/src/firefly/html/demo/ffapi-2images.html b/src/firefly/html/demo/ffapi-2images.html
@@ -29,6 +29,8 @@ <h3>Firefly - new API demo</h3>
 <div id="container" style="white-space: nowrap; padding: 5px">
     <input id="selectionCallbackTrigger" type="button" onclick="ffTrackSelections()" value="Track selections"/>
     &nbsp;
+    <input id="selectionExtensions" type="button" onclick="ffSelectionExtensions()" value="Add selection extensions"/>
+    &nbsp;
     <input id="readoutCallbackTrigger" type="button" onclick="ffTrackReadout()" value="Track mouse readout"/>
     &nbsp;
     <input id="regionsToggle" type="button" onclick="ffToggleRegions()" value="Show regions"/>
@@ -42,6 +44,7 @@ <h3>Firefly - new API demo</h3>
 
         var trackSelectionRemover;
         var doTrackSelection = false;
+        var hasSelectionExtensions = false;
 
         var trackReadoutRemover;
         var doTrackReadout = false;
@@ -54,10 +57,17 @@ <h3>Firefly - new API demo</h3>
         ];
         var regionsShown = false;
 
+        const regionsToAdd = [
+            'image; box 400 400 72 72 0 # color=green',
+            'image; box 328 400 72 72 0 # color=green',
+            'image; box 256 400 72 72 0 # color=green',
+            'image; box 184 400 72 72 0 # color=green',
+            'image; box 112 400 72 72 0 # color=green'
+        ];
         var regionAdd = true;
         var regionIdx = 0;
 
-        const regionToAdd = 'image; box 400 400 72 72 0 # color=green';
+
 
         function ffTrackSelections() {
             doTrackSelection = !doTrackSelection;
@@ -81,6 +91,61 @@ <h3>Firefly - new API demo</h3>
             }
         }
 
+        const extensionCallback= function(data) {
+            // do something when the extension is selected called.
+            console.log('Callback for '+data.type+' extension '+data.id);
+            console.log(data);
+        };
+
+        const extensions = [
+            {   // point selection extension: object literal to create extension definition
+                id : 'PointExtension',     // extension id
+                plotId : 'image1',         // plot to put extension on
+                title : 'Point operation description', // title user sees
+                imageUrl : 'http://localhost:8080/firefly/images/catalog_28x28.png', // url to the icon
+                toolTip : 'Custom operation on point selection',    // tooltip
+                extType: 'POINT',          // type of extension
+                callback: extensionCallback          // function (defined above) for callback
+            },
+            {   // area selection extension: object literal to create extension definition
+                id : 'AreaExtension',     // extension id
+                plotId : 'image1',         // plot to put extension on
+                title : 'Area operation description', // title user sees
+                imageUrl : 'http://localhost:8080/firefly/images/mask_28x28.png', // url to the icon
+                toolTip : 'Custom operation on area selection', // tooltip
+                extType: 'AREA_SELECT',    // type of extension
+                callback: extensionCallback          // function (defined above) for callback
+            },
+            {   // line selection extension: object literal to create extension definition
+                id : 'LineExtension',     // extension id
+                plotId : 'image1',         // plot to put extension on
+                title : 'Do something', // title user sees
+                toolTip : 'Custom operation on line selection', // tooltip
+                extType: 'LINE_SELECT',    // type of extension
+                callback: extensionCallback          // function (defined above) for callback
+            }];
+
+        function ffSelectionExtensions() {
+            hasSelectionExtensions = !hasSelectionExtensions;
+            const btn = document.getElementById('selectionExtensions');
+            if (!btn) {
+                console.log('Internal error: can not find selectionExtensions button');
+                return;
+            }
+            // add/remove a button in image context menu, which appears on selection
+            //   and triggers user defined callback, when pressed
+            if (hasSelectionExtensions) {
+                extensions.forEach(firefly.util.image.extensionAdd);
+                btn.value = 'Remove selection extensions';
+            } else {
+                const removeExtension = function(extension) {
+                    firefly.util.image.extensionRemove(extension.id);
+                };
+                extensions.forEach(removeExtension);
+                btn.value = 'Add selection extensions';
+            }
+        }
+
         function ffTrackReadout() {
             doTrackReadout = !doTrackReadout;
             const btn = document.getElementById('readoutCallbackTrigger');
@@ -125,24 +190,25 @@ <h3>Firefly - new API demo</h3>
                 return;
             }
             if (regionAdd) {
-                // issue1: empty region array does not work - there should be at least 1 region
-                // issue2: if color=green (same color as the color of regionToAdd) it's not possible to add the region,
-                //    because the original and added regions will be perceived the same
-                // issue3: when region1 is present, it's not possible to select regions in region2
-                firefly.action.dispatchCreateRegionLayer('region2', 'Region Layer 2', null, ['image; box 40 400 72 72 0 # color=blue'], ['image1', 'image2']);
-                firefly.action.dispatchAddRegionEntry('region2', regionToAdd);
-                regionAdd = false;
-                btn.value = 'Delete region';
+                firefly.action.dispatchAddRegionEntry('dynregions', regionsToAdd[regionIdx], ['image1', 'image2'], 'Dynamic Regions');
+                regionIdx++;
+                if (regionIdx === regionsToAdd.length) {
+                    regionAdd = false;
+                    btn.value = 'Delete region';
+                    regionIdx--;
+                }
             } else {
-                firefly.action.dispatchRemoveRegionEntry('region2', regionToAdd);
-                firefly.action.dispatchDeleteRegionLayer('region2', ['image1', 'image2']);
-                regionAdd = true;
-                btn.value = 'Add region';
+                firefly.action.dispatchRemoveRegionEntry('dynregions', regionsToAdd[regionIdx]);
+                regionIdx--;
+                if (regionIdx < 0) {
+                    regionAdd = true;
+                    btn.value = 'Add region';
+                    regionIdx++;
+                }
             }
         }
 
 
-
         /**
          * @typedef {object} ChangePlotAttrAction action object
          * @prop {string} type   action type
@@ -160,7 +226,9 @@ <h3>Firefly - new API demo</h3>
 
         /*
          * Action listener for CHANGE_PLOT_ATTRIBUTE action
-         * Callback function should accept action object, which has type and payload properties:
+         * Callback function should accept action object, which has type and payload properties.
+         * Please, note, that the coordinate system of a point in the action payload
+         * depends on the user selection. To make sure we always get image coordinates, we need to convert.
          * @param {ChangePlotAttrAction}
          */
         function onPlotAttributeChange(action) {
@@ -170,10 +238,12 @@ <h3>Firefly - new API demo</h3>
             if (action.payload.attValue.pt) {
                 console.log(action.payload.plotId+' '+action.payload.attKey+' pt:');
                 console.log(getImagePt(action.payload.attValue.pt));
-            } else if (action.payload.attValue.pt0) {
+            }
+            if (action.payload.attValue.pt0) {
                 console.log(action.payload.plotId+' '+action.payload.attKey+' pt0:');
                 console.log(getImagePt(action.payload.attValue.pt0));
-            } else if (action.payload.attValue.pt1) {
+            }
+            if (action.payload.attValue.pt1) {
                 console.log('pt1:');
                 console.log(getImagePt(action.payload.attValue.pt1));
             }
@@ -237,9 +307,7 @@ <h3>Firefly - new API demo</h3>
             };
             firefly.showImage('image2_div', req2);
 
-            firefly.action.dispatchCreateRegionLayer('region2', 'Region Layer 2', null, ['image; box 200 200 72 72 0 # color=red'], ['image1', 'image2']);
-
-
+            firefly.action.dispatchCreateRegionLayer('statregion', 'Static region', null, ['image; box 220 220 20 80 45 # color=#0CB5ED'], ['image1', 'image2']);
         }
     }
 </script>
diff --git a/src/firefly/js/api/ApiBuild.js b/src/firefly/js/api/ApiBuild.js
@@ -57,7 +57,7 @@ import './ApiStyle.css';
 
 /**@namespace firefly.util*/
 
-/** @namespace firefly.util.chat*/
+/** @namespace firefly.util.chart*/
 
 /** @namespace firefly.util.data*/
 
@@ -89,24 +89,24 @@ export function initApi() {
 
 /**
 
-  Structure of API
-   {
-              //--- High level API , all high level api are in the root
-     all high level functions....
-     
-            //--- Low level API, lowlevel api are under action, ui, util
-     action : { all dispatch functions...
-               type: {all action type constants}
-              }
-     ui: { high level react components }
-     util { renderDom, unrenderDom, isDebug, debug       // built by ApiUtil.js
-            image : {image utility routines}                // imported from ApiUtilImage.js
-            xyplot : {xyplot utility routines}               // imported from ApiUtilXYPlot.js //todo
-            table : {table utility routines}                // imported from ApiUtilTable.js //todo
-            data : {data utility routines???? }            // //todo do we need this?????
+ Structure of API
+     {
+                //--- High level API , all high level api are in the root
+       all high level functions....
+
+              //--- Low level API, lowlevel api are under action, ui, util
+       action : { all dispatch functions...
+                 type: {all action type constants}
+                }
+       ui: { high level react components }
+       util { renderDom, unrenderDom, isDebug, debug       // built by ApiUtil.js
+              image : {image utility routines}             // imported from ApiUtilImage.js
+              chart : {chart utility routines}             // imported from ApiUtilChart.js
+              table : {table utility routines}             // imported from ApiUtilTable.js
+              data : {data utility routines???? }          //todo do we need this?????
+       }
      }
-   }
-*/
+ */
 
 /**
  * Return the api object.
diff --git a/src/firefly/js/api/ApiUtilImage.jsx b/src/firefly/js/api/ApiUtilImage.jsx
@@ -26,11 +26,7 @@ const API_READOUT= 'apiReadout';
 // It should have a jsdoc
 //----------------------------------------------------------------
 // NOTE 
-// NOTE 
-
-/**
- * @namespace firefly.util.image.CCUtil
- **/
+// NOTE
 
 /**
  * @public
@@ -41,18 +37,14 @@ export {WPConst, WebPlotRequest, findInvalidWPRKeys, confirmPlotRequest} from '.
 export {RequestType} from '../visualize/RequestType';
 export {ExpandType, dispatchApiToolsView} from '../visualize/ImagePlotCntlr.js';
 
-export {CsysConverter} from '../visualize/CsysConverter.js';
+export {CysConverter} from '../visualize/CsysConverter.js';
 export {CCUtil} from '../visualize/CsysConverter.js';
 export {watchCoverage} from '../visualize/saga/CoverageWatcher.js';
 export {watchImageMetaData} from '../visualize/saga/ImageMetaDataWatcher.js';
 
+export {extensionAdd, extensionRemove} from '../core/ExternalAccessUtils.js';
+
 
-/*
- *
- *
- *
- *
- */
 /**
  * @summary  Get plot object with the given plot id, when plotId is not included, active plot is returned.
  * @param {string} [plotId] the plotId, optional
@@ -91,7 +83,7 @@ export function initAutoReadout(ReadoutComponent= DefaultApiReadout,
  * @param algorithm the stretch algorithm to use, may be 'Linear', 'Log', 'LogLog', 'Equal', 'Squared', 'Sqrt'
  * @public
  * @function serializeSimpleRangeValues
- *  @memberof firefly.util.image
+ * @memberof firefly.util.image
  */
 export function serializeSimpleRangeValues(stretchType,lowerValue,upperValue,algorithm) {
     const rv= RangeValues.makeSimple(stretchType,lowerValue,upperValue,algorithm);
diff --git a/src/firefly/js/core/ExternalAccessCntlr.js b/src/firefly/js/core/ExternalAccessCntlr.js
@@ -1,10 +1,10 @@
 /*
  * License information at https://github.com/Caltech-IPAC/firefly/blob/master/License.txt
  */
-
-import ExternalAccessUtils, {extensionActivate} from './ExternalAccessUtils.js';
+import ExternalAccessUtils from './ExternalAccessUtils.js';
 
 const EXTENSION_ADD= 'ExternalAccessCntlr/extensionAdd';
+const EXTENSION_REMOVE= 'ExternalAccessCntlr/extensionRemove';
 const EXTENSION_ACTIVATE= 'ExternalAccessCntlr/extensionActivate';
 const CHANNEL_ACTIVATE= 'ExternalAccessCntlr/channelActivate';
 
@@ -25,6 +25,10 @@ export function dispatchExtensionAdd(extension) {
     flux.process({type: ExternalAccessCntlr.EXTENSION_ADD, payload: {extension}});
 }
 
+export function dispatchExtensionRemove(extensionId) {
+    flux.process({type: ExternalAccessCntlr.EXTENSION_REMOVE, payload: {id: extensionId}});
+}
+
 export function dispatchExtensionActivate(extension, resultData) {
     flux.process({type: ExternalAccessCntlr.EXTENSION_ACTIVATE, payload: {extension, resultData}});
 }
@@ -35,7 +39,6 @@ export function dispatchChannelActivate(channelId) {
 
 
 
-
 const extensionActivateActionCreator= function(rawAction) {
     return (dispatcher) => {
 
@@ -60,6 +63,9 @@ function reducer(state=initState, action={}) {
         case EXTENSION_ADD  :
             retState= addExtension(state,action);
             break;
+        case EXTENSION_REMOVE  :
+            retState= removeExtension(state,action);
+            break;
         case EXTENSION_ACTIVATE  :
             retState= state;// todo something
             break;
@@ -78,6 +84,11 @@ const addExtension= function(state, action) {
     return Object.assign({}, state, {extensionList:newAry});
 };
 
+const removeExtension= function(state, action) {
+    var {id}= action.payload;
+    var newAry= state.extensionList.filter((extension) => {return (extension.id !== id);});
+    return Object.assign({}, state, {extensionList:newAry});
+};
 
 const updateChannel= function(state, action) {
     var {channelId}= action.payload;
@@ -90,7 +101,7 @@ const updateChannel= function(state, action) {
 //============ EXPORTS ===========
 
 var ExternalAccessCntlr = {
-    reducer, extensionActivateActionCreator, EXTENSION_ADD,
+    reducer, extensionActivateActionCreator, EXTENSION_ADD, EXTENSION_REMOVE,
     EXTENSION_ACTIVATE, CHANNEL_ACTIVATE, EXTERNAL_ACCESS_KEY,
     ALL_MPW
     };
diff --git a/src/firefly/js/core/ExternalAccessUtils.js b/src/firefly/js/core/ExternalAccessUtils.js
@@ -7,7 +7,7 @@ import {flux} from '../Firefly.js';
 import ExternalAccessCntlr from './ExternalAccessCntlr.js';
 import {reportUserAction} from '../rpc/SearchServicesJson.js';
 import { parseImagePt, parseWorldPt, parseScreenPt } from '../visualize/Point.js';
-import {getWsChannel} from './messaging/WebSocketClient.js'
+import {getWsChannel} from './messaging/WebSocketClient.js';
 
 const EMPTY_ARRAY=[];
 
@@ -56,6 +56,10 @@ export const extensionAdd= function(extension) {
     flux.process({type: ExternalAccessCntlr.EXTENSION_ADD, payload: {extension}});
 };
 
+export const extensionRemove= function(extensionId) {
+    flux.process({type: ExternalAccessCntlr.EXTENSION_REMOVE, payload: {id: extensionId}});
+};
+
 export const extensionActivate= function(extension, resultData) {
     flux.process({type: ExternalAccessCntlr.EXTENSION_ACTIVATE, payload: {extension, resultData}});
 };
@@ -66,6 +70,6 @@ export const channelActivate= function(channelId) {
 };
 
 
-var ExternalAccessUtils= { doExtensionActivate, extensionAdd, extensionActivate, channelActivate,
+var ExternalAccessUtils= { doExtensionActivate, extensionAdd, extensionRemove, extensionActivate, channelActivate,
     getRemoteChannel, getExtensionList };
 export default ExternalAccessUtils;
diff --git a/src/firefly/js/visualize/CsysConverter.js b/src/firefly/js/visualize/CsysConverter.js
