diff --git a/docs/implementation.md b/docs/implementation.md index c8c516b..4599079 100644 --- a/docs/implementation.md +++ b/docs/implementation.md @@ -1094,11 +1094,15 @@ same effective style is applied to rare SVG endpoint bridges so an off-grid anchor cannot introduce a visible style seam. Browser coverage checks 30m-on-5m and native 30m rendering separately. -Sloped manual lines also stop propagating upward: a 30m line is available on -30m and lower charts but hidden on 1h/1d. This is a display filter only; the -drawing remains loaded and flat price levels remain visible everywhere. The -daily-chart regression creates a real 30m drawing, confirms it is rendered on -the lower chart, switches to 1d, and requires only its series to disappear. +Drawing objects also stop propagating upward by default: a 30m trendline, price +level, Fibonacci drawing, comment, or symbol is available on 30m and lower +charts but hidden on 1h/1d. **Hide lower-TF drawings** in Config persists this +display preference in `localStorage`, defaults on, and can restore every drawing +without changing backend data or alert behavior. New price levels, comments, +and symbols now save the creation timeframe; older price levels were historically +stored as 1d and therefore remain global because their original timeframe is +unknowable. Integration coverage creates all four non-trendline drawing types, +switches to 1d, and verifies the setting hides and restores them together. ### 2026-08-15 — 1m zoom-out died at ~1am because the socket sent 1,000 bars diff --git a/docs/plan.md b/docs/plan.md index ac71ef7..ba469ea 100644 --- a/docs/plan.md +++ b/docs/plan.md @@ -122,10 +122,11 @@ if your parser doesn't filter those, that fixture will catch it. 1d base chart + THE DAILY MAs weight 16 ← a switchable base timeframe ``` -Derived levels and flat price levels stay visible on every base timeframe — the -200DMA on a 1-minute chart is the point, not a side effect. Sloped manual -trendlines are visible on their attributed timeframe and lower charts, but not -on higher charts: 30m structure belongs on 30m/15m/5m/1m, not on 1h or 1d. +Derived overlays stay visible on every base timeframe — the 200DMA on a 1-minute +chart is the point, not a side effect. Drawing objects follow one configurable +rule: visible on their attributed timeframe and lower charts, but not on higher +charts. Thus 30m trendlines, levels, Fibonacci drawings, comments, and symbols +belong on 30m/15m/5m/1m, not on 1h or 1d. --- @@ -919,9 +920,9 @@ LAYERS ☐ Hidden levels still count toward confluence ``` -- **Derived and flat levels stay across base timeframes.** A 200DMA is equally - valid on a 1m chart. Sloped manual trendlines are the exception: hide them - above their attributed timeframe while retaining them on native/lower charts. +- **Derived overlays stay across base timeframes.** A 200DMA is equally valid on + a 1m chart. Drawing objects default to native/lower charts only. The persisted + Config setting **Hide lower-TF drawings** can restore all drawings everywhere. - **The group checkbox is a master toggle** — unchecking "Daily MAs" hides all five at once; individual periods nest under it. - The colour swatch beside each timeframe is that timeframe's hue, used identically on diff --git a/static/app.js b/static/app.js index 891d50f..11ce816 100644 --- a/static/app.js +++ b/static/app.js @@ -151,6 +151,7 @@ createApp({ const animateCurrentPrice = ref(localStorage.getItem('chart-animate-current-price') !== 'false'); const autoScrollLivePrice = ref(localStorage.getItem('chart-auto-scroll-live-price') !== 'false'); const extraDetail = ref(localStorage.getItem('chart-extra-detail') === 'true'); + const hideLowerTfDrawings = ref(localStorage.getItem('chart-hide-lower-tf-drawings') !== 'false'); const optionPrefs = (() => { try { return JSON.parse(localStorage.getItem('chart-es-options')) || {}; } catch { return {}; } @@ -721,14 +722,24 @@ createApp({ comments.value = (payload.drawings || []).filter(item => ['comment', 'symbol'].includes(item.kind)); fibs.value = (payload.drawings || []).filter(item => item.kind === 'fibonacci'); syncComments(); - if (chartApi) chartApi.setFibs(prefs.value.enabled.drawings - ? fibs.value.filter(item => !item.hidden) : []); + syncFibs(); + } + + function drawingVisible(item) { + return !hideLowerTfDrawings.value + || ConfluenceChart.drawingVisibleOn(item, timeframe.value); + } + + function syncFibs() { + if (!chartApi) return; + chartApi.setFibs(prefs.value.enabled.drawings + ? fibs.value.filter(item => !item.hidden && drawingVisible(item)) : []); } function syncComments() { if (!chartApi) return; const visible = prefs.value.enabled.drawings - ? comments.value.filter(item => !item.hidden) + ? comments.value.filter(item => !item.hidden && drawingVisible(item)) : []; chartApi.setComments(visible); } @@ -829,7 +840,7 @@ createApp({ pinned: !commentFloat.value, anchor_t: result.time ?? null, anchor_p: result.price ?? null, - x: result.x, y: result.y, + x: result.x, y: result.y, tf: timeframe.value, }), }); if (!response.ok) { @@ -850,6 +861,7 @@ createApp({ body: JSON.stringify({ text: choice.name, icon, color: symbolColor.value, scale: symbolScale.value, pinned: true, anchor_t: result.time, anchor_p: result.price, x: result.x, y: result.y, + tf: timeframe.value, }), }); if (!response.ok) { @@ -994,7 +1006,7 @@ createApp({ body: JSON.stringify({ price: alertPrice.value, note: alertNote.value, color: levelColor.value, line_width: levelWidth.value, - alert_early_points: alertEarlyPoints.value, + alert_early_points: alertEarlyPoints.value, tf: timeframe.value, }), }); if (!response.ok) { console.error(`Unable to add price alert: HTTP ${response.status}`); return; } @@ -1339,6 +1351,9 @@ createApp({ function selectTimeframe(tf) { timeframe.value = tf; prefs.value.base_tf = tf; + syncVisibleLevels(); + syncComments(); + syncFibs(); if (socket?.readyState === WebSocket.OPEN) { socket.send(JSON.stringify({ type: 'subscribe', tf })); } @@ -1348,7 +1363,7 @@ createApp({ if (level.kind === 'ma') return (prefs.value.enabled.ma[level.tf] || []).includes(level.period); if (level.kind === 'manual') { return prefs.value.enabled.drawings && prefs.value.enabled.manual - && ConfluenceChart.manualLevelVisibleOn(level, timeframe.value); + && drawingVisible(level); } if (level.kind === 'horizontal') return prefs.value.enabled.horizontal; if (level.kind === 'vwap') return prefs.value.enabled.vwap; @@ -1408,8 +1423,7 @@ createApp({ syncVisibleLevels(); syncComments(); if (chartApi) chartApi.setRthEnabled(prefs.value.enabled.rth); - if (chartApi) chartApi.setFibs(prefs.value.enabled.drawings - ? fibs.value.filter(item => !item.hidden) : []); + syncFibs(); sendPrefs(); }, { deep: true }); @@ -1475,6 +1489,13 @@ createApp({ localStorage.setItem('chart-extra-detail', String(value)); }); + watch(hideLowerTfDrawings, value => { + localStorage.setItem('chart-hide-lower-tf-drawings', String(value)); + syncVisibleLevels(); + syncComments(); + syncFibs(); + }); + onMounted(async () => { chartApi = new ConfluenceChart(); // Deliberate debug handle. Chart geometry bugs are invisible from the @@ -1518,6 +1539,6 @@ createApp({ window.removeEventListener('keydown', handleKeydown); }); - return { status, price, sessionOpen, quoteChange, animateCurrentPrice, autoScrollLivePrice, extraDetail, barAge, dataUpdatedAt, buildStamp, timeframe, timeframes, drawingColors, drawingColorRows, drawingColorName, colorRowLabels, symbolChoices, selectedSymbol, symbolColor, symbolScale, symbolScales, symbolPanelOpen, prefs, clusters, clustersByPrice, events, eventsMore, loadOlderEvents, diagnosticMode, captureBusy, captureDiagnostic, armedTool, drawName, drawColor, drawWidth, drawSide, snap, selectedDrawing, selectedDrawings, drawingList, startDrawingListResize, manualLines, hasDrawingSelection, allShownSelected, selectedAreHidden, alertPrice, alertNote, alertEarlyPoints, levelColor, levelWidth, addPriceAlert, armTool, selectTimeframe, allEnabled, toggleGroup, maValue, maAlertOn, toggleMaAlert, deleteSelected, deleteLine, toggleDrawingSelection, toggleSelectAll, toggleSelectedVisibility, renameLine, updateLineStyle, updateLevelNumber, setArmed, commentText, commentFloat, comments, drawings, filteredDrawings, drawingFilter, drawingKind, drawingTf, deleteDrawing, toggleComment, togglePinned, chooseSymbol, toggleSymbolPanel, startSymbolDrag, dropSymbol, optionExpirations, optionExpiryId, optionSide, optionMode, optionMin, optionMax, optionContracts, optionUnderlying, optionBusy, optionError, optionSearched, optionCopied, onOptionsToggle, searchOptions, copyOption, canUndo, undoTitle, undo }; + return { status, price, sessionOpen, quoteChange, animateCurrentPrice, autoScrollLivePrice, extraDetail, hideLowerTfDrawings, barAge, dataUpdatedAt, buildStamp, timeframe, timeframes, drawingColors, drawingColorRows, drawingColorName, colorRowLabels, symbolChoices, selectedSymbol, symbolColor, symbolScale, symbolScales, symbolPanelOpen, prefs, clusters, clustersByPrice, events, eventsMore, loadOlderEvents, diagnosticMode, captureBusy, captureDiagnostic, armedTool, drawName, drawColor, drawWidth, drawSide, snap, selectedDrawing, selectedDrawings, drawingList, startDrawingListResize, manualLines, hasDrawingSelection, allShownSelected, selectedAreHidden, alertPrice, alertNote, alertEarlyPoints, levelColor, levelWidth, addPriceAlert, armTool, selectTimeframe, allEnabled, toggleGroup, maValue, maAlertOn, toggleMaAlert, deleteSelected, deleteLine, toggleDrawingSelection, toggleSelectAll, toggleSelectedVisibility, renameLine, updateLineStyle, updateLevelNumber, setArmed, commentText, commentFloat, comments, drawings, filteredDrawings, drawingFilter, drawingKind, drawingTf, deleteDrawing, toggleComment, togglePinned, chooseSymbol, toggleSymbolPanel, startSymbolDrag, dropSymbol, optionExpirations, optionExpiryId, optionSide, optionMode, optionMin, optionMax, optionContracts, optionUnderlying, optionBusy, optionError, optionSearched, optionCopied, onOptionsToggle, searchOptions, copyOption, canUndo, undoTitle, undo }; }, }).mount('#app'); diff --git a/static/chart.js b/static/chart.js index 4073832..eca3400 100644 --- a/static/chart.js +++ b/static/chart.js @@ -1250,9 +1250,10 @@ class ConfluenceChart { return level.kind === 'ma' || level.kind === 'vwap' || level.kind === 'horizontal'; } - static manualLevelVisibleOn(level, displayedTf) { - if (level.kind !== 'manual' || ConfluenceChart.isFlat(level)) return true; - return ConfluenceChart.tfRank[level.tf] >= ConfluenceChart.tfRank[displayedTf]; + static drawingVisibleOn(drawing, displayedTf) { + const drawingRank = ConfluenceChart.tfRank[drawing?.tf]; + const displayedRank = ConfluenceChart.tfRank[displayedTf]; + return drawingRank == null || displayedRank == null || drawingRank >= displayedRank; } manualLineDisplayStyle(level) { diff --git a/static/index.html b/static/index.html index 99b6401..e2baece 100644 --- a/static/index.html +++ b/static/index.html @@ -76,6 +76,7 @@ Config +
diff --git a/tests/e2e/drawings.test.mjs b/tests/e2e/drawings.test.mjs index 28d6250..1394f8d 100644 --- a/tests/e2e/drawings.test.mjs +++ b/tests/e2e/drawings.test.mjs @@ -4,6 +4,68 @@ import { withChart, chartBox, at, armTool, drawingIds, assertNoPageErrors, } from './helpers.mjs'; +test('the timeframe visibility setting governs every drawing type', + { timeout: 180000 }, async () => { + await withChart(async page => { + const ids = await page.evaluate(async () => { + const bars = (await (await fetch('/api/bars?tf=30m&limit=2')).json()).bars; + const [first, second] = bars; + const post = async (url, body) => (await fetch(url, { + method: 'POST', headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify(body), + })).json(); + const comment = await post('/api/comments', { + text: `tf comment ${Date.now()}`, tf: '30m', pinned: true, + anchor_t: first.t, anchor_p: first.c, + }); + const symbol = await post('/api/comments', { + text: 'TF symbol', icon: 'skull', tf: '30m', pinned: true, + anchor_t: first.t, anchor_p: first.c, + }); + const fib = await post('/api/lines', { + kind: 'fibonacci', tf: '30m', side: 'support', + anchor_t: first.t, anchor_p: first.l, end_t: second.t, end_p: second.h, + }); + const level = await post('/api/lines/price', { + tf: '30m', price: first.c, note: `tf level ${Date.now()}`, + }); + return { comment: comment.id, symbol: symbol.id, fib: fib.id, level: level.id }; + }); + + await page.reload({ waitUntil: 'networkidle' }); + await page.waitForFunction(() => window.__chart?.bars?.length > 0); + const allVisible = expected => page.waitForFunction(([values, visible]) => { + const chart = window.__chart; + const comments = chart.comments.some(item => item.id === values.comment) + && chart.comments.some(item => item.id === values.symbol); + const fib = chart.fibs.some(item => item.id === values.fib); + const level = chart.priceLines.has(values.level); + return visible ? comments && fib && level : !comments && !fib && !level; + }, [ids, expected]); + await allVisible(true); + + await page.click('.timeframes button:text-is("1d")'); + await page.waitForFunction(() => window.__chart.bars[0]?.tf === '1d'); + await allVisible(false); + + await page.locator('.config-section summary').click(); + const setting = page.locator('.config-section label:has-text("Hide lower-TF drawings") input'); + assert.equal(await setting.isChecked(), true, 'timeframe filtering does not default on'); + await setting.uncheck(); + await allVisible(true); + assert.equal(await page.evaluate(() => localStorage.getItem('chart-hide-lower-tf-drawings')), + 'false', 'the Config choice was not persisted'); + await page.reload({ waitUntil: 'networkidle' }); + await page.waitForFunction(() => window.__chart?.bars?.length > 0); + await page.locator('.config-section summary').click(); + assert.equal(await page.locator( + '.config-section label:has-text("Hide lower-TF drawings") input').isChecked(), false, + 'the Config choice reset on reload'); + await allVisible(true); + assertNoPageErrors(page, assert); + }); + }); + test('editing a drawing name with Backspace or Delete cannot delete the drawing', { timeout: 180000, diff --git a/tests/e2e/trendline.test.mjs b/tests/e2e/trendline.test.mjs index 00e204d..ae052a7 100644 --- a/tests/e2e/trendline.test.mjs +++ b/tests/e2e/trendline.test.mjs @@ -383,13 +383,17 @@ test('a lower-timeframe trendline is hidden from the daily chart', const state = await page.evaluate(async id => ({ drawingStillStored: (await (await fetch('/api/drawings')).json()).drawings .some(drawing => drawing.id === id), - flatLevelVisible: ConfluenceChart.manualLevelVisibleOn( + flatLevelVisible: ConfluenceChart.drawingVisibleOn( { kind: 'manual', slope: 0, tf: '30m' }, '1d', ), }), created.id); assert.equal(state.drawingStillStored, true, 'daily filtering deleted the drawing state'); - assert.equal(state.flatLevelVisible, true, 'daily filtering hid a flat price level'); + assert.equal(state.flatLevelVisible, false, 'a lower-TF flat level bypassed the general rule'); + + await page.locator('.config-section summary').click(); + await page.locator('.config-section label:has-text("Hide lower-TF drawings") input').uncheck(); + await page.waitForFunction(id => window.__chart.levelSeries.has(id), created.id); assertNoPageErrors(page, assert); }); });