From 46a379febad340a1f14ffb946ba2612dca86a6da Mon Sep 17 00:00:00 2001
From: Ben <Bendavcorr@Gmail.com>
Date: Sun, 6 Apr 2025 22:05:16 +0100
Subject: [PATCH 1/2] prototype feature

---
 src/components/DroppedPattern.tsx        | 135 ++++++++++++-
 src/components/IndividualNoteSection.tsx | 101 ++++++++++
 src/components/LaneEditingPanel.tsx      |  19 +-
 src/components/LanePatternDisplay.tsx    |  39 ++--
 src/components/PatternDropZone.tsx       | 137 ++++++++++++-
 src/components/styles/homepage.css       |  27 ++-
 src/scripts/Lane.ts                      | 246 ++++++++++++++++++++---
 src/scripts/Note.ts                      |   4 +-
 src/scripts/Utils.ts                     |   8 +-
 src/scripts/main.ts                      |  96 ++++++---
 10 files changed, 713 insertions(+), 99 deletions(-)
 create mode 100644 src/components/IndividualNoteSection.tsx

diff --git a/src/components/DroppedPattern.tsx b/src/components/DroppedPattern.tsx
index c32d508..f516fe1 100644
--- a/src/components/DroppedPattern.tsx
+++ b/src/components/DroppedPattern.tsx
@@ -1,18 +1,141 @@
-import React from 'react'
+import React, { ChangeEvent, useEffect, useRef, useState } from 'react'
 import Lane from '../scripts/Lane';
+import { supabase } from '../scripts/supa-client';
+import { retrieveBucketData } from '../scripts/main';
 
 interface IDroppedPatternProps {
     lane: Lane;
     name: string; 
-    measures: number;
+    occurances: number;
+    unmount: () => void; 
+    setMessage: React.Dispatch<React.SetStateAction<string>>;
+    topPatternMeasureRef: React.RefObject<number[][]>; 
 }
 
-const DroppedPattern: React.FC<IDroppedPatternProps> = ({ name, measures }) => {
+
+const DroppedPattern: React.FC<IDroppedPatternProps> = ({ lane, name, occurances, unmount, setMessage, topPatternMeasureRef }) => {
+    let startMeasureRef = useRef(0);
+    const [startMeasure, setStartMeasure] = useState(0); 
+
+    let patternIndex = useRef(0); 
+
+    let currentOccurances = useRef(occurances);
+    const [occuranceState, setOccuranceState] = useState(currentOccurances.current);
+
+    let dataRef = useRef(Object); 
+
+    const patternStartMeasureChange = (e: number) => {
+        // console.log('changed to ', e); 
+        if(e <= startMeasureRef.current) {
+            console.log('pattern is gone');
+            topPatternMeasureRef.current.splice(patternIndex.current, 1);
+            unmount();
+        } 
+        console.log(startMeasureRef.current - e);
+    }
+    
+
+    const measureChange = (startMeasure: number, measureDifference: number) => {
+        console.log(`measure difference ${measureDifference}`);
+        
+        if(measureDifference < 0) {
+            if(startMeasure == startMeasureRef.current) {
+                currentOccurances.current += measureDifference;
+                setOccuranceState(currentOccurances.current);
+                console.log(currentOccurances);
+
+            } else if(startMeasure < startMeasureRef.current) {
+                startMeasureRef.current = startMeasureRef.current + measureDifference;
+                setStartMeasure(startMeasureRef.current + 1);
+            }
+        } else if(startMeasure < startMeasureRef.current) {
+            startMeasureRef.current += measureDifference;
+            setStartMeasure(startMeasureRef.current + 1);
+        }
+
+        topPatternMeasureRef.current[patternIndex.current] = [startMeasureRef.current, currentOccurances.current];
+    }
+
+    const onDeleteClick = () => {
+        lane.reducePatternOccuances(startMeasureRef.current, currentOccurances.current, 0); 
+        topPatternMeasureRef.current.splice(patternIndex.current, 1);
+        unmount(); 
+
+        // .push([startMeasureRef.current, currentOccurances.current]);
+    }
+
+    const onReloadClick = () => {
+        console.log(startMeasureRef.current);
+        lane.increasePatternOccurances(startMeasureRef.current, currentOccurances.current, currentOccurances.current, dataRef.current)
+    }
+    
+    const onOccuranceInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+        let newOccurances = parseInt(e.target.value); 
+        let code = 0; 
+
+        if(newOccurances < currentOccurances.current) {
+            lane.reducePatternOccuances(startMeasureRef.current, currentOccurances.current, newOccurances);
+        } else {
+            code = lane.increasePatternOccurances(startMeasureRef.current, currentOccurances.current, newOccurances, dataRef.current);
+            console.log(code);
+        }
+
+        console.log('code ', code);
+        if(code == 0) {
+            currentOccurances.current = newOccurances;
+            setOccuranceState(currentOccurances.current);
+
+            topPatternMeasureRef.current[patternIndex.current] = [startMeasureRef.current, currentOccurances.current];
+        } else 
+            e.target.value = currentOccurances.current.toString();
+    }
+    
+    async function loadPattern() {
+        // TODO: Allow for local loading. 
+        const userId = (await supabase.auth.getUser()).data.user?.id as string;
+        let patternData = await retrieveBucketData('patterns', `${userId}/${name}`);
+        dataRef.current = patternData; 
+
+        console.log(patternData);
+        if(lane.loadPattern(patternData, currentOccurances.current) == -1) {
+            setMessage('will overflow')
+            unmount();
+        } 
+        
+    }
+    
+    useEffect(() => {        
+        loadPattern(); 
+        lane.onPatternStartChange(patternStartMeasureChange);
+        lane.onPatternChange(measureChange);
+        
+        startMeasureRef.current = lane.patternStartMeasure; 
+        setStartMeasure(startMeasureRef.current + 1);
+
+        topPatternMeasureRef.current.push([startMeasureRef.current, currentOccurances.current]);
+        patternIndex.current = topPatternMeasureRef.current.length - 1; 
+        
+        return () => {
+            console.log('unmounting')
+            lane.removePatternStartChange(patternStartMeasureChange);
+            lane.removeOnPatternChange(measureChange);
+        }
+    }, []);
+    
     return (<div className='dropped_pattern'>
         {name}
-        <input type="number" min={1} defaultValue={measures} />
-        <button>delete</button>
-        
+        <input type="number" min={1} defaultValue={occurances} onChange={onOccuranceInputChange}/>
+        <button onClick={onDeleteClick}>delete</button>
+        <button onClick={onReloadClick}>reload</button>
+
+        <div>{`Measures ${startMeasure} - ${startMeasure + occuranceState - 1}`}</div>
+
+        { startMeasureRef.current > 0 && 
+        <div className="spacer_container">
+            <div className="spacer"></div>
+            <div className="spacer"></div>
+        </div>
+        }
     </div>)
 }
 
