More sync operations
This commit is contained in:
Magnus Åhall
parent
9df85d9580
commit
d0150145ed
10 changed files with 362 additions and 131 deletions
|
|
@ -41,6 +41,7 @@ export class NodeUI extends Component {
|
|||
</div>
|
||||
<div id="name">${node.Name}</div>
|
||||
<${NodeContent} key=${node.UUID} node=${node} ref=${this.nodeContent} />
|
||||
<div id="blank"></div>
|
||||
`
|
||||
|
||||
|
||||
|
|
@ -228,9 +229,11 @@ class NodeContent extends Component {
|
|||
}
|
||||
|
||||
let element
|
||||
/*
|
||||
if (node.RenderMarkdown.value)
|
||||
element = html`<${MarkdownContent} key='markdown-content' content=${content} />`
|
||||
else
|
||||
*/
|
||||
element = html`
|
||||
<div class="grow-wrap">
|
||||
<textarea id="node-content" class="node-content" ref=${this.contentDiv} oninput=${evt => this.contentChanged(evt)} required rows=1>${content}</textarea>
|
||||
|
|
@ -273,15 +276,14 @@ class NodeContent extends Component {
|
|||
export class Node {
|
||||
constructor(nodeData, level) {//{{{
|
||||
this.Level = level
|
||||
|
||||
this._children_fetched = false
|
||||
this.Children = []
|
||||
this.data = nodeData
|
||||
|
||||
this.UUID = nodeData.UUID
|
||||
this.ParentUUID = nodeData.ParentUUID
|
||||
this.UserID = nodeData.UserID
|
||||
this.CryptoKeyID = nodeData.CryptoKeyID
|
||||
this.Name = nodeData.Name
|
||||
|
||||
this._children_fetched = false
|
||||
this.Children = []
|
||||
/*
|
||||
this.RenderMarkdown = signal(nodeData.RenderMarkdown)
|
||||
this.Markdown = false
|
||||
this.ShowChecklist = signal(false)
|
||||
|
|
@ -294,6 +296,14 @@ export class Node {
|
|||
this.ScheduleEvents = signal([])
|
||||
// it doesn't control it afterwards.
|
||||
// Used to expand the crumbs upon site loading.
|
||||
*/
|
||||
}//}}}
|
||||
get(prop) {//{{{
|
||||
return this.data[prop]
|
||||
}//}}}
|
||||
updated() {//{{{
|
||||
// '2024-12-17T17:33:48.85939Z
|
||||
return new Date(Date.parse(this.data.Updated))
|
||||
}//}}}
|
||||
hasFetchedChildren() {//{{{
|
||||
return this._children_fetched
|
||||
|
|
@ -311,7 +321,7 @@ export class Node {
|
|||
if (this.CryptoKeyID != 0 && !this._decrypted)
|
||||
this.#decrypt()
|
||||
*/
|
||||
return this._content
|
||||
return this.data.Content
|
||||
}//}}}
|
||||
setContent(new_content) {//{{{
|
||||
this._content = new_content
|
||||
|
|
@ -325,8 +335,8 @@ export class Node {
|
|||
*/
|
||||
}//}}}
|
||||
static sort(a, b) {//{{{
|
||||
if (a.Name < b.Name) return -1
|
||||
if (a.Name > b.Name) return 0
|
||||
if (a.data.Name < b.data.Name) return -1
|
||||
if (a.data.Name > b.data.Name) return 0
|
||||
return 0
|
||||
}//}}}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
import { API } from 'api'
|
||||
import { Node } from 'node'
|
||||
|
||||
export const ROOT_NODE = '00000000-0000-0000-0000-000000000000'
|
||||
|
|
@ -13,15 +12,14 @@ export class NodeStore {
|
|||
}//}}}
|
||||
async initializeDB() {//{{{
|
||||
return new Promise((resolve, reject) => {
|
||||
const req = indexedDB.open('notes', 3)
|
||||
|
||||
const req = indexedDB.open('notes', 5)
|
||||
|
||||
// Schema upgrades for IndexedDB.
|
||||
// These can start from different points depending on updates to Notes2 since a device was online.
|
||||
req.onupgradeneeded = (event) => {
|
||||
let treeNodes
|
||||
let nodes
|
||||
let appState
|
||||
let sendQueue
|
||||
const db = event.target.result
|
||||
const trx = event.target.transaction
|
||||
|
||||
|
|
@ -31,28 +29,35 @@ export class NodeStore {
|
|||
// The schema transformations.
|
||||
switch (i) {
|
||||
case 1:
|
||||
treeNodes = db.createObjectStore('treeNodes', { keyPath: 'UUID' })
|
||||
treeNodes.createIndex('nameIndex', 'Name', { unique: false })
|
||||
|
||||
nodes = db.createObjectStore('nodes', { keyPath: 'UUID' })
|
||||
nodes.createIndex('nameIndex', 'Name', { unique: false })
|
||||
break
|
||||
|
||||
case 2:
|
||||
trx.objectStore('treeNodes').createIndex('parentIndex', 'ParentUUID', { unique: false })
|
||||
trx.objectStore('nodes').createIndex('parentIndex', 'ParentUUID', { unique: false })
|
||||
break
|
||||
|
||||
case 3:
|
||||
appState = db.createObjectStore('appState', { keyPath: 'key' })
|
||||
appState = db.createObjectStore('app_state', { keyPath: 'key' })
|
||||
break
|
||||
|
||||
case 4:
|
||||
trx.objectStore('nodes').createIndex('modifiedIndex', 'modified', { unique: false })
|
||||
break
|
||||
|
||||
case 5:
|
||||
sendQueue = db.createObjectStore('send_queue', { keyPath: ['UUID', 'Updated'] })
|
||||
sendQueue.createIndex('updated', 'Updated', { unique: false })
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
req.onsuccess = (event) => {
|
||||
this.db = event.target.result
|
||||
this.initializeRootNode().then(() =>
|
||||
resolve()
|
||||
)
|
||||
this.initializeRootNode()
|
||||
.then(() => this.initializeClientUUID())
|
||||
.then(() => resolve())
|
||||
}
|
||||
|
||||
req.onerror = (event) => {
|
||||
|
|
@ -60,7 +65,7 @@ export class NodeStore {
|
|||
}
|
||||
})
|
||||
}//}}}
|
||||
initializeRootNode() {//{{{
|
||||
async initializeRootNode() {//{{{
|
||||
return new Promise((resolve, reject) => {
|
||||
// The root node is a magical node which displays as the first node if none is specified.
|
||||
// If not already existing, it will be created.
|
||||
|
|
@ -89,11 +94,18 @@ export class NodeStore {
|
|||
getRequest.onerror = (event) => reject(event.target.error)
|
||||
})
|
||||
}//}}}
|
||||
async initializeClientUUID() {//{{{
|
||||
let clientUUID = await this.getAppState('client_uuid')
|
||||
if (clientUUID !== null)
|
||||
return
|
||||
clientUUID = crypto.randomUUID()
|
||||
return this.setAppState('client_uuid', clientUUID)
|
||||
}//}}}
|
||||
|
||||
async getAppState(key) {//{{{
|
||||
return new Promise((resolve, reject) => {
|
||||
const trx = this.db.transaction('appState', 'readonly')
|
||||
const appState = trx.objectStore('appState')
|
||||
const trx = this.db.transaction('app_state', 'readonly')
|
||||
const appState = trx.objectStore('app_state')
|
||||
const getRequest = appState.get(key)
|
||||
getRequest.onsuccess = (event) => {
|
||||
if (event.target.result !== undefined) {
|
||||
|
|
@ -108,8 +120,8 @@ export class NodeStore {
|
|||
async setAppState(key, value) {//{{{
|
||||
return new Promise((resolve, reject) => {
|
||||
try {
|
||||
const t = this.db.transaction('appState', 'readwrite')
|
||||
const appState = t.objectStore('appState')
|
||||
const t = this.db.transaction('app_state', 'readwrite')
|
||||
const appState = t.objectStore('app_state')
|
||||
t.onerror = (event) => {
|
||||
console.log('transaction error', event.target.error)
|
||||
reject(event.target.error)
|
||||
|
|
@ -129,10 +141,72 @@ export class NodeStore {
|
|||
})
|
||||
}//}}}
|
||||
|
||||
async upsertTreeRecords(records) {//{{{
|
||||
async moveToSendQueue(nodeToMove, replaceWithNode) {//{{{
|
||||
return new Promise((resolve, reject) => {
|
||||
const t = this.db.transaction('treeNodes', 'readwrite')
|
||||
const nodeStore = t.objectStore('treeNodes')
|
||||
const t = this.db.transaction(['nodes', 'send_queue'], 'readwrite')
|
||||
const nodeStore = t.objectStore('nodes')
|
||||
const sendQueue = t.objectStore('send_queue')
|
||||
t.onerror = (event) => {
|
||||
console.log('transaction error', event.target.error)
|
||||
reject(event.target.error)
|
||||
}
|
||||
t.oncomplete = () => {
|
||||
resolve()
|
||||
}
|
||||
|
||||
// Node to be moved is first stored in the new queue.
|
||||
const queueReq = sendQueue.put(nodeToMove.data)
|
||||
queueReq.onsuccess = () => {
|
||||
// When added to the send queue, the node is either deleted
|
||||
// or replaced with a new node.
|
||||
console.debug(`Queueing ${nodeToMove.UUID} (${nodeToMove.get('Name')})`)
|
||||
let nodeReq
|
||||
if (replaceWithNode)
|
||||
nodeReq = nodeStore.put(replaceWithNode.data)
|
||||
else
|
||||
nodeReq = nodeStore.delete(nodeToMove.UUID)
|
||||
nodeReq.onsuccess = () => {
|
||||
resolve()
|
||||
}
|
||||
nodeReq.onerror = (event) => {
|
||||
console.log(`Error moving ${nodeToMove.UUID}`, event.target.error)
|
||||
reject(event.target.error)
|
||||
}
|
||||
|
||||
}
|
||||
queueReq.onerror = (event) => {
|
||||
console.log(`Error queueing ${nodeToMove.UUID}`, event.target.error)
|
||||
reject(event.target.error)
|
||||
}
|
||||
})
|
||||
}//}}}
|
||||
async storeNode(node) {//{{{
|
||||
return new Promise((resolve, reject) => {
|
||||
const t = this.db.transaction('nodes', 'readwrite')
|
||||
const nodeStore = t.objectStore('nodes')
|
||||
t.onerror = (event) => {
|
||||
console.log('transaction error', event.target.error)
|
||||
reject(event.target.error)
|
||||
}
|
||||
t.oncomplete = () => {
|
||||
resolve()
|
||||
}
|
||||
|
||||
const nodeReq = nodeStore.put(node.data)
|
||||
nodeReq.onsuccess = () => {
|
||||
console.debug(`Storing ${node.UUID} (${node.get('Name')})`)
|
||||
}
|
||||
queueReq.onerror = (event) => {
|
||||
console.log(`Error storing ${node.UUID}`, event.target.error)
|
||||
reject(event.target.error)
|
||||
}
|
||||
})
|
||||
}//}}}
|
||||
|
||||
async upsertNodeRecords(records) {//{{{
|
||||
return new Promise((resolve, reject) => {
|
||||
const t = this.db.transaction('nodes', 'readwrite')
|
||||
const nodeStore = t.objectStore('nodes')
|
||||
t.onerror = (event) => {
|
||||
console.log('transaction error', event.target.error)
|
||||
reject(event.target.error)
|
||||
|
|
@ -152,23 +226,25 @@ export class NodeStore {
|
|||
addReq = nodeStore.delete(record.UUID)
|
||||
} else {
|
||||
op = 'upserting'
|
||||
// 'modified' is a local property for tracking
|
||||
// nodes needing to be synced to backend.
|
||||
record.modified = 0
|
||||
addReq = nodeStore.put(record)
|
||||
}
|
||||
addReq.onsuccess = () => {
|
||||
console.log(`${op} ${record.UUID} (${record.Name})`)
|
||||
console.debug(`${op} ${record.UUID} (${record.Name})`)
|
||||
}
|
||||
addReq.onerror = (event) => {
|
||||
console.log(`error ${op} ${record.UUID}`, event.target.error)
|
||||
reject(event.target.error)
|
||||
}
|
||||
}
|
||||
|
||||
})
|
||||
}//}}}
|
||||
async getTreeNodes(parent, newLevel) {//{{{
|
||||
return new Promise((resolve, reject) => {
|
||||
const trx = this.db.transaction('treeNodes', 'readonly')
|
||||
const nodeStore = trx.objectStore('treeNodes')
|
||||
const trx = this.db.transaction('nodes', 'readonly')
|
||||
const nodeStore = trx.objectStore('nodes')
|
||||
const index = nodeStore.index('parentIndex')
|
||||
const req = index.getAll(parent)
|
||||
req.onsuccess = (event) => {
|
||||
|
|
@ -193,21 +269,29 @@ export class NodeStore {
|
|||
reject(event.target.error)
|
||||
}
|
||||
t.oncomplete = () => {
|
||||
resolve()
|
||||
console.log('OK')
|
||||
}
|
||||
|
||||
// records is an object, not an array.
|
||||
const promises = []
|
||||
for (const recordIdx in records) {
|
||||
const record = records[recordIdx]
|
||||
const addReq = nodeStore.put(record)
|
||||
addReq.onsuccess = () => {
|
||||
console.log('OK!', record.ID, record.Name)
|
||||
}
|
||||
addReq.onerror = (event) => {
|
||||
console.log('Error!', event.target.error, record.ID)
|
||||
}
|
||||
const addReq = nodeStore.put(record.data)
|
||||
|
||||
const promise = new Promise((resolve, reject) => {
|
||||
addReq.onsuccess = () => {
|
||||
console.debug('OK!', record.ID, record.Name)
|
||||
resolve()
|
||||
}
|
||||
addReq.onerror = (event) => {
|
||||
console.log('Error!', event.target.error, record.ID)
|
||||
reject(event.target.error)
|
||||
}
|
||||
})
|
||||
promises.push(promise)
|
||||
}
|
||||
|
||||
Promise.all(promises).then(() => resolve())
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
}
|
||||
|
|
@ -221,26 +305,23 @@ export class NodeStore {
|
|||
const nodeStore = trx.objectStore('nodes')
|
||||
const getRequest = nodeStore.get(uuid)
|
||||
getRequest.onsuccess = (event) => {
|
||||
// Node found in IndexedDB and returned.
|
||||
if (event.target.result !== undefined) {
|
||||
const node = new Node(event.target.result, -1)
|
||||
resolve(node)
|
||||
// Node not found in IndexedDB.
|
||||
if (event.target.result === undefined) {
|
||||
reject("No such node")
|
||||
return
|
||||
}
|
||||
|
||||
// Node not found and a request to the backend is made.
|
||||
API.query("POST", `/node/retrieve/${uuid}`, {})
|
||||
.then(res => {
|
||||
const trx = this.db.transaction('nodes', 'readwrite')
|
||||
const nodeStore = trx.objectStore('nodes')
|
||||
const putRequest = nodeStore.put(res.Node)
|
||||
const node = new Node(res.Node, -1)
|
||||
putRequest.onsuccess = () => resolve(node)
|
||||
putRequest.onerror = (event) => {
|
||||
reject(event.target.error)
|
||||
}
|
||||
})
|
||||
.catch(e => reject(e))
|
||||
const node = new Node(event.target.result, -1)
|
||||
resolve(node)
|
||||
}
|
||||
})
|
||||
}//}}}
|
||||
async nodeCount() {//{{{
|
||||
return new Promise((resolve, reject) => {
|
||||
const t = this.db.transaction('nodes', 'readwrite')
|
||||
const nodeStore = t.objectStore('nodes')
|
||||
const countReq = nodeStore.count()
|
||||
countReq.onsuccess = event => {
|
||||
resolve(event.target.result)
|
||||
}
|
||||
})
|
||||
}//}}}
|
||||
|
|
|
|||
|
|
@ -6,17 +6,21 @@ import { ROOT_NODE } from 'node_store'
|
|||
const html = htm.bind(h)
|
||||
|
||||
export class Notes2 extends Component {
|
||||
state = {
|
||||
startNode: null,
|
||||
}
|
||||
constructor() {//{{{
|
||||
super()
|
||||
this.tree = createRef()
|
||||
this.nodeUI = createRef()
|
||||
this.state = {
|
||||
startNode: null,
|
||||
}
|
||||
|
||||
Sync.nodes().then(durationNodes =>
|
||||
console.log(`Total time: ${Math.round(100 * durationNodes) / 100}s`)
|
||||
)
|
||||
|
||||
this.getStartNode()
|
||||
}//}}}
|
||||
render({}, { startNode }) {//{{{
|
||||
render(_props, { startNode }) {//{{{
|
||||
if (startNode === null)
|
||||
return
|
||||
|
||||
|
|
@ -81,7 +85,7 @@ class Tree extends Component {
|
|||
})
|
||||
return html`
|
||||
<div id="tree">
|
||||
<div id="logo"><a href="/notes2"><img src="/images/${_VERSION}/logo.svg" /></a></div>
|
||||
<div id="logo" onclick=${() => _notes2.current.goToNode(ROOT_NODE)}><img src="/images/${_VERSION}/logo.svg" /></div>
|
||||
${renderedTreeTrunk}
|
||||
</div>`
|
||||
}//}}}
|
||||
|
|
@ -197,7 +201,7 @@ class TreeNode extends Component {
|
|||
return html`
|
||||
<div class="node">
|
||||
<div class="expand-toggle" onclick=${() => { this.expanded.value ^= true }}>${expandImg}</div>
|
||||
<div class="name ${selected}" onclick=${() => window._notes2.current.goToNode(node.UUID)}>${node.Name}</div>
|
||||
<div class="name ${selected}" onclick=${() => window._notes2.current.goToNode(node.UUID)}>${node.get('Name')}</div>
|
||||
<div class="children ${node.Children.length > 0 && this.expanded.value ? 'expanded' : 'collapsed'}">${children}</div>
|
||||
</div>`
|
||||
}//}}}
|
||||
|
|
|
|||
|
|
@ -1,31 +1,84 @@
|
|||
import { API } from 'api'
|
||||
import { Node } from 'node'
|
||||
|
||||
export class Sync {
|
||||
constructor() {
|
||||
this.foo = ''
|
||||
}
|
||||
|
||||
static async tree() {
|
||||
static async nodes() {
|
||||
let duration = 0
|
||||
const syncStart = Date.now()
|
||||
try {
|
||||
const state = await nodeStore.getAppState('latest_sync')
|
||||
// The latest sync node value is used to retrieve the changes
|
||||
// from the backend.
|
||||
const state = await nodeStore.getAppState('latest_sync_node')
|
||||
const clientUUID = await nodeStore.getAppState('client_uuid')
|
||||
const oldMax = (state?.value ? state.value : 0)
|
||||
let newMax = 0
|
||||
let currMax = oldMax
|
||||
|
||||
let offset = 0
|
||||
let res = { Continue: false }
|
||||
let batch = 0
|
||||
do {
|
||||
batch++
|
||||
console.log(`Batch #${batch}`)
|
||||
res = await API.query('POST', `/node/tree/${oldMax}/${offset}`, {})
|
||||
res = await API.query('POST', `/sync/node/${oldMax}/${offset}`, { ClientUUID: clientUUID.value })
|
||||
if (res.Nodes.length > 0)
|
||||
console.log(`Node sync batch #${batch}`)
|
||||
offset += res.Nodes.length
|
||||
newMax = res.MaxSeq
|
||||
await nodeStore.upsertTreeRecords(res.Nodes)
|
||||
currMax = Math.max(currMax, res.MaxSeq)
|
||||
|
||||
/* Go through each node and determine if they are older than
|
||||
* the node in IndexedDB. If they are, they are just history
|
||||
* and can be ignored since history is currently not stored
|
||||
* in the browser.
|
||||
*
|
||||
* If the backed node is newer, the local node is stored in
|
||||
* a separate table in IndexedDB to at a later stage in the
|
||||
* sync be preserved in the backend. */
|
||||
|
||||
let backendNode = null
|
||||
for (const i in res.Nodes) {
|
||||
backendNode = new Node(res.Nodes[i], -1)
|
||||
await Sync.handleNode(backendNode)
|
||||
}
|
||||
|
||||
} while (res.Continue)
|
||||
|
||||
nodeStore.setAppState('latest_sync', Math.max(oldMax, newMax))
|
||||
nodeStore.setAppState('latest_sync_node', currMax)
|
||||
} catch (e) {
|
||||
console.log('sync node tree', e)
|
||||
} finally {
|
||||
const syncEnd = Date.now()
|
||||
duration = (syncEnd - syncStart) / 1000
|
||||
const count = await nodeStore.nodeCount()
|
||||
console.log(`Node sync took ${duration}s`, count)
|
||||
}
|
||||
return duration
|
||||
}
|
||||
static async handleNode(backendNode) {
|
||||
try {
|
||||
/* Retrieving the local copy of this node from IndexedDB.
|
||||
* The backend node can be discarded if it is older than
|
||||
* the local copy since it is considered history preserved
|
||||
* in the backend. */
|
||||
return nodeStore.get(backendNode.UUID)
|
||||
.then(async localNode => {
|
||||
if (localNode.updated() >= backendNode.updated()) {
|
||||
console.log(`History from backend: ${backendNode.UUID}`)
|
||||
return
|
||||
}
|
||||
|
||||
// local node is older than the backend node
|
||||
// and moved into the send_queue table for later sync to backend.
|
||||
return nodeStore.moveToSendQueue(localNode, backendNode)
|
||||
})
|
||||
.catch(async e => {
|
||||
// Not found in IndexedDB - OK to just insert since it only exists in backend.
|
||||
return nodeStore.add([backendNode])
|
||||
})
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue