ITQC/pydase
24
0
Fork 0
mirror of https://github.com/tiqi-group/pydase.git synced 2025-06-07 05:50:41 +02:00
Code Issues Packages Projects Releases Wiki Activity

make Image collapsible in frontend

Browse Source
This commit is contained in:
Mose Müller 2023-08-16 11:14:52 +02:00
parent 6749603fee
commit 55620bc6e7
7 changed files with 28 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/components/ImageComponent.tsx
View File

@ -1,6 +1,7 @@
import React, { useEffect, useRef } from 'react'; import React, { useEffect, useRef, useState } from 'react';
import { Card, Image } from 'react-bootstrap'; import { Card, Collapse, Image } from 'react-bootstrap';
import { DocStringComponent } from './DocStringComponent'; import { DocStringComponent } from './DocStringComponent';
import { ChevronDown, ChevronRight } from 'react-bootstrap-icons';
interface ImageComponentProps { interface ImageComponentProps {
name: string; name: string;
@ -16,6 +17,7 @@ export const ImageComponent = React.memo((props: ImageComponentProps) => {
const { name, parentPath, value, docString, format, addNotification } = props; const { name, parentPath, value, docString, format, addNotification } = props;
const renderCount = useRef(0); const renderCount = useRef(0);
const [open, setOpen] = useState(true);
useEffect(() => { useEffect(() => {
renderCount.current++; renderCount.current++;
@ -29,11 +31,13 @@ export const ImageComponent = React.memo((props: ImageComponentProps) => {
<div className={'imageComponent'} id={parentPath.concat('.' + name)}> <div className={'imageComponent'} id={parentPath.concat('.' + name)}>
<Card> <Card>
<Card.Header <Card.Header
onClick={() => setOpen(!open)}
style={{ cursor: 'pointer' }} // Change cursor style on hover style={{ cursor: 'pointer' }} // Change cursor style on hover
> >
{name} {name} {open ? <ChevronDown /> : <ChevronRight />}
</Card.Header> </Card.Header>
<Collapse in={open}>
<Card.Body>
{process.env.NODE_ENV === 'development' && ( {process.env.NODE_ENV === 'development' && (
<p>Render count: {renderCount.current}</p> <p>Render count: {renderCount.current}</p>
)} )}
@ -44,6 +48,8 @@ export const ImageComponent = React.memo((props: ImageComponentProps) => {
) : ( ) : (
<Image src={`data:image/${format.toLowerCase()};base64,${value}`}></Image> <Image src={`data:image/${format.toLowerCase()};base64,${value}`}></Image>
)} )}
</Card.Body>
</Collapse>
</Card> </Card>
</div> </div>
); );

6
src/pydase/frontend/asset-manifest.json
View File

@ -1,13 +1,13 @@
{ {
"files": { "files": {
"main.css": "/static/css/main.398bc7f8.css", "main.css": "/static/css/main.398bc7f8.css",
"main.js": "/static/js/main.39f6b50e.js", "main.js": "/static/js/main.b69b2bbf.js",
"index.html": "/index.html", "index.html": "/index.html",
"main.398bc7f8.css.map": "/static/css/main.398bc7f8.css.map", "main.398bc7f8.css.map": "/static/css/main.398bc7f8.css.map",
"main.39f6b50e.js.map": "/static/js/main.39f6b50e.js.map" "main.b69b2bbf.js.map": "/static/js/main.b69b2bbf.js.map"
}, },
"entrypoints": [ "entrypoints": [
"static/css/main.398bc7f8.css", "static/css/main.398bc7f8.css",
"static/js/main.39f6b50e.js" "static/js/main.b69b2bbf.js"
] ]
} }

2
src/pydase/frontend/index.html
View File

@ -1 +1 @@
<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site displaying a pydase UI."/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>pydase App</title><script defer="defer" src="/static/js/main.39f6b50e.js"></script><link href="/static/css/main.398bc7f8.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html> <!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site displaying a pydase UI."/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>pydase App</title><script defer="defer" src="/static/js/main.b69b2bbf.js"></script><link href="/static/css/main.398bc7f8.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>

1
src/pydase/frontend/static/js/main.39f6b50e.js.map
View File

File diff suppressed because one or more lines are too long

6
src/pydase/frontend/static/js/main.39f6b50e.js → src/pydase/frontend/static/js/main.b69b2bbf.js
View File

File diff suppressed because one or more lines are too long

0
src/pydase/frontend/static/js/main.39f6b50e.js.LICENSE.txt → src/pydase/frontend/static/js/main.b69b2bbf.js.LICENSE.txt
View File

1
src/pydase/frontend/static/js/main.b69b2bbf.js.map Normal file
View File

File diff suppressed because one or more lines are too long