182 |
184 | ) : null}
185 | ----
186 |
187 |
--------------------------------------------------------------------------------
/docs/modules/ROOT/pages/Components/PageNotFound.adoc:
--------------------------------------------------------------------------------
1 | = PageNotFoundPage Component
2 |
3 | [cols="1a,1a"]
4 | |===
5 | | Light | Dark
6 |
7 | | image::Components/DesktopPageNotFoundLight.png[DesktopPageNotFoundLight,width=600,height=600]
8 | | image::Components/DesktopPageNotFoundDark.png[DesktopPageNotFoundDark,width=600,height=600]
9 | |===
10 |
11 | The `PageNotFoundPage` component is a React component designed to display a user-friendly message when a page is not found (404 error). It provides a visual indication that the requested page is unavailable and offers a button to navigate back to the previous page.
12 |
13 | https://needle-starterkit.graphapp.io/notfound[Link to the live preview,window=_blank]
14 |
15 | https://github.com/neo4j-labs/neo4j-needle-starterkit/blob/2.0/src/templates/shared/components/PageNotFound.tsx[Link to the component code,window=_blank]
16 |
17 | == Pre-requisite
18 |
19 | - Ensure you have the `@neo4j-ndl` library installed in your project to use this `PageNotFound` component.
20 |
21 | == Usage
22 |
23 | To integrate the `PageNotFoundPage` component into your application, ensure it is part of your routing configuration:
24 |
25 | 1. Import the component:
26 |
27 | [source,jsx]
28 | ----
29 | import PageNotFoundPage from './path/to/PageNotFoundPage';
30 | ----
31 |
32 | 2. Add a route for the component in your router setup. This is typically done using a catch-all route:
33 |
34 | [source,jsx]
35 | ----
36 | import { Routes, Route } from 'react-router-dom';
37 |
38 |
49 | 
50 |
63 | ----
64 |
65 | .This snippet demonstrates rendering of the similar products:
66 |
67 | [source,tsx]
68 | ----
69 |
51 | {products[0].desc1}
52 |
62 |
53 |
57 |
58 | DealOfTheWeek
59 | // Additional tags...
60 |
61 |
70 | Similar products
71 |
86 | ----
87 |
88 | .This snippet demonstrates rendering of the frequently bought together product:
89 |
90 | [source,tsx]
91 | ----
92 |
72 | {[productImg2, productImg3, productImg4].map((img, index) => (
73 |
74 |
83 | ))}
84 |
85 |
75 | 
76 |
82 |
77 | Price: £{products[index + 1].price}
79 |
80 |
81 | {products[index + 1].desc1}
78 |
93 | Frequently bought together
94 |
116 | ----
117 |
118 | === Dataset/Product Catalog
119 |
120 | The application initially uses a static JSON dataset named `products.json` for the product catalog. This dataset contains an array of product objects, each with detailed information such as name, price, description, and specifications.
121 |
122 | The template supports easy integration with dynamic data sources. Although this is a static template, you can further extend it for real-time inventory updates, user reviews, personalized recommendations, and much more.
123 |
124 | .Data Representation:
125 |
126 | [source,json]
127 | ----
128 | {
129 | "listProducts": [
130 | {
131 | "id": 1,
132 | "name": "Product 1",
133 | "price": 999.99,
134 | "desc1": "Lorem ipsum dolor sit amet...",
135 | // Additional product details...
136 | },
137 | // Additional products...
138 | ]
139 | }
140 | ----
141 |
142 | This template provides a foundation for developing a comprehensive recommendation engine in the retail industry.
143 |
--------------------------------------------------------------------------------
/docs/modules/ROOT/pages/Templates/Foundation.adoc:
--------------------------------------------------------------------------------
1 | = Foundation Template
2 |
3 | [cols="1a,1a"]
4 | |===
5 | | Desktop | Mobile
6 |
7 | | image::Templates/FeaturedFoundation.png[FeaturedFoundation,width=600,height=600]
8 | | image::Templates/FeaturedFoundationMobile.png[FeaturedFoundationMobile,width=150,height=150]
9 | |===
10 |
11 | == Introduction
12 |
13 | The Foundation template provides a generic, simple yet powerful template for developing applications on top of your Neo4j databases. It features a clean and intuitive layout, including a side navigation bar, a central content area, and a connection modal for connecting or disconnecting from Neo4j instances.
14 |
15 | https://needle-starterkit.graphapp.io/foundation-preview[Link to the live preview,window=_blank]
16 |
17 | https://github.com/neo4j-labs/neo4j-needle-starterkit/blob/2.0/src/templates/foundation[Link to the template code,window=_blank]
18 |
19 | == Pre-requisite
20 |
21 | - Ensure you have the `@neo4j-ndl` library installed in your project to use this `Foundation` template.
22 |
23 | This template is using the following components and utilities from the shared folders, make sure to import them:
24 |
25 | - The Header component from the shared component folder.
26 | - The ConnectionModal component from the shared component folder.
27 | - The Driver utility from the shared utils folder.
28 |
29 | == Documentation
30 |
31 | === Layout Architecture
32 |
33 | image::Templates/FoundationArchitecture.png[FoundationArchitecture,align="center"]
34 |
35 | The template structure is centered around the `Home.tsx` component, which incorporates the `Header` and `PageLayout` components. `PageLayout` further divides the page into `SideNav` and `Content` sections, offering a comprehensive environment for application development.
36 |
37 | The layout is designed to be responsive, ensuring a seamless user experience across various devices and screen sizes.
38 |
39 | === Code Snippets
40 |
41 | .Here is a snippet for the auto-connect feature in `Content.tsx`
42 |
43 | [source,tsx]
44 | ----
45 | useEffect(() => {
46 | if (!init) {
47 | let session = localStorage.getItem('needleStarterKit-neo4j.connection');
48 | if (session) {
49 | let neo4jConnection = JSON.parse(session);
50 | setDriver(neo4jConnection.uri, neo4jConnection.user, neo4jConnection.password)
51 | .then((isSuccessful: boolean) => {
52 | setConnectionStatus(isSuccessful);
53 | });
54 | }
55 | setInit(true);
56 | }
57 | });
58 | ----
59 |
60 | .This snippet showcases the side navigation bar setup in `SideNav.tsx`
61 |
62 | [source,tsx]
63 | ----
64 |
95 | {[productImg5, productImg6].map((img, index) => (
96 |
97 |
105 | Package deal
106 |
107 |
108 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat, quasi? Pariatur ipsam voluptatum,
109 | quas labore amet dolor dolore, aspernatur tempora quasi ullam ad, autem distinctio doloribus! Iusto
110 | rem iste accusamus.
111 |
112 |
113 | ))}
114 |
115 |
98 |
99 |
100 |
102 |
103 |
104 |
58 |
59 |
75 | )}
76 | ...
77 |
78 | ----
79 |
80 | <1> Import our new function `getMatrixActors` in the existing import statement.
81 | <2> Create a new state variable to store the list of actors we will retrieve from the database.
82 | <3> Create a button click handler that will call our `getMatrixActors` function and update the state variable with the result when we click.
83 | <4> Display the data in a simple list.
84 |
85 | ## Templates
86 | This page will contain a set of example applications built using the Needle starter kit.
87 | Looking for inspiration on what to build? Check out https://neo4j.com/developer-blog/needle-neo4j-design-system/[this post,window=_blank] on the Neo4j Developer Blog.
88 |
89 |
--------------------------------------------------------------------------------
/docs/modules/ROOT/pages/index.adoc:
--------------------------------------------------------------------------------
1 | # Neo4j Needle StarterKit
2 |
3 | Reactjs Responsive Starter Kit for building applications using https://www.neo4j.design/[Neo4j Needle,window=_blank] for accelerating TTV of your Neo4j-powered front-end applications.
4 | You can access the https://needle-starterkit.graphapp.io[online version here,window=_blank].
5 |
6 | image::FeaturedImg.jpg[Featured Image]
7 |
8 |
9 | ## Features
10 | - 📈 Various templates and components focused on specific uses-cases and industries
11 | - 🚀 Responsive: Adapts to different screen sizes for optimal user experience.
12 | - 🌚 Dark/Light Mode Theme 🌞: Includes a theme wrapper to switch between light and dark modes without having to reinvent the wheel!
13 | - ⚙️ Neo4j Integration: A simple example for connecting to a Neo4j database.
14 | - 🔐 Neo4j Auto-connect: Automatically connects to the Neo4j database if the user has a session saved (using localStorage).
15 | - 🛠️️ Modular approach: Facilitates easy customization.
16 |
17 |
18 | ## Documentation
19 |
20 | - To get started, see the link:quickstart[Quickstart] page.
21 | - For details on the available templates, see the Templates section.
22 | - For details on the available components, see the Components section.
23 | - Examples and documentation are available for every templates and components.
24 | - If you want to contribute to this project, see link:contributing[Contributing].
25 |
26 |
--------------------------------------------------------------------------------
/docs/modules/ROOT/pages/quickstart.adoc:
--------------------------------------------------------------------------------
1 | # Quickstart
2 |
3 | If you want to try it without installing it locally, you can access https://needle-starterkit.graphapp.io[our self-hosted,window=_blank] version.
4 |
5 | Alternatively, if you want to run it locally or within your self-managed environment, please follow the steps below.
6 |
7 | ## Prerequisites
8 | Running the StarterKit requires you to have **node.js** and **yarn** installed.
9 |
10 | If you do not have these installed:
11 |
12 | 1. https://nodejs.org/en/download[Install node.js,window=_blank] for your operating system. The node installation will include `npm`.
13 | 2. Use `npm` to install `yarn` as described https://classic.yarnpkg.com/lang/en/docs/install/[here,window=_blank].
14 |
15 |
16 | ## Install & Run
17 | Download the latest version of the starter kit from the https://github.com/neo4j-labs/neo4j-needle-starterkit[Github Repository,window=_blank]:
18 |
19 |
20 | ```shell
21 | git clone git@github.com:neo4j-labs/neo4j-needle-starterkit.git
22 | ```
23 |
24 | Navigate to the folder you just cloned and run the following commands to install and run the development server:
25 |
26 | ```shell
27 | cd neo4j-needle-starterkit
28 | yarn install
29 | yarn run dev
30 | ```
31 |
32 | If all is successful, you will be shown the following message:
33 |
34 | ```shell
35 | VITE v4.5.1 ready in 125 ms
36 |
37 | ➜ Local: http://localhost:3000/
38 | ➜ Network: use --host to expose
39 | ➜ press h to show help
40 | ```
41 |
42 | ## Next steps
43 | After you have the StarterKit app up-and-running, you can explore the different templates and components (see the relevant section for further details and documentation) or implement your own custom components, templates and logic.
44 |
--------------------------------------------------------------------------------
/docs/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "needle-starter-kit-docs",
3 | "version": "2.0.0",
4 | "description": "",
5 | "main": "server.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1",
8 | "start": "npm run dev",
9 | "dev": "node server.js & npm-watch preview",
10 | "preview": "antora preview.yml",
11 | "publish": "git push origin HEAD:publish"
12 | },
13 | "watch": {
14 | "preview": {
15 | "patterns": [
16 | "modules"
17 | ],
18 | "extensions": "adoc"
19 | }
20 | },
21 | "dependencies": {
22 | "@antora/cli": "^3.1.1",
23 | "@antora/site-generator-default": "^3.1.1",
24 | "@neo4j-documentation/macros": "^1.0.0",
25 | "@neo4j-documentation/remote-include": "^1.0.0",
26 | "express": "^4.17.1",
27 | "npm-watch": "^0.11.0"
28 | }
29 | }
--------------------------------------------------------------------------------
/docs/preview.yml:
--------------------------------------------------------------------------------
1 | site:
2 | title: Needle Starter Kit
3 |
4 | content:
5 | sources:
6 | - url: ../
7 | start_path: docs
8 | branches: HEAD
9 | exclude:
10 | - '!**/_includes/*'
11 | - '!**/readme.adoc'
12 | - '!**/README.adoc'
13 | ui:
14 | bundle:
15 | url: https://static-content.neo4j.com/build/ui-bundle-latest.zip
16 | snapshot: true
17 | urls:
18 | html_extension_style: indexify
19 | asciidoc:
20 | extensions:
21 | - "@neo4j-documentation/remote-include"
22 | - "@neo4j-documentation/macros"
23 | attributes:
24 | page-theme: labs
--------------------------------------------------------------------------------
/docs/server.js:
--------------------------------------------------------------------------------
1 | const express = require('express')
2 |
3 | const app = express()
4 | const version = "2.0"
5 | app.use(express.static('./build/site'))
6 | app.get('/', (req, res) => res.redirect('neo4j-needle-starterkit/' + version))
7 | app.listen(8000, () => console.log('📘 http://localhost:8000'))
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
60 | The Matrix actors:
61 |
73 |
74 |
62 | {listActors.length > 0 ? (
63 | No actors found
70 | )}
71 |
72 | -
64 | {listActors.map((actor) => (
65 |
- {actor} 66 | ))} 67 |
8 |
9 | {activeTab === 'Template' ?
11 |
12 | );
13 | }
14 |
--------------------------------------------------------------------------------
/src/landingPage/Home.tsx:
--------------------------------------------------------------------------------
1 | import Header from '../templates/shared/components/Header';
2 | import { useState } from 'react';
3 | import Content from './Content';
4 |
5 | export default function QuickStarter() {
6 | const [activeTab, setActiveTab] = useState
10 |
22 | );
23 | }
24 |
--------------------------------------------------------------------------------
/src/landingPage/categories/Component.tsx:
--------------------------------------------------------------------------------
1 | import { Typography } from '@neo4j-ndl/react';
2 | import Card from '../components/Card';
3 |
4 | // Dark mode featured images
5 | import ChatbotImgDark from '../../assets/img/component/ChatbotImg-dark.png';
6 | import ConnectionModalImgDark from '../../assets/img/component/ConnectionModalImg-dark.png';
7 | import HeaderImgDark from '../../assets/img/component/HeaderImg-dark.png';
8 |
9 | // Light mode featured images
10 | import ChatbotImgLight from '../../assets/img/component/ChatbotImg-light.png';
11 | import ConnectionModalImgLight from '../../assets/img/component/ConnectionModalImg-light.png';
12 | import HeaderImgLight from '../../assets/img/component/HeaderImg-light.png';
13 |
14 | import { useContext } from 'react';
15 | import { ThemeWrapperContext } from '../../context/ThemeWrapper';
16 |
17 | export default function Component() {
18 | const { colorMode } = useContext(ThemeWrapperContext);
19 |
20 | const componentCards = [
21 | {
22 | title: 'Chatbot Widget',
23 | description:
24 | 'An interactive chat widget component which you can use for your support, sales or any other chatbot needs. It is designed to be easily embeddable and customizable to fit your needs',
25 | image: colorMode === 'dark' ? ChatbotImgDark : ChatbotImgLight,
26 | sourceCode: `https://github.com/neo4j-labs/neo4j-needle-starterkit/blob/${
27 | import.meta.env.PACKAGE_VERSION
28 | }/src/templates/shared/components/Chatbot.tsx`,
29 | previewLink: '/chat-widget-preview',
30 | },
31 | {
32 | title: 'Connection Modal',
33 | description:
34 | 'A responsive and user-friendly connection modal template, ideal for facilitating connection to your Neo4j databases in your applications.',
35 | image: colorMode === 'dark' ? ConnectionModalImgDark : ConnectionModalImgLight,
36 | sourceCode: `https://github.com/neo4j-labs/neo4j-needle-starterkit/blob/${
37 | import.meta.env.PACKAGE_VERSION
38 | }/src/templates/shared/components/ConnectionModal.tsx`,
39 | previewLink: '/connection-modal-preview',
40 | },
41 | {
42 | title: 'Header',
43 | description:
44 | 'A modern and clean header component, perfect for any web application. It is designed to be easily embeddable and customizable to fit your needs.',
45 | image: colorMode === 'dark' ? HeaderImgDark : HeaderImgLight,
46 | sourceCode: `https://github.com/neo4j-labs/neo4j-needle-starterkit/blob/${
47 | import.meta.env.PACKAGE_VERSION
48 | }/src/templates/shared/components/Header.tsx`,
49 | previewLink: '/header-preview',
50 | },
51 | ];
52 |
53 | return (
54 |
19 |
21 |
55 |
56 | Components
57 |
58 |
59 | Our components (patterns) are perfect for those seeking to integrate individual widgets or elements into their
60 | existing projects. These templates range from chatbot to a connections modal and many more coming on the way,
61 | offering a versatile selection of standalone components. Each component is built to be easily adaptable and
62 | embeddable, ensuring seamless integration with your larger project.
63 |
64 |
78 | );
79 | }
80 |
--------------------------------------------------------------------------------
/src/landingPage/categories/Templates.tsx:
--------------------------------------------------------------------------------
1 | import { Typography } from '@neo4j-ndl/react';
2 | import Card from '../components/Card';
3 |
4 | // Dark mode featured images
5 | import StarterKitImgDark from '../../assets/img/template/StarterKitImg-dark.png';
6 | import EcommerceImgDark from '../../assets/img/template/EcommerceImg-dark.png';
7 | import MovieImgDark from '../../assets/img/template/MovieImg-dark.png';
8 | import CyberSecurityImgDark from '../../assets/img/template/CyberSecurityImg-dark.png';
9 |
10 | // Light mode featured images
11 | import StarterKitImgLight from '../../assets/img/template/StarterKitImg-light.png';
12 | import EcommerceImgLight from '../../assets/img/template/EcommerceImg-light.png';
13 | import MovieImgLight from '../../assets/img/template/MovieImg-light.png';
14 | import CyberSecurityImgLight from '../../assets/img/template/CyberSecurityImg-light.png';
15 |
16 | import { useContext } from 'react';
17 | import { ThemeWrapperContext } from '../../context/ThemeWrapper';
18 |
19 | export default function Templates() {
20 | const { colorMode } = useContext(ThemeWrapperContext);
21 |
22 | const templatesCards = [
23 | {
24 | title: 'Foundation Template',
25 | description:
26 | 'The Foundation template, because we all starts somewhere, this was the first template we created, combining simple, modern and UX all together for a generic application design.',
27 | image: colorMode === 'dark' ? StarterKitImgDark : StarterKitImgLight,
28 | sourceCode: `https://github.com/neo4j-labs/neo4j-needle-starterkit/blob/${
29 | import.meta.env.PACKAGE_VERSION
30 | }/src/templates/foundation`,
31 | previewLink: '/foundation-preview',
32 | },
33 | {
34 | title: 'Cyber security',
35 | description:
36 | 'Explore your network infrastructure and retrieve impact analysis in one click! This templates facilitate the visualization and analysis of complex infrastructures.',
37 | image: colorMode === 'dark' ? CyberSecurityImgDark : CyberSecurityImgLight,
38 | sourceCode: `https://github.com/neo4j-labs/neo4j-needle-starterkit/blob/${
39 | import.meta.env.PACKAGE_VERSION
40 | }/src/templates/cybersecurity`,
41 | previewLink: '/cybersecurity-preview',
42 | },
43 | {
44 | title: 'Movie Recommendation',
45 | description: 'Simple and modern movie recommendation template based on the famous Neo4j movie dataset.',
46 | image: colorMode === 'dark' ? MovieImgDark : MovieImgLight,
47 | sourceCode: `https://github.com/neo4j-labs/neo4j-needle-starterkit/blob/${
48 | import.meta.env.PACKAGE_VERSION
49 | }/src/templates/movie`,
50 | previewLink: '/movie-preview',
51 | },
52 | {
53 | title: 'Ecommerce',
54 | description:
55 | 'E-commerce product page with a modern and clean design. Perfect for having one featured product followed by suggestions on recommended products and packages/frequently bought together.',
56 | image: colorMode === 'dark' ? EcommerceImgDark : EcommerceImgLight,
57 | sourceCode: `https://github.com/neo4j-labs/neo4j-needle-starterkit/blob/${
58 | import.meta.env.PACKAGE_VERSION
59 | }/src/templates/ecommerce`,
60 | previewLink: '/ecommerce-preview',
61 | },
62 | ];
63 |
64 | return (
65 |
65 | {componentCards.map((card, index) => (
66 |
77 |
67 |
75 | ))}
76 |
66 |
67 | Templates
68 |
69 |
70 | Dive into our collection of ready-to-use templates tailored for various use cases and industries. These
71 | templates are designed to serve a wide range of product purposes. Our templates provide a seamless blend of
72 | aesthetics and utility, ensuring your product not only meets its functional objectives but also delivers a
73 | memorable user experience.
74 |
75 |
89 | );
90 | }
91 |
--------------------------------------------------------------------------------
/src/landingPage/components/Card.css:
--------------------------------------------------------------------------------
1 | .image-link:hover .image {
2 | filter: blur(8px);
3 | }
4 | .image-link:hover .overlay-text {
5 | opacity: 1;
6 | z-index: 2;
7 | }
8 | .image {
9 | transition: filter 0.3s;
10 | }
11 | .overlay-text {
12 | position: absolute;
13 | top: 0;
14 | left: 0;
15 | right: 0;
16 | bottom: 0;
17 | width: 100%;
18 | height: 100%;
19 | display: flex;
20 | align-items: center;
21 | justify-content: center;
22 | color: white;
23 | background-color: rgba(0,0,0,0.5);
24 | opacity: 0;
25 | transition: opacity 0.3s;
26 | font-size: 20px;
27 | z-index: 1;
28 | }
--------------------------------------------------------------------------------
/src/landingPage/components/Card.tsx:
--------------------------------------------------------------------------------
1 | import { Button, Typography, Widget } from '@neo4j-ndl/react';
2 | import { CodeBracketIconOutline, EyeIconOutline } from '@neo4j-ndl/react/icons';
3 | import { Link } from 'react-router-dom';
4 | import './Card.css';
5 |
6 | export default function Card({
7 | title,
8 | description,
9 | image,
10 | sourceCode,
11 | previewLink,
12 | }: {
13 | title: string;
14 | description: string;
15 | image: string;
16 | sourceCode: string;
17 | previewLink: string;
18 | }) {
19 | return (
20 |
76 | {templatesCards.map((card, index) => (
77 |
88 |
78 |
86 | ))}
87 |
21 |
22 |
53 |
54 | );
55 | }
56 |
--------------------------------------------------------------------------------
/src/main.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom/client';
3 | import App from './App.tsx';
4 | import './index.css';
5 | import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
6 |
7 | ReactDOM.createRoot(document.getElementById('root')!).render(
8 |
23 |
36 |
37 |
38 |
52 | 38 |
39 | {title}
40 |
44 |
41 | {description}
42 |
43 |
45 |
46 |
49 |
50 |
51 |
54 | CVE Detected
55 |
56 |
57 |
59 |
60 | {info.renderValue()}
61 |
62 |
63 |
64 | ) : (
65 | <>{info.renderValue()}
66 | )}
67 |
68 | ),
69 | footer: (info) => info.column.id,
70 | }),
71 | ];
72 |
73 | export default function Home() {
74 | const [searchQuery, setSearchQuery] = useState('');
75 | const [isSearchInitiated, setIsSearchInitiated] = useState(false);
76 | const network = productsData.ListItems;
77 | const defaultData: NetworkImpact[] = network as NetworkImpact[];
78 | const [data] = React.useState(() => [...defaultData]);
79 |
80 | const [activeTab, setActiveTab] = useState
109 |
129 |
135 |
136 |
191 |
192 |
193 |
194 | );
195 | }
196 |
--------------------------------------------------------------------------------
/src/templates/cybersecurity/assets/networkimpact.json:
--------------------------------------------------------------------------------
1 | {
2 | "ListItems": [
3 | {
4 | "Type": "Linux",
5 | "Name": "nginx-edge",
6 | "Version": "Debian 11.2",
7 | "Status": "Up"
8 | },
9 | {
10 | "Type": "Linux",
11 | "Name": "db-mysql01",
12 | "Version": "Ubuntu 20.04.3 LTS",
13 | "Status": "Down"
14 | },
15 | {
16 | "Type": "Windows",
17 | "Name": "windev2022",
18 | "Version": "Windows Server 2022 - b21H2",
19 | "Status": "Needs updates"
20 | },
21 | {
22 | "Type": "Linux",
23 | "Name": "cache-redis",
24 | "Version": "Alpine Linux 3.14",
25 | "Status": "CVE-2022-1921"
26 | },
27 | {
28 | "Type": "Linux",
29 | "Name": "build-jenkins",
30 | "Version": "CentOS 8",
31 | "Status": "Up"
32 | },
33 | {
34 | "Type": "Windows",
35 | "Name": "ad-primary",
36 | "Version": "Windows Server 2016 - b1607",
37 | "Status": "Up"
38 | },
39 | {
40 | "Type": "Linux",
41 | "Name": "monitoring-grafana",
42 | "Version": "Fedora 34",
43 | "Status": "Down"
44 | },
45 | {
46 | "Type": "Linux",
47 | "Name": "backup-veeam",
48 | "Version": "RHEL 8.4",
49 | "Status": "Up"
50 | },
51 | {
52 | "Type": "Windows",
53 | "Name": "fileserver01",
54 | "Version": "Windows Server 2019 - b1809",
55 | "Status": "Up"
56 | },
57 | {
58 | "Type": "Linux",
59 | "Name": "prod-k8s-master",
60 | "Version": "Ubuntu 22.04 LTS",
61 | "Status": "Needs updates"
62 | },
63 | {
64 | "Type": "Linux",
65 | "Name": "dev-docker01",
66 | "Version": "CentOS 7.9",
67 | "Status": "Needs updates"
68 | },
69 | {
70 | "Type": "Windows",
71 | "Name": "sqlserver-prod",
72 | "Version": "Windows Server 2019 - b1809",
73 | "Status": "Up"
74 | }
75 | ]
76 | }
77 |
--------------------------------------------------------------------------------
/src/templates/ecommerce/Content.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Button, DataGrid, Typography, Widget, Tag } from '@neo4j-ndl/react';
3 | import { PlusCircleIconOutline } from '@neo4j-ndl/react/icons';
4 | import { createColumnHelper, getCoreRowModel, getSortedRowModel, useReactTable } from '@tanstack/react-table';
5 |
6 | import productsData from './assets/products.json';
7 | import productImg1 from './assets/product1.png';
8 | import productImg2 from './assets/product2.png';
9 | import productImg3 from './assets/product3.png';
10 | import productImg4 from './assets/product4.png';
11 | import productImg5 from './assets/product5.png';
12 | import productImg6 from './assets/product6.png';
13 |
14 | type Product = {
15 | CPU: number;
16 | Memory: string;
17 | Details: string;
18 | };
19 |
20 | const columnHelper = createColumnHelper
137 | setActiveTab(e)} value={activeTab}>
138 | Table
139 | Graph
140 |
141 |
142 | {activeTab === 0 ? (
143 |
144 | isResizable={false}
145 | tableInstance={table}
146 | isKeyboardNavigable={false}
147 | styling={{
148 | zebraStriping: true,
149 | borderStyle: 'none',
150 | headerStyle: 'filled',
151 | }}
152 | components={{
153 | Navigation: null,
154 | }}
155 | />
156 | ) : (
157 |
158 | 
159 |
160 | Graph Screen
161 |
183 |
184 | )}
185 |
186 |
187 |
162 |
163 | This is where you would display a graph of the network/search result.
164 |
165 |
166 | For now, we do not ship any visualization library to let you the freedom of using the one you
167 | prefer.
168 | although, that might change in the futur... 169 |
170 | <>
171 |
172 | If you want to use visualization libraries, here are few ones that you can use on top of Neo4j
173 | (in no specific order):
174 |
181 |
182 | 168 | although, that might change in the futur... 169 |
-
175 |
- Neovis.js 176 |
- D3.js 177 |
- react-force-graph 178 |
- Cytoscape.js 179 |
188 | <>Results for "{searchQuery}"
189 |
190 |
52 |
137 | );
138 | }
139 |
--------------------------------------------------------------------------------
/src/templates/ecommerce/Home.tsx:
--------------------------------------------------------------------------------
1 | import Header from '../shared/components/Header';
2 | import Content from './Content';
3 |
4 | export default function Home() {
5 | return (
6 |
53 | {/* Featured Product */}
54 | {products[0].name}
55 |
136 |
56 |
57 |
90 |
91 | {/* Similar Products */}
92 |
58 |
89 |
59 | {products[0].desc1}
60 |
61 | {products[0].desc2}
62 |
63 |
84 |
64 |
78 |
79 | DealOfTheWeek
80 | In Stock
81 | Next day delivery
82 |
83 |
85 | Price: £{products[0].price}
86 |
87 |
88 |
93 | Similar products
94 |
109 |
110 | {/* Frequently Bought Together */}
111 |
95 | {[productImg2, productImg3, productImg4].map((img, index) => (
96 |
97 |
106 | ))}
107 |
108 |
98 |
99 |
105 |
100 | Price: £{products[index + 1].price}
102 |
103 |
104 | {products[index + 1].desc1}
101 |
112 | Frequently bought together
113 |
135 |
114 | {[productImg5, productImg6].map((img, index) => (
115 |
116 |
124 | Package deal
125 |
126 |
127 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat, quasi? Pariatur ipsam voluptatum,
128 | quas labore amet dolor dolore, aspernatur tempora quasi ullam ad, autem distinctio doloribus! Iusto
129 | rem iste accusamus.
130 |
131 |
132 | ))}
133 |
134 |
117 |
118 |
119 |
121 |
122 |
123 |
7 |
10 | );
11 | }
12 |
--------------------------------------------------------------------------------
/src/templates/ecommerce/assets/product1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/neo4j-labs/neo4j-needle-starterkit/3090135dd0503460d6142d5f7a7296d4d3df25a1/src/templates/ecommerce/assets/product1.png
--------------------------------------------------------------------------------
/src/templates/ecommerce/assets/product2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/neo4j-labs/neo4j-needle-starterkit/3090135dd0503460d6142d5f7a7296d4d3df25a1/src/templates/ecommerce/assets/product2.png
--------------------------------------------------------------------------------
/src/templates/ecommerce/assets/product3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/neo4j-labs/neo4j-needle-starterkit/3090135dd0503460d6142d5f7a7296d4d3df25a1/src/templates/ecommerce/assets/product3.png
--------------------------------------------------------------------------------
/src/templates/ecommerce/assets/product4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/neo4j-labs/neo4j-needle-starterkit/3090135dd0503460d6142d5f7a7296d4d3df25a1/src/templates/ecommerce/assets/product4.png
--------------------------------------------------------------------------------
/src/templates/ecommerce/assets/product5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/neo4j-labs/neo4j-needle-starterkit/3090135dd0503460d6142d5f7a7296d4d3df25a1/src/templates/ecommerce/assets/product5.png
--------------------------------------------------------------------------------
/src/templates/ecommerce/assets/product6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/neo4j-labs/neo4j-needle-starterkit/3090135dd0503460d6142d5f7a7296d4d3df25a1/src/templates/ecommerce/assets/product6.png
--------------------------------------------------------------------------------
/src/templates/ecommerce/assets/products.json:
--------------------------------------------------------------------------------
1 | {
2 | "listProducts": [
3 | {
4 | "id": 1,
5 | "name": "Product 1",
6 | "price": 999.99,
7 | "image": "./assets/ecommerce/product1.png",
8 | "desc1": "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Facere corrupti odit modi adipisci facilis repellendus ab, officiis soluta beatae quaerat iusto fuga sed tenetur dicta maiores aut est eaque libero?",
9 | "desc2": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo id suscipit beatae incidunt, fugiat ipsum nisi consequatur officiis, debitis deserunt aspernatur praesentium quo doloremque soluta quibusdam quam sunt laborum corrupti.",
10 | "defaultData": [
11 | {
12 | "CPU": 1,
13 | "Memory": "2Gib",
14 | "Details": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo id suscipit beatae incidunt."
15 | },
16 | {
17 | "CPU": 2,
18 | "Memory": "4Gib",
19 | "Details": "Officiis eos illo vitae accusamus! Doloremque sapiente ducimus ullam. Assumenda ad sapiente deleniti!"
20 | },
21 | {
22 | "CPU": 4,
23 | "Memory": "16Gib",
24 | "Details": "Provident ipsum earum, officiis obcaecati labore quisquam cum officia delectus minus dolor. Necessitatibus nemo illo pariatur velit voluptatibus cupiditate quas?"
25 | }
26 | ]
27 | },
28 | {
29 | "id": 2,
30 | "name": "Product 2",
31 | "price": 99.99,
32 | "image": "./assets/img/ecommerce/product2.png",
33 | "desc1": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque sunt eaque eveniet reprehenderit vero velit debitis facere beatae obcaecati."
34 | },
35 | {
36 | "id": 3,
37 | "name": "Product 3",
38 | "price": 9.99,
39 | "image": "./assets/ecommerce/product3.png",
40 | "desc1": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque sunt eaque eveniet reprehenderit vero velit debitis facere beatae obcaecati."
41 | },
42 | {
43 | "id": 4,
44 | "name": "Product 4",
45 | "price": 59.99,
46 | "image": "./assets/ecommerce/product4.png",
47 | "desc1": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque sunt eaque eveniet reprehenderit vero velit debitis facere beatae obcaecati."
48 | },
49 | {
50 | "id": 1,
51 | "name": "Product 1",
52 | "price": 999.99,
53 | "image": "./assets/product1.png"
54 | },
55 | {
56 | "id": 1,
57 | "name": "Product 1",
58 | "price": 999.99,
59 | "image": "./assets/product1.png"
60 | }
61 | ]
62 | }
--------------------------------------------------------------------------------
/src/templates/foundation/Content.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from 'react';
2 | import { Button, Label, Typography } from '@neo4j-ndl/react';
3 |
4 | import { setDriver, disconnect } from '../shared/utils/Driver';
5 | import ConnectionModal from '../shared/components/ConnectionModal';
6 |
7 | export default function Content() {
8 | const [init, setInit] = useState
27 |
36 | Neo4j connection Status:
37 |
38 | {!connectionStatus ? : }
39 |
40 |
41 |
42 | {!connectionStatus ? (
43 |
44 | ) : (
45 |
46 | )}
47 |
48 | );
49 | }
50 |
--------------------------------------------------------------------------------
/src/templates/foundation/Home.tsx:
--------------------------------------------------------------------------------
1 | import Header from '../shared/components/Header';
2 | import PageLayout from './Layout/PageLayout';
3 |
4 | export default function Home() {
5 | return (
6 | Your content goes here.
33 | Happy coding!
34 |
35 |
7 |
10 | );
11 | }
12 |
--------------------------------------------------------------------------------
/src/templates/foundation/Layout/PageLayout.tsx:
--------------------------------------------------------------------------------
1 | import SideNav from './SideNav';
2 | import Content from '../Content';
3 |
4 | export default function PageLayout() {
5 | return (
6 |
7 |
10 | );
11 | }
12 |
--------------------------------------------------------------------------------
/src/templates/foundation/Layout/SideNav.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react';
2 | import { SideNavigation } from '@neo4j-ndl/react';
3 | import { MagnifyingGlassIconOutline, DbmsIcon, BellAlertIconOutline } from '@neo4j-ndl/react/icons';
4 |
5 | export default function SideNav() {
6 | const [expanded, setOnExpanded] = useState
19 |
20 |
21 | Example
39 |
48 |
49 |
50 | );
51 | }
52 |
--------------------------------------------------------------------------------
/src/templates/movie/Content.tsx:
--------------------------------------------------------------------------------
1 | import { Button, Typography, Tag, LoadingSpinner } from '@neo4j-ndl/react';
2 | import { ChevronLeftIconOutline, ChevronRightIconOutline } from '@neo4j-ndl/react/icons';
3 |
4 | import { MovieInterface } from './Interfaces';
5 | import Movie from './Movie';
6 |
7 | export default function Content({
8 | loadingStates,
9 | mainMovie,
10 | recoSimilarGenre,
11 | recoOtherUsers,
12 | }: {
13 | loadingStates: { loadingMain: boolean; loadingSimilarGenre: boolean; loadingOtherUsers: boolean };
14 | mainMovie: MovieInterface[];
15 | recoSimilarGenre: MovieInterface[];
16 | recoOtherUsers: MovieInterface[];
17 | }) {
18 | return (
19 |
20 |
103 | );
104 | }
105 |
--------------------------------------------------------------------------------
/src/templates/movie/Home.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from 'react';
2 | import { Button, Flex, Typography } from '@neo4j-ndl/react';
3 |
4 | import Header from '../shared/components/Header';
5 | import { setDriver, runRecoQuery } from '../shared/utils/Driver';
6 | import ConnectionModal from '../shared/components/ConnectionModal';
7 |
8 | import Content from './Content';
9 | import { MovieInterface } from './Interfaces';
10 | import moviesData from './assets/movies.json';
11 | import NoDataImg from '../shared/assets/NoData.png';
12 |
13 | const mainMovieId = '79132';
14 | const queryMainMovie = `MATCH (m:Movie {movieId: '${mainMovieId}'})-[:IN_GENRE]->(g:Genre) RETURN ID(m) as id, collect(g.name) as genres, m.year as year, m.imdbRating as imdbRating, m.languages as languages, m.title as title, m.plot as plot, m.poster as poster;`;
15 | const queryOtherUsersAlsoWatched = `MATCH (m:Movie {movieId: '${mainMovieId}'})<-[:RATED]-(u:User)-[:RATED]->(rec:Movie)-[:IN_GENRE]->(g:Genre) WITH g, rec, COUNT(*) AS usersWhoAlsoWatched ORDER BY usersWhoAlsoWatched DESC LIMIT 25 RETURN ID(rec) as id, collect(g.name) as genres, rec.year as year, rec.imdbRating as imdbRating, rec.languages as languages, rec.title as title, rec.plot as plot, rec.poster as poster LIMIT 6;`;
16 | const similarByGenre = `MATCH (m:Movie {movieId: '${mainMovieId}'})-[:IN_GENRE]->(g:Genre)<-[:IN_GENRE]-(rec:Movie) WITH rec, collect(g.name) AS genres, count(*) AS commonGenres RETURN ID(rec) as id, genres, rec.year as year, rec.imdbRating as imdbRating, rec.languages as languages, rec.title as title, rec.plot as plot, rec.poster as poster ORDER BY commonGenres DESC LIMIT 6;`;
17 |
18 | export default function Home() {
19 | const [useReco, setUseReco] = useState(false);
20 | const [recoError, setRecoError] = useState(false);
21 | const [isConnectionModalOpen, setIsConnectionModalOpen] = useState(false);
22 |
23 | const [loading, setLoading] = useState({ main: true, similarGenre: true, otherUsers: true });
24 |
25 | const [mainMovie, setMainMovie] = useState
21 | {/* Featured Movie */}
22 | {loadingStates.loadingMain ? (
23 |
102 |
24 |
26 | ) : (
27 |
28 | 
29 |
60 | )}
61 |
62 | {/* Similar Genre */}
63 | {loadingStates.loadingSimilarGenre ? (
64 |
30 | {mainMovie[0].title}
31 |
59 |
32 | {mainMovie[0].plot}
33 |
34 |
35 | {mainMovie[0].languages.map((lang: string, index: number) => (
36 |
37 | {lang}
38 |
39 | ))}
40 |
41 |
42 | {mainMovie[0].genres.map((genre: string, index: number) => (
43 |
44 | {genre}
45 |
46 | ))}
47 |
48 |
49 | Year: {mainMovie[0].year.toString()}
50 | IMDB Rating: {mainMovie[0].imdbRating}
51 |
52 |
53 |
58 |
54 |
55 |
56 |
57 |
65 |
67 | ) : (
68 |
69 | Similar genre
70 |
80 | )}
81 |
82 | {/* User who watched this, also watched this */}
83 | {loadingStates.loadingOtherUsers ? (
84 |
71 |
79 |
73 | {recoSimilarGenre.map((movie, index) => (
74 |
77 |
85 |
87 | ) : (
88 |
89 | Users who watched {mainMovie[0]?.title} also watched this
90 |
100 | )}
101 |
91 |
99 |
93 | {recoOtherUsers.map((movie, index) => (
94 |
97 |
77 | setIsConnectionModalOpen(true)}
83 | userHeader={false}
84 | />
85 | {recoError ? (
86 |
90 | 
91 |
92 | Data error
93 |
94 |
112 |
113 |
114 |
115 | ) : (
116 |
139 | );
140 | }
141 |
--------------------------------------------------------------------------------
/src/templates/movie/Interfaces.tsx:
--------------------------------------------------------------------------------
1 | export interface MovieInterface {
2 | id: number;
3 | genres: string[];
4 | languages: string[];
5 | title: string;
6 | plot: string;
7 | poster: string;
8 | year: string;
9 | imdbRating: string;
10 | }
11 |
--------------------------------------------------------------------------------
/src/templates/movie/Movie.tsx:
--------------------------------------------------------------------------------
1 | import { useState, CSSProperties } from 'react';
2 | import { Typography, Box } from '@neo4j-ndl/react';
3 | import { MovieInterface } from './Interfaces';
4 |
5 | export default function Movie({ movie }: { movie: MovieInterface }) {
6 | const [isHovered, setIsHovered] = useState(false);
7 |
8 | const boxStyle: CSSProperties = {
9 | transition: 'all 0.3s ease',
10 | maxWidth: '400px',
11 | position: 'relative',
12 | transform: isHovered ? 'scale(1.5)' : 'scale(1)',
13 | zIndex: isHovered ? '10' : '1',
14 | boxShadow: isHovered ? '0px 0px 20px rgba(0,0,0,0.5)' : 'none',
15 | };
16 | const infoStyle: CSSProperties = {
17 | position: 'absolute',
18 | bottom: 0,
19 | left: 0,
20 | right: 0,
21 | transform: isHovered ? 'translateY(0)' : 'translateY(100%)',
22 | display: isHovered ? 'inline-block' : 'none',
23 | transition: 'transform 1s ease',
24 | backgroundColor: 'rgb(var(--theme-palette-neutral-bg-stronger))',
25 | color: 'white',
26 | padding: '10px',
27 | };
28 |
29 | return (
30 | An error occurred while fetching recommendations data.
95 |96 | Please make sure you are connected to a Neo4j Database with the same data model as the{' '} 97 | 98 | 99 | Recommendation demo available here 100 | 101 | 102 |
103 |104 | Alternatively, you can also use the one from{' '} 105 | 106 | 107 | Neo4j Sandbox 108 | 109 | 110 |
111 |
33 |
34 | {movie.title}
35 |
36 |
47 | {movie.plot}
48 |
49 |
50 |
77 |
151 | );
152 | }
153 |
--------------------------------------------------------------------------------
/src/templates/shared/components/ConnectionModal.tsx:
--------------------------------------------------------------------------------
1 | import { Button, Dialog, TextInput, Dropdown, Banner, Dropzone } from '@neo4j-ndl/react';
2 | import { useState } from 'react';
3 | import { setDriver } from '../utils/Driver';
4 |
5 | interface Message {
6 | type: 'success' | 'info' | 'warning' | 'danger' | 'neutral';
7 | content: string;
8 | }
9 |
10 | interface ConnectionModalProps {
11 | open: boolean;
12 | setOpenConnection: (arg: boolean) => void;
13 | setConnectionStatus: (status: boolean) => void;
14 | message?: Message;
15 | }
16 |
17 | export default function ConnectionModal({
18 | open,
19 | setOpenConnection,
20 | setConnectionStatus,
21 | message,
22 | }: ConnectionModalProps) {
23 | const protocols = ['neo4j', 'neo4j+s', 'neo4j+ssc', 'bolt', 'bolt+s', 'bolt+ssc'];
24 | const [protocol, setProtocol] = useState
78 |
79 |
137 |
138 |
80 | {listMessages.map((chat) => (
81 |
136 |
86 |
118 |
133 |
134 | ))}
135 |
87 | {chat.user === 'chatbot' ? (
88 |
111 |
119 | {chat.message.split(/`(.+?)`/).map((part, index) =>
120 | index % 2 === 1 ? (
121 |
122 | {part}
123 |
124 | ) : (
125 | part
126 | )
127 | )}
128 |
129 |
130 | {chat.datetime}
131 |
132 |
139 |
149 |
150 |
40 |
113 |
114 | );
115 | }
116 |
--------------------------------------------------------------------------------
/src/templates/shared/components/PageNotFound.tsx:
--------------------------------------------------------------------------------
1 | import { Button, Flex, Typography } from '@neo4j-ndl/react';
2 | import { useNavigate } from 'react-router-dom';
3 |
4 | import NotFoundImg from '../assets/NotFound.png';
5 |
6 | export default function PageNotFound() {
7 | const navigate = useNavigate();
8 |
9 | return (
10 |
11 | 
12 |
13 | 404 - Page Not Found
14 |
15 |
18 |
19 |
20 |
21 | );
22 | }
23 |
--------------------------------------------------------------------------------
/src/templates/shared/components/User.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import { Menu, Typography, IconButton, Avatar } from '@neo4j-ndl/react';
3 | import { ChevronDownIconOutline } from '@neo4j-ndl/react/icons';
4 |
5 | const settings = ['Profile', 'Logout'];
6 |
7 | export default function User() {
8 | const [anchorEl, setAnchorEl] = useStateIt looks like the page you are trying to access either does not exists or is currently unavailable
16 |Please try again later and if the problem persists contact us
17 |
29 |
49 |
51 |
52 | );
53 | }
54 |
--------------------------------------------------------------------------------
/src/templates/shared/utils/Driver.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-console */
2 | import neo4j, { Driver } from 'neo4j-driver';
3 |
4 | export let driver: Driver;
5 |
6 | export async function setDriver(connectionURI: string, username: string, password: string) {
7 | try {
8 | driver = neo4j.driver(connectionURI, neo4j.auth.basic(username, password));
9 | await driver.getServerInfo();
10 | localStorage.setItem(
11 | 'needleStarterKit-neo4j.connection',
12 | JSON.stringify({ uri: connectionURI, user: username, password: password })
13 | );
14 | return true;
15 | } catch (err) {
16 | console.error(`Connection error\n${err}\nCause: ${err as Error}`);
17 | return false;
18 | }
19 | }
20 |
21 | export async function disconnect() {
22 | try {
23 | await driver.close();
24 | return true;
25 | } catch (err) {
26 | console.error(`Disconnection error\n${err}\nCause: ${err as Error}`);
27 | return false;
28 | }
29 | }
30 |
31 | /*
32 | Everything below this line is only for providing examples based on datasets available in Neo4j Sandbox (sandbox.neo4j.com).
33 | When using this code in your own project, you should remove the examples below and use your own queries.
34 | */
35 | export async function runRecoQuery(query: string) {
36 | const reco = [];
37 | try {
38 | let { records } = await driver.executeQuery(query);
39 | for (let record of records) {
40 | reco.push({
41 | id: record.get('id'),
42 | genres: record.get('genres'),
43 | year: record.get('year'),
44 | imdbRating: record.get('imdbRating'),
45 | languages: record.get('languages'),
46 | title: record.get('title'),
47 | plot: record.get('plot'),
48 | poster: record.get('poster'),
49 | });
50 | }
51 |
52 | return reco;
53 | } catch (err) {
54 | console.error(`Disconnection error\n${err}\nCause: ${err as Error}`);
55 | return false;
56 | }
57 | }
58 |
--------------------------------------------------------------------------------
/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
32 |
33 | John Doe
34 |
35 |
36 |
37 | john.doe@neo4j.com
38 |
39 |
40 |
47 |
48 |