From 7bd10091af40f840fe8ab93f910432c08e804fe5 Mon Sep 17 00:00:00 2001
From: Milho001 <l.milhomemfrancochristino@uu.nl>
Date: Tue, 30 May 2023 08:52:11 +0000
Subject: [PATCH] feat(nodelink): enable nodelink panning, clicking and
inspection
---
apps/web/src/app/app.module.scss.d.ts | 8 ++
.../add-database-form.module.scss.d.ts | 6 +-
.../lib/vis/nodelink/NodeLinkViewModel.tsx | 3 +-
libs/shared/lib/vis/nodelink/nodelinkvis.tsx | 28 +++---
.../shared/VisConfigPanel/ArrowRightIcon.svg | 1 +
.../VisConfigPanel/QuestionMarkIcon.svg | 5 +
.../VisConfigPanel/VisConfigPanel.module.scss | 98 +++++++++++++++++++
.../VisConfigPanel.module.scss.d.ts | 9 ++
.../shared/VisConfigPanel/VisConfigPanel.tsx | 51 ++++++++++
9 files changed, 192 insertions(+), 17 deletions(-)
create mode 100644 apps/web/src/app/app.module.scss.d.ts
create mode 100644 libs/shared/lib/vis/shared/VisConfigPanel/ArrowRightIcon.svg
create mode 100644 libs/shared/lib/vis/shared/VisConfigPanel/QuestionMarkIcon.svg
create mode 100644 libs/shared/lib/vis/shared/VisConfigPanel/VisConfigPanel.module.scss
create mode 100644 libs/shared/lib/vis/shared/VisConfigPanel/VisConfigPanel.module.scss.d.ts
create mode 100644 libs/shared/lib/vis/shared/VisConfigPanel/VisConfigPanel.tsx
diff --git a/apps/web/src/app/app.module.scss.d.ts b/apps/web/src/app/app.module.scss.d.ts
new file mode 100644
index 000000000..6ff3621ba
--- /dev/null
+++ b/apps/web/src/app/app.module.scss.d.ts
@@ -0,0 +1,8 @@
+declare const classNames: {
+ readonly mainContainer: 'mainContainer';
+ readonly schema: 'schema';
+ readonly panel: 'panel';
+ readonly visualization: 'visualization';
+ readonly queryBuilder: 'queryBuilder';
+};
+export = classNames;
diff --git a/apps/web/src/components/navbar/AddDatabaseForm/add-database-form.module.scss.d.ts b/apps/web/src/components/navbar/AddDatabaseForm/add-database-form.module.scss.d.ts
index 56b78d300..2d4431d5b 100644
--- a/apps/web/src/components/navbar/AddDatabaseForm/add-database-form.module.scss.d.ts
+++ b/apps/web/src/components/navbar/AddDatabaseForm/add-database-form.module.scss.d.ts
@@ -1,15 +1,15 @@
declare const classNames: {
- cancelButton: string | undefined;
- passLabel: string | undefined;
- formWrapper: string | undefined;
readonly wrapper: 'wrapper';
readonly authWrapper: 'authWrapper';
readonly header: 'header';
+ readonly formWrapper: 'formWrapper';
readonly loginContainer: 'loginContainer';
readonly loginContainerRow: 'loginContainerRow';
readonly loginContainerButton: 'loginContainerButton';
readonly hostLabel: 'hostLabel';
readonly portLabel: 'portLabel';
readonly userLabel: 'userLabel';
+ readonly passLabel: 'passLabel';
+ readonly cancelButton: 'cancelButton';
};
export = classNames;
diff --git a/libs/shared/lib/vis/nodelink/NodeLinkViewModel.tsx b/libs/shared/lib/vis/nodelink/NodeLinkViewModel.tsx
index a7f98e93e..6d5ab96ab 100644
--- a/libs/shared/lib/vis/nodelink/NodeLinkViewModel.tsx
+++ b/libs/shared/lib/vis/nodelink/NodeLinkViewModel.tsx
@@ -59,7 +59,7 @@ export default class NodeLinkViewModel {
width: number,
height: number,
ref: React.RefObject<HTMLDivElement>,
- theme: Theme
+ theme: Theme,
) {
this.radius = 5;
@@ -456,6 +456,7 @@ export default class NodeLinkViewModel {
gfxName.x = 10;
gfxName.y = 10;
gfxName.name = 'header';
+
node.gfxAttributes.addChild(gfxName);
// add attributes container
diff --git a/libs/shared/lib/vis/nodelink/nodelinkvis.tsx b/libs/shared/lib/vis/nodelink/nodelinkvis.tsx
index 0dc526deb..358b43873 100644
--- a/libs/shared/lib/vis/nodelink/nodelinkvis.tsx
+++ b/libs/shared/lib/vis/nodelink/nodelinkvis.tsx
@@ -12,6 +12,9 @@ import * as PIXI from 'pixi.js';
import { GraphType, LinkType, NodeType } from './Types';
import NodeLinkViewModel from './NodeLinkViewModel';
import ResultNodeLinkParserUseCase from './ResultNodeLinkParserUseCase';
+import VisConfigPanelComponent from '../shared/VisConfigPanel/VisConfigPanel';
+import NodeLinkConfigPanelComponent from './config-panel/NodeConfigPanelComponent';
+import { use } from 'cytoscape';
interface Props {
loading?: boolean;
@@ -69,6 +72,8 @@ export const NodeLinkVis = React.memo((props: Props) => {
useEffect(() => {
console.log('update nodelink useEffect', graphQueryResult);
nodeLinkViewModelRef?.current?.consumeMessageFromBackend(graphQueryResult);
+ nodeLinkViewModelRef?.current?.startSimulation();
+ nodeLinkViewModelRef?.current?.selectD3Elements();
}, [graphQueryResult]);
useEffect(() => {
@@ -83,7 +88,6 @@ export const NodeLinkVis = React.memo((props: Props) => {
theme
);
nodeLinkViewModelRef.current = nodeLinkViewModel;
- console.log(graphQueryResult, nodeLinkViewModel.graph);
// Attach Viewmodel Observer
// nodeLinkViewModel.attachView(this);
@@ -99,7 +103,7 @@ export const NodeLinkVis = React.memo((props: Props) => {
// nodeLinkViewModel.SetNodeGraphics(graphQueryResult, Radius());
// Select d3 elements for zooming, panning and dragging
- // nodeLinkViewModel.selectD3Elements();
+ nodeLinkViewModel.selectD3Elements();
nodeLinkViewModel.simulation.on('tick', nodeLinkViewModel.ticked);
@@ -121,8 +125,6 @@ export const NodeLinkVis = React.memo((props: Props) => {
);
}
- // nodeLinkViewModel.unSubscribeFromQueryResult();
- // nodeLinkViewModel.unSubscribeFromAnalyticsData();
};
}, []);
@@ -184,15 +186,15 @@ export const NodeLinkVis = React.memo((props: Props) => {
className="renderer"
ref={myRef}
></div>
- {/*<VisConfigPanelComponent>*/}
- {/* <NodeLinkConfigPanelComponent*/}
- {/* graph={this.state.graph}*/}
- {/* nlViewModel={this.nodeLinkViewModel}*/}
- {/* />*/}
- {/*</VisConfigPanelComponent>*/}
- {/*<VisConfigPanelComponent isLeft>*/}
- {/* <AttributesConfigPanel nodeLinkViewModel={this.nodeLinkViewModel} />*/}
- {/*</VisConfigPanelComponent>*/}
+ <VisConfigPanelComponent>
+ {/* <NodeLinkConfigPanelComponent
+ graph={this.state.graph}
+ nlViewModel={this.nodeLinkViewModel}
+ /> */}
+ {/*</VisConfigPanelComponent>*/}
+ {/*<VisConfigPanelComponent isLeft>*/}
+ {/* <AttributesConfigPanel nodeLinkViewModel={this.nodeLinkViewModel} />*/}
+ </VisConfigPanelComponent>
</div>
)}
</>
diff --git a/libs/shared/lib/vis/shared/VisConfigPanel/ArrowRightIcon.svg b/libs/shared/lib/vis/shared/VisConfigPanel/ArrowRightIcon.svg
new file mode 100644
index 000000000..0b775d11e
--- /dev/null
+++ b/libs/shared/lib/vis/shared/VisConfigPanel/ArrowRightIcon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22"><defs><clipPath><path fill="#00f" fill-opacity=".514" d="m-7 1024.36h34v34h-34z"/></clipPath><clipPath><path fill="#aade87" fill-opacity=".472" d="m-6 1028.36h32v32h-32z"/></clipPath></defs><path d="m345.44 248.29l-194.29 194.28c-12.359 12.365-32.397 12.365-44.75 0-12.354-12.354-12.354-32.391 0-44.744l171.91-171.91-171.91-171.9c-12.354-12.359-12.354-32.394 0-44.748 12.354-12.359 32.391-12.359 44.75 0l194.29 194.28c6.177 6.18 9.262 14.271 9.262 22.366 0 8.099-3.091 16.196-9.267 22.373" transform="matrix(.03541-.00013.00013.03541 2.98 3.02)" fill="#4d4d4d"/></svg>
\ No newline at end of file
diff --git a/libs/shared/lib/vis/shared/VisConfigPanel/QuestionMarkIcon.svg b/libs/shared/lib/vis/shared/VisConfigPanel/QuestionMarkIcon.svg
new file mode 100644
index 000000000..75c116bed
--- /dev/null
+++ b/libs/shared/lib/vis/shared/VisConfigPanel/QuestionMarkIcon.svg
@@ -0,0 +1,5 @@
+<svg id="svg2" xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 200 200" version="1.0">
+ <g id="layer1">
+ <path id="path2413" d="m100 0c-55.2 0-100 44.8-100 100-5.0495e-15 55.2 44.8 100 100 100s100-44.8 100-100-44.8-100-100-100zm0 12.812c48.13 0 87.19 39.058 87.19 87.188s-39.06 87.19-87.19 87.19-87.188-39.06-87.188-87.19 39.058-87.188 87.188-87.188zm1.47 21.25c-5.45 0.03-10.653 0.737-15.282 2.063-4.699 1.346-9.126 3.484-12.876 6.219-3.238 2.362-6.333 5.391-8.687 8.531-4.159 5.549-6.461 11.651-7.063 18.687-0.04 0.468-0.07 0.868-0.062 0.876 0.016 0.016 21.702 2.687 21.812 2.687 0.053 0 0.113-0.234 0.282-0.937 1.941-8.085 5.486-13.521 10.968-16.813 4.32-2.594 9.808-3.612 15.778-2.969 2.74 0.295 5.21 0.96 7.38 2 2.71 1.301 5.18 3.361 6.94 5.813 1.54 2.156 2.46 4.584 2.75 7.312 0.08 0.759 0.05 2.48-0.03 3.219-0.23 1.826-0.7 3.378-1.5 4.969-0.81 1.597-1.48 2.514-2.76 3.812-2.03 2.077-5.18 4.829-10.78 9.407-3.6 2.944-6.04 5.156-8.12 7.343-4.943 5.179-7.191 9.069-8.564 14.719-0.905 3.72-1.256 7.55-1.156 13.19 0.025 1.4 0.062 2.73 0.062 2.97v0.43h21.598l0.03-2.4c0.03-3.27 0.21-5.37 0.56-7.41 0.57-3.27 1.43-5 3.94-7.81 1.6-1.8 3.7-3.76 6.93-6.47 4.77-3.991 8.11-6.99 11.26-10.125 4.91-4.907 7.46-8.26 9.28-12.187 1.43-3.092 2.22-6.166 2.46-9.532 0.06-0.816 0.07-3.03 0-3.968-0.45-7.043-3.1-13.253-8.15-19.032-0.8-0.909-2.78-2.887-3.72-3.718-4.96-4.394-10.69-7.353-17.56-9.094-4.19-1.062-8.23-1.6-13.35-1.75-0.78-0.023-1.59-0.036-2.37-0.032zm-10.908 103.6v22h21.998v-22h-21.998z"/>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/libs/shared/lib/vis/shared/VisConfigPanel/VisConfigPanel.module.scss b/libs/shared/lib/vis/shared/VisConfigPanel/VisConfigPanel.module.scss
new file mode 100644
index 000000000..65b8f3161
--- /dev/null
+++ b/libs/shared/lib/vis/shared/VisConfigPanel/VisConfigPanel.module.scss
@@ -0,0 +1,98 @@
+/**
+ * This program has been developed by students from the bachelor Computer Science at
+ * Utrecht University within the Software Project course.
+ * © Copyright Utrecht University (Department of Information and Computing Sciences)
+ */
+
+/* istanbul ignore file */
+/* The comment above was added so the code coverage wouldn't count this file towards code coverage.
+ * We do not test components/renderfunctions/styling files.
+ * See testing plan for more details.*/
+/** Stylesheet for the VisConfigPanelComponent */
+$expandButtonSize: 13px;
+
+:export {
+ expandButtonSize: $expandButtonSize;
+}
+
+.container {
+ height: 100%;
+ position: absolute;
+ top: 0;
+ background-color: #f0f0f0;
+
+ transition: right 0.2s, left 0.2s;
+ z-index: 100;
+
+ border-radius: 0 0 0 5px;
+
+ .expandButton {
+ position: absolute;
+ height: 100%;
+ width: $expandButtonSize;
+ background-color: #f0f0f0;
+ cursor: pointer;
+ border-radius: 0 0 0 5px;
+
+ &:hover {
+ background-color: rgb(230, 230, 230);
+ }
+
+ svg {
+ position: absolute;
+ width: 100%;
+ top: 50%;
+ margin-top: -0.5em;
+ }
+ .arrowLeft {
+ transform: rotate(180deg);
+ }
+ }
+
+ .childrenContainer {
+ width: 100%;
+ height: 100%;
+ padding: 15px;
+
+ .children {
+ width: 100%;
+ height: 100%;
+
+ overflow-x: hidden;
+ overflow-y: auto;
+
+ // SCROLLBAR STYLING
+ /* Works on Firefox */
+ scrollbar-width: thin;
+ scrollbar-color: #bebebe #f0f0f0;
+
+ /* Works on Chrome, Edge, and Safari */
+ &::-webkit-scrollbar {
+ width: 12px;
+ }
+
+ &::-webkit-scrollbar-track {
+ background: #f0f0f0;
+ }
+
+ &::-webkit-scrollbar-thumb {
+ background-color: #bebebe;
+ border-radius: 20px;
+ border: 3px solid #f0f0f0;
+ }
+ }
+ }
+}
+
+/* .expandButton::after {
+ content: '<';
+ line-height: 1;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ font-size: 16px;
+ display: block;
+ position: absolute;
+ top: 50%;
+ text-align: center;
+ margin-top: -0.5em;
+} */
diff --git a/libs/shared/lib/vis/shared/VisConfigPanel/VisConfigPanel.module.scss.d.ts b/libs/shared/lib/vis/shared/VisConfigPanel/VisConfigPanel.module.scss.d.ts
new file mode 100644
index 000000000..5099a5d37
--- /dev/null
+++ b/libs/shared/lib/vis/shared/VisConfigPanel/VisConfigPanel.module.scss.d.ts
@@ -0,0 +1,9 @@
+declare const classNames: {
+ readonly expandButtonSize: 'expandButtonSize';
+ readonly container: 'container';
+ readonly expandButton: 'expandButton';
+ readonly arrowLeft: 'arrowLeft';
+ readonly childrenContainer: 'childrenContainer';
+ readonly children: 'children';
+};
+export = classNames;
diff --git a/libs/shared/lib/vis/shared/VisConfigPanel/VisConfigPanel.tsx b/libs/shared/lib/vis/shared/VisConfigPanel/VisConfigPanel.tsx
new file mode 100644
index 000000000..9db7a6284
--- /dev/null
+++ b/libs/shared/lib/vis/shared/VisConfigPanel/VisConfigPanel.tsx
@@ -0,0 +1,51 @@
+/**
+ * This program has been developed by students from the bachelor Computer Science at
+ * Utrecht University within the Software Project course.
+ * © Copyright Utrecht University (Department of Information and Computing Sciences)
+ */
+
+/* istanbul ignore file */
+/* The comment above was added so the code coverage wouldn't count this file towards code coverage.
+ * We do not test components/renderfunctions/styling files.
+ * See testing plan for more details.*/
+
+/** A component for rendering a configuration panel to the right of the visualization. */
+
+import React, { useState } from 'react';
+import styles from './VisConfigPanel.module.scss';
+
+//TODO import { ReactComponent as ArrowRightSVG } from './ArrowRightIcon.svg';
+
+export default function VisConfigPanelComponent({
+ width = 250,
+ children,
+ isLeft = false,
+}: {
+ width?: number;
+ children?: React.ReactNode;
+ isLeft?: boolean;
+}) {
+ const [show, setShow] = useState(false);
+ const containerStyle = isLeft
+ ? { left: show ? 0 : -width + 13, width: width }
+ : { right: show ? 0 : -width + 13, width: width };
+ const arrowStyle = isLeft ? { right: 0 } : { left: 0 };
+
+ return (
+ <div className={styles.container} style={containerStyle} key="placeholderKey">
+ <div
+ className={styles.expandButton}
+ key="placeholderKey2"
+ onClick={() => (show ? setShow(false) : setShow(true))}
+ style={arrowStyle}
+ >
+ {/* <ArrowRightSVG className={show == isLeft ? '' : styles.arrowLeft} key="placeholderKey3" /> */}
+ </div>
+ <div className={styles.childrenContainer} key="placeholderKey4">
+ <div className={styles.children} key="placeholderKey5">
+ {children}
+ </div>
+ </div>
+ </div>
+ );
+}
--
GitLab