Skip to content

Instantly share code, notes, and snippets.

@tonyfast

tonyfast/components.ipynb

Last active March 13, 2016 16:50
Show Gist options
  • Save tonyfast/b98e8a50521dad35caf5 to your computer and use it in GitHub Desktop.
Save tonyfast/b98e8a50521dad35caf5 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": 256,
"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": 257,
"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": 258,
"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": 259,
"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": 260,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"panel.data = issues[0]"
]
},
{
"cell_type": "code",
"execution_count": 261,
"metadata": {
"collapsed": false
},
"outputs": [],
"source": [
"panel.string = new.string.replace('h4','p.lead')"
]
},
{
"cell_type": "code",
"execution_count": 262,
"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": 263,
"metadata": {
"collapsed": false
},
"outputs": [],
"source": [
"header = panel - '.panel-body'\n",
"header.html"
]
},
{
"cell_type": "code",
"execution_count": 264,
"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": 265,
"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.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 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\">Since we are tending toward a full OS in the browser... ;-) I think it would help to be able to differentiate the jupyter-js-filebrowser, jupyter-js-editor, jupyter-js-terminal and jupyter-js-notebook navigation tabs from the favicon.</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.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 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\">Since we are tending toward a full OS in the browser... ;-) I think it would help to be able to differentiate the jupyter-js-filebrowser, jupyter-js-editor, jupyter-js-terminal and jupyter-js-notebook navigation tabs from the favicon.</p>\n",
" </div>\n",
" </div>\n",
"</div></div>"
]
},
"execution_count": 265,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"panel * issues "
]
},
{
"cell_type": "code",
"execution_count": 266,
"metadata": {
"collapsed": false
},
"outputs": [],
"source": [
"js = layout.extend( 'js', type='javascript', processor=coffee.compile )\n",
"js.html"
]
},
{
"cell_type": "code",
"execution_count": 267,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"js.string = \"\"\"alert 10\"\"\""
]
},
{
"cell_type": "code",
"execution_count": 268,
"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": 269,
"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": 270,
"metadata": {
"collapsed": false
},
"outputs": [
{
"data": {
"text/plain": [
"\"<script>// Generated by CoffeeScript 1.10.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": 270,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"js.query.outerHtml()"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": []
}
],
"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
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment