hgjjhjghfghjfjhgf

App/Configuration.php

@@ -6,6 +6,7 @@ use App\Common\UUID;
 use App\Enumerators\Parameter;
 use App\Enumerators\SessionElement;
 use App\Wrappers\APIWrapper;
+use Darksparrow\AuxiliumSchemaBuilder\Utilities\URLHandling;
 use SimpleXMLElement;
 use Symfony\Component\Yaml\Yaml;
 
@@ -15,6 +16,7 @@ class Configuration
 
     public static function GetConfig(string ...$nav) : string|array
     {
+        URLHandling::$URLBase = 'https://ceilidhkit.com/Schemas/';
         $config = Yaml::parseFile(__DIR__ . "/../Configuration/Configuration.yaml");
 
         $temp = $config;

App/DeegraphNodes/User.php

@@ -0,0 +1,67 @@
+<?php
+
+namespace Auxilium\DatabaseInteractions\Deegraph\Nodes;
+
+
+use App\Wrappers\DeegraphNode;
+
+class User extends DeegraphNode
+{
+    public function __construct(string $objectUuid)
+    {
+        parent::__construct($objectUuid);
+    }
+
+    /**
+     * Retrieves the system node user instance.
+     *
+     * @return User Returns a User instance representing the system node.
+     */
+    public static function get_system_node(): User
+    {
+        return new User(INSTANCE_CREDENTIAL_DDS_LOGIN_NODE);
+    }
+
+    public function getDisplayName(): mixed
+    {
+        if($this->getProperty("display_name") != null)
+        {
+            return $this->getProperty("display_name");
+        }
+        if($this->getProperty("name") != null)
+        {
+            return $this->getProperty("name");
+        }
+        return null;
+    }
+
+    public function getFullName(): mixed
+    {
+        if($this->getProperty("name") != null)
+        {
+            return $this->getProperty("name");
+        }
+        return null;
+    }
+
+    public function getContactEmail(): mixed
+    {
+        if($this->getProperty("contact_email") != null)
+        {
+            return $this->getProperty("contact_email");
+        }
+        return null;
+    }
+
+    public function __toString(): string
+    {
+        if($this->getProperty("name") == null)
+        {
+            return "";
+        }
+        else
+        {
+            return strval($this->getProperty("name"));
+        }
+    }
+}

App/DeegraphSchemas/CollectionSchema.php

@@ -0,0 +1,15 @@
+<?php
+
+namespace App\DeegraphSchemas;
+
+use Darksparrow\AuxiliumSchemaBuilder\Attributes\SchemaDocument;
+
+#[SchemaDocument(
+    Name   : "collection",
+    MaxSize: 0,
+    Comment: "This is intended as an inheritable schema used to signify to software that it SHOULD display the numeric properties of this node as an inlined list",
+)]
+class CollectionSchema
+{
+
+}

App/DeegraphSchemas/TuneSchema.php

@@ -0,0 +1,33 @@
+<?php
+
+namespace App\DeegraphSchemas;
+
+use Darksparrow\AuxiliumSchemaBuilder\Attributes\SchemaDocument;
+use Darksparrow\AuxiliumSchemaBuilder\Attributes\SchemaDocumentField;
+use Darksparrow\AuxiliumSchemaBuilder\Enumerators\SchemaFieldExistence;
+
+#[SchemaDocument(
+    Name   : "Tune",
+    MaxSize: 0,
+    Comment: "",
+)]
+class TuneSchema
+{
+    #[SchemaDocumentField(
+        Name     : "Title",
+        Existence: SchemaFieldExistence::MUST,
+        Comment  : "",
+        MaxSize  : 2048,
+        MimeType : "text/plain",
+    )]
+    public string $Title;
+
+    #[SchemaDocumentField(
+        Name     : "Copyright",
+        Existence: SchemaFieldExistence::SHOULD,
+        Comment  : "",
+        MaxSize  : 2048,
+        MimeType : "text/plain",
+    )]
+    public string $Copyright;
+}

