47 |
77 |
78 |
48 |
54 | setTitle(e.target.value)}
60 | />
61 |
62 | {html && (
63 |
64 |
65 | 73 | 74 |
75 | )}
76 | 65 | 73 | 74 |
79 | 80 |
30 |
53 | );
54 | }
55 |
56 |
--------------------------------------------------------------------------------
/src/import/MedxImport.tsx:
--------------------------------------------------------------------------------
1 | import React, { useMemo } from "react";
2 | import { useDebounce } from "../utils/utils";
3 | import { useAppDispatch } from "../state/hooks";
4 | import { togglePopoverView } from "../state/viewSlice";
5 | import { MediaFragment, renderFragment } from "../medx/MediaFragment";
6 |
7 | // https://stackoverflow.com/a/27728417/2374668
8 | function parseYoutubeId(url: string) : string | null {
9 | const rx = /^.*(?:(?:youtu\.be\/|v\/|vi\/|u\/\w\/|embed\/|shorts\/)|(?:(?:watch)?\?v(?:i)?=|\&v(?:i)?=))([^#\&\?]*).*/;
10 | const match = url.match(rx);
11 | if (match && match?.length >= 2) return match[1];
12 | return null;
13 | }
14 |
15 | export default function MedxImport() {
16 | const ref = React.useRefImport
31 | 32 |
33 |
52 |
34 | {importFormats.map(f => {
35 | return (
36 |
46 | );
47 | })}
48 |
49 |
50 | {uploadEl}
51 | Unable to recognize youtube URL.
; 33 | return ; 36 | } 37 | }, [debouncedUrl, format]); 38 | 39 | function formatSelected(e: any) { 40 | setFormat(e.target.value); 41 | } 42 | 43 | function urlChanged(value: string) { 44 | setUrl(value); 45 | } 46 | 47 | function onDrop(e: any) { 48 | e.preventDefault(); 49 | 50 | const files = e.dataTransfer.files; 51 | if (files.length > 0) { 52 | // file.name, file.path 53 | setUrl(files[0].path); 54 | } 55 | } 56 | 57 | async function insert() { 58 | const url_ = format == 'youtube' ? (parseYoutubeId(url) ?? url) : url; 59 | console.log(url_, format); 60 | const args: MediaFragment = { 61 | url: url_, 62 | //@ts-ignore 63 | format, 64 | volume: 1, 65 | rate: 1, 66 | loop: false 67 | }; 68 | await logseq.Editor.insertAtEditingCursor(renderFragment(args)); 69 | dispatch(togglePopoverView({ view: null })); 70 | } 71 | 72 | return ( 73 |
78 |
88 |
89 |
117 | );
118 | }
119 |
--------------------------------------------------------------------------------
/src/import/YtUpload.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { getVideoDetails } from "youtube-caption-extractor";
3 |
4 | // https://stackoverflow.com/a/27728417/2374668
5 | function parseYoutubeId(url: string) : string | null {
6 | const rx = /^.*(?:(?:youtu\.be\/|v\/|vi\/|u\/\w\/|embed\/|shorts\/)|(?:(?:watch)?\?v(?:i)?=|\&v(?:i)?=))([^#\&\?]*).*/;
7 | const match = url.match(rx);
8 | if (match && match?.length >= 2) return match[1];
9 | return null;
10 | }
11 |
12 | export default function YtUpload() {
13 | const [url, setUrl] = React.useState
90 |
112 |
113 | 91 | 95 | 99 | 103 |
104 | 105 | 111 |
114 | {mediaElement}
115 |
116 |
44 |
63 | );
64 | }
65 |
--------------------------------------------------------------------------------
/src/import/importSlice.ts:
--------------------------------------------------------------------------------
1 | import { createSlice, PayloadAction } from "@reduxjs/toolkit"
2 | import { AppDispatch, RootState } from "../state/store";
3 | import { ImportFormat, importFormats } from "./types";
4 | import { BetaParams } from "../types";
5 | import { initialIntervalFromMean } from "../algorithm/scheduling";
6 | import { betaFromMean } from "../algorithm/priority";
7 | import sanitize from "sanitize-filename";
8 | import { createDoc, generateNewDocIbProps } from "../docx/docx";
9 |
10 | interface ImportState {
11 | busy: boolean,
12 | format: ImportFormat,
13 | betaParams: BetaParams,
14 | interval: number
15 | }
16 |
17 | const initialState: ImportState = {
18 | busy: false,
19 | format: importFormats[0],
20 | betaParams: {a: 1, b: 1},
21 | interval: initialIntervalFromMean(.5)
22 | }
23 |
24 | const importSlice = createSlice({
25 | name: 'import',
26 | initialState,
27 | reducers: {
28 | gotBusy(state, action: PayloadAction
45 | urlChanged(e.target.value)}
51 | //onDrop={onDrop}
52 | />
53 | setTitle(e.target.value)}
59 | />
60 |
61 | {preview}
62 |
19 |
57 | );
58 | }
59 |
--------------------------------------------------------------------------------
/src/learn/LearnBar.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { useAppDispatch, useAppSelector } from "../state/hooks";
3 | import { finishRep, getPriorityUpdates, Popover, popoverVisible, stopLearning } from "./learnSlice";
4 | import PriorityComponent from "./PriorityComponent";
5 | import PriorityPopover from "./PriorityPopover";
6 | import ScheduleComponent from "./ScheduleComponent";
7 | import SchedulePopover from "./SchedulePopover";
8 | import ActionsPopover from "./ActionsPopover";
9 | import QueuePopover from "./QueuePopover";
10 | import SettingsComponent from "./SettingsComponent";
11 | import * as theme from "../utils/theme";
12 |
13 | export default function LearnBar() {
14 | const dispatch = useAppDispatch();
15 | const currentIbData = useAppSelector(state => state.learn.current);
16 | const popover = useAppSelector(state => state.learn.popover);
17 | let pollTimer: NodeJS.Timeout;
18 |
19 | React.useEffect(() => {
20 | // On a timer, get new priority updates. This is because
21 | // time spent on an ib increases priority.
22 | pollTimer = setInterval(() => dispatch(getPriorityUpdates()), 2000);
23 | return () => clearInterval(pollTimer);
24 | }, []);
25 |
26 | async function applyAction(action: Function, opts: Object = {}) {
27 | //setBusy(true);
28 | await dispatch(action(opts));
29 | //setBusy(false);
30 | }
31 |
32 | async function finish() {
33 | await applyAction(finishRep);
34 | }
35 |
36 | function quit() {
37 | dispatch(stopLearning());
38 | }
39 |
40 | let popoverView = <>;
41 | let selfPos = 'self-center';
42 | if (popover == Popover.priority) {
43 | popoverView =
20 |
43 |
44 |
45 |
46 |
21 |
42 |
22 | setInterval(parseFloat(e.target.value))}
27 | min="1"
28 | step="1"
29 | />
30 | d
31 |
32 |
33 |
41 |
47 |
55 |
56 | dispatch(popoverVisible(Popover.none))}
58 | >
59 |
116 | )
117 | }
118 |
--------------------------------------------------------------------------------
/src/learn/LearnWindow.tsx:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mochar/logseq-incremental-blocks/1f389e954a932026497ef326c27d0f2013678c8d/src/learn/LearnWindow.tsx
--------------------------------------------------------------------------------
/src/learn/PriorityComponent.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import { useAppDispatch, useAppSelector } from "../state/hooks";
3 | import { manuallyPrioritized, Popover, popoverVisible } from "./learnSlice";
4 | import * as theme from "../utils/theme";
5 | import Beta from "../algorithm/beta";
6 | import PrioritySlider from "../widgets/PrioritySlider";
7 |
8 | export default function PriorityComponent() {
9 | const dispatch = useAppDispatch();
10 | const currentIbData = useAppSelector(state => state.learn.current);
11 |
12 | function updateManualPriority(meanPiority: number | null) {
13 | dispatch(manuallyPrioritized(meanPiority));
14 | }
15 |
16 | if (!currentIbData) return <>;
17 |
18 | const currentIb = currentIbData.ib;
19 | const curBeta = Beta.fromParams(currentIb.betaParams);
20 | const newBeta = Beta.fromParams(currentIbData.newPriority);
21 |
22 | return (
23 |
62 | {popoverView}
63 |
64 |
65 |
74 |
81 |
82 |
83 |
84 | {(currentIbData?.ib.scheduling?.reps ?? 0) + 1}
85 |
86 |
87 |
93 |
94 |
115 | dispatch(popoverVisible(Popover.priority))}
27 | >
28 |
43 | );
44 | }
45 |
--------------------------------------------------------------------------------
/src/learn/PriorityPopover.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import BetaGraph from "../widgets/BetaGraph";
3 | import { useAppDispatch, useAppSelector } from "../state/hooks";
4 | import Beta from "../algorithm/beta";
5 |
6 | export default function PriorityPopover() {
7 | const dispatch = useAppDispatch();
8 | const currentIbData = useAppSelector(state => state.learn.current);
9 |
10 | if (!currentIbData) return <>;
11 |
12 | const currentIb = currentIbData.ib;
13 | const curBeta = Beta.fromParams(currentIb.betaParams);
14 | const newBeta = Beta.fromParams(currentIbData.newPriority);
15 |
16 | return (
17 |
29 |
42 |
18 | Priority
19 |
29 | );
30 | }
31 |
--------------------------------------------------------------------------------
/src/learn/QueuePopover.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from "react";
2 | import { useAppSelector } from "../state/hooks";
3 | import { Virtuoso } from "react-virtuoso";
4 | import { QueueIb } from "../types";
5 | import IbItem from "../widgets/IbItem";
6 | import { queryQueueIbs } from "../logseq/query";
7 |
8 | export default function QueuePopover() {
9 | const queue = useAppSelector(state => state.learn.queue);
10 | const [qibs, setQibs] = useState
20 |
28 |
21 |
23 | 🠲
24 |
25 |
27 |
25 | Da queue
26 | {qibs.length > 0 &&
27 |
38 |
39 | );
40 | }
41 |
--------------------------------------------------------------------------------
/src/learn/ScheduleComponent.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import * as theme from "../utils/theme";
3 | import { useAppDispatch, useAppSelector } from "../state/hooks";
4 | import { manuallyScheduled, Popover, popoverVisible } from "./learnSlice";
5 | import { addDays, formatDate, todayMidnight } from "../utils/datetime";
6 |
7 | export default function ScheduleComponent() {
8 | const dispatch = useAppDispatch();
9 | const currentIbData = useAppSelector(state => state.learn.current);
10 |
11 | function updateManualInterval(val: number | null) {
12 | if (val != null && (Number.isNaN(val) || val <= 0)) return;
13 | dispatch(manuallyScheduled(val));
14 | }
15 |
16 | if (!currentIbData) return <>;
17 |
18 | const nextDue = addDays(todayMidnight(), currentIbData.newInterval);
19 |
20 | return (
21 |
28 |
30 | }
31 | dispatch(popoverVisible(Popover.schedule))}
25 | >
26 |
51 | );
52 | }
53 |
--------------------------------------------------------------------------------
/src/learn/SchedulePopover.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import DatePicker from "react-datepicker";
3 | import { addDays, dateDiffInDays, formatDate, todayMidnight } from "../utils/datetime";
4 | import { useAppDispatch, useAppSelector } from "../state/hooks";
5 | import { manuallyScheduled } from "./learnSlice";
6 | import ScheduleView from "../widgets/ScheduleView";
7 |
8 | export default function SchedulePopover() {
9 | const dispatch = useAppDispatch();
10 | const currentIbData = useAppSelector(state => state.learn.current);
11 |
12 | function updateManualInterval(date: Date | null) {
13 | if (!date) return;
14 | const interval = dateDiffInDays(todayMidnight(), date);
15 | dispatch(manuallyScheduled(interval));
16 | }
17 |
18 | if (!currentIbData) return <>;
19 |
20 | const scheduling = currentIbData.ib.scheduling!;
21 |
22 | const nextDue = addDays(todayMidnight(), currentIbData.newInterval);
23 |
24 | return (
25 |
27 | {formatDate(new Date(nextDue))}
28 |
29 |
50 |
30 | updateManualInterval(parseFloat(e.target.value))}
35 | min="1"
36 | step="1"
37 | />
38 | d
39 |
40 |
41 | {currentIbData.manualInterval &&
42 |
48 | }
49 |
26 | Schedule
27 |
28 |
63 | );
64 | }
65 |
--------------------------------------------------------------------------------
/src/learn/SettingsComponent.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { useAppDispatch, useAppSelector } from "../state/hooks";
3 | import { Popover, popoverVisible, toggleAutoIb } from "./learnSlice";
4 |
5 | export default function SettingsComponent() {
6 | const dispatch = useAppDispatch();
7 | const autoIb = useAppSelector(state => state.learn.autoIb);
8 | const [autoOpen, setAutoOpen] = React.useState
29 |
62 |
30 |
52 |
53 |
31 |
39 |
40 | 32 | {formatDate(new Date(scheduling.dueDate))} 33 |
34 |🠲
35 |36 | {formatDate(nextDue)} 37 |
38 |
41 |
51 |
54 |
61 | dispatch(popoverVisible(Popover.none))}
19 | >
20 | dispatch(toggleAutoIb(!autoIb))}
25 | />
26 |
33 | );
34 | }
35 |
36 | interface IToggle {
37 | icon: string,
38 | tooltip: string,
39 | state?: boolean,
40 | onChange: () => void
41 | }
42 |
43 | function Toggle({ icon, tooltip, state, onChange }: IToggle) {
44 | return (
45 |
58 | );
59 | }
60 |
--------------------------------------------------------------------------------
/src/logseq/block-ui.ts:
--------------------------------------------------------------------------------
1 | import Beta from "../algorithm/beta";
2 | import { IncrementalBlock } from "../types";
3 | import { dateDiffInDays, todayMidnight } from "../utils/datetime";
4 |
5 | const sepDiv = ``;
9 |
10 | export function generateIbUI(ib: IncrementalBlock): string {
11 |
12 | // Priority
13 | const beta = Beta.fromParams(ib.betaParams);
14 | const mean = (beta.mean * 100).toFixed(2);
15 | const std = (beta.std() * 100).toFixed(1);
16 | const dueDays = ib.scheduling && dateDiffInDays(
17 | todayMidnight(), new Date(ib.scheduling.dueDate));
18 | let priorityHtml = `${sepDiv}${mean}%`;
19 | if (ib.sample && (dueDays ?? 1) <= 0) {
20 | priorityHtml += ` [${(ib.sample * 100).toFixed(2)}%]`;
21 | }
22 | priorityHtml += '
';
23 |
24 | // Scheduling
25 | let scheduleHtml = '';
26 | if (dueDays) {
27 | scheduleHtml = `
28 | ${sepDiv}
29 |
30 | ${dueDays}d
31 |
32 | `;
33 | }
34 |
35 | // Document extract
36 | let extractHtml = '';
37 | if (!ib.extractData) {
38 | } else if ('readpoint' in ib.extractData) {
39 | console.log(ib);
40 | extractHtml = `
41 | ${sepDiv}
42 |
52 | `;
53 | }
54 |
55 | const id = logseq.baseInfo.id;
56 | let html = `
57 |
69 | ${extractHtml}
70 | `;
71 | return html;
72 | }
73 |
--------------------------------------------------------------------------------
/src/logseq/blockrender.ts:
--------------------------------------------------------------------------------
1 | import { ibFromUuid } from "../ib/read";
2 | import { IncrementalBlock } from "../types";
3 | import { generateIbUI } from "./block-ui";
4 |
5 | const BLOCK_OBSERVERS = new Map
38 | ${priorityHtml}
39 |
40 | `;
41 |
42 | let scheduleHtml = '';
43 | if (ib.dueDate) {
44 | const diff = dateDiffInDays(new Date(), ib.dueDate);
45 | scheduleHtml = `
46 |
47 | ${diff}d
48 |
49 | `;
50 | }
51 |
52 | let repHtml = '';
53 | const current = store.getState().learn.current;
54 | if (current && current.ib.uuid == ib.uuid) {
55 | repHtml = `
56 |
62 | `;
63 | }
64 |
65 | const dark = await isDark();
66 | logseq.provideUI({
67 | //key: `ib__${slot}`,
68 | slot,
69 | //reset: true,
70 | template: `
71 |
72 |
84 |
85 | `
86 | });
87 | }
88 |
--------------------------------------------------------------------------------
/src/logseq/nav.ts:
--------------------------------------------------------------------------------
1 | import { PLUGIN_ROUTE } from "../globals";
2 | import { AppStore } from "../state/store";
3 | import { MainView, toggleMainView } from "../state/viewSlice";
4 |
5 | let store: AppStore;
6 | export const injectStore = (_store: AppStore) => {
7 | store = _store
8 | }
9 |
10 | function setupNavLink() {
11 | const navDiv = document.createElement('div');
12 | navDiv.innerHTML = `
13 |
14 |
15 |
16 | Incremental blocks
17 | `;
18 | navDiv.className = `inc-blocks-nav`;
19 | navDiv.addEventListener('click', (e) => {
20 | e.preventDefault();
21 | if (store.getState().view.main?.view != MainView.main) {
22 | store.dispatch(toggleMainView({ view: MainView.main }));
23 | }
24 | });
25 |
26 | const navHeader = window.parent.document.querySelector('.nav-header');
27 | if (navHeader) {
28 | const nav = navHeader.querySelector('.inc-blocks-nav');
29 | if (nav) navHeader.removeChild(nav);
30 | navHeader.insertBefore(navDiv, navHeader.lastChild);
31 | }
32 | };
33 |
34 | function setupRouteHandler() {
35 | logseq.App.onRouteChanged((e) => {
36 | console.log(e.path);
37 | if (e.path === PLUGIN_ROUTE) {
38 | if (store.getState().view.main?.view != MainView.main) {
39 | store.dispatch(toggleMainView({ view: MainView.main }));
40 | }
41 | } else {
42 | store.dispatch(toggleMainView({ view: null }));
43 | }
44 | });
45 | }
46 |
47 | export async function setupNav() : Promise
25 |
30 |
65 | );
66 | }
67 |
--------------------------------------------------------------------------------
/src/main/IntervalView.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { useAppDispatch, useAppSelector } from "../state/hooks";
3 | import { selectInterval } from "./mainSlice";
4 | import Select from "../widgets/Select";
5 | import { equalities, Equality } from "../types";
6 |
7 | export default function IntervalView() {
8 | const dispatch = useAppDispatch();
9 | const busy = useAppSelector(state => state.main.busy);
10 | const interval = useAppSelector(state => state.main.filters.interval);
11 | const equality = useAppSelector(state => state.main.filters.intervalEq);
12 |
13 | function intervalSelected(val: number | null) {
14 | if (val != null && (Number.isNaN(val) || val < 0)) return;
15 | dispatch(selectInterval({ interval: val }));
16 | }
17 |
18 | return (
19 |
31 | {
35 | const collection = collections[i];
36 | const opened = openedCollections.includes(i);
37 | return (
38 |
63 |
64 | dispatch(toggleCollections([i]))}
41 | >
42 |
48 |
49 | {collection.name} ({collection.pageIds.length} pages, {collection.count} ibs)
50 |
51 |
52 | );
53 | }}
54 | itemContent={(i, iCollection) => {
55 | const openSum = openedCollectionCounts.slice(0, iCollection).reduce((s, x) => s + x, 0);
56 | const indexWithinCollection = i - openSum;
57 | const collectionIbs = loadedIbs[iCollection.toString()];
58 | if (!collectionIbs) return Something went wrong;
59 | const ib = collectionIbs[indexWithinCollection];
60 | return
20 |
29 | {interval && (
30 |
49 | );
50 | }
51 |
--------------------------------------------------------------------------------
/src/main/MainWindow.tsx:
--------------------------------------------------------------------------------
1 | import React, { useMemo, useRef } from "react";
2 | import { useAppDispatch, useAppSelector } from "../state/hooks";
3 | import { gotBusy, refreshAll } from "./mainSlice";
4 | import IbsView from "./IbsView";
5 | import { startLearning } from "../learn/learnSlice";
6 | import { queryIncrementalBlocks } from "../logseq/query";
7 | import { db } from "../db";
8 | import DueDateView from "./DueDateView";
9 | import RefsView from "./RefsView";
10 | import { EditorView, ModalView, setEditorView, setModalView } from "../state/viewSlice";
11 | import IntervalView from "./IntervalView";
12 |
13 |
14 | export default function MainWindow() {
15 | const ref = useRef
31 |
47 | )}
48 |
59 |
102 | );
103 | }
104 |
105 | function SelectionActions() {
106 | const dispatch = useAppDispatch();
107 | const busy = useAppSelector((state) => state.main.busy);
108 | const collections = useAppSelector(state => state.main.collections);
109 | const totalIbs = useMemo(() => collections.reduce((s, c) => s + c.count, 0), [collections]);
110 |
111 | if (totalIbs == 0) return <>;
112 |
113 | return (
114 | <>
115 |
116 | Subset selection: {totalIbs}
117 |
118 |
125 |
126 |
133 |
134 | );
135 | }
136 |
--------------------------------------------------------------------------------
/src/main/Postpone.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import { useAppDispatch, useAppSelector } from "../state/hooks";
3 | import { postponeSelected } from "./mainSlice";
4 | import { setModalView } from "../state/viewSlice";
5 |
6 | export default function Postpone() {
7 | const dispatch = useAppDispatch();
8 | const [start, setStart] = useState
60 |
67 |
68 |
69 |
70 |
90 |
91 |
92 |
101 |
93 |
97 |
98 |
100 |
19 |
57 | );
58 | }
59 |
--------------------------------------------------------------------------------
/src/main/RefsView.tsx:
--------------------------------------------------------------------------------
1 | import { useMemo, useRef } from "react";
2 | import { useAppDispatch, useAppSelector } from "../state/hooks";
3 | import useCalculateHeight from "../hooks/useCalculateHeight";
4 | import React from "react";
5 | import { toggleRef, toggleRefMode } from "./mainSlice";
6 |
7 | export default function RefsView() {
8 | const dispatch = useAppDispatch();
9 | const ref = useRefPostpone review randomly between the following range:
20 |
21 |
56 |
22 | setStart(parseFloat(e.target.value))}
27 | step="1"
28 | disabled={busy}
29 | />
30 | d
31 |
32 |
33 | -
34 |
35 |
36 | setEnd(parseFloat(e.target.value))}
41 | step="1"
42 | disabled={busy}
43 | />
44 | d
45 |
46 |
47 |
55 |
22 | {selected.map(ref => (
23 |
30 | ))}
31 |
32 |
33 | );
34 |
35 | return (
36 | 32 |
37 |
49 | {selected.length > 0 && selectedView} 50 |
65 | );
66 | }
67 |
--------------------------------------------------------------------------------
/src/medx/ExtractionView.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { useAppDispatch, useAppSelector } from "../state/hooks";
3 | import { extract, intervalChanged, mediaAttrsChanged, noteChanged, priorityChanged } from "./medxSlice";
4 | import Beta from "../algorithm/beta";
5 | import PrioritySlider from "../widgets/PrioritySlider";
6 |
7 | export default function ExtractionView() {
8 | return (
9 |
38 | Tags
39 |
47 |
48 | 49 | {selected.length > 0 && selectedView} 50 |
51 |
64 | -
52 | {unselected.map(ref => (
53 |
- 54 | 60 | 61 | ))} 62 |
10 |
16 | );
17 | }
18 |
19 | function MediaAttributesPanel() {
20 | const dispatch = useAppDispatch();
21 | const mediaAttrs = useAppSelector(state => state.medx.mediaAttrs);
22 |
23 | return (
24 |
11 |
14 |
25 |
33 |
45 |
57 |
58 | );
59 | }
60 |
61 | function NotePanel() {
62 | const ref = React.useRef