chat-reader/csv_to_chat.js

// https://sebhastian.com/javascript-csv-to-array/
// file reader code from here

const myForm = document.getElementById("myForm");
const csvFile = document.getElementById("csvFile");
const categoriesContainer = document.getElementById("categories");
const activeAllButton = document.getElementById("active-all");
const chatContainer = document.getElementById("chat-container");
let baloonList;

// Filter Categories

let tags = [];
let selectedTopics = new Set();
let allActive;
let TagList;

// Activate all tags

function ShowAllTags() {
	TagList.forEach((tag) => {
		selectedTopics.add(tag.getAttribute("data-tag"));
		tag.classList.add("active");
		tag.setAttribute("aria-expanded", "true");
	});
	allActive = true;
	showSelectedBaloons();
}

function allActiveCheck() {
	if (TagList.length === selectedTopics.size) {
		allActive = true;
		TagList.forEach((tag) => tag.classList.add("all"));
		TopicFilter.firstElementChild.classList.add("active");
	} else {
		allActive = false;
		TagList.forEach((tag) => tag.classList.remove("all"));
		TopicFilter.firstElementChild.classList.remove("active");
	}
}

// Listen for

categoriesContainer.addEventListener("click", (e) => {
	if (e.target.tagName === "LI") {
		conditionalToggle(e.target);
		showSelectedBaloons();
	}
});

activeAllButton.addEventListener("click", (e) => {
	activeAllButton.classList.add("active");
	activeAllButton.setAttribute("aria-expanded", "true");
	ShowAllTags();
});

function conditionalToggle(element) {
	if (allActive) {
		TagList.forEach((tag) => {
			selectedTopics.delete(tag.getAttribute("data-tag"));
			tag.classList.remove("active");
			tag.setAttribute("aria-expanded", "false");
		});
		activeAllButton.classList.remove("active");
		allActive = false;
	}

	if (element.classList.contains("active")) {
		element.classList.remove("active");
		element.setAttribute("aria-expanded", "false");
		selectedTopics.delete(element.getAttribute("data-tag"));
	} else {
		element.classList.add("active");
		element.setAttribute("aria-expanded", "true");
		selectedTopics.add(element.getAttribute("data-tag"));
	}

	allActive = TagList.length == selectedTopics.size;

	if (allActive) {
		activeAllButton.classList.add("active");
		activeAllButton.setAttribute("aria-expanded", "true");
	}
}

function showSelectedBaloons() {
	baloonList.forEach((baloon) => baloon.classList.remove("active"));

	selectedTopics.forEach((topic) => {
		let selectedBaloons = baloonList.filter((el) => {
			topic = topic.replaceAll(" ", "-");
			return el.classList.contains(topic);
		});
		selectedBaloons.forEach((baloon) => {
			baloon.classList.add("active");
		});
	});

	allActiveCheck();
}

// Standard CSV

window.onload = function () {
	const data = csvToArray(defaultCSV);

	data.forEach((baloon) => {
		let baloonTag = [];
		if (baloon.tag) {
			let tag = baloon.tag.split(",").map((t) => t.trim());
			tags = [...tags, ...tag];
			baloonTag = [...tag];
		}

		chatContainer.appendChild(createBaloon(baloon.text, baloon.author, baloonTag));
	});

	baloonList = [...document.getElementsByClassName("baloon")];

	let unique = new Set(tags);
	unique.forEach((tag) => {
		categoriesContainer.appendChild(createTag(tag));
	});

	TagList = document.querySelectorAll("[data-tag]");
	ShowAllTags();
};

// Custom CSV loader

myForm.addEventListener("submit", function (e) {
	e.preventDefault();
	const input = csvFile.files[0];
	const reader = new FileReader();

	reader.onload = function (e) {
		const text = e.target.result;
		const data = csvToArray(text);

		data.forEach((baloon) => {
			let baloonTag = [];
			if (baloon.tag) {
				let tag = baloon.tag.split(",").map((t) => t.trim());
				tags = [...tags, ...tag];
				baloonTag = [...tag];
			}

			chatContainer.appendChild(createBaloon(baloon.text, baloon.author, baloonTag));
		});

		baloonList = [...document.getElementsByClassName("baloon")];
	};

	reader.readAsText(input);
});

// Create an array of object from a CSV file

