Add ordering settings

src/InfluxFile.tsx

@@ -13,9 +13,9 @@ type TreeNode = {
 }
 
 export type ExtendedInlinkingFile = {
-	inlinkingFile: InlinkingFile;
-	titleInnerHTML: string;
-	inner: HTMLDivElement[];
+    inlinkingFile: InlinkingFile;
+    titleInnerHTML: string;
+    inner: HTMLDivElement[];
 }
 
 export default class InfluxFile {
@@ -48,21 +48,37 @@ export default class InfluxFile {
     }
 
     async renderAllMarkdownBlocks() {
-		this.components = await Promise.all(this.inlinkingFiles.map(async (inlinkingFile) => {
+        const comparator = this.makeComparisonFn(this.api.getSettings())
+        this.components = await Promise.all(this.inlinkingFiles
+            .sort(comparator)
+            .map(async (inlinkingFile) => {
+
+                // Parse title, and strip innerHTML of enclosing <p>:
+                const titleAsMd = await this.api.renderMarkdown(inlinkingFile.title)
+                const titleInnerHTML = titleAsMd.innerHTML.slice(3, -4)
+
+                const extended: ExtendedInlinkingFile = {
+                    inlinkingFile: inlinkingFile,
+                    titleInnerHTML: titleInnerHTML,
+                    inner: await Promise.all(inlinkingFile.contextSummaries.map(async (summary) => await this.api.renderMarkdown(summary))),
+                }
+
+                return extended
+            }))
+    }
 
-			// Parse title, and strip innerHTML of enclosing <p>:
-			const titleAsMd = await this.api.renderMarkdown(inlinkingFile.title)
-			const titleInnerHTML = titleAsMd.innerHTML.slice(3, -4)
+    /** A sort function to order notes correctly, based on settings. */
+    makeComparisonFn(settings: { [key: string]: boolean }) {
 
-			const extended: ExtendedInlinkingFile = {
-				inlinkingFile: inlinkingFile,
-				titleInnerHTML: titleInnerHTML,
-				inner: await Promise.all(inlinkingFile.contextSummaries.map(async (summary) => await this.api.renderMarkdown(summary))),
-			}
+        const timeVariant = settings.byTimeCreated ? 'ctime' : 'mtime'
+        const flip = !settings.newestFirst
 
-			return extended
-		}))
-	}
+        return function compareDatesFn(a: InlinkingFile, b: InlinkingFile) {
+            if (a.file.stat[timeVariant] < b.file.stat[timeVariant]) return flip ? -1 : 1
+            else if (a.file.stat[timeVariant] > b.file.stat[timeVariant]) return flip ? 1 : -1
+            else return 0
+        }
+    }
 
 }
 
@@ -149,8 +165,8 @@ export class InlinkingFile {
         let output = ''
 
         const traverse = (node: TreeNode, level: number) => {
-                output = output + `${' '.repeat(2 * level)}${node.plain}\n`
-                node.children.forEach(node => { traverse(node, level + 1) })
+            output = output + `${' '.repeat(2 * level)}${node.plain}\n`
+            node.children.forEach(node => { traverse(node, level + 1) })
         }
 
         this.nodeTree.forEach((node: TreeNode) => {

src/InfluxReactComponent.tsx

@@ -9,11 +9,12 @@ export default function InfluxReactComponent(props: InfluxReactComponentProps):
 
 	const { influxFile } = props
 
-
-		return <div>
-			{influxFile?.components.map((extended: ExtendedInlinkingFile) => {
 
-				return <div key={extended.inlinkingFile.file.basename}>
+	return <div className="influx">
+		{influxFile?.components.map((extended: ExtendedInlinkingFile) => {
+
+			return (
+				<div key={extended.inlinkingFile.file.basename}>
 					<h2>{extended.inlinkingFile.file.basename} &nbsp;
 						<span
 							style={{ opacity: 0.5 }}
@@ -29,8 +30,9 @@ export default function InfluxReactComponent(props: InfluxReactComponentProps):
 					))}
 
 				</div>
-			})}
-		</div>
-
+			)
+		})}
+	</div>
+
 
 }

src/apiAdapter.tsx

@@ -35,4 +35,10 @@ export class ApiAdapter {
 		await MarkdownRenderer.renderMarkdown(markdown, div, '/', null)
 		return div
     }
+
+    getSettings () {
+        // @ts-ignore
+        const settings = this.app.plugins?.plugins?.influx?.settings || {}
+        return settings
+    }
 }

src/main.tsx

@@ -5,10 +5,15 @@ import { asyncDecoBuilderExt  } from './cm6/asyncViewPlugin';
 
 interface ObsidianInfluxSettings {
 	dateFormat: string;
+	newestFirst: boolean;
+	sortByCreated: boolean;
+
 }
 
 const DEFAULT_SETTINGS: Partial<ObsidianInfluxSettings> = {
 	dateFormat: "YYYY-MM-DD",
+	newestFirst: true,
+	sortByCreated: true,
 };
 
 

src/settings.tsx

@@ -15,17 +15,31 @@ export class ObsidianInfluxSettingsTab extends PluginSettingTab {
 
         containerEl.empty();
 
+
+        new Setting(containerEl)
+            .setName("Newest first")
+            .setDesc("Order notes so that the newest are shown at the top.")
+            .addToggle((toggle) => {
+                toggle
+                    .setValue(this.plugin.settings.newestFirst)
+                    .onChange(async (value) => {
+                        this.plugin.settings.newestFirst = value;
+                        await this.plugin.saveSettings();
+                    })
+            })
+
+
         new Setting(containerEl)
-            .setName("Date format")
-            .setDesc("Default date format")
-            .addText((text) =>
-                text
-                    .setPlaceholder("MMMM dd, yyyy")
-                    .setValue(this.plugin.settings.dateFormat)
+            .setName("Sort by time created")
+            .setDesc("Order notes according to time created (Disable to sort according to time modified).")
+            .addToggle((toggle) => {
+                toggle
+                    .setValue(this.plugin.settings.byTimeCreated)
                     .onChange(async (value) => {
-                        this.plugin.settings.dateFormat = value;
+                        this.plugin.settings.byTimeCreated = value;
                         await this.plugin.saveSettings();
                     })
-            );
+            })
+
     }
 }

styles.css

@@ -1,5 +1,9 @@
 
 
+.influx {
+    border: 1px solid khaki;
+}
+
 .dvutil {
     padding-left: 1rem;
     margin-left: 1rem;