▱ codeplot / your spatial canvas for data exploration

; +}; + +type IDefaultMimeApplicationPlotlyV1RenderProps = { + shape: ICodeplotShape; +}; diff --git a/minirepos/@codeplot-front/src/@.tldraw.shapes/_impl_/[render] DefaultMimeImagePngRender.tsx b/minirepos/@codeplot-front/src/@.tldraw.shapes/_impl_/[render] DefaultMimeImagePngRender.tsx index 3f57028..142de75 100644 --- a/minirepos/@codeplot-front/src/@.tldraw.shapes/_impl_/[render] DefaultMimeImagePngRender.tsx +++ b/minirepos/@codeplot-front/src/@.tldraw.shapes/_impl_/[render] DefaultMimeImagePngRender.tsx @@ -1,3 +1,5 @@ +import { useEditor } from "@tldraw/editor"; +import { useEffect } from "react"; import { ICodeplotShape } from "./ICodeplotShape"; // import ReactJson from "react-json-view"; @@ -11,6 +13,13 @@ type IDefaultMimeImagePngRenderProps = { export function DefaultMimeImagePngRender({ shape, }: IDefaultMimeImagePngRenderProps) { + const editor = useEditor(); + useEffect(() => { + _getBase64ImageDimensions(shape.props.mime["image/png"], ({ w, h }) => { + editor.updateShape({ ...shape, props: { w, h } }); + }); + }, []); // eslint-disable-line react-hooks/exhaustive-deps + return (

); } + +/* ------------------------ _getBase64ImageDimensions ----------------------- */ + +function _getBase64ImageDimensions( + base64String: string, + callback: (dimensions: { w: number; h: number }) => void, +) { + // Create a new Image object + const image = new Image(); + + // Define the onload event handler + image.src = `data:image/png;base64,${base64String}`; + image.onload = function () { + // Once the image is loaded, retrieve the dimensions + const dimensions = { + w: image.width, + h: image.height, + }; + + // Execute the callback function with the dimensions + callback(dimensions); + }; + + // Set the source of the image to the base64 string +} + +// Example usage diff --git a/minirepos/@codeplot-front/src/@.tldraw.shapes/_impl_/styles.css b/minirepos/@codeplot-front/src/@.tldraw.shapes/_impl_/styles.css index c48ef97..576940a 100644 --- a/minirepos/@codeplot-front/src/@.tldraw.shapes/_impl_/styles.css +++ b/minirepos/@codeplot-front/src/@.tldraw.shapes/_impl_/styles.css @@ -53,6 +53,11 @@ cursor: move; } + &:active { + display: flex; + cursor: grabbing; + } + &__TitleContainer { display: flex; gap: 8px; diff --git a/minirepos/@codeplot-front/src/@types/index.d.ts b/minirepos/@codeplot-front/src/@types/index.d.ts index d74d75d..5b40152 100644 --- a/minirepos/@codeplot-front/src/@types/index.d.ts +++ b/minirepos/@codeplot-front/src/@types/index.d.ts @@ -9,6 +9,7 @@ declare module "*.svg?react" { declare global { interface Window { + Plotly: typeof import("plotly.js"); MathJax: { tex2svg: (latex: string, options: any) => any; startup: { diff --git a/minirepos/@codeplot-ipython/codeplot-ipython/__init__.py b/minirepos/@codeplot-ipython/codeplot-ipython/__init__.py index 67eb748..5f14cad 100644 --- a/minirepos/@codeplot-ipython/codeplot-ipython/__init__.py +++ b/minirepos/@codeplot-ipython/codeplot-ipython/__init__.py @@ -1,5 +1,7 @@ import asyncio from IPython.core.magic import Magics, magics_class, line_magic +from IPython.core.magic_arguments import (argument, magic_arguments, parse_argstring) + import codeplot @@ -11,20 +13,31 @@ def cP_connect(self, line): "A line magic to accept parameters and establish connection." # Process the line into parameters here params = line.split() - self.shell.user_ns['my_extension_params'] = params # Establish connection using the first parameter as URL if params: url = params[0] - asyncio.create_task(self.shell.user_ns['ext'].connect_to_codeplot(url)) + asyncio.create_task(self.shell.user_ns['_cP_extension'].connect_to_codeplot(url)) else: - print("No URL provided.") + raise Exception("No URL provided.") @line_magic def cP_supress_output(self, boolean): "Toggle output suppression." - ext = self.shell.user_ns.get('ext') - ext._supress_output = boolean + _cP_extension = self.shell.user_ns.get('_cP_extension') + _cP_extension._supress_output = boolean print(f"Output suppression is now: {boolean}.") + @magic_arguments() + @argument('-id', '--id', help='ID of the plot to update.') + @argument('-tl', '--title', help='Title of the plot.') + @line_magic + def cP_plot(self, line): + # Parse arguments + _cP_extension = self.shell.user_ns.get('_cP_extension') + _cP_extension._plot_magic_args = { + **_cP_extension._plot_magic_args, + **vars(parse_argstring(self.cP_plot, line)) + } + class IPythonExtension: def __init__(self, ipython): self.ipython = ipython @@ -32,8 +45,10 @@ def __init__(self, ipython): self.cP = None self.connection_established = False self._supress_output = True - - + self._plot_magic_args = {} + self._original_display_pub_publish = self.ipython.display_pub.publish + self.ipython.display_pub.publish = self.custom_display_pub_publish + async def connect_to_codeplot(self, url): if not self.connection_established and url: @@ -42,27 +57,43 @@ async def connect_to_codeplot(self, url): print("Connected to Codeplot.") def custom_display_pub_publish(self, *args, **kwargs): - data = kwargs.get('data', {}) - if self.cP is not None and data: - asyncio.create_task(self.cP._plotIPythonCell(data)) + data = kwargs.get('data', None) + if data is not None: + asyncio.create_task(self.cP.plot(data, **self._plot_magic_args)) + self._ploted_by_display_pub = True + if self._supress_output is False: + self._original_display_pub_publish(*args, **kwargs) + + + def pre_run_cell(self, info): + + # Build args from the cell info + if hasattr(info, 'cell_id'): + if info.cell_id is not None: + self._plot_magic_args['id'] = info.cell_id + self._plot_magic_args['ipythonCellId'] = info.cell_id + if hasattr(info, 'raw_cell'): + self._plot_magic_args['ipythonRawCell'] = info.raw_cell + def post_run_cell(self, result): if not self.connection_established: # The connection is now established using the %connect magic, so this may not be needed pass if result.result is not None and self.cP is not None: - # Now that connection is established, we can plot - asyncio.create_task(self.cP.plot(result.result, id=result.info.cell_id, ipython_raw_cell=result.info.raw_cell, ipython_cell_id=result.info.cell_id)) - - if self._supress_output and result.result is not None: - self.ipython.display_pub.clear_output() + asyncio.create_task(self.cP.plot(result.result, **self._plot_magic_args)) + # Clean up the current cell id + self._magic_current_cell_id = None + self._plot_magic_args = {} def load_ipython_extension(ipython): ipython.register_magics(Magics(ipython)) - ext = IPythonExtension(ipython) + _cP_extension = IPythonExtension(ipython) # Store the extension instance in the IPython user namespace for access from magics - ipython.user_ns['ext'] = ext - ipython.events.register('post_run_cell', ext.post_run_cell) + ipython.user_ns['_cP_extension'] = _cP_extension + ipython.events.register('pre_run_cell', _cP_extension.pre_run_cell) + ipython.events.register('post_run_cell', _cP_extension.post_run_cell) + diff --git a/minirepos/@codeplot-ipython/setup.py b/minirepos/@codeplot-ipython/setup.py index d543925..4296147 100644 --- a/minirepos/@codeplot-ipython/setup.py +++ b/minirepos/@codeplot-ipython/setup.py @@ -2,10 +2,10 @@ setup( name='codeplot-ipython', - version='0.1.0', + version='1.8.0', packages=find_packages(), install_requires=[ - 'codeplot >= 0.4.0', + 'codeplot >= 1.2.0', 'asyncio >= 3.4.3', ], author='Antonio Moura (@antl3x)', diff --git a/minirepos/@codeplot-python/build/lib/codeplot/main.py b/minirepos/@codeplot-python/build/lib/codeplot/main.py index 8604d7d..75aff49 100644 --- a/minirepos/@codeplot-python/build/lib/codeplot/main.py +++ b/minirepos/@codeplot-python/build/lib/codeplot/main.py @@ -103,9 +103,9 @@ async def plot(self, data, **kwargs) -> None: instance = self._get_instance() # to get x and y pos to plot we need consider camera zoom and xy position - shape = self._get_shape(kwargs['id']) + shape = self._get_shape(kwargs['id']) if kwargs.get('id') else None kwargs.setdefault("id", str(TypeID(prefix="plot"))) kwargs.setdefault("title", "Untitled"), kwargs.setdefault("width", shape['props']['w'] if shape else 500) @@ -116,8 +116,11 @@ async def plot(self, data, **kwargs) -> None: kwargs.setdefault("x_pos", shape['x'] if shape else -camera["x"] + 100) kwargs.setdefault("y_pos", shape['y'] if shape else -camera["y"] + 100) kwargs.setdefault("page_id", instance["currentPageId"]) + kwargs.setdefault("ipythonRawCell", None) + kwargs.setdefault("ipythonCellId", None) kwargs.setdefault("id", str(TypeID(prefix="plot"))) + shape = { "id": "shape:"+kwargs["id"], "x": kwargs["x_pos"], @@ -136,6 +139,8 @@ async def plot(self, data, **kwargs) -> None: "metadata": { "isPinned": False, "pythonCallerFrameCodeContext": metacode_line, + "ipythonRawCell": kwargs["ipythonRawCell"], + "ipythonCellId": kwargs["ipythonCellId"], }, "createdAt": datetime.datetime.utcnow().isoformat() + "Z" }, @@ -145,73 +150,14 @@ async def plot(self, data, **kwargs) -> None: "index": "a1", "typeName": "shape" } - - - await self.set(f"shape:"+kwargs['id'], shape) - except Exception as e: - print("Error plotting:", e) - - async def _plotIPythonCell(self, data, **kwargs) -> None: - - try: - # We force this update to receive latest data from the shared document - self._update_ykeyvalue() - - - # last_plot_coords = PatchManager.get_last_plot_xz_coordinates() - camera = self._get_current_page_camera() - instance = self._get_instance() - - # to get x and y pos to plot we need consider camera zoom and xy position - shape = self._get_shape(kwargs['id']) - - kwargs.setdefault("id", str(TypeID(prefix="plot"))) - kwargs.setdefault("title", "Untitled"), - kwargs.setdefault("width", shape['props']['w'] if shape else 500) - kwargs.setdefault("height", shape['props']['h'] if shape else 250) - kwargs.setdefault("rotation",shape['rotation'] if shape else 0) - kwargs.setdefault("opacity", shape['opacity'] if shape else 1) - kwargs.setdefault("is_locked", shape['isLocked'] if shape else False) - kwargs.setdefault("x_pos", shape['x'] if shape else -camera["x"] + 100) - kwargs.setdefault("y_pos", shape['y'] if shape else -camera["y"] + 100) - kwargs.setdefault("page_id", instance["currentPageId"]) - kwargs.setdefault("id", str(TypeID(prefix="plot"))) - - shape = { - "id": "shape:"+kwargs["id"], - "x": kwargs["x_pos"], - "y": kwargs["y_pos"], - "rotation": kwargs["rotation"], - "opacity": kwargs["opacity"], - "isLocked": kwargs["is_locked"], - "props": { - "w": kwargs["width"], - "h": kwargs["height"], - "id": "shape:"+kwargs["id"], - "title": kwargs["title"], - "type": str(type(data)), - "renderWith": "default", - "mime": data, - "metadata": { - "isPinned": False, - "ipythonRawCell": kwargs["ipython_raw_cell"], - "ipythonCellId": kwargs["ipython_cell_id"], - }, - "createdAt": datetime.datetime.utcnow().isoformat() + "Z" - }, - "meta": {}, - "type": "codeplot", - "parentId": kwargs["page_id"], - "index": "a1", - "typeName": "shape" - } - await self.set(f"shape:"+kwargs['id'], shape) except Exception as e: - print("Error plotting:", e) + raise Exception("Error plotting") from e + + class CustomJSONEncoder(json.JSONEncoder): def default(self, obj): @@ -251,6 +197,10 @@ def _get_mime_representations(obj): representations = {} + # Here we check if obj is a representation itself + if isinstance(obj, dict) and 'text/plain' in obj: + return obj + for method_name, mime_type in mime_types.items(): if hasattr(obj, method_name): method = getattr(obj, method_name) @@ -259,7 +209,7 @@ def _get_mime_representations(obj): if content is not None: representations[mime_type] = content except Exception as e: - print(f"Error calling {method_name}: {e}") + raise Exception(f"Error calling {method_name}: {e}") from e # Duck typing check for a matplotlib figure-like object if hasattr(obj, 'savefig'): diff --git a/minirepos/@codeplot-python/codeplot.egg-info/PKG-INFO b/minirepos/@codeplot-python/codeplot.egg-info/PKG-INFO index bf61f9e..b9f64d8 100644 --- a/minirepos/@codeplot-python/codeplot.egg-info/PKG-INFO +++ b/minirepos/@codeplot-python/codeplot.egg-info/PKG-INFO @@ -1,6 +1,6 @@ Metadata-Version: 2.1 Name: codeplot -Version: 0.4.0 +Version: 1.2.0 Summary: codeplot is a canvas designed for code-driven data exploration where you can plot graphs, data frames, markdown and much more using plain Python Home-page: https://github.com/codeplot-co/codeplot Author: Antonio Moura (@antl3x) @@ -13,7 +13,7 @@ Requires-Dist: watchdog>=3.0.0 Requires-Dist: typeid-python>=0.2.2 Requires-Dist: ypy-websocket>=0.12.4 Requires-Dist: asyncio>=3.4.3 -Requires-Dist: websockets>=12.0 +Requires-Dist: websockets>=11.0 Requires-Dist: y-py>=0.6.2 ![codeplot-readme](https://github.com/codeplot-co/codeplot/assets/26308297/e1212d25-a731-4755-875d-e988848f6d87) diff --git a/minirepos/@codeplot-python/codeplot.egg-info/requires.txt b/minirepos/@codeplot-python/codeplot.egg-info/requires.txt index c3503d2..5891352 100644 --- a/minirepos/@codeplot-python/codeplot.egg-info/requires.txt +++ b/minirepos/@codeplot-python/codeplot.egg-info/requires.txt @@ -2,5 +2,5 @@ watchdog>=3.0.0 typeid-python>=0.2.2 ypy-websocket>=0.12.4 asyncio>=3.4.3 -websockets>=12.0 +websockets>=11.0 y-py>=0.6.2 diff --git a/minirepos/@codeplot-python/codeplot/main.py b/minirepos/@codeplot-python/codeplot/main.py index 8604d7d..472ea0d 100644 --- a/minirepos/@codeplot-python/codeplot/main.py +++ b/minirepos/@codeplot-python/codeplot/main.py @@ -103,9 +103,9 @@ async def plot(self, data, **kwargs) -> None: instance = self._get_instance() # to get x and y pos to plot we need consider camera zoom and xy position - shape = self._get_shape(kwargs['id']) + shape = self._get_shape(kwargs['id']) if kwargs.get('id') else None kwargs.setdefault("id", str(TypeID(prefix="plot"))) kwargs.setdefault("title", "Untitled"), kwargs.setdefault("width", shape['props']['w'] if shape else 500) @@ -116,8 +116,11 @@ async def plot(self, data, **kwargs) -> None: kwargs.setdefault("x_pos", shape['x'] if shape else -camera["x"] + 100) kwargs.setdefault("y_pos", shape['y'] if shape else -camera["y"] + 100) kwargs.setdefault("page_id", instance["currentPageId"]) + kwargs.setdefault("ipythonRawCell", None) + kwargs.setdefault("ipythonCellId", None) kwargs.setdefault("id", str(TypeID(prefix="plot"))) + shape = { "id": "shape:"+kwargs["id"], "x": kwargs["x_pos"], @@ -136,6 +139,8 @@ async def plot(self, data, **kwargs) -> None: "metadata": { "isPinned": False, "pythonCallerFrameCodeContext": metacode_line, + "ipythonRawCell": kwargs["ipythonRawCell"], + "ipythonCellId": kwargs["ipythonCellId"], }, "createdAt": datetime.datetime.utcnow().isoformat() + "Z" }, @@ -145,73 +150,14 @@ async def plot(self, data, **kwargs) -> None: "index": "a1", "typeName": "shape" } - - - await self.set(f"shape:"+kwargs['id'], shape) - except Exception as e: - print("Error plotting:", e) - - async def _plotIPythonCell(self, data, **kwargs) -> None: - - try: - # We force this update to receive latest data from the shared document - self._update_ykeyvalue() - - - # last_plot_coords = PatchManager.get_last_plot_xz_coordinates() - camera = self._get_current_page_camera() - instance = self._get_instance() - - # to get x and y pos to plot we need consider camera zoom and xy position - shape = self._get_shape(kwargs['id']) - - kwargs.setdefault("id", str(TypeID(prefix="plot"))) - kwargs.setdefault("title", "Untitled"), - kwargs.setdefault("width", shape['props']['w'] if shape else 500) - kwargs.setdefault("height", shape['props']['h'] if shape else 250) - kwargs.setdefault("rotation",shape['rotation'] if shape else 0) - kwargs.setdefault("opacity", shape['opacity'] if shape else 1) - kwargs.setdefault("is_locked", shape['isLocked'] if shape else False) - kwargs.setdefault("x_pos", shape['x'] if shape else -camera["x"] + 100) - kwargs.setdefault("y_pos", shape['y'] if shape else -camera["y"] + 100) - kwargs.setdefault("page_id", instance["currentPageId"]) - kwargs.setdefault("id", str(TypeID(prefix="plot"))) - - shape = { - "id": "shape:"+kwargs["id"], - "x": kwargs["x_pos"], - "y": kwargs["y_pos"], - "rotation": kwargs["rotation"], - "opacity": kwargs["opacity"], - "isLocked": kwargs["is_locked"], - "props": { - "w": kwargs["width"], - "h": kwargs["height"], - "id": "shape:"+kwargs["id"], - "title": kwargs["title"], - "type": str(type(data)), - "renderWith": "default", - "mime": data, - "metadata": { - "isPinned": False, - "ipythonRawCell": kwargs["ipython_raw_cell"], - "ipythonCellId": kwargs["ipython_cell_id"], - }, - "createdAt": datetime.datetime.utcnow().isoformat() + "Z" - }, - "meta": {}, - "type": "codeplot", - "parentId": kwargs["page_id"], - "index": "a1", - "typeName": "shape" - } - await self.set(f"shape:"+kwargs['id'], shape) except Exception as e: - print("Error plotting:", e) + raise Exception("Error plotting") from e + + class CustomJSONEncoder(json.JSONEncoder): def default(self, obj): @@ -251,6 +197,10 @@ def _get_mime_representations(obj): representations = {} + # Here we check if obj is a representation itself + if isinstance(obj, dict): + return obj + for method_name, mime_type in mime_types.items(): if hasattr(obj, method_name): method = getattr(obj, method_name) @@ -259,7 +209,7 @@ def _get_mime_representations(obj): if content is not None: representations[mime_type] = content except Exception as e: - print(f"Error calling {method_name}: {e}") + raise Exception(f"Error calling {method_name}: {e}") from e # Duck typing check for a matplotlib figure-like object if hasattr(obj, 'savefig'): diff --git a/minirepos/@codeplot-python/setup.py b/minirepos/@codeplot-python/setup.py index 3ee48e0..c2808fa 100644 --- a/minirepos/@codeplot-python/setup.py +++ b/minirepos/@codeplot-python/setup.py @@ -2,14 +2,14 @@ setup( name='codeplot', - version='0.4.0', + version='1.2.0', packages=find_packages(), install_requires=[ 'watchdog >= 3.0.0', 'typeid-python >= 0.2.2', 'ypy-websocket >= 0.12.4', 'asyncio >= 3.4.3', - 'websockets >= 12.0', + 'websockets >= 11.0', 'y-py >= 0.6.2', ], author='Antonio Moura (@antl3x)', From 2fda9333b5069f928557670969b696780bfc73aa Mon Sep 17 00:00:00 2001 From: "Antonio Moura (@antl3x)" Date: Wed, 10 Apr 2024 20:57:39 -0600 Subject: [PATCH 02/11] #0 --- README.md | 4 + .../_scripts/dockerhub.release.mjs | 18 ++-- minirepos/@codeplot-api/package.json | 1 - .../_scripts/dockerhub.release.mjs | 16 +-- minirepos/@codeplot-front/package.json | 2 +- .../src/@.core/_impl_/AppModel.ts | 21 ++++ .../src/@.tldraw.canvas/_impl_/Canvas.tsx | 4 +- .../src/@.tldraw.canvas/_impl_/overrides.ts | 4 +- .../src/@.tldraw.canvas/_impl_/useStore.ts | 26 ++++- minirepos/@codeplot-ipython/README.md | 4 + .../codeplot-ipython/__init__.py | 97 ++++++++++--------- minirepos/@codeplot-ipython/setup.py | 4 +- minirepos/@codeplot-python/README.md | 4 + .../build/lib/codeplot/main.py | 8 +- .../codeplot.egg-info/PKG-INFO | 12 +-- minirepos/@codeplot-python/codeplot/main.py | 6 +- minirepos/@codeplot-python/setup.py | 2 +- 17 files changed, 149 insertions(+), 84 deletions(-) diff --git a/README.md b/README.md index 22fd6a4..9add95a 100644 --- a/README.md +++ b/README.md @@ -121,3 +121,7 @@ Codeplot is free to use for personal and non-commercial purposes. Only pay if you use Codeplot commercially. Read more about [License and Pricing here](LICENSE.md). + +# Sponsor + +This project is sponsored by [LearnPolars.co](https://learnpolars.co). LearnPolars is a platform to learn data manipulation and analysis using Polars, a blazingly fast DataFrame library in Python (Rust). \ No newline at end of file diff --git a/minirepos/@codeplot-api/_scripts/dockerhub.release.mjs b/minirepos/@codeplot-api/_scripts/dockerhub.release.mjs index 458bb8f..2da74d0 100644 --- a/minirepos/@codeplot-api/_scripts/dockerhub.release.mjs +++ b/minirepos/@codeplot-api/_scripts/dockerhub.release.mjs @@ -1,15 +1,17 @@ #!/usr/bin/env zx -import pkg from "../package.json" with { type: "json" }; - await $` echo "$CODEPLOT_DOCKER_ACCESS_TOKEN" | docker login --username "codeplotco" --password-stdin pnpm compile -docker buildx build --platform linux/amd64,linux/arm64 -t codeplotco/codeplot-api:latest --file Dockerfile ../../ -docker tag codeplotco/codeplot-api:latest codeplotco/codeplot-api:${pkg.version} -docker tag codeplotco/codeplot-api:latest codeplotco/codeplot-api:${pkg.version}-$(git rev-parse --short HEAD) -docker push codeplotco/codeplot-api:latest -docker push codeplotco/codeplot-api:${pkg.version} -docker push codeplotco/codeplot-api:${pkg.version}-$(git rev-parse --short HEAD) +# Build and push the multi-architecture image +docker buildx build -t codeplotco/codeplot-api:latest --platform linux/amd64,linux/arm64 --push --file Dockerfile ../../ --no-cache + +# Extract the package version and the short git commit hash +PKG_VERSION=$(grep 'version' package.json | cut -d '"' -f 4) +GIT_COMMIT_HASH=$(git rev-parse --short HEAD) + +# Tag and push the versioned image +docker buildx build -t codeplotco/codeplot-api:$PKG_VERSION --platform linux/amd64,linux/arm64 --push --file Dockerfile ../../ --no-cache +docker buildx build -t codeplotco/codeplot-api:$PKG_VERSION-$GIT_COMMIT_HASH --platform linux/amd64,linux/arm64 --push --file Dockerfile ../../ --no-cache `; diff --git a/minirepos/@codeplot-api/package.json b/minirepos/@codeplot-api/package.json index d360688..14ac039 100644 --- a/minirepos/@codeplot-api/package.json +++ b/minirepos/@codeplot-api/package.json @@ -13,7 +13,6 @@ "@production:app.deploy": "zx _scripts/@production:app.deploy.mjs" }, "dependencies": { - "@codeplot/shared": "workspace:^", "cors": "^2.8.5", "debug": "^4.3.4", "express": "^4.18.2", diff --git a/minirepos/@codeplot-front/_scripts/dockerhub.release.mjs b/minirepos/@codeplot-front/_scripts/dockerhub.release.mjs index 4fbb721..172976d 100644 --- a/minirepos/@codeplot-front/_scripts/dockerhub.release.mjs +++ b/minirepos/@codeplot-front/_scripts/dockerhub.release.mjs @@ -7,10 +7,14 @@ echo "$CODEPLOT_DOCKER_ACCESS_TOKEN" | docker login --username "codeplotco" --pa pnpm compile -docker buildx build --platform linux/amd64,linux/arm64 -t codeplotco/codeplot-front:latest . -docker tag codeplotco/codeplot-front:latest codeplotco/codeplot-front:${pkg.version} -docker tag codeplotco/codeplot-front:latest codeplotco/codeplot-front:${pkg.version}-$(git rev-parse --short HEAD) -docker push codeplotco/codeplot-front:latest -docker push codeplotco/codeplot-front:${pkg.version} -docker push codeplotco/codeplot-front:${pkg.version}-$(git rev-parse --short HEAD) +# Build and push the multi-architecture image +docker buildx build -t codeplotco/codeplot-front:latest --platform linux/amd64,linux/arm64 --push . + +# Extract the package version and the short git commit hash +PKG_VERSION=$(grep 'version' package.json | cut -d '"' -f 4) +GIT_COMMIT_HASH=$(git rev-parse --short HEAD) + +# Tag and push the versioned image +docker buildx build -t codeplotco/codeplot-front:$PKG_VERSION --platform linux/amd64,linux/arm64 --push . +docker buildx build -t codeplotco/codeplot-front:$PKG_VERSION-$GIT_COMMIT_HASH --platform linux/amd64,linux/arm64 --push . `; diff --git a/minirepos/@codeplot-front/package.json b/minirepos/@codeplot-front/package.json index 09a18e4..a326119 100644 --- a/minirepos/@codeplot-front/package.json +++ b/minirepos/@codeplot-front/package.json @@ -1,7 +1,7 @@ { "name": "@codeplot/front", "private": true, - "version": "1.0.0", + "version": "1.1.0", "type": "module", "scripts": { "compile": "zx _scripts/compile.mjs", diff --git a/minirepos/@codeplot-front/src/@.core/_impl_/AppModel.ts b/minirepos/@codeplot-front/src/@.core/_impl_/AppModel.ts index 79d6128..43d98ec 100644 --- a/minirepos/@codeplot-front/src/@.core/_impl_/AppModel.ts +++ b/minirepos/@codeplot-front/src/@.core/_impl_/AppModel.ts @@ -2,6 +2,7 @@ import { ToastQueue } from "@react-spectrum/toast"; import { StoreSnapshot, TLRecord, + TLShape, Editor as TldrawEditor, debounce, } from "@tldraw/editor"; @@ -135,7 +136,27 @@ const AppModel = types }, 1000), ); + /* ---------------------------- autoZoomListener ---------------------------- */ + /** + * # Overview + * We want to zoom to the selection when a new shape is added to the canvas. + */ + const autoZoomListener = editor.store.listen((entry) => { + const rec = entry?.changes?.added; + const recId = Object.keys(rec)?.[0] as TLShape["id"]; + if (!recId) return; + + editor.select(rec[recId] as TLShape); + editor.zoomToSelection(); + editor.zoomToBounds(editor.getSelectionPageBounds()!); + editor.resetZoom(); + editor.zoomToSelection(); + }); + + /* ------------------------------------ - ----------------------------------- */ + self.tldrEditorListeners.push(lin); + self.tldrEditorListeners.push(autoZoomListener); }, beforeDestroy() { self.tldrEditorListeners.forEach((lin) => lin()); diff --git a/minirepos/@codeplot-front/src/@.tldraw.canvas/_impl_/Canvas.tsx b/minirepos/@codeplot-front/src/@.tldraw.canvas/_impl_/Canvas.tsx index ed0d112..044e362 100644 --- a/minirepos/@codeplot-front/src/@.tldraw.canvas/_impl_/Canvas.tsx +++ b/minirepos/@codeplot-front/src/@.tldraw.canvas/_impl_/Canvas.tsx @@ -126,7 +126,9 @@ export const Canvas = observer((props: React.PropsWithChildren) => { aria-label="Copy WS URL to clipboard" onClick={() => { navigator.clipboard.writeText(appStore.wsUrl); - ToastQueue.neutral("Room url copied to clipboard!"); + ToastQueue.neutral("Room url copied to clipboard!", { + timeout: 3000, + }); }} > {appStore.wsUrl} diff --git a/minirepos/@codeplot-front/src/@.tldraw.canvas/_impl_/overrides.ts b/minirepos/@codeplot-front/src/@.tldraw.canvas/_impl_/overrides.ts index 6ad126c..fc62a30 100644 --- a/minirepos/@codeplot-front/src/@.tldraw.canvas/_impl_/overrides.ts +++ b/minirepos/@codeplot-front/src/@.tldraw.canvas/_impl_/overrides.ts @@ -93,7 +93,9 @@ const _copyRoomUrlTldrawAction: NonNullable = ( readonlyOk: true, onSelect() { navigator.clipboard.writeText(appStore.wsUrl); - ToastQueue.neutral("Room url copied to clipboard!"); + ToastQueue.neutral("Room url copied to clipboard!", { + timeout: 3000, + }); }, }; return actions; diff --git a/minirepos/@codeplot-front/src/@.tldraw.canvas/_impl_/useStore.ts b/minirepos/@codeplot-front/src/@.tldraw.canvas/_impl_/useStore.ts index 93e3d99..ed746eb 100644 --- a/minirepos/@codeplot-front/src/@.tldraw.canvas/_impl_/useStore.ts +++ b/minirepos/@codeplot-front/src/@.tldraw.canvas/_impl_/useStore.ts @@ -3,6 +3,7 @@ import { StoreSnapshot, TLAnyShapeUtilConstructor, TLRecord, + TLShape, TLStoreWithStatus, createTLStore, debounce, @@ -114,7 +115,30 @@ export function useStore({ switch (change.action) { case "add": case "update": { - const record = yStore.get(id)!; + const record = yStore.get(id)! as TLShape & { + props: { h: number }; + }; + + // Check if Record has x and y = 0, if so, set it to stack with the last record + if (record.x === 0 && record.y === 0) { + const lastRecord = store + .allRecords() + .filter((v) => (v as TLShape).type === "codeplot") + .sort((a, b) => { + const _a = a as unknown as { createdAt: number }; + const _b = b as unknown as { createdAt: number }; + if (_a.createdAt < _b.createdAt) return -1; + if (_a.createdAt > _b.createdAt) return 1; + return 0; + }) + .pop() as TLShape & { props: { h: number } }; + + if (lastRecord) { + record.x = lastRecord.x; + record.y = + lastRecord.y + lastRecord.props.h + record.props.h / 10; + } + } toPut.push(record); break; } diff --git a/minirepos/@codeplot-ipython/README.md b/minirepos/@codeplot-ipython/README.md index 22fd6a4..9add95a 100644 --- a/minirepos/@codeplot-ipython/README.md +++ b/minirepos/@codeplot-ipython/README.md @@ -121,3 +121,7 @@ Codeplot is free to use for personal and non-commercial purposes. Only pay if you use Codeplot commercially. Read more about [License and Pricing here](LICENSE.md). + +# Sponsor + +This project is sponsored by [LearnPolars.co](https://learnpolars.co). LearnPolars is a platform to learn data manipulation and analysis using Polars, a blazingly fast DataFrame library in Python (Rust). \ No newline at end of file diff --git a/minirepos/@codeplot-ipython/codeplot-ipython/__init__.py b/minirepos/@codeplot-ipython/codeplot-ipython/__init__.py index 5f14cad..d356882 100644 --- a/minirepos/@codeplot-ipython/codeplot-ipython/__init__.py +++ b/minirepos/@codeplot-ipython/codeplot-ipython/__init__.py @@ -5,25 +5,25 @@ import codeplot + + @magics_class -class Magics(Magics): - +class CodeplotMagics(Magics): @line_magic def cP_connect(self, line): - "A line magic to accept parameters and establish connection." - # Process the line into parameters here + """Establish a connection to Codeplot with the provided URL.""" params = line.split() - # Establish connection using the first parameter as URL if params: url = params[0] asyncio.create_task(self.shell.user_ns['_cP_extension'].connect_to_codeplot(url)) else: raise Exception("No URL provided.") + @line_magic - def cP_supress_output(self, boolean): - "Toggle output suppression." - _cP_extension = self.shell.user_ns.get('_cP_extension') - _cP_extension._supress_output = boolean + def cP_supress(self, boolean): + """Toggle output suppression.""" + _cP_extension = self.shell.user_ns['_cP_extension'] + _cP_extension._suppress = boolean.lower() == 'true' print(f"Output suppression is now: {boolean}.") @magic_arguments() @@ -31,69 +31,70 @@ def cP_supress_output(self, boolean): @argument('-tl', '--title', help='Title of the plot.') @line_magic def cP_plot(self, line): - # Parse arguments - _cP_extension = self.shell.user_ns.get('_cP_extension') - _cP_extension._plot_magic_args = { - **_cP_extension._plot_magic_args, - **vars(parse_argstring(self.cP_plot, line)) - } + """Parse arguments for plotting.""" + args = parse_argstring(self.cP_plot, line) + _cP_extension = self.shell.user_ns['_cP_extension'] + _cP_extension._plot_magic_args.update(vars(args)) + class IPythonExtension: def __init__(self, ipython): self.ipython = ipython - self.captured_output = [] self.cP = None self.connection_established = False - self._supress_output = True + self._suppress = True self._plot_magic_args = {} - self._original_display_pub_publish = self.ipython.display_pub.publish + self.hook_into_ipython() + + def hook_into_ipython(self): + """Modify IPython hooks and methods for custom behavior.""" self.ipython.display_pub.publish = self.custom_display_pub_publish - + self.ipython.user_ns['_cP_extension'] = self + self.ipython.events.register('pre_run_cell', self.pre_run_cell) async def connect_to_codeplot(self, url): + """Connect to Codeplot asynchronously.""" if not self.connection_established and url: self.cP = await codeplot.connect(url) self.connection_established = True print("Connected to Codeplot.") + def _display_hook__call__(self, result=None): + """Custom display hook.""" + if result is not None and self.cP: + asyncio.create_task(self.cP.plot(result, **self._plot_magic_args)) + + self._plot_magic_args = {} + if not self._suppress: + self.ipython.displayhook.__ocall__(result) + + def custom_display_pub_publish(self, *args, **kwargs): - data = kwargs.get('data', None) - if data is not None: + """Custom publishing method that integrates with Codeplot.""" + data = kwargs.get('data') + if data and self.cP: asyncio.create_task(self.cP.plot(data, **self._plot_magic_args)) - self._ploted_by_display_pub = True - if self._supress_output is False: + + if not self._suppress: self._original_display_pub_publish(*args, **kwargs) - def pre_run_cell(self, info): + """Prepare arguments before running a cell.""" + if hasattr(info, 'cell_id') and info.cell_id: + self._plot_magic_args['id'] = info.cell_id + self._plot_magic_args['ipythonCellId'] = info.cell_id - # Build args from the cell info - if hasattr(info, 'cell_id'): - if info.cell_id is not None: - self._plot_magic_args['id'] = info.cell_id - self._plot_magic_args['ipythonCellId'] = info.cell_id if hasattr(info, 'raw_cell'): self._plot_magic_args['ipythonRawCell'] = info.raw_cell - def post_run_cell(self, result): - if not self.connection_established: - # The connection is now established using the %connect magic, so this may not be needed - pass - if result.result is not None and self.cP is not None: - asyncio.create_task(self.cP.plot(result.result, **self._plot_magic_args)) - - # Clean up the current cell id - self._magic_current_cell_id = None - self._plot_magic_args = {} - - def load_ipython_extension(ipython): - - ipython.register_magics(Magics(ipython)) - _cP_extension = IPythonExtension(ipython) - # Store the extension instance in the IPython user namespace for access from magics - ipython.user_ns['_cP_extension'] = _cP_extension - ipython.events.register('pre_run_cell', _cP_extension.pre_run_cell) - ipython.events.register('post_run_cell', _cP_extension.post_run_cell) + """Load the IPython extension.""" + magics = CodeplotMagics(ipython) + ipython.register_magics(magics) + ext = IPythonExtension(ipython) + # Save the original display_pub.publish method + # and replace it with the custom method. + ipython.displayhook_class.__ocall__ = ipython.displayhook_class.__call__ + ipython.displayhook_class.__call__ = ext._display_hook__call__ diff --git a/minirepos/@codeplot-ipython/setup.py b/minirepos/@codeplot-ipython/setup.py index 4296147..3c54a5b 100644 --- a/minirepos/@codeplot-ipython/setup.py +++ b/minirepos/@codeplot-ipython/setup.py @@ -2,10 +2,10 @@ setup( name='codeplot-ipython', - version='1.8.0', + version='1.14.1', packages=find_packages(), install_requires=[ - 'codeplot >= 1.2.0', + 'codeplot >= 1.3.1', 'asyncio >= 3.4.3', ], author='Antonio Moura (@antl3x)', diff --git a/minirepos/@codeplot-python/README.md b/minirepos/@codeplot-python/README.md index 22fd6a4..9add95a 100644 --- a/minirepos/@codeplot-python/README.md +++ b/minirepos/@codeplot-python/README.md @@ -121,3 +121,7 @@ Codeplot is free to use for personal and non-commercial purposes. Only pay if you use Codeplot commercially. Read more about [License and Pricing here](LICENSE.md). + +# Sponsor + +This project is sponsored by [LearnPolars.co](https://learnpolars.co). LearnPolars is a platform to learn data manipulation and analysis using Polars, a blazingly fast DataFrame library in Python (Rust). \ No newline at end of file diff --git a/minirepos/@codeplot-python/build/lib/codeplot/main.py b/minirepos/@codeplot-python/build/lib/codeplot/main.py index 75aff49..bae0b38 100644 --- a/minirepos/@codeplot-python/build/lib/codeplot/main.py +++ b/minirepos/@codeplot-python/build/lib/codeplot/main.py @@ -113,8 +113,8 @@ async def plot(self, data, **kwargs) -> None: kwargs.setdefault("rotation",shape['rotation'] if shape else 0) kwargs.setdefault("opacity", shape['opacity'] if shape else 1) kwargs.setdefault("is_locked", shape['isLocked'] if shape else False) - kwargs.setdefault("x_pos", shape['x'] if shape else -camera["x"] + 100) - kwargs.setdefault("y_pos", shape['y'] if shape else -camera["y"] + 100) + kwargs.setdefault("x_pos", shape['x'] if shape else 0) + kwargs.setdefault("y_pos", shape['y'] if shape else 0) kwargs.setdefault("page_id", instance["currentPageId"]) kwargs.setdefault("ipythonRawCell", None) kwargs.setdefault("ipythonCellId", None) @@ -137,7 +137,7 @@ async def plot(self, data, **kwargs) -> None: "renderWith": "default", "mime": _get_mime_representations(data), "metadata": { - "isPinned": False, + "isPinned": True, "pythonCallerFrameCodeContext": metacode_line, "ipythonRawCell": kwargs["ipythonRawCell"], "ipythonCellId": kwargs["ipythonCellId"], @@ -198,7 +198,7 @@ def _get_mime_representations(obj): representations = {} # Here we check if obj is a representation itself - if isinstance(obj, dict) and 'text/plain' in obj: + if isinstance(obj, dict): return obj for method_name, mime_type in mime_types.items(): diff --git a/minirepos/@codeplot-python/codeplot.egg-info/PKG-INFO b/minirepos/@codeplot-python/codeplot.egg-info/PKG-INFO index b9f64d8..b45d759 100644 --- a/minirepos/@codeplot-python/codeplot.egg-info/PKG-INFO +++ b/minirepos/@codeplot-python/codeplot.egg-info/PKG-INFO @@ -1,6 +1,6 @@ Metadata-Version: 2.1 Name: codeplot -Version: 1.2.0 +Version: 1.3.1 Summary: codeplot is a canvas designed for code-driven data exploration where you can plot graphs, data frames, markdown and much more using plain Python Home-page: https://github.com/codeplot-co/codeplot Author: Antonio Moura (@antl3x) @@ -9,12 +9,6 @@ License: AGPL-3.0-or-later Classifier: Programming Language :: Python :: 3 Requires-Python: >=3.6 Description-Content-Type: text/markdown -Requires-Dist: watchdog>=3.0.0 -Requires-Dist: typeid-python>=0.2.2 -Requires-Dist: ypy-websocket>=0.12.4 -Requires-Dist: asyncio>=3.4.3 -Requires-Dist: websockets>=11.0 -Requires-Dist: y-py>=0.6.2 ![codeplot-readme](https://github.com/codeplot-co/codeplot/assets/26308297/e1212d25-a731-4755-875d-e988848f6d87)

@@ -139,3 +133,7 @@ Codeplot is free to use for personal and non-commercial purposes. Only pay if you use Codeplot commercially. Read more about [License and Pricing here](LICENSE.md). + +# Sponsor + +This project is sponsored by [LearnPolars.co](https://learnpolars.co). LearnPolars is a platform to learn data manipulation and analysis using Polars, a blazingly fast DataFrame library in Python (Rust). diff --git a/minirepos/@codeplot-python/codeplot/main.py b/minirepos/@codeplot-python/codeplot/main.py index 472ea0d..bae0b38 100644 --- a/minirepos/@codeplot-python/codeplot/main.py +++ b/minirepos/@codeplot-python/codeplot/main.py @@ -113,8 +113,8 @@ async def plot(self, data, **kwargs) -> None: kwargs.setdefault("rotation",shape['rotation'] if shape else 0) kwargs.setdefault("opacity", shape['opacity'] if shape else 1) kwargs.setdefault("is_locked", shape['isLocked'] if shape else False) - kwargs.setdefault("x_pos", shape['x'] if shape else -camera["x"] + 100) - kwargs.setdefault("y_pos", shape['y'] if shape else -camera["y"] + 100) + kwargs.setdefault("x_pos", shape['x'] if shape else 0) + kwargs.setdefault("y_pos", shape['y'] if shape else 0) kwargs.setdefault("page_id", instance["currentPageId"]) kwargs.setdefault("ipythonRawCell", None) kwargs.setdefault("ipythonCellId", None) @@ -137,7 +137,7 @@ async def plot(self, data, **kwargs) -> None: "renderWith": "default", "mime": _get_mime_representations(data), "metadata": { - "isPinned": False, + "isPinned": True, "pythonCallerFrameCodeContext": metacode_line, "ipythonRawCell": kwargs["ipythonRawCell"], "ipythonCellId": kwargs["ipythonCellId"], diff --git a/minirepos/@codeplot-python/setup.py b/minirepos/@codeplot-python/setup.py index c2808fa..54ff0d8 100644 --- a/minirepos/@codeplot-python/setup.py +++ b/minirepos/@codeplot-python/setup.py @@ -2,7 +2,7 @@ setup( name='codeplot', - version='1.2.0', + version='1.3.1', packages=find_packages(), install_requires=[ 'watchdog >= 3.0.0', From bd44bee6369e0a3f022b0c22126cdc4d2a84eb10 Mon Sep 17 00:00:00 2001 From: "Antonio Moura (@antl3x)" Date: Mon, 20 May 2024 10:39:56 -0600 Subject: [PATCH 03/11] #0 --- .vscode/settings.json | 4 +- README.md | 21 +- examples/Demo Notebook (SDK).ipynb | 120 ++++++++++ examples/Demo Notebook.ipynb | 208 ++++++++++++++++++ .../codeplot-ipython/__init__.py | 30 ++- minirepos/@codeplot-ipython/setup.py | 2 +- 6 files changed, 367 insertions(+), 18 deletions(-) create mode 100644 examples/Demo Notebook (SDK).ipynb create mode 100644 examples/Demo Notebook.ipynb diff --git a/.vscode/settings.json b/.vscode/settings.json index 6fc595d..bc09b5e 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -4,5 +4,7 @@ "source.fixAll.eslint": "explicit", "source.fixAll.stylelint": "explicit" }, - "stylelint.validate": ["css", "scss"] + "stylelint.validate": ["css", "scss"], + // Keybindings + } \ No newline at end of file diff --git a/README.md b/README.md index 9add95a..30e84c7 100644 --- a/README.md +++ b/README.md @@ -27,7 +27,7 @@ Created by [@antl3x](https://github.com/antl3x), [read more](https://antl3x.co/p - **Open to Everyone**: Designed for data scientists and enthusiasts alike, codeplot aims to enhance your data exploration experience. # Getting Started (IPython Extension) -To use codeplot in a IPython Notebook like Jupyter, Google Colab, etc, you can install the IPython Extension using pip: +To use codeplot in a IPython environment like Jupyter, Google Colab, etc, you can install the IPython Extension using pip: ```bash pip install codeplot-ipython @@ -42,6 +42,8 @@ After install you can load the extension and connect to a new room: Now the output of your cells will be automatically plotted in the codeplot canvas! So you don't need to use the `cP.plot` function. +Take a look at [the Notebook Example](/examples/Demo%20Notebook.ipynb) + Thats all! # Getting Started (Python SDK) @@ -71,23 +73,18 @@ async def main(): asyncio.run(main()) ``` +Take a look at [the Notebook (SDK Example)](/examples/Demo%20Notebook%20(SDK).ipynb) + +--- + +## Demo - codeplot.co + You can use the public codeplot client & server to start plotting right away: 1. Join the codeplot room at [codeplot.co](https://codeplot.co) 2. Use the room id to connect to the room using the code above -If you want to use codeplot in a Jupyter Notebook, you can use the following code: - -```python -import codeplot -cP = await codeplot.connect("ws://your-ws-url/your-room-id") - -# Now you can start plotting -await cP.plot(df.describe()) -await cP.plot(df.head(10)) -await cP.plot(df) -``` # Run Codeplot on Docker diff --git a/examples/Demo Notebook (SDK).ipynb b/examples/Demo Notebook (SDK).ipynb new file mode 100644 index 0000000..505e5fd --- /dev/null +++ b/examples/Demo Notebook (SDK).ipynb @@ -0,0 +1,120 @@ +{ + "nbformat": 4, + "nbformat_minor": 0, + "metadata": { + "colab": { + "provenance": [] + }, + "kernelspec": { + "name": "python3", + "display_name": "Python 3" + }, + "language_info": { + "name": "python" + } + }, + "cells": [ + { + "cell_type": "code", + "execution_count": null, + "metadata": { + "id": "jkBShJ2VtKop" + }, + "outputs": [], + "source": [ + "!pip install codeplot" + ] + }, + { + "cell_type": "code", + "source": [ + "# Import and connect to the session\n", + "import codeplot\n", + "cP = await codeplot.connect(\"wss://api.codeplot.co/room_01hpqznh4efe88tqhr31hd30yr\")" + ], + "metadata": { + "id": "5r-fFLuQtd9J" + }, + "execution_count": null, + "outputs": [] + }, + { + "cell_type": "code", + "source": [ + "import nest_asyncio\n", + "import pandas as pd\n", + "import seaborn as sns\n", + "import matplotlib.pyplot as plt\n", + "nest_asyncio.apply()\n", + "\n", + "df = pd.read_csv('https://raw.githubusercontent.com/mwaskom/seaborn-data/master/titanic.csv')" + ], + "metadata": { + "id": "N49ephcetfZv" + }, + "execution_count": null, + "outputs": [] + }, + { + "cell_type": "code", + "source": [ + "# Let's plot the dataframe head.\n", + "await cP.plot(df.head(10));" + ], + "metadata": { + "id": "5aCBgBDEzEaK" + }, + "execution_count": null, + "outputs": [] + }, + { + "cell_type": "code", + "source": [ + "# Let's plot the dataframe datatypes.\n", + "await cP.plot(df.dtypes);" + ], + "metadata": { + "id": "WX_9V3lqzFHB" + }, + "execution_count": null, + "outputs": [] + }, + { + "cell_type": "code", + "source": [ + "# Let's plot the dataframe shape.\n", + "await cP.plot(df.shape);" + ], + "metadata": { + "id": "8xK1RatTzNvM" + }, + "execution_count": null, + "outputs": [] + }, + { + "cell_type": "code", + "source": [ + "# Drop rows with missing values in 'age' or 'fare' columns for clarity in the scatter plot\n", + "df = df.dropna(subset=['age', 'fare'])\n", + "\n", + "# Create the scatter plot\n", + "plt.figure(figsize=(10, 6)) # Set the figure size for better readability\n", + "sns.scatterplot(data=df, x='age', y='fare', hue='class', style='sex', size='survived', sizes=(20, 200), alpha=0.7)\n", + "\n", + "# Adding plot title and labels\n", + "plt.title('Age vs Fare on the Titanic')\n", + "plt.xlabel('Age')\n", + "plt.ylabel('Fare')\n", + "plt.legend(title='Passenger Details')\n", + "\n", + "# Show the plot\n", + "await cP.plot(plt);" + ], + "metadata": { + "id": "avxUwTNBzCZS" + }, + "execution_count": null, + "outputs": [] + } + ] +} \ No newline at end of file diff --git a/examples/Demo Notebook.ipynb b/examples/Demo Notebook.ipynb new file mode 100644 index 0000000..fbe4042 --- /dev/null +++ b/examples/Demo Notebook.ipynb @@ -0,0 +1,208 @@ +{ + "cells": [ + { + "cell_type": "code", + "execution_count": null, + "metadata": { + "id": "cP1-t9sGTe8n" + }, + "outputs": [], + "source": [ + "# Install Codeploy IPython Extension\n", + "!pip install codeplot-ipython" + ] + }, + { + "cell_type": "code", + "execution_count": 1, + "metadata": { + "id": "5IvRzlkZUSJx", + "colab": { + "base_uri": "https://localhost:8080/" + }, + "outputId": "095d164e-ba07-48cc-b77c-7595fa024237" + }, + "outputs": [ + { + "output_type": "stream", + "name": "stdout", + "text": [ + "Output suppression is now: True.\n" + ] + } + ], + "source": [ + "# Load Extension\n", + "%load_ext codeplot-ipython\n", + "\n", + "# Connect to Codeplot Session\n", + "%cP_connect wss://api.codeplot.co/room_01hybcyhjnet4ak4zp9sh19sgh\n", + "%cP_supress True" + ] + }, + { + "cell_type": "code", + "source": [ + "import polars as pl\n", + "import pandas as pd\n", + "import seaborn as sns\n", + "import numpy as np\n", + "import matplotlib.pylab as plt" + ], + "metadata": { + "id": "zLniXIES1U5M" + }, + "execution_count": 2, + "outputs": [] + }, + { + "cell_type": "code", + "source": [ + "df = sns.load_dataset('titanic')\n", + "df.head()" + ], + "metadata": { + "id": "6fFHCYKXvKJ2" + }, + "execution_count": 10, + "outputs": [] + }, + { + "cell_type": "code", + "source": [ + "# Let's plot the dataframe shape.\n", + "df.shape;" + ], + "metadata": { + "id": "E6LnBEVkveue" + }, + "execution_count": 5, + "outputs": [] + }, + { + "cell_type": "code", + "source": [ + "# Let's plot the dataframe columns.\n", + "df.columns;" + ], + "metadata": { + "id": "1YSwHcOLyUUF" + }, + "execution_count": 5, + "outputs": [] + }, + { + "cell_type": "code", + "source": [ + "# Let's plot the dataframe datatypes.\n", + "df.dtypes" + ], + "metadata": { + "id": "s6DAZOmNviLn" + }, + "execution_count": 6, + "outputs": [] + }, + { + "cell_type": "code", + "source": [ + "# Let's describe the dataframe.\n", + "df.describe()" + ], + "metadata": { + "id": "H1iwyFLXyfB0" + }, + "execution_count": 7, + "outputs": [] + }, + { + "cell_type": "code", + "source": [ + "# Handling missing values\n", + "df.dropna(inplace=True) # Remove rows with missing values\n" + ], + "metadata": { + "id": "UdELTkTxv0dq" + }, + "execution_count": 8, + "outputs": [] + }, + { + "cell_type": "code", + "source": [ + "# Bar plot\n", + "sns.countplot(x='survived', data=df)\n", + "plt.xlabel('Survival Status')\n", + "plt.ylabel('Count')\n", + "plt.title('Survival Count')\n", + "plt.show()\n", + "\n", + "# Histogram\n", + "plt.hist(df['age'], bins=10)\n", + "plt.xlabel('Age')\n", + "plt.ylabel('Frequency')\n", + "plt.title('Distribution of Age')\n", + "plt.show()\n", + "\n", + "# Scatter plot\n", + "plt.scatter(df['age'], df['fare'])\n", + "plt.xlabel('Age')\n", + "plt.ylabel('Fare')\n", + "plt.title('Age vs. Fare')\n", + "plt.show()\n", + "\n", + "# Box plot\n", + "sns.boxplot(x=df['survived'], y=df['fare'])\n", + "plt.xlabel('Survival Status')\n", + "plt.ylabel('Fare')\n", + "plt.title('Survival Status vs. Fare')\n", + "plt.show()" + ], + "metadata": { + "id": "e_dq5Fie0rzg" + }, + "execution_count": 12, + "outputs": [] + }, + { + "cell_type": "code", + "source": [ + "# Correlation analysis\n", + "correlation = df[['age', 'fare']].corr()\n", + "correlation" + ], + "metadata": { + "id": "rHWdnZbv1UeG" + }, + "execution_count": 17, + "outputs": [] + }, + { + "cell_type": "code", + "source": [ + "# Cross-tabulation\n", + "cross_tab = pd.crosstab(df['pclass'], df['survived'])\n", + "cross_tab" + ], + "metadata": { + "id": "t9d8FwLk1fOT" + }, + "execution_count": 18, + "outputs": [] + } + ], + "metadata": { + "colab": { + "provenance": [] + }, + "kernelspec": { + "display_name": "Python 3", + "name": "python3" + }, + "language_info": { + "name": "python" + } + }, + "nbformat": 4, + "nbformat_minor": 0 +} \ No newline at end of file diff --git a/minirepos/@codeplot-ipython/codeplot-ipython/__init__.py b/minirepos/@codeplot-ipython/codeplot-ipython/__init__.py index d356882..21be621 100644 --- a/minirepos/@codeplot-ipython/codeplot-ipython/__init__.py +++ b/minirepos/@codeplot-ipython/codeplot-ipython/__init__.py @@ -1,10 +1,32 @@ import asyncio from IPython.core.magic import Magics, magics_class, line_magic from IPython.core.magic_arguments import (argument, magic_arguments, parse_argstring) - +import threading import codeplot +class AsyncLoopThread: + """A class that manages an asyncio loop in a separate thread.""" + def __init__(self): + self.loop = asyncio.new_event_loop() + self.thread = threading.Thread(target=self.run_loop) + self.thread.start() + + def run_loop(self): + """Run the loop until it is stopped.""" + asyncio.set_event_loop(self.loop) + self.loop.run_forever() + + def stop(self): + """Stop the loop and wait for the thread to finish.""" + self.loop.call_soon_threadsafe(self.loop.stop) + self.thread.join() + + def run_coroutine(self, coro): + """Thread-safe way to schedule a coroutine in the loop.""" + return asyncio.run_coroutine_threadsafe(coro, self.loop) + +async_loop_thread = AsyncLoopThread() # Initialize this somewhere suitable @magics_class @@ -15,7 +37,7 @@ def cP_connect(self, line): params = line.split() if params: url = params[0] - asyncio.create_task(self.shell.user_ns['_cP_extension'].connect_to_codeplot(url)) + async_loop_thread.run_coroutine(self.shell.user_ns['_cP_extension'].connect_to_codeplot(url)) else: raise Exception("No URL provided.") @@ -62,7 +84,7 @@ async def connect_to_codeplot(self, url): def _display_hook__call__(self, result=None): """Custom display hook.""" if result is not None and self.cP: - asyncio.create_task(self.cP.plot(result, **self._plot_magic_args)) + async_loop_thread.run_coroutine(self.cP.plot(result, **self._plot_magic_args)) self._plot_magic_args = {} if not self._suppress: @@ -73,7 +95,7 @@ def custom_display_pub_publish(self, *args, **kwargs): """Custom publishing method that integrates with Codeplot.""" data = kwargs.get('data') if data and self.cP: - asyncio.create_task(self.cP.plot(data, **self._plot_magic_args)) + async_loop_thread.run_coroutine(self.cP.plot(data, **self._plot_magic_args)) if not self._suppress: self._original_display_pub_publish(*args, **kwargs) diff --git a/minirepos/@codeplot-ipython/setup.py b/minirepos/@codeplot-ipython/setup.py index 3c54a5b..1956c90 100644 --- a/minirepos/@codeplot-ipython/setup.py +++ b/minirepos/@codeplot-ipython/setup.py @@ -2,7 +2,7 @@ setup( name='codeplot-ipython', - version='1.14.1', + version='1.15.0', packages=find_packages(), install_requires=[ 'codeplot >= 1.3.1', From d7d3fdf38b97911bf35680404ba951fbbfca2f92 Mon Sep 17 00:00:00 2001 From: "Antonio Moura (@antl3x)" Date: Mon, 20 May 2024 13:23:21 -0600 Subject: [PATCH 04/11] #0 --- minirepos/@codeplot-front/package.json | 2 +- .../@codeplot-front/src/@.core/_impl_/AppModel.ts | 2 ++ .../src/@.tldraw.canvas/_impl_/Canvas.tsx | 4 ++++ .../src/@.tldraw.canvas/_impl_/overrides.ts | 2 +- .../src/@.tldraw.canvas/_impl_/styles.css | 8 ++++++-- .../src/@.tldraw.canvas/_impl_/useStore.ts | 2 ++ .../src/@.tldraw.shapes/_impl_/CodeplotShapeUtil.tsx | 11 ++++++++++- .../_impl_/[render] DefaultMimeImageSvgXmlRender.tsx | 6 +++++- .../_impl_/[render] DefaultMimeTextHtmlRender.tsx | 7 ++++--- .../src/@.tldraw.shapes/_impl_/styles.css | 4 ++++ 10 files changed, 39 insertions(+), 9 deletions(-) diff --git a/minirepos/@codeplot-front/package.json b/minirepos/@codeplot-front/package.json index a326119..e76a2d6 100644 --- a/minirepos/@codeplot-front/package.json +++ b/minirepos/@codeplot-front/package.json @@ -1,7 +1,7 @@ { "name": "@codeplot/front", "private": true, - "version": "1.1.0", + "version": "1.2.0", "type": "module", "scripts": { "compile": "zx _scripts/compile.mjs", diff --git a/minirepos/@codeplot-front/src/@.core/_impl_/AppModel.ts b/minirepos/@codeplot-front/src/@.core/_impl_/AppModel.ts index 43d98ec..8be0aa5 100644 --- a/minirepos/@codeplot-front/src/@.core/_impl_/AppModel.ts +++ b/minirepos/@codeplot-front/src/@.core/_impl_/AppModel.ts @@ -145,6 +145,8 @@ const AppModel = types const rec = entry?.changes?.added; const recId = Object.keys(rec)?.[0] as TLShape["id"]; if (!recId) return; + // We only want to zoom to the selection if the shape is a codeplot + if ((rec[recId] as TLShape)?.type !== "codeplot") return; editor.select(rec[recId] as TLShape); editor.zoomToSelection(); diff --git a/minirepos/@codeplot-front/src/@.tldraw.canvas/_impl_/Canvas.tsx b/minirepos/@codeplot-front/src/@.tldraw.canvas/_impl_/Canvas.tsx index 044e362..b65d61a 100644 --- a/minirepos/@codeplot-front/src/@.tldraw.canvas/_impl_/Canvas.tsx +++ b/minirepos/@codeplot-front/src/@.tldraw.canvas/_impl_/Canvas.tsx @@ -22,6 +22,8 @@ import { LaserTool, LineShapeTool, LineShapeUtil, + NoteShapeTool, + NoteShapeUtil, TldrawScribble as Scribble, SelectTool, TldrawSelectionBackground as SelectionBackground, @@ -70,6 +72,7 @@ export const Canvas = observer((props: React.PropsWithChildren) => { HighlightShapeUtil, VideoShapeUtil, CodeplotShapeUtil, + NoteShapeUtil, ], tools: [ EraserTool, @@ -83,6 +86,7 @@ export const Canvas = observer((props: React.PropsWithChildren) => { LineShapeTool, ArrowShapeTool, HighlightShapeTool, + NoteShapeTool, ], }), [], diff --git a/minirepos/@codeplot-front/src/@.tldraw.canvas/_impl_/overrides.ts b/minirepos/@codeplot-front/src/@.tldraw.canvas/_impl_/overrides.ts index fc62a30..ecef4a0 100644 --- a/minirepos/@codeplot-front/src/@.tldraw.canvas/_impl_/overrides.ts +++ b/minirepos/@codeplot-front/src/@.tldraw.canvas/_impl_/overrides.ts @@ -234,7 +234,7 @@ const _toolsOverrides: TLUiOverrides["tools"] = (_, tools) => { const _toolbarOverrides: TLUiOverrides["toolbar"] = (_, toolbar) => { return toolbar.filter((item) => { - return item.id === "hand" || item.id === "select"; + return item; }); }; /* -------------------------------------------------------------------------- */ diff --git a/minirepos/@codeplot-front/src/@.tldraw.canvas/_impl_/styles.css b/minirepos/@codeplot-front/src/@.tldraw.canvas/_impl_/styles.css index 0770bf0..591d288 100644 --- a/minirepos/@codeplot-front/src/@.tldraw.canvas/_impl_/styles.css +++ b/minirepos/@codeplot-front/src/@.tldraw.canvas/_impl_/styles.css @@ -51,11 +51,15 @@ display: none; } +button[data-tool="asset"] { + display: none; +} + .tlui-toolbar__tools { justify-content: center; width: fit-content; } -button[title="Styles"] { +/* button[title="Styles"] { display: none; -} +} */ diff --git a/minirepos/@codeplot-front/src/@.tldraw.canvas/_impl_/useStore.ts b/minirepos/@codeplot-front/src/@.tldraw.canvas/_impl_/useStore.ts index ed746eb..c4357de 100644 --- a/minirepos/@codeplot-front/src/@.tldraw.canvas/_impl_/useStore.ts +++ b/minirepos/@codeplot-front/src/@.tldraw.canvas/_impl_/useStore.ts @@ -108,6 +108,8 @@ export function useStore({ ) => { if (transaction.local) return; + console.log("not local"); + const toRemove: TLRecord["id"][] = []; const toPut: TLRecord[] = []; diff --git a/minirepos/@codeplot-front/src/@.tldraw.shapes/_impl_/CodeplotShapeUtil.tsx b/minirepos/@codeplot-front/src/@.tldraw.shapes/_impl_/CodeplotShapeUtil.tsx index 62550e7..fe16c54 100644 --- a/minirepos/@codeplot-front/src/@.tldraw.shapes/_impl_/CodeplotShapeUtil.tsx +++ b/minirepos/@codeplot-front/src/@.tldraw.shapes/_impl_/CodeplotShapeUtil.tsx @@ -5,6 +5,7 @@ import { TLOnResizeHandler, TLShapeUtilFlag, resizeBox, + useEditor, } from "@tldraw/tldraw"; import { useEffect, useRef, useState } from "react"; import { observer } from "mobx-react"; @@ -69,6 +70,9 @@ export const Component = observer(({ shape }: { shape: ICodeplotShape }) => { const pinRef = useRef(shape.props.metadata.isPinned); const [, forceUpdate] = useState({}); + const editor = useEditor(); + const [toolId, setToolId] = useState(editor.getCurrentToolId()); + // Initialize pin state from props only on the first render useEffect(() => { pinRef.current = shape.props.metadata.isPinned; @@ -88,9 +92,14 @@ export const Component = observer(({ shape }: { shape: ICodeplotShape }) => { return ( setToolId(editor.getCurrentToolId())} id={shape.id} data-is_pinned={pinRef.current} - className="codeplot-HTMLContainer" + className={`${ + toolId !== "select" + ? "codeplot-HTMLContainer codeplot-HTMLContainer--disabled" + : "codeplot-HTMLContainer" + }`} style={{ width: shape.props.w, height: shape.props.h, diff --git a/minirepos/@codeplot-front/src/@.tldraw.shapes/_impl_/[render] DefaultMimeImageSvgXmlRender.tsx b/minirepos/@codeplot-front/src/@.tldraw.shapes/_impl_/[render] DefaultMimeImageSvgXmlRender.tsx index 05fbf94..8c5a9d3 100644 --- a/minirepos/@codeplot-front/src/@.tldraw.shapes/_impl_/[render] DefaultMimeImageSvgXmlRender.tsx +++ b/minirepos/@codeplot-front/src/@.tldraw.shapes/_impl_/[render] DefaultMimeImageSvgXmlRender.tsx @@ -1,7 +1,8 @@ import { appStore } from "@.core"; +import { observer } from "mobx-react"; +import { useRef } from "react"; import { ICodeplotShape } from "./ICodeplotShape"; import { GLOBAL_IFRAME_SCRIPT, GLOBAL_STYLE } from "./IFRAME_SANDBOX_SCRIPTS"; -import { observer } from "mobx-react"; // import ReactJson from "react-json-view"; @@ -13,9 +14,12 @@ type IDefaultMimeImageSvgXmlRenderProps = { export const DefaultMimeImageSvgXmlRender = observer( ({ shape }: IDefaultMimeImageSvgXmlRenderProps) => { + const iframeRef = useRef(null); + return (