Link to python file in Jupyter notebook markup cell - jupyter-notebook

Suppose the following: I locally execute the jupyter-notebook server in my home directory.
I have the following files in ~/temp/jupyter_link:
index.ipynb python_file.py
In a markup cell in index.ipynb I want to create a link to python_file.py. This link should open python_file.py with the jupyter-notebook editor. I can do that with:
[python_file](https://localhost:8888/edit/temp/jupyter_link/python_file.py)
However, this link contains the absolute path of python_file.py. I want to use the relative path (with the base directory being the one from index.ipynb). I can create a link using the relative path with:
[python_file](python_file.py)
However, if I click this link I'm asked to download the file and it's not opened with the jupyter-notebook editor.
Is it possible to create a link that opens the python file with the jupyter-notebook editor but that uses a relative path? The pseudo-code I imagine would be something like:
[python_file](edit:python_file.py)
Inspired by #Ivan's answer I might add that
[python_file](/edit/temp/jupyter_link/python_file.py)
also opens the editor. That removes the host name from the link, but still does not give me a relative link.

The following seems to work (nowadays?) in Jupyter 5.4.1 and Jupyterlab 0.32.1:
[python_file](./python_file.py)

You already noted how this is solved in your question, but I kinda missed that
[python_file](/edit/temp/jupyter_link/python_file.py)
is actually the best answer. I figured it out after I found how to make the relative link and I was almost done writing this. So here is an explanation of how to do the relative and why the above link is actually better.
From the index.ipynb use the Jupyter file>open menu to navigate to the python_file.py. Look at it's address, in this case it should be something like
https://localhost:8888/edit/temp/jupyter_link/python_file.py
Now look at your index file's address, should be something like:
https://localhost:8888/notebooks/temp/jupyter_link/index.ipynb
To get to the /edit directory from the /notebooks you have to back out a few directories with ... The link should be something like
[python_file](../../edit/temp/jupyter_link/python_file.py)
However, you will always be backing up to the base of the Jupyter server directory to go from /notebooks into /edit, so just forget about counting ../ and just start with /edit.

Related

Notepad ++ Launch in Chrome equivalent in Atom

Do we have 'Launch in Chrome' equivalent in Atom. Screen shot of a similar functionality in Notepad++ is below:
There are several packages for Atom. E.g.
https://atom.io/packages/open-in-browser
opens a file in the default browser
https://atom.io/packages/open-in-browsers
a more configurable package where you can choose a browser
just to mention two of them, there are several more if you search the Atom packages site.
The easiest way that I have figured out how to open a file in your browser, is to right click the file that you desire to open on the left hand side of Atom, and click "Copy full path".
After you do that, just paste the full path into whichever browser you're using, and then you have your file opened in the browser.
This is the easiest way that I have found to do it. The packages seem to not want to work well for me.

How to change working directory via extension in Adobe brackets

Given a file or path - I can use FileUtils (or similar) to work with files. I'd like to be able to alter the current working directory in my extension.
I see in node.js there is process.chdir(directory) but I am unable to access that object.
Is there any other way to change the current working directory.
I am trying to create a simple plugin that when you open the file dialog, the directory your file listing is the same as the currently opened file. The simple implementation being:
MainViewManager.on("currentFileChange", function (e, newFile) {
process.chdir(newFile.parentPath); // This is my FAIL
});
Brackets, like many GUI apps, doesn't use the current working directory very much once it's up and running. So there is probably a different way to accomplish what you're looking for.
When you say...
when you open the file dialog, the directory your file listing is the same as the currently opened file.
...do you mean you want the file tree on the left side of the window to change? If so, try the ProjectManager.openProject() API.
...or do you mean you want to open a file-picker dialog box (like what you see when you choose File > Open in the menu)? If so, you can use FileSystem.showOpenDialog() - the 4th argument is the directory to show when the dialog is first opened.

Test Local Background Image on Live Site with Chrome Dev Tools?

Is there any way to use Chrome dev tools to test different images? I have created a new background graphic and I would like to test it on a live site that already has a background graphic on the <body> tag. I don't want to change the live site yet, though. Just test it to see what the new image looks like. Is this possible?
Here is the answer, courtesy of Rob Donovan # superuser (via https://superuser.com/a/839500/454034)
Since you mentioned 'Chrome', you could use Chrome extensions to do this, to enable local access to your files.
Follow these steps:
1) In the local folder where your image(s) are, create this file called 'manifest.json' and enter this:
{
"name": "File Exposer",
"manifest_version": 2,
"version": "1.0",
"web_accessible_resources": ["*.jpg","*.JPG"]
}
2) Put this is your chrome address bar: chrome://extensions/
3) Make sure 'Developer mode' is checked (Top right of page)
4) Click the 'Load Unpacked Extension' button
5) Navigate to the local folder where the image(s) and the manifest.json file is, click ok
6) The extension 'File Exposer' should now be listed in the list, and have a check mark against 'Enabled'. If the folder is on a network drive or other slow drive or has lots of files in, it could take 10-20 seconds or more to appear in the list.
7) Note the 'ID' string that has been associated with your extension. This is the EXTENSION_ID
8) Now in your HTML you can access the file with the following, changing the 'EXTENSION_ID' to whatever ID your extension generated:
<img src='chrome-extension://EXTENSION_ID/example1.jpg'>
Note, that the *.jpg is recursive and it will automatically match files in the specified folder and all sub folders, you dont need to specify for each sub folder. Also note, its Case Sensitive.
In the 'img' tag you don't specify the original folder, its relative from that folder, so only sub folders need to be specified.
If you modify the manifest.json file, you will need to click the 'Reload (Ctrl+R)' link next to the extension.
Another option would be to start a simple http server.
In your terminal (or command prompt), cd into the directory where your images are saved and then type python -m SimpleHTTPServer for Python 2.
For Python 3 use the following command: python -m http.server [<portNo>]
Now you can reference the images in dev tools using http://localhost:8000/filename.jpg.
This is not an exact answer to your question, but one way you could do it is to use something like dropbox public folder. Once the image is in the folder you can just right click and copy a public url to use in the dev tools.
I think the best and simplest solution is to convert your image into Base64 (you can use any online/offline tool for that) and then just paste the output inside DevTools.
If you need it in an IMG tag, do it like that:
<img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
If you need it as a background image, you can do it like that:
.background {
background-image: url("data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==");
}
My, what a difference six years makes! Found this drop-dead-simple method at https://umaar.com/dev-tips/174-drag-drop-image-local-overrides/
Open the Chrome inspector preferences.
Check "Enable Local Overrides."
Locate the original image in the html.
Right-click the file path, and choose "Locate in Sources Panel."
With the image selected in the left panel of the Sources panel, drag
the replacement image from your desktop and onto the preview panel
on the right.
As you hover, you'll see a dotted outline with the text "Drop image
file here." Drop image file there. ;-)
You may need to refresh the page for the new image to display. Yes,
it will persist as long as the Inspector is open and "Local
Overrides" is enabled.
NOTE: The file name will not change in the browser, but the new image will display where the original one displayed previously.
You can replace the url of the background image in the Elements panel with the url of the image you wish to try. Check this link to see how that is done.
This change will show effect immediately in your browser window. As Johan Linder mentioned, you will have to host the image somewhere in case you have the image on your computer.
nate wilton's answer correctly points out how to do this using a Chrome extension.