function csvToArray(str, delimiter = ";") {
	// slice from start of text to the first \n index
	// use split to create an array from string by delimiter
	const headers = str.slice(0, str.indexOf("\n")).split(delimiter);

	// slice from \n index + 1 to the end of the text
	// use split to create an array of each csv value row
	const rows = str.slice(str.indexOf("\n") + 1).split("\n");

	// Map the rows
	// split values from each row into an array
	// use headers.reduce to create an object
	// object properties derived from headers:values
	// the object passed as an element of the array
	const arr = rows.map(function (row) {
		const values = row.split(delimiter);
		const el = headers.reduce(function (object, header, index) {
			object[header] = values[index];
			return object;
		}, {});
		return el;
	});

	// return the array
	return arr;
}

// Create Baloon

function createBaloon(text, username, tags) {
	let baloon = document.createElement("div");
	baloon.classList.add("baloon");

	let contents;
	let author;

	if (text) {
		contents = document.createElement("p");
		contents.classList.add("contents");
		contents.innerHTML = text;
		baloon.appendChild(contents);
	}

	if (username) {
		author = document.createElement("span");
		author.classList.add("author");
		author.innerHTML = username;
		baloon.appendChild(author);
	}

	if (tags) {
		tags.forEach((tag) => {
			let category = document.createElement("span");
			category.innerHTML = tag;
			category.classList.add("category");
			if (text) contents.appendChild(category);

			tag = tag.replaceAll(" ", "-");
			baloon.classList.add(tag);
		});
	}

	return baloon;
}

// Create Tag

function createTag(tag) {
	let chip = document.createElement("li");
	chip.classList.add("tag");
	chip.setAttribute("data-tag", tag);
	chip.setAttribute("tabindex", 0);
	chip.innerHTML = tag;
	return chip;
}

// wops sorry......... this is for the default chat contents