diff --git a/src/components/IndividualNoteSection.tsx b/src/components/IndividualNoteSection.tsx
new file mode 100644
index 0000000..72e247a
--- /dev/null
+++ b/src/components/IndividualNoteSection.tsx
@@ -0,0 +1,101 @@
+import React, { useEffect, useRef, useState } from 'react'
+import Lane from '../scripts/Lane';
+
+interface IndividualNoteSectionProps {
+    lane: Lane;
+    unmount: () => void; 
+    setMessage: React.Dispatch<React.SetStateAction<string>>;
+    individualNotesSectionRef: React.RefObject<number[][]>; 
+    index: number; 
+}
+
+const IndividualNoteSection: React.FC<IndividualNoteSectionProps> = ({ lane, setMessage, unmount, individualNotesSectionRef, index }) => {
+    
+
+    let startMeasureRef = useRef(0);
+    const [startMeasure, setStartMeasure] = useState(0); 
+    const [endMeasure, setEndMeasure] = useState(0); 
+
+    let statsRef = useRef<number[]>([]);
+
+    const patternStartMeasureChange = (e: number) => {
+        // console.log('changed to ', e); 
+        if(e <= startMeasureRef.current) {
+            console.log('pattern is gone');
+
+            let currentIndex = individualNotesSectionRef.current.indexOf(statsRef.current); 
+            individualNotesSectionRef.current.splice(currentIndex, 1); 
+            unmount(); 
+        } 
+        console.log(startMeasureRef.current - e);
+    }
+
+    const measureChange = (startMeasure: number, measureDifference: number) => {
+        console.debug('measureChange from notes', startMeasure, measureDifference);
+
+        if(measureDifference < 0 && startMeasure < startMeasureRef.current) {
+            
+            startMeasureRef.current = startMeasureRef.current + measureDifference;
+            statsRef.current[0] = startMeasureRef.current;
+
+            // individualNotesSectionRef.current[index][0] = startMeasureRef.current;
+            
+
+            setStartMeasure(startMeasureRef.current + 1);
+            setEndMeasure(startMeasureRef.current + statsRef.current[1]);
+
+            
+        } else if(startMeasure < startMeasureRef.current) {
+            console.log('in here', startMeasureRef.current)
+
+            startMeasureRef.current += measureDifference;
+            statsRef.current[0] = startMeasureRef.current;
+
+            console.log('in here', startMeasureRef.current)
+            setStartMeasure(startMeasureRef.current + 1);
+            setEndMeasure(startMeasureRef.current + statsRef.current[1]);
+        }
+
+        console.debug('measureChange from notes after', statsRef.current);
+
+    }
+
+    const onDeleteClick = () => {
+        console.log(`index ${index}`);
+        console.log('from delete click', statsRef.current, statsRef.current[1]);
+        lane.reducePatternOccuances(startMeasureRef.current, statsRef.current[1], 0); 
+
+        let currentIndex = individualNotesSectionRef.current.indexOf(statsRef.current); 
+        individualNotesSectionRef.current.splice(currentIndex, 1); 
+        unmount(); 
+
+    }
+    
+    useEffect(() => {
+        lane.onPatternChange(measureChange);
+        lane.onPatternStartChange(patternStartMeasureChange); 
+
+        statsRef.current = individualNotesSectionRef.current[index]; 
+
+
+        startMeasureRef.current = statsRef.current[0]; 
+        setStartMeasure(startMeasureRef.current + 1);
+
+        console.log(statsRef.current);
+
+        setEndMeasure(statsRef.current[0] + statsRef.current[1]);
+
+        console.log(individualNotesSectionRef.current);
+    }, []);
+    
+    return (
+    <div className="individual_note_section">
+        
+        <div>IndividualNoteSection</div>
+        <div>{`Measures ${startMeasure} - ${endMeasure}`}</div>
+        <button onClick={onDeleteClick}>delete</button>
+
+    </div>)
+}
+
+export default IndividualNoteSection
\ No newline at end of file
diff --git a/src/components/LaneEditingPanel.tsx b/src/components/LaneEditingPanel.tsx
index 44063bc..394b2d5 100644
--- a/src/components/LaneEditingPanel.tsx
+++ b/src/components/LaneEditingPanel.tsx
@@ -104,7 +104,7 @@ const LaneEditingPanel: React.FC<ILaneEditingPanelProps> = ({ canvas }) => {
       return; 
 
     // TODO: Keep next measure index updated while adding notes in individual mode so this isn't necessary
-    lane.notes = [];
+    // lane.notes = [];
 
     setEditMode('pattern');
     changeEditMode(EDIT_MODES.PATTERN_MODE);
@@ -147,7 +147,10 @@ const LaneEditingPanel: React.FC<ILaneEditingPanelProps> = ({ canvas }) => {
     lane.measureCount = newMC;
     event.target.value = newMC.toString(); 
     
-    lane.patternStartMeasure = 0;
+    // lane.patternStartMeasure = 0;
+
+    if(newMC - 1 < lane.patternStartMeasure)
+      lane.setPatternStartMeasure(newMC); 
        
     lane.recalculateHeight();
     lane.cullOutOfBoundsNotes();
@@ -171,13 +174,14 @@ const LaneEditingPanel: React.FC<ILaneEditingPanelProps> = ({ canvas }) => {
     }
 
     setCanRepeat(lane.getRatio() < longest_lane.getRatio()); 
+    saveCurrentSessionLocally();
     drawSingleLane(lane);
   }
 
   const onRepeatClick = () => {
     if(!repeated) {
-      if(lane.notes.length > 0) 
-        lane.repeatNotes();
+      // if(lane.notes.length > 0) 
+      lane.repeatNotes();
     } else {
       // Lane has already been repeated. Toggle repeating off
       lane.unrepeatNotes();   
@@ -362,6 +366,8 @@ const LaneEditingPanel: React.FC<ILaneEditingPanelProps> = ({ canvas }) => {
             let newValue = parseInt(event.target.value);
             lane.subdivision = newValue;
             lane.notes = [];
+            // lane.patternStartMeasure = 0; 
+            lane.setPatternStartMeasure(0); 
             lane.translationAmount = 0;
             // TODO: Review this
             lane.recalculateNoteGap(); 
@@ -379,6 +385,7 @@ const LaneEditingPanel: React.FC<ILaneEditingPanelProps> = ({ canvas }) => {
             <option value="9" selected={(lane.subdivision == 9) ? true : false}>9</option>
             <option value="10" selected={(lane.subdivision == 10) ? true : false}>10</option>
             <option value="11" selected={(lane.subdivision == 11) ? true : false}>11</option>
+            <option value="16" selected={(lane.subdivision == 16) ? true : false}>16</option>
         </select>
         <label htmlFor="subdivision_select">Subdivision</label>
       </div>
@@ -461,10 +468,12 @@ const LaneEditingPanel: React.FC<ILaneEditingPanelProps> = ({ canvas }) => {
         resetPatternInCreation();
       } else {
         lane.notes = [];
-        lane.patternStartMeasure = 0; 
+        // lane.patternStartMeasure = 0; 
+        lane.setPatternStartMeasure(0); 
       }
       lane.translationAmount = 0; 
       drawSingleLane(lane);
+      saveCurrentSessionLocally(); 
     }}>clear notes</button>
 
     <button className="back_to_start" onClick={()=>{
diff --git a/src/components/LanePatternDisplay.tsx b/src/components/LanePatternDisplay.tsx
index cede3f1..bf1e2fe 100644
--- a/src/components/LanePatternDisplay.tsx
+++ b/src/components/LanePatternDisplay.tsx
@@ -2,20 +2,25 @@ import React, { useEffect, useState } from 'react'
 import Lane from '../scripts/Lane';
 import { createPortal } from 'react-dom';
 import PatternDropZone from './PatternDropZone';
+import IndividualNoteSection from './IndividualNoteSection';
 
 interface ILanePatternDisplayProps {
     lane: Lane; 
     visible: boolean;
 }
 
-const LanePatternDisplay: React.FC<ILanePatternDisplayProps> = ({ lane,visible }) => {
+const LanePatternDisplay: React.FC<ILanePatternDisplayProps> = ({ lane, visible }) => {
+
+    const onPatternStartMeasureChange = (e: number) => {
+
+    }
+  
     const [canvasWidth, setCanvasWidth] = useState(0);
+    const [message, setMessage] = useState('');
 
-    // let canvas: HTMLCanvasElement;
     let canvas = lane.canvas; 
-
     useEffect(() => {
-        // canvas = lane.canvas
+        lane.onPatternStartChange(onPatternStartMeasureChange);
         const observer = new ResizeObserver((entries) => {
             for (let entry of entries) {
               const width = entry.contentRect.width;
@@ -23,29 +28,25 @@ const LanePatternDisplay: React.FC<ILanePatternDisplayProps> = ({ lane,visible }
             }
           });
         
-          if (canvas) {
-            observer.observe(canvas);
-          }
-        
-          return () => {
-            console.log('unmoutning')
-            observer.disconnect();
-          };
-
-          
+          if (canvas) { observer.observe(canvas); }
+          return () => { observer.disconnect(); };
     }, []);
 
-    if(visible) return createPortal( 
-        <div className='lane_pattern_display' style={{ width: `${canvasWidth}px`, height: `${canvas.height - 70}px`, overflowY: 'auto'}}>
+    return createPortal( 
+        <div 
+        className={`lane_pattern_display ${visible ? 'visible' : ''}`} 
+        style={{ width: `${canvasWidth}px`, height: `${canvas.height - 70}px`, overflowY: 'auto'}}>
 
             <div className="dropZoneContainer">
-                <PatternDropZone lane={lane}/>
+                { message && message }
+                <PatternDropZone lane={lane} setMessage={setMessage}/>
+
+
+                
             </div>
 
         </div>,
-
         canvas.closest('.canvas_container')!
     );
 }
-
 export default LanePatternDisplay
\ No newline at end of file
diff --git a/src/components/PatternDropZone.tsx b/src/components/PatternDropZone.tsx
index b4fd088..3f94eb0 100644
--- a/src/components/PatternDropZone.tsx
+++ b/src/components/PatternDropZone.tsx
@@ -1,19 +1,122 @@
-import React, { useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import Lane from '../scripts/Lane';
 import { createRoot } from 'react-dom/client';
 import DroppedPattern from './DroppedPattern';
+import IndividualNoteSection from './IndividualNoteSection';
 
 interface IPatternDropZoneProps {
     lane: Lane; 
+    setMessage: React.Dispatch<React.SetStateAction<string>>;
 }
 
 // TODO: Allow for clicking pattern to drop them herer too
-const PatternDropZone: React.FC<IPatternDropZoneProps> = ({ lane }) => {
-    const [data, setData] = useState(''); 
+const PatternDropZone: React.FC<IPatternDropZoneProps> = ({ lane, setMessage }) => {       
     
-    return (<div className='pattern_drop_zone' 
+    let topPatternMeasureRef = useRef<number[][]>([]);
+    let individualNotesSectionRef = useRef<number[][]>([]);
+    
+    const [startMeasure, setStartMeasure] = useState(0); 
+
+    let containerRef = useRef<HTMLDivElement | null>(null); 
+
+    const patternStartMeasureChange = (e: number) => {
+        setTimeout(() => {
+            // console.log('changed to ', e); 
+            setStartMeasure(e);         
+            // console.log(topPatternMeasureRef.current[topPatternMeasureRef.current.length - 1])
+
+            let topPattern = topPatternMeasureRef.current[topPatternMeasureRef.current.length - 1];
+            console.debug(topPatternMeasureRef.current);
+
+            for(let i = 0; i < topPatternMeasureRef.current.length; i++) {
+                let pattern = topPatternMeasureRef.current[i];
+
+                console.debug(pattern);
+                if(i == 0 && pattern[0] != 0) {
+                    console.log('there be notes before first pattern'); 
+                    console.log()
+
+                    let sectionInfo = [0, pattern[0]]
+
+                    let alreadyExists = individualNotesSectionRef.current.some((arr) => {
+                        if(arr[0] < pattern[0]) return true; 
+                        return arr[0] === sectionInfo[0] && arr[1] === sectionInfo[1];
+                    });
+
+                    if (!alreadyExists) {
+                        individualNotesSectionRef.current.push(sectionInfo);
+
+                        
+                        let index = individualNotesSectionRef.current.length - 1; 
+
+                        
+                        let individualSection = document.createElement('div'); 
+                        individualSection.classList.add('indivudal_section_container');
+        
+                        let root = createRoot(individualSection);
+        
+                        const unmount = () => {
+                            root.unmount();
+                            individualSection?.remove(); 
+                        }
+        
+                        root.render(<IndividualNoteSection lane={lane} unmount={unmount} individualNotesSectionRef={individualNotesSectionRef} index={index} setMessage={setMessage} />)
+                        
+                        containerRef.current?.appendChild(individualSection);
+                        console.debug('pushing individual notes bit ', sectionInfo);
+
+                    }
+                    console.log(individualNotesSectionRef.current);
+                    // container?.insertBefore(droppedPattern, container.childNodes[1]); 
+                }
+            }
+
+            if(topPattern != undefined && topPattern[0] + topPattern[1] < e) {
+                console.log('there be individual notes above top pattern')
+
+                let sectionInfo = [topPattern[0] + topPattern[1], e - (topPattern[0] + topPattern[1])];
+                console.log(sectionInfo);
+                let alreadyExists = individualNotesSectionRef.current.some(
+                    (arr) => arr[0] === sectionInfo[0]
+                );
+                
+                if (!alreadyExists) {
+                    individualNotesSectionRef.current.push(sectionInfo);
+                    let index = individualNotesSectionRef.current.length - 1; 
+
+                        
+                    let individualSection = document.createElement('div'); 
+                    individualSection.classList.add('indivudal_section_container');
+    
+                    let root = createRoot(individualSection);
+    
+                    const unmount = () => {
+                        root.unmount();
+                        individualSection?.remove(); 
+                    }
+    
+                    root.render(<IndividualNoteSection lane={lane} unmount={unmount} individualNotesSectionRef={individualNotesSectionRef} index={index} setMessage={setMessage} />)
+                    
+                    containerRef.current?.insertBefore(individualSection, containerRef.current?.childNodes[1]); 
+                    console.debug('pushing individual notes bit ', sectionInfo);
+
+                }
+            }   
+        }, 1);
+    }
+
+    useEffect(() => {
+        topPatternMeasureRef.current = []; 
+        lane.onPatternStartChange(patternStartMeasureChange);
+    }, []);
+
+
+
+    return (
+    <div className='pattern_drop_zone' 
     onDragOver={(e) => {
         e.preventDefault(); 
+        // setMessage('');
     }}
 
     onDragEnter={(e) => {
@@ -32,20 +135,38 @@ const PatternDropZone: React.FC<IPatternDropZoneProps> = ({ lane }) => {
         const patternData = e.dataTransfer.getData('application/JSON');
         let data = JSON.parse(patternData);
         
+        if(lane.patternStartMeasure + data.measures > lane.measureCount) {
+            setMessage('will overflow');
+            return; 
+        }
+
+
+        const container = e.currentTarget.parentElement as HTMLDivElement; 
+        containerRef.current = container; 
 
-        const container = e.currentTarget.parentElement; 
         let droppedPattern = document.createElement('div'); 
         droppedPattern.classList.add('dropped_pattern_container');
 
         let root = createRoot(droppedPattern); 
 
-        root.render(<DroppedPattern lane={lane} name={data.name} measures={data.measures}/>);
+        const unmount = () => {
+            root.unmount();
+            droppedPattern?.remove(); 
+        }
+
+        root.render(<DroppedPattern 
+            lane={lane} name={data.name} occurances={data.measures} 
+            unmount={unmount} setMessage={setMessage} topPatternMeasureRef={topPatternMeasureRef}/>);
         
         // container?.prepend(droppedPattern); 
+
         container?.insertBefore(droppedPattern, container.childNodes[1]); 
     }}>
-        Next pattern
-    </div>)
+        <p>
+            Next pattern from measure ({startMeasure + 1})
+        </p>
+    </div>
+    )
 }
 
 export default PatternDropZone
\ No newline at end of file
diff --git a/src/components/styles/homepage.css b/src/components/styles/homepage.css
index 8330f7b..a6dff82 100644
--- a/src/components/styles/homepage.css
+++ b/src/components/styles/homepage.css
@@ -220,7 +220,7 @@ body {
     overflow-y: auto;
 }
 
-.dropped_pattern {
+.dropped_pattern, .individual_note_section {
     color: #ECDFCC;
     background-color: #131b2386;
     border: 4px solid #131B23;
@@ -234,8 +234,33 @@ body {
     display: flex;
     justify-content: center;
     align-items: center;
+
+    position: relative;
 }
 
 .dropped_pattern_container {
     width: 50%;
+}
+ 
+.lane_pattern_display {
+    display: none;
+}
+
+.lane_pattern_display.visible {
+    display: inherit;
+}
+
+.spacer_container {
+    position: absolute;
+    bottom: -1.5em;
+    display: flex;
+    flex-direction: column;
+    gap: .2em;
+}
+.spacer {
+    border-radius: 15px;
+    width: .25em;
+    height: .25em;
+
+    background-color: black;
 }
\ No newline at end of file
diff --git a/src/scripts/Lane.ts b/src/scripts/Lane.ts
index 089f929..ec03b23 100644
--- a/src/scripts/Lane.ts
+++ b/src/scripts/Lane.ts
@@ -10,10 +10,12 @@ import { COLORS, EDIT_MODES, HIT_STATUSES, ZONE_NAMES } from "./constants";
 export default class Lane {
     public bpm: number;
     public measureCount: number; 
-    public subdivision: number; 
     public timeSignature: number[]; // Index 0 will be the upper numeral, index 1 the lower
     public metronomeEnabled: boolean; 
 
+    public subdivision: number; 
+    public innerSubdivision: number; 
+
     // Defines the distance between full* notes
     public noteGap: number; 
     public nextNoteIndex: number; 
@@ -68,7 +70,9 @@ export default class Lane {
         this.bpm = bpm; 
         this.measureCount = measureCount;
         this.timeSignature = timeSignature;
+
         this.subdivision = 4; 
+        this.innerSubdivision = 4; 
 
         this.notes = notes; 
         this.repeated = false; 
@@ -115,6 +119,14 @@ export default class Lane {
 
     public recalculateNoteGap() {
         this.noteGap = measureHeight / this.subdivision;
+
+        if(this.subdivision < 4) {
+            this.innerSubdivision = 6;
+        } else if(this.subdivision < 7) {
+            this.innerSubdivision = 4;
+        } else {
+            this.innerSubdivision = 2; 
+        }
     }
 
     public recalculateHeight() {
@@ -135,14 +147,13 @@ export default class Lane {
         return this.startY - this.height; 
     }   
 
-    public calcualteTopOfMeasuresN(n: number) {
+    public calculateTopOfMeasuresN(n: number) {
         return this.startY - (measureHeight * n); 
     }
 
     public getRatio() {
         return this.height / this.bpm; 
     }
-    
 
     // TODO: Give this better name and have one that also removes all notes 
     public resetLane(overshoot?: number) { 
@@ -249,7 +260,7 @@ export default class Lane {
             else
                 note = this.notes[i]; 
             
-            let effectiveY = note.getY(this.noteGap, this.timeSignature[1], this.startY) + this.translationAmount;
+            let effectiveY = note.getY(this.noteGap, this.innerSubdivision, this.startY) + this.translationAmount;
             // Reduces time spent drawing notes that have scrolled passed the bottom of the screen
             if(effectiveY > this.canvas.height)
                 continue;
@@ -295,7 +306,7 @@ export default class Lane {
     // Updates the hitzone and hitstatus of a specific note
     public updateNote(note: Note, y: number, ups: number, translationSpeed: number) {
         // TODO: Change for new note object
-        let distanceToPerfectHitzone = ((this.hitzone.perfect_hit_y - this.translationAmount) - note.getY(this.noteGap, this.timeSignature[1], this.startY))
+        let distanceToPerfectHitzone = ((this.hitzone.perfect_hit_y - this.translationAmount) - note.getY(this.noteGap, this.innerSubdivision, this.startY))
 
         // TODO: Review if this can be done cleaner
         if(note.hitStatus == 'unhit')
@@ -331,7 +342,7 @@ export default class Lane {
 
         let topOfLane = this.calculateTopOfLane(this.repeated);
         if(newPatternMeasures && editMode && editMode == EDIT_MODES.CREATE_PATTERN_MODE)
-            topOfLane = this.calcualteTopOfMeasuresN(newPatternMeasures)
+            topOfLane = this.calculateTopOfMeasuresN(newPatternMeasures)
 
         for(let y = this.startY; y > topOfLane; y -= this.noteGap) {
             // Optimisation so that only the measure lines actually visible on the page need to be drawn
@@ -400,7 +411,7 @@ export default class Lane {
     public calculateHitzone(): Hitzone {
         // TODO: Decide if this level of dynamic sizing is even necessary.
         let nonPerfectHitArea = ((measureHeight/this.timeSignature[1]) / ((this.hitPrecision*2) / this.timeSignature[1])) /2; //TODO: Write justifcation for this
-        let perfectHitArea = ((measureHeight/this.timeSignature[1]) / (32/this.timeSignature[1]))/2;
+        let perfectHitArea = ((measureHeight/this.timeSignature[1]) / (32/this.timeSignature[1])) / 2;
 
         let perfect_hit_y = this.calculatePerfectHitY();
         let early_hit_y = perfect_hit_y - nonPerfectHitArea
@@ -417,12 +428,15 @@ export default class Lane {
         let length = this.notes.length; 
         this.repeatedNotes = 0; 
 
+        if(this.notes.length == 0)
+            return; 
+
         let repeatedHeight = longest_lane.getRatio() * this.bpm;
         while(highestNoteY >= this.startY - repeatedHeight) {
             for(let i = 0; i < length; i++) {
             
-                let newNoteY = this.notes[i].getY(this.noteGap, this.timeSignature[1], this.startY) - (this.height * l)
-                let newNoteIndex = (this.startY - newNoteY) / (this.noteGap/this.timeSignature[1]);
+                let newNoteY = this.notes[i].getY(this.noteGap, this.innerSubdivision, this.startY) - (this.height * l)
+                let newNoteIndex = (this.startY - newNoteY) / (this.noteGap/this.innerSubdivision);
                 highestNoteY = newNoteY; 
                 console.log(highestNoteY);
 
@@ -452,34 +466,66 @@ export default class Lane {
         for(let i = this.notes.length - 1; i >= 0; i--) {
             console.log(this.notes[i]);
 
-            if(this.notes[i].getY(this.noteGap, this.timeSignature[1], this.startY) <= this.calculateTopOfLane(false))
+            if(this.notes[i].getY(this.noteGap, this.innerSubdivision, this.startY) <= this.calculateTopOfLane(false))
                 this.notes.splice(i, 1); 
         }
     }
 
-    public loadPattern(selectedPattern: selectedPattern, measures: number) {
-        if(this.patternStartMeasure + (measures * selectedPattern.measures) > this.measureCount) {
+    public loadPattern(selectedPattern: selectedPattern, measures: number, startMeasure?: number, spliceIndex?: number, difference?: number) {
+
+        if(startMeasure == undefined && this.patternStartMeasure + (measures * selectedPattern.measures) > this.measureCount) {
             console.error("Loading this pattern will exceed the lane's measure limit", measures, selectedPattern.measures, this.measureCount);
-            return; 
+            return -1; 
         }
 
+        let startingMeasure; 
+        if(startMeasure != undefined)
+            startingMeasure = startMeasure 
+        else 
+            startingMeasure = this.patternStartMeasure;
+
+        // console.log(`startingMeasure ${startingMeasure}`);
+
         let notePositions = selectedPattern.notePositions;
-        console.log(notePositions, measures);
-        
-        let divider = 16/this.timeSignature[1]; 
-        let height = this.noteGap/divider; 
-        
+        // console.log(notePositions, measures);
+        let newNotes = []; 
+        let startingNotesLength = this.notes.length; 
         for(let i = 0; i < measures; i++) {
-            let patternStartY = this.startY - (this.patternStartMeasure * (this.noteGap * this.timeSignature[1]));
+            let patternStartY = this.startY - (startingMeasure * (this.noteGap * this.subdivision));
+            let patternStartIndex = Math.round(parseInt(((this.startY - patternStartY) / (this.noteGap/this.innerSubdivision)).toFixed(1)));
+
             for(let x = 0; x < notePositions.length; x++) {
-                let y = patternStartY - (height * -notePositions[x])
+                let newNote = new Note(patternStartIndex + notePositions[x]);
+                let y = newNote.getY(this.noteGap, this.innerSubdivision, this.startY);
+                
                 if(y <= this.calculateTopOfLane(false))
                     return; // So that notes in patterns longer than the lane's measure length won't overfill it
-                let newNoteIndex = (this.startY - y) / (this.noteGap/this.timeSignature[1]);
 
-                this.notes.push(new Note(newNoteIndex)); 
+                
+                if(spliceIndex != undefined && startingNotesLength > 0)
+                    newNotes.push(newNote);
+                else 
+                    this.notes.push(newNote); 
+
+                // console.log('Newnote from pattern: ', newNote);
+
             }
-            this.patternStartMeasure += 1; 
+            startingMeasure += 1;
+        }
+
+        // console.log(newNotes)
+        if(spliceIndex != undefined) {
+            for(let i = 0; i < newNotes.length; i++) {
+                this.notes.splice(spliceIndex + i, 0, newNotes[i]); 
+            }
+        }
+
+        // console.log(this.notes)
+        if(startMeasure == undefined) {
+            console.log('setting measures')
+            this.setPatternStartMeasure(startingMeasure);
+        } else {
+            this.setPatternStartMeasure(this.patternStartMeasure + difference!);
         }
     }    
 
@@ -499,4 +545,158 @@ export default class Lane {
         this.inputAreaHeight = this.canvas.height - this.topOfInputVisual;
         this.hitzone = this.calculateHitzone(); 
     }
+
+    private patternStartListeners: ((newValue: number) => void)[] = [];
+    // Custom event listeners 
+    public setPatternStartMeasure(value: number) {
+        if (this.patternStartMeasure !== value) {
+            this.patternStartMeasure = value;
+            this.notifyPatternStartChange();
+        }
+    }
+
+    private notifyPatternStartChange() {
+        for (const listener of this.patternStartListeners) {
+            listener(this.patternStartMeasure);
+        }
+    }
+
+    // Allow external code to listen for changes
+    public onPatternStartChange(callback: (value: number) => void) {
+        this.patternStartListeners.push(callback);
+    }
+
+    // Optional cleanup
+    public removePatternStartChange(callback: (value: number) => void) {
+        this.patternStartListeners = this.patternStartListeners.filter(cb => cb !== callback);
+    }
+
+    private patternChangeListeners: ((startMeasure: number, measureDifference: number) => void)[] = [];
+    public onPatternChange(callback: (startMeasure: number, measureDifference: number) => void) {
+        this.patternChangeListeners.push(callback); 
+    }
+
+    public removeOnPatternChange(callback: (startMeasure: number, measureDifference: number) => void) {
+        this.patternChangeListeners = this.patternChangeListeners.filter(cb => cb !== callback);
+    }
+
+    private notifyPatternChange(startMeasure: number, measureDifference: number) {
+        for (const listener of this.patternChangeListeners) {
+            listener(startMeasure, measureDifference);
+        }
+    }
+
+    public reducePatternOccuances(startMeasure: number, oldOccurances: number, newOccurnaces: number) {
+        if(newOccurnaces > oldOccurances)
+            return; 
+        
+        let revertRepeat = false;
+        if(this.repeated) {
+            this.unrepeatNotes();
+            revertRepeat = true;
+        }
+        
+        let measureDifference = oldOccurances - newOccurnaces; 
+        console.log(measureDifference, oldOccurances, newOccurnaces);
+        
+        let patternStartY = this.startY - (startMeasure * (this.noteGap * this.subdivision));
+        let patternStartIndex = Math.round(parseInt(((this.startY - patternStartY) / (this.noteGap/this.innerSubdivision)).toFixed(1)));
+
+        let notesInMeasure = this.innerSubdivision * this.subdivision;
+        
+        let lastPossibleIndex = patternStartIndex + (notesInMeasure * oldOccurances) - 1; 
+        if(newOccurnaces > 0)
+            patternStartIndex = lastPossibleIndex - (measureDifference * notesInMeasure);
+        
+        console.log(patternStartY, patternStartIndex, lastPossibleIndex);
+        for(let i = this.notes.length - 1; i >= 0; i--) {
+            if(this.notes[i].index < patternStartIndex) 
+                break; 
+            else if(this.notes[i].index > lastPossibleIndex) {
+                console.log('reached past pattern')
+                // break;
+                this.notes[i].index -= (measureDifference * notesInMeasure); 
+                continue;
+            } else {
+                // Notes within the pattern
+                console.log(this.notes[i].index)
+                this.notes.splice(i, 1);
+            }
+        }
+
+        this.notifyPatternChange(startMeasure, -measureDifference);
+
+        let newPatternStartMeasure = this.patternStartMeasure - measureDifference;
+        console.log('newPattenrmeapouhsdf', newPatternStartMeasure);
+        this.setPatternStartMeasure(newPatternStartMeasure < 0 ? 0 : newPatternStartMeasure);
+
+        if(this.notes.length == 0)
+            this.setPatternStartMeasure(0);
+
+        
+        if(revertRepeat)
+            this.repeatNotes();
+    }
+
+    public increasePatternOccurances(startMeasure: number, oldOccurances: number, newOccurnaces: number, patternData: Object): number {        
+        console.log(startMeasure,' from in here');
+        if(newOccurnaces < oldOccurances)
+            return -1; 
+
+        let revertRepeat = false;
+        if(this.repeated) {
+            this.unrepeatNotes();
+            revertRepeat = true;
+        }
+
+        let measureDifference = newOccurnaces - oldOccurances; 
+        console.log(measureDifference);
+
+        if(this.patternStartMeasure + measureDifference > this.measureCount) {
+            console.log('will overflow');
+            return -1; 
+        }
+        
+        let patternStartY = this.startY - (startMeasure * (this.noteGap * this.subdivision));
+        let patternStartIndex = Math.round(parseInt(((this.startY - patternStartY) / (this.noteGap/this.innerSubdivision)).toFixed(1)));
+
+
+        let notesInMeasure = this.innerSubdivision * this.subdivision;
+
+        let spliceIndex; 
+
+        let lastPossibleIndex = patternStartIndex + (notesInMeasure * oldOccurances) - 1; 
+        for(let i = this.notes.length - 1; i >= 0; i--) {
+            if(this.notes[i].index < lastPossibleIndex && this.notes[i].index >= patternStartIndex) {
+                // Inside pattern
+                spliceIndex = i; 
+                this.notes.splice(i, 1);
+            } else if(this.notes[i].index < patternStartIndex && spliceIndex == undefined) {
+                spliceIndex = i + 1; 
+                break; 
+            } else if(i == 0 && spliceIndex == undefined) {
+                spliceIndex = 0; 
+            } else if(this.notes[i].index > lastPossibleIndex && measureDifference > 0) {
+                console.log('past pattern')
+                // break;
+                this.notes[i].index += (measureDifference * notesInMeasure); 
+                continue;
+            } 
+        }
+        console.log('before load ', this.notes[0], newOccurnaces, startMeasure, spliceIndex)
+
+        this.loadPattern(patternData, newOccurnaces, startMeasure, spliceIndex, measureDifference);
+        console.log('loaded returning 0');
+
+
+        this.notifyPatternChange(startMeasure, measureDifference);
+
+
+        if(revertRepeat)
+            this.repeatNotes();
+        
+        return 0; 
+    }
+
+
 }
diff --git a/src/scripts/Note.ts b/src/scripts/Note.ts
index dfc323f..e3a91e2 100644
--- a/src/scripts/Note.ts
+++ b/src/scripts/Note.ts
@@ -26,8 +26,8 @@ export default class Note {
         this.hitStatus = 'unhit';
     }
 
-    public getY(noteGap: number, timeSignature: number, laneStartY: number) {
-        return ((this.index * (noteGap/timeSignature)) - laneStartY) * -1;
+    public getY(noteGap: number, innerSubdivision: number, laneStartY: number) {
+        return ((this.index * (noteGap/innerSubdivision)) - laneStartY) * -1;
     }
 
     public startAnimation(type: string) {
diff --git a/src/scripts/Utils.ts b/src/scripts/Utils.ts
index b77dc8c..c39dff3 100644
--- a/src/scripts/Utils.ts
+++ b/src/scripts/Utils.ts
@@ -48,11 +48,11 @@ export function getNoteFill(currentZone: string, hitStatus: string): string {
 
 // TODO Extrapolate Y values from index
 export function findSortedIndex(notes: Note[], newNoteIndex: number, lane: Lane): number[] {
-    let newNoteY = ((newNoteIndex * (lane.noteGap/lane.timeSignature[1])) - lane.startY) * -1;
+    let newNoteY = ((newNoteIndex * (lane.noteGap/lane.innerSubdivision)) - lane.startY) * -1;
 
     for(let i = 0; i < notes.length; i++) {
         if(i == 0) {
-            let y = notes[0].getY(lane.noteGap, lane.timeSignature[1], lane.startY);
+            let y = notes[0].getY(lane.noteGap, lane.innerSubdivision, lane.startY);
             if(y < newNoteY)
                 return [0, 0]; 
             if(y == newNoteY)
@@ -61,8 +61,8 @@ export function findSortedIndex(notes: Note[], newNoteIndex: number, lane: Lane)
             continue; 
         }
 
-        let iMinusOneY = notes[i - 1].getY(lane.noteGap, lane.timeSignature[1], lane.startY);
-        let iY = notes[i].getY(lane.noteGap, lane.timeSignature[1], lane.startY);
+        let iMinusOneY = notes[i - 1].getY(lane.noteGap, lane.innerSubdivision, lane.startY);
+        let iY = notes[i].getY(lane.noteGap, lane.innerSubdivision, lane.startY);
     
         if(iMinusOneY > newNoteY && iY < newNoteY)
             return [i, 0]; 
diff --git a/src/scripts/main.ts b/src/scripts/main.ts
index e4d2463..73d4578 100644
--- a/src/scripts/main.ts
+++ b/src/scripts/main.ts
@@ -585,6 +585,23 @@ async function handleCanvasClick(event: MouseEvent) {
           patternInCreationPositions.splice(sortedIndex[0], 1);
           console.log(patternInCreationPositions);
         } else {
+          let y = lane.notes[sortedIndex[0]].getY(lane.noteGap, lane.innerSubdivision, lane.startY); 
+          let currentMeasure = Math.floor((Math.abs(lane.startY - y)/measureHeight)); 
+
+          console.log(`Deleting in measure ${currentMeasure}`);
+
+          if(sortedIndex[0] > 0 && sortedIndex[0] == lane.notes.length - 1) {
+            let previousNoteY = lane.notes[sortedIndex[0] - 1].getY(lane.noteGap, lane.innerSubdivision, lane.startY); 
+            let previousNoteMeasure = Math.floor((Math.abs(lane.startY - previousNoteY)/measureHeight)); ; 
+
+            if(previousNoteMeasure < currentMeasure)
+              lane.setPatternStartMeasure(previousNoteMeasure + 1);
+              // lane.patternStartMeasure = previousNoteMeasure + 1;
+          } else if(sortedIndex[0] == 0 && lane.notes.length == 1) {
+            // lane.patternStartMeasure = 0; 
+            lane.setPatternStartMeasure(0);
+          }
+
           if(lane.repeated) {
             lane.notes.splice(lane.notes.length - lane.repeatedNotes, lane.repeatedNotes);
             lane.notes.splice(sortedIndex[0], 1);
@@ -600,7 +617,8 @@ async function handleCanvasClick(event: MouseEvent) {
       return;
     } else if(event.button != 2 && editMode != EDIT_MODES.PATTERN_MODE) {
       let newNote = new Note(newNoteIndex);
-      console.log(newNote.getY(lane.noteGap, lane.timeSignature[1], lane.startY) - lane.startY); 
+      // console.log(newNoteIndex);
+      // console.log(newNote.getY(lane.noteGap, lane.innerSubdivision, lane.startY) - lane.startY); 
 
       if(editMode == EDIT_MODES.CREATE_PATTERN_MODE) {
         patternInCreationNotes.splice(sortedIndex[0], 0, newNote);
@@ -609,10 +627,12 @@ async function handleCanvasClick(event: MouseEvent) {
         let height = lane.noteGap/divider; 
         
         // TODO: GET Y FROM INDEX.
-        let y = patternInCreationNotes[sortedIndex[0]].getY(lane.noteGap, lane.timeSignature[1], lane.startY); 
+        let y = patternInCreationNotes[sortedIndex[0]].getY(lane.noteGap, lane.innerSubdivision, lane.startY); 
         let dif = (y - lane.startY) / height;
-        patternInCreationPositions.splice(sortedIndex[0], 0, dif);
-        
+        console.debug(patternInCreationNotes[sortedIndex[0]].index);
+
+        patternInCreationPositions.splice(sortedIndex[0], 0, patternInCreationNotes[sortedIndex[0]].index);
+
         console.log(patternInCreationPositions);
 
       } else {
@@ -625,6 +645,14 @@ async function handleCanvasClick(event: MouseEvent) {
         }
       }
 
+      let y = newNote.getY(lane.noteGap, lane.innerSubdivision, lane.startY); 
+      let currentMeasure = Math.floor((Math.abs(lane.startY - y)/measureHeight)); 
+      
+      if(currentMeasure >= lane.patternStartMeasure)
+        lane.setPatternStartMeasure(currentMeasure + 1);
+        // lane.patternStartMeasure = currentMeasure + 1; 
+
+      // console.log(`Current measure ${currentMeasure}`);
       drawSingleLane(lane); 
     }
     return;
@@ -698,29 +726,29 @@ export function drawSingleLane(lane: Lane) {
     // TODO: Hold shift to be continuous. 
     let divider = 16/lane.timeSignature[1];
 
-    let height; 
-    if(lane.subdivision < 4)
-      height = lane.noteGap/6;
-    else if(lane.subdivision < 7)
-      height = lane.noteGap/4;
-    else
-      height = lane.noteGap/2;
+    let height = lane.noteGap/lane.innerSubdivision; 
+    // if(lane.subdivision < 4)
+    //   height = lane.noteGap/6;
+    // else if(lane.subdivision < 7)
+    //   height = lane.noteGap/4;
+    // else
+    //   height = lane.noteGap/2;
     
-    if(keyHeld['Control']) {
-      const MAX_DISVISOR = 100; 
-      
-      let divisor = 1; 
-      for(; divisor <= MAX_DISVISOR; divider++) {
-        if(lane.noteGap/divisor < 15)
-          break; 
-
-        divisor++;
-        height = lane.noteGap/divisor; 
-      }
-      
-
+    // TODO: If time come back. Divider must be even, and be divisible by original value determined above.
+    // if(keyHeld['Control']) {
+    //   const MAX_DISVISOR = 100; 
       
-    }
+    //   let divisor = 1; 
+    //   for(; divisor <= MAX_DISVISOR; divider++) {
+    //     if(lane.noteGap/divisor < 15)
+    //       break; 
+
+    //     divisor++;
+    //     height = lane.noteGap/divisor; 
+    //   }
+    //   console.log(divisor)
+    //   height = lane.noteGap/12; 
+    // }
       // height = lane.noteGap/12.5; 
 
     // let drawHeight = lane.noteGap/(lane.timeSignature[1] * lane.timeSignature[0]);
@@ -729,7 +757,7 @@ export function drawSingleLane(lane: Lane) {
     // So that only non repeated part of lane is shown in edit mode
     let topOfLane = lane.calculateTopOfLane(false); 
     if(editMode == EDIT_MODES.CREATE_PATTERN_MODE)
-        topOfLane = lane.calcualteTopOfMeasuresN(newPatternMeasures); 
+        topOfLane = lane.calculateTopOfMeasuresN(newPatternMeasures); 
 
     for(let y = lane.startY; y > topOfLane; y -= height) {    
       if(y - topOfLane < 1)
@@ -742,8 +770,8 @@ export function drawSingleLane(lane: Lane) {
       if(effectiveY < -lane.noteGap)
         break;
 
-      if(!keyHeld['Control']) {          
-      }
+      // if(!keyHeld['Control']) {          
+      // }
       lane.ctx.fillStyle = COLORS.NOTE_AREA_HIGHLIGHT;
       lane.ctx.beginPath();
       lane.ctx.roundRect(30, effectiveY - (drawHeight/2), lane.canvas.width - 60, drawHeight, 20); 
@@ -756,11 +784,14 @@ export function drawSingleLane(lane: Lane) {
       let effectiveOffsetY = offsetY - translationAmount;
       if(effectiveOffsetY > (effectiveY - (height/2)) && effectiveOffsetY <= (effectiveY - (height/2)) + height) {
         newNoteY = y; 
-        newNoteIndex = (lane.startY - newNoteY) / (lane.noteGap/lane.timeSignature[1]);
-        // let inverse = ((newNoteIndex * (lane.noteGap/lane.timeSignature[1])) - lane.startY) * -1;
-        // console.log(newNoteY, " : ", newNoteIndex, " : ", inverse);
+        // newNoteIndex = (lane.startY - newNoteY) / (lane.noteGap/lane.timeSignature[1]);
+        // newNoteIndex = Math.round((lane.startY - newNoteY) / (lane.noteGap/lane.timeSignature[1]));
 
+        newNoteIndex = Math.round(parseInt(((lane.startY - newNoteY) / (lane.noteGap/lane.innerSubdivision)).toFixed(1)));
+        // console.log(newNoteIndex);
         
+        // let inverse = ((newNoteIndex * (lane.noteGap/lane.timeSignature[1])) - lane.startY) * -1;
+        // console.log(newNoteY, " : ", newNoteIndex, " : ", inverse);
 
         // console.log(newNoteY);
         // console.log(lane.notes);
@@ -1073,10 +1104,13 @@ export function remapLane(target: Lane, reference: Lane) {
   target.metronomeEnabled = reference.metronomeEnabled;
   
   target.subdivision = reference.subdivision; 
+  target.innerSubdivision = reference.innerSubdivision; 
 
   target.repeated = reference.repeated;
   target.repeatedNotes = reference.repeatedNotes;
 
+  target.patternStartMeasure = reference.patternStartMeasure; 
+
   target.notes = []; 
   target.translationAmount = 0;
   target.nextNoteIndex = 0; 

From c2e8c7d62b8ff0a6f287967ad13c174342deec3e Mon Sep 17 00:00:00 2001
From: Ben <Bendavcorr@Gmail.com>
Date: Mon, 7 Apr 2025 01:50:27 +0100
Subject: [PATCH 2/2] Reworked pattern system

---
 src/components/DroppedPattern.tsx        | 104 +++++++++---------
 src/components/IndividualNoteSection.tsx | 129 +++++++++++++----------
 src/components/LanePatternDisplay.tsx    | 125 ++++++++++++++++++++--
 src/components/PatternDropZone.tsx       |  84 ++++++++++++---
 src/components/styles/homepage.css       |   2 +-
 src/scripts/Lane.ts                      |   3 +-
 src/scripts/types.ts                     |   4 +-
 7 files changed, 320 insertions(+), 131 deletions(-)

diff --git a/src/components/DroppedPattern.tsx b/src/components/DroppedPattern.tsx
index f516fe1..1fdf890 100644
--- a/src/components/DroppedPattern.tsx
+++ b/src/components/DroppedPattern.tsx
@@ -2,36 +2,55 @@ import React, { ChangeEvent, useEffect, useRef, useState } from 'react'
 import Lane from '../scripts/Lane';
 import { supabase } from '../scripts/supa-client';
 import { retrieveBucketData } from '../scripts/main';
+import { PatternModeSection } from '../scripts/types';
 
 interface IDroppedPatternProps {
     lane: Lane;
     name: string; 
+    start: number;
     occurances: number;
-    unmount: () => void; 
+    // unmount: () => void | null; 
     setMessage: React.Dispatch<React.SetStateAction<string>>;
-    topPatternMeasureRef: React.RefObject<number[][]>; 
-}
-
+    // topPatternMeasureRef: React.RefObject<number[][]> | null; 
+    setDroppedPatterns: React.Dispatch<React.SetStateAction<PatternModeSection[]>>;
+    id: string; 
+    data: JSON;
 
-const DroppedPattern: React.FC<IDroppedPatternProps> = ({ lane, name, occurances, unmount, setMessage, topPatternMeasureRef }) => {
-    let startMeasureRef = useRef(0);
-    const [startMeasure, setStartMeasure] = useState(0); 
+    droppedPatternsRef: React.RefObject<PatternModeSection[]>;
+    
+}
 
-    let patternIndex = useRef(0); 
+const DroppedPattern: React.FC<IDroppedPatternProps> = ({ lane, name, start, occurances, setMessage, setDroppedPatterns, id, data, droppedPatternsRef }) => {
+    let startMeasureRef = useRef(start);
+    const [startMeasure, setStartMeasure] = useState(startMeasureRef.current + 1); 
 
     let currentOccurances = useRef(occurances);
     const [occuranceState, setOccuranceState] = useState(currentOccurances.current);
 
-    let dataRef = useRef(Object); 
+    const updatePattern = (updatedData: Partial<{ start: number; length: number }>) => {
+        setDroppedPatterns(prev => {
+            const updated = prev.map(pattern =>
+                pattern.id === id ? { ...pattern, ...updatedData } : pattern
+            )
+            droppedPatternsRef.current = updated; 
+            return updated;
+        }
+    );};
+
+    const removePattern = () => {
+        setDroppedPatterns(prev => {
+            const updated = prev.filter(pattern => pattern.id !== id);
+            droppedPatternsRef.current = updated; 
+            return updated;
+        }
+        );
+    };
 
     const patternStartMeasureChange = (e: number) => {
-        // console.log('changed to ', e); 
         if(e <= startMeasureRef.current) {
             console.log('pattern is gone');
-            topPatternMeasureRef.current.splice(patternIndex.current, 1);
-            unmount();
+            removePattern();
         } 
-        console.log(startMeasureRef.current - e);
     }
     
 
@@ -53,70 +72,52 @@ const DroppedPattern: React.FC<IDroppedPatternProps> = ({ lane, name, occurances
             setStartMeasure(startMeasureRef.current + 1);
         }
 
-        topPatternMeasureRef.current[patternIndex.current] = [startMeasureRef.current, currentOccurances.current];
+        updatePattern({start: startMeasureRef.current, length: currentOccurances.current});
+        console.debug(id, startMeasureRef.current, currentOccurances.current);
     }
 
     const onDeleteClick = () => {
+        console.debug(id, startMeasureRef.current, currentOccurances.current);
+        removePattern();
         lane.reducePatternOccuances(startMeasureRef.current, currentOccurances.current, 0); 
-        topPatternMeasureRef.current.splice(patternIndex.current, 1);
-        unmount(); 
-
-        // .push([startMeasureRef.current, currentOccurances.current]);
     }
 
     const onReloadClick = () => {
-        console.log(startMeasureRef.current);
-        lane.increasePatternOccurances(startMeasureRef.current, currentOccurances.current, currentOccurances.current, dataRef.current)
+        lane.increasePatternOccurances(startMeasureRef.current, currentOccurances.current, currentOccurances.current, data)
     }
     
     const onOccuranceInputChange = (e: ChangeEvent<HTMLInputElement>) => {
         let newOccurances = parseInt(e.target.value); 
         let code = 0; 
 
+        // updatePattern({start: startMeasureRef.current, length: newOccurances});
+        
         if(newOccurances < currentOccurances.current) {
             lane.reducePatternOccuances(startMeasureRef.current, currentOccurances.current, newOccurances);
         } else {
-            code = lane.increasePatternOccurances(startMeasureRef.current, currentOccurances.current, newOccurances, dataRef.current);
-            console.log(code);
+            code = lane.increasePatternOccurances(startMeasureRef.current, currentOccurances.current, newOccurances, data);
         }
-
-        console.log('code ', code);
-        if(code == 0) {
+        
+        console.debug('code ', code);
+        if(code == 0) {            
             currentOccurances.current = newOccurances;
             setOccuranceState(currentOccurances.current);
+            updatePattern({start: startMeasureRef.current, length: currentOccurances.current});
 
-            topPatternMeasureRef.current[patternIndex.current] = [startMeasureRef.current, currentOccurances.current];
-        } else 
+        } else {
             e.target.value = currentOccurances.current.toString();
+        }
     }
-    
-    async function loadPattern() {
-        // TODO: Allow for local loading. 
-        const userId = (await supabase.auth.getUser()).data.user?.id as string;
-        let patternData = await retrieveBucketData('patterns', `${userId}/${name}`);
-        dataRef.current = patternData; 
-
-        console.log(patternData);
-        if(lane.loadPattern(patternData, currentOccurances.current) == -1) {
-            setMessage('will overflow')
-            unmount();
-        } 
-        
-    }
-    
+
     useEffect(() => {        
-        loadPattern(); 
+        currentOccurances.current = occurances;
+        setOccuranceState(currentOccurances.current);
+
+
         lane.onPatternStartChange(patternStartMeasureChange);
         lane.onPatternChange(measureChange);
-        
-        startMeasureRef.current = lane.patternStartMeasure; 
-        setStartMeasure(startMeasureRef.current + 1);
 
-        topPatternMeasureRef.current.push([startMeasureRef.current, currentOccurances.current]);
-        patternIndex.current = topPatternMeasureRef.current.length - 1; 
-        
         return () => {
-            console.log('unmounting')
             lane.removePatternStartChange(patternStartMeasureChange);
             lane.removeOnPatternChange(measureChange);
         }
@@ -128,7 +129,10 @@ const DroppedPattern: React.FC<IDroppedPatternProps> = ({ lane, name, occurances
         <button onClick={onDeleteClick}>delete</button>
         <button onClick={onReloadClick}>reload</button>
 
+
+
         <div>{`Measures ${startMeasure} - ${startMeasure + occuranceState - 1}`}</div>
+        {/* <div>{`Measures ${startMeasure} - ${startMeasure + occuranceState - 1}`}</div> */}
 
         { startMeasureRef.current > 0 && 
         <div className="spacer_container">
diff --git a/src/components/IndividualNoteSection.tsx b/src/components/IndividualNoteSection.tsx
index 72e247a..2945c18 100644
--- a/src/components/IndividualNoteSection.tsx
+++ b/src/components/IndividualNoteSection.tsx
@@ -1,100 +1,119 @@
 import React, { useEffect, useRef, useState } from 'react'
 import Lane from '../scripts/Lane';
+import { PatternModeSection } from '../scripts/types';
 
 interface IndividualNoteSectionProps {
+    id: string; 
     lane: Lane;
-    unmount: () => void; 
+    start: number;
+    occurances: number;
     setMessage: React.Dispatch<React.SetStateAction<string>>;
-    individualNotesSectionRef: React.RefObject<number[][]>; 
-    index: number; 
-}
 
-const IndividualNoteSection: React.FC<IndividualNoteSectionProps> = ({ lane, setMessage, unmount, individualNotesSectionRef, index }) => {
-    
+    setIndividualNoteSections: React.Dispatch<React.SetStateAction<PatternModeSection[]>>;
+    individualNoteSectionsRef: React.RefObject<PatternModeSection[]>;
+}
 
-    let startMeasureRef = useRef(0);
-    const [startMeasure, setStartMeasure] = useState(0); 
-    const [endMeasure, setEndMeasure] = useState(0); 
+const IndividualNoteSection: React.FC<IndividualNoteSectionProps> = ({ lane, setMessage, start, occurances, id, setIndividualNoteSections, individualNoteSectionsRef}) => {
+    let startMeasureRef = useRef(start);
+    const [startMeasure, setStartMeasure] = useState(startMeasureRef.current + 1); 
+
+    let currentOccurances = useRef(occurances);
+    const [occuranceState, setOccuranceState] = useState(currentOccurances.current);
+
+    const removePattern = () => {
+        setIndividualNoteSections(prev => {
+            const updated = prev.filter(pattern => pattern.id !== id);
+            individualNoteSectionsRef.current = updated; 
+            console.debug(updated);
+            return updated;
+        });
+    };
+
+    const updatePattern = (updatedData: Partial<{ start: number; length: number }>) => {
+        setIndividualNoteSections(prev => {
+            const updated = prev.map(pattern =>
+                pattern.id === id ? { ...pattern, ...updatedData } : pattern
+            )
+            individualNoteSectionsRef.current = updated; 
+            return updated;
+        }
+    );};
 
-    let statsRef = useRef<number[]>([]);
 
     const patternStartMeasureChange = (e: number) => {
-        // console.log('changed to ', e); 
         if(e <= startMeasureRef.current) {
             console.log('pattern is gone');
-
-            let currentIndex = individualNotesSectionRef.current.indexOf(statsRef.current); 
-            individualNotesSectionRef.current.splice(currentIndex, 1); 
-            unmount(); 
+            removePattern();
         } 
-        console.log(startMeasureRef.current - e);
     }
 
     const measureChange = (startMeasure: number, measureDifference: number) => {
-        console.debug('measureChange from notes', startMeasure, measureDifference);
+        console.log(`measure difference ${measureDifference}`);
+        
+        if(measureDifference < 0) {
+            if(startMeasure == startMeasureRef.current) {
+                currentOccurances.current += measureDifference;
+                setOccuranceState(currentOccurances.current);
+                console.log(currentOccurances);
+
+            } else if(startMeasure < startMeasureRef.current) {
+                startMeasureRef.current = startMeasureRef.current + measureDifference;
+                setStartMeasure(startMeasureRef.current + 1);
+            }
+        } else if(startMeasure < startMeasureRef.current) {
+            startMeasureRef.current += measureDifference;
+            setStartMeasure(startMeasureRef.current + 1);
+        }
 
-        if(measureDifference < 0 && startMeasure < startMeasureRef.current) {
+        updatePattern({start: startMeasureRef.current, length: currentOccurances.current});
+        console.debug(id, startMeasureRef.current, currentOccurances.current);
+        
+        // console.debug('measureChange from notes', startMeasure, measureDifference);
+
+        // if(measureDifference < 0 && startMeasure < startMeasureRef.current) {
             
-            startMeasureRef.current = startMeasureRef.current + measureDifference;
-            statsRef.current[0] = startMeasureRef.current;
+        //     startMeasureRef.current = startMeasureRef.current + measureDifference;
+        //     statsRef.current[0] = startMeasureRef.current;
 
-            // individualNotesSectionRef.current[index][0] = startMeasureRef.current;
+        //     // individualNotesSectionRef.current[index][0] = startMeasureRef.current;
             
 
-            setStartMeasure(startMeasureRef.current + 1);
-            setEndMeasure(startMeasureRef.current + statsRef.current[1]);
+        //     setStartMeasure(startMeasureRef.current + 1);
+        //     setEndMeasure(startMeasureRef.current + statsRef.current[1]);
 
             
-        } else if(startMeasure < startMeasureRef.current) {
-            console.log('in here', startMeasureRef.current)
+        // } else if(startMeasure < startMeasureRef.current) {
+        //     console.log('in here', startMeasureRef.current)
 
-            startMeasureRef.current += measureDifference;
-            statsRef.current[0] = startMeasureRef.current;
+        //     startMeasureRef.current += measureDifference;
+        //     statsRef.current[0] = startMeasureRef.current;
 
-            console.log('in here', startMeasureRef.current)
-            setStartMeasure(startMeasureRef.current + 1);
-            setEndMeasure(startMeasureRef.current + statsRef.current[1]);
-        }
+        //     console.log('in here', startMeasureRef.current)
+        //     setStartMeasure(startMeasureRef.current + 1);
+        //     setEndMeasure(startMeasureRef.current + statsRef.current[1]);
+        // }
 
-        console.debug('measureChange from notes after', statsRef.current);
+        // console.debug('measureChange from notes after', statsRef.current);
 
     }
 
     const onDeleteClick = () => {
-        console.log(`index ${index}`);
-        console.log('from delete click', statsRef.current, statsRef.current[1]);
-        lane.reducePatternOccuances(startMeasureRef.current, statsRef.current[1], 0); 
-
-        let currentIndex = individualNotesSectionRef.current.indexOf(statsRef.current); 
-        individualNotesSectionRef.current.splice(currentIndex, 1); 
-        unmount(); 
-
+        console.debug(id, startMeasureRef.current, currentOccurances.current);
+        removePattern();
+        lane.reducePatternOccuances(startMeasureRef.current, currentOccurances.current, 0); 
     }
     
     useEffect(() => {
+        console.debug(id); 
         lane.onPatternChange(measureChange);
         lane.onPatternStartChange(patternStartMeasureChange); 
-
-        statsRef.current = individualNotesSectionRef.current[index]; 
-
-
-        startMeasureRef.current = statsRef.current[0]; 
-        setStartMeasure(startMeasureRef.current + 1);
-
-        console.log(statsRef.current);
-
-        setEndMeasure(statsRef.current[0] + statsRef.current[1]);
-
-        console.log(individualNotesSectionRef.current);
     }, []);
     
     return (
     <div className="individual_note_section">
-        
         <div>IndividualNoteSection</div>
-        <div>{`Measures ${startMeasure} - ${endMeasure}`}</div>
+        <div>{`Measures ${startMeasure} - ${startMeasure + occuranceState - 1}`}</div>
         <button onClick={onDeleteClick}>delete</button>
-
     </div>)
 }
 
diff --git a/src/components/LanePatternDisplay.tsx b/src/components/LanePatternDisplay.tsx
index bf1e2fe..b7c2211 100644
--- a/src/components/LanePatternDisplay.tsx
+++ b/src/components/LanePatternDisplay.tsx
@@ -1,26 +1,99 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import Lane from '../scripts/Lane';
 import { createPortal } from 'react-dom';
 import PatternDropZone from './PatternDropZone';
 import IndividualNoteSection from './IndividualNoteSection';
+import { PatternModeSection } from '../scripts/types';
+import DroppedPattern from './DroppedPattern';
 
 interface ILanePatternDisplayProps {
     lane: Lane; 
     visible: boolean;
 }
 
-const LanePatternDisplay: React.FC<ILanePatternDisplayProps> = ({ lane, visible }) => {
 
-    const onPatternStartMeasureChange = (e: number) => {
+const LanePatternDisplay: React.FC<ILanePatternDisplayProps> = ({ lane, visible }) => {
+    const updatePattern = (updatedData: Partial<{ start: number; length: number }>, id: string) => {
+        setIndividualNoteSections(prev => {
+            const updated = prev.map(pattern =>
+                pattern.id === id ? { ...pattern, ...updatedData } : pattern
+            )
+            individualNoteSectionsRef.current = updated; 
+            return updated;
+        }
+    );};
 
-    }
-  
     const [canvasWidth, setCanvasWidth] = useState(0);
     const [message, setMessage] = useState('');
 
+    const [droppedPatterns, setDroppedPatterns] = useState<PatternModeSection[]>([]);
+    let droppedPatternsRef = useRef<PatternModeSection[]>([]);
+
+    const [individualNoteSections, setIndividualNoteSections] = useState<PatternModeSection[]>([]);
+    let individualNoteSectionsRef = useRef<PatternModeSection[]>([]);
+
+    const patternStartMeasureChange = (e: number) => {      
+      setTimeout(() => {
+        if(droppedPatternsRef.current.length > 0) {
+          // Patterns are poulated
+          // console.debug(droppedPatternsRef.current[0]);
+          let topPattern = droppedPatternsRef.current[0];
+          console.debug(topPattern);
+          if(lane.patternStartMeasure > topPattern.start + topPattern.length) {
+            // Individually placed notes exist above the top pattern
+            let patternID = crypto.randomUUID(); 
+            let pattern = {
+              id: patternID,
+              start: topPattern.start + topPattern.length,
+              length: e - (topPattern.start + topPattern.length)
+            }
+            // console.debug(pattern);
+  
+            if(individualNoteSectionsRef.current.length > 0) {
+              let top = individualNoteSectionsRef.current[0];
+              if(top.start == pattern.start) {
+                updatePattern(pattern, top.id);
+              } else {
+                setIndividualNoteSections(prev => {
+                  const updated = [pattern, ...prev];
+                  individualNoteSectionsRef.current = updated; 
+                  return updated; 
+                });
+              }
+            } else {
+              setIndividualNoteSections(prev => {
+                const updated = [pattern, ...prev];
+                individualNoteSectionsRef.current = updated; 
+                return updated; 
+              });
+            }
+          }
+        } else if(lane.patternStartMeasure > 0) {
+          // No patterns exist and notes are already present
+          let patternID = crypto.randomUUID(); 
+          let pattern = {
+            id: patternID, 
+            start: 0, 
+            length: lane.patternStartMeasure, 
+          }
+          
+          if(individualNoteSectionsRef.current.length > 0) {
+            let id = individualNoteSectionsRef.current[0].id;
+            updatePattern(pattern, id);
+          } else {
+            setIndividualNoteSections(prev => {
+              const updated = [pattern, ...prev];
+              individualNoteSectionsRef.current = updated; 
+              return updated; 
+            });
+          }
+        }
+      }, 0)
+    }
+
     let canvas = lane.canvas; 
     useEffect(() => {
-        lane.onPatternStartChange(onPatternStartMeasureChange);
+        lane.onPatternStartChange(patternStartMeasureChange);
         const observer = new ResizeObserver((entries) => {
             for (let entry of entries) {
               const width = entry.contentRect.width;
@@ -39,12 +112,46 @@ const LanePatternDisplay: React.FC<ILanePatternDisplayProps> = ({ lane, visible
 
             <div className="dropZoneContainer">
                 { message && message }
-                <PatternDropZone lane={lane} setMessage={setMessage}/>
+                <PatternDropZone lane={lane} setMessage={setMessage}
+                droppedPatterns={droppedPatterns}
+                setDroppedPatterns={setDroppedPatterns}
+                droppedPatternsRef={droppedPatternsRef}
+                />
 
 
-                
+            {[...individualNoteSections, ...droppedPatterns]
+              .sort((a, b) => b.start - a.start)
+              .map((pattern, i) => {
+                if(pattern.name != undefined) {
+                  return (
+                    <DroppedPattern
+                      key={pattern.id}
+                      lane={lane}
+                      name={pattern.name!}
+                      start={pattern.start}
+                      occurances={pattern.length}
+                      setMessage={setMessage}
+                      setDroppedPatterns={setDroppedPatterns}
+                      id={pattern.id}
+                      data={pattern.data!}
+                      droppedPatternsRef={droppedPatternsRef}
+                    />)
+                } else {
+                  return (
+                  <IndividualNoteSection
+                    key={pattern.id}
+                    lane={lane}
+                    setMessage={setMessage}
+                    start={pattern.start}
+                    occurances={pattern.length}
+                    id={pattern.id}
+                    setIndividualNoteSections={setIndividualNoteSections}
+                    individualNoteSectionsRef={individualNoteSectionsRef}
+                  />)
+                }
+              }
+            )}
             </div>
-
         </div>,
         canvas.closest('.canvas_container')!
     );
diff --git a/src/components/PatternDropZone.tsx b/src/components/PatternDropZone.tsx
index 3f94eb0..642d2d4 100644
--- a/src/components/PatternDropZone.tsx
+++ b/src/components/PatternDropZone.tsx
@@ -3,14 +3,25 @@ import Lane from '../scripts/Lane';
 import { createRoot } from 'react-dom/client';
 import DroppedPattern from './DroppedPattern';
 import IndividualNoteSection from './IndividualNoteSection';
+import { PatternModeSection } from '../scripts/types';
+import { supabase } from '../scripts/supa-client';
+import { retrieveBucketData } from '../scripts/main';
 
 interface IPatternDropZoneProps {
     lane: Lane; 
     setMessage: React.Dispatch<React.SetStateAction<string>>;
+
+    droppedPatterns: PatternModeSection[];
+    setDroppedPatterns: React.Dispatch<React.SetStateAction<PatternModeSection[]>>;
+
+    droppedPatternsRef: React.RefObject<PatternModeSection[]>;
 }
 
+
+
 // TODO: Allow for clicking pattern to drop them herer too
-const PatternDropZone: React.FC<IPatternDropZoneProps> = ({ lane, setMessage }) => {       
+const PatternDropZone: React.FC<IPatternDropZoneProps> 
+= ({ lane, setMessage, droppedPatterns, setDroppedPatterns, droppedPatternsRef }) => {       
     
     let topPatternMeasureRef = useRef<number[][]>([]);
     let individualNotesSectionRef = useRef<number[][]>([]);
@@ -19,6 +30,43 @@ const PatternDropZone: React.FC<IPatternDropZoneProps> = ({ lane, setMessage })
 
     let containerRef = useRef<HTMLDivElement | null>(null); 
 
+    let patternID = crypto.randomUUID(); 
+
+    const updatePattern = (id: string, updatedData: Partial<{ start: number; length: number }>) => {
+        setDroppedPatterns(prev => {
+            const updated = prev.map(pattern =>
+                pattern.id === id ? { ...pattern, ...updatedData } : pattern
+            )
+            droppedPatternsRef.current = updated; 
+            return updated;
+        }
+    );};
+
+
+    
+
+    async function loadPattern(occurances: number, patternName: string) {
+        // TODO: Allow for local loading. 
+        let pattern = {id: patternID, start: lane.patternStartMeasure, length: occurances, name: patternName, data: null}
+
+        const userId = (await supabase.auth.getUser()).data.user?.id as string;
+        let patternData = await retrieveBucketData('patterns', `${userId}/${patternName}`);
+    
+        console.log(patternData);
+        pattern.data = patternData; 
+
+        setDroppedPatterns(prev => {
+            const updated = [pattern, ...prev];
+            droppedPatternsRef.current = updated; 
+            return updated; 
+        });
+
+        if(lane.loadPattern(patternData, occurances) == -1) {
+            setMessage('will overflow')
+            // unmount();
+        }  
+    }
+
     const patternStartMeasureChange = (e: number) => {
         setTimeout(() => {
             // console.log('changed to ', e); 
@@ -26,12 +74,12 @@ const PatternDropZone: React.FC<IPatternDropZoneProps> = ({ lane, setMessage })
             // console.log(topPatternMeasureRef.current[topPatternMeasureRef.current.length - 1])
 
             let topPattern = topPatternMeasureRef.current[topPatternMeasureRef.current.length - 1];
-            console.debug(topPatternMeasureRef.current);
+            // console.debug(topPatternMeasureRef.current);
 
             for(let i = 0; i < topPatternMeasureRef.current.length; i++) {
                 let pattern = topPatternMeasureRef.current[i];
 
-                console.debug(pattern);
+                // console.debug(pattern);
                 if(i == 0 && pattern[0] != 0) {
                     console.log('there be notes before first pattern'); 
                     console.log()
@@ -60,10 +108,10 @@ const PatternDropZone: React.FC<IPatternDropZoneProps> = ({ lane, setMessage })
                             individualSection?.remove(); 
                         }
         
-                        root.render(<IndividualNoteSection lane={lane} unmount={unmount} individualNotesSectionRef={individualNotesSectionRef} index={index} setMessage={setMessage} />)
+                        // root.render(<IndividualNoteSection lane={lane} unmount={unmount} individualNotesSectionRef={individualNotesSectionRef} index={index} setMessage={setMessage} />)
                         
-                        containerRef.current?.appendChild(individualSection);
-                        console.debug('pushing individual notes bit ', sectionInfo);
+                        // containerRef.current?.appendChild(individualSection);
+                        // console.debug('pushing individual notes bit ', sectionInfo);
 
                     }
                     console.log(individualNotesSectionRef.current);
@@ -95,10 +143,10 @@ const PatternDropZone: React.FC<IPatternDropZoneProps> = ({ lane, setMessage })
                         individualSection?.remove(); 
                     }
     
-                    root.render(<IndividualNoteSection lane={lane} unmount={unmount} individualNotesSectionRef={individualNotesSectionRef} index={index} setMessage={setMessage} />)
+                    // root.render(<IndividualNoteSection lane={lane} unmount={unmount} individualNotesSectionRef={individualNotesSectionRef} index={index} setMessage={setMessage} />)
                     
-                    containerRef.current?.insertBefore(individualSection, containerRef.current?.childNodes[1]); 
-                    console.debug('pushing individual notes bit ', sectionInfo);
+                    // containerRef.current?.insertBefore(individualSection, containerRef.current?.childNodes[1]); 
+                    // console.debug('pushing individual notes bit ', sectionInfo);
 
                 }
             }   
@@ -154,13 +202,23 @@ const PatternDropZone: React.FC<IPatternDropZoneProps> = ({ lane, setMessage })
             droppedPattern?.remove(); 
         }
 
-        root.render(<DroppedPattern 
-            lane={lane} name={data.name} occurances={data.measures} 
-            unmount={unmount} setMessage={setMessage} topPatternMeasureRef={topPatternMeasureRef}/>);
+        // root.render(<DroppedPattern 
+        //     lane={lane} name={data.name} occurances={data.measures} 
+        //     unmount={unmount} setMessage={setMessage} topPatternMeasureRef={topPatternMeasureRef}/>);
         
+
+        loadPattern(data.measures, data.name); 
+
+
+
+        // updatePattern(patternID, {start: 100, length: 100});
         // container?.prepend(droppedPattern); 
 
-        container?.insertBefore(droppedPattern, container.childNodes[1]); 
+        // container?.insertBefore(droppedPattern, container.childNodes[1]); 
+
+        
+
+
     }}>
         <p>
             Next pattern from measure ({startMeasure + 1})
diff --git a/src/components/styles/homepage.css b/src/components/styles/homepage.css
index a6dff82..b326f61 100644
--- a/src/components/styles/homepage.css
+++ b/src/components/styles/homepage.css
@@ -227,7 +227,7 @@ body {
 
     border-radius: 15px;
 
-    width: 100%;
+    width: 50%;
     /* height: 10vh; */
     min-height: 7vh;
 
diff --git a/src/scripts/Lane.ts b/src/scripts/Lane.ts
index ec03b23..1b1551f 100644
--- a/src/scripts/Lane.ts
+++ b/src/scripts/Lane.ts
@@ -472,7 +472,6 @@ export default class Lane {
     }
 
     public loadPattern(selectedPattern: selectedPattern, measures: number, startMeasure?: number, spliceIndex?: number, difference?: number) {
-
         if(startMeasure == undefined && this.patternStartMeasure + (measures * selectedPattern.measures) > this.measureCount) {
             console.error("Loading this pattern will exceed the lane's measure limit", measures, selectedPattern.measures, this.measureCount);
             return -1; 
@@ -683,7 +682,7 @@ export default class Lane {
                 continue;
             } 
         }
-        console.log('before load ', this.notes[0], newOccurnaces, startMeasure, spliceIndex)
+        console.log('before load ', patternData, this.notes[0], newOccurnaces, startMeasure, spliceIndex)
 
         this.loadPattern(patternData, newOccurnaces, startMeasure, spliceIndex, measureDifference);
         console.log('loaded returning 0');
diff --git a/src/scripts/types.ts b/src/scripts/types.ts
index 2d40561..c4f6923 100644
--- a/src/scripts/types.ts
+++ b/src/scripts/types.ts
@@ -30,4 +30,6 @@ export type LoadedLanePreview = {
     numberOfLanes: number; 
     timeSignatures: number[][]; 
     // difficulty: number; 
-}
\ No newline at end of file
+}
+
+export type PatternModeSection = { id: string; start: number; length: number, name?: string, data?: any};