App/Wrappers/CeilidhKitLFSObject.php

@@ -0,0 +1,8 @@
+<?php
+
+namespace App\Wrappers;
+
+class CeilidhKitLFSObject
+{
+
+}

App/Wrappers/DeegraphInteractions.php

@@ -0,0 +1,44 @@
+<?php
+
+namespace App\Wrappers;
+
+use App\Configuration;
+use Darksparrow\DeegraphInteractions\Core\DeegraphServer;
+use Darksparrow\DeegraphInteractions\DataStructures\NewNodeDetails;
+use Darksparrow\DeegraphInteractions\DataStructures\UUID;
+use Darksparrow\DeegraphInteractions\QueryBuilder\QueryBuilder;
+
+class DeegraphInteractions
+{
+    public static function GetConnection(): DeegraphServer
+    {
+        return new DeegraphServer(
+            token               : Configuration::GetConfig("Deegraph", "Token"),
+            server              : Configuration::GetConfig("Deegraph", "Host"),
+            port                : Configuration::GetConfig("Deegraph", "Port"),
+            allowSelfSignedCerts: Configuration::GetConfig("Deegraph", "AllowSelfSignedCerts"),
+        );
+    }
+
+    public static function NewNode(
+        string $dataURL = null,
+        string $schema = null,
+    ): NewNodeDetails
+    {
+        return self::GetConnection()->CreateNewNode(
+            actorID: new UUID(Configuration::GetConfig("Deegraph", "LoginNode")),
+            dataURL: $dataURL,
+            schema : $schema,
+            creator: new UUID(Configuration::GetConfig("Deegraph", "LoginNode")),
+        );
+    }
+
+    public static function AddProperty()
+    {
+        $query = QueryBuilder::Link()
+            ->linkOfRelativePath($node->NodeID, $this->NodeID)
+            ->as($key);
+        if($force) $query = $query->Force();
+        $query = $query->Build();
+    }
+}

App/Wrappers/DeegraphNode.php