how to insert a link to a local file into a markdown cell?

Dear ipython notebook users,
I want to insert a link to a local file located in the notebook directory, and no, it is not an image (the only example I've found). I want to insert this link within a markdown cell.
When clicked on the link, the file is to be opened with a local application (in this case, a molecule viewer)
I've tried to come up with the correct syntax, but no luck. Please, any help is greatly appreciated.
I want to insert a link to a local file located in the notebook directory
I want to insert this link within a markdown cell.
The path need to be relative to where the server has been started, and prefixed with files/.
e.g: [my molecule](files/molecules/ethanol.mol)
the file is to be opened with a local application (in this case, a molecule viewer)
Not possible unless your application support custom links protocol like the itunes:// or apt-get:// one. the best that can append is that on link click you will be prompted to download the file. (keep in mind that the server can be on a different machine thant your browser)
completenting the answer of Matt, it will work only in you import FileLink
from IPython.display import FileLink, FileLinks
FileLink('path_to_file/filename.extension')
Then in a markdown cell insert your links waterBox30.pdb

Qt, PDF viewer, and jumping to specific pages

I've spent a couple of days searching the bowels of the internet to find out the answer to my question, so since I can't find the answer I'm throwing it out to the masses...
Within my Qt application I'm able to open a PDF using the OS default viewer thru the following command:
QDesktopServices::openUrl(QUrl("file:////C:help.pdf", QUrl::TolerantMode));
This works fine because all I'm wanting to do is display a help file to a user, but when I try to add a "#page=20" parameter to my URL, the document still only opens to the first page, not page 20. If I cut and paste the command into a browser it jumps correctly.
So -- my questions are:
Would poppler or another viewing tool allow me to jump to a page?
Is there another way with Qt to jump to a page? Or maybe another command to open the file instead of with QDesktopServices?
edit: I tried with QProcess and that doesn't jump to the page either -- not that I expected it to...
Use QProcess with one of the answers from Adobe Reader Command Line Reference :
<path to Adobe Reader> /A "page=100" "<Path To PDF file>"
Yes. evince, for example, takes option --page-index which you can set page number
No. QDesktopServices::openUrl() ends up calling one of helper commands, such as xdg-open or kfmclient, without any arguments.
Of cause, you can always use libpoppler in your app to open your PDFs. Poppler::Document::page() is your friend.
Another solution I was able to work out was to convert my PDF to HTML, create a QWebView, and display the HTML there. I then added an ID attribute to the HTML doc, and when I tacked that ID to my URL it loaded into the widget at the location of the attribute...
scott

Resources