const defaultCSV =
	'text;author;image;tag\nsince we are exposed to several topics relates to orientation / disorientation / editing / so we could help(?) the readers to navigate different texts ;yellow;;navigation, orientation\n(accessibility);gray;;accessibility\nbridges between different registers;lime;;addressing\n(also consider how you have been doing this already).;sky;;\ndisruption\u00A0 ( make you aware of the materiality of the text) / it isn\'t just a voice in your head / / people being able to interact from different directions;acqua;;disruption, materiality, orientation\nbreak down the hierarchy of text and language;acqua;;hierarchy, addressing\n(also through forms of reading/reading templates/formats);violet;;materiality, forms\nthe reader can navigate through the reader we are creating;acqua;image;navigation\nwhat are we trying to communicate?;acqua;;purpose\nreader = navigation of readers, layers on layers, different voices inside the text, easy/different types of experiences, to access in different ways to the content/texts/language;acqua;;addressing, accessibility, plurality\nUse really well known texts;acqua;;source\n(like a pop song);yellow;image;popular\n, we could disrupt these texts and find a way to record and accumulate everyone\'s experience;acqua;;disruption, aggregation\nif you make a footprint, someone can follow the footprint and it can become a road;acqua;;navigation\n" >>> ""Navigation is, above all, a synthetic operation. First, it\u2019s the ongoing mediation of intentionality with the contingency of unknown or accidental events. Navigation is not destination, but it is not entirely divorced from destination either. It\u2019s a movement of inclination requiring markers of orientation."" (Orientation in a Big World...)";green;;navigation, orientation\nsome disruption can be overlapped some of them can be a unique experience;acqua;;disruption, experience\ninteresting to see different roads;acqua;;exploration\noverlapping different paths __DRAW__(Chae will add some drawings;yellow;;plurality\nAlex would love to join);light gray;;participation\n<3;green;;positivity\nthere are different modes of reading;acqua;;plurality\n (and different modes of address);gray;;plurality\nDivers/inclusive topics go in hand with formats;violet;;accessibility, inclusivity\nThe reader should have an introduction / editorial;gray;;accessibility, inclusivity\nIdeas:;none;;title\nwe want the text to be performative;acqua;;performative\nwe create the terms of readership;red;;fruition\n** choose not intellectual texts to also have something popular, trying to make it !!!accessible!!! to everyone\u00A0;acqua;;popular, academic, addressing\nreading and writing each other\'s experiences;violet;;performative, experience\n(poetry <3);light gray;;positivity, poetry\nMake sth accessible that is normally not accessible to everyone;red;;accessibility, addressing\n(we can use intellectual text and make it accessible and more personal);yellow;;addressing, accessibility\nsomething relatable as a starting point;green;;addressing\n"connecting the ""easy"" texts to the ""serious"" ones, to see where they match,";acqua;;popular, addressing\n(comparing that way different ways of addressing);gray;;exploration\nmapping a train of thoughts that are present / / part of us, our culture, our lives, but that haven\'t been traced yet, things we all know but never really connected;acqua;;addressing, poetry, relation\nSUBJECT:;red;;purpose\nhow we are reading as a group?;acqua;;performance, plurality\ncollective act of reading;orange;;plurality, performance\nexquisite corpse;green;;plurality, performance\n<3;violet;;positivity\n-disruption of text - realising the materiality of text;light gray;;disruption, materiality\n-connection between inputs - how the reader navigates;light gray;;relation, navigation\n-generate new content - lighter, fun, exercising, poetic, popular (be more inclusive), balance, everyone could relate, accessibility\u00A0\u00A0;light gray;;addressing, popular, inclusivity, accessibility\n-not only texts;light gray;;source\nYES;yellow;;positivity\nplease;green;;positivity\n"""UNLESS WE CALL EVERYTHING A TEXT!""";red;;source\na reader where you don\'t only just read;green;;performative, source\n-different reading experiences;light gray;;performative, experience, exploration\n-a common topic or purpose;light gray;;source\n"-everyone to bring knowledge to our reader; to share knowledge (situated knowledges)";blue;;addressing, accessibility, knowledge\nsituated ;yellow;;addressing, knowledge\nknowledge ;orange;;addressing, knowledge\nDonna Haraway;yellow;;addressing, knowledge, people\n<3;orange;;positivity\n<3333;red;;positivity, lot of\n(?spelling?);yellow;;source\n-aggregation of public;orange;;addressing, accessibility, experience\n-reading as a mesh - or - text as a mesh\u00A0;orange;;source, materiality\n<3;yellow;;positivity\ndemystify the text;gray;;source, accessibility\n<3;yellow;;positivity\n(culture access can be a rabbit hole, maybe what we are doing is kind of flipping and playing w that idea?);light green;;culture\nwe want the text to be performative, we create the terms of readership;light blue;;editorial, methods\n( position, making decisions ex. what type of texts we will use?);yellow;;editorial, methods\nCriteria for content;beige;;editorial\nI like the slogan positions making decisions ha ha;grass green;;editorial\nADRESSED ;lila;;title, methods\n"\n1>Accessible (multiple layers of accessibility: Physical, contextual, intelligible, linguistically, visually, etc)";lila;;accessibility\n2>Performative;lila;;navigation, editorial\n3> Multiplayer;orange;;navigation\n4> Navigation: readers can navigate through the reader choosing their own path?;pastel blue;;navigation\n"5>ever-evolving ""product""?";just blue;;editorial, methods\nyes pls;orange;;agreeing, positivity\n> no finite shape? ;lila;;format\nwhen the public uses it, it changes? ooooooo si (a text changes everytime you read it --> interpretations);pastel blue;;format, navigation\nSo we want it to be participative?;red;;editorial, navigation\nit could be nice. ;orange;;positivity, cheering up\nthank you, BUT?;just blue;;hesitation\n__LOL__ ;yellow;;positivity, cheering up\nbut maybe maybe maybe could be a mesh of partecipative;orange;;hesitation\n(this word is great);lila;;positivity, cheering up\nis this a word joke i don\'t get? or is there just a spelling mistake hahaha;red;;hesitation\n i wouldn\'t say dependant, more like fed by, that, as we already said, can leads to different results/interpretations?;just blue;;editorial\nmaybe partecipation could be seen as a thriving of our contents. like you leave the onions in the cellar and after 1 month they are a nice plantsssss oppssss;orange;;navigation, editorial\n ___LOL___;just blue;;positivity, cheering up\ntext as a seed;orange;;methods\ntext gardening / grow a text;green ;;methods\nI water a text.;red;;methods\ntext grows/turns into something else when you water it ;light green;;methods\n"maybe a finite object so we don\'t need people to ""finish"" it, but when they start using it, the next user will find something different from the one before and so on?";just blue;;navigation, editorial\nlike a toolkit ;grass green;;methods\n(lov e this  word);just blue;;agreeing\n+1+1+1+1;orange;;agreeing, participation\nbut also a platform (NLTK);grass green;;navigation, editorial\nas a sandbox;orange;;navigation, editorial\nSOUP & BOAT AT THE SAME TIME, you can eat it but also use it to navigate \uD83D\uDE0F\uD83D\uDE0F\uD83D\uDE0F\uD83D\uDE0F\uD83D\uDE0F;grass green;;methods\nUSE METHODS YOU ARE ALREADY USING!!! (in prototyping &c);bb blue;;methods, prototyping\nuse methods you don\'t understand;sea foam;;methods, comprehension\n\u00A0cast a spell;clementine;;spell\nDIFFERENT EXPERIENCES\u00A0 in the same reader\u00A0;sky blue;;experience, different but same\nRemixing texts,\u00A0;raspberry;;remix, text\nhijack narratives;bubblegum;;hijack, text\nhacking texts;sea foam;;hijack, text\nrecontextualise texts;raspberry;;recontextualize, text\n\u00A0<3\u00A0;fog;;emoji, positivity\nagency of the reader and agency of the readers;clementine;;agency, reader\n\u00A0(https://en.wikipedia.org/wiki/Hopscotch_(Cort\u00E1zar_novel);bubblegum;;reference\ngive the reader the POWER TO DECIDE,\u00A0;sky blue;;reader, power, decision\nto decide = to orientate :\');moss green;;decision, orientation\nmake people get their own experience from the same starting point;sky blue;;experience, position\nauthority vs popularity: it could be interesting to also work on the way different texts circulate and their specific formats like f.e. highbrow text have bibliography, rap songs don\'t, etc\u00A0;lime green;;authority, popularity, circulation, format\nfake bibliography and made up references eheh ahah nagarestani cites spondgebob;clementine;;fake, references\nmarcel broodthaers-museum department of eagles (a museum with only authoritarian labels and with no objects);dentist blue;;authtority\n<3;lime green;;emoji, positivity\nwhat makes a text intellectual and what makes a text popular?;dentist blue;;text, intellect, popularity\nit\'s fine not to understand everything;sky blue;;comprehension \n<3;bubblegum;;emoji, positivity\n<3;sea foam;;emoji, positivity\n<3;fog;;emoji, positivity\n<3 Maybe we should just try to NOT understand a single thing? LOL;raspberry;;emoji, positivity\nnot EVERYTHING has to be accessible ------> but maybe accessible in every person\'s way?\u00A0;sky blue;;accessibility, personal\n\u00A0sometimes the path to access something is harsh but necessary ? ?? ?;clementine;;path, accesibility, hardship, necessity\n\u00A0maybe everyone needs different ways to access stuff, but we give for granted that everyone has the same knowledge/capabilities/experience (exemple: at school, not eeryone learns in the same way, and having a strincted way of teaching might not be the right method for every kid);sky blue;;accessibility, experience\na text changes everytime you read it;sky blue;;text, change\n\u00A0--> interpretations;lime green;;comprehension \nsqueeze into someone\'s\u00A0;sky blue;;intervention\nintimacy;lime green;;familiarity\n____SEXALERT___;sky blue;;warning\n\uD83D\uDE0F;lime green;;emoji, inside joke\nhahaha;raspberry;;reaction\n\u00A0and\u00A0attention\u00A0span;lime green;;\n(k);raspberry;;\nputting the reader in context, putting ourselves in context,\u00A0;sky blue;;\nOnce I read an interview I think it was Murakami saying that if he could make it to a reader\'s bedroom and have that connection with someone that reads him in a room in a city wherever and whenever that might be enough.;honeydew;;\n"+as a person who is still struggling reading text in English, to processing the horrifying/English text into something that I can easily read and be part of the group and participate was really empowering\nex) to be not to be text : I don\'t really understand the whole text so I just get rid of everything and just leave ""to + verb"" and it was really fun/understandable/poetic and empowering";lemon;;\nyessss giving up on understanding the text and giving value to it in the sense of the disconnected bits that we understand can also be indeed empowering and poetic in a way\u00A0;lime green;;\n!! connect to disconnect;sea foam;;\n"ongoing annotation device like:\n if  im reading and i dont understand i can put a note and someone can reply ecc ecc ecc so the text becomes something populated by the readerssss";clementine;;\n\u00A0---> this also creates a layering of comments and other texts in different times/moments (text as time-lapse);lime green;;\n\u00A0yes yes yes pls;clementine;;\nchance-based reading / i-ching\u00A0;sea foam;;\n\u00A0wow!!! python is xxi century i ching;clementine;;\n<- facts;sea foam;;\n';