@@ -0,0 +1,472 @@
+<?php
+
+namespace App\Wrappers;
+
+use Auxilium\DatabaseInteractions\Deegraph\Nodes\User;
+use Darksparrow\DeegraphInteractions\DataStructures\DataURL;
+use Darksparrow\DeegraphInteractions\DataStructures\UUID;
+use Darksparrow\DeegraphInteractions\Exceptions\InvalidUUIDFormatException;
+use Darksparrow\DeegraphInteractions\QueryBuilder\QueryBuilder;
+
+class DeegraphNode
+{
+    /**
+     * Static cache for storing already instantiated nodes.
+     * @var array
+     */
+    private static $cached_nodes = [];
+
+
+    private $RawContent = null;
+    private $Metadata = null;
+
+    private ?array $CachedProperties = null;
+    private ?array $CachedReferences = null;
+    private ?array $CachedPermissions = null;
+
+    private bool $HasRawContentBeenFetchedYet = false;
+    private bool $HasMetadataBeenFetchedYet = false;
+
+    private UUID $NodeID;
+
+    /**
+     * Constructor to initialise a DeegraphNode with a given ID.
+     * @param string $id The unique identifier for the node.
+     * @throws InvalidUUIDFormatException
+     */
+    public function __construct(string $id)
+    {
+        $this->NodeID = new UUID($id);
+    }
+
+
+    /**
+     * Fetches a Node from the database by its path.
+     * @param string $path The path to the Node.
+     * @return DeegraphNode|null The Node if found, otherwise null.
+     */
+    public static function from_path(string $path): ?DeegraphNode
+    {
+        return GraphDatabaseConnection::node_from_path($path);
+    }
+
+    /**
+     * Converts the Node to a string by fetching its data.
+     * If the data is a string, it returns that string; otherwise, it returns an empty string.
+     * @return string
+     */
+    public function __toString()
+    {
+        if(is_string($this->getData()))
+        {
+            return $this->getData();
+        }
+        else
+        {
+            return "";
+        }
+    }
+
+    /**
+     * Retrieves raw content data associated with the node.
+     * @return mixed Raw content or null if not fetched.
+     */
+    public function getData(User $actor = null)
+    {
+        $content = $this->getContent($actor);
+        return ($content == null) ? null : $content->getData();
+    }
+
+    public function getContent(User $actor = null): CeilidhKitLFSObject|DataURL|null
+    {
+        if($this->getRawContent($actor) != null)
+        {
+            if(str_starts_with($this->getRawContent($actor), "data:"))
+            {
+                return new DataURL($this->getRawContent($actor));
+            }
+            elseif(str_starts_with($this->getRawContent($actor), "auxlfs:"))
+            {
+                return new CeilidhKitLFSObject($this->getRawContent($actor));
+            }
+        }
+        return null;
+    }
+
+    public function getRawContent(User $actor = null)
+    {
+        if($this->HasRawContentBeenFetchedYet)
+        {
+            return $this->RawContent;
+        }
+
+        if($actor == null)
+        {
+            $actor = Session::get_current()->getUser();
+        }
+
+        $result = GraphDatabaseConnection::raw_request($actor, "/api/v1/" . $this->NodeID, "GET");
+
+        if(is_array($result))
+        {
+            if(isset($result["@data"]))
+            {
+                $this->RawContent = $result["@data"];
+            }
+        }
+
+        $this->HasRawContentBeenFetchedYet = true;
+        return $this->RawContent;
+    }
+
+    public function getUuid(): string
+    {
+        return $this->NodeID->GetPlainUUID();
+    }
+
+    /**
+     * Adds a property (link) between this Node and another Node.
+     * @param string $key The key representing the property.
+     * @param DeegraphNode $node The Node to link as a property.
+     * @param User|null $actor The User performing the operation.
+     * @param bool $force Whether to force the link creation.
+     * @return mixed The result of the graph database query.
+     * @throws InvalidUUIDFormatException
+     */
+    public function addProperty(string $key, DeegraphNode $node, User $actor = null, bool $force = false)
+    {
+        if($actor == null)
+        {
+            $actor = Session::get_current()->getUser();
+        }
+        if(preg_match('/^[a-z_][a-z0-9_]*$/', $key) || preg_match('/^[0-9]+$/', $key) || $key == "#")
+        { // Let's not allow injections! (Even though DDS handles permissions and damage will be limited to this user anyway, there's not really a benefit to *not* preventing injections)
+            // $query = "LINK {".$node->NodeID."} AS ".$key." OF {".$this->NodeID."}".($force ? " FORCE" : "");
+            $query = QueryBuilder::Link()
+                ->linkOfRelativePath($node->NodeID, $this->NodeID)
+                ->as($key);
+            if($force) $query = $query->force();
+            $query = $query->build();
+            return GraphDatabaseConnection::query($actor, $query);
+        }
+        else
+        {
+            return false;
+        }
+    }
+
+    /**
+     * Removes a property link from this Node.
+     * @param string $key The key of the property to unlink.
+     * @param User|null $actor The user performing the operation.
+     * @return mixed The result of the graph database query.
+     * @throws InvalidUUIDFormatException
+     */
+    public function unlinkProperty(string $key, User $actor = null)
+    {
+        if($actor == null)
+        {
+            $actor = Session::get_current()->getUser();
+        }
+        if(preg_match('/^[a-z_][a-z0-9_]*$/', $key) || preg_match('/^[0-9]+$/', $key))
+        { // Let's not allow injections! (Even though DDS handles permissions and damage will be limited to this user anyway, there's not really a benefit to *not* preventing injections)
+            // $query = "UNLINK ".$key." FROM {".$this->GetNodeID()."}";
+            $query = QueryBuilder::Unlink()
+                ->unlinkWhat($key)
+                ->from($this->NodeID)
+                ->build();
+            if($this->CachedProperties != null)
+            {
+                if(isset($this->CachedProperties[$key]))
+                {
+                    unset($this->CachedProperties[$key]); // Get rid of any dangling references to this
+                }
+            }
+            return GraphDatabaseConnection::query($actor, $query);
+        }
+        else
+        {
+            return false;
+        }
+    }
+
+    /**
+     * Deletes this Node from the graph database.
+     * @param User|null $actor The user performing the operation.
+     * @return mixed The result of the graph database query.
+     * @throws InvalidUUIDFormatException
+     */
+    public function delete(User $actor = null)
+    {
+        if($actor == null)
+        {
+            $actor = Session::get_current()->getUser();
+        }
+
+        // $query = "DELETE {".$this->GetNodeID()."}";
+        $query = QueryBuilder::Delete()
+            ->relativePath($this->NodeID)
+            ->build();
+        return GraphDatabaseConnection::query($actor, $query);
+    }
+
+    /**
+     * Checks if this Node is the same as another.
+     * @param DeegraphNode $n Another Node to compare.
+     * @return bool True if they are the same, false otherwise.
+     */
+    public function is(DeegraphNode $n): bool
+    {
+        if($this->getId() == $n->getId())
+        {
+            return true;
+        }
+        return false;
+    }
+
+    /**
+     * Returns the UUID of the Node as a string.
+     * @return string Node UUID.
+     */
+    public function getId(): string
+    {
+        return $this->NodeID->GetPlainUUID();
+    }
+
+    /**
+     * Fetches the permissions of the Node from the database.
+     * @param User|null $actor The user performing the operation.
+     * @return array|null Permissions data or null if not fetched.
+     * @throws InvalidUUIDFormatException
+     */
+    public function getPermissions(User $actor = null): ?array
+    {
+        if($actor == null)
+        {
+            $actor = Session::get_current()->getUser();
+        }
+        if($this->CachedPermissions != null)
+        {
+            return $this->CachedPermissions;
+        }
+        $outputMap = [];
+        // $query = "PERMS ON {".$this->GetNodeID()."}";
+        $query = QueryBuilder::Permission()
+            ->on($this->NodeID)
+            ->build();
+        $response = GraphDatabaseConnection::query($actor, $query);
+        if(isset($response["@permissions"]))
+        {
+            foreach($response["@permissions"] as $value)
+            {
+                $outputMap[] = $value;
+            }
+            $this->CachedPermissions = $outputMap;
+            return $this->CachedPermissions;
+        }
+        else
+        {
+            return null;
+        }
+    }
+
+    /**
+     * Fetches references to other Nodes.
+     * @param User|null $actor The user performing the operation.
+     * @return array|null References data or null if not fetched.
+     * @throws InvalidUUIDFormatException
+     */
+    public function getReferences(User $actor = null): ?array
+    {
+        if($actor == null)
+        {
+            $actor = Session::get_current()->getUser();
+        }
+        if($this->CachedReferences != null)
+        {
+            return $this->CachedReferences;
+        }
+        $outputMap = [];
+        // $query = "REFERENCES {".$this->GetNodeID()."}";
+        $query = QueryBuilder::References()
+            ->relativePath($this->NodeID)
+            ->build();
+        $response = GraphDatabaseConnection::query($actor, $query);
+        if(isset($response["@map"]))
+        {
+            foreach($response["@map"] as $key => $value)
+            {
+                $arr = [];
+                foreach($value as $refNodeId)
+                {
+                    $arr[] = DeegraphNode::from_id($refNodeId);
+                }
+                $outputMap[$key] = $arr;
+            }
+            $this->CachedReferences = $outputMap;
+            return $outputMap;
+        }
+        else
+        {
+            return null;
+        }
+    }
+
+    /**
+     * Fetches a Node by its ID, using a static cache for optimisation.
+     * @param string|null $id The ID of the Node.
+     * @return DeegraphNode|null The Node if found or created, null otherwise.
+     * @throws InvalidUUIDFormatException
+     */
+    public static function from_id(string $id = null): ?DeegraphNode
+    {
+        if($id == null)
+        {
+            return null;
+        }
+
+        if(isset(self::$cached_nodes[$id]))
+        {
+            if(self::$cached_nodes[$id] instanceof DeegraphNode)
+            {
+                return self::$cached_nodes[$id]; // Skip creating the node representation - we've already loaded it!
+            }
+        }
+
+        // Do stuff
+
+        self::$cached_nodes[$id] = new DeegraphNode($id);
+
+        if(isset(self::$cached_nodes[$id]))
+        {
+            return self::$cached_nodes[$id];
+        }
+        else
+        {
+            return null;
+        }
+    }
+
+    /**
+     * Retrieves a property of the Node by its key.
+     * @param string $property Property name to fetch.
+     * @param User|null $actor The user performing the operation.
+     * @return mixed|null Property value or null if not found.
+     */
+    public function getProperty(string $property, User $actor = null): mixed
+    {
+        if($actor == null)
+        {
+            $actor = Session::get_current()->getUser();
+        }
+        $temp = $this->getProperties($actor);
+        if(isset($temp[$property]))
+            return $temp[$property];
+        return null;
+    }
+
+    public function getProperties(User $actor = null): ?array
+    {
+        if($actor == null)
+        {
+            $actor = Session::get_current()->getUser();
+        }
+        if($this->CachedProperties != null)
+        {
+            return $this->CachedProperties;
+        }
+        $outputMap = [];
+        // $query = "DIRECTORY {".$this->GetNodeID()."}";
+        $query = QueryBuilder::Directory()
+            ->relativePath($this->NodeID)
+            ->build();
+
+        $response = GraphDatabaseConnection::query($actor, $query);
+        if(isset($response["@map"]))
+        {
+            foreach($response["@map"] as $key => $value)
+            {
+                $outputMap[$key] = DeegraphNode::from_id($value);
+            }
+            $this->CachedProperties = $outputMap;
+            return $outputMap;
+        }
+        else
+        {
+            return null;
+        }
+    }
+
+    public function getObjectSize()
+    {
+        $content = $this->getContent($actor);
+        return ($content == null) ? 0 : $content->getSize();
+    }
+
+    public function getMimeType()
+    {
+        $content = $this->getContent($actor);
+        return ($content == null) ? null : $content->getMimeType();
+    }
+
+    public function getTimestamp(): string
+    {
+        return date("c", strtotime($this->getNodeMetadata()["@created"]));
+    }
+
+    /**
+     * Retrieves metadata associated with the node.
+     * @return mixed Metadata or null if not fetched.
+     */
+    public function getNodeMetadata(User $actor = null): ?array
+    {
+        if($this->HasMetadataBeenFetchedYet)
+        {
+            return $this->Metadata;
+        }
+
+        if($actor == null)
+        {
+            $actor = Session::get_current()->getUser();
+        }
+
+        $result = GraphDatabaseConnection::raw_request($actor, "/api/v1/{" . $this->getId() . "}", "GET");
+
+        if(is_array($result))
+        {
+            $this->Metadata = $result;
+        }
+
+        $this->HasMetadataBeenFetchedYet = true;
+        return $this->Metadata;
+    }
+
+    public function getTimestampInt(): false|int
+    {
+        return strtotime($this->getNodeMetadata()["@created"]);
+    }
+
+    public function getSchema()
+    {
+        return Schema::from_url($this->getSchemaUrl());
+    }
+
+    public function getSchemaUrl()
+    {
+        return isset($this->getNodeMetadata()["@schema"]) ? $this->getNodeMetadata()["@schema"] : null;
+    }
+
+    public function getCreator(): ?DeegraphNode
+    {
+        return DeegraphNode::from_id($this->getNodeMetadata()["@creator"]);
+    }
+
+    public function extendsOrInstanceOf(string $schema): bool
+    {
+        if(!isset($this->getNodeMetadata()["@schema"]))
+        {
+            return false;
+        }
+        return $this->getNodeMetadata()["@schema"] == $schema;
+    }
+}

