From 5e9ccbd59f2a8e84e1400f3d1ccef2778271abba Mon Sep 17 00:00:00 2001
From: thijsheijden <hi@thijsheijden.nl>
Date: Sat, 5 Feb 2022 13:40:38 +0100
Subject: [PATCH] feat: continued work on panels
---
apps/graphpolaris/src/app/app.tsx | 71 +++++++++----------
.../web/components/panels/Panel.stories.tsx | 27 +++++++
.../components/panels/Panel.tsx} | 7 +-
.../visualisations/NodeLink/NodeLink.tsx | 19 +++++
.../NodeLink/Nodelink.stories.tsx} | 12 ++--
.../PoahVis/PoahVis.stories.tsx | 29 ++++++++
.../visualisations/PoahVis/PoahVis.tsx | 19 +++++
.../SemanticSubstrates.stories.tsx | 29 ++++++++
.../SemanticSubstrates/SemanticSubstrates.tsx | 19 +++++
9 files changed, 185 insertions(+), 47 deletions(-)
create mode 100644 apps/graphpolaris/src/web/components/panels/Panel.stories.tsx
rename apps/graphpolaris/src/{components/TestComponent.tsx => web/components/panels/Panel.tsx} (80%)
create mode 100644 apps/graphpolaris/src/web/components/visualisations/NodeLink/NodeLink.tsx
rename apps/graphpolaris/src/{components/TestComponent.stories.tsx => web/components/visualisations/NodeLink/Nodelink.stories.tsx} (70%)
create mode 100644 apps/graphpolaris/src/web/components/visualisations/PoahVis/PoahVis.stories.tsx
create mode 100644 apps/graphpolaris/src/web/components/visualisations/PoahVis/PoahVis.tsx
create mode 100644 apps/graphpolaris/src/web/components/visualisations/SemanticSubstrates/SemanticSubstrates.stories.tsx
create mode 100644 apps/graphpolaris/src/web/components/visualisations/SemanticSubstrates/SemanticSubstrates.tsx
diff --git a/apps/graphpolaris/src/app/app.tsx b/apps/graphpolaris/src/app/app.tsx
index c32ff966e..ec8a4820d 100644
--- a/apps/graphpolaris/src/app/app.tsx
+++ b/apps/graphpolaris/src/app/app.tsx
@@ -7,7 +7,8 @@ import {
import React, { useEffect } from 'react';
import ReactJSONView from 'react-json-view';
import GridLayout from 'react-grid-layout';
-import TestComponent from '../components/TestComponent';
+import TestComponent from '../web/components/TestComponent';
+import Panel from '../web/components/panels/Panel';
const RawJSONVis = React.memo(() => {
const graphQueryResult = useGraphQueryResult();
@@ -44,37 +45,6 @@ const RawJSONVis = React.memo(() => {
export function App() {
const dispatch = useAppDispatch();
-
- // return (
- // <>
- // <div>
- // <button
- // onClick={() =>
- // dispatch(
- // assignNewGraphQueryResult({
- // nodes: [
- // { id: 'agent/007', attributes: { name: 'Daniel Craig' } },
- // ],
- // links: [],
- // })
- // )
- // }
- // >
- // Load in mock result
- // </button>
- // <button
- // onClick={() =>
- // dispatch(assignNewGraphQueryResult({ nodes: [], links: [] }))
- // }
- // >
- // Remove mock result
- // </button>
- // </div>
- // <RawJSONVis />
- // <div />
- // </>
- // );
-
return (
<GridLayout
className="layout"
@@ -86,28 +56,51 @@ export function App() {
key="schema-panel"
data-grid={{ x: 0, y: 0, w: 3, h: 30, maxW: 5, isDraggable: false }}
>
- <TestComponent content="Schema Panel" color="red"></TestComponent>
+ <Panel content="Schema Panel" color="red"></Panel>
</div>
<div
key="query-panel"
data-grid={{ x: 3, y: 20, w: 5, h: 10, maxH: 20, isDraggable: false }}
>
- <TestComponent content="Query Panel" color="blue"></TestComponent>
+ <Panel content="Query Panel" color="blue"></Panel>
</div>
<div
key="visualisation-panel"
data-grid={{ x: 3, y: 0, w: 7, h: 20, isDraggable: false }}
>
- <TestComponent
- content="Visualisation Panel"
- color="green"
- ></TestComponent>
+ <Panel content="Visualisation Panel" color="green">
+ <div>
+ <button
+ onClick={() =>
+ dispatch(
+ assignNewGraphQueryResult({
+ nodes: [
+ { id: 'agent/007', attributes: { name: 'Daniel Craig' } },
+ ],
+ links: [],
+ })
+ )
+ }
+ >
+ Load in mock result
+ </button>
+ <button
+ onClick={() =>
+ dispatch(assignNewGraphQueryResult({ nodes: [], links: [] }))
+ }
+ >
+ Remove mock result
+ </button>
+ </div>
+ <RawJSONVis />
+ <div />
+ </Panel>
</div>
<div
key="history-panel"
data-grid={{ x: 8, y: 20, w: 2, h: 10, isDraggable: false }}
>
- <TestComponent content="History Panel" color="purple"></TestComponent>
+ <Panel content="History Channel" color="purple"></Panel>
</div>
</GridLayout>
);
diff --git a/apps/graphpolaris/src/web/components/panels/Panel.stories.tsx b/apps/graphpolaris/src/web/components/panels/Panel.stories.tsx
new file mode 100644
index 000000000..9b6d60a2a
--- /dev/null
+++ b/apps/graphpolaris/src/web/components/panels/Panel.stories.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import Panel from './Panel';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'NodeLink',
+ component: Panel,
+ decorators: [(story) => <div style={{ padding: '3rem' }}>{story()}</div>],
+} as ComponentMeta<typeof Panel>;
+
+const Template: ComponentStory<typeof Panel> = (args) => <Panel {...args} />;
+
+export const Primary = Template.bind({});
+
+Primary.args = {
+ content: 'Testing header #1',
+};
+
+export const Secondary = Template.bind({});
+
+Secondary.args = {
+ content: 'Testing header number twoooo',
+};
diff --git a/apps/graphpolaris/src/components/TestComponent.tsx b/apps/graphpolaris/src/web/components/panels/Panel.tsx
similarity index 80%
rename from apps/graphpolaris/src/components/TestComponent.tsx
rename to apps/graphpolaris/src/web/components/panels/Panel.tsx
index 8d93b0b37..ad7454f74 100644
--- a/apps/graphpolaris/src/components/TestComponent.tsx
+++ b/apps/graphpolaris/src/web/components/panels/Panel.tsx
@@ -1,7 +1,9 @@
import styled from 'styled-components';
+import { ReactNode } from 'react';
interface Props {
content: string;
color: string;
+ children?: ReactNode;
}
const Wrapper = styled.div<{ color: string }>`
@@ -23,14 +25,15 @@ const Content = styled.div`
border-radius: 8px;
`;
-const TestComponent = (props: Props) => {
+const Panel = (props: Props) => {
return (
<Wrapper color={props.color}>
<Content>
<h1>{props.content}</h1>
+ {props.children}
</Content>
</Wrapper>
);
};
-export default TestComponent;
+export default Panel;
diff --git a/apps/graphpolaris/src/web/components/visualisations/NodeLink/NodeLink.tsx b/apps/graphpolaris/src/web/components/visualisations/NodeLink/NodeLink.tsx
new file mode 100644
index 000000000..8f82e966a
--- /dev/null
+++ b/apps/graphpolaris/src/web/components/visualisations/NodeLink/NodeLink.tsx
@@ -0,0 +1,19 @@
+import styled from 'styled-components';
+interface Props {
+ content: string;
+}
+
+const Div = styled.div`
+ background-color: red;
+ font: 'Arial';
+`;
+
+const NodeLink = (props: Props) => {
+ return (
+ <Div>
+ <h1>{props.content}</h1>
+ </Div>
+ );
+};
+
+export default NodeLink;
diff --git a/apps/graphpolaris/src/components/TestComponent.stories.tsx b/apps/graphpolaris/src/web/components/visualisations/NodeLink/Nodelink.stories.tsx
similarity index 70%
rename from apps/graphpolaris/src/components/TestComponent.stories.tsx
rename to apps/graphpolaris/src/web/components/visualisations/NodeLink/Nodelink.stories.tsx
index 8f57f85ca..c4fb623d8 100644
--- a/apps/graphpolaris/src/components/TestComponent.stories.tsx
+++ b/apps/graphpolaris/src/web/components/visualisations/NodeLink/Nodelink.stories.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import TestComponent from './TestComponent';
+import NodeLink from './NodeLink';
import { ComponentStory, ComponentMeta } from '@storybook/react';
export default {
@@ -7,13 +7,13 @@ export default {
* See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
- title: 'TestComponent',
- component: TestComponent,
+ title: 'NodeLink',
+ component: NodeLink,
decorators: [(story) => <div style={{ padding: '3rem' }}>{story()}</div>],
-} as ComponentMeta<typeof TestComponent>;
+} as ComponentMeta<typeof NodeLink>;
-const Template: ComponentStory<typeof TestComponent> = (args) => (
- <TestComponent {...args} />
+const Template: ComponentStory<typeof NodeLink> = (args) => (
+ <NodeLink {...args} />
);
export const Primary = Template.bind({});
diff --git a/apps/graphpolaris/src/web/components/visualisations/PoahVis/PoahVis.stories.tsx b/apps/graphpolaris/src/web/components/visualisations/PoahVis/PoahVis.stories.tsx
new file mode 100644
index 000000000..6835ce79f
--- /dev/null
+++ b/apps/graphpolaris/src/web/components/visualisations/PoahVis/PoahVis.stories.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import PoahVis from './PoahVis';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'NodeLink',
+ component: PoahVis,
+ decorators: [(story) => <div style={{ padding: '3rem' }}>{story()}</div>],
+} as ComponentMeta<typeof PoahVis>;
+
+const Template: ComponentStory<typeof PoahVis> = (args) => (
+ <PoahVis {...args} />
+);
+
+export const Primary = Template.bind({});
+
+Primary.args = {
+ content: 'Testing header #1',
+};
+
+export const Secondary = Template.bind({});
+
+Secondary.args = {
+ content: 'Testing header number twoooo',
+};
diff --git a/apps/graphpolaris/src/web/components/visualisations/PoahVis/PoahVis.tsx b/apps/graphpolaris/src/web/components/visualisations/PoahVis/PoahVis.tsx
new file mode 100644
index 000000000..d4797f6f2
--- /dev/null
+++ b/apps/graphpolaris/src/web/components/visualisations/PoahVis/PoahVis.tsx
@@ -0,0 +1,19 @@
+import styled from 'styled-components';
+interface Props {
+ content: string;
+}
+
+const Div = styled.div`
+ background-color: red;
+ font: 'Arial';
+`;
+
+const PoahVis = (props: Props) => {
+ return (
+ <Div>
+ <h1>{props.content}</h1>
+ </Div>
+ );
+};
+
+export default PoahVis;
diff --git a/apps/graphpolaris/src/web/components/visualisations/SemanticSubstrates/SemanticSubstrates.stories.tsx b/apps/graphpolaris/src/web/components/visualisations/SemanticSubstrates/SemanticSubstrates.stories.tsx
new file mode 100644
index 000000000..e4b342f2e
--- /dev/null
+++ b/apps/graphpolaris/src/web/components/visualisations/SemanticSubstrates/SemanticSubstrates.stories.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import SemanticSubstrates from './SemanticSubstrates';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'NodeLink',
+ component: SemanticSubstrates,
+ decorators: [(story) => <div style={{ padding: '3rem' }}>{story()}</div>],
+} as ComponentMeta<typeof SemanticSubstrates>;
+
+const Template: ComponentStory<typeof SemanticSubstrates> = (args) => (
+ <SemanticSubstrates {...args} />
+);
+
+export const Primary = Template.bind({});
+
+Primary.args = {
+ content: 'Testing header #1',
+};
+
+export const Secondary = Template.bind({});
+
+Secondary.args = {
+ content: 'Testing header number twoooo',
+};
diff --git a/apps/graphpolaris/src/web/components/visualisations/SemanticSubstrates/SemanticSubstrates.tsx b/apps/graphpolaris/src/web/components/visualisations/SemanticSubstrates/SemanticSubstrates.tsx
new file mode 100644
index 000000000..5874dd7eb
--- /dev/null
+++ b/apps/graphpolaris/src/web/components/visualisations/SemanticSubstrates/SemanticSubstrates.tsx
@@ -0,0 +1,19 @@
+import styled from 'styled-components';
+interface Props {
+ content: string;
+}
+
+const Div = styled.div`
+ background-color: red;
+ font: 'Arial';
+`;
+
+const SemanticSubstrates = (props: Props) => {
+ return (
+ <Div>
+ <h1>{props.content}</h1>
+ </Div>
+ );
+};
+
+export default SemanticSubstrates;
--
GitLab