Skip to content

Commit a57e277

Browse files
KittyJoseKittyJose
committed
playground updates & geo json fixes
1 parent 467fb44 commit a57e277

27 files changed

+269
-151
lines changed

‎packages/tdb-documents-ui/geoJSONPlayground/index.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React from "react"
22
import ReactDOM from "react-dom"
33
import App from "./src/Layout"
44
import { FrameProvider } from './src/frameInit'
5+
import { BrowserRouter as Router } from "react-router-dom";
56
//import "@terminusdb/terminusdb-documents-ui/dist/css/terminusdb__styles.css"
67

78
function InitComponent () {
@@ -22,6 +23,8 @@ function InitComponent () {
2223
}
2324

2425
ReactDOM.render(
25-
<InitComponent/>,
26+
<Router>
27+
<InitComponent/>
28+
</Router>,
2629
document.getElementById("root")
2730
)

‎packages/tdb-documents-ui/geoJSONPlayground/src/Layout.js‎

Lines changed: 25 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,13 @@ import React from 'react'
22
import { Container, Row, Col, Stack } from 'react-bootstrap';
33
import { View } from "./View"
44
import { ModeBar } from "./ModeBar"
5-
import { MenuList } from "./MenuList"
5+
import { MenuList, MENU_LIST } from "./MenuList"
66
import { Editor } from './Editors';
77
import { MoreInfo } from "./MoreInfoCanvas"
8-
9-
const App= (props) =>{
10-
8+
import { Routes, Route } from "react-router-dom"
119

12-
return <Container fluid="xxl" className='mt-5'>
13-
<MenuList/>
10+
const Layout = () => {
11+
return <div className='mt-5'>
1412
<MoreInfo/>
1513
<Row>
1614
<Col md={4}>
@@ -19,7 +17,27 @@ const App= (props) =>{
1917
</Col>
2018
<Col md={8}><View/></Col>
2119
</Row>
22-
</Container>
20+
</div>
21+
}
22+
23+
24+
function getRoutes() {
25+
let routeOptions = []
26+
routeOptions.push(<Route key={`home`} path={`/`} element={<Layout/>}/>)
27+
MENU_LIST.map(menu => {
28+
routeOptions.push(<Route key={menu} path={`/${menu}`} element={<Layout/>}/>)
29+
})
30+
return <>{routeOptions}</>
31+
}
32+
33+
const App= (props) =>{
34+
35+
return <div className='ml-5 mr-5'>
36+
<MenuList/>
37+
<Routes>
38+
{getRoutes()}
39+
</Routes>
40+
</div>
2341

2442
}
2543

‎packages/tdb-documents-ui/geoJSONPlayground/src/MenuList.js‎

Lines changed: 24 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,27 @@
11
import React, { useState } from "react"
22
import { FrameObj } from "./frameInit"
33
import * as menu from "./menu.constants"
4-
import Nav from 'react-bootstrap/Nav';
4+
import Stack from 'react-bootstrap/Stack';
55
import { getType } from "./controller"
6+
import { Link } from "react-router-dom";
67

78
// Menu list
8-
const MENU_LIST = [
9-
menu.GEO_FEATURE,
9+
export const MENU_LIST = [
10+
menu.GEO_FEATURE,
1011
menu.GEO_FEATURE_COLLECTION,
1112
menu.GEO_GEOMETRY_COLLECTION,
1213
menu.GEO_POINT_DOCUMENT,
1314
menu.GEO_LINE_STRING_DOCUMENT,
1415
menu.GEO_POLYGON_DOCUMENT,
15-
menu.GEO_MULTIPOLYGON_DOCUMENT
16+
menu.GEO_MULTIPOLYGON_DOCUMENT,
17+
menu.ADDRESS
1618
]
1719

20+
function getActiveClass (selectedMenu, menu) {
21+
if(selectedMenu === menu) return "bg-success"
22+
return ""
23+
}
24+
1825
// Nav bar
1926
export const MenuList = () => {
2027
const {
@@ -35,20 +42,19 @@ export const MenuList = () => {
3542
setMenuItem(selectedKey)
3643
setType(getType(selectedKey))
3744
}
45+
46+
MENU_LIST.map((menu) => (
47+
menuArray.push(<Link to={menu}
48+
className={`text-decoration-none text-white bg-primary rounded px-3 ${getActiveClass(menuItem, menu)} `}
49+
onClick={(key) => handleNavClick(menu)}>
50+
{menu}
51+
</Link>)
52+
))
3853

39-
MENU_LIST.map(menu => {
40-
menuArray.push(<Nav.Item>
41-
<Nav.Link eventKey={menu}>{menu}</Nav.Link>
42-
</Nav.Item>)
43-
})
44-
45-
return <Nav
46-
activeKey={activeKey}
47-
variant="pills"
48-
className="mb-4"
49-
onSelect={(selectedKey) => handleNavClick(selectedKey)}
50-
>
51-
{menuArray}
52-
</Nav>
54+
return <>
55+
<Stack direction="horizontal" gap={2} className="mt-5 d-flex flex-wrap">
56+
{menuArray}
57+
</Stack>
58+
</>
5359

5460
}

‎packages/tdb-documents-ui/geoJSONPlayground/src/controller.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ export function getType(selectedMenu) {
1111
else if(selectedMenu === menu.GEO_LINE_STRING_DOCUMENT) return "LineString"
1212
else if(selectedMenu === menu.GEO_POLYGON_DOCUMENT) return "Polygon"
1313
else if(selectedMenu === menu.GEO_MULTIPOLYGON_DOCUMENT) return "MultiPolygon"
14+
else if(selectedMenu === menu.ADDRESS) return "Address"
1415
else return "Point"
1516
}
1617

@@ -23,6 +24,7 @@ export function getFormData(selectedMenu) {
2324
else if(selectedMenu === menu.GEO_LINE_STRING_DOCUMENT) return data.GEO_LINE_STRING_DOCUMENT
2425
else if(selectedMenu === menu.GEO_POLYGON_DOCUMENT) return data.GEO_POLYGON_DOCUMENT
2526
else if(selectedMenu === menu.GEO_MULTIPOLYGON_DOCUMENT) return data.GEO_MULTIPOLYGON_DOCUMENT
27+
else if(selectedMenu === menu.ADDRESS) return data.ADDRESS_DOCUMENT
2628
return {}
2729
}
2830

‎packages/tdb-documents-ui/geoJSONPlayground/src/data.constants.js‎

Lines changed: 56 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -113,17 +113,31 @@ export const GEO_MULTIPOLYGON_DOCUMENT = {
113113
"@id": "MultiPolygon/7f9b83c6de0a4618830d85b5fcdebc55aeb60486d6d6091a1a12e7ebe5d306b5",
114114
"@type": "MultiPolygon",
115115
"coordinates": [
116+
[
116117
[
117-
[51.51, -0.12],
118-
[51.51, -0.13],
119-
[51.53, -0.13],
120-
],
118+
["-0.12", "51.51"],
119+
["-0.13", "51.51"],
120+
["-0.13", "51.53"],
121+
],
122+
[
123+
["-0.05", "51.51"],
124+
["-0.07", "51.51"],
125+
["-0.07", "51.53"]
126+
]
127+
]
128+
]
129+
/*"coordinates": [
130+
[
131+
[51.51, -0.12],
132+
[51.51, -0.13],
133+
[51.53, -0.13],
134+
],
121135
[
122-
[51.51, -0.05],
123-
[51.51, -0.07],
124-
[51.53, -0.07],
136+
[51.51, -0.05],
137+
[51.51, -0.07],
138+
[51.53, -0.07],
125139
],
126-
],
140+
]*/,
127141
"type": "MultiPolygon"
128142
}
129143

@@ -232,7 +246,7 @@ export const GEO_FEATURE_DOCUMENT = {
232246
},
233247
"type": "Feature"
234248
}
235-
249+
236250
export const GEO_FEATURE_COLLECTION_DOCUMENT = {
237251
"@id": "FeatureCollection/001a653d2a311f6fc86ddfe853eca86dad175b45cf63985a7b13b31479adbae5",
238252
"type": "FeatureCollection",
@@ -269,4 +283,36 @@ export const GEO_FEATURE_COLLECTION_DOCUMENT = {
269283
]
270284
}
271285

272-
export const GEO_GEOMETRY_COLLECTION_DOCUMENT = {}
286+
export const GEO_GEOMETRY_COLLECTION_DOCUMENT = {
287+
"type": "GeometryCollection",
288+
"geometries": [
289+
{ "type": "Point",
290+
"coordinates": [100.0, 0.0]
291+
},
292+
{ "type": "LineString",
293+
"coordinates": [ [101.0, 0.0], [102.0, 1.0] ]
294+
}
295+
]
296+
}
297+
298+
export const ADDRESS_DOCUMENT = {
299+
"@id": "Address/NEW%20ADDRESS",
300+
"@type": "Address",
301+
"location": {
302+
"@id": "Address/NEW%20ADDRESS/location/Location/9f6b6a77f7e4141b882579e67e7580ecca568b7586c197f1c4fa802b61492fd3",
303+
"@type": "Location",
304+
"city": "NEW CITY",
305+
"geometry_location": {
306+
"@id": "Address/NEW%20ADDRESS/location/Address/NEW%20ADDRESS/location/Location/9f6b6a77f7e4141b882579e67e7580ecca568b7586c197f1c4fa802b61492fd3/geometry_location/Point/9c1d3265000fad31cad24db9b1e4ae1233509b15469e0ff394c1a25ee23eaa75",
307+
"@type": "Point",
308+
"coordinates": [
309+
"53.24302757956819",
310+
"-6.131942167551961"
311+
],
312+
"type": "Point"
313+
},
314+
"postal_code": "12213 PO",
315+
"state": "NEW STATE",
316+
"street": "NEW STREET"
317+
}
318+
}

‎packages/tdb-documents-ui/geoJSONPlayground/src/frameInit.js‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,20 +5,21 @@ import { CREATE, LEGO } from "./constants"
55
import { GEO_JSON_FRAMES } from "./frames"
66
import { generateFrameViewerCode } from "./generateCode"
77
import { GEO_FEATURE } from './menu.constants'
8-
import { getFormData } from "./controller"
8+
import { getFormData, getType } from "./controller"
99

1010
export const FrameProvider = ({ children, config }) => {
11-
11+
const pathName= window.location.pathname.substring(1,window.location.pathname.length)
12+
1213
// constants to store selected menu option
13-
const [menuItem, setMenuItem] = useState(GEO_FEATURE)
14+
const [menuItem, setMenuItem] = useState(pathName ? decodeURI(pathName) : GEO_FEATURE)
1415
// constants to store frames
1516
const [frames, setFrames] = useState(GEO_JSON_FRAMES)
1617
// constants to store mode - CREATE/ EDIT or VIEW
1718
const [mode, setMode] = useState(CREATE)
1819
// constants to store form data
1920
const [formData, setFormData] = useState(false)
2021
// constants to store document type
21-
const [type, setType] = useState(GEO_FEATURE)
22+
const [type, setType] = useState(pathName ? getType(decodeURI(pathName)): "Feature")
2223
// constants to store data
2324
const [data, setData] = useState({})
2425
// consttant to store display of code

‎packages/tdb-documents-ui/geoJSONPlayground/src/frames.js‎

Lines changed: 37 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,45 @@
1-
export const GEO_JSON_FRAMES = {
1+
export const GEO_JSON_FRAMES = {
22
"@context": {
33
"@base": "terminusdb:///data/",
44
"@schema": "terminusdb:///schema#",
55
"@type": "Context"
66
},
7+
"Address": {
8+
"@key": {
9+
"@fields": [
10+
"asset_identifier"
11+
],
12+
"@type": "Lexical"
13+
},
14+
"@type": "Class",
15+
"location": {
16+
"@class": "Location",
17+
"@subdocument": []
18+
}
19+
},
20+
"Location": {
21+
"@key": {
22+
"@type": "Random"
23+
},
24+
"@subdocument": [],
25+
"@type": "Class",
26+
"city": "xsd:string",
27+
"geometry_location": {
28+
"@class": [
29+
{
30+
"@class": "Point",
31+
"@subdocument": []
32+
}
33+
],
34+
"@type": "Optional"
35+
},
36+
"postal_code": {
37+
"@class": "xsd:string",
38+
"@type": "Optional"
39+
},
40+
"state": "xsd:string",
41+
"street": "xsd:string"
42+
},
743
"Feature": {
844
"@inherits": [
945
"GeoJSON"

‎packages/tdb-documents-ui/geoJSONPlayground/src/menu.constants.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ export const GEO_POINT_DOCUMENT="Point"
66
export const GEO_LINE_STRING_DOCUMENT="LineString"
77
export const GEO_POLYGON_DOCUMENT="Polygon"
88
export const GEO_MULTIPOLYGON_DOCUMENT="MultiPolygon"
9+
export const ADDRESS="Address"
910

1011

1112

‎packages/tdb-documents-ui/geoJSONPlayground/webpack.config.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,19 +10,20 @@ module.exports = {
1010
entry: [
1111
'./index.js',
1212
],
13-
13+
1414
/*devtool: '#inline-source-map',
1515
entry: [
1616
'./index.js',
1717
],*/
1818
output: {
1919
path: path.resolve(__dirname, 'build'),
2020
filename: 'bundle.js',
21+
publicPath: '/'
2122
},
2223
devServer: {
2324
static: path.resolve(__dirname, 'build'),
2425
compress: true,
25-
historyApiFallback: false,
26+
historyApiFallback: true,
2627
port: 3032
2728
},
2829
plugins: [

‎packages/tdb-documents-ui/playground/docs/array.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@ Below Frame consists of an ArrayExamplePerson document
101101
```
102102

103103

104-
#### Create
104+
#### Create
105105

106106
```
107107
import { FrameViewer } from '@terminusdb/terminusdb-documents-ui'

0 commit comments

Comments
 (0)