Configuration/Configuration.yaml

@@ -17,6 +17,13 @@ MariaDB:
   Password: ;MARIADB__PASSWORD
   Database: FolkTuneFinder_Live
 
+Deegraph:
+  Host: localhost
+  Port: 8880
+  Token: ;DEEGRAPH__TOKEN
+  LoginNode: ;DEEGRAPH__LOGIN_NODE
+  AllowSelfSignedCerts: ;DEEGRAPH__ALLOW_SELF_SIGNED_CERTS
+
 reCAPTCHA:
   KeyID: ;RECAPTCHA_ENTERPRISE_KEY_ID
   ProjectID: ;RECAPTCHA_ENTERPRISE_PROJECT_ID

Pages/test.php

@@ -0,0 +1,40 @@
+<?php
+
+use App\Configuration;
+use App\DeegraphSchemas\TuneSchema;
+use App\Wrappers\DeegraphInteractions;
+use App\Wrappers\TwigWrapper;
+use Darksparrow\AuxiliumSchemaBuilder\Utilities\URLHandling;
+use Darksparrow\DeegraphInteractions\DataStructures\UUID;
+use Darksparrow\DeegraphInteractions\QueryBuilder\QueryBuilder;
+
+require_once __DIR__ . "/../vendor/autoload.php";
+
+$db = DeegraphInteractions::GetConnection();
+
+
+$temp = DeegraphInteractions::NewNode(
+    dataURL: 'https://google.com',
+    schema: URLHandling::GetURLForSchema(TuneSchema::class),
+);
+
+
+
+$temp = QueryBuilder::Select()
+    ->relativePaths([
+        '.'
+    ])
+    // ->From('**')
+    ->instanceOf(schema: URLHandling::GetURLForSchema(TuneSchema::class))
+    ->build()
+    ->runQuery(
+        actorID: new UUID(Configuration::GetConfig("Deegraph", "LoginNode")),
+        server: $db,
+    )
+;
+
+foreach($temp->Rows as $row)
+{
+    var_dump($row);
+    echo "<br><br>";
+}

