Skip to content

Instantly share code, notes, and snippets.

@bollwyvl

bollwyvl/components.ipynb

Forked from tonyfast/components.ipynb
Last active March 14, 2016 12:12
Show Gist options
  • Save bollwyvl/f7b0e73794c0a2d26c54 to your computer and use it in GitHub Desktop.
Save bollwyvl/f7b0e73794c0a2d26c54 to your computer and use it in GitHub Desktop.
Download ZIP
Live updating html renderings in the notebook
Display the source blob
Display the rendered blob
Raw
components.ipynb
{
"cells": [
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": false
},
"outputs": [],
"source": [
"%%file environment.yml\n",
"name: components\n",
"channels:\n",
" - javascript\n",
" - javascript/label/dev\n",
"dependencies:\n",
" - coffee-script\n",
" - nodejs\n",
" - ipywidgets\n",
" - lxml\n",
" - requests\n",
" - pandas\n",
" - cssselect\n",
" - pip:\n",
" - coffeetools\n",
" - pyjade\n",
" - pyquery\n",
" - jinja2schema\n",
" - jademagic"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": false
},
"outputs": [],
"source": [
"!conda env update"
]
},
{
"cell_type": "code",
"execution_count": 50,
"metadata": {
"collapsed": false
},
"outputs": [],
"source": [
"import mistune, pyjade, pyquery, jinja2, pandas, IPython, ipywidgets, traitlets, requests, jinja2schema\n",
"from coffeetools import coffee\n",
"%reload_ext autoreload\n",
"%autoreload 2\n",
"%reload_ext jademagic\n",
"response = requests.get('https://api.github.com/repos/jupyter/jupyter/events')\n",
"df = pandas.DataFrame(response.json())"
]
},
{
"cell_type": "code",
"execution_count": 51,
"metadata": {
"collapsed": false
},
"outputs": [],
"source": [
"class ComponentBase( traitlets.HasTraits ):\n",
" import jinja2, ipywidgets, traitlets, pyquery, jinja2schema\n",
" type = 'html'\n",
" query = pyquery.PyQuery(\"\"\"</>\"\"\")\n",
" string = traitlets.Unicode(default_value=\"\"\"\"\"\").tag(description=\"\"\"An HTML string template.\"\"\")\n",
" data = traitlets.Dict( default_value={} )\n",
" processor = staticmethod( lambda v: v) \n",
" \n",
" def __init__( self, env=jinja2.Environment(loader=jinja2.DictLoader({})), name=\"\", **kwargs ):\n",
" for key, value in kwargs.items():\n",
" if not key in ['string','data']:\n",
" setattr( self, key, value )\n",
" self.html = ipywidgets.HTML(\"\"\"\"\"\")\n",
" self.env, self.name = [env, name]\n",
" self._load_template(\"\"\"\"\"\") \n",
" for key, value in kwargs.items():\n",
" if key in ['string','data']:\n",
" setattr( self, key, value )\n",
"\n",
" \n",
" @traitlets.observe('string')\n",
" def reset( self, change = {} ):\n",
" value = self.processor( change['new'] if 'new' in change else self.string )\n",
" if self.type in ['javascript']:\n",
" self.query = self.pyquery.PyQuery( '<script></script>' ).text( value )\n",
" else:\n",
" self.query = self.pyquery.PyQuery( value )\n",
" self._update_template()\n",
" \n",
" def _load_template( self, template_string ):\n",
" if self.name:\n",
" self.env.loader.mapping[ self.name ] = template_string\n",
" self.template = self.env.get_template( self.name )\n",
" else:\n",
" self.template = self.env.from_string( template_string ) \n",
" \n",
" def _update_template( self ):\n",
" template_string = self.query.outerHtml() \n",
" self.template_variables = jinja2schema.infer( template_string )\n",
" self._load_template( template_string )\n",
" self.update()\n",
" \n",
" @traitlets.observe('data')\n",
" def update( self, change = {} ):\n",
" try:\n",
" self.html.value = self.template.render( **self.data )\n",
" except:\n",
" pass\n",
" \n",
" def __mul__( self, other ):\n",
" block_string = \"\"\"\"\"\"\n",
" for value in other:\n",
" block_string += self.template.render( **value )\n",
" return ComponentBase( env = self.env, string = block_string, data = self.data, type=self.type )\n",
" \n",
" def __sub__( self, other ):\n",
" for query_string in other.split( ',' ):\n",
" self.query(query_string).html(\"\")\n",
" return ComponentBase( env = self.env, string = self.query.outerHtml(), data = self.data, type=self.type )\n",
" \n",
" def _repr_html_( self ):\n",
" return self.html.value\n",
" \n",
" def __repr__( self ):\n",
" return self.html.value\n",
" \n",
"class LayoutComponent( ComponentBase ):\n",
" env = jinja2.Environment(loader=jinja2.DictLoader({}))\n",
" component = traitlets.Dict(default_value={}).tag(description=\"\"\"Components to Layout\"\"\")\n",
" \n",
" def __init__( self, **kwargs ):\n",
" super().__init__( name='page', env=self.env, **kwargs )\n",
" \n",
" def extend( self, component_name, **kwargs ):\n",
" self.component = { \n",
" **self.component, \n",
" **{ \n",
" component_name: ComponentBase( name=component_name, env=self.env, **kwargs ) \n",
" } \n",
" }\n",
" return self.component[ component_name ]\n",
" "
]
},
{
"cell_type": "code",
"execution_count": 52,
"metadata": {
"collapsed": false
},
"outputs": [],
"source": [
"issues = df[df.type.apply(lambda s:s.startswith('Issues'))].to_dict(orient='records')\n",
"layout = LayoutComponent()"
]
},
{
"cell_type": "code",
"execution_count": 53,
"metadata": {
"collapsed": false
},
"outputs": [],
"source": [
"panel = layout.extend( 'new', string=\"\"\"h4 {{payload.issue.body}}\"\"\", processor=pyjade.process)\n",
"panel.html"
]
},
{
"cell_type": "code",
"execution_count": 54,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"panel.data = issues[0]"
]
},
{
"cell_type": "code",
"execution_count": 55,
"metadata": {
"collapsed": false
},
"outputs": [],
"source": [
"panel.string = panel.string.replace('h4','p.lead')"
]
},
{
"cell_type": "code",
"execution_count": 56,
"metadata": {
"collapsed": false
},
"outputs": [],
"source": [
"panel.string = \"\"\"\n",
"div.row\n",
" div.panel.panel-warning\n",
" div.panel-heading\n",
" h4 {{actor.login}}\n",
" div.panel-body\n",
" \n",
" p.load {{payload.issue.body or 'None'}}\n",
"\"\"\""
]
},
{
"cell_type": "code",
"execution_count": 57,
"metadata": {
"collapsed": false
},
"outputs": [],
"source": [
"header = panel - '.panel-body'\n",
"header.html"
]
},
{
"cell_type": "code",
"execution_count": 58,
"metadata": {
"collapsed": false
},
"outputs": [],
"source": [
"@ipywidgets.interact\n",
"def change_times( i=[0,len(issues)-1]):\n",
" panel.data = header.data = issues[i]"
]
},
{
"cell_type": "code",
"execution_count": 59,
"metadata": {
"collapsed": false
},
"outputs": [
{
"data": {
"text/html": [
"<div><div class=\"row\">\n",
" <div class=\"panel panel-warning\">\n",
" <div class=\"panel-heading\">\n",
" <h4>ziky90</h4>\n",
" </div>\n",
" <div class=\"panel-body\">\n",
" <p class=\"load\">I am using `jupyter` notebook and since short time ago logs stopped to appear in output cells and started to appear only in the terminal.&#13;\n",
"&#13;\n",
"I have described the problem here:&#13;\n",
"http://stackoverflow.com/questions/35936086/jupyter-notebook-does-not-print-logs-to-the-output-cell/35940918#35940918&#13;\n",
"&#13;\n",
"To summarise this, I have found that since there is not specified exact version of `ipykernel` package in setup in `jupyter`. There was changed `ipykernel`'s version that is being installed.&#13;\n",
"&#13;\n",
"Logging to output cell works correctly for `ipykernel==4.2.2` and earlier, but since `4.3.0` https://github.com/ipython/ipykernel/releases/tag/4.3.0 logs goes to terminal instead of the output cell.&#13;\n",
"&#13;\n",
"I am not sure, but my guess is that the problem is caused by this commit: https://github.com/ipython/ipykernel/commit/65b6144d191b867c67d9724cd5e7b94e9f688d83</p>\n",
" </div>\n",
" </div>\n",
"</div><div class=\"row\">\n",
" <div class=\"panel panel-warning\">\n",
" <div class=\"panel-heading\">\n",
" <h4>ziky90</h4>\n",
" </div>\n",
" <div class=\"panel-body\">\n",
" <p class=\"load\">I am using `jupyter` notebook and since short time ago logs stopped to appear in output cells and started to appear only in the terminal.&#13;\n",
"&#13;\n",
"I have described the problem here:&#13;\n",
"http://stackoverflow.com/questions/35936086/jupyter-notebook-does-not-print-logs-to-the-output-cell/35940918#35940918&#13;\n",
"&#13;\n",
"To summarise this, I have found that since there is not specified exact version of `ipykernel` package in setup in `jupyter`. There was changed `ipykernel`'s version that is being installed.&#13;\n",
"&#13;\n",
"Logging to output cell works correctly for `ipykernel==4.2.1` and earlier, but since `4.3.0` https://github.com/ipython/ipykernel/releases/tag/4.3.0 logs goes to terminal instead of the output cell.</p>\n",
" </div>\n",
" </div>\n",
"</div><div class=\"row\">\n",
" <div class=\"panel panel-warning\">\n",
" <div class=\"panel-heading\">\n",
" <h4>willingc</h4>\n",
" </div>\n",
" <div class=\"panel-body\">\n",
" <p class=\"load\">On Monday, ReadTheDocs changed their service to opt in projects for display of a small ad in the bottom left of the docs (they do not allow tracking of users by third party scripts). See [blog post](https://blog.readthedocs.com/ads-on-read-the-docs/) for details.&#13;\n",
"&#13;\n",
"For all the project documentation that I have permissions on, I have disabled the advertising feature for the following reasons:&#13;\n",
"&#13;\n",
"- this is a decision that should be made by the larger project community or steering council to opt in, if desired&#13;\n",
"- I personally support ReadTheDocs financially with the ReadTheDocs Gold contribution monthly.&#13;\n",
"- I also contribute my time as I know other devs on Jupyter do as well.&#13;\n",
"&#13;\n",
"It is my belief that the advertising feature was added to address commercial projects who are \"free riders\" in an economic sense. I believe that RTD is committed to the open source community and the needs of the community.&#13;\n",
"&#13;\n",
"For now, I will keep the ads turned off unless the consensus is different. Thanks!&#13;\n",
"&#13;\n",
"cc/ @fperez @ellisonbg @minrk @carreau @takluyver @jhamrick @jdfreder who are active with the docs. Others, please feel free to voice your thoughts as well.</p>\n",
" </div>\n",
" </div>\n",
"</div><div class=\"row\">\n",
" <div class=\"panel panel-warning\">\n",
" <div class=\"panel-heading\">\n",
" <h4>Carreau</h4>\n",
" </div>\n",
" <div class=\"panel-body\">\n",
" <p class=\"load\">when I start the server by command ```jupyter notebook```, the ___Notebooks___ options is disabled, even when I uninstall and then re-install all related packages, it still can't work.&#13;\n",
"my env is python3, mac osx 10.11.2, please kindly suggest, thanks.&#13;\n",
"<img width=\"1062\" alt=\"capture\" src=\"https://cloud.githubusercontent.com/assets/1047330/12407042/e7906cec-be8d-11e5-942b-111be929540c.png\"/>&#13;\n",
"</p>\n",
" </div>\n",
" </div>\n",
"</div><div class=\"row\">\n",
" <div class=\"panel panel-warning\">\n",
" <div class=\"panel-heading\">\n",
" <h4>juliohm</h4>\n",
" </div>\n",
" <div class=\"panel-body\">\n",
" <p class=\"load\">Moving the issue from IPython to Jupyter.&#13;\n",
"&#13;\n",
"Previous issue: https://github.com/ipython/ipython/issues/7519</p>\n",
" </div>\n",
" </div>\n",
"</div><div class=\"row\">\n",
" <div class=\"panel panel-warning\">\n",
" <div class=\"panel-heading\">\n",
" <h4>takluyver</h4>\n",
" </div>\n",
" <div class=\"panel-body\">\n",
" <p class=\"load\">I recently cannot use the notebook anymore with a python3 kernel.&#13;\n",
"&#13;\n",
"My syslog output :&#13;\n",
"&#13;\n",
"[78941.591573] jupyter-noteboo[4703]: segfault at bddc24180 ip 00007f0bdb576f5b sp 00007ffcbd5d6bf0 error 4 in socket.cpython-34m.so[7f0bdb567000+16000]&#13;\n",
"&#13;\n",
"&#13;\n",
"The only thing working is opening a python2 kernel with the notebook using the 'ipython2 notebook' command...&#13;\n",
"&#13;\n",
"&#13;\n",
"</p>\n",
" </div>\n",
" </div>\n",
"</div></div>"
],
"text/plain": [
"<div><div class=\"row\">\n",
" <div class=\"panel panel-warning\">\n",
" <div class=\"panel-heading\">\n",
" <h4>ziky90</h4>\n",
" </div>\n",
" <div class=\"panel-body\">\n",
" <p class=\"load\">I am using `jupyter` notebook and since short time ago logs stopped to appear in output cells and started to appear only in the terminal.&#13;\n",
"&#13;\n",
"I have described the problem here:&#13;\n",
"http://stackoverflow.com/questions/35936086/jupyter-notebook-does-not-print-logs-to-the-output-cell/35940918#35940918&#13;\n",
"&#13;\n",
"To summarise this, I have found that since there is not specified exact version of `ipykernel` package in setup in `jupyter`. There was changed `ipykernel`'s version that is being installed.&#13;\n",
"&#13;\n",
"Logging to output cell works correctly for `ipykernel==4.2.2` and earlier, but since `4.3.0` https://github.com/ipython/ipykernel/releases/tag/4.3.0 logs goes to terminal instead of the output cell.&#13;\n",
"&#13;\n",
"I am not sure, but my guess is that the problem is caused by this commit: https://github.com/ipython/ipykernel/commit/65b6144d191b867c67d9724cd5e7b94e9f688d83</p>\n",
" </div>\n",
" </div>\n",
"</div><div class=\"row\">\n",
" <div class=\"panel panel-warning\">\n",
" <div class=\"panel-heading\">\n",
" <h4>ziky90</h4>\n",
" </div>\n",
" <div class=\"panel-body\">\n",
" <p class=\"load\">I am using `jupyter` notebook and since short time ago logs stopped to appear in output cells and started to appear only in the terminal.&#13;\n",
"&#13;\n",
"I have described the problem here:&#13;\n",
"http://stackoverflow.com/questions/35936086/jupyter-notebook-does-not-print-logs-to-the-output-cell/35940918#35940918&#13;\n",
"&#13;\n",
"To summarise this, I have found that since there is not specified exact version of `ipykernel` package in setup in `jupyter`. There was changed `ipykernel`'s version that is being installed.&#13;\n",
"&#13;\n",
"Logging to output cell works correctly for `ipykernel==4.2.1` and earlier, but since `4.3.0` https://github.com/ipython/ipykernel/releases/tag/4.3.0 logs goes to terminal instead of the output cell.</p>\n",
" </div>\n",
" </div>\n",
"</div><div class=\"row\">\n",
" <div class=\"panel panel-warning\">\n",
" <div class=\"panel-heading\">\n",
" <h4>willingc</h4>\n",
" </div>\n",
" <div class=\"panel-body\">\n",
" <p class=\"load\">On Monday, ReadTheDocs changed their service to opt in projects for display of a small ad in the bottom left of the docs (they do not allow tracking of users by third party scripts). See [blog post](https://blog.readthedocs.com/ads-on-read-the-docs/) for details.&#13;\n",
"&#13;\n",
"For all the project documentation that I have permissions on, I have disabled the advertising feature for the following reasons:&#13;\n",
"&#13;\n",
"- this is a decision that should be made by the larger project community or steering council to opt in, if desired&#13;\n",
"- I personally support ReadTheDocs financially with the ReadTheDocs Gold contribution monthly.&#13;\n",
"- I also contribute my time as I know other devs on Jupyter do as well.&#13;\n",
"&#13;\n",
"It is my belief that the advertising feature was added to address commercial projects who are \"free riders\" in an economic sense. I believe that RTD is committed to the open source community and the needs of the community.&#13;\n",
"&#13;\n",
"For now, I will keep the ads turned off unless the consensus is different. Thanks!&#13;\n",
"&#13;\n",
"cc/ @fperez @ellisonbg @minrk @carreau @takluyver @jhamrick @jdfreder who are active with the docs. Others, please feel free to voice your thoughts as well.</p>\n",
" </div>\n",
" </div>\n",
"</div><div class=\"row\">\n",
" <div class=\"panel panel-warning\">\n",
" <div class=\"panel-heading\">\n",
" <h4>Carreau</h4>\n",
" </div>\n",
" <div class=\"panel-body\">\n",
" <p class=\"load\">when I start the server by command ```jupyter notebook```, the ___Notebooks___ options is disabled, even when I uninstall and then re-install all related packages, it still can't work.&#13;\n",
"my env is python3, mac osx 10.11.2, please kindly suggest, thanks.&#13;\n",
"<img width=\"1062\" alt=\"capture\" src=\"https://cloud.githubusercontent.com/assets/1047330/12407042/e7906cec-be8d-11e5-942b-111be929540c.png\"/>&#13;\n",
"</p>\n",
" </div>\n",
" </div>\n",
"</div><div class=\"row\">\n",
" <div class=\"panel panel-warning\">\n",
" <div class=\"panel-heading\">\n",
" <h4>juliohm</h4>\n",
" </div>\n",
" <div class=\"panel-body\">\n",
" <p class=\"load\">Moving the issue from IPython to Jupyter.&#13;\n",
"&#13;\n",
"Previous issue: https://github.com/ipython/ipython/issues/7519</p>\n",
" </div>\n",
" </div>\n",
"</div><div class=\"row\">\n",
" <div class=\"panel panel-warning\">\n",
" <div class=\"panel-heading\">\n",
" <h4>takluyver</h4>\n",
" </div>\n",
" <div class=\"panel-body\">\n",
" <p class=\"load\">I recently cannot use the notebook anymore with a python3 kernel.&#13;\n",
"&#13;\n",
"My syslog output :&#13;\n",
"&#13;\n",
"[78941.591573] jupyter-noteboo[4703]: segfault at bddc24180 ip 00007f0bdb576f5b sp 00007ffcbd5d6bf0 error 4 in socket.cpython-34m.so[7f0bdb567000+16000]&#13;\n",
"&#13;\n",
"&#13;\n",
"The only thing working is opening a python2 kernel with the notebook using the 'ipython2 notebook' command...&#13;\n",
"&#13;\n",
"&#13;\n",
"</p>\n",
" </div>\n",
" </div>\n",
"</div></div>"
]
},
"execution_count": 59,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"panel * issues "
]
},
{
"cell_type": "code",
"execution_count": 60,
"metadata": {
"collapsed": false
},
"outputs": [],
"source": [
"js = layout.extend( 'js', type='javascript', processor=coffee.compile )\n",
"js.html"
]
},
{
"cell_type": "code",
"execution_count": 61,
"metadata": {
"collapsed": false
},
"outputs": [],
"source": [
"js.string = \"\"\"alert 10\"\"\""
]
},
{
"cell_type": "code",
"execution_count": 62,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"@ipywidgets.interact\n",
"def do_a_thing_in_the_console( i=[0,100,5 ]):\n",
" js.string = \"\"\"console.log %i\"\"\" % i "
]
},
{
"cell_type": "code",
"execution_count": 63,
"metadata": {
"collapsed": false
},
"outputs": [],
"source": [
"js.string = \"\"\"d3.selectAll '.panel-warning'\n",
" .classed\n",
" 'panel-warning': no\n",
" 'panel-default': yes\n",
"\"\"\""
]
},
{
"cell_type": "code",
"execution_count": 64,
"metadata": {
"collapsed": false
},
"outputs": [
{
"data": {
"text/plain": [
"\"<script>// Generated by CoffeeScript 1.8.0\\n(function() {\\n d3.selectAll('.panel-warning').classed({\\n 'panel-warning': false,\\n 'panel-default': true\\n });\\n\\n}).call(this);\\n</script>\""
]
},
"execution_count": 64,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"js.query.outerHtml()"
]
}
],
"metadata": {
"kernelspec": {
"display_name": "Python 3",
"language": "python",
"name": "python3"
},
"language_info": {
"codemirror_mode": {
"name": "ipython",
"version": 3
},
"file_extension": ".py",
"mimetype": "text/x-python",
"name": "python",
"nbconvert_exporter": "python",
"pygments_lexer": "ipython3",
"version": "3.5.1"
}
},
"nbformat": 4,
"nbformat_minor": 0
}
Raw
environment.yml
name: components
channels:
- javascript
- javascript/label/dev
dependencies:
- coffee-script
- nodejs
- ipywidgets
- lxml
- requests
- pandas
- cssselect
- pip:
- coffeetools
- pyjade
- pyquery
- jinja2schema
- jademagic
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment