Create a function to display images like Jupyter / RStudio [Docker]

Overview

I usually write Python and R scripts with neovim, but it was troublesome to open the file and check it after outputting the graph as png or html. I wanted a function that automatically pops up new files, so I made it with docker.

First of all, I haven't made much. I hope you read it with a tension like "Hmm, there are people who think about that."

How to use

First, save the following script as docker-compose.yml [^ 1]. Please make docker-compose available.

[^ 1]: I think you have specified a docker image that you haven't seen, but it was created by me. Since it is published on Docker Hub, you should be able to docker pull normally.

docker-compose.yml

version: "3"
services:
  websocket:
    image: dr666m1/image_watcher_websocket:version-0.0
    volumes:
      - .:/work/sync
    ports:
      - "9999:9999"
  webserver:
    image: dr666m1/image_watcher_webserver:version-0.0
    volumes:
      - .:/work/sync
    ports:
      - "8888:8888"
    depends_on:
      - websocket

After that, move to the directory where you plan to output png and html, and start / stop with the following command ($ FILE_PATH is the previous docker-compose.yml).

#Start-up
docker-compose -f $FILE_PATH --project-directory $(pwd) up -d

#Stop
docker-compose -f $FILE_PATH --project-directory $(pwd) down

If you open http: // localhost: 8888 / in your browser during startup, you will see the screen shown at the beginning.

How it works

As you can see in docker-compose.yml, there are two docker containers running. The roles of each are briefly explained below. The code is posted on my github.

websocket (image_watcher_websocket) I'll leave the explanation of what WebSocket is to other articles. The role of this docker container is:

--Detects png / html file creation or update every few seconds --Send the information of the detected file to the browser

For implementation, I used Python's ** websocket-server ** package.

webserver (image_watcher_webserver) I'll leave the explanation of what a web server is to other articles. The role of this docker container is:

--Accepts request on local port 8888 and returns ʻindex.html` --png / html files are also returned if requested

I used Python's ** Flask ** package for implementation. In ʻindex.html`, I use ** React ** a lot.

Commitment

Show / hide

You can switch between showing and hiding with the "▶" and "▼" to the left of the file name.

Display on a separate screen

If you click the file name, only that file can be displayed on a separate screen.

Other

The vertical width of the iframe is automatically corrected according to the scrollHeight of the html file, and the implementation of the button to return to the top is also a little particular.

Finally

In my work, I only write Python, R, and SQL for analysis, so I learned how to make screens with React.