Pages/tune/uuid.php

@@ -70,12 +70,79 @@ if(SessionWrapper::Get(SessionElement::IS_LOGGED_IN))
 }
 
 
+$tuneParts = $db->RunSelect(
+    queryBuilder: SQLQueryBuilderWrapper::SELECT(
+        table: 'TuneParts',
+    )
+        ->where(cond: 'T.TuneID=:__tune_id__')
+        ->bindValue(name: '__tune_id__', value: $tuneDetails['ID'])
+);
+
+$similarTuneParts = [];
+foreach($tuneParts as $tunePartDetails)
+{
+    $similarTunesA = $db->RunSelect(
+        queryBuilder: SQLQueryBuilderWrapper::SELECT(
+            table: 'SimilarTuneParts',
+        )
+            ->cols(cols: [
+                'T_T.ID AS TuneID',
+                'T_T.Title AS TuneTitle',
+                'T_TP.PartLetter AS TunePartLetter',
+            ])
+            ->join(
+                join: 'INNER',
+                spec: 'TuneParts AS T_TP',
+                cond: 'T.TunePartB=T_TP.ID',
+            )
+            ->join(
+                join: 'INNER',
+                spec: 'Tunes AS T_T',
+                cond: 'T_TP.TuneID=T_T.ID',
+            )
+            ->where(cond: 'T.TunePartA=:__tune_part_id__')
+            ->bindValue(name: '__tune_part_id__', value: $tunePartDetails['ID'])
+    );
+    $similarTunesB = $db->RunSelect(
+        queryBuilder: SQLQueryBuilderWrapper::SELECT(
+            table: 'SimilarTuneParts',
+        )
+            ->cols(cols: [
+                'T_T.ID AS TuneID',
+                'T_T.Title AS TuneTitle',
+                'T_TP.PartLetter AS TunePartLetter',
+            ])
+            ->join(
+                join: 'INNER',
+                spec: 'TuneParts AS T_TP',
+                cond: 'T.TunePartA=T_TP.ID',
+            )
+            ->join(
+                join: 'INNER',
+                spec: 'Tunes AS T_T',
+                cond: 'T_TP.TuneID=T_T.ID',
+            )
+            ->where(cond: 'T.TunePartB=:__tune_part_id__')
+            ->bindValue(name: '__tune_part_id__', value: $tunePartDetails['ID'])
+    );
+    $builder = [];
+    foreach($similarTunesA as $temp)
+        $builder[] = $temp;
+    foreach($similarTunesB as $temp)
+        $builder[] = $temp;
+
+    $similarTuneParts[$tunePartDetails['PartLetter']] = $builder;
+}
+
+
+
 TwigWrapper::RenderTwig(
     target: "Pages/tune/uuid.html.twig",
     arguments: [
         "TuneDetails"=>$tuneDetails,
         "SetsThisTuneIsIn" => $setsThisTuneIsIn,
         "MyVote"=>$myVote,
+        "SimilarTuneParts"=>$similarTuneParts,
     ]
 );
 

