Improve cookbook

[grtjn]

Put each recipe on separate page. Candidate recipes:

• Add (least-priv) user
• Change ML UI skin
• Change login mode (full, top-right, modal?, and also NO login!)
• Add highcharts (facets/values)
• Enable ESRI detail map
• Add Google search map
• ...

[grtjn]

• How to change snippet behavior (see also #138)

[patrickmcelwee]

• How to change label on search results

[grtjn]

Result labels: I created this ticket https://github.com/joemfb/ml-search-ng/issues/76

[grtjn]

• How to override ml-result/ml-facets template for custom tweaks..
• How to add lodlive

[patrickmcelwee]

• How to change port defaults (maybe wait for #151 to settle out first)

[grtjn]

Change login mode

• go to ui/app/route/routes.js, and add this line to the run for loginService:

loginService.loginMode('top-right'); // or 'modal', default: 'full'

By-pass login

• go to node-server/routes.js, and add this line at the beginning of the /user/status handler:

  req.session.user = { name: config.marklogic.user, password: config.marklogic.password, profile: null };

• add this line at the beginning of the /user/login handler:

  req.body = { username: config.marklogic.user, password: config.marklogic.password };

• you likely also want to disable PUT/POST in node-server/proxy.js (by putting those handlers in comment), or be very specific about what kind of requests to /v1 are allowed..

[grtjn]

Change ML UI skin

• open ui/styles/main.less in an editor, and uncomment either:

/* Blue design
@import "blues.less";
@import "blues-variables.less";
*/

• or:

/* MLU design
@import "mlu.less";
*/

• Note: don't uncomment both, that looks ugly!

[grtjn]

Enable highcharts

• run: bower install highcharts --save
• run: bower install ml-highcharts-ng --save
• add 'ml.highcharts' to the dependencies of the search module in ui/app/search/search.module.js

angular.module('app.search', ['ml.search', 'app.user', 'app.snippet', 'ml.highcharts']);

• add the following line somewhere in ui/app/search/search.html:

<ml-highchart highchart-config="ctrl.highchartConfig" ml-search="ctrl.mlSearch"></ml-highchart>

• add the following lines to the body of the SearchCtrl function in ui/app/search/search.controller.js:

ctrl.highchartConfig = {
      'options': {
        'chart': {
          'type': 'bar'
        },
        'tooltip': {
          'style': {
            'padding': 10,
            'fontWeight': 'bold'
          }
        }
      },
      'title': {
        'text': 'Title'
      },
      'xAxis': {
        'title': {
          'text': 'MyFacet'
        }
      },
      // constraint name for x axis
      'xAxisMLConstraint': 'MyFacet',
      // optional constraint name for categorizing x axis values
      //'xAxisCategoriesMLConstraint': 'MySecondFacet',
      'yAxis': {
        'title': {
          'text': 'Frequency'
        }
      },
      // constraint name for y axis ($frequency is special value for value/tuple frequency)
      'yAxisMLConstraint': '$frequency',
      'zAxis': {
        'title': {
          'text': null
        }
      },
      'size': {
        'height': 250,
        'width': 300
      },
      // limit of returned results
      'resultLimit': 15
    };

• Replace MyFacet above with the name of any defined facet.
• Restart gulp serve-dev if you are using --nosync, otherwise just refresh your browser
• Uncomment the line with MySecondFacet, and replace that with the name of another facet to show values of the first facet grouped by values from the second facet. eyeColor with gender as second facet is a good example for the sample-data.
• see also: https://github.com/ryanjdew/ml-highcharts-ng#ml-highcharts-ng

[grtjn]

How to add Lodlive:

• run: bower install ml-lodlive --save
• run: bower install ml-lodlive-ng --save
• add 'ml.lodlive' to the dependencies of the search module in ui/app/search/search.module.js
• add the following line somewhere in ui/app/search/search.html:

<ml-lodlive iri="ctrl.iri" profile="ctrl.profile"></ml-lodlive>

• add 'MLLodliveProfileFactory' to the injection list of SearchCtrl in ui/app/search/search.controller.js
• add a parameter called factory to the argument list of SearchCtrl in ui/app/search/search.controller.js
• add the following lines to the body of the SearchCtrl function in ui/app/search/search.controller.js:

  ctrl.iri = 'http://dbpedia.org/resource/Barack_Obama';
  ctrl.profile = factory.profile('dbpedia');

• see also: http://grtjn.github.io/ml-lodlive-ng

[grtjn]

Changing result label

• Add a label function to the SearchCtrl:

ctrl.label = function(result) {
  return _.last( result.uri.split('/') );
};

• Enable label callback on the ml-results directive, by adding the label attribute like:

<ml-results .... label="ctrl.label(result)></ml-results>"

[jenbreese]

@grtjn I updated the Wiki with documentation on the CSS structure. I discussed it with @patrickmcelwee and added to https://github.com/marklogic/slush-marklogic-node/wiki/Core-Tools-and-Components and https://github.com/marklogic/slush-marklogic-node/wiki/Customization-recipes#change-the-css Let me know if you have concerns or edits to discuss. Thanks!

[grtjn]

I think we need to start pushing these comments into wiki, but not want the 0.2.0 release wait for this..

[grtjn]

@patrickmcelwee should we just add this to the slush wiki directly, or were we still going through your wiki fork?

[patrickmcelwee]

It can just be added directly, I think. Better to get good documentation out there rather than to wait for lots of review to make it perfect.

One suggestion:

I would love to see a small paragraph on what ml-highcharts adds over a generic highcharts. I see that it has something to do with facets, but not sure what.

[grtjn]

yeah, we need to fill in a number of blanks. I'm hoping to have a bit of spare time to work on that at the summit.. ;)

[grtjn]

New components worth adding to the cookbook:

• https://github.com/grtjn/ml-synonyms-ng
• https://github.com/grtjn/ml-histogram-ng
• https://github.com/grtjn/ml-constraints (in combi with histogram for instance)
• https://github.com/grtjn/d3-cloud-ng
• https://github.com/grtjn/ml-open-calais
• https://github.com/grtjn/ml-snippeting
• https://github.com/grtjn/ml-decorators
• https://github.com/daveegrant/ml-esri-maps-ng

Did I forget anything of interest?