Public/Static/CSS/Elements/Columns.css

@@ -1,20 +1,45 @@
-
 .container {
     display: flex;
     width: 100%;
 }
 
-.left,
+/* Default widths */
+.left, .right, .center, .left-main, .right-main {
+    flex-grow: 0;
+    flex-shrink: 0;
+}
+
+/* Three-column layout */
+.left, .right {
+    width: 24%;
+}
+
+.center {
+    width: 52%;
+}
+
+/* Two-column layout: left-main + right */
+.left-main {
+    width: 75%;
+}
+
 .right {
     width: 24%;
 }
 
-.left-main,
+/* Two-column layout: left + right-main */
+.left {
+    width: 24%;
+}
+
 .right-main {
     width: 75%;
 }
 
-.center {
+/* Ensure flex container adapts */
-    width: 50%;
+.container:has(.left-main) {
+    justify-content: space-between;
+}
+.container:has(.right-main) {
+    justify-content: space-between;
 }
-

Public/Static/CSS/Elements/Rating.css

@@ -1,6 +1,5 @@
 #RatingContainer {
     text-align: center;
-    margin-top: 2rem;
     font-family: Arial, sans-serif;
 }
 

Public/Static/CSS/Elements/_General.css

@@ -20,6 +20,6 @@ main {
 }
 
 .InnerContent {
-    width: 80%;
+    width: 90%;
 }
 

Public/Static/CSS/Elements/_Misc.css

@@ -0,0 +1,15 @@
+
+.ThreeDContainer {
+    border-width: 0.5rem;
+    border-style: ridge;
+    border-color: #000000;
+    width: auto;
+    padding: .5em 2em;
+}
+
+.NotationContainer {
+
+}
+
+.RawABCReadoutContainer {
+}

Public/Static/CSS/Mapper.css

@@ -7,6 +7,7 @@
 
 /* ELEMENTS */
 @import "/Static/CSS/Elements/_General.css";
+@import "/Static/CSS/Elements/_Misc.css";
 
 @import "/Static/CSS/Elements/Accordion.css";
 @import "/Static/CSS/Elements/Columns.css";

Routing/Router.php

@@ -1,9 +1,12 @@
 <?php
 
 use App\Configuration;
+use App\DeegraphSchemas\CollectionSchema;
+use App\DeegraphSchemas\TuneSchema;
 use App\Enumerators\SessionElement;
 use App\Wrappers\SessionWrapper;
 use App\Wrappers\TwigWrapper;
+use Darksparrow\AuxiliumSchemaBuilder\SchemaBuilder\SchemaBuilder;
 
 require_once __DIR__ . "/../vendor/autoload.php";
 
@@ -17,6 +20,8 @@ $requestElements = explode("/", trim($requestUri, "/"));
 $routes = [
     ""                  => '/../Pages/index.php',
 
+    "test"             => '/../Pages/test.php',
+
     "login"             => '/../Pages/login.php',
     "logout"            => '/../Pages/logout.php',
     "change-password"   => '/../Pages/change-password.php',
@@ -96,6 +101,16 @@ elseif ($requestElements[0] === "create" && isset($requestElements[1]))
             return true;
     }
 }
+elseif ($requestElements[0] === "Schemas" && isset($requestElements[1]))
+{
+    switch($requestElements[1])
+    {
+        case "Collection.json":
+            SchemaBuilder::RenderSchema(CollectionSchema::class);
+        case "Tune.json":
+            SchemaBuilder::RenderSchema(TuneSchema::class);
+    }
+}
 
 // Default: route not found
 http_response_code(404);

Templates/Pages/tune/uuid.html.twig

@@ -31,7 +31,22 @@
     <div class="InnerContent">
         <div>
             <div class="container">
-                <div class="left">
+                <div class="left-main">
+                    <div id="NotationContainer--{{ TuneDetails.ID }}" class="ThreeDContainer NotationContainer"></div>
+
+                    <div class="ThreeDContainer RawABCReadoutContainer ">
+                        <h2>{{ "ABC Notation"|translate }}</h2>
+                        <pre id="RawABCReadout--{{ TuneDetails.ID }}"></pre>
+                    </div>
+                </div>
+                <div class="right">
+
+                    <div class="ThreeDContainer">
+                        <h2>{{ "Audio"|translate }}</h2>
+                        <div id="MIDI--{{ TuneDetails.ID }}"></div>
+                    </div>
+
+                    <div class="ThreeDContainer">
                         <div class="DLContainer">
                             <h2>{{ "Tune Overview"|translate }}</h2>
                             <dl>
@@ -48,7 +63,9 @@
                                 <dd>{{ TuneDetails.Parts|json_encode }}</dd>
                             </dl>
                         </div>
-                    <div id="RatingContainer">
+                    </div>
+
+                    <div id="RatingContainer" class="ThreeDContainer" >
                         <h2>{{ "Rating"|translate }}</h2>
                         <div class="RatingButtons">
                             {% if _SESSION_.IS_LOGGED_IN %}
@@ -68,19 +85,8 @@
                             |
                         </div>
                     </div>
-                </div>
-                <div class="center">
-                    <div id="NotationContainer--{{ TuneDetails.ID }}"></div>
-                    <div>
-                        <h2>{{ "ABC Notation"|translate }}</h2>
-                        <pre id="RawABCReadout--{{ TuneDetails.ID }}"></pre>
-                    </div>
-                </div>
-                <div class="right">
-                    <h2>{{ "Audio"|translate }}</h2>
-                    <div id="MIDI--{{ TuneDetails.ID }}"></div>
 
-                    <div id="TuneSetContainer">
+                    <div class="ThreeDContainer">
                         <h2>{{ "Sets this tune is in"|translate }}</h2>
                         <ul>
                             {% for tuneSet in SetsThisTuneIsIn %}
@@ -90,6 +96,24 @@
                             {% endfor %}
                         </ul>
                     </div>
+
+                    <div class="ThreeDContainer">
+                        <h2>{{ "Similar Tunes"|translate }}</h2>
+                            {% for tunePartLetter, similarTuneParts in SimilarTuneParts %}
+                                <h3>Part {{ tunePartLetter }} is similar to...</h3>
+                                <ul>
+                                    {% for temp in similarTuneParts %}
+                                        <li>
+                                            <a href="/tune/{{ temp.TuneID }}">
+                                                {{ temp.TuneTitle }} (part {{ temp.TunePartLetter }})
+                                            </a>
+                                        </li>
+                                    {% endfor %}
+                                </ul>
+                            {% endfor %}
+                    </div>
+
+                    <hr>
                 </div>
             </div>
         </div>

composer.json

@@ -30,6 +30,9 @@
     "aura/sqlquery": "2.8.1",
 
     "google/cloud-recaptcha-enterprise": "v1.7.0",
-    "ramsey/uuid": "*"
+    "ramsey/uuid": "*",
+
+    "darksparrow/deegraph-interactions": "dev-dev",
+    "darksparrow/auxilium-schema-builder": "v0.1"
   }
 }